Cara membuat Quick Edit di Blog dengan CSS Ala Aak

Cara membuat Quick Edit di Blog Ala Aak - Quick Edit adalah 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 membuat Quick Edit, Untuk membuat Quick Edit digunakan dua kode yaitu CSS dan HTML. Dengan sedikit di modifikasi mungkin bisa mempercantik tampilan pada Blog Sobat, untuk demonya Anda bisa melihatnya dibawah atikel.

Berikut ini langkah-langkahnya :

1. Login keakun Blogger
2. Pilih Template, lalu Klik Edit HTML
3. Dengan menggunakan CTRL+F cari kode ]]></b:skin>
4. Kemudian terapkan kode 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/AVvXsEj7sqtTjDMPUIWSeYy-RluwGMR62tEpE8HGNf75eMmNf2WdjLH4CZCZ1VgOjzVSMswiuvWlDwKEDtc-9MHPWWpTBewhtTrbdYJqp-RMARRrNfQhiQpkGrRIfCARu5rVBORUV9ztG2oQh2w/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 kode 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 bisa Anda ganti dengan kata-kata yanga Anda inginkan

Demikian Cara membuat Quick Edit di Blog dengan CSS Ala Aak, semoga bermanfaat!

Subscribe to receive free email updates: