Membuat About Author box di blogger

DragoneByte-  Author box itu apa sih ? apakah penting  bagi blog? yah sangat penting sekali karena fungsinya  sebagai identitas dari blog . sudah banyak blog yang menuliskan bagaimana cara membuat about author box di blogger .  langsung saja kita mulai tutorial kali ini.

A. Pemasangan widget author box

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

Copy kode Dibawah ini !

<amp;;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.6;margin-left: 51px;-moz-transition: all 0.6s ease-out;-o-transition: all 0.6s ease-out;-webkit-transition: all 0.6s ease-out;-ms-transition: all 0.6s ease-out;transition: all 0.6s 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://Letakan Foto-Kalian disini" align="left"/>
<div style='text-align:justify'>Jelaskan tentang diri kalian<a style="color:#888;" href="http://About Me" 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE5WEETFWDxY-Cb1AMdoHBcJZ_RKLPjPikDf3woykX95EhJws_uMF3tRmpzPNTNG9vYSBPo2qDBDbuYdEbIiO2IH12sYwctv13UzuK50iyVifreVY_gViEt4Tv8B0isqo8M1xOfAnmlI8/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="https://feeds.feedburner.com/Kalian di sini" target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="https://Masukan Link Google+ kalian di sini" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="https://Masukan Link Facebook Kalian di sini" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="https://Masukan Link Twiter kalian di sini." rel='external nofollow' target='_blank' ></a>
</div>

Keterangan:

• http://Letakan Foto-Kalian disini [Foto-Kalian]
• Jelaskan tentang diri kalian [Bebas Isi apa aja]
• http://About Me [link blog kalian Tentang-(About)]
• https://feeds.feedburner.com/Kalian di sini [Feeds-Burner]
• https://Masukan Link Google+ kalian di sini [Google++]
• https://Masukan Link Facebook Kalian di sini [Facebook]
• https://Masukan Link Twiter kalian di sini.[Twitter]

Sekian dari Tutorial kali ini semoga bermanfaat untuk semuanya untuk pertanyaan silakan taruh di kolom komentar Jangan lupa Like FanPage Kami Bisa di liat di Sebelah kanan > yah DragoneByte.

Tweet