Yogie blog

Browse Manual » Wiring » author » blog » box » cara » di » membuat » v1 » Cara Membuat Author Box V1 Di Blog

---

Cara Membuat Author Box V1 Di Blog

gw- oke kini tampil dgn warna baru..sekarang sengaja pagi-pagi OL utk ngepost tutorial.. dan kali ini saya akan share,, ya ini namanya share karena scriptnya udh ada dtemplate ini tinggal dicopy dan dibagikan saja ilmuanya.. :D heheh.. kali ini penjelasan tentang Cara Membuat Author Box V1 Di Blog ..uk SSnya itu diatas dan klo mau liat langsung cek aja dibwah postingan ini...dan ini yg V1 berarti akan ada box author V2, V3 dan seterusnya..jadi kali ini saya share yg V1 dlu...
yaa tujuan Box author ini tidak terlalu penting utk blog..Box ini lebih memudahkan pengunjung blog utk meng-contact admin/author blog itu sendiri..soo.. lansung saja kita mulai tutorialnyall

1. loggin blogger.. -_- ya iyalah masa login facebook
2. pilih template
3. edit html/javascript
4. cari kode ]]></b:skin>
5. masukkan script dibawah ini di ATAS ]]></b:skin>

/* author box v1 mrkurosaki */
.about-author{margin:0 0 20px;font-size:13px;color:#666;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXKQiZvV6xF80JR5RS_2Xvayz_VN8fj4AHzHOkSEC3Ivdmxgh8xHq4_OlAuy6r18Znj_BeBRapNA7jR_nYRp2sBnJeTtcGcYGEbbLzIu0wXTnxAUmTETFVW05L-SJH1l2tK8OAAVoYpl_G/s872/divider-left.png) no-repeat left bottom}
.about-author-inner{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXG0qwWEHcoP8IgvjSs9dF4qXejiO7kepxTMnY8jZc9Fm8CVEMQmFWkCn6M3Zmyuv_1OYOKrjOu-9DXsQhwZoEOzrjGKSs1NTlFDBpCowJZ-rLKP9oLW2wkOvNAtqi_RlDTnAMPYoDZIuq/s18/divider-right.png) no-repeat right bottom;padding-bottom:30px}
.about-author img{float:left;margin-right:2.828854%}
.about-author h2{margin-bottom:20px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2KkX-eQ3xdFhf0h1vcb25T6KAfguhwS8el-6Bd-PcXLZ43nwkAZhoF_RQxknU3z_s_8k7k4lowg6xErvqEa-Sn3N2t8S3plQjD0gEx-1Ea9BCsjlcDcZhh9hyphenhyphen8wKhVbXVMiQf5yPHjqjC/s7/sidebar-title.png) repeat-x scroll 0 9px transparent;text-transform:uppercase;line-height:16px;font-size:18px;font-family:Oswald,sans-serif}
.about-author h2 span{font-weight: normal;display:inline-block;*display:inline;zoom:1;background-color:#f9f9f9;padding-right:10px}
.about-author a{font-size:17px;color:#0088b2;display:block;margin-bottom:5px}
.about-author a:hover{color:#454545}
.about-author .social-link{margin:0}
.about-author .social-link li{float:left;list-style:none;font-size:16px;color:#333;font-family:Istok Web,sans-serif;margin:0 5px 0 0}
.about-author .social-link li a{display:block;font-weight:normal;color:#0088b2;font-size:14px;font-family:Istok Web,sans-serif;}
.about-author .social-link li.facebook-icon a:hover,.about-author .social-link li.twitter-icon a:hover{color:#454545}
.about-author p {font-size:14px}
/* author box v1 mrkurosaki */

6. Cari kode <data:post.body/> untuk mempermudah gunakan ctrl+f , akan muncul lebih dari satu kode <data:post.body/> jadi pilih kode yang kedua kalau masih belum berhasil paste dibawah kode yang pertama

7. Copy paste kode berikut dibawah <data:post.body/>

<!-- author box v1 mrkurosaki -->
<article class=about-author clearfix>
 <div class=about-author-inner>
 <h2><span>About the author</span></h2>
 <img alt=author src=http://s12.postimg.org/hw4wxi6bd/wew.png/>
 <a href=#>Admin</a>
 <p>saya seorang newbie, yang masih haru belajar dari para master dan yg lebih berpengalaman, dulu saya seorang gamers dan sekarang sudah pensiun XD</p>
 <ul class=clearfix social-link>
 <li>Follow me:</li>
 <li class=facebook-icon><a class=facebook href=https://www.facebook.com/Muamar.kurosaki target=_blank title=Facebook>Twitter</a></li>
 <li><a>|</a></li>
 <li class=twitter-icon><a class=twitter href=https://twitter.com/MuamarRizky2 target=_blank title=Twitter>Facebook</a></li>
 </ul>
 </div>
</article>
<!-- author box v1 mrkurosaki -->

8. *keterangan
 http://s12.postimg.org/hw4wxi6bd/wew.png = ganti dgn url foto mu ukuran 120x120
Admin = bisa diganti dengan namamu atau sesuka kalian
saya seorang newbie, yang masih haru belajar dari para master dan yg lebih berpengalaman, dulu saya seorang gamers dan sekarang sudah pensiun XD = bisa diganti dengan kta"mu
https://www.facebook.com/Muamar.kurosaki = ganti dengan url fb kalian
https://twitter.com/MuamarRizky2 = ganti dgn url twiter kalian

9. save ...

>>TAMBAHAN JIKA BOX TIDAK MUNCUL<<
jika box tidak muncul, taruh HTML nya dengan logika..
nah gimana tu pke logika??
logika nya gini kalo tiap template pasti ada kan tombol share facebook,twiter,google+ DLL..
nah kita kira" aja.. cari script HTML tombol share tersebut.. contoh ini dia script gadget share yg ada di template saya yg lain:

<div class=ikonz-social><span>Share:</span>
<ul class=social-ikonz id=social-ikonzs>
<li class=facebook>
<a expr:href=&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title onclick=window.open(this.href,&quot;sharer&quot;,&quot;toolbar=0,status=0,width=626,height=436&quot;); return false; rel=nofollow title=Share this on Facebook><strong>Facebook</strong></a>
</li>
bla bla bla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla bla

nah kita bisa taruh HTMLnya yg tadinya kita taruh di <data:post.body/> kita taruh diatas script tombol social share.. sehinggal boxnya akan PASTI muncul di atas tombol social share tadi seperti ini: