blok nurfaizfoat: Cara-cara membuat blog anda menjadi cantik

salam..as requested by some readers..aku telah buat keputusan macam mana nak buat blog korang cantik dan lawa serta canggih manggih instead of using custom template yang diberikan oleh pihak Blogspot. Macam korang tahu, bila kita buat blog..tak kira la pakai Blogspot ke, pakai Wordpress ke atau pun Moveable Type. Korang akan diberi pelbagai pilihan custom template (skin blog ) yang memang sedia ada dibuat untuk customers diorang dan design tuh bagi aku biasa je la. Some readers tertanye-tanye mcam mana dan di mana aku dapat template yang lawa ni untuk blog aku.

Setiap blog template ni dibina dengan format script yang itu dalam bentuk HTML, XHTML ataupun CSS. Aku bukan la tau sangat pun tapi just belajar sendiri. So hari ni kita kongsi sama-sama pengetahuan tuh untuk semua. Okay, korang try dulu masuk laman web nih
Blogskins.

So, atas ni screenshots yang ada dalam laman web tu. Semua skins ataupun template ni adalah free of charge. Tiada duit ataupun kad kredit yang diperlukan. Semua ni disumbangkan oleh komuniti blogger macam kita jugak. Aku nak belajar jugak tapi tak khatam lagi. So korang just pilih je mana-mana skins yang korang suka.

Okay, katalah korang suka skin nih. Macam biasa la, klik kat situ ( More detail about the skins).
Nanti akan keluar lagi satu page. Korang baca apa yang dia tulis, scroll ke bawah. Korang cari yang ada macam ni.

