Recommended Post Slide Out For Blogger

Cara Memasang Menu Breadcrumb Slider Mode pada Blog

RasyaShare - Pada postingan kali ini, RasyaShare akan ngasih tutorial tentang cara memasang Menu BreadCrumb Slider Mode pada blog khususnya untuk platform blogger. Seperti yang kita tahu memasang Menu BreadCrumb termasuk trik SEO penting untuk sebuah blog, karena dengan dipasangnya Menu BreadCrumb pada blog, maka google akan lebih mudah meng-Index blog kita, bahkan dapat membuat blog kita masuk sepuluh besar di pencarian google.

Sedikit clue, pemasangan Menu BreadCrumb pada tutorial kali ini akan melibatkan JQuery Code. Untuk tampilan Menu BreadCrumbnya teman-teman jangan khawatir, karena tampilannya super menarik dengan efek slider yang dapat memanjang dan memendek sehingga tampilan blog kita lebih rapi dan tampil profesional.

Berikut akan saya berikan tutorialnya. Untuk tampilan screenshootnya, bisa dilihat dibawah ini dan kebetulan untuk demonya bisa langsung dilihat pada blog ini, karena saya sudah meng-apply Menu BreadCrumb mode Slider ini.

Tutorial Memasang Menu BreadCrumb Slider Mode Pada Blog
1. Login ke account blogger kamu
2. Masuk ke bagian template, kemudian pilih edit template
3. Pilih edit HTML, jangan lupa ceklist expand template
4. Cari kode seperti dibawah ini
]]></b:skin>
5. Copy kode dibawah ini, kemudian letakkan kode tersebut tepat diatas kode yang kita cari tadi ]]></b:skin>
.module:after{clear:both;content:".";display:block;height:0;visibility:hidden}
* html .module{height:1%;overflow:visible}
* + html .module{min-height:1%}
.breadCrumbHolder{font-size:12px;line-height:21px;color:#444;font-family:Arial, Helvetica, sans-serif;font-style:normal;font-variant:normal;font-weight:400;margin:15px 0 5px}
.breadCrumbHolder a{color:#0E82C7;font-size:inherit;font-weight:inherit;text-decoration:none}
.breadCrumb{float:left;display:block;height:21px;overflow:hidden;width:508px;border:solid 1px #dedede;background:#fff;margin:0;padding:5px}
.breadCrumb ul{height:21px;display:block;margin:0;padding:0}
.breadCrumb ul li{display:block;float:left;position:relative;height:21px;overflow:hidden;line-height:21px;font-size:.9167em;background:url(http://lh4.ggpht.com/_xcD4JK_dIjU/TH5OE19eRfI/AAAAAAAAEeI/oQSb_A5WIGY/s800/Chevron.gif) no-repeat 100% 0;margin:0 6px 0 0;padding:0 10px 0 0}
.breadCrumb ul li div.chevronOverlay{position:absolute;right:0;top:0;z-index:2}
.breadCrumb ul li span{display:block;overflow:hidden}
.breadCrumb ul li a{display:block;position:relative;height:21px;line-height:21px;overflow:hidden;float:left}
.breadCrumb ul li.first a{height:16px!important;text-indent:-1000em;width:16px;margin-top:2px;overflow:hidden;background:url(http://lh4.ggpht.com/_xcD4JK_dIjU/TH5OFFVF1kI/AAAAAAAAEeQ/Dr3dADHxd6M/s800/IconHome.gif) no-repeat 0 0;padding:0}
.breadCrumb ul li.first a:hover{background-position:0 -16px}
.breadCrumb ul li.last{background:none;margin-right:0;padding-right:0}
.chevronOverlay{display:none;background:url(http://lh6.ggpht.com/_xcD4JK_dIjU/TH5OFOpTroI/AAAAAAAAEeM/GxOgEVpiMPY/s800/ChevronOverlay.png) no-repeat 100% 0;width:13px;height:20px}
6. Selanjutnya, cari kode berikut
</head>
7. Kemudian copy kode dibawah ini dan letakkan tepat diatas kode yang dicari tadi </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://plugins.jquery.com/files/jquery.easing.1.2.js.txt' type='text/javascript'/>
<script src='http://nurulimaminfo.googlecode.com/files/jquery.jBreadCrumb.1.1.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {
jQuery("#breadCrumb").jBreadCrumb();
});
//]]>
</script>
8. Cari kode dibawah ini
<b:includable id='main' var='top'>
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
9. Copy kode dibawah ini lalu letakkan di atas kode yang kita cari tadi
<b:includable id='breadCrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<div class='breadCrumb module' id='breadCrumb'>
<ul>
<li><a expr:href='data:blog.homepageUrl' rel='tag'>Beranda</a></li>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'>
<li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li>
</b:if>
</b:loop>
<li><data:post.title/></li>
</b:if>
</b:loop>
</ul>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<div class='breadCrumb module' id='breadCrumb'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
<li>Arsip untuk <data:blog.pageName/></li>
</ul>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadCrumb module' id='breadCrumb'>
<ul>
<b:if cond='data:blog.pageName == ""'>
<li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
<li>Seluruh Artikel</li>
<b:else/>
<li><a expr:href='data:blog.homepageUrl'>Beranda</a></li>
<li>Artikel Pada Kategori <data:blog.pageName/></li>
</b:if>
</ul>
</div>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
10. sisipkan kode dibawah ini pada kode yang kita cari di tahap 8
<div class='breadCrumbHolder module'>
<b:include data='posts' name='breadCrumb'/>
</div>
<div class='chevronOverlay main'/>
Sehingga kodenya akan seperti ini
<b:includable id='main' var='top'>
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<div class='breadCrumbHolder module'>
<b:include data='posts' name='breadCrumb'/>
</div>
<div class='chevronOverlay main'/>
<data:defaultAdStart/>
<b:loop values='data:posts' var='post'>
11. Pilih Simpan
12. Selesai

Keterangan :
a. Untuk menampilkan semua label pada BreadCrumb, silahkan cari kode di bawah ini
<b:if cond='data:label.isLast == &quot;true&quot;'>
<li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li>
</b:if>
Silahkan edit dan hilangkan sehingga akan seperti di bawah ini
<li><a expr:href='data:label.url' rel='tag'><data:label.name/></a></li>

0 komentar:

Posting Komentar