Loading...
ucapan
Membuat BLOG BULE sekarang sangat mudah dengan hadirnya SOFTWARE ini, Siap nembak CPC bule yang main ADSENSE

Mau artikel unik 100 % dengan banyak bahasa tanpa harus repot untuk menulis?

Article Sparta merupakan software yang memiliki fungsi untuk membuat artikel dalam berbagai bahasa hanya dengan beberapa klik saja, Jadi tidak perlu repot lagi untuk menulis.

Softwarenya sangat bermanfaat, bisa di pakai JUALAN ARTIKEL, MEMBUAT BLOG BULE TUK PENGHASILAN CPC ADSENSE.

Yang jadi masalah karena lisensinya hanya untuk beberapa orang/PC saja, jadi siapa cepat dia dapat.

DAPATKAN SEGERA SELAGI HARGA PROMO DAN MASIH TERSEDIA LISENSINYA!!!

Software Pembuat Artikel

Silahkan Pilih Warna Background Yang Cocok Buat Mata Anda


Bergabunglah dengan 5.000 Lebih pengikut lainnya Dan Dapatkan Selalu Artikel Dan Penawaran

2016/11/08

Cara Membuat Breadcrumbs SEO Friendly dengan Font Awesome

Software Pembuat Artikel unik 100%O
Artikel unik 100% dengan banyak bahasa tanpa tanpa harus repot menulis, Software yang berfungsi membuat artikel dalam berbagai bahasa hanya dengan beberapa klik saja, Jadi tidak perlu repot lagi untuk menulis.

DAPATKAN SEGERA SELAGI HARGA PROMO!!!
Klik Pada Gambar Tuk Info Selengkapnya Ya...



Cara Membuat Breadcrumbs SEO Friendly dengan Font Awesome
Cara Membuat Breadcrumbs SEO Friendly dengan Font Awesome - Cara membuat breadcrumbs ini sama saja dengan breadcrumbs seperti biasanya, hanya saja disini saya tambahkan element font awesome yang letaknya disebelah kiri breadcrumbs, dan kode yang telah saya bagikan dibawah ini telah Valid HTML5, Tak perlu berlama-lama, langsung saja ini dia cara membuat breadcrumbs seo friendly dengan font awesome :

Sebelum membuat breadcrumbs nya silahkan sobat masukan javascript berikut, javascript berikut adalah script untuk font awesome, jika sebelumnya sobat telah menggunakannya sobat tidak perlu lagi menambahkannya, letakkan javascript berikut di atas kode </head>



<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>


Cara Pembuatan Breadcrumbs SEO Friendly dengan Font Awesome :


1. Masukkan CSS berikut diatas ]]></b:skin> atau di <style>



.breadcrumbs{

 background:#ff6c60;

 padding:15px 20px 15px 65px;

 margin-bottom:19px;

 font-size:14px;

 color:#fff;

 border-radius:4px;

 position:relative;

}

.breadcrumbs a{

 color:#fddbd8;

 text-decoration:none;

}

.breadcrumbs a:hover{

 color:#fff;

 text-decoration:none;

}

.breadcrumbs:before {

 content: "\f041";

 font-family:fontAwesome;

 font-size:22px;

 font-style: normal;

 background-color:#e56155;

 color:#fff;

 border-radius:4px 0 0 4px;

 top:0;

 left:0;

 padding:13px 20px;

 position:absolute;

}

2. Cari kode <b:includable id='main' var='top'> kemudian ganti dengan :



<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'>

<span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:blog.homepageUrl' itemprop='url'><span itemprop='title'>Home</span></a></span>

<b:loop values='data:post.labels' var='label'>

  &#187; <span itemscope='' itemtype='http://data-vocabulary.org/Breadcrumb'><a expr:href='data:label.url' itemprop='url'><span itemprop='title'><data:label.name/></span></a></span>

</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>

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

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

 Selesai, ada kesalahan atau bagaimana ?, komentar dikolom yang telah disediakan.



