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

• Tutorial Related Post MagzEvo Version Assalamualaikum, Salam Sejahtera, Salam 1 Dunia. Pada yang bertanyakan tentang Related Post seperti imej di bawah, aku sediakan tutorial untuk dikongsikan di sini, juga untuk panduan padaku send ... readmore
• Cara Mengesan Malware Melalui Webmaster Tools.Salam... Entri ini adalah permintaan dari saudari aSmiDar. Moga-moga ianya dapat membantu untuk menangani masalah malware yang sedang tersebar luas menjelajah blog seterusnya memeningkan kepala par ... readmore
• Cara Pasang Sitemap. Assalamualaikum, Salam 1 Dunia. Bagi memenuhi permintaan Zairie Husin, aku buatkan tutorial khas untuk beliau mengenai Sitemap. Sitemap amat penting pada pengunjung blog kerana segala entry kita ... readmore
• Cara Pasang ShoutMix Sorok Assalamualaikum, Salam 1 Dunia. Atas permintaan En. Zul (www.zulkbo.com) untuk mengetahui cara memasang SHOUTMIX sembunyi seperti di Teratak Usang, ku tunaikan hajat beliau. Nampaknya beliau suda ... readmore
• Peraturan Meninggalkan Komen. Assalamualaikum, Salam Sejahtera, Salam 1 Dunia. Hari ini merupakan hari ke dua Teratak Usang berdomain baru. Walaupun guna domain baru, masih banyak benda di sini yang lama-lama dan antik. Tak ... readmore