Cara Menciptakan Quick Edit Di Blog Dengan Css Ala Aak

Cara menciptakan Quick Edit di Blog Ala Aak - Quick Edit yaitu berupa Icon pansil atau obeng pada Blog, Quick Edit berfungsi untuk mengedit cepat pada Blog. Namun ada sebagian beranggapan Quick Edit cukup menggangu sehingga dihilangkan.

Disini saya akan mengulas cara menciptakan Quick Edit, Untuk menciptakan Quick Edit dipakai dua arahan yaitu CSS dan HTML. Dengan sedikit di modifikasi mungkin dapat mempercantik tampilan pada Blog Sobat, untuk demonya Anda dapat melihatnya dibawah atikel.

Berikut ini langkah-langkahnya :

1. Login keakun Blogger
2. Pilih Template, kemudian Klik Edit HTML
3. Dengan memakai CTRL+F cari kode ]]></b:skin>
4. Kemudian terapkan arahan dibawah ini diatasnya

/*Aak_Quick Edit*/
.icon_pencil {
width: 16px;
height: 16px;
background-position: 0 -2150px;
}
.icon_btn {
display: inline-block;
text-indent: -2000em;
outline: 0;
z-index: 1;
width: 20px;
height: 20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhToToRYt1Fri_DzRsEVt2IyenYFOIwNXrm3ueRG2v-Z4Pwpy670Ug4ohjfweGmSfS5zIiTRhjxKM7WjLYqPz9LbmeJlbXWkFXnINqCuuMwrgfQUjgPA9w6linAakyZkfjUnud7DkMk4jc/s1600/icon+pencil.jpg) no-repeat;
font-style: italic;
}
.btn.header_btn.pencil {
color: #fff;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
background-color: #929292;
display: inline-block;
background-repeat: no-repeat;
background-image: linear-gradient(#fff,#fff);
padding: 2px 14px;
font-size: 14px;
line-height: 20px;
float:right;
border: 1px solid rgba(0, 0, 0, 0.1);
border-bottom-color: rgba(0, 0, 0, 0.25);
border-radius: 4px;
margin-top: 25px;
text-decoration: none;
cursor: pointer;
vertical-align: top;
font-weight: bold;

}

5. Selanjutnya anda cari kode <div class='post-footer'>
6. Kemudian letakkan arahan dibawah ini di bawahnya

<div class='btn header_btn pencil'>
<a class='icon_btn icon_pencil' href='ID Blog dan ID Post Artikel'/>Create</div>
<span class='edit-entri'><i class='icon-edit'/></span>

Keterangan :
Kode yang berwarna merah isikan ID Blog dan ID Post Artikel Anda
Kode yang berwarna biru dapat Anda ganti dengan kata-kata yanga Anda inginkan

Demikian Cara menciptakan Quick Edit di Blog dengan CSS Ala Aak, biar bermanfaat!
Sumber http://www.websiteedukasi.com/