Salam perkenalan dan salam hormat buat pembaca dan pengunjung Syoknyerblogging.blogspot.com. Terima kasih kerana sudi membaca blog ini sehinggalah ke module 16. Untuk module ke 16 ini sy ingin berkongsi sedikit tips untuk melajukan loading blog anda. Terlebih dahulu, cuba timbang berat blog anda disini http://syoknyerblogging.blogspot.com/2010/11/timbang-kelajuan-blog-anda.html. Jika berat blog anda melebihi 100kbps maka ia termasuklah didalam golongan overweight. :D.

1 Jangan paparkan terlalu byk post pada halaman utama. Cdgn maximum adalah 5. Untuk menukar jumlah post yang dipaparkan dalam satu page pergi ke Dashboard > Settings > Formatting.

2 Kurangkan size gambar. Gambar header,widget,footer,posting dan sebagainya. Anda boleh mencuba Image Optimizer disini. http://www.imageoptimizer.net/

3 Buang javascript yang tdk diperlukan. Semakin byk javascript semakin bertambah berat blog anda.

4 Padatkan Css yang digunakan didalam blog. Buang Css yang xdiperlukan. rujuk sini untuk compress css. http://syoknyerblogging.blogspot.com/2010/11/module-6-tambahkan-kelajuan-blog.html.

5. Jangan display terlalu byk iklan.

Ini sahaja tips sy untuk lajukan loading blog. Jika ada penambahan silalah tinggalkan komen anda disini. (^^,)

Sebelum ini sy telah postkan bagaimana hendak membuat static page pada blogspot. Jika anda menggunakan coding auto readmore disini, anda tidak perlu untuk mengubahnya. Terdapat beberapa user blogger yang menghadapi masaalah ini pada template yang mereka gunakan. Oleh itu, sy akan berkongsi cara untuk membuang auto readmore pada static page.

1 Pergi ke Dashboard > Design > Edit Html

2 Cari koding dibawah

<div class='post-body'>
<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink'  style='float:right;padding-top:20px;'><a  expr:href='data:post.url'> read more  "<data:post.title/>"</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Masukkan koding yang sy tandakan merah


<div class='post-body'>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Untuk post kali ini sy akan berkongsi cara untuk membuat static page pada blogspot. Apakah bezanya static page dengan posting yang biasa? Posting biasa akan keluar di muka hadapan dan akan bercampur dengan posting2 yang lain. Static page adalah page keseorangan bermaksud page yang tidak bercampur dengan page lain. Agak sukar untuk sy jelaskan. Anda cuba dan anda akan faham apa maksud sy.

Untuk membuat static page senang sahaja. Features ini mmg sudah disediakan oleh blogger setelah mendapat request yang begitu banyak daripada pengguna.

1 Pegi ke Dashboard > New Post > Edit Pages. Klik pada new page

2 Isikan apa yang anda ingin letakkan pada page tersebut.

3 Selepas siap publish, seterusnya letakkan link ke page tersebut. Anda boleh memilih untuk
meletakkan sendiri didalam menu atau menggunakan widget page yang disediakan blogger.

4 Seterusnya Design > Page Elements kemudian Add a Gadget.

5 Pilih pages untuk membuat butang ke static page anda.



6 Anda boleh memilih setting yang diinginkan kemudian tekan save.

7 Selamat mencuba (^^,)

Anda mungkin juga berminat Membuang Auto Readmore pada static page

Untuk post kali ini sy telah membuat satu senarai free chatbox dan Shoutbox yang boleh digunakan untuk blog anda. banyak lagi servis yang wujud di internet tetapi hanya ini yang dpt sy senaraikan. Jika ada pertambahan bolehlah komen di post ini (^^,).

1) Shoutmix
2) Cbox
3) Sbox
4) Yellbox
5) Free Shoutbox
6) iShoutbox
7) Shoutjax
8) Shootbox
9) Chatango
10) Blom

Module 14: Cara letak lagu dalam blog. Untuk posting kali ini sy akan berkongsi cara untuk masukkan lagu kedalam blog anda. Terdapat 3 pilihan untuk pembaca Syoknyerblogging.


Apa bende plak fileden 2? Fileden 2 adalah online storage system dimana anda boleh simpan file dan boleh juga berkongsi dengan rakan2 anda. Nk guna hosting lain pun boleh. Tp yang boleh direct download sahaja. Mirror seperti rapidshare,megaupload dan sebagainya tidak boleh.

