Cara agar breadcrumb langsung terindeks.html

Breadcrumb Trail merupakan salah satu Search Engine Optimization (SEO) on Page yang disarankan Google dan bing/yahoo!. Menurut beberapa blogger, dulu katanya breadcrumb baru bisa terindeks di google hanya pada blog yang sudah ber pr 3, mungkin pada saat itu bisa dinyatakan benar karena memang rata-rata blog yang memiliki breadcrumb terindeks di google itu sudah ber page rank 3, namun setelah google maupun yahoo! dan bing telah terintegrasi dengan schema.org dan data-vocabulary.org dalam mengenali snippet untuk kemudahan peng indeks-an, ternyata agar breadcrumb langsung terindeks di google kini sangat mudah dan tanpa harus memiliki page rank. Nah, apakah sobat sudah tahu bagaimana Cara Agar Breadcrumb Langsung Terindeks di Google? Kalo belum, pada panduan seo kali ini akan Saya berikan Cara Agar Breadcrumb Langsung Terindeks di Google untuk sobat semua.

Breadcrumb kali ini yang saya berikan versi 1 nya, dimana hanya satu kategori/label yang bisa muncul pada breadcrumb di google, dan untuk versi ke-2 atau versi finalnya yang bisa menampilkan semua label yang ada pada satu postingan akan Saya bahas dilain waktu. Berikut ini adalah Cara Agar Breadcrumb Langsung Terindeks di Google - (V1)

1. Login ke blogger.com, pada dashboard klik design, kemudian klik Edit HTML
2. Jangan lupa download full template buat backup, kemudian centang Expand Template Widget
3. Bagi yang belum memasang breadcrumb silakan cari kode berikut:

   <div class='post hentry'>

   atau kode

   <div class='post hentry uncustomized-post-template'>

4. Jika sudah ketemu, copy kode HTML dibawah ini dan letakkan tepat setelah kode di #3 tadi:

   <b:if cond='data:blog.homepageUrl == data:blog.url'> <b:else/> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='breadcrumbs'> <span itemscope="http://data-vocabulary.org/Breadcrumb" itemtype="http://data-vocabulary.org/Breadcrumb"> <a expr:href='data:blog.homepageUrl' itemprop="url"><span itemprop="title">Home</span></a> &gt; </span><span itemscope="http://data-vocabulary.org/Breadcrumb" itemtype="http://data-vocabulary.org/Breadcrumb"><b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' itemprop="url"><span itemprop="title"><data:label.name/></span></a> <b:if cond='data:label.isLast != &quot;true&quot;'> &gt; </b:if> </b:loop> </b:if> &gt; </span><span itemscope="http://data-vocabulary.org/Breadcrumb" itemtype="http://data-vocabulary.org/Breadcrumb"><span itemprop="title"><data:post.title/> </span></span></div> </b:if></b:if>

5. Kemudian tambahkan 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 #cadaef;}

   didalam template sobat diatas kode:
   </b:skin>
6. Terakhir Save Template dan lihat hasilnya, untuk yang sudah memasang breadcrumb sebelumnya tinggal mengganti saja dengan breadcrumb diatas.

Untuk blog yang sudah banyak postingannya, tunggu beberapa hari sampai google mengcrawl seluruh postingan sobat, kira-kira 1 minggu maka breadcrumb seluruh postingan sobat akan langsung terindeks google, dan untuk setiap artikel baru akan otomatis terindeks breadcrumb nya. Kalo blog Saya ini belum lama baru Saya ganti dengan breadcrumb versi 2 dan perlu beberapa hari lagi untuk versi-2 ini terindeks, untuk membedakannya silakan lihat preview breadcrumb v-1 dan preview breadcrumb v-2

Selamat mencoba.

