Top Menu

Contoh top menu untuk template Notepad.

contoh menu dan pautannya pada pos:

Menu	Pautan
Anecdote	http://99rasa.blogspot.com/2010/02/mukadimah.html
Nur's Shop	http://99rasa.blogspot.com/2010/04/salam-sejahtera.html
Career	http://99rasa.blogspot.com/2010/06/career.html
Book Store	http://99rasa.blogspot.com/2009/12/book-store.html
Fiqh	http://99rasa.blogspot.com/2010/01/fiqh.html
Deco-deco	http://99rasa.blogspot.com/2010/01/deco-deco.html
Jejalan	http://99rasa.blogspot.com/2010/01/jejalan.html

Dalam kod template cari dalam bahagian CSS kod #Menu macam dalam table di bawah ni.
Cuma taip pinda satu sahaja yang warna merah 20px; tu jadikan 15px;. Ini sahaja dalam bahagian CSS.

#menu {position:relative; text-align:center; margin:0px 15px; padding:0px 0px 3px 0px; background: url(http://img399.imageshack.us/img399/8387/menubgvq1.png);} #menu ul {display:table; padding:0px; margin:0 auto; list-style-type:none; white-space:nowrap;} #menu ul li {display:table-cell;} * html #menu ul {display:inline;} *:first-child+html #menu ul {display:inline;} * html #menu ul li {float:left;} *:first-child+html #menu ul li {float:left;} #menu ul li a {display:block; width:auto; color:#ebede9; text-decoration:none; font:12px/24px Verdana; padding:0px 9px 0px 20px;} #menu ul li a:hover {text-decoration:none;} #menu ul li.current_page_item a {text-decoration:none; font-weight:bold;} .container {clear:both; text-decoration:none;} * html .container {display:inline-block;} *:first-child+html .container {display:inline-block;} #menu ul li.menu_i1 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJxvgGcGG5xQ86PzHkIMiebMw2ZmLEv9xi95o00QRyQff5uk22lSe9HPvJLKXZsfCoB66mnnjQ0PYZSZWIymc40cLlTUxEQnLWx77fNZaHF1asEJWwtY7-eS2NJ5OjUNazO2IPwKURB20/s1600/menu-red-r.gif) 100% 100% no-repeat;} #menu ul li.menu_i1 a {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixWnQ4CWVX7WIb8PD4tACVrz3RaQIV0UnG7D3oI8KI1G9kWGsRunSoNDS7umRe_ZQwiQE-qhyphenhyphenF12wW3JRdfJ0DOQngqkPv4ghRN2NoXWII0DGXY8-5qf-yHnXvFHgolYW7gE2XqThv0g0/s1600/menu-red-l.gif) 0 100% no-repeat;} #menu ul li.menu_i2 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_IEkUoTfJToE7lpIRsvedSd9bNxGT1fFD9n6tApzkDjHmkAnDh3CViSKGrtVt3xK7p0NxAWTnZmhyeLVLumEIdc8oyQGwySSon8l-utCnXQRAGz0uq5gItn6A2LP5iPqcxvyUBRiuK54/s1600/menu-green-r.gif) 100% 100% no-repeat;} #menu ul li.menu_i2 a {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV3TVPXQxouq4NqhK55NKKoZPLg3dIHYJN4SSeptHVsvn9JrDqXIkTYb9Vmq7jpV1YjDUgqzmuCyR0_d13Fn1t6Zztv72w5evNyVv3YlJxeV4fhc7pvuBZi0tcOeUC4iVz5a-tTv0rjOY/s1600/menu-green-l.gif) 0 100% no-repeat;} #menu ul li.menu_i3 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtUeg6DPoNIoVXK7_0eP_jwHTLflGgfvtH-MmOIbnRE7bCzJ9TSgA08XL5CjEdh3_aY6hNtMXWjulCSHgyQ76GbVtb5xaqJpT3ile3S2PHdukbIgdR2dGtZrLHq9BFRS3E8-jWJJnazhw/s1600/menu-blue-r.gif) 100% 100% no-repeat;} #menu ul li.menu_i3 a {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqibqaXcH9c4GFoEpqnykNCVUOqEew94f-q9x91mQSsp2EaRL4L8yHwM8Cmzpo218au2fpPywjHKWrLPHFelQf8ehvTunF9pXroOeShCRBmTEoalm8c1scizZkcMkj9Y3j3JpyN4em07s/s1600/menu-blue-l.gif) 0 100% no-repeat;} #menu ul li.menu_i4 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ6MQC3IPEWznyILDVg-F2FBUnU2qTrYD90HNBqpB1SXibUyk6U9QqpmL8h9MGZILWk5-iR4haaamaQXH8P2g0xLDdOctJnfBqaxBB9fEmUgPUJTlMVAIMqxZPmtqI9EhOJyTPDO4rXYg/s1600/menu-dgreen-r.gif) 100% 100% no-repeat;} #menu ul li.menu_i4 a {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLEr6YTFAcVlMHuznoFpHgkpNc_RBuLhTCCSbjAalncn-IYOBYnnt5QfI2rp2KGlflYM6jeyv1vSAKO-O1vNpgVayXBE_NNOAzQDE59wzp4nculPjqmVTIEeuX4c044fecJ8YnaIbDtFE/s1600/menu-dgreen-l.gif) 0 100% no-repeat;} #menu ul li.menu_i5 {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0cr_kSq1PVIfnnWvdmjKuVOrp0QkgW_MImS2RAmlmRRYCZbmUg78O8WEh8Yy2Yb3CIeqFL0aD11D5Z8Cqe-9B9RaYrppmRQ2QjWKbY4A3CwAehqj-pn68EzdfmA0qzGfkfbUIS5IWn5I/s1600/menu-yellow-r.gif) 100% 100% no-repeat;} #menu ul li.menu_i5 a {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5KUEeScMGPV7GnbPofNk3XR0R3_r05SYl0pau966GuK114-0zDwwqETCHdjkf0e7lqNUJsqtI9OQr4Oti5KYAjz5MiXxIMqJCEo8Rw5t68GiUz0zle5lmKBdmMhqakm0-Hc5km_esHEY/s1600/menu-yellow-l.gif) 0 100% no-repeat;}