Bagaimana caranya 2?

1 Layari http://www.fileden.com/ dan upload file anda kat sana. Hanya ahli dpt upload file, jika tiada akaun kenelah reg dulu.

2 Dapatkan url file mp3 anda td. Ingat, fileden hanya memberi 1GB storage dan 5GB bandwidth sahaja untuk free user.

<object data="http://judahhimango.com/FlashAudioPlayer/player.swf" width="290" height="24" id="audioplayer1" type="application/x-shockwave-flash"> <param name="movie" value="http://judahhimango.com/FlashAudioPlayer/player.swf">
<param name="FlashVars" value="playerID=1&amp;soundFile=http://www.fileden.com/files/2010/12/2/3029215//EzadLazim-BertemuCintaku.mp3">
</object> 

3 Copy coding diatas dan letakkn pada kotak widget anda. Dashboard > Design > Page Elements. Gantikan url http://www.fileden.com/files/2010/12/2/3029215//EzadLazim-BertemuCintaku.mp3 dengan url lagu anda. Demo yang sy tunjukkan diatas adalah lagu Ezad Lazim - Bertemu Cintaku. Sy mmg jiwang skit. :D


Cara 2: Upload File kedalam Aimini.net

1 Jika anda belum menjadi ahli aimini.net anda hendaklah terlebih dahulu mendaftar sbg ahli. Percuma Sahaja. http://www.aimini.net/

2 Searchkan lagu yang anda inginkan pada kotak search yang disediakan. Ini untuk menjmatkan masa mengupload. Jika tiada, anda uploadlah lagu yang anda inginkan

3) Copy koding lagu yang anda jumpa atau upload. Dimana codingnya? berada dibawah kotak lagu, bahagian embed.


4 Pastekan coding dimana anda ingin letakkan lagu. Di posting ataupun di kotak widget

<object width="380" height="120"><param name="wmode" value="transparent"><param name="movie" value="http://f.a.h.t.aimini.net/player/mp3/?file=http://f.a.h.t.aimini.net/play/?fid=tHafFeAuc44CdkdiLAxl&auto=yes&repeat=yes"><embed src="http://f.a.h.t.aimini.net/player/mp3/?file=http://f.a.h.t.aimini.net/play/?fid=tHafFeAuc44CdkdiLAxl&auto=yes&repeat=yes" width="380" height="120" type="application/x-shockwave-flash"></embed></object>

5) Untuk play automatik tukarkan auto menjadi autoplay. Untuk menukarkan size anda boleh edit bahagian width untuk kelebaran dan height untuk ketinggian.


Layari http://fullmusik.co.cc/ dan cari lagu pilihan anda. Copy dan pastekan koding didalam blog anda.


Selamat mencuba. (^^,)

Untuk module ke 13 ini sy ingin berkongsi cara membuat breadcrumb pada blogspot. Apakah itu breadcrumb?. Breadcrumb umpama peta yang menunjukkan arah dimana pengguna berada sekarang atau nk lebih moden umpama GPS :D. Manusia mempunyai ingatan jangka pendek, breadscumb ini akan membantu pembaca mengetahui lokasi mereka berada sekarang. Tapi apa kaitannya breadcrumb dgn SEO?.

Contoh Breadcrumb Home>>Label>>Membuat Breadcrumb


1 Pergi kepada Dashboard > Design > Edit HTML
2 Cari coding dibawah

<b:include data='top' name='status-message'/>

3 Gantikan koding tersebut dengan koding dibawah

<b:include data='top' name='status-message'/>
<b:include data='posts' name='breadcrumb'/>

4 Sekarang cari <b:includable id='main' var='top'>
5. Gantikan koding tersebut dengan koding dibawah

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
»Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>

6 Cari koding ]]></b:skin>
7 Copy dan Paste koding dibawah sebelum ]]></b:skin>

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

Post kali ini sy akan berkongsi cara untuk meletakkan tanda tangan dibawah posting anda. Mungkin ada dikalangan pembaca tertanya2 bagaimana penulis blog meletakkan tanda tangan pada blog mereka. Untuk tutorial kali ini, kita akan menggunakan servis percuma daripada MyLive Signature. Sy akan bahagikan dua iaitu untuk penulis keseorangan dan byk penulis didalam satu blog.
Terlebih dahulu sila membuat signature anda di MyLive Signature.


