Cara Membuat Widget Profil Blogger Tampil Lebih Cantik.

Tutorial kali ini saya ingin menjelaskan bagaimana cara membuat widget profil blogger dengan tampilan sedikit lebih Keren.  intinya hanya pada permainan CSS, untuk selanjutnya anda bisa mengubah kode CSSnya jika ingin memodifikasi lebih cool lagi..

Baiklah silahkan ikuti langkah-langkah berikut:

1. Login ke akun BLOGGER 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 content

<style>

#profileakusharekan{

border:2px solid #888; margin:2px 5px 0px 0px; padding:2px;

}

#profileakusharekan: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="#profileakusharekan" 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>

Customization/kustomisasi

<<>>Ganti profilakusharekan 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.

Demikian tutorial kali ini, Cara Membuat  Widget Profil Blogger Tampil Lebih Cantik pada blog. Semoga bermanfaat.

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbitBlog ini.

Unknown

My name is Chandra Iwan, I want to share crack software for all visitors to my blog, and everything you can get for free. please contact me if there is a broken link or you need a password. Thanks guest