Cara Membuat Kotak Admin Di Blog

r Hallou sahabat setiaku,,,bagaimana kabar dipagi hari ini?? semoga semuanya sehat selalu...di postingan kali ini kita akan membahas tentang cara membuat kotak admin di blog ...

contoh kotak admin di blog

jika sobat ingin membuat kotak admin seperti gambar diatas, silahkan ikuti caranya dibawah ini:

1. seperti biasa login dulu ke akun blog sobat

2. pilih template - edit html

3. kemudian cari kode berikut ]]></b:skin> dan letakan kode dibawah ini tepat diatas kode ]]></b:skin

.kotak-admin{display:block; width:auto; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX7D20cF1qsy7bQ2l0gKRMxoajXPfFkAFIptzXfOpicz36a20PbGR9tDh0Wu1kq_WuM6HkX8iXg6dDPUW5NIp87Iu53rj9pwk0Aq2AAVZVbjENwRH0P8CKd2mAwGWN5GTIMIHA7xG8V3tb/);    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;}
.kotak-admin .kontainer-admin{padding:5px;}
.kotak-admin h4{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX7D20cF1qsy7bQ2l0gKRMxoajXPfFkAFIptzXfOpicz36a20PbGR9tDh0Wu1kq_WuM6HkX8iXg6dDPUW5NIp87Iu53rj9pwk0Aq2AAVZVbjENwRH0P8CKd2mAwGWN5GTIMIHA7xG8V3tb/);border:none;border-bottom:1px solid #699019;color:#000;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;}
.kotak-admin h4 a{color:#222;}
.kotak-admin 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;}

4. jika sudah sekarang sobat cari kode berikut <div class='post-footer'> dan letakan kode dibawah ini tepat di atas kode <div class='post-footer'>

<!-- Kotak Admin -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='kotak-admin'>
    <h4>Penulis: <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ Tutorial Blog | Tips Trick | Jejaring Sosial</h4>
    <div class='kontainer-admin'>
    <img src='MASUKAN - URL - GAMBAR - SOBAT'/>
Artikel <a expr:href='data:post.url'><data:post.title/></a> ini dipublish oleh <data:post.author/> pada hari <data:post.dateHeader/><br/>Terima kasih Anda telah membaca artikel tentang <strong><u><data:blog.pageName/></u></strong> , Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel <strong><data:blog.pageName/></strong> ini sangat bermanfaat bagi Blog dan teman-teman anda, namun jangan lupa untuk meletakkan link <u><a expr:href='data:post.url'><data:blog.pageName/></a></u> sebagai sumbernya. Semoga artikel ini bermanfaat dan menambah wawasan kita semua. Jika anda menyukai Blog ini, silahkan like di facebook dan follow kami di twitter. Terima kasih atas kunjungan serta kesediaan Anda membaca dan berkomentar tentang artikel ini.
    <p><span style='float:right;font:italic 2px Arial, Sans-Serif;'><a href='alexandro-tips.blogspot.com' target='_blank' title='Get this widget !'>ABT</a></span></p>
    <div style='clear:both;'/>
    </div>
    </div>
    </b:if>
    <!-- Kotak Admin -->

5. save template sobat kemudian lihat hasilnya...

Tambahan: Untuk template bawaan blogger biasanya kode <div class='post-footer'> ada 2..jadi silahkan ditempatkan diatas kode yang ke 2. Silahkan ganti kode berwarna merah dengan url gambar sobat.

sekiranya artikel ini bermanfaat buat sobat, terima kasih sudah berkenan berkunjung ke blog saya yang sederhana ini..