Cara Membuat Kotak Admin di Bawah Postingan

Malam 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.
Bagaimana menurut anda??
Kotak admin ini sudah saya edit sedikit pada css dan scriptnya. jika anda tertarik ingi memasangnya, silahkan ikuti tutor berikut:

1. Pastinya harus login terlebih dahulu ke blog anda.
2. Pilih Template > edit html.
3. Kemudian cari kode berikut  ]]></b:skin> agar mudah dalam pencarian gunakan Ctrl+F
4. 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; }
5.  #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.
6. 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'>
7. 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 -->
   
8.  Ganti yang berwarna ungu dengan url foto anda.teks di modifikasi sendiri.
9. Kemudian simpan
   jika ingin kotak admin yang sama dengan blog ini, berikut codenya
   letakan 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/AVvXsEiIaxXMJsTrjA25aYt-NxGTkWgZ29cYNBuxzlW-3Tu8xYHvrlJtW7qkJ_7UuY5u8Czun5XZ0g9vqfjOeUjDm61oc38Scbw4tuADdoSyaJCYmhn15qihYm6qC_ykbIq2bSUoVG2KKR8CTmI/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 -->
10. Kemudian simpan.

Terimakasih sudah membaca artikel Cara Membuat Kotak Admin di Bawah Postingan semoga bermanfaat 

Share on Google Plus

About catatancidingku.bligspot.com

M Agung Sutrisno: Saya seorang Web Devoloper sejak tahun 2015. Saya tertarik dengan dunia IT sejak tahun 2013. Lulus dari Universitas Islam Madura pada tahun 2016. Pernah bekerja di Univeritas Islam Madura selama 2 tahun. Mulai tahun 2017 mulai bekerja sebagai Web Developer di salah satu perusahaan software PT. Warung Jasa Teknologi, Jakarta.