kemudian telusur ke bawah lagi cari kod bawah ni.

Copy kod warna biru (daripada <ul> sampai </ul>) masukkan betul-betul di bawah kod <div id='menu'> exactly ikut contoh bawah ni.

kod warna merah delete buang (dari <b:section.... sampai </b:section>). Hati-hati jangan delete satu </div> bawah dia tu.

<div class='sheet-shadow png'><div class='sheet'><div class='sheet-top-grad'> <div id='menu'> <ul> <li><a style='text-decoration: none;' href='http://99rasa.blogspot.com/2010/02/mukadimah.html'>Anecdote</a></li> <li><a style='text-decoration: none;' href='http://99rasa.blogspot.com/2010/04/salam-sejahtera.html'>Nur's Shop</a></li> <li><a style='text-decoration: none;' href='http://99rasa.blogspot.com/2010/06/career.html'>Career</a></li> <li><a style='text-decoration: none;' href='http://99rasa.blogspot.com/2009/12/book-store.html'>Book Store</a></li> <li><a style='text-decoration: none;' href='http://99rasa.blogspot.com/2010/01/fiqh.html'>Fiqh</a></li> <li><a style='text-decoration: none;' href='http://99rasa.blogspot.com/2010/01/deco-deco.html'>Deco-deco</a></li> <li><a style='text-decoration: none;' href='http://99rasa.blogspot.com/2010/01/jejalan.html'>Jejalan</a></li> </ul> <b:section id='menusection' maxwidgets='1' showaddelement='no'> <b:widget id='LinkList1' locked='true' title='Top Menu' type='LinkList'> <b:includable id='main'> <del class='container'> <ul> <b:loop values='data:links' var='link'> <li><a expr:href='data:link.target'><data:link.name/></a></li> </b:loop> </ul> </del> </b:includable> </b:widget> </b:section> </div>

Bila dah pinda, klik PREVIEW dulu tengok kalau ok baru save, kalau silap betulkan dulu dah ok baru SAVE.

Tab Menu Navigasi

Panduan bagaimana mencipta menu tab navigasi dalam blog.

Tab atau Flag dalam Menu berfungsi sebagai kemudahan navigasi bagi pengunjung blog untuk membuka dan mendapatkan sesuatu carian yang disediakan dalam blog dengan mudah dan jelas.

Tab "Utama" misalnya akan diklik untuk pengunjung membuka laman utama blog. Tab "Pesanan" diklik untuk membuka pautan di mana pengunjung akan mengisi barang pesanan misalnya. Tab "Album Gambar" kalau diklik akan membuka pautan yang mengandungi album gambar yang telah disediakan.

Sediakan terlebih dahulu tab dan pautan yang diperlukan untuk kemudahan pengunjung melayari blog. Sediakan pos atau pautan kepada laman lain yang berkenaan bagi setiap satu tab. Jika sesuatu tab dipautkan kepada sesuatu pos dalam blog, pinda kebelakangkan tarikh pos untuk mengelakkan supaya pos berkenaan tidak dipaparkan dalam muka utama blog.

Cara menyediakannya.

Salin kod CSS berikut dan paste masukkan dalam kod template blog lokasinya sebelum kod ]]></b:skin>:

#navmenutab { font: bold 9px/9px Verdana, Lucida Grande, Arial, Helvetica, Sans-Serif; position: left; top: 230px; left: 0%; width: 760px; margin: 0 54px 0 0px; padding: 5px 16px; /* duplicate the tab size */ text-align: left; display: block; } #navmenutab li { margin: 0; padding: 0; text-transform: none; display: inline; } #navmenutab a { color: #FFFFFF; background: #771100; font-weight: normal; height: 19px; padding: 5px 16px; /* round corner tab - not for IE */ -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 6px; } #navmenutab a:hover { color: #fff; background: #771100; text-decoration: none; /* round corner tab - not for IE */ -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 6px; } #navmenutab .current_page_item a { color: #cdd; background: #cda; text-decoration: none; /* round corner tab - not for IE */ -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 6px; }

