Cara Membuat Google Breadcrumbs Stylish, [SEOSangatMudah] - Hallo sobat blogger yang berbahagia Tips & Trik SEO, Posting yang saya unggah pada kali ini dengan judul Cara Membuat Google Breadcrumbs Stylish, [SEOSangatMudah] , Artikel ini bertujuan untuk memudahkan kalian mencari apa yang kalian inginkan, kami telah mempersiapkan artikel ini dengan baik untuk kalian baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel Aplikasi Konten, yang kami tulis ini dapat kalian pahami dengan baik, semoga artikel ini berguna untuk kalian, jika ada kesalahan penulisan yang dilakukan oleh penulis mohon dimaafkan karena penulis masih newbie. baiklah, selamat membaca.

Judul : Cara Membuat Google Breadcrumbs Stylish, [SEOSangatMudah]
link : Cara Membuat Google Breadcrumbs Stylish, [SEOSangatMudah]

Cara Membuat Google Breadcrumbs Stylish, [SEOSangatMudah]

Breadcrumbs sekarang tidak hanya dipakai untuk navigasi untuk pengunjung dan web crawler,namun juga untuk menambah style dan keindahan blog,penerapannya pun dapat di rubah sesuai selera masing-masing,caranya agak sedikit berbeda dengan membuat tabel di postingan,lalu,bagaimana Cara Membuat Google Breadcrumbs Stylish agar bisa diterapkan pada blog blogspot?.

Style Yang saya bagikan untuk Membuat Google Breadcrumbs Stylish dibawh ini hanya dasarnya saja,anda bisa merubah bentuk dan backgroundnya sesuai dengan selera anda masing-masing.

Berikut pa yang harus anda lakukan

1. masuk ke Template =>> edit HTML
2. klik CTRL+F
3. Cari kode berikut

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

4. Paste-kan kode HTML dibawah ini dibawah kode tersebut

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

5. Kemudian cari lagi kode

<b:includable id='main' var='top'>

6. Paste kode dibawah ini di atasnya

<b:includable id='breadcrumb' var='posts'>
                                <b:if cond='data:blog.homepageUrl == data:blog.url'>
                            <!-- No breadcrumb on home page -->
                     <b:else/>
          <b:if cond='data:blog.pageType == &quot;item&quot;'><!-- breadcrumb for the post page --><a href="http://www.netoopsblog.blogspot.com"></a><p class='breadcrumbs'> <span class='post-navigation'><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;'>
                                              
                            <a expr:href='data:label.url' rel='tag'>
                           <data:label.name/>
                             </a>
                             </b:if>
                                    </b:loop>
                                   <b:else/>
                                      Unlabelled
                                    </b:if>
                                        
                                          <span>
                                            <data:post.title/>
                                          </span>
                                        </b:loop>
                                      </span>
                                    </p>
                                    <b:else/>
                                    <b:if cond='data:blog.pageType == &quot;archive&quot;'>
                                      <!-- breadcrumb for the label archive page and search pages.. -->
                                      <p class='breadcrumbs'>
                                        <span class='post-labels post-navigation'>
                                          <a expr:href='data:blog.homepageUrl'>
                                            Home
                                          </a>
                                           Archives for
                                          <data:blog.pageName/>
                                        </span>
                                      </p>
                                      <b:else/>
                                      <b:if cond='data:blog.pageType == &quot;index&quot;'>
                                        <p class='breadcrumbs'>
                                          <span class='post-labels post-navigation'>
                                            <b:if cond='data:blog.pageName == &quot;&quot;'>
                                              <a expr:href='data:blog.homepageUrl'>
                                                Home
                                              </a>
                                               All posts
                                              <b:else/>
                                              <a expr:href='data:blog.homepageUrl'>
                                                Home
                                              </a>
                                               <span>Posts filed under
                                                 <data:blog.pageName/></span>
                                            </b:if>
                                          </span>
                                        </p>
                                      </b:if>
                                    </b:if>
                                </b:if>
                          </b:if>
        </b:includable>

7. terakhir,cari kode  

]]></b:skin>

8. Pastekan lagi kode berikut diatasnya

 .breadcrumbs {
margin: 0px 0px 15px 0px;
font-size:95%;
}
.post-navigation > a:after, .post-navigation > a:before {
    border-bottom: 13px solid transparent;
    border-left: 11px solid #B7B7B7;
    border-top: 13px solid transparent;
    content: "";
    display: inline-block;
    left: 100%;
    position: absolute;
    top: -2%;
    z-index: 1;
}
.post-navigation > a:after {
    border-left-color: #F2F2F2;
    left: 99%;
}.post-navigation > a:hover {
    padding-left: 23px;
}
.post-navigation > a {
    background: none repeat scroll 0 0 #F2F2F2;
    border: 1px solid #B7B7B7;
    color: #000000;
    padding: 4px 12px;
    position: relative;
    text-decoration: none;
transition: all 0.2s ease 0s;-moz-transition: all 0.2s ease 0s;-webkit-transition: all 0.2s ease 0s;
}
.post-navigation > span {
    padding-left: 14px;
}

Pada sebagian template,kode breadcrumbs diatas tidk bisa diterapkan kalu kodenya belum di parse,untuk keberhasilan anda dalam menerapknnya,parse-kan kode berikut pada situs parser secara online.jika masih belum berhasil maka pertanda pada tatanan HTML blog anda terdapat kode-kode error atau terlampau banyak chace.

Demikian Cara Membuat Google Breadcrumbs Stylish,semoga apa yang saya sampaikan jadi manfaat bagi anda.

terima kasih atas perhatiannya.

Demikianlah Artikel Cara Membuat Google Breadcrumbs Stylish, [SEOSangatMudah]

Sekianlah artikel Cara Membuat Google Breadcrumbs Stylish, [SEOSangatMudah] kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Cara Membuat Google Breadcrumbs Stylish, [SEOSangatMudah] dengan alamat link https://seosangatmudah.blogspot.com/2014/11/cara-membuat-google-breadcrumbs-stylish.html

Tweet