Widget profil keren Ala BIE ~ Blog Irvan Efendy

Widget profil keren Ala BIE

IRVAN EFENDI

Thursday, May 22, 2014

Hay sobat,.. Pada postingan kali ini saya akan berbagi trick mengenai Membuat widget profil keren Ala Blog Irvan Efendy. Cara ini saya buat berdasarkan request dari sahabat Blogger bernama Prio Cah Salam.
Profil widget ini di lengkapi dengan 3 akun sosial network atau jejaring sosial yaitu Facebook, Google+ dan Twitter. Lebih jelasnya lihat gambar dibawah ini:

Instalasi

Konsep Kotak Instalasi Widget Blog

Widget Profil ini di lengkapi dengan 3 akun sosial network atau jejaring sosial yaitu Facebook, Google+ dan Twitter

Lanjutbatalkan

Perihal Lisensi

Mohon di baca dan menyetujui persyaratan lisensi di bawah ini sebelum memasang.

Anda boleh mengedit widget ini, tapi anda tidak diijinkan menghapus Credit yang telah dibuat.
Hargailah kerja keras orang lain, supaya mereka dapat mengcreasikan sesuatu yang baru lagi.

Suport by Adobe Flash Player

Kebijakan dan Privasi :

» http://irvan-efendy.blogspot.com/p/privacy-policy.html
Jika anda telah menyetujui lisensi diatas, anda bisa melanjutkan pemasangan.

MundurSetujubatalkan

Tutorial Memasang Part 1

Pilih Tab Template lalu klik Edit HTML
Letakkan CSS berikut di atas ]]></b:skin>

