Monday, September 5, 2011

0

Senarai Laman Web Untuk Template

  • Monday, September 5, 2011
  • Rizal
  • Sebelum menukar template sesebuah blog, perkara yang diperlukan adalah template yang hendak ditukar. Seseorang pemilik blog mesti mengetahu template bagaimana yang hendak digunakan untuk blognya.

    Jika anda seorang pemilik blog dan masih belum lagi mempunyai template yang hendak digunakan, anda boleh mendapatkan pelbagai jenis template secara percuma dan pelbagai jenis yang dirasakan sesuai untuk blog anda.

    Website untuk download template blog


    Template sesebuah blog adalah dalam format .xml (oleh itu pastikan jika anda download file dalam bentuk zip/rar, anda extract dahulu file tersebut.)

    Website untuk download template blog


    Berikut adalah antara laman web yang menyediakan pelbagai jenis template untuk blogger secara percuma.

    http://btemplates.com/
    Website untuk download template blog

    http://www.ourblogtemplates.com/
    Website untuk download template blog

    http://www.deluxetemplates.net/
    Website untuk download template blog


    http://blogtemplate4u.com/
    Website untuk download template blog

    http://www.bloggertemplatesfree.com/
    Website untuk download template blog

    http://www.btheme.info/
    Website untuk download template blog

    http://www.blogspottemplate.com/
    Website untuk download template blog


    http://www.freebloggertemplate.org/
    Website untuk download template blog


    http://www.bloggertemplateplace.com/
    Website untuk download template blog


    Anda juga boleh mendapatkan pelbagai lagi template untuk blog dengan hanya menggunakan fungsi search pada google.

    Tips: Anda tidak perlu risau jika anda gunakan banyak masa untuk memilih template yang sesuai untuk anda. Kerana itu adalah perkara biasa. Pastikan template yang anda pilih betul-betul memenuhi citarasa anda.:)


    read more
    0

    Teknik Pasang Iklan Nuffnang

  • Rizal
  • Adakah anda sudah mempunyai akaun Nuffnang.?.
    Kalau ada, dimanakah anda letakkan iklan anda itu..(skyscraper)?

    Memasang iklan secara statik adalah meletakkan iklan pada kedudukan yang tetap dalam sesebuah blog walaupun entri telah di'scroll' ke bawah



    Anda scroll macam mana pun ianya tetap berada pada kedudukan itu. Kelebihan.? Nanti akan dicerita kat bawah, jom kita tengok cara yang yang perlu dilakukan untuk letak iklan nuffnang statik ini.


    Owh, sebelum tu. Mungkin ada yang bertanya 'Letak iklan statik tidak menyalahi terma dan syarat Nuffang ke.?'

    So ini jawapan dari nuffnang sendiri.

    Yes, it is allowed for a blogger to place his ad unit static as shared by you. That position is no doubt desirable and advertisers would love to advertise on such placement.

    However, bear in mind that the desirability for a Skyscraper ad unit is the same if it\'s placed;
    - the top gadget of a sidebar
    - visible upon loading of the page
    - visible at all time (static ad)

    As such, it doesn\'t really make a big difference, but nevertheless, advertisers will pay more attention to blogs which embed the ad units as a static ad.

    Cheers,
    Robb Chew
    Blogger Relations Executive

    Nuffnang Sdn Bhd



    Cara-cara untuk letakkan iklan statik adalah seperti berikut.

    1. Login akaun Nuffnang untuk pastikan kod iklan Nuffnang untuk Skyscraper



    2. Copy kod di bawah, kemudian letakkan di HTML/javascript dalam blog anda
    ( Dashboard > Layout > Page elements > Add a gadget > HTML/javascript )
    Kalau masih tak faham rujuk sini.

    <div style='display:scroll; position:fixed; bottom:5px; right:5px;'>Letak Kod Nuffnang Sini</div>



    Penerangan :
    i.) Nilai 5px boleh diubah. Nilai ini menentukan jarak dari bawah dan jarak dari kanan.
    ii.) Masukkan kod iklan Nuffnang yang diambil dari step 1. (pastikan kod adalah untuk Skyscraper)


    UPDATE: Jika anda hendak kod bersama tulisan kelip² "aik, takkan tengok je" kodnya adalah seperti dibawah.

    <div style='display:scroll; position:fixed; bottom:5px; right:5px;'><blink>Ai, takkan tengok je.:)</blink>Letak Kod Nuffnang Sini</div>



    3. Save, kemudian lihat kesannya dalam blog anda.:)

    Bagaimana, senang bukan..:)

    -----------------------------------------------------------

    Kelebihan meletakkan iklan secara statik.

    1. Kebarangkalian untuk pengunjung melihat iklan itu adalah sangat tinggi. Kerana ianya muncul sentiasa walaupun scroll ke bawah.

    2. Kebarangkali untuk klik juga adalah tinggi.

    3. Advertiser lebih berminat untuk beriklan di blog anda.

    4. Berdasarkan kepada no1,2 dan 3, maka earning anda pun akan bertambah..:)

     

    read more
    0

    Kanta Pembesar Gambar

  • Rizal
  • Image magnify merupakan salah satu kesan khas yang digunakan terhadap gambar yang dipost dalam sesebuah entri untuk mencantikkan dan menjadikan ianya lebih unik berbanding kaedah² yang melihat gambar yang lain.

    Contoh gambar yang diaplikasikan image magnify ini boleh dilihat disini, Image Magnify - Test Mode



    Dengan menggunakan image magnify, gambar dapat dipertontonkan kepada pengunjung samada untuk diperbesarkan atau diperkecilkan tanpa memerlukan dibuka kepada new tab. dan yang menariknya cara zoom in dan zoom out ini mempunyai kesan khas yang menakjubkan.

    Berikut adalah tutorial untuk image magnify ini.


    1) Copy code di bawah, kemudian letakkan di HTML/javascript dalam blog anda.
    (Dashboard > layout > add page element > HTML/javascript )
    Jika masih tidak jelas lagi, klik sini.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

    <script src="
    http://www.yourjavascript.com/610310434009/unwanted86.blogspot.com.js" type="text/javascript">

    /***********************************************
    * Kod telah di'edit' oleh unwanted
    * Pastikan notis ini tidak dibuang untuk menghargai kerja² edit yang dilakukan oleh unwanted
    * -- Sharing Is Caring -- http://www.unwanted86.blogspot.com --
    ***********************************************/
    </script>



    2) Apabila sudah letak code tu, save sahaja seperti biasa..

    Siap untuk bahagian letakkan kod asas..

    Seterusnya, adalah kod yang anda perlu letakkan bersama dengan url gambar yang anda hendak post dalam blog..(kod asas tadi perlu letak sekali je. Kod bawah ini diperlukan untuk membuat kesan tersebut pada gambar.)


    <img src="url gambar disini" class="magnify" data-magnifyby="2" style="width:200px; height:150px cursor: url(magnify.cur), -moz-zoom-in; " />



    Keterangan :

    • url gambar disini : Masukkan url gambar.

    • 2 : Skala pembesaran. Bergantung kepada width dan height. Nilai lebih besar dari 1 akan membesarkan gambar, nilai kurang dari satu akan mengecilkan gambar contoh 0.5

    • 200 : Masukkan lebar gambar yang anda rasakan bersesuaian

    • 150 : Masukkan tinggi gambar yang anda rasakan bersesuaian
    •  

     

    read more
    0

    Website Lain Dalam Blog

  • Rizal
  • Pernahkah anda terpikir untuk meletakkan satu ruangan website lain dalam blog anda.?
    Seperti anda meletakkan website google, yahoo dan pelbagai lagi dalam blog anda.
    Ini membolehkan pengunjung blog anda melayari web lain tanpa meninggalkan blog anda.:)

    Letak Website Lain Dalam Blog


    Meletakkan website dalam blog masih boleh dilakukan dengan hanya menggunakan kod html/javascript

    Klik disini untuk lihat demo website yang diletakkan dalam blog.

    Berikut adalah langkah-langkah untuk tutorial ini.

    1. Login akaun blogger, kemudian dari dashboard > layout > add a gadget
    Letak Website Lain Dalam Blog


    2. selepas klik pada add a gadget, pilih HTML/javascript
    Letak Website Lain Dalam Blog


    3. Copy code di bawah kemudian pastekan dalam ruangan html/javascript


    <!--CHANGE LINKS BELOW TO YOUR OWN-->
    <a href="javascript:jumpto('http://www.google.com')">Google</a> |
    <a href="javascript:jumpto('http://www.yahoo.com')">Yahoo</a> |

    <script language="javascript">
    <!--


    //Specify display mode (0 or 1)
    //0 causes document to be displayed in an inline frame, while 1 in a new browser window
    var displaymode=0
    //if displaymode=0, configure inline frame attributes (ie: dimensions, intial document shown
    var iframecode='<iframe id="external" style="width:99%;height:400px" src="http://www.google.com"></iframe>'

    /////NO NEED TO EDIT BELOW HERE////////////

    if (displaymode==0)
    document.write(iframecode)

    function jumpto(inputurl){
    if (document.getElementById&&displaymode==0)
    document.getElementById("external").src=inputurl
    else if (document.all&&displaymode==0)
    document.all.external.src=inputurl
    else{
    if (!window.win2||win2.closed)
    win2=window.open(inputurl)
    //else if win2 already exists
    else{
    win2.location=inputurl
    win2.focus()
    }
    }
    }
    //-->
    </script>



    Penerangan :
    -Google: Gantikan dengan nama yang anda mahu
    -www.google.com: Gantikan dengan website yang anda mahu


    4. Save, klik preview dan jika berpuas hari, klik save.:)

     

    read more
    0

    Dropdown Menu

  • Rizal
  • Dropdown menu dapat mengurangkan ruang yang digunakan pada paparan blog untuk meletakkan pelbagai link. Antara kegunaan dropdown menu adalah untuk meletakkan link kawan², link rujukan, link tips dan pelbagai lagi.

    Contoh dropdown menu adalah seperti berikut

    Cara Buat Dropdown Menu


    Tutorial untuk membuat dropdown menu ini adalah seperti berikut.

    1. Login akaun blogger anda, dari dashboard > layout > page element > add a gadget > HTML/javascript

    2. Copy code berikut ke dalam ruangan html/javascript. (jika tidak faham rujuk sini)

    <select onChange="document.location.href=this.options[this.selectedIndex].value;">
    <option selected>Tajuk</option>
    <option value="Link 1">Text 1</option>
    <option value="Link 2">Text 2</option>
    </select>



    penerangan :
    Link 1: Masukkan link untuk dibuka
    Text 1: Masukkan perkataan/ayat untuk link

    Jika anda hendak masukkan lebih banyak menu, cuma copy paste <option value="Link 2">Text 2</option> dan letakkan sebelum </select>
    3. Apabila selesai, save hasil kerja anda.:)


    TAMBAHAN:
    Untuk kod di atas, apabila link akan dibuka pada page yang sama. Untuk buka link pada page/window yang berlainan, sila tukarkan kod:

    <select onChange="document.location.href=this.options[this.selectedIndex].value;">



    kepada kod ini.

    <select onchange="javascript:window.open(this.options[this.selectedIndex].value);">



    Mudah bukan.
    Selamat mencuba.:)

     

    read more
    0

    Website Lain Dalam Entri

  • Rizal
  • Sebelum ini sudah terdapat tutorial yang menerangkan bagaimana untuk meletakkan website dalam blog. Untuk tutorial tersebut memerlukan anda untuk copy paste code dalam ruangan html/javascript. Tutorial tersebut sesuai untuk meletakkan website lain secara kekal di dalam blog yang akan dilihat setiap masa walau page mana yang dibuka dalam blog tersebut.


    Bagaimana pula untuk meletakkan website hanya di dalam sesebuah entri.?

    Tutorial ini pula akan menunjukkan cara untuk meletakkan website lain dalam entri blog dengan cara paling mudah..


    Apabila anda menaip dalam blog anda, cuma tambahkan code ini untuk meletakkan website lain dalam entri blog anda.

    <iframe src="LINK DISINI" width="98%" height="400" border="1"></iframe>



    Link Disini : Masukkan url website yang anda kehendaki, contoh http://www.google.com
    (pastikan anda tidak tertinggal http:// )

    Contoh meletakkan youtube dalam entri blog adalah seperti berikut.



    Jadi, jika anda membuat entri yang memerlukan pengunjung blog anda membuka website lain(mungkin sebagai bukti atau apa), biarkan pengunjung anda mencari terus di dalam entri yang anda post.:)

     

    read more
    0

    Scrolling Text

  • Rizal
  • Membuat perkataan yang bergerak dapat menarik minat pengunjung terhadap pergerakan tersebut seterusnya menarik minat pengunjung apa yang ingin disampaikan oleh pemilik blog. Selain dikenali sebagai scrolling text, ianya juga dikenali sebagai marquee text.

    Cara Buat Perkataan Bergerak

    Walaupun pergerakan ini menarik minat, tetapi tidak digalakkan untuk diletakkan terlalu banyak di dalam blog kerana dibimbangi keadaan 'menarik' bertukar 'menyerabutkan'.:)

    Berikut adalah tutorial untuk membuat perkataan bergerak.
    Tutorial ini akan dimulakan dengan kaedah paling asas dan juga diletakkan penambahan.

    1. Kod asas untuk perkataan bergerak (dari kiri ke kanan adalah)

    <marquee>Contoh scrolling text</marquee>


    Output untuk kod ini seperti berikut:
    Contoh scrolling text

    2. Ubah pergerakan perkataan 
    Penambahan kod berikut diperlukan dalam kod asal.

    direction="left"
    direction="right"
    direction="up"
    direction="down"



    Berikut contoh kod untuk pegerakan dari kanan ke kiri

    <marquee direction="right" >Contoh scrolling text</marquee>


    Output untuk kod ini adalah
    Contoh scrolling text

    3.Ubah warna background 
    Untuk ubah background, perlu diletakkan kod berikut

    bgcolor="#kod warna"


    Senarai kod warna boleh didapati disini.

    Contoh kod yang diletakkan background,

    <marquee direction="right" bgcolor="#99CCFF">Contoh scrolling text</marquee>


    Output untuk kod ini adalah
    Contoh scrolling text

    4. Perkataan dalam keadaan 'anjal'
    Penambahan kod berikut diperlukan ke dalam kod asal.

    behavior="alternate"


    contoh kod yang diletakkan trick ini.

    <marquee behavior="alternate" bgcolor="#99CCFF">Contoh scrolling text</marquee>


    Output untuk kod ini
    Contoh scrolling text

    5.Ubah kelajuan perkataan.
    Pergerakan juga dapat diubah dengan menambah kod berikut

    scrollamount="2"


    Contoh kod dengan trick ini.

    <marquee behavior="alternate" direction="left" bgcolor="#99CCFF" scrollamount="2">Contoh scrolling text</marquee>


    Output:
    Scrollamount :2
    Contoh scrolling text

    Scrollamount :4
    Contoh scrolling text

    6. Pause apabila cursor dilalukan.
    Perkataan yang bergerak juga dapat dihentikan apabila dilalukan cursor. Kebiasaannya ini untuk memudahkan pengunjung untuk membaca apa yang ingin disampaikan tanpa ganguan.

    Penambahan kod yang perlu dilakukan adalah

    onmouseover="this.stop()" onmouseout="this.start()"


    Contoh kod dengan trick ini.

    <marquee behavior="alternate" direction="left" bgcolor="#99CCFF" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" >Contoh scrolling text</marquee>


    output untuk trick ini.
    Contoh scrolling text


     

     

    read more
    0

    Recent Comment Terbaik

  • Rizal
  • Meletakkan 'recent comments' adalah cara yang paling mudah untuk mengetahui entri manakah yang paling latest menerima komen samada dari pengunjung blog ataupun tuan punya blog.
     

    Letak 'Recent Comments' dalam Blog


    Walaupun terdapat pelbagai cara untuk meletakkan 'recent comments' ini, tetapi cara yang akan ditunjukkan ini merupakan antara cara paling ringkas untuk meletakkan widget ini.

    Tutorialnya adalah seperti berikut.

    1. Login akaun blogger, kemudian dari dashboard > Design > add a gadget >HTML/javascript

    2. Kemudian masukkan kod di bawah ke dalam HTML/javascript 

    <script style=text/javascript src=http://www.freewebs.com/filer/blogger/rc1blogger.js ></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://URL blog anda/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><small><a href="http://tutorialuntukblog.blogspot.com/2010/08/letak-recent-comments-dalam-blog.html" target="_blank"/>Get widget here </a></small> 
     


    Nota: tukarkan URL blog anda dalam kod di atas dengan url blog anda.

    3. Save dan tengok hasilnya..:)


    TAMBAHAN:Ubahsuai juga boleh dilakukan seperti berikut.

    1. Jumlah komen yang ditetapkan untuk dipapar adalah 5. Anda boleh mengubah bilangan komen yang dipaparkan. Lihat kod dibawah sebagai rujukan. Bilangan yang dicadangkan adalah antara 4 - 8

    ....a_rc=5;var m_rc=false...


    2.Jumlah perkataan yang ditetapkan untuk satu comment adalah termasuk nama pengomen adalah 100. Anda boleh menukar jumlah tersebut mengikut keselesaan anda.
    var o_rc=100;


    3. Tarikh untuk komen juga boleh ditambah. Caranya tukar perkataan dalam kod berikut daripadafalse kepada true.
    var m_rc=false;var n_rc=true;var o_rc=100


    Selamat mencuba..:)

     

    read more
    0

    Letak Button Naik Ke Atas Semula

  • Rizal
  • Meletakkan button 'back to top' biasanya digunakan untuk blogger yang kebiasaannya mempunyai entri yang panjang, ataupun entri blog tersebut sentiasa mempunyai komen yang banyak atau mungkin juga sebagai penyeri agaknya.:)
    anda boleh melihat contoh back to top button di blog demo ini.





    Walaupun terdapat pelbagai cara yang agak advance dengan kesan yang lagi hebat-hebat, tetapi entri ini akan menunjukkan cara yang paling ringkas untuk meletakkan button back to top ini. Tidak perlu pening kepala kerana ia hanya menggunakan beberapa step sahaja.:)

    Berikut adalah tutorial untuk meletakkan button back to top dalam blog.


    1. Login akaun blog anda, kemudian dari dashboard > design > add a gadget > html/javascript

    2. Paste kod di bawah ke dalam ruangan html/javascript

    <a title="Back to Top" href="#" style="position: fixed; bottom: 5px; right: 5px;"><img src="Url gambar"></a>


    Masukkan url gambar dengan url gambar 'arrow back to top' anda.

    Disini ada beberapa jenis arrow diletakkan, hanya untuk memudahkan. Tetapi jika anda ingin mencari pelbagai lagi jenis back to top arrow, anda Google sahaja.





    http://img338.imageshack.us/img338/9871/2evyotw.gif


    http://img132.imageshack.us/img132/5848/totopbutton.png


    http://img175.imageshack.us/img175/7297/up3.png


    http://img28.imageshack.us/img28/2494/30720265.png


    http://img529.imageshack.us/img529/1986/96133335.png


    http://img294.imageshack.us/img294/9831/14193731.gif


    3. Apabila selesai save dan lihatlah hasilnya.:)
    read more
    0

    Tukar Arrow Cursor

  • Rizal
  • Menukar cursor untuk blog anda dapat menghilangkan rasa bosan melihat cursor default yang digunakan oleh komputer anda.(berbentuk anak panah putih). Atau mungkin juga anda inginkan sedikit kelainan pada cursor berbanding cursor biasa.

    Tutorial kali ini ialah berkongsi website yang dapat memudahkan anda mendapatkan kod bagi cursor ini serta sedikit pengubahsuaian pada kod tersebut.

    1. Buka website http://www.cursors-4u.com/

    2. Pilih cursor kegemaran anda. (Pastikan anda TIDAK mengambil cursor yang jenis animated, kerana ianya hanya berfungsi dalam IE)

    3. Copy code yang diberikan. Contoh kod adalah seperti berikut. Kemudian DELETE kod yang telahdiwarnakan seperti dibawah

    <style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style><a href="http://www.cursors-4u.com/cursor/2008/12/17/cool-blue-outer-glow-pointer.html" target="_blank" title="Cool Blue Outer Glow Pointer"><img src="http://cursors-4u.com/support.gif" border="0" alt="Cool Blue Outer Glow Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>

    4. Kod akhir sepatutnya kelihatan seperti ini sahaja.
    <style type="text/css">body, a, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-2/cur116.cur), progress;}</style>

    5. Kemudian dari dashboard anda > design > add a gadget > HTML/javascript, pastekan kod di atas diruangan tersebut.

    6. Save dan lihat hasilnya.

    Mudah bukan.:)

     

     

    read more
    0

    Animasi Post Widget

  • Rizal
  • Meletakkan animated recent post widget dapat men'stail'kan lagi cara paparan recent post yang ada pada blog anda. Contoh recent post widget adalah seperti berikut.

    (tunggu page habis load utk tengok pergerakan, pergerakan sebenar adalah lebih perlahan dan lancar)



    Berikut adalah cara-cara untuk menggunakan widget ini.

    1. Dari dashboard > design > add a gadget > HTML/javascript

    2. copy code berikut dan paste di ruangan HTML/javascript


    <center><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
    <style type="text/css" media="screen">
    <!--

    #spylist {
    overflow:hidden;
    margin-top:5px;
    padding:0px 0px;
    height:350px;
    }
    #spylist ul{
    width:220px;
    overflow:hidden;
    list-style-type: none;
    padding: 0px 0px;
    margin:0px 0px;
    }
    #spylist li {
    width:208px;
    padding: 5px 5px;
    margin:0px 0px 5px 0px;
    list-style-type:none;
    float:none;
    height:70px;
    overflow: hidden;
    background:#fff repeat-x;
    border:1px solid #ddd;
    }

    #spylist li a {
    text-decoration:none;
    color:#4B545B;
    font-size:11px;
    height:18px;
    overflow:hidden;
    margin:0px 0px;
    padding:0px 0px 2px 0px;
    }
    #spylist li img {
    float:left;
    margin-right:5px;
    background:#EFEFEF;
    border:0;
    }
    .spydate{
    overflow:hidden;
    font-size:10px;
    color:#0284C2;
    padding:2px 0px;
    margin:1px 0px 0px 0px;
    height:15px;
    font-family:Tahoma,Arial,verdana, sans-serif;
    }

    .spycomment{
    overflow:hidden;
    font-family:Tahoma,Arial,verdana, sans-serif;
    font-size:10px;
    color:#262B2F;
    padding:0px 0px;
    margin:0px 0px;
    }

    -->
    </style>
    <script language='javascript'>

    imgr = new Array();
    imgr[0] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
    imgr[1] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
    imgr[2] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
    imgr[3] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
    imgr[4] = "http://2.bp.blogspot.com/_CEj8AwvwSNM/TPkQUkM0wnI/AAAAAAAAFD8/TxYWe-CMPr8/s320/no_image.gif";
    showRandomImg = true;
    boxwidth = 255;
    cellspacing = 6;
    borderColor = "#232c35";
    bgTD = "#000000";
    thumbwidth = 70;
    thumbheight = 70;
    fntsize = 12;
    acolor = "#666";
    aBold = true;
    icon = " ";
    text = "comments";
    showPostDate = true;
    summaryPost = 40;
    summaryFontsize = 10;
    summaryColor = "#666";
    icon2 = " ";
    numposts = 10;
    home_page = "http://URL BLOG.blogspot.com/";
    limitspy=4
    intervalspy=4000
    </script>

    <div id="spylist">
    <script src='https://sites.google.com/site/unwanted86/javascript/animatedrecentpost.js' type='text/javascript'></script>
    </div>
    </center>
    <small><a href="http://tutorialuntukblog.blogspot.com/2010/08/animated-recent-post-widget.html" target="_blank">get this widget here</a></small>


    Note: gantikan URL BLOG dengan url blog anda..

    3. Save dan lihat hasilnya.

    -------------------

    PERHATIAN: Didapati tidak semua template blog 'boleh masuk' dengan widget ini. Kemungkin sebahagian besar boleh menggunakan widget ini. Oleh itu anda boleh mencuba dahulu samada boleh guna atau tidak untuk blog anda. Masih belum jumpa penyelesaian untuk itu.

    Harap blog anda boleh menggunakan widget ini.
    Selamat mencuba.:)
    read more
    0

    Recent Post Dengan Thumbnail

  • Rizal
  • Penggunaan widget recent post adalah penting untuk menunjukkan kepada pengunjung apa entri-entri terbaru yang terdapat dalam blog. Lagi berguna jika pengunjung yang datang bukannya dari frontpage. Jadi widget recent post sangat penting ketika ini.

    Sebelum ini sudah diletakakn Animated recent post widget,tetapi untuk kali ini, tutorial akan menunjukkan cara meletakkan recent post widget, tetapi jenis statik.

    Contoh adalah seperti gambar ini.


    Cara-cara untuk meletakkan widget ini adalah seperti berikut:

    1. Dari dashoard > desin > add a gadget > HTML/javascript

    2. Dalam ruangan HTML/javascript, masukkan kod berikut.

    <script language="JavaScript">

    imgr = new Array();


    imgr[0] = "http://3.bp.blogspot.com/_CEj8AwvwSNM/TSBlHGugCBI/AAAAAAAAFPA/Z5MTCuXMpEs/no_image.gif";

    imgr[1] = "http://3.bp.blogspot.com/_CEj8AwvwSNM/TSBlHGugCBI/AAAAAAAAFPA/Z5MTCuXMpEs/no_image.gif";

    imgr[2] = "http://3.bp.blogspot.com/_CEj8AwvwSNM/TSBlHGugCBI/AAAAAAAAFPA/Z5MTCuXMpEs/no_image.gif";

    imgr[3] = "http://3.bp.blogspot.com/_CEj8AwvwSNM/TSBlHGugCBI/AAAAAAAAFPA/Z5MTCuXMpEs/no_image.gif";

    imgr[4] = "http://3.bp.blogspot.com/_CEj8AwvwSNM/TSBlHGugCBI/AAAAAAAAFPA/Z5MTCuXMpEs/no_image.gif";
    showRandomImg = true;

    boxwidth = 298;

    cellspacing = 8;

    borderColor = "#ffffff";

    bgTD = "#000000";

    thumbwidth = 40;

    thumbheight = 40;

    fntsize = 12;

    acolor = "#666";

    aBold = true;

    icon = " ";

    text = "comments";

    showPostDate = false;

    summaryPost = 40;

    summaryFontsize = 10;

    summaryColor = "#666";

    icon2 = " ";

    numposts = 5;

    home_page = "http://URL ANDA.blogspot.com/";

    </script>

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


    Note:

    Anda boleh ubah beberapa kod mengikut kesesuaian blog anda.

    boxwidth - lebar widget
    cellspacing - jarak antara cell (default sudah ok)
    borderColor - Warna background (untuk melihat senarai kod warna, RUJUK SINI)
    thumbwidth & thumbheight - lebar dan tinggi thumbnail (default sudah ok)
    fntsize - Size untuk tajuk
    acolor - Warna tajuk.untuk melihat senarai kod warna, RUJUK SINI)
    aBold - Mahu tajuk di'tebalkan' atau tidak (true or false)
    numposts - Bilangan recent post yang dikehendak
    home_page : http://URL ANDA.blogspot.com/ (Gantikal URL ANDA dengan url blog anda)


    3. Save dan lihat hasilnya.:)

    -----------------

    -Bagi yang buat tetapi tidak menjadi, dari dashboard > settings > site feed
    - Pada allow site feeds, pilih FULL

     

     

    read more
    0

    Jumlah Post dan Komen Dalam Blog

  • Rizal
  • Berapakah bilangan post dan bilangan komen yang anda terima bagi keseluruhan selama anda berblogging.? Jika itu yang menjadi persoalan, jawapannya adalah mudah sekali.:)



    Ikuti tutorial di bawah.

    1. Login akaun blogger, dari dashboard > design > add a gadget > HTML javascript
    (masih tidak faham? rujuk sini )

    2. Copy kod di bawah dan letakkan ke dalam ruangan HTML/javascript

    <center><script style="text/javascript">
    function totalPosts(json) {
    document.write('Total Posts: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
    }
    function totalComments(json) {
    document.write('Total Comments: <b>' + json.feed.openSearch$totalResults.$t + '</b><br>');
    }
    </script>
    <script src=" /feeds/posts/default?alt=json-in-script&callback=totalPosts"></script>
    <script src=" /feeds/comments/default?alt=json-in-script&callback=totalComments"></script></center>
    <small><a href="http://tutorialuntukblog.blogspot.com/2011/01/ketahui-jumlah-post-dan-jumlah-komen.html" target="_blank">get this</a></small>
     


    3. Save. Itu sahaja dan lihat hasilnya.:)

     

     

    read more
    0

    Facebook Like Button

  • Rizal
  • Bagaimana anda hendak menentukan secara rawak berapa ramai yang suka blog anda.?.
    Salah satu daripadanya adalah dengan meletakkan button 'like' untuk blog.

    Jika tutorial meletakkan button 'like' dalam entri merujuk kepada pengunjung yang suka pada entri anda, meletakkan button 'like' ini pula akan merujuk kepada bilangan pengunjung yang suka blog anda secara keseluruhannya.

    Anda boleh menggunakan kod yang diberi untuk diletakkan di sidebar blog anda



    Tutorial untuk meletakkan button ini seperti di bawah.

    1. Login akaun blogger, dari dashboard > design > add a gadget > HTML javascript

    2. Copy dan paste kod di bawah ke dalam ruangan HTML/javascript


    <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-ANDA.blogspot.com&layout=standard&show_faces=false&width=280&action=like&font=arial&colorscheme=light&height=40"></iframe>
     


    note: Gantikan URL-ANDA dengan url blog anda

    3. Save dan lihat hasilnya.:)

    p/s: Apabila seseorang 'like', akan keluar di wall orang yang like tentang blog anda dan secara tidak langsung dapat meningkatkan trafik blog anda.:)

     

    read more
    0

    Title Bergerak

  • Rizal
  • Sebelum ini sudah ada tutorial untuk buat title blog bergerak dari kanan ke kiri, untuk kali ini, dibawakan terus title bar generator.

    contoh title bar (title blog)



    Pilihan yang ada untuk title bar maker ini.


    Anda boleh memilih pelbagai jenis gerakan yang anda mahukan dan setting yang begitu mudah.

    Title bar generator adalah seperti di bawah.

     

    1. Masukkan maklumat yang anda mahu.

    2. Klik preview untuk tengok contoh paparan. Dan jika berpuas hati, klik pada 'OK, generate code!'

    3. Code yang anda perolehi, copy dan paste pada HTML/javascript blog anda.
    (dashboard > design > add a gadget > HTML/javascript ) [link tutorial]

    4. Siap. Senang dan mudah kan.:)


     

     

    read more
    0

    Bintang Pada Cursor

  • Rizal
  • Adakah anda suka kalau cursor yang anda guna untuk blog ada beberapa bintang kecil berwarna yang mengikutinya.? Contoh macam gambar di bawah.




    Kalau anda suka, ini ada tutorialnya.:)



    1. Dari dashboard > design > add a gadget > HTML/javasrcript [link]

    2. Copy code di bawah mengikut kesukaan anda dan paste ke dalam HTML/javascript

    i) Following star warna warni


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


    ii) Following star warna biru

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


    iii) Following star warna purple

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



    3. Save dan lihat hasilnya.:)
    read more
    0

    Imotion Icon Dalam Komen

  • Rizal
  • Kebiasaannya komen dalam blog anda adalah dalam bentuk perkataan semata-mata. Tetapi mahukah kalau komen untuk blog anda juga boleh diletakkan emotion.?
    Tentu lebih menarik dengan adanya emotion.

    Tutorial untuk letakkan emotion icon dalam komen adalah seperti berikut.

    1. Dari dashboard > design > edit HTML > Expand widget template



    2. Backup template (download full template) anda untuk langkah berjaga². (more info)

    3. Menggunakan fungsi find,(ctrl + F) cari </body> dan letakkan kod di bawah sebelum </body>


    <script src='https://sites.google.com/site/unwanted86/javascript/emotionicon.js' type='text/javascript'/>

    contoh:


    4. Menggunakan fungsi find lagi, (ctrl + F), cari <b:if cond='data:post.embedCommentForm'> dan letakkan kod di bawah selepas kod <b:if cond='data:post.embedCommentForm'>


    <div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
    <b>To Use A Smiley In Your Comment, Simply Add The Characters Beside Your Choosen Smiley To The Comment:
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
    <img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =)) <a href='http://tutorialuntukblog.blogspot.com/2011/05/letak-emotion-icon-dalam-komen.html'target="_blank"><small>Grab tutorial here</small></a>
    </b>
    </div>


    contoh:


    5. Save dan lihat hasilnya di ruangan komen anda.:)
    read more
    1

    Tutorial Huruf Ikut Mouse

  • Rizal
  •  Ingin perkataan mengikut cursor anda semasa melayari blog.?

    Contohnya seperti di bawah.







    Tutorial untuk buat perkataan bergerak mengikut cursor adalah seperti berikut.

    1. Dari dashboard > design > add a gadget > HTML/javascript (more info
    )
    2. Copy dan paste kod berikut dalam html/javascript yang anda buka.


    <style type="text/css">
    /* Circle Text Styles */
    #outerCircleText {
    font-style: normal;
    font-weight: normal;
    font-family: 'comic sans';
    color: #FF0080;
    position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
    #outerCircleText div {position: relative;}
    #outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
    </style>
    <script type="text/javascript">
    ;(function(){
    var msg = "Perkataan anda di sini";
    var size = 24;
    var circleY = 0.75; var circleX = 2;
    var letter_spacing = 5;
    var diameter = 10;
    var rotation = 0.4;
    var speed = 0.2;
    if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
    msg = msg.split('');
    var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
    ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
    o = document.createElement('div'), oi = document.createElement('div'),
    b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,

    mouse = function(e){
    e = e || window.event;
    ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
    xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
    },
    makecircle = function(){ // rotation/positioning
    if(init.nopy){
    o.style.top = (b || document.body).scrollTop + 'px';
    o.style.left = (b || document.body).scrollLeft + 'px';
    };
    currStep -= rotation;
    for (var d, i = n; i > -1; --i){ // makes the circle
    d = document.getElementById('iemsg' + i).style;
    d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
    d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
    };
    },
    drag = function(){ // makes the resistance
    y[0] = Y[0] += (ymouse - Y[0]) * speed;
    x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
    for (var i = n; i > 0; --i){
    y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
    x[i] = X[i] += (x[i-1] - X[i]) * speed;
    };
    makecircle();
    },
    init = function(){ // appends message divs, & sets initial values for positioning arrays
    if(!isNaN(window.pageYOffset)){
    ymouse += window.pageYOffset;
    xmouse += window.pageXOffset;
    } else init.nopy = true;
    for (var d, i = n; i > -1; --i){
    d = document.createElement('div'); d.id = 'iemsg' + i;
    d.style.height = d.style.width = a + 'px';
    d.appendChild(document.createTextNode(msg[i]));
    oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
    };
    o.appendChild(oi); document.body.appendChild(o);
    setInterval(drag, 25);
    },
    ascroll = function(){
    ymouse += window.pageYOffset;
    xmouse += window.pageXOffset;
    window.removeEventListener('scroll', ascroll, false);
    };
    o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
    if (window.addEventListener){
    window.addEventListener('load', init, false);
    document.addEventListener('mouseover', mouse, false);
    document.addEventListener('mousemove', mouse, false);
    if (/Apple/.test(navigator.vendor))
    window.addEventListener('scroll', ascroll, false);
    }
    else if (window.attachEvent){
    window.attachEvent('onload', init);
    document.attachEvent('onmousemove', mouse);
    };
    })();
    </script>




                    
    Note: Tukar 'Perkataan anda disini' dengan apa yang anda mahu.

    3. Save dan lihat hasilnya.:)

    Bagi yang ingin sedikit ubahsuai, boleh rujuk beberapa perkara berikut.

    1.Tukar style

    font-style: normal; (pilihan lain italic, oblique, atau inherit)

    2. Tukar warna perkataan
    color: #FF0080; (untuk code warna, rujuk entri ini HTML color code

    3. Tukar jenis tulisan
    font-family: 'impact'; (pelbagai lagi bentuk perkataan yang ada, boleh rujuk dibawah)


    read more
    Bookmark and Share

    SMART mengharapkan LIKE anda

    Powered By Blogger Widgets

    Subscribe