Membuat Drop Down

    <?php //start menu-menu drop dengan kategori, pages, archive, rss?>
    <?php
    //style css dibawah langsung saya masukan ke dalam tag body, sobat bisa memindakan style cssnya kedalam tag head
    //sobat juga bisa merubah style cssnya, sobat bisa mengedit semuanya atau ubah yang saya beri komentar
    // yang terpenting adalah ganti warnanya.red, lime, yellow, black, silakan ganti dengan warna lain!
    ?>
    <?php //mulai dari sini adalah style cssnya, sobat dapat pindakan ke atas </head>?>
    <style type="text/css">
    /******* www.indaam.com *********/
    #menudrop{
    background-color:lime;/* warna background utama , silakan ganti dengan value lain */
    padding:0;
    margin-top:1px;/* jarak luar atas, silakan ganti dengan value lain */
    margin-bottom:1px;/*jarak luar bawah , silakan ganti dengan value lain */
    margin-left:1px;/* jarak luar kiri , silakan ganti dengan value lain */
    margin-right:1px;/* jarak luar kanan , silakan ganti dengan value lain */
    overflow:hidden;
    font-family:times;/* werna background utama , silakan ganti dengan value lain */
    font-size:18px;/* ukuran font, silakan ganti dengan value lain */
    font-weight:bold;/* ketabalan font, silakan ganti dengan value lain */
    width:100%;/*lebar background belakang , silakan atur lebarnya */
    -moz-border-radius:5px;/* fungsi ini untuk membuat lengkungan selebar 5px, hanya untuk firefox, silakan ganti dengan value lain */
    text-transform:capitalize;
    }
    /******* www.indaam.com *********/
    #menudrop a{text-decoration:none;}
    /******* www.indaam.com *********/
    #menustyle{margin:0;padding:0;}
    /******* www.indaam.com *********/
    #menustyle ul{
    float:left;
    list-style:none;
    margin:0;
    padding:0;}
    /******* www.indaam.com *********/
    #menustyle li{list-style:none;
    margin:0;padding:0;}
    /******* www.indaam.com *********/
    #menustyle li a, #menustyle li a:link, #menustyle li a:visited{
    background:yellow;/* warna background link, silakan ganti dengan value lain */
    color:black;/* warna text link, silakan ganti dengan value lain */
    display:block;
    padding:14px 10px 13px 8px;/*padding ini adalah jarak antara text dengan batas luar, silakan ganti dengan value lain */
    -moz-border-radius:4px;/* fungsi ini untuk membuat lengkungan selebar 4px, hanya untuk firefox, silakan ganti dengan value lain */
    }
    /******* www.indaam.com *********/
    #menustyle li a:hover, #menustyle li a:active{
    background-color:red;/* warna background link ketika cursor melintas, silakan ganti dengan value lain */
    color:lime;/* warna text link ketika cursor melintas, silakan ganti dengan value lain */
    margin:0;
    -moz-border-radius:4px;
    }
    /******* www.indaam.com *********/
    #menustyle li li a, #menustyle li li a:link, #menustyle li li a:visited{
    width:350px;/* lebar link-link yang ngedrop, silakan ganti dengan value lain */
    float:none;
    margin:0;
    font-size:18px;/* ukuran font yg ngedrop, silakan ganti dengan value lain */
    }
    /******* www.indaam.com *********/
    #menustyle li{float:left;padding:0;}
    #menustyle li a.enclose, #menustyle li a.enclose:visited{border-top:1px solid white;}
    #menustyle li ul{z-index: 9999;position:absolute;left:-999em;height:auto;width:170px;margin:0;padding:0;}
    #menustyle li ul a{width: 140px;}
    #menustyle li ul ul{margin:-75px 0 0 171px;}
    #menustyle li:hover ul ul, #menustyle li:hover ul ul ul, #menustyle li.sfhover ul ul, #menustyle li.sfhover ul ul ul{left:-999em;}
    #menustyle li:hover ul, #menustyle li li:hover ul, #menustyle li li li:hover ul, #menustyle li.sfhover ul, #menustyle li li.sfhover ul, #menustyle li li li.sfhover ul{left:auto;}
    #menustyle li:hover, #menustyle li.sfhover{position:static;}
    </style>
    <?php //end, sampai disini style cssnya?>
    <?php //mulai dari sini adalah menu-menunya?>
    <div id='menudrop'>
    <ul id='menustyle'>
    <li><a href='<?php bloginfo('url'); ?>/'>home</a></li>
    <li><a href='javascript:void(0)'>pages</a>
    <ul>
    <?php wp_list_pages('title_li=&sort_column=menu_order&depth=1'); ?>
    </ul></li>
    <li><a href='javascript:void(0)'>category</a>
    <ul>
    <?php list_cats(0, '', 'name', 'asc', '', 1, 0, 1, 1, 1, 1, 0,'','','','','') ?>
    </ul></li>
    <li><a href='javascript:void(0)'>archive</a>
    <ul>
    <?php wp_get_archives('type=monthly'); ?>
    </ul></li>
    <li><a href='javascript:void(0)'>rss</a>
    <ul>
    <li><a href="<?php bloginfo('rss2_url'); ?>">Entries (RSS)</a></li>
    <li><a href="<?php bloginfo('comments_rss2_url'); ?>">Comments (RSS)</a></li>
    </ul></li>
    <li><a href='javascript:void(0)'>other link</a>
    <ul>
    <li><a href='javascript:void(0)'><?php //bisa diganti ?>ganti dengan link sobat</a></li>
    <li><a href='javascript:void(0)'><?php //bisa diganti ?>ganti dengan link sobat</a></li>
    <li><a href='javascript:void(0)'><?php //bisa diganti ?>ganti dengan link sobat</a></li>
    <li><a href='javascript:void(0)'><?php //bisa diganti ?>ganti dengan link sobat</a></li>
    </ul></li>
    <li><a href='javascript:void(0)'>other link 2</a>
    <ul>
    <li><a href='javascript:void(0)'>other link 2 a</a>
    <ul>
    <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 a 1</a></li>
    <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 a 2</a></li>
    <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 a 3</a></li>
    <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 a 4</a></li>
    </ul>
    </li>
    <li><a href='javascript:void(0)'>other link 2 b</a>
    <ul>
    <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 1</a></li>
    <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 2</a></li>
    <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 3</a></li>
    <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 4</a></li>
    <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 5</a></li>
    </ul>
    </li>
    <li><a href='javascript:void(0)'>other link 2 c</a>
    <ul>
    <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 1</a></li>
    <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 2</a></li>
    <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 3</a></li>
    <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 4</a></li>
    <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 5</a></li>
    <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 b 6</a></li>
    </ul>
    </li>
    <li>
    <a href='javascript:void(0)'>other link 2 d</a>
    <ul>
    <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 d 1</a></li>
    <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 d 2</a></li>
    <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 d 3</a></li>
    <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 d 4</a></li>
    <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 d 5</a></li>
    <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 d 6</a></li>
    <li><a href='javascript:void(0)'><?php //bisa diganti ?>other link 2 d 7</a></li>
    </ul>
    </li>
    </ul>
    </li>
    <li><a href='javascript:void(0)'>other link 3</a><ul><?php //yang dibawah hanya contoh ?>
    <li><a href='http://www.indaam.com' target="_blank"><?php //bisa diganti ?>indaam.com</a></li>
    <li><a href='http://www.indaam.com/about'><?php //bisa diganti ?>indaam.com/about</a></li>
    <li><a href='http://www.salsabeela.com'><?php //bisa diganti ?>salasabeela</a></li>
    </ul>
    </li>
    </ul>
    </div>
    <?php //sampai sini adalah menu-menunya?>
    <?php
    //sobat juga dapat mengganti linknya, ganti href='javascript:void(0)' dengan link lain kemudian sesuaikan
    //salam kenal dari www.indaam.com
    ?>
    <?php //end menu-menu drop dengan kategori, pages, archive, rss?>

Belajar web pemula sampai mahir

Pada kali ini saya akan berbagi ilmu tentang mendesain web pemula sampai mahir
kalau anda berminat untuk belajar silahkan adna download bukunya melalui linknya ini

PhpDesigner 7

PhpDesigner7 membantu Anda dengan segala sesuatu dari mengedit, menganalisa, debugging ke situs penerbitan didukung oleh PHP, HTML, CSS untuk JavaScript ditambah bahasa lain!

phpDesigner 7 mendukung tidak hanya bekerja dengan kerangka kerja PHP favorit Anda, tetapi juga populer kerangka JavaScript jQuery, Ext JS, YUI, Dojo, MooTools dan Prototipe!

• Fitur dimuat tetapi masih cepat dan intuitif untuk digunakan dan belajar!
• Full-blown PHP, HTML, CSS dan JavaScript editor!
• Lanjutan kode tip dan code completion dengan OOP!
• Debug dan profil skrip PHP anda dengan Xdebug!
• Bekerja dengan semua PHP-dan kerangka JavaScript populer!
• Bekerja dengan file melalui FTP / SFTP dan dukungan TortoiseSVN!

 
Sekian dan Terimakasih atas kunjungannya.