Dalam papan pemuka Blogger pilih Design, kemudian pilih dibawahnya Edit HTML:

Tandakan kotak "Expanda Widget Templates". Paste masukkan kod yang disalin sebelum kod ]]></b:skin>

Kemudian salin kod berikut. Pinda pautan URL didalamnya dengan pautan sebenar yang telah disediakan. Warna biru adalah pautan dan warna merah adalah tajuk dalam tab. Salin dan buat pindaan menggunakan NotePad. Paste masukkan kod ini kedalam kod template blog mengikut contoh dibawah:

<ul id='navmenutab' style='list-style-type:none'> <li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Utama</a> <li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Struktur</a> <li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Newbie</a> <li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Widgets</a> <li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Header</a> <li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Sidebar</a> <li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Bantuan</a> <li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Email</a> <li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Blog</a> </ul> <br/>

Telusur dalam kod template blog cari kod <div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>.

Kod <div id='header-wrapper'> ini akan ditutup dengan kod </b:section> </div>.

Paste masukkan kod di atas di bawahnya seperti berikut:

<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Panduan Blogger Baru (Header)' type='Header'> <b:includable id='title'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <data:title/> <b:else/> <a expr:href='data:blog.homepageUrl'><data:title/></a> </b:if> </b:includable> <b:includable id='description'> <div class='descriptionwrapper'> <p class='description'><span><data:description/></span></p> </div> </b:includable> <<b:includable id='main'> <b:if cond='data:useImage'> <b:if cond='data:imagePlacement == "REPLACE"'> <!--Show just the image, no text--> <div id='header-inner'> <a expr:href='data:blog.homepageUrl' style='display: block'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/> </a> </div> <b:else/> <!--Show image as background to text--> <div expr:style='"background-image: url(\"" + data:sourceUrl + "\"); " + "background-repeat: no-repeat; " + "width: " + data:width + "px; " + "height: " + data:height + "px;"' id='header-inner'> <div class='titlewrapper' style='background: transparent'> <h1 class='title' style='background: transparent; border-width: 0px'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <data:title/> <b:else/> <a expr:href='data:blog.homepageUrl'><data:title/></a> </b:if> </h1> </div> <div class='descriptionwrapper'> <p class='description'><span<data:description/></span></p> </div> </div> </b:if> <b:else/> <!--No header image --> <div id='header-inner'> <div class='titlewrapper'> <h1 class='title'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <data:title/> <b:else/> <a expr:href='data:blog.homepageUrl'><data:title/></a> </b:if> </h1> </div> <div class='descriptionwrapper'> <p class='description'><span><data:description/></span></p> </div> </div> </b:widget> </b:section> </div><!-- header wrapper --> <ul id='navmenutab' style='list-style-type:none'> <li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Utama</a> <li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Struktur</a> <li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Newbie</a> <li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Widgets</a> <li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Header</a> <li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Sidebar</a> <li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Bantuan</a> <li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Email</a> <li><a style='text-decoration: none;'> href='http://panduanuntukblogger.blogspot.com'>Blog</a> </ul> <br/>

Pinda untuk tambah ruang butang tab width: 760px; dalam #navmenutab jika ruangan tidak mencukupi asal tidak melebihi ruang asal header blog anda.

#navmenutab {
font: bold 9px/9px Verdana, Lucida Grande, Arial, Helvetica, Sans-Serif;
position: left;
top: 230px;
left: 0%;
width: 760px;
margin: 0 54px 0 0px;
padding: 5px 16px; /* duplicate the tab size */
text-align: left;
display: block;
}

#navmenutab a adalah warna latar belakang kesemua butang tab. Pinda warna latar butang tab (background: #771100;) dengan kod warna lain supaya sesuai dengan latar belakang blog. color: #FFFFFF; adalah warna tulisan dalam butang tab. Dapatkan kod warna dalam panduan "Kod Hexadecimal Untuk Warna":

#navmenutab a {
color: #FFFFFF;
background: #771100;
font-weight: normal;
height: 19px;
padding: 5px 16px;
/* round corner tab - not for IE */
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
}

#navmenutab a:hover bermakna warna butang tab bila cursor mouse dilalu atau diletak diatas butang tab sebelum diklik. color: #fff; adalah warna tulisan dalam butang tab, juga boleh dipinda dengan warna yang sesuai, background: #771100; adalah warna latar butang tab. Pinda warna latar dengan warna yang sesuai:

#navmenutab a:hover {
color: #fff;
background: #771100;
text-decoration: none;
/* round corner tab - not for IE */
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
}