Peringatan : apabila sebelumnya sobat telah menggunakan breadcrumbs didalam template sobat, sebaiknya tidak perlu diganti html nya, cukup sobat ganti css nya saja, dan hapus css breadcrumbs sobat sebelumnya dengan css breadcrumbs yang telah saya bagikan diatas tadi.

Pengelola Blog : ABDUL WAHAB

Judul : Cara Membuat Breadcrumbs SEO Friendly dengan Font Awesome
Ditulis oleh :Blog Fajri Andaviar pada hari 2016/11/08
Rating Blog : 5 dari 5
Terima kasih sudah membaca artikel tentang Cara Membuat Breadcrumbs SEO Friendly dengan Font Awesome
Kalian boleh menyebar luaskannya atau mengcopy paste-nya jika artikel ini sangat bermanfaat bagi Blog dan teman-teman kalian.
Namun jangan lupa harap memberikan link aktif dofollow ke URL
http://fajriandaviar.blogspot.com/2013/12/breadcrumbs-seo-friendly-dengan-font-awesome.html
Dan Terima kasih sekali lagi atas kunjungannya.

Kritik dan saran atau apapun bisa kalian sampaikan melalui kotak komentar.
Dan mohon maaf jika komentar atau pertanyaan tidak bisa cepat saya respon,
karena Saya tidak selalu online dikarenakan sibuk.

Title : Cara Membuat Breadcrumbs SEO Friendly dengan Font Awesome
Description : Cara Membuat Breadcrumbs SEO Friendly dengan Font Awesome - Cara membuat breadcrumbs ini sama saja dengan breadcrumbs seperti biasanya, ...

25 komentar

Ada yang simpel bro,,,?
http://click-down.blogspot.com/

mantap ane coba dulu gan

Ketika kita menggunakan suatu framework, perhitungkan juga kegunaannya. Apakah kita menggunakan framework tersebut dalam skala besar atau hanya sedikit. Kalau menurutku menggunakan framework (fontawesome) tidak sebanding dengan apa yang dihasilkan karena hanya digunakan untuk breadcrumbs saja.

Dan itupun cuman untuk memanggil di bagian ini saja:

content: "\f041";
font-family:fontAwesome;

Komentar ini telah dihapus oleh administrator blog.
Komentar ini telah dihapus oleh administrator blog.

hapus aja mas ganggu orang-orang kaya gtu tuh...

Klo ditaruh di bawah <head> , bagaimana ?

Cara mengetahui kode css breadcrumb template bawaan gimana ????

Thanks gan...
Sangat bermanfaat

Mantap sob, langsung saya cek :D

Mantep banget nih sob ^_^ pertamax deh pokoknya!

thank you

Mantep bro, baru ngerti cara masang breadcrumbs ternyata cuma diganti ininya aja, saya kira sampe nya :P pantesan, thanks bro

Nice Article sir, Keep Going on... I am really impressed by read this. Thanks for sharing with us. Railway Jobs.

langsung dicoba gan...

kenapa koq gak bs dibawah judul, malah posisinya diatas judul :(

Mantep dah min, langsung ane coba

Mantap gan, barusan ane coba

Ijin praktek mas anu Breadcrumbs nya :D

terima kasih sudah membantu dalam pembuatan blog saya, informasi nya bagus https://www.tovikberbagi.com

tukeran linknya dong bro di blog gue, bisa diliat di blog gue link lu udah gue pasang > http://tu-ru.blogspot.co.id/2016/09/blog-walking.html . Makasih loh. Salam kenal gue Andrie dari Jogja.

Berkomentarlah dengan bijak dan sopan, Dilarang menggunakan Link Aktif, Link Mati, Promo, dll.
Dan Berbagilah Jawaban atas apa kesulitan yang sobat-sobat lainnya dapatkan.
Mohon maaf jika ADA komentar atau pertanyaan tidak bisa cepat saya respon,
DIkarenakan Saya tidak selalu online selama 24 Jam.