Beranda  ›  Blogger  ›  Social Media  ›  Tutorial Blog  ›  Widget

Membuat Widget about Author box di blogger

by -
Widget Meet the Author box
Widget Meet the Author
Sebuah blog bagus, sebagus apapun itu pasti mempunyai author box baik pada widget atau dibawah setiap postingan. Author box itu penting bagi blog, dicirikan sebagai identitas dari blog tersebut. Dan membuatnya sebagai verivikasi admin/author. Sebenernya udah banyak blog yang menuliskan bagaimana cara membuat author box dengan berbagai desain. Tetapi tidak ada salahnya saya menulis kembali dan membagikan desain box saya. Desain ini saya padukan dengan icon social touch me dan author box dari mybloggertrick. Noh liat desainnya dipinggir. Saya juga memasang widget ini dibagian footer. Dan apa pendapat anda? jika menarik, anda dapat memasangnya dengan mengikuti tutorial dibawah ini :

Mengenal kode CSS dan HTML author box

<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);
-webkit-transform: rotate(7deg);-ms-transform: rotate(7deg);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;
Related:Cara mengganti next & previous page dengan judul postingan
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://i1335.photobucket.com/albums/w677/yoyosuharyo/Photo0280_zps5b780680.jpg" align="left"/>
<div style='text-align:justify'>Text<a style="color:#888;" href="http://ujangyoyo.blogspot.com/p/about-me.html" rel='nofollow' target='_blank'>Read More..</a></div>
Related:Cara Menampilkan Widget / CSS / Script Pada Halaman Tertentu
<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/AVvXsEiFn3x_BVCw7h4BfItWD9Qfrm-FFKDODo8g3YkIROiePP4w3iilXesNYzmYueG0HbsZIRAZDlzFoRviSUN8tC8sH3aQn_dYBkx-wYrtOm44BFR3rRfut6jU6YskFDEMbEeydasn_XNuAsY/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;
Related:5 Style Keren Email Subscription / Newsletter widget
}
.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;
}
Related:Keluar Dari Hukuman Google dengan Google Link Disavow
</style>
<div class='touchme'>
<!--RSS-->
<a class='rss' href="http://feeds.feedburner.com/YoyoSaorang" target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="https://plus.google.com/107611486450164893740" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="https://www.facebook.com/karyoyo?fref=ts" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="https://twitter.com/yo2manth" rel='external nofollow' target='_blank' ></a>
</div>

 Keterangan:
  • http://i1335.photobucket.com/albums/w677/yoyosuharyo/Photo0280_zps5b780680.jpg adalah foto profil author. Usahakan ukurannya kecil dan vertikal.
  • Text adalah text atau penjelasan tentang author
  • http://ujangyoyo.blogspot.com/p/about-me.html adalah alamat url artikel/page lebih lanjut mengenai si author.
  • http://feeds.feedburner.com/YoyoSaorang adalah alamat feed burner anda.
  • href="https://plus.google.com/107611486450164893740 adalah alamat profil google+ anda.
  • https://www.facebook.com/karyoyo?fref=ts adalah alamat profil facebook anda.
  • https://twitter.com/yo2manth adalah alamat profil twitter anda.

Pemasangan widget author box

  1. Masuk ke akun blogger anda.
  2. Lalu masuk ke bagian layout.
  3. Buat sebuah widget baru (add a gadget)
  4. Pilih HTML/Javascript
  5. Dan masukan kode diatas.
  6. Save dan lihat hasilnya.

Last word

Bagaimana? cukup mudahkan cara-cara diatas? anda dapat mendasain ulang setiap bagiannya dengan kreatifitas anda sendiri. Saya telah mencoba yang terbaik untuk membuat tutorial ini sesederhana mungkin untuk dapat anda pahami. Jika Anda masih menghadapi masalah untuk Membuat Widget about Author box di blogger. Maka jangan ragu untuk bertanya kepada saya. Tinggalkan komentar di bawah posting ini dan saya pasti akan membalas Anda jika ada waktu yang memungkinkan. Oh iya jangan lupa membaca post saya yang lainnya dengan membaca DAFTAR ISI dan jika mau copas, cantumin dong Url postingan ini ya ! 

Sekian post tentang Membuat Widget about Author box di blogger.  Maaf bila ada salah-salah kata, semoga tulisan ini dapat bermanfaat bagi anda. Tetap terhubung dengan Ujangyoyo karena akan ada postingan baru yang lebih menarik. Happy Blogging friends!


Share this

Related Posts

About Contact Disclaimer Privacy Policy Sitemap
close