Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Kotak Admin Dibawah Postingan Blog


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.


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 == &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/AVvXsEhJkb3ETzihf-ULCxY3GxxwQ4-wMhil_xsdAsudVaEO5hbYWhTl4kqRQC_N53i47R6R6kjxuFXW871bWvIFPmxMVtDnRv0VWAmvL7SldtQE2sEI2Y6YMur99J-og2gu9NBY7CAEs8v5wjE/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.


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

Sumber: Hompimpa Alaihum Gambreng

86 komentar untuk "Cara Membuat Kotak Admin Dibawah Postingan Blog"

  1. pertamax,,
    mantab mas aril.. hehehe

    mahir blogging
    http://penowo.blogspot.com

    BalasHapus
  2. Wah makasih tutorialnya, siip bangets ntar mo di coba ah

    BalasHapus
  3. Sundul Mas Biar Lompat Heheheh.. Moga Sukses Selalu :D

    BalasHapus
  4. hemmmhhh,,,kontka admin buat apa manfaatnya ya mas? maaf nih saya masi baru jadi masi agak kurang faham tentang beberapa menu dan kegunaannya di blogspot,, terima kasih

    BalasHapus
  5. nice post gan, eh ya, aku mau promosi nih http://seocontest.century21.co.id/2011/ kunjungi ya :)

    BalasHapus
  6. itu berat kga ya om 'ariel'? #ehh
    kodenya ko kayanya banyak bener :|

    BalasHapus
  7. @beby
    Ngga berat koq beb..cuman pake kode CSS aja ! Kalau mau dikompress CSS bisa juga tuh biar ukurannya (size)jadi lebih kecil lagi.

    BalasHapus
  8. Makasih ya atas infonya gan...salam kenal gan

    BalasHapus
  9. thanks buat artikelnya mas

    numpang promosi nih
    ada blog kontes dan SEO Kompetisi kunjungi link ini
    : http://seocontest.century21.co.id/2011/
    untuk mendapatkan info lebih lengkap

    BalasHapus
  10. Mas, kalau bisa mohon sertakan link sumbernya pada postingan yang satu ini. Jangan khawatir dengan anggapan bahwa menyertakan link sumber akan mengurangi kualitas sebuah posting. Itu semua salah. Baca halaman kebijakan dan privasi. So, semoga sukses! ^_^

    Sumber

    BalasHapus
  11. Informasi yang sangat bermanfaat...

    BalasHapus
  12. @Tukang Pos
    Terima kasih sudah mengingatkan saya dan mohon maaf atas kekhilafan ini. Link sumber sudah saya tambahkan pada artikel ini. Salam Blogger

    BalasHapus
  13. wah artikelnya bagus ni gan..
    infonya juga wajib di coba ni..

    mksih ya gan atas infonya.. ;;)

    BalasHapus
  14. Ooo.. langsung make kode CSS ya? kirain make plugins? Nice info. Trims mas :)

    BalasHapus
  15. Mantab share nya, makasih mas, banyakin sharing tipsnya yah...

    BalasHapus
  16. Mantaf sharenya gan.... udah w utak atik widgetnya hehehe... makasih infonya gan

    BalasHapus
  17. Makasih infonya sobat. Udh saya coba, ternyata bagus juga...

    BalasHapus
  18. izin sedot gan

    follback ya
    http://4kopisusu.blogspot.com

    BalasHapus
  19. Nice post sob.. :D

    Salam kenal n sukses selalu ya.. :D

    BalasHapus
  20. Info mantap nih, boleh dicoba dulu nih..

    BalasHapus
  21. keren sob tipsnya ane udah pake

    BalasHapus
  22. Terima kasih atas infonya. Sangat membantu

    BalasHapus
  23. makasih buat info and toritorialnya bro,...!!!

    great job...

    BalasHapus
  24. makasih tipsnya mas... ntar saya coba

    BalasHapus
  25. thx tutorialnya mas, lagi belajar nih.
    salam sukses!

    BalasHapus
  26. Infonya sip banget gan.. ;)
    Saya coba ya..

    Kunjungi balik ya gan... :)

    BalasHapus
  27. sob ijin pake widgetnya neh,
    mantep dan udah saya pasang.

    BalasHapus
  28. terima kasih banyak gan, saya sudah mencobanya di blog saya ternyata hasilnya keren banget. tengkyu 1000x tengkyu

    BalasHapus
  29. :-t
    itu di kode css nya ada link website sobat apa ga pa2 kalau dipasang??

    http://twokanggrafis.blogspot.com/

    BalasHapus
  30. makasih Ka, sudah saya terapkan di blog saya dan berhasil :D

    BalasHapus
  31. trims mas atas infonya..langsung praktek

    BalasHapus
  32. bos kalo untuk template blogger baru, kode seperti apa? koq kode diatas di blog ane tdk ada?

    BalasHapus
  33. saya coba dulu mas hehe soalnya saya pake permalink kok ya ndak bisa hehe

    BalasHapus
  34. INFONYA MANTAAAAAABB.....AKU PUNYA NIE DOWNLOAD TEMPLATE TERBARU O-OM DI MIVOMEDIA.BLOGSPOT.COM

    BalasHapus
  35. thanks banget neh mas, sudah sukses neh author box nya...

    BalasHapus
  36. makasih yah mas infonya nih,,,berguna buat blogspot saya, karena sya baru belajar nih.....

    BalasHapus
  37. Asik Nieh mau saya pasang di blog saya ya gan

    BalasHapus
  38. oke sob, mantap. mau nurut juga nih.

    BalasHapus
  39. Wah kalo itu kan buat blog dengan single author, nah kalo buat blog multi author gimana dong bikin admin box nya gan?

    BalasHapus
  40. Assalamu Alaikum, Saya Hampir Takut Dengan Sindiran tentang tukang kopas, kopy, tp saya pikir mungkin bukan ini yg di maksud. Intinya saya cuma mengaplikasikan apa yang sobat ajarkan.

    BalasHapus
  41. gak namabah berat tah gan lo terlalu banyak memasukan script ke template

    BalasHapus
  42. makasih infonya mas..
    kalo cara buat smile uat komenan gimana tuh mas..
    mohon jawabannya ditunggu ,,:)

    BalasHapus
  43. makasih infonya
    http://aura-naira.blogspot.com/

    BalasHapus
  44. Ini yang saya cari keren buat di gabungin ma template editan

    BalasHapus
  45. di tunggu kunjungan baliknya gan,,,,

    BalasHapus
  46. turorial sanagt menarik tapi ngk bisa dipasang diblog ane. mungkin blog ane dah terlalu ruwet. mohon ditinjau...makasih

    BalasHapus
  47. thanks bro.. ilmunya mantep nih.. nambah ilmu.. makasih yah...

    BalasHapus
  48. bagus sekali informasinya,
    mudah-mudahan informasinya bermanfaat.

    BalasHapus
  49. Terima kasih atas tips dan widgetnya Mas...
    Salam hangat dari Tasikmalaya

    BalasHapus
  50. halo mas,salam kenal dari saya di pekanbaru.mantap benar blognya mas salut dach.penataan yang begitu apik dan sungguh menarik.oh ya mas saya jg mau nanya "gimana sih cara membuat kolom widget buku tamu dipinggir kiri atau kanan blog?"seperti kolom shoutmix,blogger,twitter dll diblog mas ini.tlg pencerahanya mas?kunjungi jg blog saya di:http://myrecoveryboiler.blogspot.com/
    tlg balas ke email sy mas di:awboiler75@gmail.com

    BalasHapus
  51. Sudah Lama Gak Main kesini... :) Mas Irfan.. Sobat Blogger Ku.. Yang Dulu Masih Pakek Template Juragan Kini sudah Sukses... :)

    BalasHapus
  52. suguhan artikel yang menarik ne gan.

    happy blogging kalau sempat mampir juga ke blog saya ya gan.:)

    BalasHapus
  53. Izin coba dulu gan,tolong koreksinya ya.?

    BalasHapus
  54. Wah makin keren aja nih blog aku pake fitur ini, makasih ya gan :D
    Terimakasih nih kalo mau berkunjung :D
    http://septia-mujizat.blogspot.com

    BalasHapus
  55. thankyouuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu somaddddd....

    nice post...!!

    BalasHapus
  56. Makasih Gan... langsung di praktekin ah..

    BalasHapus
  57. dengan kreativitas semua menjadi lebih bernilai dan indah...terimakasih mau saya terapkan ilmunya ...

    BalasHapus
  58. Terima kasih infonya, Patut dicoba.

    Salam. Kraeng Francisco

    BalasHapus
  59. bermanfaat sekali... ijin praktek dulu :)

    BalasHapus
  60. siip artikel mantab gan... terimakasih udah disharing..

    BalasHapus
  61. sip udh dicoba dan trnyata brhasiill hehe

    BalasHapus
  62. praktek dulu gan.mohon ijin
    Regards

    BalasHapus
  63. terima kasih sob tutorialnya

    BalasHapus
  64. sukses diterapkan gan :D mantab tips membuat kotak adminnya

    BalasHapus
  65. Nice infonya gan.. Jangan lupa berkunjung ke blog ane gan :)

    BalasHapus