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;http://lh3.ggpht.com/_cNpXRtRph18/S76dASm3WGI/AAAAAAAAEJg/AVmw4HhRdsk/rss.png&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

Tips Trik Membuat Box Cantik Efek Jahitan

• Copy kode dibawah ini dan paste diatas ]]></b:skin>

.box {
height:auto;
margin:15px auto;
line-height:1.1 !important;
font-size:15px;
padding:5px;
width:300px;
text-align: justify;
}
.abu2 {
background:#999;
outline:4px solid #888;
outline-offset:1px;
border:2px dashed #666;
}
.merah {
background:#e00;
outline:4px solid #d00;
outline-offset:1px;
border:2px dashed #a00;
}
.kuning {
background:#FD0;
outline:4px solid #FC0;
outline-offset:1px;
border:2px dashed #FA0;
}
.hijau{
background:#0C0;
outline:4px solid #080;
outline-offset:1px;
border:2px dashed #0A0;
}

• Save template

Untuk membuat box dipostingan  gunakan kode dibawah ini di mode HTML

<div class='box hijau'>
Letakan konten anda disini
</div>

Kode box hijau tersebut adalah kode tema dari box tersebut

1. abu2
2. kuning
3. merah
4. hijau

Jadi jika anda bosan dengan warna hijau anda bisa ganti dengan tema lainnya contoh warna merah misalnya,  penulisan kode HTML nya seperti ini

<div class='box merah'>
Disini letakan konten anda
</div>

Gimana sobat cukup mudah kan?....


( sumber: http://sin1aja.blogspot.com )

Read More

Tips Trik Menghapus Nomor pada Label

Cara menghilangkan nomor pada label langsung aja :

• Login di Blogger dengan ID anda.
• Klik Rancangan.
• Klik Edit HTML Jangan lupa centang Expand Template Widget.
• Lalu cari kode seperti dibawah ini (untuk mempercepat pencarian tekan Ctrl+F )

<span dir='ltr'>(<data:label.count/>)</span>

• Hapus kode yang berwarna merah tersebut
• Lalu save template anda dan lihat hasilnya

Read More

Tips Trik Menghilangkan Underline ( Garis Di Bawah Link )

Berikut ini cara menghilangkan Underline pada Link blog :

• Login dulu ke blog sobat di http://www.blogger.com/
• Masuk ke halaman Layout dan Klik Edit HTML
• Cari kode seperti  ]]></b:skin>
• Copy kode dibawah ini dan paste diatas kode ]]></b:skin>

a:link {text-decoration: none}
a:visited {text-decoration: none}
a:active {text-decoration: none}

• terakhir, simpan template sobat.

Untuk memastikan kode tersebut bekerja di template sobat, silahkan sobat membuka blog sobat.

Read More