#navmenutab .current_page_item a adalah warna butang tab yang terakhir diklik atau kedudukan butang tab terkini. Waran tulisan dan warna latar juga boleh dipinda dengan warna yang sesuai:

#navmenutab .current_page_item a {
color: #cdd;
background: #cda;
text-decoration: none;
/* round corner tab - not for IE */
-moz-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;

Pages Baru Dari Blogger (Menu Navigasi)

Blogger telah menyediakan satu fungsi Pages baru yang boleh dijadikan menu tab atau boleh dijadikan sebagai pautan navigasi dalam sidebar blog.

Had maksima Pages yang dibenarkan adalah sepuluh (10).

Log masuk kedalam Blogger melalui Blogger in Draft.

Sebelum menyediakannya, sekiranya blog menggunakan template dari pihak ketiga, tidak menggunakan template yang disediakan oleh Blogger, pastikan terdapat kod HTML berikut dalam kod template blog. Jika dalam kod template tidak terdapat kod HTML ini sila copy dan masukkan di posisi yang dinyatakan:

<div id="crosscol-wrapper" style="text-align: center;"> <b:section class="crosscol" id="crosscol" showaddelement="yes" /> </div>

Cari kod HTML <div id="content-wrapper"> dalam kod template blog anda dan masukkan kod HTML di atas di bawahnya seperti berikut:

<div id="content-wrapper"> <div id="crosscol-wrapper" style="text-align: center;"> <b:section class="crosscol" id="crosscol" showaddelement="yes" /> </div>

Sebagai contoh katalah kita akan buat satu page pertama sebagai hubung (contact) di mana pengunjung blog akan mengunjung kita melalui isian borang.

Dalam papan pemuka Blogger pilih Posting | Edit Pages dan klik Create a page:

Sediakan page untuk dihubungi oleh pengunjung. Lihat panduan Borang Contact Me Dari Kontactr. Taip masukkan tajuk page kerana tajuk ini akan jadi tajuk kepada tab atau tajuk pautan, dan klik PUBLISH PAGE:

Muka berikutnya pilih Blog tabs dan klik SAVE AND PUBLISH:

Satu tab pages telah siap. Sediakan page untuk setiap satu tab, misalnya page untuk "Pengenalan", page untuk "Produk", page untuk "Galeri Gambar", page untuk "Pautan" dan lain-lain yang diperlukan. Klik Edit Pages dan klik NEW PAGE untuk menyediakan page baru dengan proses yang sama seperti di atas.

Contoh page yang dipaparkan dalam blog:

Sekian, selamat mencuba dan selamat berjaya.

Sebarang pautan balik dari blog anda adalah sangat-sangat dihargai. URL http://calipso-tutorialblogger.blogspot.com/.

Salam hormat dari

Tutorial Blogger Blospot

Ikon Scroll To Top Dalam Blog

Panduan bagaimana menyediakan ikon anak panah scroll to top yang apabila diklik skrin akan skrol ke atas dalam blog secara otomatik.

Salin ikon anak panah berikut dengan klik mouse sebelah kanan dan pilih Save Image As. Muatnaik ikon ini dalam hos photobucket atau hos imej anda yang lain dan catatkan pautan hotlinknya. Sila ikut panduan Muat Naik Imej Dalam Photobucket Dan Pautannya



Contoh pautan:

<img src="http://i143.photobucket.com/albums/r153/kupia/up.png" style="height: 48px; width: 48px;" />

Fail javascript yang digunakan untuk proses ini adalah fail "scrolltopcontrol.js" seperti di bawah. Masukkan alamat URL pautan di Photobucket.com ikon di atas pada posisi warna biru yang ditunjukkan dalam kod javascript di bawah.

Anda boleh dapatkan kod javascript ini dari dari laman Dynamic Drive. Atau salin fail javascript di bawah beri sebarang nama fail yang sesuai dan muatnaik dalam hos fail javascript Google Sites serta catakan pautannya. Sila ikut panduan untuk Hos Fail Javascript Di Google Sites

Kod JavaScript

