Tutorial : jQuery Smooth Back To Top For Blogger

Salam.

Rasanya sudah terlalu lama aku tidak mengarang tutorial untuk kaki blogger. Untuk tutorial lama, sila rujuk di tab 'Tutorial Blog'. Di sana telah aku senaraikan tutorial-tutorial yang sangat berguna untuk pengguna platform Blogger. Untuk pengguna platform Wordpress, rasanya di sini bukan tempat yang sesuai untuk kalian. Maaf. Lagipun saya bukan pengguna Wordpress. Jadi saya kurang berkemahiran.

Untuk kali ini, saya bawakan kalian kepada pengguna Javascript jQuery bagi 'Back To Top'. jQuery membolehkan setiap elemen di page blog anda kelihatan cantik, menarik, dan smooth. Sebagai contoh, slideshow untuk imej, imej pop-up (seperti yang saya gunakan sekarang), menu tab slideshow, dan pelbagai method lain lagi. Mungkin ini agak sukar kepada blogger yang tidak biasa.

Saya lihat tidak ramai blogger yang menggunakan jQuery untuk Back To Top mereka. Jadi saya sediakan tutorial ini untuk anda.

Back To Top amat berguna sekiranya satu-satu page anda terlalu panjang, terutamanya entry anda yang terlalu panjang. Pembaca blog anda akan skrol makin ke bawah untuk membaca artikel anda. Jadi, untuk skrol naik semula ke atas yang menjadi masalah kepada pembaca. Jadi, Back To Top membantu pembaca untuk kembali ke paparan paling atas.

Apa beza Back To Top jQuery dengan yang biasa?

Pertama; sila lihat gambar di bawah ini untuk lihat perbezaan (klik untuk perbesarkan):

Perhatikan kotak yang bertanda merah. Ini sebelum kita skrol page ke bawah.

Perhatikan kotak yang bertanda merah. Ini selepas kita skrol page ke bawah. Imej 'Back To Top' automatik muncul setiap kali mana-mana page di blog kita di-skrol ke bawah. Untuk pra-tonton (preview), anda boleh cuba di blog ini. Cuba skrol ke atas terlebih dahulu, kemudian skrol ke bawah sedikit demi sedikit.

Kedua; cuba klik imej 'Back To Top' saya. Ia akan skrol secara smooth hingga ke paparan paling atas. Tidak seperti method 'Back To Top' yang biasa. Method 'smooth scroll' inilah yang dinamakan method jQuery.

Menarik, kan?

Bagaimana cara untuk memasangnya?

1 - Copy kod di bawah.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" >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://blog-host.googlecode.com/files/back_to_top.gif" />', //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()</script>

2 - Pergi ke 'Dashboard', klik 'Design', klik 'Add a Gadget', dan pilih 'HTML/Javascript'.

3 - Paste kod yang telah anda copy tadi.

4 - Jika anda telah apply jQuery sebelum ini di blog anda, pastikan anda buang (delete) kod yang berwarna kuning.

5 - Jika anda ingin menggunakan imej 'Back To Top' anda sendiri, ubah kod yang berwarna hijau. Jika tidak, anda boleh guna imej yang telah saya link ke server googlecode saya.

6 - Klik butang 'Save' dan cuba preview blog anda.

Kini blog anda mempunyai jQuery Back To Top!

Selamat mencuba.

TUTORIAL : Open Image In New Tab

Salam Ramadhan.

Ini adalah tutorial bagaimana mahu buat satu link image automatik terbuka pada tab browser yang baru atau dalam bahasa Inggerisnya, auto open in new tab.

READ MORE / LESS >>

Normalnya, setiap gambar yang di-upload ke dalam blog dengan menggunakan platform Blogger, ia akan secara auto mencipta link kepada gambar tersebut. Di mana, apabila gambar yang telah kita upload itu di-klik, browser akan load untuk 'preview' gambar tersebut dalam skala ukuran yang sebenar (width dan height) dalam page yang sama.

