YR Tutos

ENTRY ABOUT QUOTES STUFFS FESBUK TWITTER INSTA NEWER OLDER

Cara Guna and Edit Blogskin

Assalamualaikum. Whoaa ramai yang mintak amoy untuk editkan blog diorang. Hmm masih dalam perancangan and kena lah ada upah. Ingat senang ke? HAHA. Bukak shoutmix ada request dari CdaShaari

Mulakan dengan bismillahirrahmanirahim. First kalau korang nak guna blogskin, korang kena back-up template lama sebab takut tak jadi or korang tak reti guna kan? So beware yeah. Kalau guna blogskin semuanya berlandaskan code so korang kena banyak bersabar kay? Tak ada Add A Gadget macam template designer tu taw.

1. Revert Old Template Kepada Classic Template

Psst : Sebelum awak nak guna blogskin, awak kena revert dulu template yang sebelumnya kepada classic template kay. Then baru boleh guna blogskin.

Dashboard > Design > Edit HTML

click for bigger..!

Awak Click Revert to Classic Template macam gambar kat atas nie. Next awak buang semua code dekat edit HTML and paste code blogskin. Mana nak dapat template blogskin? Okay first korang pergi Blogskin. Pilih lah skin mana yang korang suka. #tak semua template sama kay.

click for bigger..!

Lepas dah pilih, awak click Blogger Main macam gambar kat atas nie. Next, save template..! So now kita nak edit blogskin-nya pulak.

Dashboard > Template

2. Cursor

