Cara Membuat Kotak Admin Di Bawah Postingan blog

Cara Membuat Author Box di Bawah Postingan - Cara/trik memberi kotak penulis/author box di bawah setiap postingan atau cara menambah identitas penulis di bawah postingan atau cara agar nama penulis bisa tercantum di bawah setiap posting blog, Cara membuat kotak admin di bawah postingan blog


Sebagian blogger Membuat Kotak Admin Di Bawah Artikel/Postingan Blog dan artikel ini sama dengan Cara membuat kotak admin di blog tetapi sedikit berbeda itu perlu, ada yang bilang ini juga salah satu SEO untuk Blog anda. Apa yang di maksud Kotak Admin Di Bawah Artikel/Postingan Blog ? Untuk lebih jelas-nya silahkan anda lihat gambar di bawah ini, letak-nya tepat di bawah postingan Blog anda, jika anda tertarik tanpa panjang lebar langsung saja ikuti petunjuk di bawah.

Berikut Cara Membuat Kotak Admin Di Bawah Artikel/Postingan Blog - Kotak admin - Permalink Blog :

1. Log in ke account Blogger anda

2. Pada "Dashboard" klik "Design", setelah itu klik "Edit HTML"

3. Centang "Expand widget templates", untuk berjaga-jaga dalam melakukan kesalahan Edit template blog, klik "Download template lengkap"

4. Cari kode di bawah ini, untuk mempermudah pencarian tekan Ctrl + F

]]></b:skin>

5.Setelah ketemu kode di atas, Copy kode di bawah ini dan Paste tepat di atas-nya ]]></b:skin>

.kotak-admin{display:block; width:auto; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKJN-sfMzS01cCyPgYLFv8zaZY3Tpa7NAliGU1kJXKsCd4oOBaJMOFxaYPPAUMyIo_H4pSL2Goy8hgncn6FCjSaeWpCLYVWA6MdlqjlQjyTwbKvogEE1fBvn0Hdq3-6UtCcrjuMrxwPwHz/);    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/AVvXsEiKJN-sfMzS01cCyPgYLFv8zaZY3Tpa7NAliGU1kJXKsCd4oOBaJMOFxaYPPAUMyIo_H4pSL2Goy8hgncn6FCjSaeWpCLYVWA6MdlqjlQjyTwbKvogEE1fBvn0Hdq3-6UtCcrjuMrxwPwHz/);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;}

6.Selanjut-nya cari kode di bawah ini

<div class='post-footer'>

7. Jika sudah dapat kode di atas, Copy kode di bawah ini lalu Paste tepat di atas-nya <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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk2Qtrk4a_j3wyw5lPY-NB_LGFQX1d54ibMtdn3WpM8Kthez8qo1GYKKqV6bvJRqf2dswSnpqW44CAVFEAQ05ic4A7_Pmg8yPIjyu9ID83A-MJH_zBdtUzW26HoBpPUE_-HXbkZZPqoT0/s1600/ivennuary-com.png'/>
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='http://www.seowaps.com' target='_blank' title='Get this widget !'>seowaps</a></span></p>
    <div style='clear:both;'/>
    </div>
    </div>
    </b:if>
    <!-- Kotak Admin -->

8. Ganti tulisan yang berwarna Biru dengan Link gambar atau Link logo Blog anda

9. Setelah itu klik "Save template/Simpan template" anda, dan lihat hasil-nya.

Ket: Jika anda mengerti tentang CSS anda bisa mengedit kode Script pada point 5 untuk mengedit tampilan Kotak Admin Di Bawah Postingan Blog anda.

Posted in: Panduan Blogger