Tutorial: Memasang Kotak Admin dibawah Posting Blogger: Logika Otak Kiri

Tutorial: Memasang Kotak Admin dibawah Posting Blogger - Banyak cara untuk membuat tampilan blog menjadi lebih keren, simple dan komunikatif. Salah satunya adalah dengan membuat atau memasang kotak admin dibawah postingan yang isinya adalah keterangan dari Penulis atau Author blog tersebut tentang artikel yang ditulisnya. Kalimat yang dibuat di kotak keterangan dari admin (penulis atau author) ini terserah pada kreasi elo masing-masing. Elo juga bisa menuliskan kata-kata kocak gokil didalamnya. Yang jelas untuk link nama penulis atau author, judul posting dan tanggal publish postingan udah gue sertakan dalam script widget kotak admin ini, sehingga elo elo dan elo semua tidak perlu lagi mengisikan linknya secara manual. Elo juga bisa lihat langsung contoh kotak admin (about author box) yang gue pasang dibawah postingan blog ini, itung-itung Demo-nya.

Cara Membuat Kotak Admin Di Blogspot :

1. Login ke dashboard blogger anda.

2. Pilih Rancangan >> Edit HTML, centang Expand template widget.

3. Cari kode <div class='post-footer'> pada template.

4. Copy script kotak admin dibawah ini dan paste tepat di atas kode <div class='post-footer'>.

<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 Elo</h4>
<div class='kontainer'>
<img src=’http://s1091.photobucket.com/albums/i391/poedrrha/new.jpg’/>
Artikel <a expr:href='data:post.url'><data:post.title/></a> ini diluncurkan 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:left;'><a class='twitter-follow-button' data-button='grey' data-link-color='#00AEFF' data-text-color='#000000' href='http://twitter.com/mbroooh '>Follow @mbroooh
</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></span></p>
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://rayhanzhampiet.blogspot.com/2011/11/cara-membuat-kotak-admin-dibawah.html' target='_blank'>[#]</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>

5. Kemudian cari lagi kode ]]></b:skin> pada template sobat.

6. Copy kode CSS dibawah ini dan paste tepat diatas kode ]]></b:skin>. Jika gagal sobat dapat juga meletakkan kode CSS tadi tepat dibawah kode <data:post.body/>.

.admin-tulisan {
display:block;
width:auto;
background:#c3c3c3;
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 a:link {
color:#a60606;
text-decoration:none;
font-size:12px;
}
.admin-tulisan a:visited {
color:#c50000;
text-decoration:none;
font-size:12px;
}
.admin-tulisan a:hover {
color:#c50000;
font-size:12px;
text-decoration:underline;
}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{
background:#646464;
border:none;
border-bottom:1px solid #fff;
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:link {
color:#c3c3c3;
text-decoration:none;
font-size:12px;
}
.admin-tulisan h4 a:visited {
color:#c3c3c3;
text-decoration:none;
font-size:12px;
}
.admin-tulisan h4 a:hover {
color:#fff;
font-size:12px;
text-decoration:underline;
}
.admin-tulisan img{
width:70px;
height:70px;
margin:0 10px 0 0;
float:left;
border:2px solid #fff;
padding:2px;
background:#414141;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;
}

7. Silahkan ganti link URL gambar profil yang berwarna Biru dengan link gambar profil sobat.

8. Silahkan ganti Deskripsi Blog Elo yang berwarna Hijau dengan deskripsi blog elo. Silahkan ganti link twitter yang berwarna Cream dengan link twitter kalian. 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. Nah sekarang kotak admin yang keren sudah sudah nampak dibawah postingan lo.

Tengkyu semuaaaaaaaaaa... See you next post Tutorial dari gue ;)

Rasaku Rasamu Juga :)