Cara Pasang Kotak Admin
Cara Pasang Kotak Admin Dibawah Posting Blogger - Banyak cara untuk membuat tampilan blog menjadi lebih baik dan komunikatif. Salah satunya adalah dengan membuat/memasang kotak admin dibawah postingan yang berisikan keterangan dari Penulis/Author blog tersebut tentang artikel yang ditulisnya. Ulasan yang dibuat di kotak keterangan dari admin (penulis/author) ini terserah pada kreasi masing-masing.
Sobat blogger bisa juga menuliskan kata-kata lucu didalamnya. Yang jelas untuk link nama penulis/author, judul posting dan tanggal publish postingan sudah saya sertakan dalam script widget kotak admin ini, sehingga sobat tidak perlu lagi mengisikan linknya secara manual. Sobat dapat melihat langsung contoh kotak admin (about author box) yang saya pasang dibawah postingan blog ini sebagai 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'>.
<!-- 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'>
<imgsrc='https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRCOJZbqozx0EgnoM4wpF3nTqLb9x-Mr8wn8TANoDbd5bLWWPIu4A'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a> ini diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>. Pre Update dibentuk oleh Ardi,seorang siswa SMP Stella Maris,saya hanya ingin mensharekan apa yang saya ketauhi untuk para agan.Terimakasih atas kunjungan Para Agan serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar. |Admin Pre Update|
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://preupdate.blogspot.com/2013/05/cara-pasang-kotak-admin-dibawah-posting.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 dan tulisan berwarna biru dapat diganti dengan kata-kata sesuai selera
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.
ScreenShot
Ardi Primajati
Saya Ardi Primajati dari Jogjakarta yang sekarang duduk di bangku SMP kelas 9.Keiatan Sehari-hari saya bermain komputer yang berhubungan dengan desain website,software,cracker.Terima kasih telah berkunjung di blog saya
Thx For Visiting !
Latest posts by Ardi Primajati (see all)
Categories:
Tutorial
0 comments:
Post a Comment