search code : body {
Copy code dibawah nie and paste selepas code body { tadi
#Kaler biru : URL cursor. Kalau dah ada tak payah lah kay? Nak tukar pun boleh bah~
cursor:url("http://www.drikoti.net/Goodies/Cursor/News/Gifs/06.gif"),text;
3. Favicon

search code : <html>
Copy code nie and paste dekat bawah <html> tadi
#Kaler biru : URL image.
<link href='URL IMAGE' rel='shortcut icon' type='image/x-icon'/>
http://i257.photobucket.com/albums/hh205/xoxojays/smilies/fairy/pic001demoji_18583644decoojp.gif
http://i257.photobucket.com/albums/hh205/xoxojays/smilies/minidocomo/pic012demoji_13257740decoojp.gif
http://i257.photobucket.com/albums/hh205/xoxojays/smilies/minidocomo/pic004demoji_13231641decoojp.gif
4. Enable Link

Okay, kebanyakkannya blogskin tak ada link dekat post title so guna CTRL+F search code : <$BlogItemTitle$>
#Korang gantikan code <$BlogItemTitle$> dengan code nie :
<span class="PostTitle">
<a href="<$BlogItemPermalinkURL$>">
<$BlogItemTitle$></a></span>
5. Title Blog

search code : <title>
#korang delete ayat yang sedia ada dengan title blog korang sendiri kay.

6. Background

search code : body {
#nanti kat bawah ada code seakan akan macam nie :

background:url(URL BACKGROUND);

http://i863.photobucket.com/albums/ab195/shz97/bg/purple1.png
7. Header

search code : <head>
Copy code nie and paste atas <head>
#Tak semua blogskin sesuai letak header kay.
<center><img src="URL HEADER"></center>
8. Add Comment

seach code : </blogger>
copy code nie and paste dekat atas </blogger>
<BlogItemCommentsEnabled><a class="comments" href="https://www.blogger.com/comment.g?blogID=YOUR BLOG ID&postID=<$BlogItemNumber$>&isPopup=true" onclick="window.open('https://www.blogger.com/comment.g?blogID=YOUR BLOG ID&postID=<$BlogItemNumber$>&isPopup=true', 'bloggerPopup', 'toolbar=0,scrollbars=1,location=0,statusbar=1,menubar=0,resizable=1,width=400,height=450');return false;">
<$BlogItemCommentCount$> comment(s)</a></BlogItemCommentsEnabled
9. Letak older and newest post

search code : <blogger>
Copy code nie and paste dekat bawah code <blogger>
#ada sesetengah blogskin dah ada so tak payah laa kay :)
<OlderPosts><a href="<$OlderPosts<OlderPosts><a href="<$OlderPosts<OlderPosts><a href="<$OlderPosts<OlderPosts><a href="<$OlderPosts$>">gt;">amp;gt;">Older Post</a></OlderPosts> | <NewerPosts><a href="<$NewerPosts$>">Newer Posts</a></NewerPosts>
Preview and save template.

10. Add Facebook Like Button

search code : </blogger>
Copy code nie and paste dekat atas </blogger> atau kat mana mana yang korang rasa sesuai kay.
<iframesrc="http://www.facebook.com/plugins/like.php?href=<$BlogItemPermalinkURL$>&amp;layout=standard&amp;show-faces=true&amp;width=490&amp;height=25&amp;font=arial&amp;";action=lik
e&amp;colorscheme=dark; colorscheme="dark" scrolling="no" frameborder="0"
 allowTransparency="true" style="border:none; overflow:hidden; width:280px; height:30px;"></iframe>
11. Tutorial letak Scrollbar

search code : a:hover {
#kalau tak ada tambahkan code a:hover { berdasarkan template lama korang kay.
Copy code ini and paste dekat atas a:hover { tadi
::-webkit-scrollbar {
height:13px;
width: 8px;
background: #f9f9f9;
}
::-webkit-scrollbar-thumb {
background-color: #98AFC7;
-moz-border-radius: 2px;
border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
-moz-border-radius: 2px;
border-radius: 2px;
background:#659EC7;
}
Preview and save template.

12. Letak blockquote

search code : a:hover {
Copy code ini and paste dekat atas a:hover {
#kalau dah ada tak payah letak lagi kay. Kaler biru boleh tukar.
blockquote {
font-size:12px;
font-family: Udamojial;
background-colour:#FFFFFF;
border-top: 1px dashed #FF97CB;
border-bottom: 1px dashed #FF97CB;
border-left: 3px solid #FF97CB;
border-right: 3px solid #FF97CB;
padding: 5px;
}
blockquote:hover {
background: #FFFFCC;
border:3px dashed #7F4E52;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
border-radius:15px;
color:#413839;
font-family: Verdana ;
}
Preview and save template.

13. Tukar Warna Higlight

search code : a:link { atau code yang serupa a:link nie
#sesetengah template tak ada code nie so sendiri tambah kay?
Copy code ini and paste dekat atas a:link {
::selection {
background: #D462FF; /* Safari */
color: #000000;
}
::-moz-selection {
background: #D462FF; /* Firefox */
color: #000000;
}
Preview and save template.

Whoaaaa...! Panjang nyaa tutorial amoy kali ini. Fuhhh.. Hope tips nie berguna untuk pengguna blogskin okay? Jangan stress stress. If ada apa apa just leave your comments kay dear? Kalau guna blogskin memang kena banyak bersabar dan pandai main dengan code. Tak paham pun buat buat paham jeaa. Hihihi. Arghh perut ku sudah lapar. Mau makan. Tata ;) #big credit dekat Mish Apple, Anis and lain lain.

UPDATE!

If korang nak letak link twitter, facebook, tagged, ask.fm or whatever follow this step.

<a href="URL TWITTER/FACEBOOK"> NAME</a>
Crayon:
Red: Gantikan dengan URL twitter or facebook awak.
Blue: Letak nama or apa-apa k :)

Psst: Kenapa korang tanya macam mana nak copy? Copy jelah. Macam tak biasa copy and paste pulok :P

Label: , , , , , , , , , ,


11 comment[s] | back to top

click for bigger..!

Awak Click Revert to Classic Template macam gambar kat atas nie. Next awak buang semua code dekat edit HTML and paste code blogskin. Mana nak dapat template blogskin? Okay first korang pergi Blogskin. Pilih lah skin mana yang korang suka. #tak semua template sama kay.

click for bigger..!

Lepas dah pilih, awak click Blogger Main macam gambar kat atas nie. Next, save template..! So now kita nak edit blogskin-nya pulak.

Dashboard > Template

2. Cursor

search code : body {
Copy code dibawah nie and paste selepas code body { tadi
#Kaler biru : URL cursor. Kalau dah ada tak payah lah kay? Nak tukar pun boleh bah~
cursor:url("http://www.drikoti.net/Goodies/Cursor/News/Gifs/06.gif"),text;
3. Favicon

search code : <html>
Copy code nie and paste dekat bawah <html> tadi
#Kaler biru : URL image.
<link href='URL IMAGE' rel='shortcut icon' type='image/x-icon'/>
http://i257.photobucket.com/albums/hh205/xoxojays/smilies/fairy/pic001demoji_18583644decoojp.gif
http://i257.photobucket.com/albums/hh205/xoxojays/smilies/minidocomo/pic012demoji_13257740decoojp.gif
http://i257.photobucket.com/albums/hh205/xoxojays/smilies/minidocomo/pic004demoji_13231641decoojp.gif
4. Enable Link

Okay, kebanyakkannya blogskin tak ada link dekat post title so guna CTRL+F search code : <$BlogItemTitle$>
#Korang gantikan code <$BlogItemTitle$> dengan code nie :
<span class="PostTitle">
<a href="<$BlogItemPermalinkURL$>">
<$BlogItemTitle$></a></span>
5. Title Blog

search code : <title>
#korang delete ayat yang sedia ada dengan title blog korang sendiri kay.

6. Background

search code : body {
#nanti kat bawah ada code seakan akan macam nie :

background:url(URL BACKGROUND);

http://i863.photobucket.com/albums/ab195/shz97/bg/purple1.png
7. Header

search code : <head>
Copy code nie and paste atas <head>
#Tak semua blogskin sesuai letak header kay.
<center><img src="URL HEADER"></center>
8. Add Comment

seach code : </blogger>
copy code nie and paste dekat atas </blogger>
<BlogItemCommentsEnabled><a class="comments" href="https://www.blogger.com/comment.g?blogID=YOUR BLOG ID&postID=<$BlogItemNumber$>&isPopup=true" onclick="window.open('https://www.blogger.com/comment.g?blogID=YOUR BLOG ID&postID=<$BlogItemNumber$>&isPopup=true', 'bloggerPopup', 'toolbar=0,scrollbars=1,location=0,statusbar=1,menubar=0,resizable=1,width=400,height=450');return false;">
<$BlogItemCommentCount$> comment(s)</a></BlogItemCommentsEnabled
9. Letak older and newest post

search code : <blogger>
Copy code nie and paste dekat bawah code <blogger>
#ada sesetengah blogskin dah ada so tak payah laa kay :)
<OlderPosts><a href="<$OlderPosts<OlderPosts><a href="<$OlderPosts<OlderPosts><a href="<$OlderPosts<OlderPosts><a href="<$OlderPosts$>">gt;">amp;gt;">Older Post</a></OlderPosts> | <NewerPosts><a href="<$NewerPosts$>">Newer Posts</a></NewerPosts>
Preview and save template.

10. Add Facebook Like Button

search code : </blogger>
Copy code nie and paste dekat atas </blogger> atau kat mana mana yang korang rasa sesuai kay.
<iframesrc="http://www.facebook.com/plugins/like.php?href=<$BlogItemPermalinkURL$>&amp;layout=standard&amp;show-faces=true&amp;width=490&amp;height=25&amp;font=arial&amp;";action=lik
e&amp;colorscheme=dark; colorscheme="dark" scrolling="no" frameborder="0"
 allowTransparency="true" style="border:none; overflow:hidden; width:280px; height:30px;"></iframe>
11. Tutorial letak Scrollbar

search code : a:hover {
#kalau tak ada tambahkan code a:hover { berdasarkan template lama korang kay.
Copy code ini and paste dekat atas a:hover { tadi
::-webkit-scrollbar {
height:13px;
width: 8px;
background: #f9f9f9;
}
::-webkit-scrollbar-thumb {
background-color: #98AFC7;
-moz-border-radius: 2px;
border-radius: 2px;
}
::-webkit-scrollbar-thumb:hover {
-moz-border-radius: 2px;
border-radius: 2px;
background:#659EC7;
}
Preview and save template.

12. Letak blockquote

search code : a:hover {
Copy code ini and paste dekat atas a:hover {
#kalau dah ada tak payah letak lagi kay. Kaler biru boleh tukar.
blockquote {
font-size:12px;
font-family: Udamojial;
background-colour:#FFFFFF;
border-top: 1px dashed #FF97CB;
border-bottom: 1px dashed #FF97CB;
border-left: 3px solid #FF97CB;
border-right: 3px solid #FF97CB;
padding: 5px;
}
blockquote:hover {
background: #FFFFCC;
border:3px dashed #7F4E52;
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomright: 15px;
border-radius:15px;
color:#413839;
font-family: Verdana ;
}
Preview and save template.

13. Tukar Warna Higlight

search code : a:link { atau code yang serupa a:link nie
#sesetengah template tak ada code nie so sendiri tambah kay?
Copy code ini and paste dekat atas a:link {
::selection {
background: #D462FF; /* Safari */
color: #000000;
}
::-moz-selection {
background: #D462FF; /* Firefox */
color: #000000;
}
Preview and save template.

Whoaaaa...! Panjang nyaa tutorial amoy kali ini. Fuhhh.. Hope tips nie berguna untuk pengguna blogskin okay? Jangan stress stress. If ada apa apa just leave your comments kay dear? Kalau guna blogskin memang kena banyak bersabar dan pandai main dengan code. Tak paham pun buat buat paham jeaa. Hihihi. Arghh perut ku sudah lapar. Mau makan. Tata ;) #big credit dekat Mish Apple, Anis and lain lain.

UPDATE!

If korang nak letak link twitter, facebook, tagged, ask.fm or whatever follow this step.

<a href="URL TWITTER/FACEBOOK"> NAME</a>
Crayon:
Red: Gantikan dengan URL twitter or facebook awak.
Blue: Letak nama or apa-apa k :)

Psst: Kenapa korang tanya macam mana nak copy? Copy jelah. Macam tak biasa copy and paste pulok :P

Label: , , , , , , , , , ,