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='http://4.bp.blogspot.com/-aJGLVA8QmCA/TkFsqEXMgKI/AAAAAAAAAPg/naQPOENy01E/s220/AVATAR%2BKU-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 !!
^_^

Comments

Popular posts from this blog

Contoh Surat Lamaran Kerja di Indomaret Terbaru 2018

Cara Melamar Kerja PT. Musashi Auto Parts Indonesia 2019

Cara Melamar Kerja di PT Astra Honda Motor Secara Online