//** jQuery Scroll to Top Control script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com. //** Available/ usage terms at http://www.dynamicdrive.com (March 30th, 09') //** v1.1 (April 7th, 09'): //** 1) Adds ability to scroll to an absolute position (from top of page) or specific element on the page instead. //** 2) Fixes scroll animation not working in Opera. var scrolltotop={ //startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control //scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top). setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]}, controlHTML: '<img src="http://xxxx.photobucket.com/.../...../...../up.png" style="width:48px; height:48px"/>', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol" controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links state: {isvisible:false, shouldvisible:false}, scrollup:function(){ if (!this.cssfixedsupport) //if control is positioned using JavaScript this.$control.css({opacity:0}) //hide control immediately after clicking it var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto) if (typeof dest=="string" && jQuery('#' dest).length==1) //check element set by string exists dest=jQuery('#' dest).offset().top else dest=0 this.$body.animate({scrollTop: dest}, this.setting.scrollduration); }, keepfixed:function(){ var $window=jQuery(window) var controlx=$window.scrollLeft() $window.width() - this.$control.width() - this.controlattrs.offsetx var controly=$window.scrollTop() $window.height() - this.$control.height() - this.controlattrs.offsety this.$control.css({left:controlx 'px', top:controly 'px'}) }, togglecontrol:function(){ var scrolltop=jQuery(window).scrollTop() if (!this.cssfixedsupport) this.keepfixed() this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false if (this.state.shouldvisible && !this.state.isvisible){ this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0]) this.state.isvisible=true } else if (this.state.shouldvisible==false && this.state.isvisible){ this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1]) this.state.isvisible=false } }, init:function(){ jQuery(document).ready(function($){ var mainobj=scrolltotop var iebrws=document.all mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7 browsers in standards mode mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body') mainobj.$control=$('<div id="topcontrol">' mainobj.controlHTML '</div>') .css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'}) .attr({title:'Scroll Back to Top'}) .click(function(){mainobj.scrollup(); return false}) .appendTo('body') if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text mainobj.togglecontrol() $('a[href="' mainobj.anchorkeyword '"]').click(function(){ mainobj.scrollup() return false }) $(window).bind('scroll resize', function(e){ mainobj.togglecontrol() }) }) } } scrolltotop.init()

Contoh alamat URL pautan fail javascript dari Google Sites:

http://sites.google.com/site/calipsoworld/home/calipso-channels/scrolltopcontrol.js

Highlight dan salin satu lagi skrip berikut untuk dimasukkan ke dalam kod template blog. Sebelum disalin, paste masukkan dulu alamat URL pautan dari Google Sites di atas di posisi yang ditunjukkan:

Kod HTML

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://sites.google.com/site/calipsoworld/home/calipso-channels/scrolltopcontrol.js' type='text/javascript'> </script>

Masukkan kod skrip di atas dalam kod template blog posisinya selepas kod ]]><b:/skin> sebelum kod </head>. Seperti biasa gunakan pilihan Layout } Edit HTML . Tandakan kotak Expand Widget Templates):

Sekian, selamat mencuba dan selamat berjaya.

Sebarang pautan balik dari blog anda adalah sangat-sangat dihargai. URL http://calipso-tutorialblogger.blogspot.com/.

Salam hormat dari

Tutorial Blogger Blospot

Drop Down Menu

Soal Jawab Solat
Solat Jemaah
Solat Jamak dan Qasar
Soal Jawab Puasa
Wuduk dan Mandi
AlQuran dan Hadis
Soal Jawab Fiqh
Wanita dan Keluarga
Doa dan Zikir

Menu Slide-in

Panduan menyediakan Menu Dynamic-F Slide-In dari DynamicDrive.com seperti contoh menu TUTORIAL BLOG sebelah kiri. Bila letak mouse cursor menu akan bergerak keluar dan akan kembali tersembunyi bila mouse cursor di alihkan. Menu akan mengikut pergerakan skrol kebawah atau keatas dalam skrin.

1. Highlight dan salin dua (2) buah fail JavaScript berikut untuk dihoskan dalam mana-mana javascript file hosting. Gunakan perisian Windows Notepad atau lain-lain perisian Text Editor untuk membuka dan menyimpan fail-fail ini. Pinda dulu isi menu dalam fail ssmItems.js di bawah (para 1.3.1) sebelum dimuatnaik dan disimpan dalam hos.

1.1 Untuk hoskan fail-fail javascript ini di Google Sites sila ikut panduan Hoskan Fail JavaScript di Google Sites.

1.2 Fail ssm.js

