Auto Hide Blogger Navbar

Blogger Navbar adalah frame yang berukuran kecil milik blogger yang terdapat di bagian atas blog. Fitur-fitur navbar blogger [B]: akan membawa anda kembali ke www.blogger.com. Search Blog: memudahkan anda untuk mencari blog lainnya. Flag Blog: memungkinkan anda menandai blog yang telah melanggar TOS blogger atau persyaratan layanan blogger dan kebijakan konten blogger. NextBlog: akan membawa anda secara acak, terutama kepada blog yang baru diupdate. [email address]: Jika anda masuk ke account anda, anda akan melihat alamat email anda sendiri di sini. Orang lain yang membaca blog anda tidak akan melihat email ini, dia hanya dapat melihat emailnya sendiri jika dia loggin ke blognya. Dashboard: Jika anda loggin, anda akan memiliki link ke dashboard anda sendiri. Sign In/Out: Menampilkan kondisi apakah anda sedang loggin dan pilihan untuk keluar dari blog anda.

Navbar blogger bisa dimodifikasi dengan cara menghilangkan navbar blogger, membuat auto hide navbar blogger dan membuat navbar blogger transparan serta modifikasi lainnya. Dari ketiga pilihan di atas, saya paling suka trik blogger membuat auto hide navbar blogger. Untuk apa di auto hide? Sederhana, agar tampilan blog lebih manis saja. Persyaratan layanan blogger tidak menulis secara rinci tentang peraturan navbar ini. Menampilkan navbar blogger secara default berguna untuk memudahkan pengguna blogspot dan pengunjung yang melihat blog kita. Bila ini dihilangkan, maka artinya kita telah mengurangi salah satu fitur blogger yang diciptakan untuk kemudahan penggunanya..

Cara membuat auto hide navbar blogger
Loggin ke blog dengan ID kamu » Pilih Layout » Pilih Edit HTML » Centang Expand Widgets Template » Sebagai tambahan silahkan backup dulu template kamu dengan klik Download Full template dan simpan di komputer.
Cari kode ]]></b:skin> Agar mudah mencarinya silahkan tekan Ctrl F atau F3 pada kebor. Bila sudah ditemukan, maka copy kode berikut ini dan paste tepat di atas kode tadi.

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

Lalu klik simpan template dan lihat hasilnya.

Cara membuat navbar bloger transparan
Sama seperti cara di atas, hanya saja kode yang harus kamu paste di atas kode ]]></b:skin> adalah kode berikut.

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

Lalu klik simpan template dan lihat hasilnya.

Cara menghilangkan navbar blogger
Sama seperti cara di atas, namun kode yang harus kamu paste di atas kode ]]></b:skin> adalah kode berikut.

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

Lalu klik simpan template dan lihat hasilnya. Silahkan pilih sobat Dunia Tips n Trik modifikasi navbar blogger mana yang kamu suka.

Cara membackup template blog sendiri

Mudah banget koq backup template blog sendiri, gini caranya klo gak salah:

1. Login pada Blogger akan muncul dasbor.
2. Pilih Tata Letak/Layout
3. Kemudian Edit HTML
4. Klik Expand Widget Template: langkah terbaik adalah juga men-download template dengan cara klik Download Template Lengkap dan save klik OK.
5. Selesai

Selamat mencoba sobat Dunia Tips n Trik ... bila ingin membuat auto hide blogger navbar disini caranya.

Membuat Related Post

Cara membuat related post atau posting terkait adalah trik blogger yang sangat berguna. Setelah saya berjalan-jalan mengunjungi kawan-kawan lainnya, masih banyak yang belum memasang related post pada blognya. Padahal sebenarnya related post atau posting terkait ini sangat memudahkan pengunjung blog yang datang untuk menemukan artikel-artikel lama yang terkait pada postingan yang sedang ditampilkan disebut navigasi blog yang sehat. Related post diharapkan juga dapat meningkatkan page view pada blog kita, karena jika pengunjung melihat satu halaman maka akan tampil posting yang berkaitan yang mudah-mudahan juga diklik untuk dibaca sehingga efeknya akan meningkatkan page view alexa rank atau peringkat alexa rank. Manfaat related post lainnya adalah mempercantik tampilan blog agar lebih hidup dan kreatif atraktif.

Saya rasa cukup sudah pembukaannya, langsung saja ikuti langkah berikut
1#Login dengan ID blog kamu »» klik Tata Letak »» pilih Edit Html »» centang Expand Widget Template »» Download template untuk backup template blog kamu (penting!)
2#Letakkan script html berikut ini tepat di bawah kode yang pertama dari <data:post.body/> (biasanya ada dua kalau kita telah memasang read more blog). Kalau belum, berarti langsung saja letakkan tepat di bawah kode tadi. Bila sulit mencarinya, kamu tinggal tekan kebor Ctrl F atau F3 untuk memudahkan mencarinya.

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Related Post</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
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;data2007&#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>
</div>
</b:if>

