Cara Pasang Membuat/Memasang Kotak Admin/Author Box Di Bawah Posting Di Bawah Blog

Cara Membuat/Memasang Kotak Admin/Author Box Di Bawah Posting Di Bawah Blog tulisan ini membahas Bagaimana Cara Pasang/Memasang Buat/Membuat Kotak Admin/Author Box Di Blog Kita. Sebelumnya anda pasti sudah tahu Cara Membuat Admin Box Author. Karena sudah banyak di bahas di blog-blog lain, Nah yang berbeda dari tulisan bosimam adalah akan memberikan banyak cara dari sekian banyak cara dan tutorial di blog oke kita bahas satu persatu mulai dari blog nya Mas Irfan.

Cara Membuat Kotak Admin di blogspot (Versi Rayhanzhampiet)
contoh gambar :

1.       Login ke dashboard blogger anda.

2.       Pilih Rancangan >> Edit HTML, centang Expand template widget.

3.       Cari kode <div class='post-footer'> pada template.

4.   Copy  script kotak admin dibawah ini dan paste tepat di atas kode <div class='post-footer'>.

<!-- Kotak Admin -->

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='admin-tulisan'>

<h4>Ditulis Oleh : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> ~ Deskripsi Blog Anda</h4>

<div class='kontainer'>

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijOVuHndh-Vq3d32r48zZY4_ZbJbCfnCajEI-Pj90KRKq5avXZwuktPCiygwgVFILUZIPtJfgH3CJA-WaD7OKEOvUVixNJ8IpuzeoloEu-McUKthUYBaL7cJ-DIr5da0gkzPzVyUh8ZrA/s220/AVATAR+KU-128.jpg'/>

Artikel <a expr:href='data:post.url'><data:post.title/></a> ini diposting oleh <data:post.author/> pada hari <data:post.dateHeader/>. Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar.

<p><span style='float:right;font:italic 10px Arial, Sans-Serif;'><a href='http://rayhanzhampiet.blogspot.com/2011/11/cara-membuat-kotak-admin-dibawah.html' target='_blank'>:: Buat Widget Seperti Ini ::</a></span></p>

<div style='clear:both;'/>

</div>

</div>

</b:if>

<!-- Kotak Admin -->

5.       Kemudian cari lagi kode ]]></b:skin> pada template sobat.

6.      Copy kode CSS dibawah ini dan paste tepat diatas kode ]]></b:skin>. Jika gagal sobat dapat juga meletakkan kode CSS tadi tepat dibawah kode <data:post.body/>.

.admin-tulisan{

display:block;

width:auto;

background:#CFE2E0;

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;

}

.admin-tulisan .kontainer{padding:5px;}

.admin-tulisan h4{

background:#8A9C04;

border:none;

border-bottom:1px solid #699019;

color:#fff;

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;

}

.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:2px;

background:#C36702;

box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;

}

7.      Silahkan ganti link URL gambar profil yang berwarna merah dengan link gambar profil sobat. Jika sobat ingin menuliskan dengan kata-kata ulasan yang lain, ganti/edit dulu kata-kata ulasannya di notepad.

8.      Untuk jenis font, warna background dan border juga dapat sobat ganti/edit sesuai keinginan.

9.      Preview dulu hasil kotak admin yang dibuat. Jika editing sudah dirasa cukup, Save/Simpan template anda.

Oke Selanjutnya kita bahas cara ke dua dari blog Kang Ojel yaitu Untuk Cara Pasang Kotak Admin/Author Box Dibawah Postingan Blog or Cara Membuat Kotak Admin Dibawah Postingan and keyword Google Cara Membuat Author Box Di Bawah Postingan / Artikel blog, silahkan ikuti panduannya berikut ini :

1. Pada halaman dasbor blog, klik tab RANCAGNAN
2. Pada halaman RANCANGAN, klik tab EDIT HTML.
3. Sebaiknya download dulu template anda untuk mencegah kerusakan template karena salah dalam melakukan pengeditan pada kode HTML Template blog.
4. Klik kotak kecil yang ada di depan tulisan EXPAND TEMPLATE WIDGET
5. Cari kode di bawah ini :
]]></b:skin>
Gunakan tombol F3 pada keyboard untuk melakukan pencarian cepat.
6. Copy kode Dibawah ini, lalu pasang / Paste di ATAS kode ]]></b:skin>
*--- Author Box ---**/
.author-box {
background:#424242;
margin:20px 0 0 0;
padding:10px 10px 0px 10px;
overflow:auto;
color:#FFFFFF;
font-family:verdana, sans-serif;
}

