Tips untuk memilih template blogspot

Dalam memilih template blog, kita perlu sedar, sesuaikah template yang di pilih itu dengan isi yang ingin kita sampaikan. Sebagai contoh, kita ingin menggunakan blog sebagai platform perniagaan atau business, template yang mungkin sesuai adalah template yang berstail elegant dan magazine. Mungkin sedikit janggal jika menggunakan theme yang gelap. First impression adalah satu aspek yang tidak boleh kita pandang ringan dan abaikan jika ingin menarik lebih ramai lagi visitors. Begitulah juga dengan template blog yang berkategori personal yang biasanya dipilih berdasarkan minat, bermotif dan berbunga oleh pemilik blog tersebut. Tips memilih template blogspot. 1.Template yang terbaik adalah template yang mesra SEO. Ini kerana template tersebut di bina khas yang bertujuan untuk mendapatkan rank yang baik dalam search engine dan friendly pada visitor. Biasanya, loading untuk template yang mesra SEO ini adalah sangat cepat. 2.Semasa kita melihat preview template yang handak di pilih itu, pastikan semasa proses loading template tersebut, bahagian post akan muncul dahulu dan di ikuti bahagian sidebar. Ini kerana, jika berlaku error pada widget di sidebar semasa proses loading, ia tidak akan mengganggu bahagian post. 3.Jika anda memilih untuk menggunakan template 3 colum, anda di cadangkan supaya menggunakan template yang mempunyai 2 sidebar yang di letak di sebelah kanan secara bersebelahan. Ini kerana, jika berlaku masalah ataupun error dari hosting widget-widget yang telah di pasang pada sidebar, ia tidak akan menggangu proses loading bahagian post. 4.Dari segi warna, putih adalah warna yang terbaik sekali. Putih dilihat lebih mesra dengan visitors. Jika anda ingin menggunakan warna yang gelap ataupun hitam, pastikan font adalah sesuai dan pastikan juga saiz dan jenis font tidak menyukarkan visitors untuk membacanya. 5.Pilih template yang kurang menggunakan image. Walaupun template yang menggunakan image Nampak lebih cantik dan menarik, tetapi ia mempunyai kelemahan dari segi loading. Biasanya image yang digunakan untuk template tersebut berformat png. 6.Pilih template yang kurang menggunakan javascript yang di host dari luar. Ini kerana, ia akan mengganggu proses loading blog kita jika terdapat masalah atau error yang berpunca dari hosting tersebut.

Cara pasang Recent posts floating bar widget di Blogspot

Recent posts floating bar seperti yang boleh anda lihat di bahagian bawah blog ini adalah widget yang sangat menarik. Widget tersebut memaparkan tajuk post terkini yang berefek slider.

Untuk memasang widget Recent posts floating bar slider ini pada blog anda, sila ikut beberapa langkah di bawah. 1. Log in dashboard--> Template --> Edit HTML --> Proceed. 2. Seterusnya tick "Expand Widget Templates" 3. Dengan menggunakan keyboard, tekan "Ctrl+F" cari kod </head> 4. Copy dan paste kod css ini, di atas atau sebelum kod </head> <style type='text/css'> #bd { float:bottom; font-family:Arial, Helvetica, sans-serif; line-height:1.5; margin-top:5px; font-size:12px } .text { color:#98BF2F; margin-left:8px } div#news-1 .gk_news_highlighter { font-family:Verdana, Arial; font-size:11px; color:#666 } div#news-1 { width:960px; height:24px; margin-left: -10px; display:scroll; position:fixed; bottom:1px; border-top:1px solid #CCC; border-bottom:1px solid #CCC; background:#000 url(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/s320/gradient.png) repeat-x 0 -100px; clear:both; overflow:hidden } div#news-1 .gk_news_highlighter_wrapper { float:left; width:820px; height:24px; line-height:24px; overflow:hidden; position:relative } div#news-1 .gk_news_highlighter_item { width:auto; height:24px; padding-left:20px; display:none; position:absolute } div#news-1 .nowrap { white-space:nowrap } div#news-1 .gk_news_highlighter_title { padding-left:5px } div#news-1 .gk_news_highlighter_desc { padding-right:5px } div#news-1 .gk_news_highlighter_interface { float:left; width:120px; height:24px; text-align:right;

line-height:24px; z-index:1000 } div#news-1 .gk_news_highlighter_interface .text { float:left; display:block; width:auto; padding-left:5px; font-weight:700 } div#news-1 .gk_news_highlighter_interface div { width:30px; float:right } div#news-1 .gk_news_highlighter_interface a.prev,div#news-1 .gk_news_highlighter_interface a.next { cursor:pointer; width:13px; height:24px; display:block; background:url(&#39;http://1.bp.blogspot.com/-H-u2nx45PwI/TuJ1Bwv5xDI/AAAAAAAABew/HQHKt-oVd7o/s1600/play.png&#39;) no-repeat 0 50%; float:left } div#news-1 .gk_news_highlighter_interface a:hover.prev { background-position:-13px 50% } div#news-1 a,div#news-1 a:link,div#news-1 a:visited,div#news-1 a:active,div#news-1 a:focus { color:#FFF } div#news-1 .gk_news_highlighter_interface a.next { float:right; background-position:-26px 50% } div#news-1 .gk_news_highlighter_interface a:hover.next { background-position:-39px 50% } </style>

5. Seterusnya, dengan menggunakan keyboard, tekan "Ctrl+F" cari pula kod <div id='content-wrapper'>. Bagi blog yang menggunakan template dari template designer, cari kod </footer>

6. Copy dan paste kod HTML dan Javascript ini, dibawah atau selepas kod <div id='content-wrapper'> Bagi blog yang menggunakan template dari template designer, paste kod HTML dan Javascript ini di atas atau sebelum </footer> <div id='bd'> <div class='gk_news_highlighter' id='news-1'> <div class='gk_news_highlighter_interface'> <span class='text'>HOT NEWS</span> <div> <a class='prev' href='#'/> <a class='next' href='#'/> </div> </div> <div class='gk_news_highlighter_wrapper'> <script language='JavaScript'> imgr = new Array(); showRandomImg = false; aBold = true; text = &quot;no&quot;; showPostDate = false; summaryPost = 200; summaryFontsize = 12; summaryColor = &quot;#000&quot;; icon = &quot; &#187; &quot;; label = &quot;&quot;; numposts = 30; home_page = &quot;http://maribinablog.blogspot.com/&quot;; </script> <script src='http://yourjavascript.com/11843262101/post-hotnews.js' type='text/javascript'/>

</div> </div> </div> <script src='http://yourjavascript.com/01042612211/mootools.js' type='text/javascript'/> <script src='http://javscript-code.googlecode.com/files/engine_compress.js' type='text/javascript'/> <script type='text/javascript'> try {$Gavick;}catch(e){$Gavick = {};}; $Gavick[&quot;gk_news_highlighternews-1&quot;] = { &quot;animationType&quot; : 3, &quot;animationSpeed&quot; : 200, &quot;animationInterval&quot; : 2000, &quot;animationFun&quot; : Fx.Transitions.linear, &quot;mouseover&quot; : 1}; </script> 7. Edit kod yang di bold dengan warna merah dengan menggantikannya kepada URL blog anda dan juga bilangan post yang hendak dipaparkan. 8. Seterusnya klik Preview. Jika kedudukan bar terlalu ke kiri atau ke kanan, sila edit nilai pada kod yang di bold dengan warna biru pada langkah 4. width:960px; (Panjang bar) margin-left: -10px; (Jika kedudukan bar terlalu ke kanan, edit nilai -10 kepada 10 dan sebaliknya) 9 . Akhir sekali, jika anda berpuas hati dengan kedudukan bar tersebut, klik Save.

Cara pasang url tooltip di blogspot

Tooltip yang terdapat pada blog yang berplatform wordpress kini boleh di pasang pada blog yang berplatform blogspot. Tooltip ini akan membantu dan memudahkan visitor untuk melihat URL bagi active link yang terdapat pada sesebuah blog. Untuk memasang tooltip yang memaparkan url seperti yang boleh anda lihat pada active link yang terdapat di blog ini, anda hanya perlu ikut beberapa langkah yang mudah di bawah. Langkah 1 Log in blog => Dashboard => Template => Edit HTML => Proceed Langkah 2 Dengan menggunakan keyboard, tekan kekunci Ctrl + F. Seterusnya, taip atau paste kod </head> pada ruang Find dan tekan kekunci Enter. Langkah 3 Salin kod berwarna di bawah dan paste di atas atau sebelum kod </head> <style> /* Fading Tooltips By Frank Bueltge*/ body div#toolTip { position:absolute; z-index:1000; min-width:150px; background:#000; border:2px double #ccc; text-align:left; padding:3px 5px 5px 5px; min-height:1em; -moz-border-radius:5px; } body div#toolTip p { margin:0; padding:0; color:#ccc; font:11px/12px verdana,arial,sans-serif; font-weight:bold; } body div#toolTip p em { display:block; margin-top:2px;

