Cara Membuat Navigasi Breadcrumb

Menu Breadcrumb adalah menu navigasi seperti gambar di samping. Hampir semua pengguna Blog telah memasangnya. Biasanya Menu Breadcrumb dipasang di atas postingan.

Ni Tutorialnya :

1. Login ke Blogger, Klik Rancangan, Edit Html, centang Expand Template Widget
2. Copi kode CSS berikut :
   
   .breadcrumbs{padding:5px 5px 5px 0px; margin: 0px 0px 15px 0px; font-size:95%; line-height: 1.4em; border-bottom:3px double #e6e4e3;
   }
3. Letakkan kode tersebut sebelum kode ]]></b:skin>
4. Kemudian cari kode [biar lebih cepat menggunakan Ctrl+F]
   
   <b:include data='top' name='status-message'/>
   
   Hapus dan ganti dengan kode
   
   <b:include data='top' name='status-message'/>
   <b:include data='posts' name='breadcrumb'/>
5. Lalu cari kode :
   
   <b:includable id='main' var='top'>
   
   Hapus kode tersebut, dan ganti dengan kode di bawah ini :
   
   
   <b:includable id='breadcrumb' var='posts'> <b:if cond='data:blog.homepageUrl == data:blog.url'> <!-- No breadcrumb on home page--> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <p class='breadcrumbs'> <span class='post-labels'>Browse &gt; <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a> <b:loop values='data:posts' var='post'> <b:if cond='data:post.labels'> <b:loop values='data:post.labels' var='label'>&gt; <a expr:href='data:label.url' rel='tag'><data:label.name/></a> <b:if cond='data:label.isLast == &quot;true&quot;'>&gt; </b:if> </b:loop> <b:else/> &gt; </b:if> <span><data:post.title/></span> </b:loop> </span> </p> <b:else/> <b:if cond='data:blog.pageType == &quot;archive&quot;'> <!-- breadcrumbs for blogspot--> --> <p class='breadcrumbs'> <span class='post-labels'> <a expr:href='data:blog.homepageUrl'>Home</a> &gt; Archives for <data:blog.pageName/> </span> </p> <b:else/> <b:if cond='data:blog.pageType == &quot;index&quot;'> <p class='breadcrumbs'> <span class='post-labels'> <b:if cond='data:blog.pageName == &quot;&quot;'> <a expr:href='data:blog.homepageUrl'>Home</a> &gt; All posts <b:else/> <a expr:href='data:blog.homepageUrl'>Home</a> Posts filed under &gt;<data:blog.pageName/> </b:if> </span> </p> </b:if> </b:if> </b:if> </b:if> </b:includable> <b:includable id='main' var='top'>
6. Simpan Template

Jangan lupa tiggalkan komentar yaaa...!!!!

More about → Cara Membuat Navigasi Breadcrumb

Cara Membuat Artikel Terkait dengan Scroll

Mungkin sudah satu tahun saya tidak membuat artikel tentang blog. Tiap hari kerjanya cuma nyari-nyari kode aja. memang, kalo masalah ngarang saya tak begitu hobi.

Artikel Terkait berfungsi agar pengunjung akan membaca artikel di Artikel Terkait dan itu akan membuat Blog kita semakin laris maniiiissss(kayak makanan aja..:D).

Sekarang langsung saja pada topik permasahannya :

1. Buka ID Blogger Sobat
2. Kemudian Klik Rancangan
3. Pilih Edit Html
   Saya sarankan membuckup template terlebih dahulu
4. Cari kode berikut <data:post.body/>
   Jika sobat sudah menggunakan read more, sobat akan menemukan 2 kode <data:post.body/>
5. Letakkan kode di bawah ini tepat setelah kode <data:post.body/> yang pertama
<b:if cond='data:blog.pageType == &quot;item&quot;'> <br/> <br/> <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 = &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;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>
6. Setelah itu, letakkan kode berikut ini diatas kode ]]></b:skin>
   
   
   
   .rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
   background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
   .rbbox:hover{background-color: rgb(255, 255, 255);}
   
   
   
7. Terakhir, Simpan Template

More about → Cara Membuat Artikel Terkait dengan Scroll

Meletakkan Jam di Pojok

Jika kalian meletakkan jam di pojok,,,pasti akan lebih terlihat..

dan kalian tidah perlu mengarahkan kebawah...

Begini langkah-langkahnya ...

1. Log in ke Blogger
2.  Pilih Rancangan 
3.   Kemudian pilih Edit Laman
4. Buka gadget jam anda
5. Letakkan kode di bawah ini tepat di atas kode jam anda

<a style=”display:scroll;position:fixed;top:0;left:0;”>
<p style=”text-align:center;”><strong><span style=”color:#ff00ff;”></span></strong></p>
<p style=”text-align:center;”>

6. Kemudian letakkan kode di bwah ini tepat di bawah kode jam anda

</p></a>

7. Jangan lupa di save ya...!

More about → Meletakkan Jam di Pojok

Meletakkan Gadget Kode Warna HTML

Jika kalian ingin mengetahui kode warna HTML, tak usah bingung..

Saya akan berbagi gadget kode warna HTML..

Kalian tinggal mengcopy di halaman blog anda..

Langkah-langkahnya sebagai berikut :

1. Log in ke Blogger
2. Pilih Edit Laman
3. Kemudian Rancangan
4. Tambah Gadget
5. Pilih HTML/Javascript
6. Kemudian kalian tinggal mengcopy kode di bawah ini..

<center><script src="http://gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/103534220535816043845/colorpicker.xml&amp;synd=open&amp;w=320&amp;h=180&amp;title=Color%20Picker%20Gadget&border=%23ffffff%7C3px%2C1px+solid+%23999999&amp;output=js"></script></center>

Hayoooo..!

Harus di save lo..?

More about → Meletakkan Gadget Kode Warna HTML