Cara Membuat Kotak Admin Di Bawah Postingan Blog

Cara Membuat Kotak Admin Di Bawah Postingan, Selamat Malam Sobat ini Rifany, Pada Kesempatan Malam Ini saya akan berbagi cara Membuat Kotak Admin Di Bawah Postingan fungsi dari kotak admin ini cukup penting, selain menambahkan keyword pada setiap artikel, juga menghargai para pembaca yang sudah mau mampir di blog kita. Penasaran membuatnya seperti apa?? Langsung saja ikuti langkah-langkah di bawah ini.

silahkan ikuti tutor berikut:

Pastinya harus login terlebih dahulu ke blog anda.
Pilih Template > edit html.
Kemudian cari kode berikut ]]></b:skin> agar mudah dalam pencarian gunakan Ctrl+F
jika sudah ditemukan, pastekan kode berikut ini diatas kode ]]></b:skin>


.admin-tulisan {
  display:block;
  width:99%;
  
  border:2px solid #fff;
  -webkit-box-shadow:0 1px 3px #000;
  -moz-box-shadow:0 1px 3px #000;
  box-shadow:0 1px 3px #000;
  padding:0;
  margin:3px;
  font:normal 11px Arial, Sans-Serif;
  color:#222;
}

.admin-tulisan .kontainer {padding:5px;}

.admin-tulisan h4 {
  background:#363635;
  border:none;
  border-bottom:1px solid #699019;
  color:#fff;
  text-transform:uppercase;
  text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);
  font:bold 11px 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:4px;
  background:#C36702;
  -webkit-box-shadow:none;
  -moz-box-shadow:none;
  box-shadow:none;
}

#CFE2E0 = warna dari backgroundnya. rubah sesuai keinginan agar lebih keren.#FEEA83 = warna backgroun pada Penulis: (bagian atas) -webkit-box-shadow:0 1px 3px #000; -moz-box-shadow:0 1px 3px #000; box-shadow:0 1px 3px #000;

Kode demgan warna ini adalah shadownya. jika ingin menebalkan shadow atau menguranginya.
Selanjutnya cari kode <div class='post-footer'>

Penting!!!
Jika diletakan di atas kode <div class='post-footer'> tidak tampil kotak adminnya, letakan kode berikut di bawah kode
<div class='post-footer-line post-footer-line-3'>
kemudian paste kode berikut di atas kode <div class='post-footer'>

<div class='kontainer'>
               <img src='Url Photo Sobat'/>

<!-- Kotak Admin -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='admin-tulisan'>
<h4>Diposting Oleh : <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> - Admin</h4>
<div class='kontainer'><img src='Url Photo Sobat'/>
Judul : <a expr:href='data:post.url'><data:post.title/></a> <br/>
Berisi tentang :<b><a expr:href='data:post.url'><data:blog.metaDescription/></a></b>
  <br/>
Dengan url <strong><data:post.url/></strong><br/>

By : <a expr:href='data:blog.homepageUrl'><data:blog.title/></a> - <strong>Silahkan Di Bagikan Jika sekiranya Bermanfaat, dilarang mengcopy Postingan Ini Tanpa Mencantumkan Link Sumber.</strong>
<br/>

<div style='clear:both;'/>
  </div>
</div>
</b:if>
<!-- Kotak Admin -->

Ganti yang berwarna ungu dengan url foto anda.teks di modifikasi sendiri.
Kemudian simpan

Demikian Postingan Cara Membuat Kotak Admin Di Bawah Postingan

Post Tags:

Dunia Blogger

Jillur Rahman

I'm Jillur Rahman. A full time web designer. I enjoy to make modern template. I love create blogger template and write about web design, blogger. Now I'm working with Themeforest. You can buy our templates from Themeforest.

Website: http://masala-portfolio-jr.blogspot.com/