Cara Membuat Artikel Terkait Dengan Scroll di Blog
 |
| Cara Membuat Artikel Terkait Dengan Scroll di Blog |
TENLIBRARY - Cara Membuat Artikel Terkait Dengan Scroll di Blog - Di postingan saya kali ini, saya akan membahas tentang Cara Membuat Related Post Dengan Scroll di Blog. Related post atau Artikel terkait merupakan widget yang berfungsi untuk menerbitkan postingan terkait dari postingan tersebut dalam tampilan perLabel. Biasanya para blogger memasang widget ini dibawah postingan blog. Mau tau cara memasangnya ?. Langsung aja ikutin caranya dibawah.
CARA MEMBUAT ARTIKEL TERKAIT DENGAN SCROLL DI BAWAH POSTINGAN BLOG
1. Login ke akun blogger kamu tentunya.
2. Pada Dashboard pilih Template.
3. Kemudian pilih Edit HTML.
4. Klik kotak Edit HTML dan tekan CTRL + F pada keyboard.
5. Cari kode ]]></b:skin> dan letakkan kode berikut tepat diatas kode tersebut.
.rbbox{border: 1px solid rgb(192, 192, 192); padding: 5px;background-color: #f0f0f0; -moz-border-radius:5px; margin:5px; } .rbbox:hover{ background-color: rgb(255, 255, 255); }
6. Setelah itu, cari kode <data:post.body/> atau <p><data:post.body/></p>. Biasanya terdapat 2-5 kode <data:post.body/>. Contohnya diblog gue ada 5 kode <data:post.body/>.
7. Letakkan kode dibawah ini setelah kode <data:post.body/> yang kedua (dikeromendasikan).
<b:if cond='data:blog.pageType == "item"'><br/><br/><H2>Related Posts</H2> <div class='rbbox'> <div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'> <div id='ardi33'/> <script type='text/javascript'> var homeUrl3 = "<data:blog.homepageUrl/>"; var maxNumberOfPostsPerLabel = 4; var maxNumberOfLabels = 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; 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('ardi33').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>
8. Langkah terakhir, Simpan dan lihat hasilnya.
Sekian postingan saya kali ini , semoga dapat bermanfaat bagi kamu. Selamat mencoba dan semoga berhasil !.
Kamu sedang membaca artikel tentang Cara Membuat Artikel Terkait Dengan Scroll di Blog dan kamu bisa menemukan artikel Cara Membuat Artikel Terkait Dengan Scroll di Blog ini dengan url http://tenlibrary.blogspot.com/2013/05/cara-membuat-artikel-terkait-dengan.html. Kamu boleh menyebarluaskan atau mengcopy artikel Cara Membuat Artikel Terkait Dengan Scroll di Blog ini jika memang bermanfaat bagi kamu,namun jangan lupa untuk mencantumkan link sumbernya. Terimakasih.
Jika kamu menyukai Artikel di blog ini, Silahkan
klik disini untuk berlangganan gratis via email, dengan begitu kamu akan mendapat kiriman artikel setiap ada artikel yang terbit di TENLIBRARY
scripnya ada yg salah...
BalasHapusYang mana ya gan yang salah ?. Saya rasa itu bener semua. Saya juga udah coba dan berhasil.
Hapuseeeeh punya q kok tiba2 menghilang???
Hapuspadahal cuman ganti code warna...tak balikin juga g muncul??
chrono5oft.blogspot.com
oh maaf gan dah bisa makasih infonya...bagi post ya
Hapus:)
hehehe... sama-sama gan. Sebaiknya kalo sedang edit HTML perhatikan dengan teliti kode yang ingin diedit atau dimasukan. Karena kalau salah sedikit bisa repot jadinya.
HapusSilahkan gan, kalau bisa sih cantumkan link ya. Terimakasih kunjungannya.
Thanks gan infonya mau diterapin ke blog ane nih!!
BalasHapusSama-sama gan. Sukses terus buat blognya.
Hapusterimakasih sob atas infonya. ini yang aku cari!!
BalasHapuskunjungi balik ya sob!!
serupting.blogspot.com
Sama-sama sob. Terimakasih kunjungannya.
Hapusgan, kok pnya aku teksnya gak muncul. tapi kotaknya muncull..
BalasHapusmhon bantuannya
Mungkin pemasangan scriptnya. Perhatikan dengan benar lagi pemasangan scriptnya, dan ulang lagi langkah-langkahnya.
HapusPerlu diingat, untuk menggunakan "Artikel Terkait", setiap postingan di blog agan juga harus memiliki label. Karena yang akan dimunculkan adalah postingan per-label.
terimaksih banyak gan artikelnya ... sukses selalu gan !!!
BalasHapusnice bro
BalasHapus