Tentang Ilmu Komputer, Android, Panduan Blogging dan Tips di Internet.

Cara Membuat Widget About The Author Box Untuk Blog

Author dalam Bahasa Indonesia berarti penulis. Jadi dalam dunia Blogger author adalah penulis artikel pada sebuah Blog. Dalam kegiatan Blogging, sebaiknya kita jangan merahasiakan identitas kita pada para pembaca. Perkenalkanlah diri kita sebagai penulis artikel pada sebuah Blog kepada para pembaca, agar terjadi hubungan atau komunikasi yang baik antara kita sebagai penulis dan pembaca. Salah satunya dengan memasang widget Author Box yang menjelaskan About The Author.

Cara Membuat Widget About The Author Box Untuk Blog

Sebenarnya sudah disediakan widget bawaan dari Blogspot yang berfungsi untuk memperkenalkan diri kita sebagai penulis, yaitu Widget Mengenai Saya dari Google Plus. Namun karena tampilanya yang mengacu pada tampilan Google Plus, kadang-kadang menjadi tidak cocok dengan tampilan Blog kita. Oleh karena itu, maka banyak Blogger yang membuat widget Author Box-nya sendiri sehingga tampilanya cocok dengan tampilan Blog. Dan kali ini saya akan bagikan salah satu karya seorang Blogger (tidak tahu siapa) dalam tampilan widget Author Box yang dapat sobat pakai dan bisa diedit ulang. Tampilanya seperti berikut:

Widget About The Author Box

Perhatikan tampilan widget Author Box di atas. Warna Background pada widget akan otomatis mengikuti warna kolom widget pada Blog sobat. Jadi kemungkinan widget ini akan cocok untuk dipasang di Blog mana pun. Untuk tampilan foto profil, akan bergerak sedikit berputar ke arah kiri ketika disentuh kursor. Di sampingnya terdapat sedikit kata-kata perkenalan dan diikuti dengan tulisan "read more". Tulisan read more ini bisa sobat masukan link. Saya sarankan sobat mempunyai halaman About Me pada Blog sobat. Jadi tulisan read more ini dapat sobat masukan URL halaman About Me yang sobat miliki. Selain itu di bagian bawahnya terdapat icon-icon Sosial Media diantaranya Feed Burner, Google Plus, Facebook dan Twitter yang dapat sobat masukan link ke halaman Sosial Media (milik sobat) tersebut. Icon-icon Sosial Media ini berwarna Abu-abu, dan akan bergerak dan berubah warna ketika disentuh kursor.

OK jika sobat tertarik untuk memasang widget About The Author Box ini, silakan ikuti langkah-langkahnya berikut.

Cara Membuat Widget About The Author Box Untuk Blog

  • Login ke akun Blogger sobat.
  • Pada halaman dashboard, masuklah lah ke bagian Tata Letak.
  • Klik Tambahkan gadget di posisi widget About The Author Box ini ingin dipasang.
  • Pilih HTML/Javascript, dan masukan kode berikut.
<style> #profile{
border:2px solid #888; margin:2px 5px 0px 0px;padding:2px;text-align:justify;height: 190px;width: 80px;
}
#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;
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://i1332.photobucket.com/albums/w606/RegyBrader/My%20Face/IMG-20130813-00057_zpsff54e01d.jpg" align="left"/>
<div style='text-align:justify'>KATA-KATA PERKENALAN<a style="color:#888;" href="http://regibrader-free.blogspot.com/p/aboout-me_28.html" rel='nofollow' target='_blank'>Read More..</a></div>
<style>
.touchme a {
display:block;height:50px;width:45px;padding:0 4px;margin-top:10px;
float:left;background:transparent url(http://1.bp.blogspot.com/-LcpFcjk1OXs/UdBRdmQ_mI/AAAAAAAABrg/QRU5DBFAqBM/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/Regibrader-blog" target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="https://plus.google.com/u/0/116159611196713950391/" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="https://www.facebook.com/mulx.co" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="https://twitter.com/Regy_Brader" rel='external nofollow' target='_blank' ></a>
</div>

  • Ubah kode berwarna biru adalah ukuran tampilan foto profil.
  • Ubah kode berwarna merah adalah URL Foto Profil.
  • Ubah kode berwarna hijau adalah kata-kata perkenalan.
  • Ubah kode berwarna oranye adalah URL halaman About Me.
  • Ubah kode berlatar biru adalah URL RSS Feedburner.
  • Ubah kode berlatar merah adalah URL ID akun Google Plus.
  • Ubah kode berlatar hijau adalah URL ID akun Facebook.
  • UBah kode berlatar oranye adalah URL ID Twitter.
  • Klik Simpan jika telah selesai, dan silakan lihat hasilnya.

Artikel terkait : Cara Membuat Widget About The Author Box Untuk Blog

Artikel Blog Regi Brader Lainnya :

7 komentar:

  1. Dengan adanya widget ini jadi lebih mudah berkenalan dengan admin blognya jadi kalau ada yang kurang tahu bisa tanya-tanya :)

    ReplyDelete
  2. halo, mau nanya.. pas URL yg halaman about me itu dganti, gbisa ngeload halaman about me saya ni, itu kenapa ya? padahal sebelum URL-nya belom diganti, bisa tu ngelink ke page sini -_-

    ReplyDelete
  3. Makasih gan atas infonya, sangat bermanfaat sekali, kunjungin blog saya yah,
    Tempatnya download anime dubtitle Indonesia
    http://anakmakassarblog.blogspot.com/

    ReplyDelete
  4. Keren... Maen2 sob ke www.ayrck.com

    ReplyDelete
  5. Terima kasih author...info berguna.saya rakan blogger lokmanamirul.blogspot.com

    ReplyDelete

Copyright © 2013-2016 Blog Regi Brader - All Right Reserved