Cara membuat kotak Admin di bawah posting Blog

banyak cara yang bisa kita lakukan untuk membuat blog kita indah, namun pada posting kali ini kita akan membuat blog kita lebih komunikatif dengan pengunjung, agar pengunjung merasa dekat dengan kita karna blog kita lebih komunikatif dan lebih terlihat profesional,  nah maka dari itu saya ingin berbagi ilmu kepada sobat semua agar blog sobat terlihat profesional dan komunikatif, dengan cara memasang "KOTAK ADMIN" ,  dan agar lebih komunikatif lagi anda juga
harus memasang kotak dialog atau sambutan saat pengunjung masuk ke blog kita, ya seperti blog saya ini nah bila anda ingin memasang kotak dialog silahkan kunjungi Cara membuat kotak dialog pada saat pengunjung masuk ke blog kita

oke langsung sajah kita bahas cara membuat Kotak Admin, oh ya untuk Demonya bisa anda lihat pada gambar di atas atau di bawah posting ini,   oke nih tutorialnya.

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 == &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/AVvXsEgZcJe6hD0EYpLG-P79RCXOZT7Hc5h4UOa67PdRX3eI4q3CeFrWQJ7SyvDAh060RPJUsi9OTsaCmFSoR9rnioj1hvaoDy4woz9m2t3MBzBpnOngJniAZBjiZzVKDzISfSD7fZEqyi5uUcY/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://ahmadbjblogs.blogspot.com/2012/08/cara-membuat-kotak-admin-di-bawah_24.html' target='_blank'>:: Get this widget ! ::</a></span></p>

<div style='clear:both;'/>

</div>

</div>

</b:if>

<!-- Kotak Admin -->

keterangan,by-Ahmad Bj:

*code di atas akan membuat kotak Admin yang akan tercantum link posting anda secara otomatis , dan     tanggal posting anda secara otomatis,dengan syarat anda tidak boleh merubah code di atas, kecuali yang saya perintahkan di bawah ini

•      ganti tulisan "Deskripsi Blog Anda" dengan kata kata lain sesuai keinginan anda  dan tulisan tersebut akan muncul di atas kotak admin seperti contoh pada kotak Admin saya yaitu tulisan " Share With Ahmad Bj"

•      ganti tulisan yang berwarna biru dengan link foto profil blog anda, jika bingung cara mencari link foto profilnya anda tinggal, masuk Dasboard-> arahkan cursor pada foto-> klik kanan-> copy link location-> kemudian blok url di atas-> tekan ctrl+V, maka secara otomatis link berwarna biru tersebut sudah terganti menjadi link foto profil anda
•      ganti tulisan yang berwarna ungu dengan kata kata sesuai keinginan anda, karna kata kata tersebut akan menjadi isi dari 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/>.

   jika <data:post.body/> ada 2 maka pilihlah yang paling atas, kalau untuk diri saya pribadi sih saya memasang nya di atas kode ]]></b:skin>

klik tombol show untuk melihat script 

.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;

}

keterangan,by-Ahmad Bj:

Untuk jenis font, warna background dan border juga dapat sobat ganti/edit sesuai keinginan, silahkan berexperimen sendiri hehehe :P

Oke sobat biar lebih komunikatif silahkan sobat kunjungi juga Cara membuat kotak dialog pada saat pengunjung masuk ke blog kita

 oke munkin sekian dulu dari saya, jangan bosan untuk mampir di blog saya ya.

Tweet