Cara Membuat Kotak Admin di Bawah Postingan

pagi yang dingin ini saya akan berbagi ilmu tentang Cara Membuat Kotak Admin di Bawah Postingan. Setelah tadi jalan-jalan ke blog tetangga buat blogwolking, secara tidak sengaja melihat kotak adminnya yang keren, kebetulan di blog saya masih belum ada kotak adminnya. jadi saya coba cari tutorialnya di goole dan ketemu dan sedikit modifikasi agar sesuai dengan blog ini. Kotak Admin Dibawah Postingan

Bagaimana menurut anda??

Kotak admin ini sudah saya edit sedikit pada css dan scriptnya. jika anda tertarik ingi memasangnya, 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:98%;  background: #CFE2E0;  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:30px auto 10px auto;  font:normal 11px 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: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 Punuli: (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'>

<!-- Kotak Admin --><b:if cond='data:blog.pageType == &quot;item&quot;'>     <div class='admin-tulisan'>          <h4>Penulis: <a expr:href='data:blog.homepageUrl'><data:post.author/></a> Lokasi: Sumpiuh, Banyumas</h4>          <div class='kontainer'>               <img src='Url Photo Sobat'/>Artikel <a expr:href='data:post.url'><data:post.title/></a>, ditulis oleh <data:post.author/> pada <data:post.dateHeader/>. Semoga artikel ini dapat menambah wawasan kalian. Jika kalian ingin menyebarkan postingan dari <data:post.author/> mohon dengan sangat untuk mencantumkan sumber. Terima Kasih               <div style='clear:both;'/>          </div>     </div></b:if><!-- Akhir Kotak Admin --> 

• Ganti yang berwarna hitam dengan url foto anda.teks di modifikasi sendiri.Kemudian simpanjika ingin kotak admin yang sama dengan blog ini, berikut codenyaletakan di atas ]]></b:skin>

.admin-tulisan { display:block; width:98%; background:#ffffff; 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:30px auto 10px auto; font:normal 11px Arial, Sans-Serif; color:#222; } .admin-tulisan .kontainer {padding:5px;} .admin-tulisan h4 { background:#9fd5e2; 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:1px; background:#9fd5e2; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; }

•  Letakan Kode brikut diatas kode <div class='post-footer'> atau di bawah kode <div class='post-footer-line post-footer-line-3'> 

<!-- Kotak Admin --> <b:if cond='data:blog.pageType == &quot;item&quot;'> <div class='admin-tulisan'> <h4>Penulis: <a expr:href='data:blog.homepageUrl'><data:post.author/></a> Lokasi: Pamekasan, Madura</h4> <div class='kontainer'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCiSoqJ9i678GaEQAw8NlCJx_hx_mF6jkrorkAQ3UVMhfVaQaug-w1qxELLHy2X7NlyT5mfxFw6UfgKUq8vO_82XxDhDuO1oPnuO1HKJU0zul-h9TDzhtx2vo3olf3JaE3W8ydAtTg5gM/s200/Gung.jpg'/> Artikel: <data:post.title/><br/> Ditulis Oleh: <data:post.author/><br/> Dipublikasikan Pada<data:post.dateHeader/><br/> Semoga artikel ini dapat menambah wawasan kalian <br/>Artikel ini patenkan di www.myfreecopyright.com. Saya memperbolehkan mempublis ulang (copas) atau mengutip artikel <a expr:href='data:post.url'><data:post.title/></a>, namun sertakan link balik. Jika tidak akan diproses secara DMCA Takedown dan akan berakibat fatal terhadap blog saudara. Terima Kasih <div style='clear:both;'/> </div> </div> </b:if> <!-- Akhir Kotak Admin -->

• Kemudian simpan.Terimakasih sudah membaca artikel Cara Membuat Kotak Admin di Bawah Postingan semoga bermanfaat kritik dan saran di kotak komentar di bawah ini.