Cara Pasang Author Box di Blog

Author Box

Author Box adalah widget yang menunjukan profile dari pengelola blog atau profile si pemilik blog sebagai tanda pengenal, manfaat memasang widget ini untuk memudahkan visitor mengenal si pemilik atau si pengelola blog sehingga dapat melihat lebih jelas dan seberapa dalam siapa orang di balik blog tersebut.

Author Box biasanya terletak pada bagian bawah posting secara automatis untuk mengetahui siapa si penulis postingan tersebut, tapi ada juga yang letaknya di sembarang tempat yang ada di blog sobat dan itu sama saja sejenis Profile Box.

Nah... kali ini kita akan membahas Tutorial Pasang Author Box Keren di Blog.
Author Box kali ini bebas bisa di pasang di sembarang tempat di blog sobat, dan contohnya persis seperti terlihat pada gambar di atas.

Langsung saja ke tutorialnya sebagai berikut:
1). Pergi ke Dashboard Blogger > Layout > Add Gadget > Tambahkan Gadget HTML/Javascript.
2). Selanjutnya copy kode di bawah ini dan salin ke notepad terlebih dahulu, karena nanti akan ada beberapa point yang perlu di ganti.

<style>

#profile{
border:2px solid #888;
margin:2px 5px 0px 0px;
padding:2px;
text-align:justify;
height: 130px;
width: 90px;
}

#profile:hover {
border:2px solid #ccc;
cursor:pointer;
text-align:justify;
}

.opacity  {
opacity: 0.5;
margin-left: 50px;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}

.opacity:hover  {
opacity: 1;
margin-left: 0px;
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
filter: progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, sizingMethod='auto expand');
zoom: 1;
-moz-box-shadow: 1px 1px 4px #000;
-webkit-box-shadow: 1px 1px 4px #000;
box-shadow: 1px 1px 4px #000;
}

</style>

<img class="opacity" id="profile" src="http://th00.deviantart.net/fs70/PRE/i/2013/217/1/8/hisuka__hunter_x_hunter__by_wizyakuza-d6gteem.jpg" align="left"/>
<div style='text-align:justify'>Saya Achmad Afandi seorang siswa kelas 11 SMA, saya bergabung di dunia internet ini karena saya hanya ingin menambah wawasan dan sekedar sharing dengan sobat blogger, saya juga tertarik dengan internet karena internet adalah hal yang istimewa bagi kehidupan saya. <a style="color:#888;" href="http://kang-fandi.blogspot.com/2013/09/tentang-kang-fandi.html" rel='nofollow' target='_blank'>Readmore...</a></div>

<style>

.touchme a {
display:block;
height:50px;
width:45px;
padding:0 4px;
margin-top:10px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh98WfZX_5D8HO6Jyvr-y0HnlzlJaYOghN7PUzYQ_Z7hbzSEtzX_1SMTGy21IYAjluItwKqGkal1vt0BsISKcPwOd_71OOf5sP4TYlGhuUTVx8QvJkyNzbaaMn4ygDXyXIB0Ebzle-0moc/s1600/Sharing+Touch+Me.png) no-repeat;-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;-o-transition: ease-in 0.2s all;-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;
}

.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}
.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}
.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}

</style>

<div class='touchme'>
<!--RSS-->
<a class='rss' href="http://feeds.feedburner.com/tipstrikkangfandi" target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="https://plus.google.com/104652052552660773078" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="https://www.facebook.com/Afandeyblogspot?fref=ts" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="https://twitter.com/afandi_idb" rel='external nofollow' target='_blank' ></a>
</div>

a). Tulisan berwarna biru       : Ganti dengan URL gambar yang sobat inginkan.
b). Tulisan berwarna pink      : Ganti dengan deskripsi/biodata tentang diri sobat sendiri.
c). Tulisan berwarna merah  : Ganti dengan URL halaman tentang About Me dari blog sobat sendiri.
d). Tulisan berwarna hijau ada 4 bagian sebagai berikut :  
       *URL Feedburner (Ganti dengan kepunyaan anda sendiri).
       *URL Googleplus (Ganti dengan kepunyaan anda sendiri).
       *URL Facebook (Ganti dengan kepunyaan anda sendiri).
       *URL Twitter (Ganti dengan kepunyaan anda sendiri).

3). Setelah sobat selesai mengedit point-point di atas tadi, lalu copy dan salin ke box gadget HTML/Javascript tadi, dan save...

Terimaksih... semoga tutorial dari Kang Fandi bisa bermanfaat bagi Sahabat Blogger.

Terima kasih telah membaca artikel Cara Pasang Author Box di Blog . Jika Anda ingin copy-paste / menyalin sebagian ataupun keseluruhan dari artikel ini, harap anda mencantumkan link berikut Cara Pasang Author Box di Blog sebagai sumbernya atau anda bisa copy permalink dibawah ini.
<a href="https://kang-fandi.blogspot.com/2014/01/cara-pasang-author-box-di-blog.html">Cara Pasang Author Box di Blog</a>

Bagikan Artikel Ini : Facebook Google+ Twitter