//Static Slide Menu 6.5 © MaXimuS 2000-2001, All Rights Reserved. //Site: http://www.absolutegb.com/maximus //Script featured on Dynamic Drive (http://www.dynamicdrive.com) //March 20th, 09'- Updated for IE8 compatibility NS6 = (document.getElementById&&!document.all) IE = (document.all) NS = (navigator.appName=="Netscape" && navigator.appVersion.charAt(0)=="4") tempBar='';barBuilt=0;ssmItems=new Array(); function truebody(){ return (document.compatMode!="BackCompat")? document.documentElement : document.body } moving=setTimeout('null',1) function moveOut() { if ((NS6||NS)&&parseInt(ssm.left)<0 || IE && ssm.pixelLeft<0) { clearTimeout(moving);moving = setTimeout('moveOut()', slideSpeed);slideMenu(10)} else {clearTimeout(moving);moving=setTimeout('null',1)}}; function moveBack() {clearTimeout(moving);moving = setTimeout('moveBack1()', waitTime)} function moveBack1() { if ((NS6||NS) && parseInt(ssm.left)>(-menuWidth) || IE && ssm.pixelLeft>(-menuWidth)) { clearTimeout(moving);moving = setTimeout('moveBack1()', slideSpeed);slideMenu(-10)} else {clearTimeout(moving);moving=setTimeout('null',1)}} function slideMenu(num){ if (IE) {ssm.pixelLeft = num;} if (NS6) {ssm.left = parseInt(ssm.left) num "px";} if (NS) {ssm.left = parseInt(ssm.left) num; bssm.clip.right =num;bssm2.clip.right =num;}} function makeStatic() { if (NS||NS6) {winY = window.pageYOffset;} if (IE) {winY = truebody().scrollTop;} if (NS6||IE||NS) { if (winY!=lastY&&winY>YOffset-staticYOffset) { smooth = .2 * (winY - lastY - YOffset staticYOffset);} else if (YOffset-staticYOffset lastY>YOffset-staticYOffset) { smooth = .2 * (winY - lastY - (YOffset-(YOffset-winY)));} else {smooth=0} if(smooth > 0) smooth = Math.ceil(smooth); else smooth = Math.floor(smooth); if (IE) bssm.pixelTop =smooth; if (NS6) bssm.top=parseInt(bssm.top) smooth "px" if (NS) bssm.top=parseInt(bssm.top) smooth lastY = lastY smooth; setTimeout('makeStatic()', 1)}} function buildBar() { if(barText.indexOf('<IMG')>-1) {tempBar=barText} else{for (b=0;b<barText.length;b ) {tempBar =barText.charAt(b) "<BR>"}} document.write('<td align="center" rowspan="100" width="' barWidth '" bgcolor="' barBGColor '" valign="' barVAlign '"><p align="center"><font face="' barFontFamily '" Size="' barFontSize '" COLOR="' barFontColor '"><B>' tempBar '</B></font></p></TD>')} function initSlide() { if (NS6){ssm=document.getElementById("thessm").style;bssm=document.getElementById("basessm").style; bssm.clip="rect(0 " document.getElementById("thessm").offsetWidth " " document.getElementById("thessm").offsetHeight " 0)";ssm.visibility="visible";} else if (IE) {ssm=document.all("thessm").style;bssm=document.all("basessm").style bssm.visibility = "visible";} else if (NS) {bssm=document.layers["basessm1"]; bssm2=bssm.document.layers["basessm2"];ssm=bssm2.document.layers["thessm"]; bssm2.clip.left=0;ssm.visibility = "show";} if (menuIsStatic=="yes") makeStatic();} function buildMenu() { if (IE||NS6) {document.write('<DIV ID="basessm" style="visibility:hidden;Position : Absolute ;Left : ' XOffset 'px ;Top : ' YOffset 'px ;Z-Index : 20;width:' (menuWidth barWidth 10) 'px"><DIV ID="thessm" style="Position : Absolute ;Left : ' (-menuWidth) 'px ;Top : 0 ;Z-Index : 20;" onmouseover="moveOut()" onmouseout="moveBack()">')} if (NS) {document.write('<LAYER name="basessm1" top="' YOffset '" LEFT=' XOffset ' visibility="show"><ILAYER name="basessm2"><LAYER visibility="hide" name="thessm" bgcolor="' menuBGColor '" left="' (-menuWidth) '" onmouseover="moveOut()" onmouseout="moveBack()">')} if (NS6){document.write('<table border="0" cellpadding="0" cellspacing="0" width="' (menuWidth barWidth 2) 'px" bgcolor="' menuBGColor '"><TR><TD>')} document.write('<table border="0" cellpadding="0" cellspacing="1" width="' (menuWidth barWidth 2) 'px" bgcolor="' menuBGColor '">'); for(i=0;i<ssmItems.length;i ) { if(!ssmItems[i][3]){ssmItems[i][3]=menuCols;ssmItems[i][5]=menuWidth-1} else if(ssmItems[i][3]!=menuCols)ssmItems[i][5]=Math.round(menuWidth*(ssmItems[i][3]/menuCols)-1); if(ssmItems[i-1]&&ssmItems[i-1][4]!="no"){document.write('<TR>')} if(!ssmItems[i][1]){ document.write('<td bgcolor="' hdrBGColor '" HEIGHT="' hdrHeight 'px" ALIGN="' hdrAlign '" VALIGN="' hdrVAlign '" WIDTH="' ssmItems[i][5] '" COLSPAN="' ssmItems[i][3] '">&nbsp;<font face="' hdrFontFamily '" Size="' hdrFontSize '" COLOR="' hdrFontColor '"><b>' ssmItems[i][0] '</b></font></td>')} else {if(!ssmItems[i][2])ssmItems[i][2]=linkTarget; document.write('<TD BGCOLOR="' linkBGColor '" onmouseover="bgColor=\'' linkOverBGColor '\'" onmouseout="bgColor=\'' linkBGColor '\'" WIDTH="' ssmItems[i][5] 'px" COLSPAN="' ssmItems[i][3] '"><ILAYER><LAYER onmouseover="bgColor=\'' linkOverBGColor '\'" onmouseout="bgColor=\'' linkBGColor '\'" WIDTH="100%" ALIGN="' linkAlign '"><DIV ALIGN="' linkAlign '"><FONT face="' linkFontFamily '" Size="' linkFontSize '">&nbsp;<A HREF="' ssmItems[i][1] '" target="' ssmItems[i][2] '" CLASS="ssmItems">' ssmItems[i][0] '</DIV></LAYER></ILAYER></TD>')} if(ssmItems[i][4]!="no"&&barBuilt==0){buildBar();barBuilt=1} if(ssmItems[i][4]!="no"){document.write('</TR>')}} document.write('</table>') if (NS6){document.write('</TD></TR></TABLE>')} if (IE||NS6) {document.write('</DIV></DIV>')} if (NS) {document.write('</LAYER></ILAYER></LAYER>')} theleft=-menuWidth;lastY=0;setTimeout('initSlide();', 1)}

