Tutorial : Cara nak edit profile blogskin

By Naimi Amiesya - 02:50

 
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>

  • Share:

You Might Also Like

1 comments

  1. Tumpang tanya, kalau mahu edit di page blogskin pula macam mana? Contohnya macam akak punya, bila hover link dia tukar warna lain. (Contoh macam preview it) Boleh buat tuto? =D Hehe~ Thanks before. ;)

    ReplyDelete

Leave your comments stalkers :P
Please don't use harsh words and mind your language :)
I really appreciate it. Thank you.