Wednesday, November 30, 2011

Cara Membuat Kotak Admin/Author Box DiBawah Postingan Blog

Tutorial Cara Membuat Kotak Admin/Author Box Dibawah Postingan Blog or Membuat Kotak Admin Dibawah Postingan and keyword Google Cara Membuat Author Box Di Bawah Postingan nah lengkapkan bahasa saya juga lihat judul Tutorial Blog Yang saya buat Tentang Cara Membuat Kotak Admin/Author Box artinya apa dari segi Judul SEbuath Blog Pun kita harus memperhatikan hal ini Judul Blog Yang SEO FRIENDLY adalah yang seperti ini Cara Membuat Kotak Admin/Author Box Pada Blog Author Box adalah kotak kecil yang biasanya dipasang di bawah artikel / postingan blog. Guananya untuk menggantikan widget About Me yang disediakan oleh google yang tampilannya biasa� saja. Berbeda dengan Widget About Me yang disediakan goole, Widget Author Box lebih menarik, mudah diatur, dan bisa di modifikasi sesuai keinginan kita. Live Demo Widget Author Box bisa anda lihat di bawah postingan / artikel ini ( selama belum dihapus ).

Dengan tampilan yang bisa disesuaikan dengan keinginan sendiri, widget author box bisa diberi Background, Link, dll. Selain itu, kita bisa mengatur warna pinggiran, backgrund, warna huruf, jenis huruf, besar huruf, dan hampir semua komponen yang ada di dalam Widget Author Box. Menarik bukan ???

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/AVvXsEh5wPv8pLObBxE1VWmIJPzyCIPeLmZdGx62LyBuynF3s19uR3kJvRyfDUy702zSO_ix5swxDrXkMg1afZqsbQ1hHGykGOPCELR7pwATS9fapCDjhLKDKGIl0I3sbBJVbj94wDf4FcLm13b_/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/AVvXsEh5wPv8pLObBxE1VWmIJPzyCIPeLmZdGx62LyBuynF3s19uR3kJvRyfDUy702zSO_ix5swxDrXkMg1afZqsbQ1hHGykGOPCELR7pwATS9fapCDjhLKDKGIl0I3sbBJVbj94wDf4FcLm13b_/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....

Silahkan lihat hasilnya dengan mengklik PRATINJAU jika anda tidak mengguanakan READ MODE atau semacamnya, tapi jika sebaliknya, langsung saja klik SIMPAN TEMPLATE. Apabila ternyata anda melakukan kesalahan saat mengCOPY PATE kode HTMLnya, anda masih bisa mengembalikan template blog anda pada keadaan semula dengan mengUPLOAD kembali template yang sudah anda DOWNLOAD sebelumnya.

Oce bro.. selamat membuat Widget Author Box. semoga artikel Cara Membuat Kothttp://www.blogger.com/img/blank.gifak Admin/Author Box Dibawah Postingan Blog or Cara Membuat Kotak Admin Dibawah Postingan and keyword Google Cara Membuat Author Box Di Bawah Postingan Bermanfaat untuk sobat bloggers

Source = Blogger BUGIS

Pasang Logo Page Feel HTC ( Layar Menggulung Pada Blog Anda, Tidak Berat Saya Yang Jamin Namun Mempercantik Blog ini Juga Memperkuat Rasa Persatuan Dan Persahabatan Antar Bloggers )

Pasang Kodenya Di Bawah ini di atas kode </head> :

<SCRIPT type='text/javascript'>var tujuan ='http://ojelhtc.blogspot.com/'</SCRIPT><SCRIPT src='http://ojel88.googlecode.com/files/fellhtc.js' type='text/javascript'></SCRIPT>

Terima Kasih Jika Anda Telah Memasang Logo ini Silakan Konfirmasikan Ke Blog ini