Tips Trik Membuat Daftar Isi Diblog

Berikut langkah-langkah membuat daftar isi diblog

1. Membuat daftar isi blog di laman

• Login di blogger dengan ID anda
• Pilih  Laman
• Klik Entri Laman Baru
• Kemudian copas kode berikut kedalamnya

<script src="http://wong-sidakaton.googlecode.com/files/daftar-isi.js"></script>
<script src="http://wong-sidakaton.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc">
</script>
  

• Ganti tulisan yang berwarna merah dengan url blog anda
• Kemudian terbitkan laman dan lihat hasilnya

2. Membuat daftar isi blog di gadget/sidebar

• Login di blogger dengan ID anda
• Klik Rancangan 
• Klik Edit HTML ==> Tambah Gadget
• Copas kode berikut kedalamnya

 <div style="overflow:auto;
border: 1px solid #CCC;
margin: auto;
padding: 3px;
width: 95%;
height: 500px;
background-color: none;
text-align: left;">
<script src="http://wong-sidakaton.googlecode.com/files/daftar-isi.js"></script>
<script src="http://wong-sidakaton.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script></div>

• Ganti tulisan yang berwarna merah dengan url blog anda
• Klik simpan dan coba anda lihat hasilnya

Read More

Tips Trik Membuat Related Post Dengan Fungsi Scroll

Cara membuat Related Post Dengan Fungsi Scroll:

• Login ke blogger dengan ID sobat.
• Klik Rancangan atau Tata Letak.
• Klik Edit HTML.( jangan lupa centang expand template widget )
• Lalu cari kode ]]></b:skin> ( untuk mempermudah pencarian tekan ctrl + F3 )
• Lalu letakan code di bawah ini tepat dibawah ]]></b:skin>

 /*-- Related Post with Scroll by wong-sidakaton --*/
.rbbox{border: 1px solid #D8D8D8;padding: 5px;
background-color: #F7F7F7;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #FFFFFF;}

• Langkah selanjutnya cari kode <p><data:post.body/></p> atau <data:post.body/>
• Lalu copy kode di bawah ini dan letakkan di bawah kode <p><data:post.body/></p> atau <data:post.body/> tersebut

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Related Post:</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 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 50;
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;albri&#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>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>

• Lalu save template anda dan coba lihat hasilnya..

Read More

Tips Trik Membuat Related Post Dipostingan Blog

Cara membuatnya sbb:

• Log in di blogger
• Klik Rancangan
• Klik Edit HTML ( jangan lupa backup dulu template anda )
• Cari kode ]]></b:skin> ( Gunakan ctrl + f untuk mempercepat pencarian )
• Copy  kode di bawah ini dan paste di atas kode ]]></b:skin>

.related-posts {
border:1px solid #ddd;
background:#D8DFEA;
font-weight:bold;
width: 80%;
float:right;
}
.related-posts p {
margin:5px 10px 5px;
}
.related-posts ol {
font-weight:normal;
margin:0 0 0 25px;
}
.related-posts li {
margin-bottom: 2px;
}

• Cari kode </head> dan letakkan kode dibawah ini di atas kode </head>

<script type='text/javascript'>
//&lt;![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i &lt; json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i &lt; relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j &lt; a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;

while (i &lt; relatedTitles.length &amp;&amp; i &lt; 20) {
document.write(&#39;&lt;li&gt;&lt;a href=&quot;&#39; + relatedUrls[r] + &#39;&quot;&gt;&#39; + relatedTitles[r] + &#39;&lt;/a&gt;&lt;/li&gt;&#39;);
if (r &lt; relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}

}
//]]&gt;
</script>

• Kemudian cari kode <div class='entry entry-content'>
• Copy kode di bawah ini dan letakkan di bawah kode <div class='entry entry-content'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='float:right;'>
<div class='related-posts'>
<p>Related posts:</p>
<ol>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/>
</b:if>
</b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels(); </script>
</ol>
</div>
</div>
</b:if>

• Terakhir save template anda dan lihat hasilnya..

Read More

Tips Trik Membuat Artikel Terkait Dengan Icon

Cara pemasangan diblog sbb:

• Login ke blogger dengan ID sobat.
• Klik Rancangan.
• Klik Edit HTML.jangan lupa ( centang tulisan expand template widget )
• Lalu cari kode </head> ( untuk mempermudah pencarian tekan ctrl + F3 )
• Lalu letakan kode berikut di bawah kode </head>

<style type='text/css'>
#related-posts {
float : left; width : 100%;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2,
#related-posts h2 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(
&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMFyFyM9cFv5UQlUDxZOSPp6AfGNvy6Ve45lHS1djd9zRa-HhlW9MNcb8RqXUkHm9ltaHw9eGAXXcos_fS_gdVxnT488lldT20Mfrp-aIEPLhsLgrBlFI4uEJyaV7j2-pfrefDjzqhQas/&quot;
) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style> <script src='http://wong-sidakaton.googlecode.com/files/relatedposts.js' type='text/javascript'/>  

• Cari kode <data:post.body/> lalu pasang kode berikut di bawahnya

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font>
<font color='#FFFFFF'>
<b:loop values='data:post.labels' var='label'>
<data:label.name/>
<b:if cond='data:label.isLast != &quot;true&quot;'>,
</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if>
</b:loop> </font>
<script type='text/javascript'>
removeRelatedDuplicates();
printRelatedLabels();
</script>
</div>
</b:if>

• Save template dan coba anda lihat hasilnya

Read More