Cara Membuat Icon Awesome 4.3.0 Didalam Postingan Blog

Cara Membuat Icon Awesome 4.3.0 Didalam Postingan Blog. Setelah beberapa hari di pusingkan dengan keinginan mempercantik blog akhirnya alhamdulillah telah menemukan jua, walaupun tidak seperti apa yang saya harapkan namun dari sinilah semua berawal yang artinya inilah dasar-dasar untuk membuat keinginan saya terhadap tampilan entri postingan blog sedikit menawan terkabulkan dengan alasan untuk mempercantik blog tanpa memberatkan loadingnya.

Font Awesome

Dalam kesempatan kali ini saya ingin membagikan cara memasang icon awesome kedalam postingan blog terutama di blogger. Dan tutorial kali ini berjudul Menampilkan DEMO dan Download berdasarkan icon awesome yang memukau. Seperti contoh dibawah ini.

Demo Good Download Mantap

Tutorial Membuat Icon Awesome Didalam Postingan Blog
Sebelum melakukan segala sesuatu yang berhubungan dengan template (tutorial di blog ini atau di blog lainnya) saya menyarankan pada sobat untuk Membackup Template blog sobat terlebih dahulu, karena untuk menghindari berbagai hal yang sekiranya membuat blog menjadi kacau dan berantakan. disini saya tidak bertanggung jawab atas kelalaian lalu lintas karena saya telah memberikan wanti-wanti buat sobat yang menjalankan tutorial ini. Hehehehe

Oke kita akan langsung ke tutorialnya.
Pertama. Masuk kedalam blogger Dasboard >> Template >> Edit HTML
Kemudian masukkan script CSS berikut dibawah <head> atau sebelum </head>

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

Dan kode CSS berikut ini dibawah ]]><b:skin> dan diatas atau sebelum ]]></b:skin>

#wrap {
margin: 20px auto;
text-align: center;
}
#wrap br {
display: none;
}
.bie-slide, .bie-slide2 {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
line-height: 50px;
padding: 0;
border-radius: 50px;
background: #fdfdfd;
border: 2px solid #F9690E;
margin: 10px;
transition: .5s;
}
.bie-slide2 {
border: 2px solid #36D7B7;
}
.bie-slide:hover {
background-color: #F9690E;
}
.bie-slide2:hover {
background-color: #36D7B7;
}
.bie-slide:hover span.circle, .bie-slide2:hover span.circle2 {
left: 100%;
margin-left: -45px;
background-color: #fdfdfd;
color: #F9690E;
}
.bie-slide2:hover span.circle2 {
color: #36D7B7;
}
.bie-slide:hover span.title, .bie-slide2:hover span.title2 {
left: 40px;
opacity: 0;
}
.bie-slide:hover span.title-hover, .bie-slide2:hover span.title-hover2 {
opacity: 1;
left: 40px;
}
.bie-slide span.circle, .bie-slide2 span.circle2 {
display: block;
background-color: #F9690E;
color: #fff;
position: absolute;
float: left;
margin: 5px;
line-height: 42px;
height: 40px;
width: 40px;
top: 0;
left: 0;
transition: .5s;
border-radius: 50%;
}
.bie-slide2 span.circle2 {
background-color: #36D7B7;
}
.bie-slide span.title,
.bie-slide span.title-hover, .bie-slide2 span.title2,
.bie-slide2 span.title-hover2 {
position: absolute;
left: 90px;
text-align: center;
margin: 0 auto;
font-size: 16px;
font-weight: bold;
color: #F9690E;
transition: .5s;
}
.bie-slide2 span.title2, .bie-slide2 span.title-hover2 {
color: #36D7B7;
left: 80px;
}
.bie-slide span.title-hover, .bie-slide2 span.title-hover2 {
left: 80px;
opacity: 0;
}
.bie-slide span.title-hover, .bie-slide2 span.title-hover2 {
color: #fff;
}

Ketiga Setelah siap Simpan template.
Setelah template tersimpan maka saatnya kini uji coba terhadap postingan caranya.
Klik pada Entri baru atau klik icon membuat postingan.
Kemudian masukkan kode CSS dibawah ini ke dalam postingan blog dan sebelumnya ubah penulisan dari Compose ke HTML terlebih dahulu.

<div id="wrap">
<a class="bie-slide" href="http://seputarblog1.blogspot.com/" target="_blank">
 
Demo
Click here
</a>
<a class="bie-slide2" href="http:// seputarblog1.blogspot.com/" target="_blank">
 
Download
Click here
</a >
</div>
</div>

Baiklah sampai disini untuk tutorialnya dan sobat bisa berkreasi serta mengembangkan untuk mendapatkan hasil yang lebih sempurna, yang sekiranya bisa membuat apa yang sebenarnya sobat inginkan. Terima kasih dan.
Salam Blogging