saba kota

Cara Membuat Breadcrumb Tampil Di SERP Dengan HP

Setelah pada artikel Membuat Breadcrumb Blogspot Dengan HP saya menyampaikan cara membuat breadcrumb yang sederhana, maka kali ini saya akan menyampaikan cara membuat breadcrumb yang bisa tampil di 3 (tiga) tempat, yaitu: di SERP, di tampilan desktop dan di tampilan mobile.

Mengenai pengertian breadcrumb, silahkan baca artikel terdahulu. Sedang perbedaan dengan breadcrumb yang sekarang dengan yang dulu adalah ditampilkannya breadcrumb pada Search Engine Result Page atau SERP Google. Asal kita teliti, maka cara ini bisa dibilang cukup mudah, berikut ini caranya:

1. download template blogspot yang digunakan.
2. Dengan explore, buka template dalam modus edit, lalu buka menu Find
3. Cari script berikut ini: <div class=blog-posts hfeed>
4. Pastekan script berikut dibawah script <div class=blog-posts hfeed>. Script <div class=blog-posts hfeed> biasanya ada 2, pastekan saja dibawah keduanya.Berikut ini scriptnya: <b:include data=posts name=breadcrumb/>
5. Cari script berikut ini <b:includable id=main var=top>

6. Pastekan script di textarea berikut ini di atas script <b:includable id=main var=top>

   <b:includable id=breadcrumb var=posts><br /><br /><b:if cond=data:blog.homepageUrl != data:blog.url><br /><br /><b:if cond=data:blog.pageType == &quot;static_page&quot;><br /><br /><div class=breadcrumbs><span><img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv9JZAfYjSe3E37HSbBrT0uIJpcN4AVDf0LNBcnJhyphenhyphenvTGLElxYMU71fv2ffHJYjrAKSld4eBBcbsTFe41gHJ4hlcyYlhOQyzODc6oebSFEQmLYcbrFR-Ac5sIi25RrRh9YelhAg63OLgrH/s400/Home-Media-kliping-kita.png style=width: 28px; height: 25px;/><a expr:href=data:blog.homepageUrl rel=tag>Home</a></span> &#187; <span><data:blog.pageName/></span></div><br /><br /><b:else/><br /><br /><b:if cond=data:blog.pageType == &quot;item&quot;><br /><br /><!-- breadcrumb for the post page --><br /><br /><b:loop values=data:posts var=post><br /><br /><b:if cond=data:post.labels><br /><br /><div class=breadcrumbs xmlns:v=http://rdf.data-vocabulary.org/#><br /><br /><span typeof=v:Breadcrumb><img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv9JZAfYjSe3E37HSbBrT0uIJpcN4AVDf0LNBcnJhyphenhyphenvTGLElxYMU71fv2ffHJYjrAKSld4eBBcbsTFe41gHJ4hlcyYlhOQyzODc6oebSFEQmLYcbrFR-Ac5sIi25RrRh9YelhAg63OLgrH/s400/Home-Media-kliping-kita.png style=width: 28px; height: 25px;/><a expr:href=data:blog.homepageUrl property=v:title rel=v:url>Home</a></span><br /><br /><b:loop values=data:post.labels var=label><br /><br />&#187; <span typeof=v:Breadcrumb><a expr:href=data:label.url property=v:title rel=v:url><data:label.name/></a></span><br /><br /><b:if cond=data:label.isLast == &quot;true&quot;><br /><br /></b:if><br /><br /></b:loop><br /><br /></div><br /><br /><b:else/><br /><br /><div class=breadcrumbs><span><img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv9JZAfYjSe3E37HSbBrT0uIJpcN4AVDf0LNBcnJhyphenhyphenvTGLElxYMU71fv2ffHJYjrAKSld4eBBcbsTFe41gHJ4hlcyYlhOQyzODc6oebSFEQmLYcbrFR-Ac5sIi25RrRh9YelhAg63OLgrH/s400/Home-Media-kliping-kita.png style=width: 28px; height: 25px;/><a expr:href=data:blog.homepageUrl rel=tag>Home</a></span> &#187; <span>Unlabelled</span></div><br /><br /></b:if><br /><br /></b:loop><br /><br /><b:else/><br /><br /><b:if cond=data:blog.pageType == &quot;archive&quot;><br /><br /><!-- breadcrumb for the label archive page and search pages.. --><br /><br /><div class=breadcrumbs><br /><br /><span><img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv9JZAfYjSe3E37HSbBrT0uIJpcN4AVDf0LNBcnJhyphenhyphenvTGLElxYMU71fv2ffHJYjrAKSld4eBBcbsTFe41gHJ4hlcyYlhOQyzODc6oebSFEQmLYcbrFR-Ac5sIi25RrRh9YelhAg63OLgrH/s400/Home-Media-kliping-kita.png style=width: 28px; height: 25px;/><a expr:href=data:blog.homepageUrl>Home</a></span> &#187; <span>Archives for <data:blog.pageName/></span><br /></div><br /><b:else/><br /><b:if cond=data:blog.pageType == &quot;index&quot;><br /><div class=breadcrumbs><br /><b:if cond=data:blog.pageName == &quot;&quot;><br /><span><img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv9JZAfYjSe3E37HSbBrT0uIJpcN4AVDf0LNBcnJhyphenhyphenvTGLElxYMU71fv2ffHJYjrAKSld4eBBcbsTFe41gHJ4hlcyYlhOQyzODc6oebSFEQmLYcbrFR-Ac5sIi25RrRh9YelhAg63OLgrH/s400/Home-Media-kliping-kita.png style=width: 28px; height: 25px;/><a expr:href=data:blog.homepageUrl>Home</a></span> &#187; <span>All posts</span><br /><b:else/><br /><span><img src=https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv9JZAfYjSe3E37HSbBrT0uIJpcN4AVDf0LNBcnJhyphenhyphenvTGLElxYMU71fv2ffHJYjrAKSld4eBBcbsTFe41gHJ4hlcyYlhOQyzODc6oebSFEQmLYcbrFR-Ac5sIi25RrRh9YelhAg63OLgrH/s400/Home-Media-kliping-kita.png style=width: 28px; height: 25px;/><a expr:href=data:blog.homepageUrl>Home</a></span> &#187; <span>Posts filed under <data:blog.pageName/></span><br /></b:if><br /></div><br /></b:if><br /></b:if><br /></b:if><br /></b:if><br /></b:if><br /></b:includable>

7. Sekarang tinggal pastekan script CSS berikut di atas script ]]></b:skin>

   
   .breadcrumbs{padding:5px 5px 5px 0px;margin: 0px 0px 5px 0;font-size: 50%; font-family: Share, Arial, cursive;line-height: 1.4em;border-bottom:double 3px #e6e4e3;}
8. Save Tamplate lalu upload kembali
9. Silahkan update artikel anda dan lihat tampilan di SERP

Pada breadcrumb ini sudah saya bersihkan dari error sehingga semua label akan muncul dalam breadcrumb. Selamat mencoba

Diposting oleh Unknown di 21.30

Kirimkan Ini lewat EmailBlogThis!Bagikan ke XBerbagi ke FacebookBagikan ke Pinterest

Label: breadcrumb, cara, dengan, di, hp, membuat, serp, tampil