Tekan "Click Here to Start" dan ikuti langkah2 di web tersebut. Selepas siap, tekan "Want to use this signature?"



Pilih generate Html Code. Dapatkan koding signature anda. Anda akan dpt coding seperti dibawah

<a href="http://www.mylivesignature.com" target="_blank">
<img src="http://signatures.mylivesignature.com/54488/369/6F53071F5567C789FA335DB3BA234DFB.png" 
style="border: 0 !important; background: transparent;"/></a>

Ambil lokasi image sahaja. Lokasi image akan berada didalam <img src="ini adalah lokasi image">

http://signatures.mylivesignature.com/54488/369/6F53071F5567C789FA335DB3BA234DFB.png

Seterusnya masuk kedalam akaun blogger anda. Dashboard > Design > Edit HTML. Cari koding

<div class='post-footer-line post-footer-line-1'>

jika tiada cuba

<p class='post-footer-line post-footer-line-1'>

atau

 <data:post.body/>

Untuk Single Author

1 Copy dan paste coding dibawah selepas koding yang dicari td.

<img src='url_of_your_signature_image' style='border:0px;'/>

2 Gantikan url_of_your_signature_image dengan lokasi signature td.


Untuk Multiple Author

1) Copy dan Paste koding dibawah selepas koding yang dicari td.

 <b:if cond='data:post.author == &quot;Author1Name&quot;'>
<img src='url_of_author1_signature_image' style='border:0px;'/>
</b:if>
<b:if cond='data:post.author == &quot;Author2Name&quot;'>
<img src='url_of_author2_signature_image' style='border:0px;'/>
</b:if>

Tukarkan kawasan yang diboldkan dengan nama author dan lokasi signature.


Save kan template anda dan lihat hasilnya. Semoga Berjaya (^^,)

Untuk Post Kali Ini Sy Akan Berkongsi Cara Untuk Membuat Auto Readmore pada blogspot. Dengan mengenakan coding ini pada blogspot, semua post anda akan automatic membuat auto readmore tidak kira untuk post baru ataupun lama. Untuk module sebelumnya sy telah berkongsi cara membuat Readmore pada posting. Untuk membuat auto readmore pastikan anda telah membuang semua readmore effect yang dikenakan pada post2 sebelum ini.

1 Pergi Dashboard > Design > Edit HTML.
2 Back up template.
3 Klik "Expand Widget" check box.
4 Cari coding </head>. (Ctrl + F untuk memudahkan perncarian)
5 Letak coding Read More dibawah selepas </head>

<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail
summary_noimg = 430; //summary length when no image
summary_img = 340; //summary length when with image
img_thumb_height = 200;
img_thumb_width = 200;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){ 
 if(strx.indexOf("<")!=-1)
 {
  var s = strx.split("<"); 
  for(var i=0;i<s.length;i++){ 
   if(s[i].indexOf(">")!=-1){ 
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
   } 
  } 
  strx =  s.join(""); 
 }
 chop = (chop < strx.length-1) ? chop : strx.length-2; 
 while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
 strx = strx.substring(0,chop-1); 
 return strx+'...'; 
}

function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
 if(img.length>=1) { 
  imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
  summ = summary_img;
 }
 }
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script End -->

6. Selepas itu cari koding <data:post.body/>
7 Gantikan coding tersebut dengan coding dibawah

<!-- Auto read more Start -->
<!-- http://www.syoknyerblogging.blogspot.com -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>
<!-- Auto read more End -->

8. Klik preview, Jika tiada sebarang masalah,tekan save.
Menukar effect

Untuk menukar effect auto readmore sila tukar pada bahagian berikut

1. thumbnail_mode – tukarkan = "no" jika mahu memaparkan text sahaja yakni tanpa gambar.
2. summary_img – jumlah character yang ingin ditunjukkan bersama gambar sebelum auto readmore.
3. summary_noimg – Jumlah character yang ingin ditunjukkan jika tiada gambar.
4. img_thumb_height and img_thumb_width - Tukar kelebaran dan ketinggian gambar dalam pixels.

Diharapkan tutorial ini membantu anda. Selamat mencuba.. (^^,).