.author-box p {
margin:0;
padding:0;
}

.author-box a{
color:#FFF;
}

.author-box img {
background: #FFFFFF;
float: left;
margin: 0 10px 0 0;
padding: 4px;
}

Jika ingin mengganti warna background kotak Author Box, ganti kode #424242 dengan kode warna anda. Untuk melihat kode warna, silahkan scroll halaman blog ini ke atas, lalu klik TAB KODE WARNA yang ada di samping Logo Blog Bloggerbugis. Jika ingin memberi background gambar, ganti kode background:#424242; dengan kode di bawah ini :

background:#424242 url(GANTI KALIMAT MERAH INI URL GAMBAR ANDA);

color:#FFFFFF; adalah kode warna huruf. Ganti kode yang berwarna merah dengan kode warna anda untuk mengganti warna huruf.


Selanjutnya.............................

Copy kode berikut ini :

Paste / Pasang / Tempel, atau terserah anda menyebutnya apa di BAWAH kode <div class='post-footer-line post-footer-line-1'> template blog kesayangan anda. Berikut kodenya :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='author-box'>
<p><img alt='avatar' class='avatar avatar-70 photo' height='70' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipy3YF9E5t_oYrKYC9EBqKCuNavb2nxqshYoxcBnTEEgInTI8qyhWOw11kw0mw_yQWWptriRjQXjAolqCHMa9O4TI31hu696gDVFTs37naaKVI8vhdrU4U129jk6_AaQtWzaPAuo54MV06/s220/Foto+Contact+Me.png' width='70'/><div style='text-align: justify; font-family:trebuchet ms; font-size:13px; text-shadow:2px 2px 3px #000000;'><a href='http://www.blogger.com/profile/12066614431010301134' target='_blank'>AWALUDDIN.</a> Saya hanya orang biasa yang ingin menjadi luar biasa. Berharap bisa sukses di dunia dan selamat di akhirat. Terima Kasih telah berkunjung di BLOGGERBUGIS. Semoga artikel Tutorial Blogger yang anda baca di Blog BLOGGERBUGIS ini bermanfaat. Salam Blogger, happy blogging, Have a nice day, ... </div><br/></p>
</div>
</b:if>


Ganti kode https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipy3YF9E5t_oYrKYC9EBqKCuNavb2nxqshYoxcBnTEEgInTI8qyhWOw11kw0mw_yQWWptriRjQXjAolqCHMa9O4TI31hu696gDVFTs37naaKVI8vhdrU4U129jk6_AaQtWzaPAuo54MV06/s220/Foto+Contact+Me.png dengan URL gambar yang ingin anda tampilkan di kotak Author Box. Sebaiknya berukuran 70px X 70px.
Ganti kode http://www.blogger.com/profile/12066614431010301134 dengan URL profil blog anda.
Ganti kode AWALUDDIN. dengan nama anda.
Ganti kode Saya hanya orang biasa yang ingin menjadi luar biasa. Berharap bisa sukses di dunia dan selamat di akhirat. Terima Kasih telah berkunjung di BLOGGERBUGIS. Semoga artikel Tutorial Blogger yang anda baca di Blog BLOGGERBUGIS ini bermanfaat. Salam Blogger, happy blogging, Have a nice day, ... dengan kalimat yang ingin anda sampaikan di kotak Widget Author Box.


Anda masih bisa mengedit kode yang lain sesuai keinginan anda seperti Jenis Huruf, Warna huruf, dll. Silahkan acak² saja kodenya sampai puas hehehe....

Simpan Template Selesai.

Baiklah Sementara sekian dulu posting saya tentang  Cara Mudah Membuat/Memasang Kotak Admin/Author Box Di Bawah Posting Di Bawah Blog. Tunggu Tips Trik Blog saya tentang Kotak Admin/Author Box tentunya yang lebih keren dan menarik.