Cara Membuat Kotak Admin Blog / Widget Author Blog

Selamat datang,

Artikel ini telah diupdate pada tanggal 3 November 2016 – Kredit untuk IDBlanter.com telah berbagi kode

Cara Membuat Kotak Admin Blog – Untuk alasan tertentu, widget kotak admin dianggap penting bagi sebagian kalangan blogger.

Misalnya saja biar lebih dikenal, membangun brand dengan identitas kita sendiri, atau hanya sekedar mempercantik tampilan blog agar lebih terlihat profesional.

Sebenarnya dari blogger sendiri sudah tersedia widget bawaan, namun berhubung ada permintaan dari salah satu sobat blogger di grup, maka ngga ada salahnya saya bagikan lagi cara membuat kotak admin blog atau widget author blog dengan design minimalis dan ringan ini.

Berikut contoh tampilan kotak admin yang akan kita buat,

Kelebihan kotak admin ini adalah:

  • Terlihat profesional
  • Design minimalis dan ngga ribet
  • Sangat mudah digunakan dan bisa diedit ulang
  • Tidak mempengaruhi kecepatan loading blog anda
  • Responsif

Untuk penempatan, kita bisa menempatkan kotak admin ini di manapun sesuka hati sebenarnya, namun agar terlihat lazim dan ngga dibilang nyeleneh, maka akan saya bahas cara membuat kotak admin di bawah postingan dan sidebar saja pada artikel kali ini.


Cara Membuat Kotak Admin Blog di Bawah Postingan
Sebelum melakukan perubahan pada template, ada baiknya anda backup terlebih dahulu untuk menghindari hal – hal yang tidak diinginkan jika terjadi kesalahan.

Langkah 1
Silahkan masuk dashboard blogger anda >> Template >> Edit HTLM

Langkah 2
Cari kode di bawah ini dengan cara Ctrl + F

]]></b:skin>

Langkah 3
Kemudian salin kode CSS berikut ini  dan letakkan sebelum atau di atas kode ]]></b:skin> tersebut

 .post_byfix p{padding:0 5px;line-height:25px!important;font:13px Arial;text-align:left;color:#555}.post_byfix p a{text-decoration:none;color:#3498db}.post_byfix{height:100%;background:#fff;margin:-10px 0 20px;padding:12px;overflow:hidden}.post_byimz{display:block;float:left;padding-right:10px!important;margin-top:1px!important;overflow:hidden}.author-name{color:#444;font-family:’Open Sans’,Helvetica,san-serif;font-weight:700;font-size:17px;text-transform:uppercase;margin-top:10px}.spanshare{color:#444;font-family:’Open Sans’,Helvetica,san-serif;float:left;font-size:17px;text-transform:uppercase;margin-top:8px;margin-right:5px;font-weight:700}.post_byimz img{transition:all .5s ease-in-out;width:100%;height:100%;max-width:120px;max-height:120px;border-radius:100%;background:#FFF;float:left;margin:0 10px 0 0;padding:5px;border:3px solid #e3e3e3}.post_by{width:100%;float:right;color:#423119;width:100%;font-family:arial,Helvetica,san-serif;font-weight:400;font-size:12px}.post_by ul{margin:0;padding:0}.author-name i{color:rgb(17, 143, 249)}.post_by li{list-style:none;padding:3px 10px!important}.adspost{display:block;text-align:center;margin:25px auto}

Langkah 4
Cari kode ini

<data:post.body/>

Langkah 5
Kemudian salin kode di bawah ini dan letakkan sesudah atau di bawah kode <data:post.body/> tadi

<div class=’post_byfix’><div class=’post_by’><div class=’post_byimz’>
<span class=’author’><a href=’https://www.facebook.com/bagikeunlagi’ title=’bagikeunlagi’><img expr:alt=’data:post.author’ src=’https://2.bp.blogspot.com/-9SAA98QsQCE/V_3sK4-ZTOI/AAAAAAAAAjg/4X0jbMfidfMye5U-b1sEFenOmDBEbi8PQCLcB/s1600/foto%2Bbaru.png’ title=’Ahmad Alfan Taufiq’/></a></span></div>
<div class=’author-name’><data:post.author/> <i class=’fa fa-check-circle’/></div>
  <p>&quot;Suami ganteng beristri satu. Blogger paruh waktu, tukang promosi, dan mantan pelukis.&quot;</p>
</div></div>

Keterangan : 

  • Tulisan warna merah : Ganti dengan url facebook anda
  • Tulisan warna biru : Ganti dengan URL foto yang hendak anda pasang
  • Tulisan warna hijau : Ganti dengan deskripsi anda sendiri

Langkah 6
Jika sudah beres silahkan Simpan

Cara Membuat Kotak Admin Blog di Sidebar
Untuk membuat kotak admin blog di sidebar caranya ngga jauh beda dari cara membuat kotak admin blog di bawah postingan.

Langkah 1
Silahkan masuk dashboard blogger anda >> Template >> Edit HTLM

Langkah 2
Cari kode ini dengan cara Ctrl + F

]]></b:skin>