color:#fff; font-style:normal; font-weight:normal; } body div#toolTip p em span { font-weight:bold; color:#fff; } </style> <script src='http://javscript-code.googlecode.com/files/tooltips.js' type='text/javascript'/> <script> /* Sweet Titles (c) Creative Commons 2005 http://creativecommons.org/licenses/by-sa/2.5/ */ var sweetTitles = { xCord : 0, // @Number: x pixel value of current cursor position yCord : 0, // @Number: y pixel value of current cursor position tipElements : [&#39;a&#39;,&#39;abbr&#39;,&#39;acronym&#39;], // @Array: Allowable elements that can have the toolTip obj : Object, // @Element: That of which you&#39;re hovering over tip : Object, // @Element: The actual toolTip itself active : 0, // @Number: 0: Not Active || 1: Active init : function() { if ( !document.getElementById || !document.createElement || !document.getElementsByTagName ) { return; } var i,j; this.tip = document.createElement(&#39;div&#39;); this.tip.id = &#39;toolTip&#39;; document.getElementsByTagName(&#39;body&#39;)[0].appendChild(this.tip); this.tip.style.top = &#39;0&#39;; this.tip.style.visibility = &#39;hidden&#39;; var tipLen = this.tipElements.length; for ( i=0; i&lt;tipLen; i++ ) { var current = document.getElementsByTagName(this.tipElements[i]); var curLen = current.length; for ( j=0; j&lt;curLen; j++ ) { addEvent(current[j],&#39;mouseover&#39;,this.tipOver); addEvent(current[j],&#39;mouseout&#39;,this.tipOut); current[j].setAttribute(&#39;tip&#39;,current[j].title); current[j].removeAttribute(&#39;title&#39;); } } }, updateXY : function(e) { if ( document.captureEvents ) { sweetTitles.xCord = e.pageX; sweetTitles.yCord = e.pageY; } else if ( window.event.clientX ) { sweetTitles.xCord = window.event.clientX+document.documentElement.scrollLeft; sweetTitles.yCord = window.event.clientY+document.documentElement.scrollTop; } }, tipOut: function() { if ( window.tID ) { clearTimeout(tID); } if ( window.opacityID ) { clearTimeout(opacityID); } sweetTitles.tip.style.visibility = &#39;hidden&#39;; }, checkNode : function() { var trueObj = this.obj; if ( this.tipElements.inArray(trueObj.nodeName.toLowerCase()) ) { return trueObj; } else { return trueObj.parentNode; } }, tipOver : function(e) { sweetTitles.obj = this; tID = window.setTimeout(&quot;sweetTitles.tipShow()&quot;,500); sweetTitles.updateXY(e); }, tipShow : function() { var scrX = Number(this.xCord);

var scrY = Number(this.yCord); var tp = parseInt(scrY+15); var lt = parseInt(scrX+10); var anch = this.checkNode(); var addy = &#39;&#39;; var access = &#39;&#39;; if ( anch.nodeName.toLowerCase() == &#39;a&#39; ) { addy = (anch.href.length &gt; 100 ? anch.href.toString().substring(0,100)+&quot;...&quot; : anch.href); var access = ( anch.accessKey ? &#39; &lt;span&gt;[&#39;+anch.accessKey+&#39;]&lt;/span&gt; &#39; : &#39;&#39; ); } else { addy = anch.firstChild.nodeValue; } this.tip.innerHTML = &quot;&lt;p&gt;&quot;+anch.getAttribute(&#39;tip&#39;)+&quot;&lt;em&gt;&quot;+access+addy+&quot;&lt;/em&gt;&lt;/p&gt;&quot;; if ( parseInt(document.documentElement.clientWidth+document.documentElement.scrollLeft) &lt; parseInt(this.tip.offsetWidth+lt) ) { this.tip.style.left = parseInt(lt-(this.tip.offsetWidth+10))+&#39;px&#39;; } else { this.tip.style.left = lt+&#39;px&#39;; } if ( parseInt(document.documentElement.clientHeight+document.documentElement.scrollTop) &lt; parseInt(this.tip.offsetHeight+tp) ) { this.tip.style.top = parseInt(tp-(this.tip.offsetHeight+10))+&#39;px&#39;; } else { this.tip.style.top = tp+&#39;px&#39;; } this.tip.style.visibility = &#39;visible&#39;; this.tip.style.opacity = &#39;.1&#39;; this.tipFade(10); }, tipFade: function(opac) { var passed = parseInt(opac); var newOpac = parseInt(passed+10); if ( newOpac &lt; 90 ) { this.tip.style.opacity = &#39;.&#39;+newOpac; this.tip.style.filter = &quot;alpha(opacity:&quot;+newOpac+&quot;)&quot;; opacityID = window.setTimeout(&quot;sweetTitles.tipFade(&#39;&quot;+newOpac+&quot;&#39;)&quot;,20); } else { this.tip.style.opacity = &#39;.90&#39;; this.tip.style.filter = &quot;alpha(opacity:90)&quot;; } } }; function pageLoader() { sweetTitles.init(); } addEvent(window,&#39;load&#39;,pageLoader); </script> Akhir sekali, klik preview dan jika tida mesej Error yang terpapar, klik saja Save. p/s: Untuk menukar warna background tooltip tersebut, sila edit background: #000 dengan menukarkan nilai 000 tersebut kepada warna yang anda inginkan.

Cara pasang fungsi Threaded Comment di Blogspot

Fungsi Threaded comment memudahkan untuk kita menjawab setiap komen yang telah diberikan pada sesebuah posting. Hanya klik pada Reply untuk membalas setiap komen tersebut dan komen yang di reply itu akan berada di bawah setiap komen yang diberikan oleh pembaca. Untuk membina Threaded Comment pada bahagian komen blog anda seperti yang boleh di lihat pada bahagian komen blog ini (sila klik Demo), sila ikut langkah-langkah di bawah. 1. Log in dashboard--> Template --> Edit HTML --> Proceed. 2. Seterusnya tick "Expand Widget Templates" 3. Dengan menggunakan keyboard, tekan "Ctrl+F" cari kod ]]></b:skin> 4. Copy dan paste kod css ini, di atas atau sebelum kod ]]></b:skin> #comments h4 { font-size: 24px; font-weight: normal; margin: 20px 0; } .cm_wrap { clear: both; margin-bottom: 10px; float: right; width: 100%; } .cm_head { margin: 0; width: 70px; float: left; } .cm_avatar { margin: 0; vertical-align: middle; border: 1px solid #DDD; padding: 3px; background-image: url(http://3.bp.blogspot.com/-PmKxzY3m4xc/TrH6vjTcW7I/AAAAAAAABbU/bjyOcVutAA/s60/684c851af59965b680086b7b4896ff98.png); background-position:center; background-repeat:no-repeat; width: 35px; height: 35px; } .cm_reply { padding-top: 5px; } .cm_reply a { display: inline-block; margin: 0; padding: 1px 6px; border: 1px solid #C4C4C4; border-top-color: #E4E4E4;

border-left-color: #E4E4E4; color: #424242 !important; text-align: center; text-shadow: 0 -1px 0 white; text-decoration: none; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background: #EDEDED; background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) ); background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% ); font: 11px/18px sans-serif; } .cm_reply a:hover { text-decoration: none !important;; background: #ccc;; background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));; background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);; } .cm_entry { padding: 16px; background: #F7F7F7; border: 1px solid #E4E4E4; overflow: hidden; } .cm_arrow { display: block; width: 9px; height: 18px; background: url(http://3.bp.blogspot.com/-NONrBLhghFk/To0nNB1LmkI/AAAAAAAAAI4/CAuzDfYiCiU/s1600/comment-arrow.gif) no-repeat; position: absolute; margin-left: -25px; } .cm_info { margin-bottom: 5px; } .cm_name { font-weight: bold; font-size: 12px; float: left; } .cm_date { font-size: 10px; float: right; font-style: italic; color: #CCC; } .cm_entry p { margin: 0; font-size: 13px; color: #666; } .cm_pagenavi { font-size: 10px; text-transform: uppercase; color: #666; text-shadow: 1px 1px white; font-weight: bold; } .cm_pagenavi a { color: #666; text-decoration: none; padding:10px; } .cm_pagenavi a:hover { text-decoration: underline } .cm_pagenavi span { color: #888;

background: white; padding: 4px; border: 1px solid #E0E0E0; }

