Kamu ingin SOFTWARE penting dan gratis?. Dapatkan 50+ software windows dan Android kamu !
Kamu Di Bayar Hanya Untuk Nonton Video? Segera CEK DI SINI !

Membuat Artikel Terkait Dengan Scroll di Bawah Post

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Membuat Menu artikel terkait untuk membantu memudahkan terbacanya artikel yang masih berhubungan,ternyata banyak modelnya. Kali ini saya mau berbagi lagi cara memasang artikel terkait dengan model scroll. Ini akan sangat berguna untuk blog yang telah memiliki banyak artikel,mestinya akan banyak pula artikel-artikel yang berhubungan dengan artikel tersebut yang masih 1 kategori.

Dengan dibuat scroll maka artikel yang berhubungan yang muncul meski banyak jumlahnya namun tak akan makan banyak tempat karena disederhanakan dengan scroll. Jadi sebanyak apa pun halaman yang terambil hanya sebatas yang dibatasi garis scroll.

Bagaimana cara buatnya?,mari kita mulai langkahnya:
1. Masuk dashboard > pilih template > klik Edit html ,dan cari kode ]]></b:skin>.

1. Letakkan kode di bawah tepat di atasnya kode ]]></b:skin>:

/* Related Post */
.related_posts{margin-top:5px;padding:0 10px;border:1px solid #B7E8FF;background:#EEEEEE;}
.related_posts h4{color:#111;font:normal 19px/19px Arial, sans-serif;letter-spacing:-0.5px;padding:7px 0;border-bottom:solid 1px #fafafa;}
.related_posts a{color:#000;}
.related_posts ul{padding:0;}
.related_posts ul li{list-style:none;padding:4px 5px 4px 17px;border-bottom:1px solid #f9f9f9;line-height:18px;background: #EEEEEE;}

3. Kemudian silahkan anda cari lagi kode <data:post.body/> ,lalu pasang script di bawah ini tepat di bawah kode <data:post.body/> . Kalau di blog anda sudah dipasang read more auto pasang bawah kode <data:post.body/> di yang ke 2.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='related_posts'>
<div class='widget-content'>
<h4>Artikel Terkait</h4>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
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 &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;data2007&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
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 = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
</div>
</div>
</b:if>

4. Simpan template,cek hasil.

Yang saya beri warna merah itu kode untuk scroll,bila tak mau pakai scroll hapus kode yang merah.

Silahkan berbagi dengan tombol share di bawah,mungkin orang lain lebih membutuhkan artikel ini:

ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَاٰلَمِين
Jika anda merasa artikel ini manfaat,silahkan sempatkan waktu sebentar untuk berbagi.

Dapatkan Dengan Gratis Artikel Baru Dari ArsipFank Langsung ke email anda,Silahkan masukkan Email Valid dan klik Setuju:


Powered by Blogger.