4# Klik simpan dan selesai.

Kamu juga bisa mengganti tulisan Related Post dengan kalimat yang lain. Misalnya dengan kalimat "posting yang berkaitan" "mungkin kamu ingin baca yang ini" "baca juga yang berikut ini" atau kalimat apa saja yang sesuai dengan selera kamu.
Sebenarnya untuk membuat related post tidak hanya seperti itu saja, masih bisa dimodifikasi seperti menampilkan backgroud pada related post dan modifikasi lainnya.

Membuat Label Posting Blog

Pa kabar kawan? Blognya makin wokey punya..! Membuat label posting blog sangat sederhana koq. Label posting memudahkan pembaca memilih kategori atau topik posting pada blog. Dengan kata lain, navigasi blog kamu semakin baik. Setelah diberi label maka kita dapat memilah-milah posting mana yang masuk ke mana dan mana yang masuk ke mana (bingung cara membahasakannya).


Setelah saya main ke blog kamu, ternyata posting yang ada terdiri dari beberapa subjek atau topik bahasan yang berbeda. Kalo ga salah kayaknya blog kamu berisi ilmu perpajakan Indonesia, komik naruto anime, politik Indonesia dan berita hot news yang sedang ramai dibicarakan saat ini. Saya merasa kalau blog kamu memang sudah saatnya diberi label pada setiap postingan. Kamu bisa mencoba cara membuat label posting blog berikut ini.

Ketika kamu menulis sebuah posting, perhatikan ada ruang di bagian bawah formulir yang ditandai "Label untuk entri ini". Sekarang, silahkan kamu masukkan label apa pun yang kamu suka. Bila ingin memberi beberapa label, maka kamu pisahkan label dengan koma. Kamu juga dapat meng-klik link "Tunjukkan semua" untuk menampilkan daftar label yang telah kamu gunakan sebelumnya. Kemudian klik pada label untuk menambahnya. Jika ini adalah pertama kali kamu membuat label posting, maka label posting pada link tunjukkan semua belum ada.




Ketika kamu mempublikasikan posting kamu, label akan didaftar dengan label ini. Silahkan klik label mana pun untuk menampilkan posting yang hanya berisi posting dengan label tersebut.


Kamu juga dapat menambah daftar semua label kamu di sidebar blog kamu. Silahkan masuk ke Tata Letak pilih elemen halaman dan klik tambah gadget kemudian pilh label untuk ditambahkan ke sidebar kamu. Beri judulnya seperti label, kategori atau view post by topic, pokoknya terserah saja yang penting akan semakin memudahkan pembaca untuk memilih topik mana yang ingin dibaca. Label dapat diurutkan sesuai abjad atau berdasarkan frekuensi penggunaannya.




Bagaimana kawan, sederhana toh? All right then. Selamat membuat label posting blog. Rajin-rajin nge-posting yuk.

Membuat Navigasi Breadcrumb Blogspot

Navigasi breadcrumb atau breadcrumb navigation adalah sebaris link tautan internal pada bagian atas atau bawah halaman situs web yang memudahkan pengunjung untuk kembali ke bagian sebelumnya atau ke halaman dasar dengan cepat. Namun saat ini penempatan breadcrumb lebih sering digunakan pada bagian atas halaman artikel posting. Urutan link breadcrumb dimulai dari home (homepage) dan diakhiri dengan judul artikel posting yang sedang dibaca. Contohnya: Browse » Home » SEO » Membuat Navigasi Breadcrumb Blogspot.

Ikuti langkah berikut:
1. Login blogger dengan ID kamu » Klik Tata Letak » Edit HTML » beri tanda centang pada Expand Template Widget » Download Template Lengkap untuk mem-backup template blog.

2. Carilah kode ]]></b:skin> agar lebih mudah tekan kebor Ctrl F atau F3 maka akan muncul tools pencarian (mozilla). Copy dan paste kode di bawah ini tepat di atas kode tadi.

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

3. Carilah kode berikut pada template kamu
<div class='post hentry uncustomized-post-template'>
Copy dan paste kode berikut tepat di bawah kode tadi.

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>

Browse &#187; <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'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</b:if>
</b:loop>

</div>
</b:if>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<div class='breadcrumbs'>
Browse &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; Archives for <data:blog.pageName/>
</div>
</b:if>
<b:else/>
<b:if cond='data:navMessage'>
<div class='breadcrumbs'>
<data:navMessage/>
</div>
</b:if>
</b:if>

4. Klik Simpan Template dan tunggulah beberapa saat hingga selesai.
5. Lihat blog kamu dan coba klik satu judul artikel dan lihat hasilnya.
6. Selesai.



Semoga bermanfaat sobat..