Cara membuat artikel terkait di akhir postingan blog dengan fungsi scroll box

 

Hai Sobat Blogger! kembali lagi nih dengan saya,hehehe,,kali ini rizaldi priantama akan berbagi info seputar blogging nih kawan,pada masih semangat nge-blog kan?harus semangat dong!!hehehe,nah kali ini topiknya dalah Cara membuat related post/artikel terkait dengan fungsi scroll box,yaitu membuat daftar artikel yang kita miliki yang akan ditampilkan ke dalam akhir bagian posting sesuai dengan label yang diterapkan,untuk lebih detail dan jelasnya lihat contoh gambar diatas,
Gimana sobat?tertarik untuk membuatnya?caranya cukup mudah lho,,tinggal pasang dan edit sedikit kodenya sehingga cocok untuk blog sobat :) , oke langsung aja ya,daripada banyak bicara,ikuti langkah-langkah ini :

1.) Login ke akun blogger sobat
2.) Langsung menuju ke Dashboard > Rancangan > Edit Html
3.) Jangan lupa backup dulu template sobat,dengan cara mengeklik download template lengkap
4.) Centang tanda Expand template widget 
5.) Cari Kode berikut ]]></b:skin> ( untuk memudahkannya cari dengan cara menekan bersamaan tomabol Ctrl+F ) 
lalu setelah ketemu copy kode dibawah ini,lalu paste tepat diatas kode ]]></b:skin>

/* Kode CSS untuk Artikel Terkait */
#underpost{
font-family:Arial, Tahoma, Verdana, Sans-serif;
font-size:small;/* Ukuran font. */
color:#F13C3C;/* Warna teks. */
background:#ffffff;/* Warna latar belakang. */
clear:both;
float:left;
width:510px;/* Lebar area artikel terkait. Sesuaikan dengan lebar main-wrapper (kolom posting) */
-moz-border-radius:10px;
border:0;
height:auto;
margin:0 auto;
padding:10px;
}
#underpost h2{
font-family:'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;/* Jenis font heading. */
font-size:large;/* Ukuran font heading. */
color:#F13C3C;/* Warna teks heading. */
margin-bottom:5px;
border-bottom:1px solid #F3D8D8;/* Warna garis pembatas dibawah teks heading. */
padding:0 0 5px;
}
#underpost a,#underpost a:link,#underpost a:active,#underpost a:visited{
color:#0B243B;/* Warna link */
text-decoration:none;
}
#underpost a:hover{
text-decoration:underline;
}
#artikel-terkait{
overflow:auto;
width:auto;
height:200px;/* Tinggi dari artikel terkait */
padding:10px;
}

6.) Setelah itu cari kode </data:post.body> , lalu letakkan kode dibawah ini tepat diatas/sebelumnya

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='underpost'><div class='similiar'><div class='widget-content'>
<h2>Related Post</h2>
<div id='artikel-terkait'><div id='relposts'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
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;relposts&#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></div>
</b:if>

Semoga Berhasil dan Bermanfaat
Post by : Habib noer qolbi
Jangan Asal Copy Paste ! Sertakan link Rolling Creative diatas jika sobat ingin mengopy artikel ini

Posted in: Tips Blogger