Cara Membuat Navigasi Breadcrumbs Terdetiksi Google di Blog

Navigasi Breadcrumbs berfungsi untuk melihat di mana kita meletakkan artkel kita tersebut jika kita meletakkan artikel kita di label widget maka kita akan melihat denah diman kita letakkan artikel tersebut.

Kali ini saya akan shere Navigasi yang terdetiksi oleh google, Lalau apa kelebihannya ??? jika kita memasang Navigasi yang terdetiksi oleh google maka google akan mudah mencari blog kita , dan blog kita pun akan mendapat banyak pengunjung..

Baiklah begini cara nya :

1. Login ke blogger >> Template >> edit HTML
2. Cari  kode ]]></b:skin> dan pastekan kode di bawah ini di atas kode tersebut

.breadcrumbs
{
padding:5px 5px 5px 0;
margin: 0 0 5px;
font-size:inherit;
font-family: Georgia, trebuchet ms, Verdana;
line-height: 1.4em;
border-bottom:4px double #000000;
}

3. Cari kode berikut:

<b:include data='top' name='status-message'/>

4. Pastekan kode di bawah ini di atas kode di atas jika kode tersebut ada dua maka pastekan kode tersebut di atas kedua kode

 <b:include data='posts' name='breadcrumb'/>

5. Cari kode  <b:include  id='main'  var='top'>
6. Pastekan kode di bawah ini di atas kode tersebut

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'>
 &#187; <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:if>
</b:loop>
 &#187; <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> &#187; <span>Unlabelled</span> &#187; <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span>
</b:if></div></b:if></b:if>
</b:if>
</b:if>
</b:if>
</b:includable>  

7. Simpan
8. sekarang kita tinggal mengecek hasilnya di sini http://www.google.com/webmasters/tools/richsnippets

9. tinggal masukkan salah satu postingan anda jika gambarnya sudah seperti berarti itu berhasil :

 

Read More...

Cara Membuat Penanda Postingan Baru di Blog

Haii Sobat New diandiki dah lama nih nggak upload kali ini saya mau shere tentang cara penanda bagaimana cara melihat postingan baru dan postingan lama, ini sangat berfunsi bagi pengunjung blog anda untuk melihat bagaimanakah cara menentukan ini postingan lama atau ini postingan baru.

Kali ini saya minta maaf bahwa saya tidak bisa memberikan demo yang bagus , walaupun begitu hasil yang dihasilkan oleh widget kali cukup memuaskan,untuk demonya anda bisa melihatnya di sini : Demo

Nah kali ini langsung aja kita lihat caranya

1. yang pasti login dulu ke blogger
2. Template > Edit HTML

3. Cari Kode  </head>  
 letakkan kode di bawah ini di atas kode tersebut:

<style>.post{position:relative;}</style>

4. cari kode

<div class='post hentry'>

5. Lalu paste kode di bawah ini di bawah kode tersebut

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:post.isFirstPost'> 
<span style='display:block;position: absolute;top: -4px;right: -4px;margin: 0;background-image: url(https://lh3.googleusercontent.com/-CmCyzrG1afM/UZ9354KsJMI/AAAAAAAAGE0/S_xjDtT2wP8/s56/New-Ribbon-By-EXEIdeas.png);width: 56px;height: 56px;'/>
<b:else/>
<span style='display:block;position: absolute;top: -4px;right: -4px;margin: 0;background-image: url(https://lh4.googleusercontent.com/-7C4ym_ep0Tw/UZ9359kFn4I/AAAAAAAAGE4/QKy0Shl3XK0/s56/Old-Ribbon-By-EXEIdeas.png);width: 56px;height: 56px;'/> 
</b:if></b:if></b:if>

Ket : Kode yang saya shere kali ini adalah kode yang menujukkan pita hanya di layar homepege saja , jika anda ingin pita juga berada pada layar postingan anda bisa menghapus tanda merah di atas.

6. simnpan, dan lihatlah hasilnya ....

Read More...