Assalamualaikum dan hai semua...semalam ada yang tanya kat ask.fm macam mana nak buat profile
blogskin.com jadi macam
saya punya...tapi...daripada bagi code blogskin saya lebih baik saya buat tutorial cara nak cantik kan profile blogskin from A to Z supaya kalian boleh cantikkan profile kalian sendiri dan boleh tambah ilmu kan?
I learned all of this from
HERE...
Ways to customize
blogskins.com profile are a bit different than customizing blogger blog...
Things you should know before styling
All styles declaration must be joined together unlike normal blogskins.
Setiap isi dalam <style> hingga </style> perlulah ditaip rapat tanpa ( space )
Example of a normal blogger skins :
<style>
a {
text-decoration: none;
color: #666666;
}
</style>
Example of Blogskins profile code :
<style>a{text-decoration: none;color: #666666;}</style>
Place to put all the styling code :
Tempat untuk anda meletakkan kode pengubahsuaian :
For styling your blogskin profile page :
Untuk mengubahsuai laman profil anda :
Go to your profile --> Edit --> Put the code in about me section
For styling your skin page :
Untuk mengubahsuai laman untuk blogskin anda :
Put the code in skin description of skin.
Profile page dissected
( Code for Blogskin Profile )
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{}
Lists above are the general areas of Blog Skins profile page.
Simple styling
Now for some really simple styling.
Example 1 - getting reed of some parts of the profile which you don't want to see. like your comments.
Untuk menmbuang beberapa elemen laman profil anda yang tidak diperlukan ( contohnya komen )
All you need is 1 simple line.
<style>#my_comments{display:none}</style>
Example 2 - how about putting some background image?
Untuk menambah background pada laman blogskin...
<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
Untuk mengubahsuai link :
<style>a{color: #777777;text-decoration:none;}</style>
Example 4 - changing looks for the titles
Untuk mengubahsuai tajuk :
<style>h1,h3{color: purple;}</style>
More precise styling
Example 1 - changing the links of just the #user_profile_about{}.
Mengubahsuai link hanya bagi ruang ( About the user )
<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{}
Mengubahsuai tajuk hanya bagi ruang ( About the user )
<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
Jangan lupa untuk menambah kode <style> dan </style> pada mula dan akhir kode
.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.
Hopefully this entry will help you...credit me in your blogskin profile if you're using my tuto...
(Add below code at the the end of about me section)
Helped by : <a href="http://kawaiilady.blogspot.com">Kawaii Lady</a>
If you don't want to add the credit it's up to you...I don't mind..