Korang click la "Download as " Blogger ke, Xanga ke, Moveable type ke. Ikut korang la. Okay, bila dah download korang akan receive satu file notepad yang ada tulih macam ni

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><br />            <br />            <head><link rel="shortcut icon" href="http://i47.photobucket.com/albums/f170/baang76/favicon-2.jpg"><br />                  <link rel="icon" href="http://i47.photobucket.com/albums/f170/baang76/favicon-2.jpg"><br />            <meta equiv="Content-Language" content="en-us"><br />            <meta equiv="Content-Type" content="" charset="<$BlogEncoding$">" /><br />            <title>predictthislastscene|theEPICbegins </title><br />            <meta name="keywords" content="damien lockheart, blog"><br />            <meta name="author" content="Damien Ng (Damien Lockheart)"><br />            <style type="text/css"><br />            <br />             /**********************************************************************************<br />             PREDICTABLE LAST SCENE     - without you anymore -<br />             Blogger Template by Damien Lockheart<br />             -----------------------------------------------------------------------------------<br />             FIRST EDITION (2007.05.16)<br />              -----------------------------------------------------------------------------------<br />             Designer's Contact           damien.spec@gmail.com<br />             Designer's Portfolio         dlh-folio.blogspot.com<br />             -----------------------------------------------------------------------------------<br />              CSS RELEASED UNDER CREATIVE COMMONS LICENSE<br />             -----------------------------------------------------------------------------------<br />             All associated graphics copyright 2006-2007, Damien Ng Xuan Wei.<br />             http://creativecommons.org/licenses/by-nc-sa/2.5/<br />             **********************************************************************************/<br />        <br />         /*---------------START OF DO NOT EDIT---------------*/<br />         <br />        body { background: #1E2121 url(http://i233.photobucket.com/albums/ee100/dlh-folio/BS20/20_background.jpg) repeat-x top; font-family: 'Lucida Grande', Verdana, Arial; font-size: 11px; margin: 0; padding: 0;}<br />        #navbar-iframe { height: 0px; visibility: hidden;}<br />        #page { position: absolute; margin: 0; padding: 0; top: 0; left: 0; width: 100%;}<br />        #therest { width: 600px; height: 500px; margin: 0px auto 0px; padding: 0; position: relative; top: 0px; left: 0px; font-family: Helvetica, Arial, Sans-Serif; color: #646E6E; text-align: justify;}<br />        #headerimage { position: absolute; margin: 0; padding: 0; top: 0; left: -20px; width: 489px; height: 400px; background: url(http://i233.photobucket.com/albums/ee100/dlh-folio/BS20/20_banner.jpg);}<br />        #navigation { position: absolute; margin: 0; padding: 0; top: 298px; left: 472px; width: 119px; height: 20px; font-size: 11px; font-weight: normal; text-align: left; text-transform: lowercase; text-decoration: none; letter-spacing: 1px; font-family: Helvetica, Arial, Sans-Serif; color: #FFF; cursor: default; opacity: .4; filter: alpha(opacity=40);}<br />          #navigation a { color: #FFF; text-decoration: none;}<br />        <br />        <br />        <br />         /*---------------END OF DO NOT EDIT---------------*/<br />        <br />        h1, h2, h2 a, h3, h4, h5 { text-transform: lowercase; cursor: default;}<br />        h1 { font-family: Arial; font-size: 14px; font-weight: bold; color: #467F88; padding: 0 0 9px 0; margin: 0; text-align: center;}<br />        h2, h2 a { font-family: Helvetica; font-size: 24px; font-weight: normal; color: #FFF; padding: 0 0 15px 0; margin: 0; letter-spacing: 2px; text-align: center;}<br />        h3 { font-family: Arial; font-size: 16px; font-weight: normal; color: #C7C7C7; padding: 0 0 9px 0; margin: 0;}<br />        a { text-decoration: none; }<br />        <br />        <br />        #posts { position: absolute; margin: 0; padding: 0; top: 360px; left: 50px; width: 500px; line-height: 150%;}<br />          #entrybody blockquote { padding: 5px; margin: 0 10px 0 10px; font-size: 10px; font: tahoma; color: #555555; text-align: justify; background: #232323; border: 1px #555 solid;}<br />          #entrybody a { color: #276673; border-bottom: 1px solid #4D5354;}<br />          #entrybody a:hover { color: #8B9DA1; border-bottom: 1px solid #4D5354; background: #313637;}<br />          <br />          #entrybody .blogger-labels { text-transform: lowercase; font-size: 10px; color: #b3b3b3; width: 100%; text-align: right;}<br />          #entrybody .blogger-labels a { color: #657474;}<br />          #entrybody .blogger-labels a:hover { color: #FFF;}<br />          <br />          #entryfooter { border-top: 1px dotted #414347; padding: 5px 0 20px 0; margin: 5px 0 0 0; text-align: right; color: #b3b3b3;}<br />          #entryfooter a { color: #b3b3b3; text-decoration: none;}<br />          <br />          #flips a { font-family: 'Lucida Grande', Verdana, Arial;  font-size: 11px; color: #646E6E; text-decoration: none; border-bottom: none; background: none;}<br />          #flips a:hover { color: #FFF;}<br />          <br />          #addinfo a { color: #467F88; text-decoration: none;}<br />        <br />          #entrybody img { position: relative; display: inline; background-color: #2B2C2F; border: 1px solid #2B2C2F; padding: 3px 3px 8px 3px;}<br />          #entrybody img.left { float: left; margin: 0 7px 2px 0;}<br />          #entrybody img.right { float: right; margin: 0 0 2px 7px;}<br />        <br />        #cboxmain { border: 1px solid #414347; border-right: 0; width: 280px; height: 250px; padding: 0; margin: 0;}<br />        #cboxform { border: 1px solid #414347; width: 200px; height: 250px; padding: 0; margin: 0;}<br />        </style><br />        </head><br />        <body><br /></script><br />        <div id="page"><br />         <div id="therest"><br />          <div id="headerimage"></div><br />          <br />           <div id="navigation"><br />           <a href="#" onclick="document.getElementById('posts').innerHTML=document.getElementById('about').innerHTML" title="You think you know me?" alt="About Me">me</a> <a href="#" onclick="document.getElementById('posts').innerHTML=document.getElementById('home').innerHTML" title="Read 'em!" alt="Posts">posts</a> <a href="#" onclick="document.getElementById('posts').innerHTML=document.getElementById('tagboard').innerHTML" title="Tag and Check!" alt="Tags">tag</a> <a href="#" onclick="document.getElementById('posts').innerHTML=document.getElementById('links').innerHTML" title="The Crossroad!" alt="Links">links</a></div><br />        <br />           <div id="posts"><br />           <script>function changeNavigation(id) {document.getElementById('content').innerHTML=document.getElementById(id).innerHTML}</script><br />           <div id="entry"><br />           <span id="entrybody">i walk alone and you know</span><br />           <div id="entryfooter">believe in what i am and not just what i do</div><br />           </div><br />           </div><br />           <br />         </div><br />        </div><br />        <br />        <div id="home" style="display: none"><br />        <blogger><br />        <div id="entry"><br />        <blogdateheader><h1><span><$BlogDateHeaderDate$></span></h1></blogdateheader><br />        <blogitemtitle><h2><a href="">" title="<$BlogItemTitle$>"><span>* <$BlogItemTitle$> *</span></a></h2></blogitemtitle><br />        <span id="entrybody"><$BlogItemBody$></span><br />        <div id="entryfooter"><span><$BlogItemDateTime$> | <blogitemcommentsenabled><a href="">" <$BlogItemCommentFormOnClick$>> <$BlogItemCommentCount$> comments</a></blogitemcommentsenabled></span></div><br />        </div><br />        </blogger><br />        </div><br />        <br />        <div id="tagboard" style="display: none"><br />        <div id="flips"><br />          <div align="center"><br />          <br /><div align="center" id="cboxdiv"><br /><iframe frameborder="0" width="160" height="305" src="http://www2.cbox.ws/box/?boxid=1085743&boxtag=9368&sec=main" marginheight="2" marginwidth="2" scrolling="auto" allowtransparency="yes" name="cboxmain" style="border:#DBE2ED 1px solid;" id="cboxmain"></iframe><br/><br /><iframe frameborder="0" width="160" height="75" src="http://www2.cbox.ws/box/?boxid=1085743&boxtag=9368&sec=form" marginheight="2" marginwidth="2" scrolling="no" allowtransparency="yes" name="cboxform" style="border:#DBE2ED 1px solid;border-top:0px" id="cboxform"></iframe><br /></div><br /><br />          <br /><br />          </div><br />        </div><br />        </div><br />        <br />        <div id="about" style="display: none"><br />        <div id="flips"><br />          <div align="center"><br />          <h3>faiz | ba'ang</h3><br />          18thn | gitaris | designer<br /><br />          <br /><br />          </div><br /><br /><p><a href="http://blogcounter.com/" id="bclink" title="Blog counter"><span id="bccount" style="font-size:8px">Free Blog Counter</span></a></p><script type="text/javascript" src="http://blogcounter.com/js.php?user=baang76&style=1"></script><noscript><p><a href="http://blogcounter.com/"><img style="border: 0px;" alt="Blog counter" src="http://blogcounter.com/log.php?id=baang76&=st=img&showme=y" /></a> - <a href="http://www.gimahhot.de/m700-10478-0-0-0-0/lentz-home-design.html">Lentz Home Design</a></p></noscript><br /><br />        </div><br />        </div><br />        <br />        <div id="links" style="display: none"><br />        <div id="flips"><br />          <div align="center"><br />          <h3>friends</h3><br />          <a href="http://www.daylockheart.com" title="Designer's Blog">DLH</a><br />          <a href="http://dlh-folio.blogspot.com" title="DLHfolio: a collection of blog-skins">folio</a><br />          <a href="http://www.friendster.com/faiz76" title="frenster-me">frenster-me</a><br />          <a href="http://technorati.com/faves?sub=addfavbtn&add=http://tukangtaip76.blogspot.com">Add to Technorati Favorites</a><br /><br /><br /><br /><br /><br />          <br /><br />          <br />          <h3>Archive</h3><br />          <script type="text/javascript"><br />          var archives = new Array();<br />          <br />          <bloggerarchives><br />          archives[archives.length] = new Array('<$BlogArchiveURL$>', '<$BlogArchiveName$>');<br />          </bloggerarchives><br />          <br />          for (var i=archives.length-1;i>=0;i--)<br />          {<br />          document.write('<a href="' + archives[i][0] + '">' + archives[i][1] + '</a><br />');<br />          }<br />          </script><br />          </div><br />        </div><br />        </div><br />        </body><br />        </html>

Code macam ni la yang perlu korang copy dan paste kan dalam code HTML template blog korang. Sebarang pertanyaan just leave me a message okay kat shoutbox tuh.

Selamat mencuba.

4 comments:

mom journey life said...: hmm....dah copy kat add custom css tpi x appear pun skrin yg dipilih tu; April 5, 2012 at 12:38 PM
Unknown said...: bukannya paste kat add custom css tpi paste kat html javasript; September 3, 2012 at 8:00 PM
Anonymous said...: XSAMA KE; September 4, 2012 at 12:42 PM
Unknown said...: mcam mna.??...da buat,,p x jdi ag,,,,; September 18, 2012 at 3:28 PM

Thursday, January 3, 2008

Cara-cara membuat blog anda menjadi cantik

4 comments:

Jumpa Saya Ditempat Lain

Dilabelkan sebagai

Arkib Blog