5. Seterusnya, dengan menggunakan keyboard, tekan "Ctrl+F" cari pula kod </body> 6. Copy dan paste kod ini, di atas atau sebelum kod </body> <script type="text/javascript" src="http://javscript-code.googlecode.com/files/threaded%20comment.js"></script>

7. Seterusnya, copy dan paste kod ini pada notepad dan edit pada kod yang di bold merah dengan menggantikannya dengan ID Blog anda. Contoh ID blog saya : http://www.blogger.com/rsd.g?blogID=2075431096052623527 <div class='comments' id='comments'> <a name='comments'/> <b:if cond='data:post.allowComments'> <h4> <b:if cond='data:post.numComments &gt; 0'> <b:if cond='data:post.numComments == 1'> <span id='cm_total'>1</span> comment <b:else/> <span id='cm_total'><data:post.numComments/></span> comments </b:if> </b:if> </h4> <div id='cm_reply_css'></div> <div class='cm_pagenavi' id='cm_page'></div> <div id='cm_block'> <b:loop values='data:post.comments' var='comment'> <b:if cond='data:comment.isDeleted'> <b:else/> <div expr:id='data:comment.anchorName'> <div class='cm_wrap'> <a expr:name='data:comment.anchorName'/> <div class='cm_head'> <div class='cm_avatar'> <b:if cond='data:blog.enabledCommentProfileImages'> <data:comment.authorAvatarImage/> </b:if> </div> <div class='cm_reply'> <a expr:href='&quot;https://www.blogger.com/comment.g?blogID=2075431096052623527&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a> </div> </div> <div class='cm_entry'> <span class='cm_arrow'></span> <div class='cm_info'> <div class='cm_name'> <b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'> <data:comment.author/> </a> <b:else/> <b><data:comment.author/></b> </b:if> </div> <div class='cm_date'> <data:comment.timestamp/> <b:include data='comment' name='commentDeleteIcon'/> </div> <div class='clear'/> </div> <p><data:comment.body/></p> </div> </div> </div> </b:if> </b:loop>

</div> <div class='cm_pagenavi' id='cm_page_copy'></div> <b:if cond='data:post.embedCommentForm'> <b:if cond='data:post.allowNewComments'> <b:include data='post' name='comment-form'/> <b:else/> <data:post.noNewCommentsText/> </b:if> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </b:if> </b:if> </div>

8. Seterusnya adalah langkah akhir yang merumitkan sedikit. Kembali kepada script template anda. Dengan menggunakan keyboard, tekan "Ctrl+F" cari pula kod <b:includable id='comments' var='post'> Selepas menjumpai kod tersebut, delete kod-kod yang bermula selepas kod <b:includable id='comments' var='post'> hingga sebelum kod </b:includable> Contoh: <b:includable id='comments' var='post'> <div class='comments' id='comments'> <a name='comments'/> <b:if cond='data:post.allowComments'> <h4> <b:if cond='data:post.numComments &gt; 0'> <b:if cond='data:post.numComments == 1'> <span id='cm_total'>1</span> comment <b:else/> <span id='cm_total'><data:post.numComments/></span> comments </b:if> </b:if> </h4> ------------ Sebahagian daripada kod yang perlu di delete ------------------<b:include data='post' name='comment-form'/> <b:else/> <data:post.noNewCommentsText/> </b:if> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </b:if> </b:if> </div> </b:includable>

9. Kemudian, copy kod yang telah siap di edit pada notepad ( rujuk langkah ke 7) dan paste pada kod yang telah anda delete pada langkah ke 8 di atas.

<b:includable id='comments' var='post'> Paste kod yang siap di edit pada notepad di bahagian ini </b:includable>

10. Akhir sekali, klik PREVIEW. Jika tiada sebarang mesej error terpapar, klik Save. p/s: 1. Sila pastikan anda membuat backup pada script template sebelum membuat tutorial ini. 2. Pastikan setting Comment Location anda adalah Embedded (Lokasi Ulasan = Terbenam). 3. Jika avatar(gambar profile) comment tidak berada betul-betul di tengah kotak, sila cari kod css yang seperti ini dan delete. .avatar-image-container { margin: .2em 0 0; } #comments .avatar-image-container img {

border: 1px solid #eeeeee; } 4. Kepada sesiapa yang mempunyai masalah ataupun inginkan threaded comment seperti blog ini, sila ke facebook page saya di link ini: http://www.facebook.com/pages/MariBinaBlog/197414523674776

Ringankan blog dengan jQuery Lazy Load

Lazy Loader adalah plugin jQuery di mana efek lazy load akan menangguhkan proses loading bagi image yang terdapat pada blog. Efek Lazy load hanya akan berfungsi apabila page di scroll. Image selepas page yang di scroll akan terpapar dengan menggunakan efek jQuery Lazy Load. Untuk melihat Demo, sila klik di sini. Lazy Load membantu meringankan blog dengan mengurangkan tempoh masa proses loading page pada sesebuah blog terutama pada blog yang banyak memaparkan image gambar ataupun image yang bersaiz besar. Untuk memasang jQuery Lazy Load di blogspot, ikut beberapa langkah di bawah. Langkah 1 Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript. Copy dan paste kod di bawah pada content HTML/Javascript.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'></script> <script type='text/javascript' src='http://javscript-code.googlecode.com/files/jquery.lazyload.mini.js?ver=1.5.0'></script> <script type="text/javascript"> jQuery(document).ready(function($){ if (navigator.platform == "iPad") return; jQuery("img").lazyload({ effect:"fadeIn", placeholder: "http://3.bp.blogspot.com/_LZtXSNcp76A/THkEtEOZfrI/AAAAAAAABRo/IARVMD_8TwA/s1600/grey.gif" }); }); </script> Akhir, sekali, klik Save.

p/s: 1. Jika tiada sebarang efek berlaku selepas kod di Save, sila paste kod tersebut sebelum atau di atas kod </body> pada script template. 2. Jika tiada seberang perubahan selepas kod di paste di atas atau sebelum kod </body>, sila paste kod tersebut sebelum atau di atas kod </head>

Memasang button back to top versi dynamicdrive.com

Back to top button yang boleh anda lihat pada sisi kanan bawah (sila scroll ke bawah) blog ini memudahkan visitor untuk explore blog yang mempunyai layout yang panjang. Hanya perlu klik button tersebut, dan page akan scroll secara automatik ke atas. Untuk memasang button back to top ini, sila ikut beberapa langkah yang mudah dibawah. p/s: Sila save script template terlebih dahulu. Langkah 1 Log in blog => Dashboard => Layout => HTML/Javascript => Add A Gadget Langkah 2 Salin kod di bawah dan paste pada ruang content Add A Gadget (rujuk langkah 1) dan Save. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> <script src="http://dl.dropbox.com/u/1960768/black.js" type"text/javascript"></script> Akhir sekali, klik Preview. Jika tiada mesej Error terpapar, klik saja Save.

Buat tab menu dengan CSS Tab Designer

CSS Tab designer adalah software yang sangat mudah digunakan untuk membina sendiri tab menu yang berbentuk vertical atau horizontal.

Terdapat lebih daripada 60 jenis design tab button yang sangat menarik yang disediakan oleh highdots.com. Anda hanya perlu memilih design yang berseuaian dengan theme blog anda.

Cara buat flash banner dengan Aleoflash Software

Pada entri yang lepas,terdapat tutorial bagaimana untuk membina image, banner atau header beranimasi dengan Aleoflash(sila klik). Mungkin penerangan tentang Aleofalsh tersebut yang terlalu ringkas menyebabkan ada yang kurang faham. Jika anda masih kurang faham apa itu aleoflash, sila rujuk semula entri Cara mudah membina image, banner atau header beranimasi dengan software AleoFlash. Anda juga boleh download software Aleoflash pada link yang diberi.

Cara buat Flash Header dengan Aleoflash

Klik pada Panel Size and sound yang terdapat disebelah kiri.Ubah nilai width dan height mengikut saiz header blog anda. Contohnya width: 800px dan height: 600px (saizheader untuk template classic minima). Pada background sound, untick pada kotak Play background sound in Flash movie jika tidak mahukan ada efek bunyi. Pada bagahian Options pula, untick kotak Generate compressed Flash movie dan Add preloader to Flash movie.

Panel Background= Anda boleh memilih sama ada menggunakan transparent background ataupun Solid color ataupun background berstail dengan Gradient color. Anda juga boleh masukkan image atau flash dibahagian Background image and flash movie.

Panel Effect = Anda boleh memilih efek yang dirasakan bersesuaian untuk background. Terdpat 37 jenis efek untuk background yang boleh di cuba. Bahagian Key dan Value juga boleh diedit mengikut kesesuaian.

