Sedikit Info Seputar
Cara Membuat Breadcrumbs SEO Friendly dengan Font Awesome
Terbaru 2017
- Hay gaes kali ini team Free Template BLogspot.Com, kali ini akan membahas artikel dengan judul Cara Membuat Breadcrumbs SEO Friendly dengan Font Awesome, kami selaku Team Free Template BLogspot.Com telah mempersiapkan artikel ini untuk sobat sobat yang menyukai Free Template BLogspot.Com. semoga isi postingan tentang
Artikel Font,
Artikel HTML5,
Artikel SEO, yang saya posting kali ini dapat dipahami dengan mudah serta memberi manfa'at bagi kalian semua, walaupun tidak sempurna setidaknya artikel kami memberi sedikit informasi kepada kalian semua. ok langsung simak aja sob
Judul:
Berbagi Info Seputar
Cara Membuat Breadcrumbs SEO Friendly dengan Font Awesome
Terbaru
link: Cara Membuat Breadcrumbs SEO Friendly dengan Font Awesome
Berbagi Cara Membuat Breadcrumbs SEO Friendly dengan Font Awesome Terbaru dan Terlengkap 2017
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 == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- 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'>
» <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>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <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.
Itulah sedikit Artikel Cara Membuat Breadcrumbs SEO Friendly dengan Font Awesome terbaru dari kami
Semoga artikel Cara Membuat Breadcrumbs SEO Friendly dengan Font Awesome yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Free Template BLogspot.Com. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Cara Membuat Breadcrumbs SEO Friendly dengan Font Awesome