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.

Cara Membuat Kotak Admin Di Bawah Postingan
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/AVvXsEgezwesaLYFULtPk1B-7csVn2Q4vcrVaikzHUnoOBjNkK_AviVtwbwuxJK_8k9ZDxRwLunpnapHirBfk0arN4ZVjeeS6dDFuHBpIkWJ0ynbBHcWDIV_JRBHFQZr68TiCtYOHoh898XGy5Pj/);    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/AVvXsEgezwesaLYFULtPk1B-7csVn2Q4vcrVaikzHUnoOBjNkK_AviVtwbwuxJK_8k9ZDxRwLunpnapHirBfk0arN4ZVjeeS6dDFuHBpIkWJ0ynbBHcWDIV_JRBHFQZr68TiCtYOHoh898XGy5Pj/);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/AVvXsEhf9ugye1EP1wOKiBbrZNt7w1HsFcfC334cNLCEMep7-USdXJkir-4aAeaLfMO8TUxeylQpQrlmdh4ocxLoMv7jO9Cb4Ko0ywSJmQmESmcgkYiccDKZAYjJDXZgxkMef8FR4r6Tb-lRlcw/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://my-azura.blogspot.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.
Terima kasih telah membaca artikel Cara Membuat Kotak Admin Di Bawah Postingan blog
Artikel ini memiliki rating: 97% Top Artikel dari 93058 ratings. 93058 pembaca merekomendasikan ini.
Ditulis Oleh Zai Azura
Description: Cara Membuat Kotak Admin Di Bawah Postingan blog
Terimakasih atas kunjungan Sobat beserta kesediaan Sobat membaca artikel ini. Kritik dan Saran dapat Sobat sampaikan melalui Kotak komentar dibawah.

0 comments

Post a Comment

Catatan: (memasukan item pada komentar)
Untuk menyisipkan gambar, gunakan tag <i rel='image'>URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

Link aktif akan dimatikan secara otomatis.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

NB: Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (Out Of Topic) dengan menekan tombol OOT di bawah ini.


Konversi Kode di Sini! Emoticon OOT
Back to Top