Panel Text and image= anda boleh masukkan teks yang sesuai ataupun tajuk blog. Untuk mengubah font,klik pada tab Edit font style dan kemudian klik pada icon Edit selected font style. Anda boeh memilih jenis font, saiz, style dan warna. Anda juga boleh memasukkan image yang sesuai dengan klik pada Add image. Untuk memasang efek pada teks, klik pada tab Effect dan anda boleh memilih sehingga 57 jenis efek. Jika anda mahu menambah lagi image atau teks, hanya klik pada Add image atau Add text. Untuk mengubah kedudukan teks atau tajuk blog, anda boleh mengubahnya pada tab Positition.Untuk lebih mudah, gunakan Use relative position. Edit nilai pada bahagian Offset untuk vertical dan horizontal sehingga anda berpuas hati dengan kedudukan teks tersebut. Pada tab Web Link, anda boleh masukkan URL pada teks tersebut. Tick pada Open web page when user click on the text. MAsukkan URL blog anda pada ruang URL address Jika anda ingin mengubah speed atau delay teks tersebut, ada boleh mengubahnya pada bahagian Display as dynamic text. Jika inginkan teks tersebuat berkeadaan statik tanpa efek, tick pada Display as static text on background.

Panel Publish= Setelah selesai dan berpuas hati dengan header tersebut, klik pada Panel Publish dan seterusnya klik butang Publish. Pada pop up window yang muncul, tick pada Publish as Flash movie(.swf). seterusnya klik Ok. Namakan dan Save file tersebut.

Cara upload dan masukkan file swf (flash) pada blog

Pada entri sebelum ini, ada satu info tentang bagaimana cara membina flash yang mudah dengan menggunakan software Aleoflash. Bagi anda yang sudah berjaya membina animasi flash tersebut, mungkin terdapat sedikit kesulitan tentang cara untuk memasukkan animasi flash tersebut ke dalam blog. Untuk masukkan file swf pada blog, file tersebut hendaklah terlebih dahulu di upload pada file hosting. Swfcabin.com adalah satu site hosting percuma untuk file yang berformat swf. Apa yang perlu anda lakukan adalah ikut beberapa langkah di bawah. Langkah 1

Namakan file yang hendak di upload pada ruang Title. Seterusnya, klik pada Browse dan klik Open pada file swf yang hendak di upload. Kemudian, klik pula pada Publish Swf. Langkah 2 Salin URL pada Navigation toolbar. Contoh: http://www.swfcabin.com/open/1263452734 Edit URL dengan menggantikan open kepada swf-files dan menambah .swf selepas angka. Contoh URL yang di edit: http://www.swfcabin.com/swf-files/1263452734.swf Langkah 3 Salin kod biru di bawah dan paste pada notepad. Gantikan teks masukkan URL file swf di sini dengan URL yang telah siap di edit (rujuk langkah 2). Sila edit angka pada width dan height mengikut kesesuaian size paparan flash tersebut. <embed src="masukkan URL file swf disini" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed>

Langkah 4 Salin kod yang telah siap di edit( rujuk langkah 3) dan paste pada post ataupun sidebar.

Cara pasang Facebook Like Button di Blogspot

Untuk memasang Facebook Like Button pada setiap post, hanya ikut beberapa langkah yang mudah di bawah. p/s: Sila save script template anda terlebih dahulu.

Langkah 1 Log in blog = Dashboard => Design => Edit HTML. Seterusnya, tick pada kotak Expand Widget Templates. Langkah 2 Dengan menggunakan keyboard, tekan kekunci F3. Seterusnya taip atau paste kod <div class='post-header-line-1'/> pada kotak Find dan seterusnya, klik Find. Jika kod tersebut tiada, anda boleh menggantikannya kod <div class='post-header-line-1'> atau <data:post.body/> Langkah 3 Salin kod biru di bawah dan paste kod tersebut di bawah atau selepas kod <div class='post-header-line-1'/> atau <div class='post-header-line-1'> atau <data:post.body/> p/s: Anda boleh menukar saiz button dengan mengedit width dan height pada kod di bawah.

<iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=standard&amp;showfaces=true&amp;width=450&amp;height=80&amp;action=like&amp;colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height:80px'/> Akhir sekali klik Preview, dan jika tiada mesej Error yang terpapar, klik saja Save.

P/s: Jika anda ingin mengubah kedudukan button tersebut, anda boleh gunakan kod ini untuk memaparkan button pada sebelah kanan atau kiri <div style='float:right;padding:4px;'> Masukkan kod Facebook Like Button di sini </div> Gantikan right kepada left pada float jika anda ingin memaparkan button pada sebelah kiri Contoh: <div style='float:left;padding:4px;'> <iframe allowTransparency='true' expr:src='"http://www.facebook.com/plugins/like.php?href=" + data:post.url + "&amp;layout=standard&amp;showfaces=true&amp;width=450&amp;height=80&amp;action=like&amp;colorscheme=light"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px; height::80px'/> </div>

Cara pasang Image opacity effect

Image opacity effect adalah suatu kesan atau efek yang berlaku apabila cursor mouse diletakkan di atas sesuatu image yang terdapat pada bahagian post. Terdapat dua efek yang boleh anda pilih untuk digunakan pada blog. Untuk Image opacity effect 1, image menjadi pudar apabila cursor mouse diletakkan ke atas gambar. Untuk demo, anda boleh lihat efeknya pada gambar di atas. Untuk Image opacity effect 2, kesan adalah sebaliknya, iaitu image asal yang pudar bertukar terang dan jelas apabila cursor mouse diletak di atas image tersebut. Untuk demo, anda boleh lihat di sini. Cara untuk memasang Image opacity effect ini sangat mudah. Hanya ikut beberapa langkah di bawah. Langkah 1 Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript Langkah 2 Copy salah satu kod di bawahdan paste pada content HTML/Javascript.

Kod Image opacity effect 1 <style> /* ----- Image opacity effect 1 ----- */ .post a img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; -khtml-opacity: 1.0; } .post a:hover img { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5; } </style> Kod Image opacity effect 2 <style> /* ----- Image opacity effect 2 ----- */ .post a img { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; -khtml-opacity: 0.5; } .post a:hover img { filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0; -khtml-opacity: 1.0; } </style> Akhir sekali, klik Save.

p/s:

Jika anda mahu meletak kod tersebut pada script template, sila paste kod tersebut di atas kod ]]></b:skin>

Cara pasang jump link Klik untuk komen di blogspot

Jump link Klik untuk komen seperti yang boleh di lihat di bahagian bawah post ini sangat sesuai untuk di pasang pada blog yang mempunyai jumlah komen yang banyak ataupun jika kita ingin memudahkan pembaca untuk membuat komen tanpa perlu membuat scroll yang panjang. Anda juga boleh menggantikan teks Klik untuk komen kepada icon seperti yang boleh di lihat pada blog Liyanaa.com dan Rojakstory.blogspot.com Untuk memasang jump link Klik untuk komen, sila ikut beberapa langkah mudah di bawah. p/s: Save script template anda terlebih dahulu. Langkah 1 Login Blogger Dashboard --> Design --> Edit HTML. Seterusnya tick pada Expand Widget Templates. Langkah 2 Pada script template, cari kod <b:if cond='data:post.commentPagingRequired'> Langkah 3 Salin kod di bawah dan kemudian, paste di atas atau sebelum kod <b:if cond='data:post.commentPagingRequired'> (rujuk langkah 2) <div style='margin: -30px 0px 0px 250px;'> <a href='#comment-form'><b>Klik untuk komen</b></a> </div> Contoh: <div style='margin: -30px 0px 0px 250px;'> <a href='#comment-form'><b>Klik untuk komen</b></a> </div> <b:if cond='data:post.commentPagingRequired'> Akhir sekali, klik Save.

p/s:
1. Anda boleh menggantikan teks Klik untuk komen kepada icon, dengan menggantikan kod <b>Klik untuk komen</b> kepada <img src='masukkan URL icon disini'/> Contoh:

<div style='margin: -30px 0px 0px 250px;'> <a href='#comment-form'><img src='masukkan URL icon disini'/></a> </div> 2. Untuk mengubah kedudukan, edit pada margin: -30px 0px 0px 250px;

Cara pasang widget Recent comments dengan avatar (image profile) di Blogspot

