Tutorial : Cara nak edit profile blogskin

, , 1 comment
 
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>

1 comment:

  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 comment below chio!