Cara Membuat Kotak Admin Di Blog

Sore sobat blogger.... jumpa lagi dengan Diaz semoga kabar anda makin sukses. Di TUTORIAL BLOGSPOT kali ini Diaz akan share Cara Membuat Kotak Admin Di Blog, selain sebagai aksesoris kotak admin berfungsi sebagai informasi siapakah yang menulis artikel yang diposting, menurut Diaz itu lumayan penting juga karena sipengunjung bisa tahu siapa pemilik/penulis artikel diblog.
Tak usah panjang lebar lagi berikut ini tutorial Cara Membuat Kotak Admin Di Blog :

• Login ke dashboard blogger anda.
• Pilih Rancangan >> Edit HTML, centang Expand template widget.
• Cari kode <div class='post-footer'> pada template.
• Copy script kotak admin dibawah ini dan paste tepat di atas kode <div class='post-footer'>. Jika gagal sobat dapat juga meletakkan kode CSS tadi tepat dibawah kode <data:post.body/>.

<!-- Kotak Admin --> <b:if cond='data:blog.pageType == "item"'> <div class='admin-tulisan'> <h4> Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ Deskripsi Blog Anda</h4> <div class='kontainer'> <img src='link URL gambar Profil anda di sini'/> Artikel <a expr:href='data:post.url'><data:post.title/></a> ini diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar. <p> <span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://diaz-box.blogspot.com/2013/02/cara-membuat-kotak-admin-di-blog.html' target='_blank'>:: Get this widget ! ::</a></span></p> <div style='clear:both;'/> </div> </div> </b:if> <!-- Kotak Admin -->

• Kemudian cari lagi kode ]]></b:skin> pada template sobat.
• Copy kode CSS dibawah ini dan paste tepat diatas kode ]]></b:skin>.

.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; }

• Silahkan ganti link URL gambar profil  dengan link gambar profil sobat. Jika sobat ingin menuliskan dengan kata-kata ulasan yang lain, ganti/edit dulu kata-kata ulasannya di notepad.
• Untuk jenis font, warna background dan border juga dapat sobat ganti/edit sesuai keinginan.
• Preview dulu hasil kotak admin yang dibuat. Jika editing sudah dirasa cukup, Save/Simpan template anda.

Contoh hasilnya bisa anda lihat dibawah diatas kotak komen, tertarik...??? langsung aja anda bikin.. :D

Demikian Tutorial Cara Membuat Kotak Admin Di Blog, semoga bermanfaat untuk anda. Sampai jumpa di TUTORIAL BLOGSPOT berikutnya.