Recent comments with avatar (image profile) seperti yang boleh anda lihat pada sidebar blog saya adalah widget yang sangat menarik. Widget tersebut kini memaparkan gambar avatar pemberi komen beserta dengan komen ringkas pada post yang berkaitan dalam Blogger. Untuk memasang widget recent comment dengan avatar ini pada blog anda, sila ikut beberapa langkah di bawah. Langkah 1 Log in blog > Dashboard > Layout > Add A Gadget. Seterusnya klik pada HTML/Javascript. Langkah 2 Salin kod di bawah dan paste pada ruang Content HTML/Javascript (rujuk langkah 1). <style type="text/css"> #recentcomment { width:98%; margin-left:5px; } img.recentcomment-avatar { background:#fff; float:right; padding:2px; margin:2px -2px 0px 0px; height:30px; width:30px; border:solid #ddd 1px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0px 1px 0px rgba(0,0,0,0.3); -moz-box-shadow: 1px 0px 0px rgba(0,0,0,0.3); box-shadow: 0px 1px 0px rgba(0,0,0,0.3); } td div.recentcomment-content a,td div.recentcomment-content a:hover{ font-family: 'trebuchet ms'; font-size:1.00em!important; color:#2C2929; text-decoration:none; } div.recentcomment-content{ font-size:1.00em!important; text-decoration:none; line-height:1.45em; letter-spacing:0.03em; background: #fff; padding:4px; border:1px solid #ddd; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 0px 1px 0px rgba(0,0,0,0.3); -moz-box-shadow: 0px 1px 0px rgba(0,0,0,0.3); box-shadow: 0px 1px 0px rgba(0,0,0,0.3); } </style> <script type="text/javascript"> ava_mode = "all"; var cm_num = 5; var cm_desc = 13;

var homepage = "http://maribinablog.blogspot.com/"; var cm_ava = new Array(); cm_ava['openid'] = "http://3.bp.blogspot.com/-6kHTbPmPW6A/TuZpM4kzZCI/AAAAAAAAAbY/yNkCTBfl8IE/s1600/blogger.png"; cm_ava['livej'] = "http://3.bp.blogspot.com/-6kHTbPmPW6A/TuZpM4kzZCI/AAAAAAAAAbY/yNkCTBfl8IE/s1600/blogger.png"; cm_ava['wp'] = "http://3.bp.blogspot.com/-6kHTbPmPW6A/TuZpM4kzZCI/AAAAAAAAAbY/yNkCTBfl8IE/s1600/blogger.png"; cm_ava['typepad'] = "http://3.bp.blogspot.com/-6kHTbPmPW6A/TuZpM4kzZCI/AAAAAAAAAbY/yNkCTBfl8IE/s1600/blogger.png"; cm_ava['aim'] = "http://3.bp.blogspot.com/-6kHTbPmPW6A/TuZpM4kzZCI/AAAAAAAAAbY/yNkCTBfl8IE/s1600/blogger.png"; cm_ava['url'] = "http://1.bp.blogspot.com/-eUjiOVpSBmw/TuZpNJ0w8-I/AAAAAAAAAbk/MQCBeyTefdI/s1600/user.png"; cm_ava['anon'] = "http://1.bp.blogspot.com/-bCPKKy16aV4/TuZpM901nkI/AAAAAAAAAbQ/GEM1G_Nym_Y/s1600/anonymous.png"; </script> <script src="http://javscript-code.googlecode.com/files/recent-comment-avt.js" type="text/javascript"></script> Akhir sekali, klik Save. p/s: Jika kod yang telah di save tidak berfungsi, sila gunakan kod ini (sila klik)

Wsalam. Cuba guna kod yang ini. Paste dalam HTML/Javascript. Tak payah edit apa-apa. Terus save <style type="text/css"> .recent-comment{ margin-bottom:3px; padding-bottom:2px; background-color:#FFF; border:solid #ddd 1px } .recent-comment-ico{ height:26px; width:26px; background-color:#FFF; border:solid #ddd 1px; float:left; margin:2px 6px 0px 2px; padding:2px } .recent-comment-body{ padding:3px; font-size:11px } .recent-comment a,.recent-comment a:hover{ font-weight:bold; font-weight:11px } </style> <script src='http://javscript-code.googlecode.com/files/recentcommentavt.js' type='text/javascript'></script>

Cara pasang Sidebar Social Widget di Blogspot

Sidebar Social Widget ini adalah widget yang di bina untuk blog wordpress oleh Ariffshah. Widget ini menggabungkan Facebook page, Twitter, Google plus dan juga Rss yang di muatkan dalam satu widget. Ianya hanya menggabungkan beberapa kod javascript, HTML dan juga css. Untuk pengguna wordpress yang berminat memasang widget sidebar social ini di blog anda, sila ke tutorial asasnya di http://wp.tutsplus.com/ Bagi pengguna Blogger pula, saya telah berjaya memasukkan widget sidebar social seperti contoh yang boleh anda lihat di sidebar blog saya. Sedikit pengubahsuaian pada kod untuk Facebook page dan juga css untuk warna background. Bagi pengguna Blogger yang ingin mencuba widget Social sidebar ini di blog anda, bolehlah ikut beberapa langkah-langkah yang mudah di bawah.

Langkah 1 Dapatkan ID untuk Facebook page, Twitter dan juga RSS feed anda. Contoh: Facebook page: http://www.facebook.com/pages/MariBinaBlog/197414523674776 Twitter: https://twitter.com/Nescafeaisblog Feedburner: http://feeds.feedburner.com/maribinablog1 Langkah 2 Salin dan edit kod di bold dengan menggantikan dengan ID Facebook page, Twitter dan Feedburner dan juga nama blog anda. <style> #sidesocial{ border:0 solid #; } .sideg{ background:#00FFBF url(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/s320/gradient.png) repeat-x 0 100px!important; font-size:0.85em; color:#000; line-height:1px; border-top:1px solid #FFF; border-bottom:1px solid #EBEBEB; padding:5px 11px } .sideg span{ vertical-align:text-top; color:#333; margin:2px; } .sidetw{ background:#0DF url(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/s320/gradient.png) repeat-x 0 100px!important; line-height:1px; border-top:1px solid #FFF; border-bottom:1px solid #EBEBEB; padding:4px 11px; } .sidefb{ background:#82CDFC url(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/s320/gradient.png) repeat-x 0 100px!important; } .sidesub{ line-height:1px; background:#FFB86D url(http://3.bp.blogspot.com/_LZtXSNcp76A/TBJ9sMqebeI/AAAAAAAABGI/9LYh5N58KYw/s320/gradient.png) repeat-x 0 100px!important; border-top:1px solid #FFF; padding:3px 10px; } .sidesub span{ width:115px; } </style> <div id="sidesocial"> <div class="sidefb"> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FMariBinaBlog%2F197414523674776&amp;width=3 00&amp;height=183&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%2382CDFC&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:183px;" allowtransparency="true"></iframe> </div> <div class="sideg"> <div class="g-plusone" data-size="medium" data-href="http://maribinablog.blogspot.com"></div><span>Recommend on Google</span> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div> <div class="sidetw"> <a href="https://twitter.com/nescafeaisblog" class="twitter-follow-button">Follow @YOU</a> <script src="//platform.twitter.com/widgets.js" type="text/javascript"></script> </div> <div class="sidesub"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=maribinablog1', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input type="submit" value="Subscribe" /><span><input type="text" style="width: 165px; padding: 0px 0px 0px 0px; vertical-align: middle;

font-size: 0.85em; margin-top: -1px; margin-left: 15px;" name="Masukkan email" value=" Masukkan Email" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/><input type="hidden" value="maribinablog1" name="uri"/><input type="hidden" name="loc" value="en_US"/></span></form> </div> </div>

Langkah 3 Log in blog > Dashboard > layout > Add A gadget > HTML / Javascript Salin kod yang telah siap di edit pada langkah 2 dan paste pada content HTML/javascript. Seterusnya klik Save. p/s: Jika kotak Facebook terlalu besar atau kecil, anda boleh mengubahnya dengan mengedit nilai yang di bold dengan warna merah

Cara buat efek Zoom in pada image di bahagian blog post

Untuk membuat efek zoom in pada image atau gambar di bahagian posting seperti contoh yang boleh anda cuba pada gambar di atas (letak kursor mouse di atas gambar) hanya ikut beberapa langkah yang sangat mudah di bawah. Langkah 1 Log in blog => Dashboard => Template => Edit HTML => Proceed Langkag 2 Dengan menggunakan keyboard, tekan kekunci F3 atau Ctrl+F. Seterusnya taip atau paste kod ]]></b:skin> pada ruang Find dan kemudian tekan Enter. Langkah 3 Salin dan paste kod di bawah di atas atau sebelum kod ]]></b:skin> .post img { filter:alpha(opacity=60); /* Internet Explorer */ opacity:0.6; /* standard CSS3 */ -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; } .post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.3); -o-transform: scale(1.3); -webkit-transform: scale(1.3); } Contoh: .post img { filter:alpha(opacity=60); /* Internet Explorer */ opacity:0.6; /* standard CSS3 */ -o-transition: all 0.5s; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; }

