Rabu, 18 Desember 2013
Browse Manual »
Wiring »
cara
»
kategori
»
membuat
»
posts
»
related
»
sesuai
»
Cara Membuat Related Posts Sesuai Kategori
Cara Membuat Related Posts Sesuai Kategori
Cara membuat related posts sesuai kategori. Seperti yang pernah saya utarakan sebelumnya, kalau tidak hanya menyajikan informasi seputar pengusaha dan bisnis internet tapi juga tutorial blogging yang bermanfaat bagi blogger Indonesia. Nah untuk tutorial blogging sebelumnya silahkan baca disini. Kali ini kita akan membahas seputar cara membuat artikel terkait sesuai kategori.
Pada tutorial kali ini kita akan membuat related posts atau artikel terkait dengan scroll. Kenapa harus dengan scroll? Karena scroll dapat menghemat tempat dan juga mampu memuat lebih banyak artikel terkait.
Cara membuat related posts sesuai kategori dengan scroll ini akan menampilkan sejumlah Label / Kategori yang kita inginkan. Artikel terkait dengan scroll sesuai kategori ini akan menampilkan maksimal 3 kategori dari konten anda. Langsung saja lihat contohnya dibawah ini.
Inilah cara membuat related posts sesuai kategori dengan scroll
1. Login ke akun Blogger anda
2. Buka Elemen Template, Pilih Edit HTML
3. Cari kode <div class=post-footer-line post-footer-line-1>. Gunakan CTRL + F untuk memudahkan pencarian kode.
4. Bila anda menemukan 2 kode tersebut dalam template blog anda, pilih kode yang pertama.
5. Lalu copy kode dibawah ini
<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 = 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('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>
6. Kemudian paste kode tersebut tepat dibawah kode <div class=post-footer-line post-footer-line-1>.
7. Simpan template blog anda.
8. Cek hasilnya
9. Selesai
*Peringatan :
- <h2>Artikel Terkait:</h2> bisa anda ganti sesuai keinginan anda. Misal : Related Posts, Rekomendasi, Yang Mirip, dll.
- <div style="border: 1px solid #ccc; height: 200px; margin: 0; overflow: auto; padding: 10px;"> adalah tampilan kotak artikel terkait tsb. Margin : jarak antara kotak dengan main, Padding : jarak antara isi artikel terkait dengan kotak, border : batas, 1px tsb adalah tebal batasnya, solid adalah jenis batasnya dan #ccc adalah warna batasnya, Height : tinggi kotak artikel tekait ( kalau anda rubah kode 200pxmenjadi 0 maka kotak related post yang tampil akan menyesuaikan dengan jumlah artikel terkait. Sedangkan jika tetap 200px maka kotak tsb akan otomatis memberi tombol scrool apabila artikel terkait tsb sudah melebihi batas.
- maxNumberOfPostsPerLabel = 100; adalah jumlah posting atau artikel terkait yang ingin di tampilkan maxNumberOfLabels = 3; adalah jumlah label terkait yang ingin ditampilkan
Demikianlah artikel cara membuat Related Posts Sesuai Kategori dengan Scroll dari . Semoga dapat bermanfaat bagi kita semua. Maju terus Blogger Indonesia.
Langganan:
Posting Komentar (Atom)
Tidak ada komentar:
Posting Komentar