Cara Membuat Widget About Me Keren dan Elegan di Blog

Cara Membuat Widget About Me di Blog - Setelah saya posting artikel mengenai Cara Membuat Widget Artikel Terbaru Simple dan Elegan di Blog kali ini akan berbagi tentang bagaimana sih cara membuat widget About Me yang keren dan elegan seperti yang ada di blog ini. tentunya widget ini sangat berguna kamu pasang di blog kamu karena dengan itu kamu akan dikenal apalagi kalau blognya bersifat personal atau blog pribadi maka sangat cocok. baiklah berikut tutorialnya, silahkan disimak:

Cara Membuat Widget About Me di Blog:

1. Buka Blogger
2. Pilih Tata Letak > Tambah Gadget > HTML/Javascript
3. Masukkan kode di bawah ini

<style> #profile{
border:2px solid #888; margin:3px 6px 0px 0px;padding:2px;text-align:none;height: 110px;width: 80px;
}
#profile:hover {
border:2px solid #ccc;cursor:pointer;text-align:justify;
}
.opacity  {
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(0deg);
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>
<a href="http://ashariskandar.blogspot.com/p/siapa-itu-ashar.html"><img class="opacity" id="profile" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoeWUbjvy6U1UCoknZWa7k9kPR9yXsniczRaPv98zJouoqCWWdYCp4D38ZOfGORGZjebQoUlH6IaKxFVcH3zhGGnKzQ3a_Nbt5CF3OdI5czxjah_OHFFT3n2_IYW3UwPkQWBcDi2VYcjM/s200/edit1.JPG" title="Ashar Iskandar" align="left"/></a>
<div style='text-align:none'><span style="font-weight:bold;">Ashar Iskandar</span>, 1994. Wajo Sulawesi Selatan. Hobi menulis, blogging, maniak teknologi, content writer, web development, android development, disiplin ilmu Fisika Murni UNM ...<a style="color:#888;" href="http://ashariskandar.blogspot.com/p/siapa-itu-ashar.html" rel='nofollow' target='_blank' title='Baca Selengkapnya'>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/AVvXsEj2R6M-qA7qJlybDP1oe8Qresgj60kdv4nNmQxzJ0VKxjW21nLFAydtEkEDKAphfBbu6IIzlDrHr89-fbtDQ0T2uGnTcKjhov4z8i8bMa58BHLWYEQhZfx8tqWKiFPDNudRQNv5Tq2noqA/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/AsharIskandar" target='_blank' title='AsharIskandar on Feedburner'></a>
<!--Google Plus-->
<a class='googleplus' href="https://plus.google.com/112208450177097097647?prsrc=5" target='_blank' title='My GooglePlus'></a>
<!--Facebook-->
<a class='facebook' href="https://www.facebook.com/ballecozt22" target='_blank' title='My Facebook'></a>
<!-- Twitter -->
<a class='twitter' href="https://twitter.com/ballecozt22_" target='_blank' title='Ashar on Twitter'></a>
</div>

4. Keterangan:

• Kode warna merah adalah url gambar
• Kode warna orange adalah deskripsi singkat tentang anda
• Kode warna biru adalah url about me atau tentang anda
• Kode warna hijau adalah url sosial media anda
• Silahkan diganti sesuai keinginan

5. Klik simpan

Widget yang saya bagikan persis dengan widget yang ada di blog ini, akan tetapi warnanya saya ubah, kalau anda mau ubah silahkan masuk ke Edit HTML dan cari kode widgetnya kemudian tinggal ganti warna sesuai keinginan. kalau ada pertanyaan silahkan ajukan di kolom komentar, terima kasih telah berkunjung di blog ashariskandar.

Anda sedang membaca artikel "Cara Membuat Widget About Me Keren dan Elegan di Blog".

Baca Juga: Cara Membuat Widget Artikel Terbaru Simple dan Elegan di Blog

Tweet

Postingan terkait:

Ditulis ashar — Friday, January 27, 2017 — 3 Comments — Blog, Tutorial