1.3 Fail ssmItems.js

<!-- /* Configure menu styles below NOTE: To edit the link colors, go to the STYLE tags and edit the ssm2Items colors */ YOffset=150; // no quotes!! XOffset=0; staticYOffset=30; // no quotes!! slideSpeed=20 // no quotes!! waitTime=100; // no quotes!! this sets the time the menu stays out for after the mouse goes off it. menuBGColor="black"; menuIsStatic="yes"; //this sets whether menu should stay static on the screen menuWidth=150; // Must be a multiple of 10! no quotes!! menuCols=2; hdrFontFamily="verdana"; hdrFontSize="2"; hdrFontColor="white"; hdrBGColor="#170088"; hdrAlign="left"; hdrVAlign="center"; hdrHeight="15"; linkFontFamily="Verdana"; linkFontSize="2"; linkBGColor="white"; linkOverBGColor="#FFFF99"; linkTarget="_top"; linkAlign="Left"; barBGColor="#444444"; barFontFamily="Verdana"; barFontSize="2"; barFontColor="white"; barVAlign="center"; barWidth=20; // no quotes!! barText="TUTORIAL BLOG"; // <IMG> tag supported. Put exact html for an image to show. /////////////////////////// // ssmItems[...]=[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header ssmItems[0]=["Newbie"] //create header ssmItems[1]=["Panduan Mendaftar Blogger", "http://calipso-tutorialblogger.blogspot.com/2008/06/panduan-mendaftar-google-blogger_26.html", ""] ssmItems[2]=["Buat Pos Baru", "http://calipso-tutorialblogger.blogspot.com/2008/06/bahagian-editor_26.html",""] ssmItems[3]=["Sunting Pos Lama", "http://calipso-tutorialblogger.blogspot.com/2008/06/edit-pos-yang-telah-disimpan_25.html", ""] ssmItems[4]=["Papar Bilangan Pos", "http://calipso-tutorialblogger.blogspot.com/2008/06/bilangan-pos-yang-ingin-dipapar-dalam_25.html", "_new"] ssmItems[5]=["Gadget Follower", "http://calipso-tutorialblogger.blogspot.com/2010/03/masukkan-gadget-follower-dalam-blog.html", ""] ssmItems[6]=["Alamat URL Blog", "http://calipso-tutorialblogger.blogspot.com/2008/06/apa-alamat-url-blog-anda_25.html", ""] ssmItems[7]=["FAQ", "http://http://calipso-tutorialblogger.blogspot.com/", "", 1, "no"] //create two column row ssmItems[8]=["Email", "emailto:ibnunurdin@yahoo.com", "",1] ssmItems[9]=["Lain-lain", "", ""] //create header ssmItems[10]=["Tukar Template Baru", "http://calipso-tutorialblogger.blogspot.com/2008/03/tukar-dan-ganti-blogger-template_06.html", ""] ssmItems[11]=["YM Dalam Blog", "http://calipso-tutorialblogger.blogspot.com/2010/04/yahoo-messenger-pingbox-dalam-blog.html", ""] ssmItems[12]=["Borang Online", "http://calipso-tutorialblogger.blogspot.com/2010/01/borang-online.html", ""] buildMenu(); //-->

1.3.1 Lihat tajuk dalam contoh menu TUTORIAL BLOG di sebelah kemudian lihat kod warna merah dalam fail ssmItems.js di atas bagaimana dan di mana Tajuk Menu dan pautannya dimasukkan dalam ssmItems[1] hingga ssmItems[12].

ssmItems[1]=["Panduan Mendaftar Blogger", "http://calipso-tutorialblogger.blogspot.com/2008/06/panduan-mendaftar-google-blogger_26.html", ""]

1.4 Alamat URL pautan kedua-dua fail javascript di atas dimasukkan kedalam skrip berikut (warna merah). Highlight dan salin kod berikut untuk dimasukkan kedalam kod template blog:

<script language="JavaScript1.2" src="http://sites.google.com/site/calipsoworld/home/calipso-channels/ssm.js"> //Dynamic-FX slide in menu v6.5 (By maXimus, http://maximus.ravecore.com/) //Updated July 8th, 03' for doctype bug //For full source, and 100's more DHTML scripts, visit http://www.dynamicdrive.com </script> <script language="JavaScript1.2" src="http://sites.google.com/site/calipsoworld/home/calipso-channels/ssmItems.js"> </script>

