Cara Menaruh Widget Tentang Penulis Dibawah Postingan

Yuhhuu adalagi nih sebuah trik yang bisa membuat kamu lebih terkenal... Loh ? biasanya saya membagikan trik untuk membuat blog lebih terkenal tetapi pada kesempatan kali ini saya membuat pemilik blog lah yang semakin terkenal. bagaimana sih caranya ? tentu saja dengan memasang widget "About The Author" ini. caranya pun cukup mudah, tingga kamu ikuti saa langka-langkah di bawah ini :

1. Login ke Blogger.com

2. Pilih Template --> Edit HTML --> Centang Expand Template Widget --> Cari kode ]]></b:skin> dan kamu salin kode di bawah ini kemudian kamu letakkan di atas kode ]]></b:skin>.

#authorbox {

background:#333 url(http://2.bp.blogspot.com/-L5Tvv0yJrr4/TvsFt-Mh82I/AAAAAAAACC0/9eva5jXci8U/s1600/about_author.jpg) no-repeat scroll left top;

width:auto;

overflow:hidden;

color:#fff;

-moz-border-radius:15px;

-webkit-border-radius:15px;

border-radius:15px;

margin:5px auto;

padding:40px 10px 10px 20px;

font-family:verdana;

}

#authorbox:hover {

-webkit-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);

-moz-box-shadow: 0px 0px 10px  rgba(0, 0, 0, .3);

box-shadow: 0px 0px 20px  rgba(0, 0, 0, .3);

}

#authorbox h4 {

font-size:16px;

color:#fff;

clear:none;

margin:0;

padding:10px 10px 5px;

}

#authorbox .author_small {

font-style:italic;

}

#authorbox img {

-webkit-transition:  -webkit-transform .15s linear;

-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);

-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);

padding: 5px 5px 5px 5px;

-webkit-transform:  rotate(1deg);

-moz-transform: rotate(1deg);

float:left;

border:4px solid #ff4408;

margin:10px;

padding:0;

}

#authorbox img:hover {

-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);

-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);

-webkit-transform:  rotate(+9deg);

-moz-transform: rotate(-1deg);

}

#authorbox p {

color:#ffffff;

margin:0;

padding:0 10px 10px;

}

#authorbox a {

color:#ff4408;

text-decoration:none;

}

3. Cari lagi kode <data:post.body/> dan kamu salin lagi kode di bawah ini dan letakkan di bawah kode <data:post.body/>.

<div id="authorbox">      

<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglWRbVmRpW9xrS-xHcOdY1TdCOjVlwmhmMd2rdIj69dXBXwddusKjEWY0yBak1jZfI7GcXO1dYSsaJFw26m4zpn2uGCmTyjHP5YetuoT3Q5SFJMjp1pA_BHvqnIpc0-YLn7dxuTnpiupc/s220/hzndi.png" height="100" width="100">

<h4><a href="http://www.hzndi.blogspot.com/" title="Tutorial Blog dan SEO" rel="author">Post by Hzndi </a></h4>

 <p>Hello, Saya hzndi, Jika kalian ingin berkenalan lebih jauh tentang saya, bisa mengunjungi Twitter dan Facebook saya. Jangan Copas yah :p hehehe</p> <p>Follow Me On <a href="http://www.twitter.com/hzndi">Twitter</a> Or <a href="http://www.facebook.com/hzndi">Facebook</a></p></div>

Note :

• Ganti semua tulisan yang berwarna biru dengan kata2 yang kamu suka.
• Ganti http://www.hzndi.blogspot.com dengan alamat blog/web kamu.
• Ganti https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglWRbVmRpW9xrS-xHcOdY1TdCOjVlwmhmMd2rdIj69dXBXwddusKjEWY0yBak1jZfI7GcXO1dYSsaJFw26m4zpn2uGCmTyjHP5YetuoT3Q5SFJMjp1pA_BHvqnIpc0-YLn7dxuTnpiupc/s220/hzndi.png dengan alamat URL gambar kamu.
• Ganti http://www.twitter.com/hzndi dengan alamat Twitter kamu.
• Ganti http://www.facebook.com/hzndi dengan alamat Facebook atau Fanpage Facebook kamu

4. Simpan template kamu, oh iya, widget ini hanya muncul di postingan kamu yah, bukan di beranda kamu. Thanks to helperblogger.com, widgetnya sangat membantu hehe :)

Postingan Terkait:

Posted in: Blogger