Modifikasi Breadcrumb Blog Dengan CSS dan Font Awesome

Modifikasi Breadcrumb Blogger dengan CSS dan Font Awesome 

Newbanie - Malam sobat, kali ini saya kembali lagi dengan postingan mengenai Modifikasi Breadcrumb Blogger dengan CSS dan Font Awesome. Tutorial yang berguna untuk mempercantik tampilan blog kalian ini agar pengunjung tidak bosan dengan tampilan blog yang terlalu mainstream.

 

 

 

Langsung saja menuju ke tutorialnya

1. Pastikan sudah login ke blogger.com

2. Klik Template -> Edit HTML

3. Install dulu font awesomenya

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

4. Lalu copy css dibawah ini diatas </style>

.breadcrumbs{

 background:#4682B4;

 padding:13px 20px 13px 65px;

 margin-bottom:19px;

 font-size:13px;

 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:#000080;

 color:#fff;

 border-radius:4px 0 0 4px;

 top:0;

 left:0;

 padding:13px 20px;

 position:absolute;

}

Silakan edit yang saya tandai dengan warna yang anda inginkan. Lihat  kode warna  biar gak bingung.

NOTE :
Jika di template blog sudah memiliki breadcrumb, cukup ganti css sebelumnya atau tambahkan kode CSS diatas. Jika belum memiliki breadcrumb silakan ikuti cara pemasangannya  disini

Yuk ikutan kontes seo, hadiahnya lumayan loh 100jt Klik link berikut Kontes SEO IDdetik.com

Tweet