Cara Membuat Kotak Admin Dibawah Postingan Blog

Cara Pasang Kotak Admin Dibawah Posting Blogger  - Banyak cara untuk membuat tampilan blogmenjadi lebih baik dan komunikatif. Salah satunya adalah dengan membuat/memasang kotakadmin dibawah postingan yang berisikan keterangan dari Penulis/Author blog tersebut tentangartikel yang ditulisnya. Ulasan yang dibuat di kotak keterangan dari admin (penulis/author)ini terserah pada kreasi masing-masing. Sobat blogger bisa juga menuliskankata-kata lucu didalamnya. Yang jelas untuk link nama penulis/author, judulposting dan tanggal publish postingan sudah saya sertakan dalam script widgetkotak admin ini, sehingga sobat tidak perlu lagi mengisikan linknya secaramanual. Sobat dapat melihat langsung contoh kotak admin (about author box) yang saya pasang dibawahpostingan blog ini sebagai demo-nya.

Cara Membuat Kotak Admin Di Blogspot :

1.      Login ke dashboard blogger anda.

2.      Pilih Rancangan >> Edit HTML, centangExpand template widget.

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

4.   Copy script kotak admin dibawah ini dan paste tepat di atas kode <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/AVvXsEiRTGie1XcceEo59HOEBec7dRVcSlVllGAjRYU1Os46C0Fws6RPuGa3xEre-0qhV9rdAZ8SPjHNicfetHud65l8Dq-t_O0S_Cx2WP_-s0wcv9NX8OYki4V-oUYSlmTD3Y7uz7HArhAe9gc/s220/AVATAR+KU-128.jpg'/>

Artikel <aexpr:href='data:post.url'><data:post.title/></a>ini diposting oleh <data:post.author/> pada hari<data:post.dateHeader/>. Terimakasih atas kunjungan Anda serta kesediaanAnda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.

<p><span style='float:right;font:italic10px Arial, Sans-Serif;'><ahref='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 diataskode ]]></b:skin>. Jikagagal 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 yangberwarna merah dengan link gambar profil sobat.Jika sobat ingin menuliskan dengan kata-kata ulasan yang lain, ganti/edit dulu kata-kataulasannya di notepad.

8.      Untuk jenis font, warna background dan border jugadapat sobat ganti/edit sesuai keinginan.

9.      Preview dulu hasil kotak admin yang dibuat. Jikaediting sudah dirasa cukup, Save/Simpan template anda.

Nah sekarang kotak admin yang keren sudah nampangdibawah postingan sobat. Ayo tuangkan ide kreasi kamu untuk membuat kotak admin dibawah postingan blog sobat jadi tuambah keren lagi. Tadinya untukPenulis/Authornya saya juga mau memakai kata-kata "Ditulis Oleh : Ayu Ting Tingyang sedang mencari alamat palsu". Namun batal karena takut diprotes ama Ayu Ting Ting yang beneran..hi..hi.