Langkah 3
Kemudian salin kode CSS berikut ini  dan letakkan sebelum atau di atas kode ]]></b:skin> tersebut

.post_byfix p{padding:0 5px;line-height:25px!important;font:13px Arial;text-align:left;color:#555}.post_byfix p a{text-decoration:none;color:#3498db}.post_byfix{height:100%;background:#fff;margin:-10px 0 20px;padding:12px;overflow:hidden}.post_byimz{display:block;float:left;padding-right:10px!important;margin-top:1px!important;overflow:hidden}.author-name{color:#444;font-family:’Open Sans’,Helvetica,san-serif;font-weight:700;font-size:17px;text-transform:uppercase;margin-top:10px}.spanshare{color:#444;font-family:’Open Sans’,Helvetica,san-serif;float:left;font-size:17px;text-transform:uppercase;margin-top:8px;margin-right:5px;font-weight:700}.post_byimz img{transition:all .5s ease-in-out;width:100%;height:100%;max-width:120px;max-height:120px;border-radius:100%;background:#FFF;float:left;margin:0 10px 0 0;padding:5px;border:3px solid #e3e3e3}.post_by{width:100%;float:right;color:#423119;width:100%;font-family:arial,Helvetica,san-serif;font-weight:400;font-size:12px}.post_by ul{margin:0;padding:0}.author-name i{color:rgb(17, 143, 249)}.post_by li{list-style:none;padding:3px 10px!important}.adspost{display:block;text-align:center;margin:25px auto}

Langkah 4
Salin kode di bawah ini dan letakkan pada sidebar blog anda, klik Tata Letak >> Tambahkan Gadget ( Bagian sidebar) >> HTML/JavaScript >> Simpan Setelan

<div class=’post_byfix’><div class=’post_by’><div class=’post_byimz’>
<span class=’author’><a href=’https://www.facebook.com/bagikeunlagi’ title=’bagikeunlagi’><img expr:alt=’data:post.author’ src=’https://2.bp.blogspot.com/-9SAA98QsQCE/V_3sK4-ZTOI/AAAAAAAAAjg/4X0jbMfidfMye5U-b1sEFenOmDBEbi8PQCLcB/s1600/foto%2Bbaru.png’ title=’Ahmad Alfan Taufiq’/></a></span></div>
<div class=’author-name’><data:post.author/> <i class=’fa fa-check-circle’/></div>
  <p>&quot;Suami ganteng beristri satu. Blogger paruh waktu, tukang promosi, dan mantan pelukis.&quot;</p>
</div></div>

Keterangan : 

  • Tulisan warna merah : Ganti dengan url facebook anda
  • Tulisan warna biru : Ganti dengan URL foto yang hendak anda pasang
  • Tulisan warna hijau : Ganti dengan deskripsi anda sendiri

Langkah 5
Jika sudah beres silahkan Simpan Template anda

Untuk mendapatkan hasil yang maksimal, anda bisa berkreasi dengan kode yang bisa dicustom seperti merubah ukuran dan lain – lain. Semoga bermanfaat. Salam (bl/aat)

Baca juga : 

26 Comments

    • Ahmad Alfan Taufiq

Reply