Cara Memasang Widget Author Box

Setiap blog mempunyai identitas dan nama atau keterangan si penulis kan sob, mungkin tidak setiap blog begitu, ada juga yang menyembunyikan identitasnya. tapi dengan adanya identitas blog kita jadi kelihatan lebih fresh dan enak di liatnya, artikel kali ini yaitu tentang Cara Memasang Widget Author Box langsung saja sob :

Cara Memasang Widget Author Box

saya akan menggunakan tutorial yang simple saja sob, tidak terlalu berbelit-belit sehingga sobat blogger dapat mudah mengerti, nah caranya sobat tinggal copas kode sript berikut ini :

Kode Sript :

<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://modas4rt.blogspot.com/p/blog-page.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihPbx6uOEIjD2p5Ovx3T7Dyaj0M-EaWrKjvifEHTbmh0mIzxULsRSR8-7LG8-f7Fe09STfQaX-jU5dk2OzywBEWVAWXHp8m6m_FW7CCXwcsA8-3AyVPSvdBKERv8HCcpNgWEH6lk8EJCQ/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/118340412376495742925" 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>

nah setelah sobat copas kode script di atas taruh di notepad dulu dan ganti tulisan yang saya beri warna dengan alamat/URL kepunyaan sobat sendiri.

Keterangan :

Tulisan berwarna merah : Ganti dengan alamat/URL gambar yang anda inginkan.
Tulisan berwarna hijau : Ganti dengan deskripsi/biodata tentang diri anda sendiri.
Tulisan berwarna biru : Ganti dengan alamat/URL halaman tentang About Me dari blog anda sendiri.
Tulisan berwarna pink ada 4 bagian :    *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.


setelah sobat selesai edit keterangan di atas, sobat masuk ke blogger layout/tata letak lalu sobat tambahkan widget HTML/JavaSript dan sobat copas kode yang tadi sudah sobat edit di notepad pada konten yang tersedia, dan save....

hasilnya nanti akan seperti punya saya yang ada di bawah itu sob.... hehehe......

"SERTAKAN LINK SUMBER MODAS4RT SAAT DI COPYPASTE"

Terimakasih sudah membaca artikel di atas, jika anda ingin mendapat update artikel Modas4rt. anda bisa  Follow blog ini Join this site dan jika anda ingin share salah satu artikel kami. di harapkan sertakan link sumber atau setidaknnya sumber Modas4rt saat di copypaste.