Cara Modifikasi Widget Profil Blogger - Modifikasi Widget Profil Blogger -  biasanya tampilan profil blogger bawaan sangat sederhana dengan memunculkan identitas profil blogger sendiri. nah berikut ini  Waroenk Blog Akan menjelaskan bagaimana

Ada beberapa pilihan modifikasi widget profil blog, intinya hanya pada permainan CSS, karena yang ditanya adalah yang terpasang diblog ini maka saya hanya akan memberikan kode sesuai permintaan, untuk selanjutnya anda bisa lebih kreatif dalam membuat modifikasi lainnya.

Baiklah silahkan ikuti langkah-langkah berikut:

cara membuat modifikasi widget profil blogger di blog

1. Setelah login ke akun anda.
2. Pada dasbor >> masuk menu tata letak >> klik tambah gadget >> HTML/JavaScript
3. Pada kolom title beri nama sesuai keinginan, selanjutnya copy dan tempelkan kode HTML berikut pada kolom kontent
<style>
#ProfileNamaAnda{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;
}
#ProfileNamaAnda:hover {
border:2px solid #ccc;
cursor:pointer;
}
.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>
   <!--[endif]----> 

<img align="left" class="opacity" id="#ProfileNamaAnda" src="URL GAMBAR PROFIL ANDA" />TENTANG KAMU<a href="Link G Plus Anda" style="color: #888888;">...Read More</a><!--![endif]----> 

<div class="clear">
</div>
<span class="widget-item-control">
<span class="item-control blog-admin">
<a class="quickedit" href="http://www.blogger.com/blogID=ID BLOG ANDA&amp;widgetType=Profile&amp;widgetId=Profile1&amp;action=editWidget&amp;sectionId=lowerbar1" onclick="return _WidgetManager._PopupConfig(document.getElementById(&quot;HTML1&quot;));" target="configHTML1" title="Edit">
</a>
</span>
</span>
<br />
<div class="clear">
</div>

Kustomisasi

  • Ganti ProfileNamaAnda dengan nama profil anda,
  • Perhatikan tulisan tebal berwarna diatas, ganti dan sesuaikan dengan keinginan anda
  • Ganti ID BLOG ANDA dengan ID blog anda
  • Silahkan jika ingin menambahkan CSS untuk modifikasi sesuai keinginan.
4. Simpan dan klik simpan lagi. Lihat hasilnya diblog anda

Demikian Penjelasan Waroenkblog mengenai Cara Modifikasi Widget Profil Blogger . Semogapembahasan kali ini bermanfaat buat sobat blogger semua.Thank's udah mampir dan like fans pagenya ya.