Tutorial: Cara Buat Kotak Admin.

Assalamualaikum,

Salam Sejahtera, Salam 1 Dunia.

Tiba-tiba teringin pulak nak buat Kotak Admin yang ada di bawah post. Tutorial yang aku ambil dari blog Lepak ini, aku abadikan dalam entri ini agar suatu hari nanti ia berguna untukku sendiri. Biasa la, aku ni kan rajin tukar template dan kadang-kala suka edit sana-sini. Kadang kala juga hilang habis widget yang ada. Sekurang-kurangnya, dengan tersimpannya tutorial ini di sini, tak la aku tercari-cari jika diperlukan suatu hari nanti.

Juga untuk "Manja Segamit Rindu" yang bertanyakan tentang cara nak buat Kotak Admin seperti dalam setiap single post, boleh cuba tutorial ini.

1. Buka paparan interface baru  > Template  > Edit HTML  > Procced >  Tick Expand Widget Templates.

2. Tekan Ctrl + F dan cari code  <div class='post-footer'>  

3. Copy code di bawah ini dan paste kan di atas code di nombor 2 tadi. Tukarkan url berwarna merah dengan gambar yang anda kehendaki. Tulisan berwarna biru gantikan dengan ulasan anda.

<!-- Kotak Admin -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ Penerangan blog</h4>
<div class='kontainer'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRE3f56HEjSlyquVjSTSOK13heOf9ykgkRRr21h6DYRUou_9GIemi8sxdceLCNK3OnfkyKZSM3R1040KgnmHjJNX-H2s5ztQ88hlK5uccolAVi496uiku8XSNKpAFitzCnsdnzrqf6kmI/s220/AVATAR+KU-128.jpg'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a>ini diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>. LETAK SEBARANG ULASAN TENTANG BLOG ANDA DI SINI.
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://teratakusang.com' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->

4. Cari code ]]></b:skin> 

5. Copy code di bawah ini dan paste kan di atas code yang dicari tadi.

.admin-tulisan{
display:block;
width:auto;
background:#CFE2E0;
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:#8A9C04;
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 12px Arial,Sans-Serif;
padding:5px 10px;
margin:0 0 0 0;
display:block;
}
.admin-tulisan h4 a{color:#FEEA83;}
.admin-tulisan img{
width:70px;
height:70px;
margin:0 10px 0 0;
float:left;
border:1px solid #954B02;
padding:2px;
background:#C36702;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}

5. Preview dan save jika tiada error.

Selamat mencuba.

Kredit: Lepak.com.my

Kongsikan artikel ini jika bermanfaat, terima kasih.

Ranking: 5

JOM BACA LAGI