Tutorial Blog - Modifikasi Widget Profil Blogger 2013

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

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>

• Tweet
• Share
• Share
• Share
• Share

About Admin

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post