Kali ini saya ingin berkongsi bagaimana untuk membuat read more pada posting anda. Function ini memang telah disediakan oleh blogspot cuma mungkin ade antara anda yang tdk tahu bagaimana. Caranya mudah sahaja.

1) Masuk pada Dashboard > Settings. Dekat tab basic scrool sampai bawah sehingga anda jumpa Select post editor pada Global settings. pilih updated editor.

2) Selepas itu posting editor anda akan bertukar wajah seperti dibawah.

3) untuk membuat read more anda cuma tekan icon gambar pecah 2 dan satu garis akan muncul. masukkan post yang anda ingin muncul apabila read more ditekan di bawah garis tersebut seperti contoh dibawah 

4) Jika anda ingin menukarkan perkataan read more kepada nama lain seperti baca lagi or sambung baca or apa saja yang anda nk pergi dekat blogger>>layout pastu tekan edit pada blog post. satu popup akan keluar seperti dibawah.. tukarkan bahagian yang dibulatkan dengan perkataan anda sendiri.

5) Lepas itu Save.. Selamat mencuba.. Untuk post seterusnya sy akan berkongsi cara membuat Auto Readmore. Tunggu ~~

Kali ini sy akan berkongsi cara untuk memaparkan coding dengan lebih kemas dan cantik menggunakan SyntaxHighlighter. SyntaxHighlighter ini adalah open source yang menggunakan javascript. Tutorial ini amat sesuai untuk blogger2 yang membuat blog berkaitan programming. Untuk lihat demo cuba lihat coding dibawah.

// SyntaxHighlighter makes your code
// snippets beautiful without tiring
// your servers.
// http://alexgorbatchev.com
var setArray = function(elems) {
    this.length = 0;
    push.apply(this, elems);
    return this;
} 

Bagaimana Caranya?

1) Pergi ke Dashboard > Design > Edit HTML.
2) Copy coding dibawah dan pastekan sebelum </head>.

<!--SYNTAX HIGHLIGHTER BEGINS-->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER ENDS--> 

3) Tekan Preview. Jika tiada masaalah tekan butang save.
4) Apabila membuat post pastikan coding berada ditengah tengah coding

<pre class="brush: html">

dan

</pre>

Jika coding anda adalah html <pre class="brush:html">
Jika coding anda adalah css <pre class="brush:css">
Jika coding anda adalah javascript <pre class="brush:js">

  


Terima Kasih Kepada Cyberack.com dan http://alexgorbatchev.com/SyntaxHighlighter/ diatas coding dan tutorial yang menarik ini.

Kali ini sy akan berkongsi cara untuk menambah section widget dengan add a gadget. Sebagai contoh lihat gambar diatas. Kita akan tambahkan kotak widget diatas blog post. Sila ikuti langkah step by step dibawah.

1) Pergi ke Dashboard > Design > Edit HTML.
2) Backup Template.
3) Cari header code. Jika anda ingin letakkan dibawah header. Ia mungkin kelihatan seperti coding dibawah.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=Your Blog Title(Header)' type='Header'/>
</b:section>
</div>

4. Copy coding dibawah dan letakkan dibawah coding diatas.

<!-- New widgets container Start -->
<b:section class='NewContainer' id='NewContainer'/>
<!-- New widgets container End -->

Contoh

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title=Your Blog Title(Header)' type='Header'/>
</b:section>
</div>
<!-- New widgets container Start -->
<b:section class='NewContainer' id='NewContainer'/>
<!-- New widgets container End -->

5. Kemudian Save. Lihat Page Elements anda dan anda dpt melihat kotak section baru. Untuk template yang sy gunakan sy akan tambahkan dibawah coding menu.


6. Senang bukan? selamat mencuba. (^^,)

Gambarajah basic layout blogspot

Untuk module ke 8, sy akan berkongsi cara untuk menambahkan kolum atau sidebar pada template. Gambarajah diatas adalah untuk memberikan kefahaman kepada anda apa yang sy akan jelaskan nt.


1 Pergi ke Dashboard > Design > Edit HTML.
2. Back up template. Dashboard > Design > Edit HTML > Download Full Template.
3. Cari coding dibawah dan copy. Coding tersebut merupakan coding asal template anda.

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

4 Pastekan coding asal yang anda copy td dibawah coding asal. Tukarkan sidebar-wrapper kepada sidebar1-wrapper untuk css kedua yang dipastekn td. Contoh seperti dibawah.

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

