Cara membuat Quick Edit di Blog dengan CSS Ala Aak

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;
.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>
<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!
0 Response to "Cara membuat Quick Edit di Blog dengan CSS Ala Aak"
Post a Comment