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>
#profileEndra{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;
}
#profileEndra: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="#profileEndra" 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&widgetType=Profile&widgetId=Profile1&action=editWidget&sectionId=lowerbar1" onclick="return _WidgetManager._PopupConfig(document.getElementById("HTML1"));" target="configHTML1" title="Edit">
</a>
</span>
</span>
<br />
<div class="clear">
</div>
#profileEndra{
border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;
}
#profileEndra: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="#profileEndra" 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&widgetType=Profile&widgetId=Profile1&action=editWidget&sectionId=lowerbar1" onclick="return _WidgetManager._PopupConfig(document.getElementById("HTML1"));" target="configHTML1" title="Edit">
</a>
</span>
</span>
<br />
<div class="clear">
</div>
• Ganti profilEndra 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
VISIT TO BALI