Cara Menciptakan Widget About The Author Box Di Blog

Cara Membuat Widget About The Author Box di Blog

Cara Membuat Widget About the Author di Blog. Author dalam Bahasa Indonesia berarti penulis. Makara dalam dunia Blogger author ialah penulis artikel pada sebuah Blog. Dalam acara Blogging, sebaiknya kita jangan merahasiakan identitas kita pada para pembaca.

Perkenalkanlah diri kita sebagai penulis artikel pada sebuah Blog kepada para pembaca, biar terjadi hubungan atau komunikasi yang baik antara kita sebagai penulis dan pembaca. Salah satunya dengan memasang widget Author Box yang menjelaskan About The Author.

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

1. Login ke akun Blogger sobat.

2. Pada halaman dashboard, masuklah lah ke bab Tata Letak.

3. Klik Tambahkan gadget di posisi widget About The Author Box ini ingin dipasang.

4. Pilih HTML/Javascript, dan masukan aba-aba berikut.

<style> #profile{

border:2px solid #888; margin:2px 5px 0px 0px;padding:2px;text-align:justify;height: 100px;width: 100px;

}

#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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiipNcB02EhNfhPLRhXniG9imYsvj_rzq4P_U4yImv1R3nwjWwiypqqCErXBXqdQw3KkCldbQ_la4oXiEgqad2TB-d9tbZ5DmqBExSxFi31GlWEmApRrwf0IfoCK3R6xEJErWEEMueTL9I/s1600/Yoyo.jpg" align="left"/>

<div style='text-align:justify'>KATA-KATA PERKENALAN<a style="color:#888;" href="https://edu.paperplane-tm.site/search?q=sekilas-tentang-yoyo-apriyanto" rel='nofollow' target='_blank'>. Baca Selengkapnya... </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/AVvXsEi_hKhctlrx_yFDtKKixFcljxRm7GFCvMWWY3h1zbYucFxykG2TLYTZxGqfjJHSVxAYiCdiOnLpVhMUvbAyDQRBed9zrctgb7BM3CPeDLmFmUyg04gAyJMVgnP0FATNpKaHfiu-H6HRQaA/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/FileRahasia" target='_blank'></a>

<!--Google Plus-->

<a class='googleplus' href="https://plus.google.com/+YoyoApriyanto" rel='external nofollow' target='_blank'></a>

<!--Facebook-->

<a class='facebook' href="https://www.facebook.com/yoyoapriyanto" rel='external nofollow' target='_blank'></a>

<!-- Twitter -->

<a class='twitter' href="https://twitter.com/YoyoApriyanto" rel='external nofollow' target='_blank' ></a>

</div>

5. Klik Simpan kalau telah selesai, dan silakan lihat hasilnya.

Keterangan:

- Ganti warna biru dengan link gambar foto Anda.

- Ganti warna pink dengan kata-kata yang ingin Anda tampilkan.

- Ganti warna merah sesuai dengan data diri Anda.

Sobat dapat mengedit-edit ulang tampilan widget Author Box ini, silakan berkarya.

Sekian posting untuk kali ini, semoga sahabat sekalian menyukai widget yang saya bagikan ini.

Semoga bermanfaat...