Cara Membuat related Post dibawah postingan dengan Scroll

Tutorial blog kali ini akan membahas mengenai bagaimana Cara Membuat related Post di bawah postingan dengan fungsi Scroll setelah beberapa hari yang lalu telah membahas mengenai cara membuat blog gratis pada tampilan terbaru blogger. Jika Anda tidak mau menggunakan Fungsi Scroll, Anda bisa melihat postingan terdahulu dalam blog ini mengenai bagaimana cara membuat related post di bawah postingan.

Bagaimana cara membuat related post di bawah postingan dengan fungsi scroll ? Yaa,,, pertanyaan itulah yang mengobrak abrik isi kepala saya ketika melakukan blogwalking dan melihat Related Post blog para sahabat duduk manis di bawah postingan blog. Setelah jungkir balik bersama eyang google akhirnya saya berhasil juga membuat related post di bawah postingan blog dengan fungsi scroll

Untuk membuat dan memasang related post dengan fungsi scroll di bawah postingan, ada dua kode yahg harus dimasukkan ke dalam template yaitu Kode CSS dan Javascript. Kode CSS ini berfungsi untuk mengatur warna background dari related post kita nantinya, sedangkan Javascriptnya berfungsi untuk menampilkan Artikel terkait dan mengatur ukuran dari Scroll related post kita nantinya.

Di bawah ini beberapa langkah yang bisa Anda ikuti untuk memasang related post di bawah postingan blog dengan fungsi scroll

Cara membuat related post di bawah postingan dengan fungsi scroll

1. Seperti biasanya Anda harus login dulu di blogger.com agar bisa mengakses akun blog kesayangan Anda
2. Setelah berhasil login silahkan Anda memilih template seperti screenshoot di bawah ini
   
   
   
3. Setelah memilih template, Pilih edit HTML>>Klik Lanjutkan>>kemudian berikan Centang atau Ceklist Expand template blog. Tanda ceklist ini sangat penting agar kode kode yang tersembunyi bisa nanti muncul pada saat proses pencarian kode CSS dan kode data post body
4. Selanjutnya kita harus memasang kode CSS untuk mengatur tampilan related post kita nantinya. Caranya, silahkan Anda cari Kode ]]></b:skin>. (Tekan Ctrl + F untuk memudahkan pencarian) atau melihat postingan sebelumnya dalam blog ini mengenai Cara Tercepat dan Mudah Mencari Kode HTML Pada Template Blog
5. Jika Kodenya sudah Ketemu, silahkan Anda Copy Kode CSS di bawah ini dan letakkan di atas kode ]]></b:skin>
6. .rbbox{border: 1px solid #D8D8D8;padding: 5px; background-color: #808080;-moz-border-radius:5px; margin:5px;} .rbbox:hover{background-color: #808080;}
7. Bagaimana, Sudah ? Jika sudah selanjutnya kita harus memasang Javascript related postnya. Caranya, Silahkan Anda cari Kode <data:post.body> . Jika kode itu ada 2, silahkan Anda pilih yang ke 2 dan letakkan Kode related postnya tepat di bawah Kode <data:post.body>
   
   Jika Anda pernah mengikuti tutorial sebelumnya mengenai Bagaimana Cara Membuat Permalink SEO Pada Blog, maka letakkan Kode Kotak related post tepat di bawah Kode Permalink SEO Anda
   
   Di bawah ini kode Related Postnya
   
   
8. <b:if cond='data:blog.pageType == "item"'><h2> Artikel Terkait </H2><div class='rbbox'> <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> <div id='albri'/> <script type='text/javascript'>var homeUrl3 = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 999; var maxNumberOfLabels = 999; maxNumberOfPostsPerLabel = 999; maxNumberOfLabels = 999; function listEntries10(json) { var ul = document.createElement('ul'); var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ? json.feed.entry.length : maxNumberOfPostsPerLabel; for (var i = 0; i < maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl = entry.link[k].href; break; } } var li = document.createElement('li'); var a = document.createElement('a'); a.href = alturl; if(a.href!=location.href) { var txt = document.createTextNode(entry.title.$t); a.appendChild(txt); li.appendChild(a); ul.appendChild(li); } } for (var l = 0; l < json.feed.link.length; l++) { if (json.feed.link[l].rel == 'alternate') { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13); var k; for (k=0; k<20; k++) label = label.replace("%20", " "); var txt = document.createTextNode(label); var h = document.createElement('b'); h.appendChild(txt); var div1 = document.createElement('div'); div1.appendChild(h); div1.appendChild(ul); document.getElementById('albri').appendChild(div1); } } } function search10(query, label) { var script = document.createElement('script'); script.setAttribute('src', query + 'feeds/posts/default/-/' + label + '?alt=json-in-script&callback=listEntries10'); script.setAttribute('type', 'text/javascript'); document.documentElement.firstChild.appendChild(script); } var labelArray = new Array(); var numLabel = 0; <b:loop values='data:posts' var='post'><b:loop values='data:post.labels' var='label'>textLabel = "<data:label.name/>"; var test = 0; for (var i = 0; i < labelArray.length; i++) if (labelArray[i] == textLabel) test = 1; if (test == 0) { labelArray.push(textLabel); var maxLabels = (labelArray.length <= maxNumberOfLabels) ? labelArray.length : maxNumberOfLabels; if (numLabel < maxLabels) { search10(homeUrl3, textLabel); numLabel++; } } </b:loop></b:loop></script></div> <script type='text/javascript'>RelPost();</script></div> </b:if>
9. Terakhir simpan template blog Anda dan lihat hasilnya

Bagaimana ? Apa Anda sudah berhasil memasang related post dengan fungsi scroll di bawah postingan blog Anda ? Untuk melihat demonya Anda bisa melihat langsung dalam blog ini atau melihat screenshoot related postnya di bawah ini

Dengan adanya related post yang kita pasang di bawah postingan blog maka akan mempermudah pengunjung blog kita untuk menjelajahi Artikel artikel lainnya yang masih berkaitan sehingga bisa menambah jumlah Pageview blog kita.

Semoga tutorial blog sederhana mengenai Cara Membuat related Post di bawah postingan dengan Scroll ini bisa memberikan setetes manfaat kepada sahabat blogger yang ingin membuat dan memasang Artikel terkait arau related Post di bawah postingan blog.

Terus ciptakan karya terindah lewat jemari Anda melalui postingan demi postingan yang berkualitas untuk memajukan dunia blogging di Indonesia. Saya tunggu karya terindah Anda !

Happy Blogging dan Salam SUKSES !

Dengan memasukan alamat email Anda dibawah ini, berarti Anda akan dapat kiriman artikel terbaru dari www.hayardin.com di inbox E-mail anda

Enter your email address:


Delivered by FeedBurner

Lokasi:

Berbagi :