1.5 Dalam Blogger pilih Layout | Edit HTML:

1.5.1 Tandakan kotak Expand Widget Templates, paste masukkan skrip di para 1.4 di atas dalam kod template blog sebelum kod </head> dan bila selesai klik SAVE TEMPLATER:

Sekian, selamat mencuba dan selamat berjaya.

Sebarang pautan balik dari blog anda adalah sangat-sangat dihargai. URL http://calipso-tutorialblogger.blogspot.com/.

Salam hormat dari

Tutorial Blogger Blospot

Pautan Kepada Laman Web Lain Dalam Pos

Highlight teks yang ingin digunakan sebagai pautan. Sekiranya tidak ada teks yang dihighlight dengan menggunakan butang "link", menyebabkan tidak ada apa-apa yang hendak diklik untuk mencapai pautan yang dibuat.

Klik butang "link" atau gunakan 'control+shift+a' pada papan kekunci anda:

Butang 'link' yang diklik akan membuka tingkap seperti berikut menunggu alamat URL pautan dimasukkan. Taip alamat URL pautan dalam kotak teks, jangan lupa ditaip sekali dengan "http://" :

Sekiranya butang "link" tidak ada atau tidak boleh digunakan, sila taip sendiri alamat pautan seperti berikut:

<a href="http://url/">Teks pautan</a>

Sinario contoh pautan:

Katalah anda perlu memberi tahu pengunjung atau pembaca blog anda, bahawa anda telah menemui satu laman web yang sangat menarik untuk dikunjungi beralamat di http://www.lamanwebmenarik.com/. Apa yang anda harus taip sebagai contoh: Dijemput semua mengunjungi <a href="http://lamanwebmenarik.com/">laman</a> berikut kerana ianya didapati sangat berguna dan sangat menarik.

Dalam contoh di atas perkataan "laman" bila diklik oleh pengunjung akan membawa pengunjung  kepada laman web href="http://www.lamanwebmenarik.com/". Itu sahaja, perkataan "laman" ini akan dipaparkan dalam blog anda dengan warna biru dan bergaris bawah. Tag "a href" tersebut hendaklah dibuka dan ditutup dengan kurungan < >, dengan kurungan ini anda sebenarnya memberitahu komputer bahawa yang ditaip sebenarnya adalah kod HTML bukan perkataan biasa.

Alamat laman web yang menjadi pautan mesti dibuka dan ditutup dengan kurungan " " dan mesti dimulai dengan http://, jika tidak pautan yang dibuat tidak boleh digunakan.

Tag </a>itu memberi tahu komputer anda bahawa sebarang teks yang ditaip selepas daripada tag </a> adalah teks biasa tidak lagi ada kena mengena dengan pautan. Sekiranya anda terlupa meletak tag </a> menyebabkan komputer anda menganggap seluruh teks yang ditaip selepas itu sebagai teks pautan dipaparkan berwarna biru dan bergaris bawah dalam blog anda.

Nota:

Butang "Hyperlink" ini hanya terdapat sekiranya anda menggunakan browser Internet Explorer versi 5.5 untuk Windows dan yang terkemudian, browser Mozila 1.3 dan yang terkemudian (Camino / Firebird / dll).

Sekiranya anda menggunakan browser untuk Windows, kekunci pintas (shortcut) yang digunakan adalah "ctrl+shift+a".

Pautan Laman Lain Dengan Fungsi Link List

Cara-cara membuat pautan (link) pada laman lain dalam sidebar.

1. Menggunakan Blogger "Link List".

1.1 Log masuk ke dalam dashboard blogger melalui Blogger In Draft.

1.2 Dalam dashboard blogger pilih Design | Page Elements:

1.3 Pilih satu Add A Gadget di mana senarai pautan akan diletak:

1.4 Dalam tetingkap Add a Gadget seterusnya skrol ke bawah cari dan klik Link List:

1.5 Dalam tetingkap Configure Link List berikutnya isi atau pilih maklumat URL pautan yang dikehendaki:

Title - Taipkan nama tajuk gadget.
Number of links to show in list - bilangan pautan yang ingin ditunjuk - tinggalkan kosong untuk tunjuk semua pautan.
Sorting - Pilih untuk susun mengikut abjad.
New Site URL - Masukkan alamat URL pautan dalam ruangan ini.
New Site Name - Masukkan nama pautan.
Klik ADD LIST selepas masukkan satu pautan.
Selepas ADD LIST ulang semula untuk masukkan pautan yang lain.
Klik SAVE bila semua pautan telah dimasukkan.

1.6 Contoh Link List dalam sidebar blog:

Sekian, selamat mencuba dan selamat berjaya.

Sebarang pautan balik dari blog anda adalah sangat-sangat dihargai. URL http://calipso-tutorialblogger.blogspot.com/.

Salam hormat dari

Tutorial Blogger Blospot