.post img:hover { -o-transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transform: scale(1.3); -o-transform: scale(1.3); -webkit-transform: scale(1.3); } ]]></b:skin> Akhir sekali, klik Preview dan jika tiada mesej error, klik Save. p/s: Jika efek zoom in menjadi terlalu besar atau kecil, anda boleh mengubah saiz efek tersebut dengan menukar nilai 0.3s dan (1.3) kepada 0.5s dan (1.5)

Cara pasang Floating Share Button di Blogspot

Untuk memasang Floating Share Button pada sebelah kiri blog seperti yang boleh anda lihat pada blog ini (klik untuk demo), hanya ikut beberapa langkah yang mudah di bawah. Langkah 1 Login Blogger Dashboard --> Layout --> Add A Gadget --> HTML/Javascript. langkah 2 Copy dan paste kod di bawah pada content HTML/Javascript.

<!-- floating page sharers Start --> <style> #pageshare {position:fixed; bottom:17%; margin-left:-705px; float:left; -moz-border-radius:5px 0px 5px 0px; -webkit-border-bottom-left-radius:5px; -webkit-border-bottom-right-radius:0px; -webkit-border-top-left-radius:5px; -webkit-border-top-right-radius:0px; background-color:#ffffff;padding:0 0 2px 0;z-index:10;} #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;} .fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;} .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;} .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;} </style> <div id='pageshare' title="Share this"> <div class='sbutton' id='fb'> <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script> </div> <div class='sbutton' id='rt'> <script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script> </div> <div class='sbutton' id='digg' style='margin-left:3px;width:48px'> <script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script> <a class="DiggThisButton DiggMedium"></a> </div> <div class='sbutton' id='gplusone'> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script> <g:plusone size="tall"></g:plusone> </div></div>

p/s:
1.Untuk mengubah warna background, sila edit kod background-color:#ffffff; 2. Untuk mengubah kedudukan Floating Share Button tersebut, sila edit angka margin-left:-705px;

Cara buat efek shadow pada image dibahagian post blog

CSS shadow adalah salah satu cara termudah untuk membuat effect bayangan pada image atau gambar. Untuk membuat shadow image pada bahagian post, hanya ikut beberapa langkah yang mudah di bawah. 1. Log in dashboard--> Template --> Edit HTML --> Proceed. 2. Dengan menggunakan keyboard, tekan "Ctrl+F" cari kod .post img Contoh: .post img { background: () no-repeat right bottom; padding: 0px 10px 10px 5px; border: 0px; } 3. Seterusnya, salin kod css di bawah dan paste kod tersebut selepas atau di bawah kod .post img { -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); -moz-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); box-shadow: 2px 2px 6px rgba(0,0,0,0.6); Contoh: .post img { -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); -moz-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); box-shadow: 2px 2px 6px rgba(0,0,0,0.6); background: () no-repeat right bottom;

padding: 0px 10px 10px 5px; border: 0px; } 4. Akhir sekali, klik PREVIEW. Jika tiada sebarang mesej error terpapar, klik Save.

Jquery Sliding Login Panel di atas header blog

Untuk membina Jquery Sliding login panel di atas header blog, seperti yang boleh anda lihat di sini (Demo), sila ikut beberapa langkah di bawah. 1. Log in dashboard--> Template --> Edit HTML --> Proceed. 2. Dengan menggunakan keyboard, tekan "Ctrl+F" cari kod ]]></b:skin> 3. Copy dan paste kod css ini, di atas atau sebelum kod ]]></b:skin> #slide-panel{ background-color:#000; border-bottom:2px solid #838383; display:none;height:80px; margin:auto;padding-top:20px; } .slide{width:950px; margin:auto; } .btn-slide:link,.btn-slide:visited{ color:#fff; float:right; display:block; font-size:14px; font-weight:bold; height:28px; padding:3px 0 3px 0; line-height:28px; text-align:center; text-decoration:none; width:70px; font-family:Arial; background:#000; margin-top:-2px; -moz-border-radius:0px 5px 0px 5px; -webkit-border-bottom-left-radius:8px; -webkit-border-bottom-right-radius:8px; } .loginform{ width:950px; margin:0 auto; color:#999; font-family:Arial,Helvetica,sans-serif; } .formdetails{ color:#FFF; font-size:12px; padding:5px; } .formdetails input{ border:none;

padding:2px 5px; background-color:#EFEFEF; } .loginregister{ color:#999;padding:5px; } .loginregister a:link,.loginregister a:visited{ color:#90fff6; font-size:12px; } .loginregister a:hover{ color:#fff'; } .loginform h2{ padding:10px 10px 10px 0; font-size:18px; font-weight:normal; text-transform:uppercase; } .loginform ul li{ display:inline; } .loginform ul li a:link,.loginform ul li a:visited{ color:#FFF; font-size:12px; text-decoration:underline; } input#signIn{ color:#fff; background:url(https://lh4.googleusercontent.com/_U0QaeycS3vw/TZHtnbhNayI/AAAAAAAAAcY/o9eDhACl16M/btn_login.png) no-repeat; width:94px; height:25px; cursor:pointer; padding-bottom:5px; } input#Email,input#Passwd{ background:#414141;color:#fff; } input:focus#Email,input:focus#Passwd{ background:#545454; } 4. Seterusnya, dengan menggunakan keyboard, tekan "Ctrl+F" cari pula kod </head> 5. Copy dan paste kod ini, di bawah atau selepas kod </head> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){$(&quot;.btn-slide&quot;).click(function(){$(&quot;#slide-panel&quot;).slideToggle(&quot;slow&quot;);});}); </script> <div id='slide-panel'><div class='loginform'><div class='formdetails'> <form action='https://www.google.com/accounts/ServiceLogin?service=blogger&amp;continue=https%3A%2F%2Fwww.blogger.com%2Floginz%3Fd%3Dhttp%253A% 252F%252Fwww.blogger.com%252Fhome%26a%3DADD_SERVICE_FLAG&amp;passive=true&amp;alinsu=0&amp;aplinsu=0&amp;alwf=true&amp;ltmpl=start& amp;skipvpage=true&amp;rm=false&amp;showra=1&amp;fpui=2&amp;naui=8#s01' method='post'> <label for='log'>Username : </label><input id='Email' name='Email' size='20' type='text'/> <label for='pwd'>Password : </label><input id='Passwd' name='Passwd' size='20' type='password'/> <input id='signIn' name='signIn' type='submit' value='Masuk'/> <label for='rememberme'><input checked='checked' id='rememberme' name='rememberme' type='checkbox' value='forever'/>Ingatkan saya</label> </form></div> <div class='loginregister'> <a href='https://www.blogger.com/signup.g' target='_blank'>Daftar&#173;</a> | <a href='http://www.blogger.com/forgot.g' target='_blank'>Lupa kata laluan anda?</a> </div></div></div> <div class='slide'><a class='btn-slide' href='#'>Sign in </a></div>

6. Akhir sekali, klik PREVIEW. Jika tiada sebarang mesej error terpapar, klik Save. p/s: Untuk menukar warna background panel dan button, sila edit kod yang di highlightkan dengan warna merah.

Cara pasang Random Posts widget