/* additional sidebar start */
#sidebar1-wrapper {
  width: 220px;
background: salmon;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}/* additional sidebar end */ 

5 Tukarkan kelebaran outer-wrapper,header dan footer.

#outer-wrapper {
width: 660px; <------ tukarkan ikut jumlah lebar template
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#header-wrapper {
width:660px; <------ tukarkan ikut jumlah lebar template
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#footer {
  width:660px;  <------tukarkan ikut jumlah lebar template
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

6. Cari coding

<div id="sidebar-wrapper">
<b:section class="sidebar" id="sidebar" preferred="yes">
</b:section></div>

Jika sudah ada kandungan, coding akan lebih panjang.

7. Copy coding diatas dan pastekan serta merta dibawahnya. Buang kandungan widget jika ada pada coding yang anda paste td. Jika tidak faham lihat coding dibawah.

<div id="sidebar-wrapper">
<b:section class="sidebar" id="sidebar" preferred="yes"> 
<b:widget id="Profile1" locked="false" title="About Me" type="Profile"> 
<b:widget id="BlogArchive1" locked="false" title="Blog Archive" type="BlogArchive"> 
<b:widget id="Label1" locked="false" title="Labels" type="Label"> 
</b:widget> 
</b:widget></b:widget></b:section></div>


<div id="sidebar1-wrapper">
<b:section class="sidebar" id="sidebar1" preferred="yes"> 
</b:section> </div>

1) Jika anda mengikut langkah diatas. Kedudukan kedua-dua sidebar akan berada disebelah kanan.

2) Untuk menukarkan sidebar kedua-dua belah kiri cuma tukarkan css main-wrapper float dari ke $startSide$endSide dan sidebar-wrapper dari $endSide ke $startSide.

3) Untuk menukarkan main wrapper ditengah2 antara sidebar. tukarkan css sidebar1-wrapper float dari $endSide ke $startSide. Kemudian tukarkan html coding sidebar baru diatas coding main wrapper. Lihat contoh dibawah.

<!-- additional sidebar start -->
<div id='sidebar1-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
</b:section>
</div>
<!-- additional sidebar end -->    
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

Kebanyakan template tidak menggunakan variable $startSide dan $endSide. Jika begitu, tukarkan $startSide dengan left dan $endSide dengan right.

Untuk Kali ini sy akan berkongsi cara untuk membuat 3 kolum pada bahagian footer. Tutorial ini tidak diperlukan bagi blogspot user yang menggunakan blogspot template designer kerana mereka boleh menukar jumlah footer pada bila2 masa menggunakan template designer. Jika anda mempunyai banyak widget untuk diletakkan pada blog dan ruang pada sisi sidebar sudah terlalu byk atau serabut maka dengan membuat footer ini akan membuat blog lebih kemas dan lebih byk ruang untuk diletakkan widget. Bagaimana Caranya? mudah sahaja. Ikuti langkah 1 per 1.

1 Masuk kedalam Dashboard > Design > Edit HTML.
2 Back up template sebagai langkah keselamatan. Dashboard > Design > Edit HTML > Download Full Template.
3 Cari koding footer yang sedia ada di hujung coding seperti ini

<div id="footer-wrapper">
<b:section class="footer" id="footer">
</b:section></div>

Jika sudah ada kandungan pada blog, koding mungkin lebih panjang

4 Copy dan paste the code dibawah serta merta selepas </div>.

<!-- three column footer HTML Start by SyoknyerBlogging.blogspot.com -->
<div id='lower'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
</div><!-- three column footer HTML End by SyoknyerBlogging.blogspot.com--> 

5 Copy the code below and paste it in CSS section, before ]]></b:skin>

/* -----   LOWER SECTION Start By SyoknyerBlogging.blogspot.com  ----- */
#lower {
       margin:auto;
       padding: 0px 0px 0px 0px;
       width: 100%;
       background:#252423 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIUx-njs4fJZ5M9kRZs3o3gAnH3l1X85OjIK5F1eDNnHBRCOtr8T8MXEkWC-E28aUXgvoUlydHMRzyr6Z-MRD_e2wzMKspkao7fhsoq2yiAyghqwcD7YdjPtCpdvPTDfcqe_hC-V2cptHj/s1600/lowerbg.png) repeat-x top;}  
#lower-wrapper {
       margin:auto;
       padding: 5px 0px 0px 0px;
       width: 960px;}

#lowerbar-wrapper {
       color:#a4a5a1;
       float: left;
       margin: 0px 5px auto;
       padding-bottom: 20px;
       width: 32%;
       text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
       overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
       .lowerbar {margin: 0; padding: 0;}
       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
       .lowerbar h2 {
       margin: 0px 0px 10px 0px;
       padding: 3px 0px 6px 0px;
       text-align: left;
       font-style:italic;
       color: #2888b5;
       font-size:20px;
       font-family:georgia, trebuchet ms, times new roman;
       background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1-Rdce5q9uJ96T3-foLDt6z9gdej5H6LVfY2Ya1Wjsb5JZzCHv9bjaghibKlPlveMQcjzOVluj7TtckxIDv459RCHsw6Ycc_671X-OIcW9njzlydXtDYpyii5UqgIH603YXS4j0kaloif/s1600/border.jpg) repeat-x bottom;
}

.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}

.lowerbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom:1px solid #373127;
}

.lowerbar a {color: #fff; text-decoration: none;}
.lowerbar a:hover {text-decoration: underline; color: #171615}
.lowerbar a:visited {text-decoration: none; color: #fff;}

/* -----   LOWER SECTION End By SyoknyerBlogging.blogspot.com  ----- */

6. Save template dan pergi ke Design > Page Elements. Anda akan melihat 3 kolum pada footer

Untuk module ke 6 ini sy ingin berkongsi cara untuk tambahkan kelajuan blog anda dengan compress css style anda. Untuk pengetahuan semua,kebanyakan template2 yang di download di laman2 web biasanya mengandungi css code yang berserabut. Tahukah anda? semakin panjang code pada template semakin lama masa diambil untuk loadkan page. Bagi yang mempunyai internet yang berkelajuan tinggi, mungkin tiada masalah. Bagaimana pula dengan pengunjung yang mempunyai kelajuan internet yang lembab?.

Dengan menggunakan Css compressor ini anda dpt mengurangkan sedikit sebanyak coding blog. Lihat coding syoknyerblogging selepas di compress.





Bagaimana Caranya?
1) Sebagai langkah berhati2, sila backup dahulu template anda. Dashboard>>Design>>Edit Html>> Download Full Template.
2) Copy coding Css template anda diantara <b:skin> dan </b:skin>
3) Masuk ke dalam web ini http://www.cssdrive.com/index.php/main/csscompressor/ .
4) Untuk Compression Mode kekalkan "Normal" dan untuk comment Handling pilih "Don't strip any comment"


4) Pastekan coding css anda td ke dalam kotak "Insert Css Code" dan tekan "Compress It".
5) Tunggu sehingga selesai, Copy coding yang sudah dicompress dan pastekan di antara <b:skin> dan </b:skin> td. Tekan save dan view blog.
6) Cuba anda periksa kelajuan blog anda selepas dicompress. http://syoknyerblogging.blogspot.com/2010/11/timbang-kelajuan-blog-anda.html. Anda akan perhatikan perbezaannya. Selamat mencuba. (^^,)

Untuk module kali ini sy ingin berkongsi cara untuk menukarkan nama blog anda dari pada blogspot.com kepada nama_anda.com. Sebenarnya terdapat byk nama domain yang boleh diguna seperti .net .org .my .com.my .asia .eu dan sebagainya. Anda boleh memilih sebarang nama domain yang anda inginkan. Nama domain boleh dibeli dimana2 syarikat yang menawarkan khidmat hosting. Saya cadangkan membelinya daripada JomHosting.

Bagaimana Caranya?

  1) Pergi http://www.jomhosting.net/billing/aff.php?aff=893
   2) Pilih domain name yang anda mahukan.Jika available klik order now.
   3)Tick kan ketiga-tiga service ini.


   4) Untuk nameserver 2 masukkan seperti dibawah ini (Notes: setiap hosting menggunakan nameserver yang berlainan. Ini untuk jomhosting sahaja.

• myjomhosting.earth.orderbox-dns.com
• myjomhosting.mars.orderbox-dns.com
• myjomhosting.mercury.orderbox-dns.com
• myjomhosting.venus.orderbox-dns.com

  5) Update cart. isi detailed anda dan bayar. Tunggu pengesahan daripada jomhosting. selalunya mengambil masa 24jam.

  6) Selepas domain registration dah complete kuti langkah dibawah

1. Login ke http://jomhosting.myorderbox.com/ jika mendaftar selepas Jun
 2009, sila gunakan link http://myjomhosting.myorderbox.com/
 2. Klik Domain > List Last 10 Domains
 3. Klik Domain Name  - Click To Manage
 4. Klik Tab DNS
 5. Klik pada butang Activate DNS
 6. Kemudian klik butang Auto-update the nameservers for me
 7. Klik Products > List Last 10 Domains
 8. Klik Managed DNS  - Click To Manage 
 9. Klik Manage DNS Record
 10. Klik CNAME Record
 11. Klik Add CNAME Record
 12. Isi kan seperti berikut:
 Di kotak Host name,masukkan : www
 Di Kotak Value, pilih kotak ke dua dan masukkan : ghs.google.com
 TTL biarkan saja pada nilai tersebut.
 13. Tekan Add Record
 14. Login ke akaun blogspot anda
 15. Klik pada publishing di bawah tab Settings.
 16. Klik pada Switch to custom domain
 17. Kemudian masukkan URL domain berbayar anda
 Kemudian save setting tersebut. Done

Untuk module ketiga ini, sy akan berkongsi cara untuk menukar favicon pada blogspot. Terlebih dahulu sy ingin bertanya, tahukah anda apakah itu favicon? favicon adalah logo kecil yang terdapat pada address bar web browser. Masih belum jelas? lihat gambar dibawah.



Untuk menukar favicon ini bukanlah susah, senang sahaja. Semudah ABC dan 1,2,3. Sy akan tunjukkan langkah demi langkah.

Bagaimana cara menukar favicon?
1) Uploadkan gambar favicon yang anda ingin tukar di mana2 image hosting (cdgn: imageshack dan photobucket) dan copy direct link gambar tersebut. (cth: http://i931.photobucket.com/albums/ad153/thalhah/icontexto-inside-blogger-1-1.png)
2) Copy coding dibawah dan tukarkan {image url} kepada direct link gambar yang diupload td.


3) Bukak blogspot dashboard>>Design>>Edit HTML dan pastekan coding tadi sebelum </head> (tekan Ctrl + F untuk memudahkan pencarian). Kemudian tekan save. Anda boleh lihat perubahan pada favicon apabila tekan "View Blog".

Kali ini sy akan berkongsi beberapa website yang menyediakan download blogspot template secara percuma. Sebenarnya terdapat berjuta-juta web yang menyediakan khidmat ini tetapi hanya 10 sahaja yang dipilih oleh Syoknyerblogging.

Untuk module ke 2, saya ingin berkongsi cara untuk menukar template. Untuk beginner, anda boleh menggunakan template designer yang disediakan oleh blogspot atau dengan memilih template2 yang digemari dilaman web yang akan sy nyatakan sebentar lagi. Di syoknyerblogging.blogspot ini juga akan dipenuhi dengan template2 yang telah kami pilih untuk memudahkan pengunjung.

Cara 1: Gunakan Blogspot Template Designer

1) Masuk ke dashboard anda. Untuk pengguna baru, biasanya akan keluar dialog seperti dibawah. Jika keluar tekan "try it now". Jika dialog tersebut tidak keluar tekankan Design >> Template Designer.

2) Tonton video dibawah untuk nampak lebih jelas.




3) Sekarang tugas anda untuk explore semua function yang ada disitu. Paparan akan bertukar setiap kali anda menekan style2 yang ade. Ia akan memudahkan kerja anda untuk mendesign. Jangan risau, anda boleh bermain dengannya, template tidak akan disimpan selagi anda tidak menekan butang "Apply to Blog". Untuk batalkan tekan sahaja "back to blogger" atau klik apply untuk simpan. Senang sahaja. Terima kasih kepada blogspot diatas function yang menarik ini.


Cara 2: Upload Design kedalam Blogspot.

1) Sudahkan anda memilih template anda? Jika belum sila lihat di web sy nyatakan disini http://syoknyerblogging.blogspot.com/2010/11/10-sumber-download-blogspot-template.html
2) Masuk ke dashboard anda. Tekan butang design>>Edit HTML
3) Tekan butang browse dan cari kedudukan template anda. Tekan ok dan tekan butang Upload.


4) Tunggu sampai keluar "Your change has been save" kemudian tekan view blog.