skip to main |
skip to sidebar
Cara Buat Blogskins Part 2 (end)
Hallo.....
Ini lanjutan cara buat blogskins yang pertama
Kalo gak ngerti tanya
Read more
Step pertama : Login Dashboard > Template .
Step Kedua : Tengok code dalam tu, tenung lama lama sampai bocor skrin.
** JOM MULA DENGAN LAFAZ BISMILLAHIRRAHMANIRRAHIM**
Step pertama : Copy kod bawah ni dan paste di bahagian sidebar korang. Sebagai contoh anis letak di bahagian welcome.
<center> <a class="navigate" onClick="document.getElementById('entry').innerHTML=document.getElementById('diary').innerHTML" title="">ENTRY</a><a class="navigate" onClick="document.getElementById('entry').innerHTML=document.getElementById('about').innerHTML" title="">BOSS</a>
<a class="navigate" onClick="document.getElementById('entry').innerHTML=document.getElementById('stuff').innerHTML" title="">STUFF</a>
<a class="navigate" onClick="document.getElementById('entry').innerHTML=document.getElementById('link').innerHTML" title="">LINKS</a>
BLUE : Yang ni jangan usik apa-apa . Haram katanya .
RED : Yang nie boleh tukar ayat anda sendiri kalau nak tukar.
Step kedua : Ctrl+f/f3, cari kod
</style>
Pastekan kod bawah ni di ATAS </style>
.navigate {background: #FC9EBD;display:inline-block;color: #fff; border: 2px solid #FFF9BB; border-radius: 5px;padding: 6px;}
RED : background color. cari di html-color-codes.info
BLUE : font color. cari di link atas tu
PEPEL : warna untuk border
Klik preview !
Jadi macam ni tak ?
kalau jadi tu. tahniah ! (y)
Step Ketiga : Ctrl+f / f3, cari kod
<div class="mainblog">
Copy kod bawah ni dan pastekan di BAWAH dia. Bawah kod tu ada kod macam satu perenggan kan? Gantikan ! gantikan ! replace ! Replace sampai kod </blogger>
<blogger><div class="title"><img src ="http://media.tumblr.com/da98d011880f0ac184bbd0049a1b8726/tumblr_inline_mjs1dtSGgn1qdlkyg.gif"/> <BlogItemTitle><span class="PostTitle"><a href="<$BlogItemPermalinkURL$>"><$BlogItemTitle$></a></span></BlogItemTitle></div><div class="footer">Written by me at <$BlogItemDateTime$> <b style="background-color: white; color: #ffb3c4; font-family: verdana, tahoma, sans-serif; font-size: 12px; font-weight: bold; text-align: -webkit-center;">?</b> <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> throw heart[s]</a></BlogItemCommentsEnabled></div><br><$BlogItemBody$></br>
Yang saya pepelkan tu tukar dengan URL Image anda sendiri.
Sudah, teruskan dgn step keempat
Step keempat : Ctrl+f / f3, cari kod
</body>
Pastekn ja kod yang aku bagi ni dan paste di ATAS tu
<div id="diary" style="display: none;">-<blogger><div class="title"><img src ="http://media.tumblr.com/da98d011880f0ac184bbd0049a1b8726/tumblr_inline_mjs1dtSGgn1qdlkyg.gif"/> <BlogItemTitle><span class="PostTitle"><a href="<$BlogItemPermalinkURL$>"><$BlogItemTitle$></a></span></BlogItemTitle></div><div class="footer">Written by me at <$BlogItemDateTime$> <b style="background-color: white; color: #ffb3c4; font-family: verdana, tahoma, sans-serif; font-size: 12px; font-weight: bold; text-align: -webkit-center;">?</b> <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> throw heart[s]</a></BlogItemCommentsEnabled></div><br><$BlogItemBody$></br>
</blogger></div>
PREVIEW, SAVE
Aku tak nak memanjang cerita jadi teruskan jelah dengan step kelima. Tahu, kau orang pun mesti menyampah tengok aku bebel panjang panjang :p
Step kelima : di atas kod </body> paste kan kod nie ATAS dia. Yang ini kod untuk bahagian BOSS. Kira untuk bio korang lah
<div id="about" style="display: none;"><div class="title"><img src ="http://media.tumblr.com/tumblr_mdns6uP6zZ1qdlkyg.gif"/> This Is Real Me</div><br><center><img height="321" src="http://data.whicdn.com/images/21526968/tumblr_lmvzy0WltB1qekcrso1_500_large.gif" width="500" /></center>
<img src="http://media.tumblr.com/tumblr_m7ei8qwdRO1qdlkyg.gif" /> <b>My own biography</b><br /><b>Name : </b>ryna, rynn<br /><b>Date of birth : </b>20 August 98<br /><b>Wants to be : </b>a lawyer<br /><b>Born at : </b>Klang, Malaysia<br /><b>Stay : </b>Rawang<br /><b>Love to :</b> Make people laugh. but im not a clown xD<br /><br /><img src="http://media.tumblr.com/tumblr_mecjtynt4X1qdlkyg.gif" /> <b>About My Blog</b><br /><b>Since : </b>3 December 2011<br /><b>Name </b>: W O N D E R L A N D |
<br><br>
Boleh tukar apa yang nak kecuali yang aku merahkan tu.
Step keenam : di atas kod </body>, pastekan pulak kod ni. yang nie untuk kod bahagian stuff. kira cam tutorials, freebies ke
<div id="stuff" style="display: none;"><div class="title"><img src ="http://media.tumblr.com/tumblr_mdns6uP6zZ1qdlkyg.gif"/> some stuffs</div><br><center>change this with your own stuff</center><style>.lulu{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1mDjX9wz87oBddKqQicCePBknLF4JgkTGh7p5kO62lnjZ0xMmRRMcdltCRdYcNZbTrV9tD1JhQF22AgyrpFtaJMs8Q-MmeXN14eQbTTXdSp7wZodUtQLxhcodBpu9FViYtpe7LbNTc6s/s1600/oristripe.gif);color:#AAAAAA;-webkit-transition: 1.0s; -moz-transition: 1.0s;letter-spacing:5px;margin-bottom:5px;margin:15px;width:500px;font-family:'hyperbole';font-size:12px;line-height:8px;text-align:center;padding-right:0px;}
.eunji {cursor:pointer;display:inline-block;text-align:left;width:350px;color:#888;padding:1px;background:url(http://media.tumblr.com/tumblr_m2rupxvQbu1qdlkyg.gif);color:#888;background-repeat:no-repeat;background-size:14px;padding-left:15px;line-height:18px;}
.eunji:hover{background:url(http://media.tumblr.com/tumblr_m2rupkf2Tn1qdlkyg.gif);background-repeat:no-repeat;background-size:14px; padding-left:15px;line-height:18px;color:#EAABFE}</style><center><img height="321" src="http://data.whicdn.com/images/63192082/large.jpg" width="500" /></center><div class="lulu">TITLE</div><a class="eunji" href="LINK">TITLE</a><a class="eunji" href="LINK">TITLE</a><a class="eunji" href="LINK">TITLE</a></center></div></div></div>
<br><br>
Boleh tukar apa yang nak kecuali yang aku merahkan tu.
Step ketujuh : di atas kod </body>, pastekan pulak kod ni. yang nie untuk kod bahagian links. kira macam exchange links gituw lorh
<div id="link" style="display: none;"><div class="tit2"><img src ="http://media.tumblr.com/tumblr_mdns6uP6zZ1qdlkyg.gif"/> Exchange Link</div><br>
<center><img height="321" src="http://data.whicdn.com/images/61952053/large.jpg" width="500" /></center><br>
<style>a.navigate5 {border: 1px solid #eee;background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV3SQXY2XB0FP8vbjbpoaEvPnr5da8-Vcdkhp_2dEounA5uUa2s-KnrfNfW6mVB5br1vd_g1w0Md0DnzQjqabH3wfFSLkwb9awaQiyAEd7OyUrfBLYbjt8IVg3qsHkzyIg7aHqj-ZpfAE/s1600/sparkles.png);font: 10px 'times new roman';letter-spacing: 2px;color: #888;padding:5px;width:60px;padding:5px;-webkit-transition: 1.0s;-moz-transition: 1.0s;text-align: center;text-transform: uppercase;display:inline-block;margin:2px;}
a.navigate5:hover {cursor: url(http://i1196.photobucket.com/albums/aa406/tieqaonew/02.gif), auto;color: #e5d4b3;text-decoration: none;}</style>
<center>P/s : Tell me at my cbox if you want to echange link with me. You delete me, I delete yours</center><br><a class="navigate5" href="http://studentkecik.blogspot.com/">Anis SK</a><a class="navigate5" href="http://link.blogspot.com/">Friend</a><a class="navigate5" href="http://link.blogspot.com/">Friend</a><a class="navigate5" href="http://link.blogspot.com/">Friend</a><a class="navigate5" href="http://link.blogspot.com/">Friend</a><a class="navigate5" href="http://link.blogspot.com/">Friend</a><a class="navigate5" href="http://link.blogspot.com/">Friend</a><a class="navigate5" href="http://link.blogspot.com/">Friend</a><a class="navigate5" href="http://link.blogspot.com/">Friend</a><a class="navigate5" href="http://link.blogspot.com/">Friend</a><a class="navigate5" href="http://link.blogspot.com/">Friend</a><a class="navigate5" href="http://link.blogspot.com/">Friend</a><a class="navigate5" href="http://link.blogspot.com/">Friend</a><a class="navigate5" href="http://link.blogspot.com/">Friend</a><a class="navigate5" href="http://link.blogspot.com/">Friend</a><a class="navigate5" href="http://link.blogspot.com/">Friend</a><a class="navigate5" href="http://link.blogspot.com/">Friend</a><a class="navigate5" href="http://link.blogspot.com/">Friend</a><a class="navigate5" href="http://link.blogspot.com/">Friend</a><a class="navigate5" href="http://llink.blogspot.com/">Friend</a><br><br></div>
Boleh tukar apa yang nak kecuali yang aku merahkan tu.
nota budak nerd : Di atas sebab aku kasi tutorial yang macam cincai boncai, jadi aku nak bagi hadiahlah. In case, bahagian stuff tu ada efek power! Dalam boss tu ada macam image favicon, ada tulis sikit-sikit. Dalam links tu pula lagi lah 'kaw' ! dah tersedia dengan rapi dijaga dengan baik oleh babu anis SK. Tak percaya try je lah. menipu tu kan .. tak .. baik (tergagap gagap pula)
Dan aku jugaak tahu ada jugak sesetengah yang tak nak godek godek sendiri, kan? Senang cite, pendek kata, pemalas. haha ! Nah lah kod bodo bodo style.
<html>
<head>
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH56ioruVtMpuE7_Zsh7fCBMev_ilZWlv3o9wCbmd6Mwq_fDIJHSE-uwuq2jJUGztEvjcRaGIjD5e3Xx4LKDftipXpt693elx3jgMT3GQdJ_6pDo1nilSEbY2wznvQT5iFDnQjNg7nagKk/s1600/12oeJ2.png" /></center>
<title>My Wonderland</title>
<style type="text/css">
#navbar-iframe {display: none;}
body {
cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUazs3am3uuvwkLUgjpIke7sZdCzvWdokdPfsvt1abZ92iUoyMNmXfP3L_jSz_2xY-2kZhRBIOv9WC0JWwkFJO5Ui5IEZpoT3NXDTzwYlKtgSG5GnTFBNGMeWEHicB7z57duAQU7C_8g/s1600/04.gif), auto;
background: url(http://i1074.photobucket.com/albums/w419/amaninaonly/th_polkadotpink-1.gif);
background-attachment:fixed;
font-family: verdana;
font-size: 11px;
}
a:link, a:visited {
color:#ffa1c2;
-webkit-transition-duration: 0.5s;
text-decoration:none;
}
a:hover {
cursor: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUazs3am3uuvwkLUgjpIke7sZdCzvWdokdPfsvt1abZ92iUoyMNmXfP3L_jSz_2xY-2kZhRBIOv9WC0JWwkFJO5Ui5IEZpoT3NXDTzwYlKtgSG5GnTFBNGMeWEHicB7z57duAQU7C_8g/s1600/04.gif), auto;
-webkit-transition-duration: 0.5s;
color: #000;
}
.mainblog {
background:#ffffff;font-size: 11px;
color:#000;
padding:14px;
width:600px;
border-radius:13px;
text-align:justify;
}
.sidebarblog {
background: #ffffff;font-size: 11px;
color: #000;
padding: 8px;
width: 240px;
border-radius: 10px;
text-align: justify;
}
.title {
letter-spacing: 2px;
color:#FF9FCC;
font-size:18px; font-family: Georgia; Font-style: Italic;
padding:3px;
border-bottom:2px solid #a9a9a9;
}
.title2 {
color:#a9a9a9; letter-spacing: 2px;
font-size:18px; font-family: Georgia; Font-style: Italic;
padding:3px;
border-bottom:2px solid #ffa1c2;
}
.date {
font-style:italic; font-family: trebuchet ms; letter-spacing: 2px;
font-size:10px;
margin-bottom:2em;
}
::-webkit-scrollbar {
width: 7px;
height: 7px;
}
::-webkit-scrollbar-track-piece {
background-color: #6c5656;
border: 3px solid #fff;
}
::-webkit-scrollbar-thumb:vertical, ::-webkit-scrollbar-thumb:horizontal {
background-color: #fff;
border: 1px solid #fff;
}
blockquote {
-webkit-transition:2s;
color:#111;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV3SQXY2XB0FP8vbjbpoaEvPnr5da8-Vcdkhp_2dEounA5uUa2s-KnrfNfW6mVB5br1vd_g1w0Md0DnzQjqabH3wfFSLkwb9awaQiyAEd7OyUrfBLYbjt8IVg3qsHkzyIg7aHqj-ZpfAE/s1600/sparkles.png);
border-left:9px solid #ffa1c2; border-right:9px solid #eee; border-top: 1px dashed #ffcaca; border-bottom: 1px dashed #ffcaca;
padding:8px;
border-radius:8px;
}
blockquote:hover {
box-shadow:0px 0px 25px #ffa1c2;
color:#000000;
border-right:9px solid #ffa1c2; border-left:9px solid #eee;
padding:8px;
border-radius:10px;
}
.navigate {
background: #FC9EBD;display:inline-block;
color: #fff; border: 2px solid #FFF9BB; border-radius: 5px;padding: 6px;
}
.footer {
text-align: right;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
</style>
<body><br>
<table style="line-height: 17px;" width="880" border="0" align="center" cellspacing="5">
<tbody><tr>
<td valign="top" width:550px;">
<div class="mainblog">
<div id="entry">
<blogger><div class="title"><img src ="http://media.tumblr.com/da98d011880f0ac184bbd0049a1b8726/tumblr_inline_mjs1dtSGgn1qdlkyg.gif"/> <BlogItemTitle><span class="PostTitle">
<a href="<$BlogItemPermalinkURL$>">
<$BlogItemTitle$></a></span></BlogItemTitle>
</div><div class="footer">Written by me at <$BlogItemDateTime$> <b style="background-color: white; color: #ffb3c4; font-family: verdana, tahoma, sans-serif; font-size: 12px; font-weight: bold; text-align: -webkit-center;">?</b> <a href="<$BlogItemCommentCreate$>"<$BlogItemCommentFormOnClick$>><$BlogItemCommentCount$> throw heart[s]</a></BlogItemCommentsEnabled></div>
<br><$BlogItemBody$></br>
</blogger>
</div>
</td>
<td valign="top" width="250px">
<div class="sidebarblog">
<div class="title2">
Don't ever dare open my page source, I know who you are ^-^
Tidak ada komentar:
Posting Komentar
Hello ~
Leave comment here
Request ? tell in chat box
Nice words please :)