Tutorial kali ini saya akan share cara Membuat Kotak Admin Dibawah Postingan Dengan Thumbnail. Ingat tutor ini untuk membuat bukan untuk mengedit yang ada pada template sobat sebelumnya. Baiklah ini screenshort yang saya maksud ini :
1. Login ke akun blogger sobat.
2. Masuk ke menu Template - Edit HTML - ceklis Expand Template Widget
3. Salin dulu template sobat,supaya jika terjadi eror bisa di perbaiki.
4. Cari kode <div class='post-footer'> (tekan tombol ctrl+f ) supaya cepat dalam mencarinya.
5. Copy kode di bawah ini dan paste kan diatas <div class='post-footer'>
<!-- Kotak Admin -->
<b:if cond='data:blog.pageType == "item"'>
<div class='admin-tulisan'>
<h4>
Posted by : <a expr:href='data:blog.homepageUrl'><data:post.author/> </a> | All About Symbian | Symbian Will Never Die</h4>
<div class='kontainer'>
<img src='<b>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZKa4MTCgYUtEnz0aKeeD4mpP5K0sgR2RSXTDteFNBhoAy8_funCi5sFL58qJ_tuiZ_PkiOdDFApUuVeP6PEQmh2k31WsbQpeeF41a2I-ZNSTbOWMhsogXlSA79Esbtv-PjfRV-6IiVe8/s400/01158.jpg</b>'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a> ditulis oleh<b> <data:post.author/> </b>dengan kategori <b:loop values='data:post.labels' var='label'><b><data:label.name/></b><b:if cond='data:label.isLast != "true"'> /</b:if> </b:loop>. Kritik dan saran sangat membantu membangunnya blog ini. Diharapkan berkomentar yang membangun,tidak melecehkan atau menghina artikel dari saya ini. Jika ingin copas baik link download maupun link tutorial sertakan link aktif ke blog ini. Terima Kasih !!!
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin selesai -->
Keterangan : ganti yg warna merah dengan ft sobat. Sobat juga bisa ganti kata katanya sesuai sobat inginkan.
6. cari kode ]]></b:skin> dan letakan kode dibawah ini tepat di atas kode ]]></b:skin>
/*--Mulai Kotak Admin --*/
.admin-tulisan{
display:block;
width:auto;
background:#eaeaea;
border:2px solid #fff;
box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-
webkit-box-shadow:0 1px 3px #000;
padding:0;
margin:30px 0 10px 0;
font:normal 12px Arial, Sans-Serif;
color:#222;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#16049c;
border:none;
border-bottom:1px solid #699019;
color:#fff;
text-transform:normal;
text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
font:bold 14px Arial,Sans-Serif;
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#FFD700;}
.admin-tulisan img{
width:70px;
height:70px;
margin:0 10px 0 0;
float:left;
border:1px solid #954B02;
padding:2px;
background:#000;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}
/*--Selesai Kotak Admin --*/
Keterangan : sobat bisa ganti kode warna seperti warna background,warna link diiatas sesuai keinginan sobat. font juga bisa,kreasikan sendiri sesuai keinginan sobat.
7. Setelah itu klik save.
#jika sebelumnya template sobat sudah ada,dan mau diganti sama yang ini sobat tinggal cari kata kunci pada template sobat kemudian hpus dan gantikan dengan css ini.
Post a Comment