Widget Random Post adalah widget yang memaparkan post secara rawak. Widget ini juga dapat meningkatkan bilangan page view bagi sesebuah blog. Anda boleh melihat Demo di bahagian bawah blog ini. (Random Posts). Untuk memasang widget Random Post di blog anda, sila ikut beberapa langkah di bawah. Langkah 1 Salin kod di bawah dan edit pada line yang di bold dengan warna merah. Gantikan nama-blog-anda dengan URL blog anda. Untuk mengubah bilangan paparan post pada widget tersebut, anda boleh mengubah nilai 5 kepada nilai yang anda inginkan. <style type="text/css"><!-.random_post_content{width:100%;} .random_post_content img {width:32px;height:32px;background-position: center;margin:7px;padding: 2px;border:#888 solid thin;} .random_post_content_item {border-top:#888 thin dashed;} .random_post_content_item table, .random_post_content_item tr, .random_post_content_item td {vertical-align: middle;} .random_post_content_item table {margin-bottom:2px;margin-top:3px;} .random_post_content_item:hover {background-color:#4A3829;} .random_post_title a{text-transform:uppercase;font-size:12px;text-decoration:none;font-weight:bold} .random_post_info a{font-size:11px;text-decoration:none;} .random_post_content_item:hover .random_post_title a{color:#FFFFCC;} .random_post_content_item:hover .random_post_info a{color:#888;} .random_post_content_item:hover .random_post_title a:hover{color:#FFCC00;} .random_post_content_item:hover .random_post_info a:hover{text-decoration:underline;} --></style> <div class="random_post_content" id="random_posts_id"></div> <script type="text/JavaScript"><!--

var Random_Max = 5; var Total_Posts_Number = 0; var Rand_Posts_Title = []; var Rand_Posts_Url = []; var Rand_Posts_Author = []; var Rand_Posts_Comment_Number = []; var Rand_Posts_Thumbnail = []; var Rand_Posts_Snippet = []; function Vbs_Random_Post(json){var entry;var re = /<\S[^>]*>/g;var str;var banner_begin_index;var banner_end_index;for (var i = 0; i < Random_Max; i++){entry = json.feed.entry[i];Rand_Posts_Title[i] = entry.title.$t;for (var k = 0; k < entry.link.length; k++){if (entry.link[k].rel == 'alternate'){Rand_Posts_Url[i] = entry.link[k].href;break;}}Rand_Posts_Author[i] = entry.author[0].name.$t;Rand_Posts_Comment_Number[i] = parseInt(entry.thr$total.$t);if ("content" in entry){Rand_Posts_Snippet[i] = entry.content.$t;}else if ("summary" in entry){Rand_Posts_Snippet[i] = entry.summary.$t;}else Rand_Posts_Snippet[i] = "";if (Rand_Posts_Snippet[i].search("bp.blogspot.com") != -1) Rand_Posts_Thumbnail[i] = entry.media$thumbnail.url; else {str = "src\u003d\"";banner_begin_index = Rand_Posts_Snippet[i].search(str);if (banner_begin_index == -1){Rand_Posts_Thumbnail[i] = "http://lh3.ggpht.com/_kck7-TEWMM/TSZtEyqlErI/AAAAAAAAAO0/cXY9tgbBnko/popular_blank_icon.jpg";}else{Rand_Posts_Thumbnail[i] = Rand_Posts_Snippet[i].substring(banner_begin_index + str.length);str = "\""; banner_end_index = Rand_Posts_Thumbnail[i].search(str);Rand_Posts_Thumbnail[i] = Rand_Posts_Thumbnail[i].substring(0, banner_end_index);}} Rand_Posts_Snippet[i] = Rand_Posts_Snippet[i].replace(re, "");if (Rand_Posts_Snippet[i].length > 140){Rand_Posts_Snippet[i] = Rand_Posts_Snippet[i].substring(0, 140) + '...';}}Install_Random_Posts();} function Install_Random_Posts(){var str_out = "";for (var i = 0; i < Random_Max; i++){str_out += '<div class="recent_post_content_item">';str_out += '<table width="0%" border="0">';str_out += '<tr>';str_out += '<td>';str_out += '<a href="' + Rand_Posts_Url[i] + '" title="' + Rand_Posts_Snippet[i] + '">';str_out += '<img src="' + Rand_Posts_Thumbnail[i] + '" width="32px" height="32px"/>';str_out += '</a>';str_out += '</td>';str_out += '<td>';str_out += '<div class="recent_post_title">';str_out += '<a href="' + Rand_Posts_Url[i] + '" title="' + Rand_Posts_Snippet[i] + '">';str_out += Rand_Posts_Title[i];str_out += '</a>';str_out += '</div>';str_out += '<div class="recent_post_info">';str_out += '<a href="' + Rand_Posts_Url[i] + '" title="' + Rand_Posts_Snippet[i] + '">';str_out += 'By ' + Rand_Posts_Author[i] + ' - ' +

Rand_Posts_Comment_Number[i] + ' comments';str_out += '</a>';str_out += '</div>';str_out += '</td>';str_out += '</tr>';str_out += '</table>';str_out += '</div>';}document.getElementById('random_posts_id').innerHTML = str_out;} function Vbs_Get_Post_Num(json){Total_Posts_Number = json.feed.openSearch$totalResults.$t;if (Total_Posts_Number <= Random_Max){var start_index = 1;Random_Max = Total_Posts_Number;}else{var start_index = 1 + Math.floor(Math.random() * (Total_Posts_Number - Random_Max)); }document.write('<script type="text/JavaScript" src="http://nama-blog-anda.blogspot.com/feeds/posts/default?start-index=' + start_index + '&max-results=' + Random_Max + '&orderby=published&alt=json-in-script&callback=Vbs_Random_Post"><\/script>');} --></script> <script type="text/JavaScript" src="http://nama-blog-anda.blogspot.com/feeds/posts/default?max-results=0&alt=json-in-script&callback=Vbs_Get_Post_Num"><!-- -></script>

Langkah 2 Salin kod yang telah siap di edit (rujuk langkah 1) dan kemudian paste kod tersebut pada HTML/Javascript dan save.

Membina hide Shout Box pada sisi kanan blog

Untuk membina fungsi auto hide kotak Shout Box pada sisi kanan blog, seperti yang boleh anda lihat di sini (klik), sila ikut beberapa langkah di bawah. Langkah 1 Log in blog => Dashboard => Layout => Add A Gadget. Seterusnya klik pada HTML/Javascript. Langkah 2 Salin kod biru di bawah dan paste pada notepad. Gantikan teks Masukkan kod Shout Box di sini dengan kod Shout box anda. <style type="text/css"> #gb{ position:fixed; top:50px; z-index:+1000; } * html #gb{position:relative;} .gbtab{ height:100px; width:30px; float:left; cursor:pointer; background:url('http://3.bp.blogspot.com/_LZtXSNcp76A/SzzN08B1K5I/AAAAAAAAA0U/QT4rY6-FhI8/s320/tabs.png') no-repeat; } .gbcontent{ float:left; border:2px solid #666666; background:#F5F5F5; padding:10px; } </style>

<script type="text/javascript"> function showHideGB(){ var gb = document.getElementById("gb"); var w = gb.offsetWidth; gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0); gb.opened = !gb.opened; } function moveGB(x0, xf){ var gb = document.getElementById("gb"); var dx = Math.abs(x0-xf) > 10 ? 5 : 1; var dir = xf>x0 ? 1 : -1; var x = x0 + dx * dir; gb.style.right = x.toString() + "px"; if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);} } </script> <div id="gb"> <div class="gbtab" onclick="showHideGB()"> </div> <div class="gbcontent"> Masukkan kod Shout Box di sini <div style="text-align:right"> <a href="javascript:showHideGB()"> [close] </a> </div> </div> </div> <script type="text/javascript"> var gb = document.getElementById("gb"); gb.style.right = (30-gb.offsetWidth).toString() + "px"; </script> Langkah 3 Salin kod yang telah siap di edit pada notepad tadi (rujuk langkah 2) dan paste pada Content HTML/Javascript (rujuk langkah 1). Akhir sekali klik Preview dan jika anda berpuas hati dengan hasilnya, klik saja Save.

Cara buat Jquery marquee banner di blogspot

Untuk membuat Jquery Marquee Banner, seperti yang boleh di lihat di sidebar blog ini, hanya ikut langkah di bawah. Untuk melihat efeknya, letakkan kursor mouse di atas image. Langkah 1 Salin dan edit kod di bawah dengan menggantikan http://URL BLOG disini/ dengan URL blog dan masukkan URL image disini dengan URL image. <script type="text/javascript" src="https://sites.google.com/site/jquery9/crawler.js"> /* Text and/or Image Crawler Script 2009 John Davenport Scheuer as first seen in http://www.dynamicdrive.com/forums/ username: jscheuer1 This Notice Must Remain for Legal Use */ </script> <script type="text/javascript"> marqueeInit({ uniqueid: 'image-marquee', style: { 'padding': '2px', 'width': '100%', 'height': 'auto' }, inc: 9, //speed - pixel increment for each iteration of this marquee's movement mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false) moveatleast: 4, neutral: 150, savedirection: false }); </script>

<div class="marquee" id="image-marquee"> <a href="http://URL BLOG disini/"> <img src="masukkan URL image disini" /> </a> <a href="http://URL BLOG disini/"> <img src="masukkan URL image disini" /> </a> <a href="http://URL BLOG disini/"> <img src="masukkan URL image disini" /> </a> <a href="http://URL BLOG disini/"> <img src="masukkan URL image disini" /> </a> <a href="http://URL BLOG disini/"> <img src="masukkan URL image disini" /> </a> </div> Langkah 2 Log in blog => Dashboard => Design => Add A Gadget => HTML/Javascript Paste kod yang telah siap di edit (rujuk langkah 1) pada ruangan Content dan Save.

http://www.dynamicdrive.com/dynamicindex2/crawler/index.htm

Tingkatkan traffic search engine dengan costum title meta tag

