Menampilkan Navbar Hanya Saat Disorot Mouse

Menyembunyikan navbar blogspot dan menampakkanya saat disorot mouse. Cara ini tentunya lebih arif ketimbang menghapus navbar blogspot tersebut pada halaman blog anda, karena cara ini tidak melanggar Blogger TOS.

NAVBAR TERSEMBUNYI

Bagaimana cara menyembunyikan navbar blogspot dan menampilkanya saat disorot oleh mouse ? Ikuti langkahnya dibawah.

1. Masuk akun blogger anda.

2. Pilih template, klik Edit HTML, dan klik Expand Widget

3. Cari kode ini

]]></b:skin>

4. Stelah ketemu, tambahkan kode dibawah ini sebelum ]]></b:skin>

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

5. Save template anda

MENGHAPUS NAVBAR

Lalu bagaimana caranya bila anda ingin menghapus navbar blogspot tersebut ?
Anda tinggal mengganti saja kode yang ditambahkan di atas dengan kode ini

#navbar {height:0px; visibility:hidden; display:none; }

Atau bisa juga kode ini

#navbar-iframe {display: none !important;}

Kemudian save template. 

NAVBAR TRANSPARAN
Kalau anda ingin membuat navbar transparan agar menyatu dengan warna blog anda.
Silahkan ganti kodenya dengan kode yang ini
 
#navbar-iframe {opacity:0.2; filter:alpha(Opacity=0) }
#navbar-iframe:hover {opacity:0.5; filter:alpha(Opacity=100, FinishedOpacity=50)}

Setelah selesai jangan lupa save templatenya.

Dan lihat hasilnya

Membuat Navigasi Breadcrumb di Blogspot

Bagaimana cara membuat Navigasi Breadcrumb ? Sebenarnya telah banyak yang membuat tutorial cara membuat navigasi breadcrumb, baik di wordpress maupun di blogspot. Kali ini tutorial cara pasang breadcrumb di blogspot agak berbeda dari yang sudah-sudah. Berikut ini adalah cara membuat breadcrumb di blogspot.com

1. Login ke blogger degan ID anda.
2. Klik Tata Letak / layout
3. Kemudian klik tab Edit HTML
4. Click Download Full Template and please back up your template first. Untuk menghindari bila sewaktu-waktu ada kesalahan.
5. Beri tanda centang pada kotak kecil di samping tulisan Expand Template Widget.

6. Cari kode ]]></b:skin>
7. Copy lalu paste kode di bawah ini persis di atas kode ]]></b:skin>

/* Breadcrumbs
----------------------------------------------- */
.breadcrumbs {
padding:5px 5px 5px 0;
margin:0;font-size:95%;
line-height:1.4em;
border-bottom:4px double #e2e7b4;
}
.breadcrumbs a {
text-decoration:none;
color: #000000;
}

8. Setelah itu silahkan cari kode berikut pada template anda :

<b:includable id='post' var='post'>

9. Copy lalu paste kode di bawah ini persis di bawah kode <b:includable id='post' var='post'>

<div class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> 

<b:if cond='data:blog.pageType == &quot;item&quot;'> 

<div class='breadcrumbs'><a expr:href='data:blog.homepageUrl'>Belajar Saraf</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> 

<a expr:href='data:label.url' rel='tag'><data:label.name/></a> 

<b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if> 

</b:loop> </b:if> &#187; <data:post.title/> </div> </b:if> </b:if>

10. Simpan/save dan silahkan lihat hasilnya secara langsung di atas judul postingan

Style template seperti ini akan menambah seo friendly sebuah template dan semoga akan semakin meningkatkan serp anda dalam search engine. Semoga berhasil.

Memasang Animasi Sosial Bookmark Share di Blog

Tutorial cara memasang tombol menu share sosial bookmark di blog mungkin telah banyak sekali para pakar yang membuat. Tapi yang ini akan saya berikan tombol menu sosial bookmark share yang bagus untuk anda coba pasang diblog.

Lansung saja. bagaimana cara memasang animasi sosial bookmark share di blog, seperti di blog Belajar Saraf ini.


Sebelum anda mulai mengedit, selalu back up dulu template anda untuk menghindari apabila terjadi kesalahan.


1. Masuk ke akun blog anda.
2. Pilih Template kemudian klik Edit HTML, lalu setelah itu klik Expand Widget.
3. Carilah kode </body>, klik saja Ctrl + F di keyboard anda untuk mempermudah pencarian
4. Copy paste kode berikut tepat di atas kode </body>

<!-- Start Shareaholic Sassy Bookmarks HTML - http://www.spiceupyourblog.com -->
<div class='shr_ss shr_publisher'>
</div>
<!-- End Shareaholic Sassy Bookmarks HTML -->
<!-- Start Shareaholic Sassy Bookmarks settings -->
<script type='text/javascript'>
var SHRSS_Settings = {&quot;shr_ss&quot;:{&quot;src&quot;:&quot;//dtym7iokkjlif.cloudfront.net/media/downloads/sassybookmark&quot;,&quot;link&quot;:&quot;&quot;,&quot;service&quot;:&quot;5,7,2,313,38,201,88,74&quot;,&quot;apikey&quot;:&quot;b87f5899d80a5edce8b5e55f58542ef0f&quot;,&quot;localize&quot;:true,&quot;shortener&quot;:&quot;bitly&quot;,&quot;shortener_key&quot;:&quot;&quot;,&quot;designer_toolTips&quot;:true,&quot;tip_bg_color&quot;:&quot;black&quot;,&quot;tip_text_color&quot;:&quot;white&quot;,&quot;viewport&quot;:true,&quot;twitter_template&quot;:&quot;${title} - ${short_link} via @Shareaholic&quot;}};
</script>
<!-- End Shareaholic Sassy Bookmarks settings -->
<!-- Start Shareaholic Sassy Bookmarks script -->
<script type='text/javascript'>
(function() {
var sb = document.createElement(&quot;script&quot;); sb.type = &quot;text/javascript&quot;;sb.async = true;
sb.src = (&quot;https:&quot; == document.location.protocol ? &quot;https://dtym7iokkjlif.cloudfront.net&quot; : &quot;http://cdn.shareaholic.com&quot;) + &quot;/media/js/jquery.shareaholic-publishers-ss.min.js&quot;;
var s = document.getElementsByTagName(&quot;script&quot;)[0]; s.parentNode.insertBefore(sb, s);
})();
</script><small><a href='http://www.spiceupyourblog.com/2012/05/animated-sassy-social-bookmark-gadget.html'>Animated Social Gadget</a> - <a href='http://www.spiceupyourblog.com'>Blogger And Wordpress Tips</a></small>
<!-- End Shareaholic Sassy Bookmarks script -->
<!-- End Shareaholic Sassy Bookmarks HTML - http://www.spiceupyourblog.com -->

5. Terakhir klik save.

Dan lihat hasilnya.