Namun, method ini biasanya menyusahkan kerana kita perlu menekan butang back untuk kembali ke laman (page) sebelumnya. Setelah butang back ditekan, browser sekali lagi akan loading page tersebut. Oleh yang demikian, 'open image in new tab' amat berguna untuk mengurangkan browser mengalami proses loading yang kerap.

Bagaimana caranya?

Okey. Kita akan buat satu eksperimen.

1) Buat satu entry baru. Kemudian upload satu gambar contoh. Saya ambil gambar kucing, seperti di bawah. Pastikan anda cipta entry pada tab 'Compose'.


2) Klik pada tab 'Edit HTML'. Editor anda akan bertukar seperti di bawah.


3) Apa yang tertera di dalam Editor tersebut adalah satu kod HTML bagi link dan gambar yang telah kita upload sebentar tadi. Maka, pada kod ini perlu kita tambah satu kod supaya gambar kita akan terbuka secara auto ke tab yang baru jika di-klik. Caranya, copy kod ini: target="_blank"

4) Kemudian, ubah kod <a dengan menambah kod yang telah anda copy tadi menjadi <a target="_blank". Lihat contoh seperti di bawah.


5) Akhir sekali, klik butang 'Publish Post' dan cuba anda preview. Klik pada imej. Adakah imej anda terbuka pada tab yang baru?

Itu saja. Mudah saja, bukan?

Cara ini adalah salah satu teknik atribut HTML yang dipanggil 'anchor'. Anda boleh membaca dan menyelidik sendiri secara terperinci di W3Schools.com. KLIK SINI untuk terus ke laman tersebut.

Diharapkan tutorial ini membantu anda. Selamat mencuba!

Unordered Linked List

Salam.

Ingin aku berkongsi sedikit tentang Unordered Link List berasaskan HTML sepertimana artikel TUTORIAL yang pernah aku buat. Aku buat list (senarai) ini berdasarkan sedikit pengalaman tentang HTML tag <ul></ul>. Tutorial ini agak advance dan sukar namun begitu, anda bebas untuk mencuba.

Read more/less..

Secara asasnya, HTML List ada dua jenis. Iaitu Ordered List (Senarai Tersusun) dan Unordered List (Seranai Tak Tersusun). Ordered List adalah senarai yang tersusun bernombor, manakala Unordered List pula adalah senarai tersusun tanpa nombor.

Korang boleh belajar dengan lebih lanjut tentang Unordered List di W3Schools.com. Segala asas HTML ada di sana jika anda benar-benar minat untuk mahir tentang HTML!

Di bawah, aku telah mengubahsuai sedikit agar list tersebut tampak seperti Linked List. Di bawah adalah kod yang aku gunakan.

<div id="BlogList999_container"><ul>

<li style="display: block;"><div class="blog-title"><img style="border: 0px solid; margin: 0px 0pt; padding: 0px;" src="http://www.readyicons.com/IconSets/Sky_Light_%28Basic%29/16x16-yes.png" /> Tajuk #1</div><div class="blog-content"><div class="item-content"><span class="item-title"><a target="_blank" href="LINK_ANDA">Link untuk Tajuk #1</a></span></div></div><div style="clear: both;"></div></li>

<li style="display: block;"><div class="blog-title"><img style="border: 0px solid; margin: 0px 0pt; padding: 0px;" src="http://www.readyicons.com/IconSets/Sky_Light_%28Basic%29/16x16-yes.png" /> Tutorial #2</div><div class="blog-content"><div class="item-content"><span class="item-title"><a target="_blank" href="http://aduka5.blogspot.com/2009/03/tutorial-cool-css-boxing-style.html">Cool CSS Boxing Style</a></span></div></div><div style="clear: both;"></div></li></ul>

</div>

Kod yang berwarna merah adalah kod yang perlu anda ubahsuai sendiri, manakala kod yang berwarna biru adalah contoh yang aku guna. Juga boleh anda ubahsuai. Jika anda mahu menambah senarai (di dalam kod hanya ada 2 senarai), sebagai contoh anda mahu 5 senarai anda hanya perlu copy dan paste kod yang berwarna merah di bawah kod yang berwarna biru.

Selamat mencuba!