Default setting yang di buat blogger.com pada title meta tag yang terdapat pada script template anda sebenarnya kurang mesra kepada google search engine. Ini kerana, title meta tag tersebut akan memaparkan nama blog terlebih dahulu dan kemudian di ikuti dengan tajuk entri atau artikel. Di bawah ini adalah contoh title meta tag yang terdapat pada blog anda. <title><data:blog.pagetitle/></title> Untuk menjadikan blog anda mesra dengan google search engine, title meta tag yang terbaik adalah title meta tag yang akan memaparkan tajuk entri atau artikel terlebih dahulu dan di ikuti dengan nama blog. Apa yang perlu anda lakukan adalah menggantikan default title tag kepada title meta tag yang lebih mesra dengan google search engine. Anda boleh lihat costum title meta tag tersebut di bawah. <b:if cond='data:blog.pageType == "item"'> <title><data:blog.pageName/> | <data:blog.title/></title> <b:else/> <title><data:blog.pageTitle/></title> </b:if> Untuk menggantikan default title tag kepada costum title meta tag, hanya perlu ikut beberapa langkah yang mudah di bawah. Langkah 1 Log in blog => Dashboard => Design => Edit HTML. Seterusnya klik pada Expand Widget Templates. Langkah 2 Dengan menggunakan keyboard, tekan kekunci Ctrl + F. Seterusnya taip atau paste kod <title><data:blog.pagetitle/></title> pada ruang Find dan kemudian, tekan kekunci Enter. Langkah 3 Salin kod berwarna merah di bawah dan paste (gantikan) pada kod <title><data:blog.pagetitle/></title> <b:if cond='data:blog.pageType == "item"'> <title><data:blog.pageName/> | <data:blog.title/></title> <b:else/> <title><data:blog.pageTitle/></title> </b:if> Akhir sekali, klik Preview dan jika tiada mesej Error terpapar, klik saja Save.

Cara pasang efek spinning pada comment avatar

Untuk memasang spinning effect pada picture Avatar dibahagian komen seperti yang boleh anda lihat pada komen blog ini, Hanya ikut beberapa langkah yang mudah di bawah. p/s: Effect akan befungsi apabila kursor mouse di letak pada image avatar tersebut. Langkah 1 Login Blogger Dashboard --> Design --> Add A Gadget --> HTML/Javascript. langkah 2 Copy dan paste kod di bawah pada content HTML/Javascript.

<style type="text/css"> .avatar-image-container img, comments .avatar-image-container img { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; </style> <script src="http://mootools-code.googlecode.com/files/mootools-1.3.2.js"></script> <script> window.addEvent("domready",function() { // "Globals" - Will make things compress mo-betta var $random = function(x) { return Math.random() * x; }; var availableWidth = 0, availableHeight = 0; var cssPrefix = false; switch(Browser.name) { case "safari":cssPrefix = "webkit";break; case "chrome":cssPrefix = "webkit";break; case "firefox":cssPrefix = "moz";break; case "opera":cssPrefix = "o";break; } // The Icons var icons = $$(".avatar-image-container img, comments .avatar-image-container img "); // Apply opacity var zIndex = 1000; // Randomize each link icons.each(function(element,index) { var startDeg =(360); var resetPlace = function() { element.fade(0.4).setStyle("-" + cssPrefix + "-transform","rotate(" + startDeg + "deg)"); } element.set("style","top:" + $random(availableHeight) + "px; left:" + $random(availableWidth) + "px; z-index:" + zIndex); resetPlace();

element.addEvents({ mouseenter: function() { element.fade(1).setStyle("z-index",++zIndex).setStyle("-" + cssPrefix + "-transform","rotate(0deg)");}, mouseleave: resetPlace}); }); }); </script> Akihr sekali, klik Save p/s: View terbaik effect ini dengan menggunakan Google Chrome

cara pasang animated label cloud di blogspot

Untuk memasang label cloud animasi pada sidebar seperti yang boleh anda lihat pada gambar yang di tunjukkan di atas, anda hanya perlu ikut beberapa langkah yang di tunjukkan di bawah. Save script template anda terlebih dahulu. Langkah 1 Log in blog => Dashboard => Design => Edit HTML. Langkah 2 Dengan menggunakan keyboard, taip atau paste kod <b:section class='sidebar' id='sidebar' preferred='yes'> atau <b:section-contents id='sidebar-right-1'>(untuk Template Designer)pada ruang Find. Seterusnya, tekan kekunci Enter. Langkah 3 Salin kod di bawah dan paste selepas atau di bawah kod <b:section class='sidebar' id='sidebar' preferred='yes'> atau <b:section-contents id='sidebar-right1'>(untuk Template Designer)(rujuk langkah 2) <b:widget id='Label99' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <center> &lt;object type="application/x-shockwave-flash" data="https://sites.google.com/site/javascript10/tagcloud.swf" width="100%" height="200" allowscriptaccess="always" &gt; &lt;param name="movie" value="https://sites.google.com/site/javascript10/tagcloud.swf" /&gt; &lt;param name="bgcolor" value="#ffffff" /&gt; &lt;param name="flashvars" value="tcolor=0x000000&amp;mode=tags&amp;distr=true&amp;tspeed=100&amp;tagcloud=&lt;tags&gt; <b:loop values='data:labels' var='label'> <a expr:dir='data:blog.languageDirection' expr:href='data:label.url' style='11'><data:label.name/></a> </b:loop> &lt;/tags&gt;" /&gt; </center> </div> <b:include name='quickedit'/> </b:includable> </b:widget> Akhir sekali klik Preview dan jika tiada mesej Error yang terpapar, klik saja Save.

p/s:
1. Untuk menukar warna background, edit kod #ffffff yang di bold dengan warna pilihan anda. Contoh: #000000 (warna hitam) 2. Untuk menukar warna font,edit kod 000000 yang di bold dengan warna pilihan anda. Contoh: ffffff (warna putih) Untuk mendapatkan kod warna sila klik di sini

Dalam script. Kalau nak edit kat bahagian CSS. Contoh macam ni: body { background:#000;

background-position: center;

Edit yang #000; Masukkan kod warna pada 000 Contoh: body { background:#CCCCCC; background-position: center;

Cara buat simple zoom in image di blogspot

Untuk membuat simple zoom in seperti contoh yang boleh anda cuba pada gambar di atas (letak kursor mouse di atas gambar) hanya ikut beberapa langkah yang sangat mudah di bawah. Langkah 1 Log in blog => Dashboard => Design => Edit HTML Langkag 2 Dengan menggunakan keyboard, tekan kekunci F3 atau Ctrl+F. Seterusnya taip atau paste kod ]]>skin> atau kod ]]></b:skin> pada ruang Find dan kemudian tekan Enter. Langkah 3 Salin dan paste kod di bawah di atas atau sebelum kod ]]>skin> atau ]]></b:skin> .post a:hover img { width:500px; height:400px; float:middle; } Contoh: .post a:hover img { width:500px; height:400px; float:middle; } ]]>skin> Akhir sekali, klik Preview dan jika tiada mesej error, klik Save. p/s: Jika efek zoom in menjadi terlalu besar atau kecil, anda boleh mengubah saiz zoom in tersebut dengan menukar angka pada width: 500px dan height: 400px. Contoh: width:550px; height:450px; float:middle;

Cara mudah tukar favicon di blogspot

Terdapat satu cara yang paling mudah jika anda ingin menukar icon favicon blog. Contoh icon favicon yang telah di tukar tersebut boleh anda lihat pada gambar yang di tunjukkan di atas. Untuk menukar ikon tersebut, sila ikut beberapa langkah yang di tunjukkan di bawah. Langkah 1 Bina satu image yang bersaiz 50px x 50px. Anda juga boleh menggunakan gambar muka anda sendiri jika perlu. Langkah 2 Upload image tersebut pada file hosting. Anda juga boleh upload image tersebut pada post dan klik Save. Seterusnya, salin URL image tersebut. Bagi anda yang upload image tersebut pada post, URL yang di highlightkan pada contoh gambar di bawah adalah URL bagi image yang di upload itu.

Langkah 3 Paste URL image( rujuk langkah 2) dan paste pada teks Masukkan URL image di sini pada kod berwarna biru di bawah. <link href='Masukkan URL image di sini' rel='shortcut icon' type='image/x-icon'/> Contoh kod yang telah di edit: <link href='http://3.bp.blogspot.com/_LZtXSNcp76A/S3j7-N2gKMI/AAAAAAAAA7U/-jpaq7_j2No/s320/favicon.jpg' rel='shortcut icon' type='image/x-icon'/> Langkah 4 Log in blog => Dashboard => Design => Edit HTML. Langkah 5 Dengan menggunakan keyboard, tekan kekunci Ctrl + F dan taip atau paste kod ]]></b:skin> pada ruang Find. Seterusnya tekan kekunci Enter. Langkah 6 Salin kod yang telah siap di edit tadi( rujuk langkah 3) dan paste kod tersebut di bawah atau selepas kod ]]></b:skin> Akhir sekali, klik Preview dan jika tiada mesej Error yang terpapar, klik saja Save.