Cara Membuat Kotak Admin Dibawah Postingan Blog







Cara Pasang Kotak Admin Dibawah Posting Blogger  - Sahabat blogger banyak sekali cara untuk membuat blog menjadi kreatif . Salah satu caranya adalah dengan membuat/memasang kotak admin dibawah postingan .Dimana berisikan keterangan dari penulis/author blog yang berisi tentang artikel yang ditulisnya . Deskripsi/ulasan di kotak keterangan dari admin (penulis/author) ini terserah kreasi Anda masing-masing . (jika perlu Anda dapat menambahkan kata-kata lucu di dalamnya ) .Untuk link nama penulis/author, judul posting dan tanggal publish postingan sudah saya sertakan dalam script widget kotak admin ini, sehingga sobat blogger tidak perlu lagi  mengutak-atik mengisikan linknya secara manual. Sobat dapat melihat langsung contoh kotak admin (about author box) yang saya pasang dibawah postingan blog ini sebagai demo-nya.

Berikut langkah-langkah membuat kotak Admin :

1.       Login ke dashboard blogger Anda.
2.       Pilih Rancangan >> Edit HTML, centang  pada pilihan Expand Template Widget .

3.       Cari kode <div class='post-footer'> (tekan tombol CTRL+F untuk memudahkan pencarian ) pada template.
4.   Copy  script kotak admin dibawah ini dan paste tepat di atas kode  ini <div class='post-footer'>.

<!-- 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> ~ Deskripsi Blog Anda</h4>
<div class='kontainer'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrR1PQ6VK60vyBwqt8eziCXx6DT82xOBLR6Cu5DBW5RhCooeeHYExAr0VJpK9sHavTqO32ho7T7FHV1w8YbTgEjFr5B0k68n6esz2nwvp7c1dzSclTFbM__7AjF7t8GDwNZ0UBx4bLcfg/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/>. 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://rayhanzhampiet.blogspot.com/2011/11/cara-membuat-kotak-admin-dibawah.html' target='_blank'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->


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:#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;
}

7.      Silahkan ganti link URL gambar profil yang berwarna merah dengan link gambar profil sobat. Jika sobat ingin menuliskan dengan kata-kata ulasan yang lain, ganti/edit dulu kata-kata ulasannya di notepad.
8.      Untuk jenis font, warna background dan border juga dapat sobat ganti/edit sesuai keinginan.
9.      Preview dulu hasil kotak admin yang dibuat. Jika editing sudah dirasa cukup, Save/Simpan template anda.
Berikut screenshot yang saya ambil dari blog sahabat klik disini .


Jadi sekarang kotak admin yang keren sudah muncul di bawah posting Anda . Anda dapat mengganti penulis/author menjadi ‘ditulis oleh’ dsb . terserah kresi Anda sendiri .
Selamat berkreasi !!
^_^
Post a Comment