Rabu, 07 Maret 2012

Membuat Kotak Admin di Bawah Postingan Blog

Advertisement
Advertisement

Membuat Kotak Admin di Bawah Postingan Blog
Dalam rangka memperlengkap artikel di Blog ini, kali ini saya akan berbagi Tutorial blog tepatnya yaitu Cara Membuat Kotak Admin di Bawah Postingan Blog, mungkin Tutorial ini sudah banyak berkelimangan di internet yang disebarkan oleh para Blogger, tapi tidak ada salahnya juga kan kalo saya berbagi tutorial yang satu ini. Kotak admin ini sangat bermanfaat untuk Blog kita, selain untuk mempercantik tampilan Blog kita, kotak admin ini juga katanya sih merupakan SEO untuk Blog kita. Oke deh untuk lebih jelasnya silahkan lihat gambar dibawah :

Untuk sahabat yang pengen Kotak Admin ini silahkan ikuti langkah langkah Membuat Kotak Admin di Bawah Postingan Blog :

  • Seperti biasa masuk ke akun Blogger masing-masing
  • Masuk ke menu Rancangan -> Edit HTML
  • Beri centang pada kotak "Expand Widgets Templates"
  • Carilah kode  ]]></b:skin>
  • Kalo sudah ketemu, simpan Script dibawah ini tepat di atas kode  ]]></b:skin>
.kotak-admin{display:block; width:auto; background:url(http://lh6.ggpht.com/_pt7i0nbIOCY/TKaGCrdlU1I/AAAAAAAAC2w/WRdSIMpiTiY/bgh3_thumb%5B1%5D.jpg); 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;}
.kotak-admin .kontainer-admin{padding:5px;}
.kotak-admin h4{background:url(http://lh6.ggpht.com/_pt7i0nbIOCY/TKaGCrdlU1I/AAAAAAAAC2w/WRdSIMpiTiY/bgh3_thumb%5B1%5D.jpg);border:none;border-bottom:1px solid #699019;color:#000;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;}
.kotak-admin h4 a{color:#222;}
.kotak-admin 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;}

  • Kemudian cari kode yang mirip dengan kode berikut  <div class='post-footer'>
  • Kalo sudah ketemu silahkan simpan kode berikut di atas kode <div class='post-footer'>

<!-- Kotak Admin -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='kotak-admin'>
<h4>Penulis: <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ Tutorial Blog | Tips Trick | Jejaring Sosial</h4>
<div class='kontainer-admin'>
<img src='http://4.bp.blogspot.com/-F5Oqv_IIc74/T1TsRLcXUqI/AAAAAAAAAN4/PXYShb2KjC4/s200/efek+salju+pada+blog.jpg'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a> ini dipublish oleh <data:post.author/> pada hari <data:post.dateHeader/><br/>Terima kasih Anda telah membaca artikel tentang <strong><u><data:blog.pageName/></u></strong> , Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel <strong><data:blog.pageName/></strong> ini sangat bermanfaat bagi Blog dan teman-teman anda, namun jangan lupa untuk meletakkan link <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> sebagai sumbernya. Semoga artikel ini bermanfaat dan menambah wawasan kita semua. Jika anda menyukai Blog ini, silahkan like di facebook dan follow kami di twitter. Terima kasih atas kunjungan serta kesediaan Anda membaca dan berkomentar tentang artikel ini.
<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://situsmadu.blogspot.com/2012/03/membuat-kotak-admin-di-bawah-postingan.html' target='_blank' title='Get this widget !'>:: Get this widget ! ::</a></span></p>
<div style='clear:both;'/>
</div>
</div>
</b:if>
<!-- Kotak Admin -->
  • Ganti tulisan berwarna Merah dengan URL foto sobat atau URL gambar yang sobat kehendaki.
  • langkah terakhir tinggal Save/Simpan Template
Selamat mencoba, dan semoga berhasil Membuat Kotak Admin di Bawah Postingan Blog.


10 komentar

Kunjungan balik atas Kunjungan Perdana Agan Di Blog Saya ^^

Nice Site...
jangan Bosan Untuk berkunjung Lagi :)
keren Tutornya..Makasi Gan..

@Vertical Network terimakasih juga atas kunjungannya, happy blogging..

sep mas artikelnya...
saya sudah pake cara ini, tapi berhubung udah penuh, saya buang deh...
keep posting

Hi! im soo in love with your blog.. keep on writing.. please visit my blog..

Mas kodenya gak bisa di kopi / gak bisa klik kanan

Komentar ini telah dihapus oleh pengarang.

tes tes..kok gk bisa dicopy kodenya ?

Komentar anda sangatlah berarti bagi kami, silahkan berkomentar dengan bijak dan sopan. Komentar dengan mencantumkan Link aktif akan kami hapus.
EmoticonEmoticon