Modifikasi Widget Profil Blogger

Oleh Bardil

15 Juli, 2014

Bagikan :

Tweet

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Tutorial kali ini saya ingin mengetengahkan cara membuat modifikasi tampilan widget profil blogger. Sebagaimana tutorial sebelumnya, cara menambahkan basmalah dan hamdalah di awal dan akhir artikel blog, tutorial kali ini juga masih merupakan request sahabat blogger.

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>
#profileAmatullah{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;
}
#profileAmatullah: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="#profileAmatullah" src="URL YOUR IMAGE PROFIL" />About YOU<a href="YOUR LINK BLOGGER PROFIL" 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=5143343840607190550&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 profilAmatullah dengan nama profil anda,
• perhatikan tulisan tebal berwarna diatas, ganti dan sesuaikan dengan keinginan anda
• ganti blog ID dengan ID blog anda
• silahkan jika ingin menambahkan CSS untuk modifikasi sesuai keinginan.

4. Simpan dan klik simpan lagi. Lihat hasilnya diblog anda

Tag : Belajar menjadi bloger keren