/*CSS Widget Profil Ala BLor IRvan EFendy*/
.About-Me h2 { background: #2855AE !important; color: #fff; } 
.About-Me h2:before { content: &quot;\f007&quot;; font-family: FontAwesome; font-size: 22px; background: rgba(0, 0, 0, 0.2); padding: 10px 12px; margin: 0 10px 0 0; border-radius: 4px 0 0; }
.adminn{height:auto;padding:5px;width:auto}
.gambar-admin{border-bottom:3px solid #2eb31a;border-left:3px solid #eab823;border-radius:90em;border-right:3px solid #0f7dc8;border-top:3px solid #cf2031;float:left;height:70px;margin:4px 1px 0 0;opacity:0.8;width:70px}
.deskripsii{color:#000;font-family:arial,sans-serif;font-size:12px;margin:-85px 0 0 110px;padding:1%;width:auto}
.facebookk,.googlepluss,.twitterr{border:3px solid #444;border-radius:15px;color:#eee!important;display:block;font-size:13px;font-weight:700;height:14px;line-height:14px;margin:1px 0 1px 1px;padding:3px;position:relative;text-align:center;text-decoration:none!important;width:14px}
.facebookk{background:#3B5998;margin-left:73px}
.facebookk:hover{border-color:#4F77CC;box-shadow:0 0 3px #4F77CC}
.googlepluss{background:#D34836;font-size:11px;margin-left:85px}
.googlepluss:hover{border-color:#EB503C;box-shadow:0 0 3px #EB503C}
.twitterr{background:#4099FF;margin-left:75px}
.twitterr:hover{border-color:#36D0FF;box-shadow:0 0 3px #36D0FF}

MundurLanjutbatalkan

Tutorial Memasang Part 2

Buat Gadget HTML/JavaScript baru
Masukkan Elemen ini dan klik Simpan

<div class="adminn">
<img alt="Irvan Efendy" class="gambar-admin" src="http://lh6.googleusercontent.com/-mNlGAhTr9W4/AAAAAAAAAAI/AAAAAAAAA0s/d6REegERfrM/s512-c/photo.jpg" title="Irvan Efendy" />
<a class="facebookk" href="http://facebook.com/irvan.cyberArt" rel="nofollow" target="_blank">f</a>
<a class="googlepluss" href="http://plus.google.com/IrvanEfenDyy" rel="nofollow" target="_blank">G</a>
<a class="twitterr" href="http://twitter.com/irvan_efendy" rel="nofollow" target="_blank">t</a>
<div class="deskripsii" style="text-align:justify">
Hai, perkenalkan nama saya <b><a href="http://facebook.com/irvan.cyberArt">Irvan Efendy</a></b> saya <b>lahir</b> di kota <br />
Lumajang - Jawa Timur - Indonesia.<br />
Alumni <b>SMK NEGERI PASIRIAN</b><br /><br />
Jika anda ingin kenal lebih dekat<br />
<b>ADD</b> sosial media saya. <br />
</div></div>

MundurLanjutbatalkan

Konsep Instalasi Selesai

Terimakasih anda telah memasang Widget Profil keren ala Bie...
Semoga dapat bermanfaat.

Copyright ©2013 by IRvan EFendy

Selesai

gimana,,? keren kan widget nya, Jika sobat ingin membuatnya silahkan

Simak langkah² dibawah ini:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan CTRL+F cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan kode CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

 /* Widget Profile Ala Blog Irvan Efendy */
.vanzADMIN {width:auto;  height:83px;padding:5px}
.vanzADMIN-gambar {float:left;width:75px;height:75px;margin:4px 1px 0px 0px;border-radius:90em;opacity:0.8;border-top:2px solid #cf2031;border-right:2px solid #0f7dc8;border-bottom:2px solid #2eb31a;border-left:2px solid #eab823;}
.vanzdeskripsi{width:auto; padding:1%;font-family:arial,sans-serif; margin:-85px 0 0 110px;   font-size:11px; color:#000;}
.vanzfb, .vanzgp, .vanztw {color:#fff!important; display:block;font-weight: bold; line-height: 14px; height: 14px; width: 14px; border: 3px solid #444;text-align: center;padding:3px;border-radius:15px;font-size: 13px;text-decoration:none!important;margin: 1px;position:relative;margin-right:0px}
.vanzfb {background: #3B5998;margin-left:73px}
.vanzfb:hover {border-color: #4F77CC; box-shadow: 0 0 3px #4F77CC;}
.vanzgp {background: #D34836;font-size:11px;margin-left:85px}
.vanzgp:hover {border-color: #EB503C; box-shadow: 0 0 3px #EB503C;}
.vanztw {background: #4099FF;margin-left:73px}
.vanztw:hover {border-color: #36D0FF; box-shadow: 0 0 3px #36D0FF;}

5. Jika sudah Save template.

Pilih Tata letak » Add Widget » Pilih widget HTML/JavaScript

6. Lalu masukkan kode Javascript dibawah ini ke dalam widget tersebut.

<div class="vanzADMIN">
<img alt="vanzdy" class="vanzADMIN-gambar" src="http://lh6.googleusercontent.com/-mNlGAhTr9W4/AAAAAAAAAAI/AAAAAAAAA0s/d6REegERfrM/s512-c/photo.jpg" title="vanzdy" />
<a class="vanzfb" href="http://facebook.com/irvan.cyberArt" rel="nofollow" target="_blank">f</a>
<a class="vanzgp" href="http://plus.google.com/116872946466272383878" rel="nofollow" target="_blank">G</a>
<a class="vanztw" href="http://twitter.com/irvan_efendy" rel="nofollow" target="_blank">t</a>
<div class="vanzdeskripsi">
Hai, perkenalkan nama saya <b><a href="http://facebook.com/irvan.cyberArt">Irvan Efendy</a></b> saya <b>lahir</b> di kota <br />
Lumajang - Jawa Timur - Indonesia.<br />
Alumni <b>SMK NEGERI PASIRIAN</b>
Jika anda ingin kenal lebih dekat<br />
ADD sosial Network saya. <br />
<a href="http://irvan-efendy.blogspot.com/p/about-me.html" style="color: #888888;" target="_blank"> Read More »</a><br />
<div style='float:left;margin:0px;'>
<div class="g-follow" data-annotation="bubble" data-height="20" data-href="//plus.google.com/116872946466272383878" data-rel="author"></div></div></div></div></div>

7. Save widget dan lihat hasilnya.

Nb: Silahkan ganti Tulisan yang tercetak warna Merah dan Hijau tersebut sesuai dengan keinginan sobat.

Sekian dulu postingan dari saya. Jika sobat mau bertanya silahkan corat coret dibawah,..
Terima kasih

Jika bermanfaat? Bantu share ya sobat

Balas Hapus

IRVAN EFENDI 22 May, 2014

monggo gan :)
thankz atas kunjungan nya ya :-d

iya gan sama" :-d
monggo langsung di coba (y)

silahkan di coba sob :-bd

iya gan sama"
monggo di coba :-d

hihihii :)
bisa ajaah atuh agan ini :-d

monggo di coba :-bd

betull mbak :)
supaya memudah kan pengunjung kalau mau hubungi admin (y)

monggo di coba sob biar tambah cakep profile nya (y) wkwwkwkk

sippp (y)
monggo di coba gan,..

thankz gan atas kunjungan nya,..
silahkan di coba (y)

monggo gan (y)
semoga bermanfaat :-d

IRVAN EFENDI 23 May, 2014

monggo di coba dulu tutor diatas gan kalo gak berhasil silahkan di tanya kan lagi :)

thankz non atas kunjungan nya :)
monggo di coba n semoga berhasil (y)

IRVAN EFENDI 25 May, 2014

Ok sob,..
silahkan di simak :)

monggo gan :-d

IRVAN EFENDI 28 May, 2014

mksud nya gak bisa gimana gan??

thankz gan :-d
pasti blog agan makin ganteng nie :) hehehee

IRVAN EFENDI 11 June, 2014

mksud kamu ada garis bawah nya itu?

silahkan vroh :-d

Tambah kan kode ini tepat diata ]]></b:skin> atau </style>
.post-body h4{
background:url(http://1.bp.blogspot.com/-AXMPCFNM3JI/UYsuSywmXGI/AAAAAAAAEC0/3rC3JGXXNNI/s1600/bottom-line.gif) left bottom no-repeat;
font-size:200%;
font-weight:400;
margin:10px 0;
padding-bottom:5px;
font-family:Gnuolane, Oswald, Arial, Sans-Serif;
}

<h4>YOUR TEXT HERE!</h4>

okey sama" gan (y)

IRVAN EFENDI 21 June, 2014

iya gan sama" :-d
monggo di coba (y)

w :) w
pasti tambah keren blog nya :-d
sipp dahh salam sukses gan (y)

IRVAN EFENDI 03 September, 2014

Terima kasih gan :-d

IRVAN EFENDI 30 January, 2015

hihiii :D
untuk klik kanan emang dinonaktivkan jadi kalo mau copy gunakan ctrl+C

IRVAN EFENDI 21 September, 2017

hehee :D
thanks gan

💬 Peraturan dalam berkomentar :
➥ Budayakan berkomentar sesudah membaca artikel sob.
➥ Dilarang Menghina, Promosi (Iklan), Menyelipkan Link Aktiv, dsb.
➥ Dilarang berkomentar berbau Porno, Spam, Sara, Politic, dan Profokasi.
➥ Berkomentarlah yang Sopan,Bijak, dan Sesuai Artikel (Dilarang OOT).
➥ Saya sangat berterima kasih atas semua yang mau berkomentar diblog saya.

Konversi Kode Konversi KodeOut Of TopicEmoticon

Terima kasih telah berkomentar

Kebijakan dan Privasi :

Simak langkah2 dibawah ini:

Simak langkah² dibawah ini: