tutorial lanjutt

Cursor Comel Untuk Blog

Dah jemu dengan bentuk cursor biasa? Terdapat pelbagai cursor comel yang korang boleh pilih sebenarnya. Contoh seperti di bawah :

Caranya :
1) Pergi ke sini
2) Pilih cursor dan copy kod
3) Pergi ke akaun blogger korang, klik Dashboard >> Design >> Add A Gadget >> HTML / Javascript
4) Paste kod cursor tadi di ruangan HTML / Javascript
5) Klik Save dan lihat hasilnya

Button Like Facebook Pada Sidebar Blog

Button like ini boleh diletakkan untuk anda mengetahui berapa banyak like yang anda dapat untuk blog anda atau apa sahaja topik yang ingin ajukan pada button like tersebut .

Ikuti tutorial di bawah:

1) Sign in akaun blogger

2) Dashboard > Design > Add A Gadget > Html / Javascript

3) Copy paste kod di bawah pada ruang Html / Javascript tadi

<iframe scrolling="no" frameborder="0" allowtransparency="true" style="border: medium none; overflow: hidden; width: 280px; height: 40px;" src="http://www.facebook.com/plugins/like.php?href=http://url-bloganda.blogspot.com&layout=standard&show_faces=false&width=280&action=like&font=arial&colorscheme=light&height=40"></iframe>

Nota : Gantikan perkataan yang dihighligtkan merah di atas dengan url blog anda. Letakkan topik yang ingin anda ajukan pada ruang title

4) Save dan lihat hasilnya.

Salji Dalam Blog

Inginkan suasana blog yang bersalji? Sila ikuti tutorial di bawah:

1) Login akaun blogger > Dashboard > Design > Add A Gadget > HTML/Javascript

2) Copy paste kod salji berikut ke dalam ruangan HTML/Javascript tadi

Salji putih:

 

<script type="text/javascript" src="https://sites.google.com/site/tutorialbelog/snowwhite.js"></script>

Salji pink:

 

<script type="text/javascript" src="https://sites.google.com/site/tutorialbelog/snowred.js"></script>

Salji purple:

 

<script type="text/javascript" src="https://sites.google.com/site/tutorialbelog/snowpurple.js"></script>

Salji biru:

 

<script type="text/javascript" src="https://sites.google.com/site/tutorialbelog/snowblue.js"></script>

Salji hitam:

 

<script type="text/javascript" src="https://sites.google.com/site/tutorialbelog/snowblack.js"></script>

3) Save dan lihat hasilnya. Selamat mencuba! :)

* Untuk menjadikan salji muncul penuh dalam blog, drag element html ke bahagian header.

Menu Horizontal Untuk Blog

Disamping menampakkan kelainan pada rupa blog anda, dengan adanya menu horizontal ini, blog akan lebih mudah di explore oleh pelawat. Ikuti tutorial di bawah untuk mengaplikasikannya pada blog anda:

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy dan paste kod Menu Horizontal pada ruang Html / Javascript tadi.

<li><a rel="nofollow" href="#"><span>Link 1</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 2</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 3</span></a></li>

<li><a rel="nofollow" href="#"><span>Link 4</span></a></li>

<li><a rel="nofollow" href="#"><span>Link 5</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 6</span></a></li>
<li><a rel="nofollow" href="#"><span>Link 7</span></a></li>

# - url untuk setiap menu ( cth: http://jombinabelog.blogspot.com/2012/01/menu-horizontal-pada-blog.html)
Link 1 - 7 - nama menu yang korang nak letak ( cth home, about me, contact dll)


* Terdapat 9 pilihan style menu horizontal untuk anda pilih. Just copy kod yang disediakan:

<style> #tabsI { float:left; width:100%; background:#EFF4FA; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #DD740B; } #tabsI ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsI li { display:inline; margin:0; padding:0; } #tabsI a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfcW-5LIu-ayuILuK0_lpa2kfXi3sEQIWlPV_FjnJPxTaKCU1D2VzEshndYYiiKaMW8_Y3TnSmooPEq_O_qtOrrdTMeN3NF7I-SkL70XtveDEtmcU6RDYXOJmi79hvdeNSOjAaQzOcYFI/s1600/tableftI.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsI a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjVxZ4NxtWSPeQ67P4FmI740LwaipnjKyQACSduh7QET8_r8EP_YdUzSrZMY3S0-DAetzGF3o-uqYgzs29l-2lZXL2ooXk_-cjyAsH3QhKntWpij8SgV4vpT9yzkv3px8QtrgzlbW-r7E/s1600/tabrightI.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsI a span {float:none;} /* End IE5-Mac hack */ #tabsI a:hover span { color:#FFF; } #tabsI a:hover { background-position:0% -42px; } #tabsI a:hover span { background-position:100% -42px; } </style> <div id="tabsI"> <ul> <li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul> </div>

<style> #tabsF { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabsF ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsF li { display:inline; margin:0; padding:0; } #tabsF a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCXblQMm5BWrXTC7IABK39O6ltwt9hh3IWry2aIJX05QuZZa9gQ0IwcDi2lGbdMEx3G86LZrX8YOcTl-XQQb98tSfousyRSPjn-72Zk8bU2VYSL9yaka5NDUZIzub4ViR3VBp-4cXfGos/s1600/tableftF.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsF a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNfvn8zPPHrUf9UBOfPQPTkAQBq5U7OkZiw8U97n8cFlBfIyLG4hjW6m23mfXhj_30E23qBMX18PEtIAPtcaK3GMs57h1Z2CWrYWdOuIlHsglDeMN51WX9wFkeJRhbIIAXr635xIbJccc/s1600/tabrightF.png) no-repeat right top; padding:5px 15px 4px 6px; color:#666; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsF a span {float:none;} /* End IE5-Mac hack */ #tabsF a:hover span { color:#FFF; } #tabsF a:hover { background-position:0% -42px; } #tabsF a:hover span { background-position:100% -42px; } </style> <div id="tabsF"> <ul> <li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul> </div>

<style> #tabs6 img { border: none; } #tabs6 { float:left; width:100%; background:#efefef; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #666; } #tabs6 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs6 li { display:inline; margin:0; padding:0; } #tabs6 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbuwAO9HiejyFNDyL6tO9R5tW4fDD5v7dDOpIby36_Cf0Rf3rK6oXZuQzrDxa7NHgZ7uG_KpKQh6Jnq9cC0jk28w5iLF9NkC5LkSi4QUnSa3pvKXCZq1opkX-28NdXt0Y8xxcdeHrYOAQ/s1600/tableft6.gif) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabs6 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnQurQ4VMjuHLa3_ZHoPDvEwJbNHUDsYxWu_oWgxzaXOPuzWsOfONOa7fkfm8-QPv9IJJz2pOqNmmoGiHZFwxAoTHgHYTq4PnJI8GDyFM5V5BJlctqJbH3EG2HL-L-__QH9gSoX5JGKPM/s1600/tabright6.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs6 a span {float:none;} /* End IE5-Mac hack */ #tabs6 a:hover span { color:#FFF; } #tabs6 a:hover { background-position:0% -42px; } #tabs6 a:hover span { background-position:100% -42px; } #tabs6 #current a { background-position:0% -42px; } #tabs6 #current a span { background-position:100% -42px; } </style> <div id="tabs6"> <ul> <li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul> </div>

<style> #navcontainer { background: #f0e7d7; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif; text-transform: uppercase; font-size: 14px; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; } </style> <div id="navcontainer"> <ul id="navlist"> <li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul> </div>





<style> #tabsJ { float:left; width:100%; background:#F4F4F4; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #24618E; } #tabsJ ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsJ li { display:inline; margin:0; padding:0; } #tabsJ a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3V4WGzmT0IXtxwomI-B_iADrU9ClkI9iFhyiqWOwYCgSu78GfJtHiKGmBrNbxTOruD_3I6csQP5Oaf-wu9nbnOP4SFy-wS4re1PWg7koG4XVWQMCS6630xM7E8Ndz1CcfhGi6Vkls2y4/s1600/tableftJ.png) no-repeat left top; margin:0; padding:0 0 0 5px; text-decoration:none; } #tabsJ a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8mHzNjslovQiMIgo9_RyBi3k76_WJrOGTzJ4yvf3WtoUsjvQ1L243Sy7lfBXCK46Yz84zy607I5j2VhyphenhyphenLU05RVUkS-n6nwUojR4GkDZUwc2dqKTTOknsCndcDOUgKrSuJ-JFBkHb4LKY/s1600/tabrightJ.png) no-repeat right top; padding:5px 15px 4px 6px; color:#24618E; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsJ a span {float:none;} /* End IE5-Mac hack */ #tabsJ a:hover span { color:#FFF; } #tabsJ a:hover { background-position:0% -42px; } #tabsJ a:hover span { background-position:100% -42px; } </style> <div id="tabsJ"> <ul> <li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul> </div>

<style> #tabs4 img { border: none; } #tabs4 { float:left; width:100%; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6B78A9; } #tabs4 ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabs4 li { display:inline; margin:0; padding:0; } #tabs4 a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO5ivj1tZZZc6NAvbmb9OnMkJjOlQt-KJUlHFQrXB9QlqS4iVXL1ctsM_TtdJbxSBARxjHZFB45xIP3kxni5SEml3wIpuO_CE5kg9uy_GKaiwQSZjaATDF0T1iHZvxP28yrRRGLGS2uts/s1600/tableft4.gif) no-repeat left top; margin:0; padding:0 0 0 7px; text-decoration:none; } #tabs4 a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd447X9sldknVilb-sEUd_ol3Sg4-qgwCyx0JM_fN7D0TUNePIgwTjk3bbXb97xKu-qtkhT2_BL39BLMmo6dVh4yUZDC_5rsBQs2kLR6lXyMBoSUPXQFDMUMTLDrqpAdo33K6klSJXXeQ/s1600/tabright4.gif) no-repeat right top; padding:5px 15px 4px 6px; color:#6B78A9; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabs4 a span {float:none;} /* End IE5-Mac hack */ #tabs4 a:hover span { color:#6B78A9; } #tabs4 a:hover { background-position:0% -42px; } #tabs4 a:hover span { background-position:100% -42px; } #tabs4 #current a { background-position:0% -42px; } #tabs4 #current a span { background-position:100% -42px; } </style> <div id="tabs4"> <ul> <li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul> </div>

<style> .container { width: 500px; padding: 0 0 5px 0; margin: 3px 0 10px 0; background: #fff; } #nav { margin: 0; padding: 0; border-top: 3px solid #5F6A71; } #nav li { margin: 0; padding: 0; display: inline; list-style-type: none; } #nav a:link, #nav a:visited { float: left; font: bold 7.5pt verdana; line-height: 14px; padding: 9px; text-decoration: none; color: #708491; } #nav a:link.active, #nav a:visited.active, #nav a:hover { color: #666; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB-mQxXSYieeygnrbh__dZa5Fc0XXqpwYjBbDKx0Mq-lvoHQZyeKPKzg70zRyfseUl2qHOeimovF7__C2CIiexjkliP1KxcjFHDKS45dX6fqgGtXwK0rU99BReH-9E2w5r3pc9d6pgVP0/s1600/Inverted.png) no-repeat top center; border-top: 4px solid #5F6A71; } </style> <div class="container"> <ul id="nav"> <li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul> </div>

<style> #tabsE { float:left; width:100%; background:#000; font: bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline; margin:0; padding:0; } #tabsE a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5shoyLldnddssRy_kWFEBGAPE51TQ8YQ0ewdJtLrCwt51Im1phX1Wu91cxePrckf-cVFvbtYZ23fzU9dGqz5QzYRnTiSD-vVtIbpXHulRvc1bcLIAXyblIvThT9judSW2rKXRzPz_aSw/s1600/tableftE.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsE a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYgEXnDmezHnBdOFb18SuhtnnYABc30Q8CcbYrk0F8knsGuKdPEuvqxson67mEIqBpk9lLumAyCSgrASLAI8iRfnYS_-3GF4ZzGz3ziIXtzwvCS-jmMbj8foPXvfjViXFhNjESHmdNNeo/s1600/tabrightE.png) no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span {float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; } #tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span { background-position:100% -42px; } </style> <div id="tabsE"> <ul> <li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul> </div>

<style> #tabsD { float:left; width:100%; background:#FCF3F8; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #F4B7D6; } #tabsD ul { margin:0; padding:10px 10px 0 50px; list-style:none; } #tabsD li { display:inline; margin:0; padding:0; } #tabsD a { float:left; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvDVXkvK5rlotRpdbuK0WUwQIAsbaF760dVMo1PvjD-kxLzGAuSprANrcbjmqtmip7TGDz2cx7iIJA1Tk0-xpX4wj6QXLKdm-cil-XgM82JYr39ESeBPJKIRQa0tWNcPvqNb6ZF0VD2F8/s1600/tableftD.png) no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabsD a span { float:left; display:block; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm5YOTK7Qhyphenhyphenx56ohEBN4ewdeYL4_J0p8ENw-etabDZnVmtkp5Q9XjzCsgxIr7D11A1n6W7r6ZO_aPxrdi6dEomyDDwgHtmkm3PTuEZ4EfdO-sAinOGW1qgNmDJ-3uWZamG9PFf3TkCcNQ/s1600/tabrightD.png) no-repeat right top; padding:5px 15px 4px 6px; color:#C7377D; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsD a span {float:none;} /* End IE5-Mac hack */ #tabsD a:hover span { color:#C7377D; } #tabsD a:hover { background-position:0% -42px; } #tabsD a:hover span { background-position:100% -42px; } </style> <div id="tabsD"><ul> <li><a rel="nofollow" href="#"><span>Link 1</span></a></li> <li><a rel="nofollow" href="#"><span>Link 2</span></a></li> <li><a rel="nofollow" href="#"><span>Link 3</span></a></li> <li><a rel="nofollow" href="#"><span>Link 4</span></a></li> <li><a rel="nofollow" href="#"><span>Link 5</span></a></li> <li><a rel="nofollow" href="#"><span>Link 6</span></a></li> <li><a rel="nofollow" href="#"><span>Link 7</span></a></li> </ul> </div>

4) Dah selesai klik save dan lihat hasilnya.

Semogaa Beramanfaat :D
sumber : jombinabelog.blogspot.com/