Tutorial : Cara nak edit profile blogskin

 

Assalamualaikum yaw~~ 

Tadi time Nai usya blogskins Nai terjumpa satu forum ni tentang cara nak edit profile blogskins . Yes ! Akhirnya jumpa jugak ! ✯◡✯ *mata bersinar* . Dah lama Nai cari cara nak edit akhirnya jumpa juga ~~ Ok , tak mo buang masa Nai nak buat tuto macam mana nak edit profile blogskins bagi cantik macam Nai .. *Nai pun baru je edit tadi hehehe ..*Susah sikit nak terangkan sebab Nai pun baru belajar tadi tapi tak apa Nai akan cuba terangkan dari A-Z okey ? Nai belajar dari SINI dan SINI ..

Ways to edit blogskin profile slightly different from the blogger blog ..

Things you should know before you start styling :
all styles declaration must be joined together unlike normal blogskins.

Example of a normal blogskin .

<style>
a {
text-decoration: none;
color: #666666;
}
</style>

Example of blogskin profile .

<style>a{text-decoration: none;color: #666666;}</style>

Tempat untuk letak code-code tersebut :

Pergi SINI ✒ buka profile anda ✒ klik edit it ✒ paste code di kotak ABOUT ME

 

 

 For styling your skin page ✒ Letak code di description

Profile page dissected :

1.   .logo{}

2.   .navsearch{}

3.   .footernavright{}

4.   .footernav{}

5.   .footer{}

6.   #my_favorites{}

7.   #my_comments{}

8.   #user_profile_ad{}

9.   #my_skins{}

10. #friends_skins{}

11.   .tabs{}

12.   .tabSelected{} + b{}

13.   #user_profile_about{}

14.   #user_profile_avatar{}

15.   #user_profile_info{}

16.   .topnav{}

17.   #profile_skins{}

18.   .body{}

 Listed above are the general areas of Blog Skins profile page.( Refer below picture for reference to the list )

Items 1 to 15

Items 16 , 17

Item 18

Simple Styling :

Now for really simple styling .

Example 1 - Getting rid of some parts of the profile which you don't want to see. like your comments.
All you need is 1 simple line .

<style>#my_comments{display:none}</style>

Example 2 - How about putting some background image .

<style>body{background-image:url(http://i214.photobucket.com/albums/cc105/24168/egobox/backgrounds/cat/Vintage/p9.jpg);Background-color:white;}</style>

Example 3 - changing how your links look like .

<style>a{color: #777777;text-decoration:none;}</style>

Example 4 - changing  looks for the titles .

<style>h1,h3{color: purple;}</style>

More precise styling :

Example 1 - changing the links of just the #user_profile_about{}.

<style>#user_profile_info a{color:red;text-decoration:none;}</style> or
<style>#user_profile_info a:hover{color:red;text-decoration:none;}</style> or
<style>#user_profile_info a:hover,a:visited{color:red;text-decoration:none;}</style>

Example 2 - changing the title of just the #user_profile_about{}.

<style>#user_profile_info h1,h3{color: purple;}</style>

Example code : 

Dont forget to add <style> and </style> tag at both start and end of the code .

.logo{display:none;}
.footer{display:none;}
.navsearch{display:none;}
.footernav{display:none;}
.footernavright{display:none;}
#my_favorites{display:none;}
#my_comments{display:none;}
#user_profile_ad{display:none;}
body{background:#ffffff;font-family:tahoma;font-weight:normal;text-transform:lowercase;}
b{color:#595b3e;}
a{color:#ffffff;text-decoration:none;}
a:hover{color:#ffffff;text-decoration:none;}
.nickname{padding:0px;}
.tabSelected{background:#c0c0c0;}
.tabs{padding:0px;}
.body{padding:0px;}
#user_profile_avatar{border:0px;padding:5px;}
#user_profile_info a{color:#595b3e;text-decoration:none;}
#user_profile_info{font-size:11px;line-height:90%;letter-spacing:2;color:#595b3e;border-top:6pxsolid#ffffff;border-bottom:4pxsolid#000000;text-align:left;margin:3px;}
#profile_skins a{color:#ffffff;}
#profile_skins td{padding:1px;}
#profile_skins{border-collapse:collapse;}
#profile_skins h1,h3{font-size:15pt;letter-spacing:2px;color:#595b3e;}
#profile_skins img {position:relative;display:inline;background-color:#f1f1f1;border: 1px solid #000000;padding: 2px 2px 4px 2px;}
td{color:#ffffff;}
td a{color:#ffffff;text-decoration:none;}
td img{position:relative;display:inline;background-color:#ffffff;padding:2px2px4px2px;}
.topnav a{color:#595b3e;}.topnav img{background-color:#ffffff;}
.topnav{background:transparent;font-size:11px;line-height:90%;letter-spacing:0;border-top:6pxsolid#ffffff;border-bottom:4pxsolid#c0c0c0;text-align:center;margin:3px;}

After you have done all the styling, you can start writing your about me section.

Semoga entri ini dapat membantu anda . Oh ya , kalau boleh kredit lah saya dalam profile awak jika awak guna tuto ini （‐＾▽＾‐） Kalau tak mau pun tak apa .. Tambah diakhir code yang anda letak di about me 

Helped by : <a href="http://frozen-smurf.blogspot.com">Naimi Amiesya</a>