Facebook like box muncul bila blog dikunjungi

Widget Facebook like box ini akan muncul apabila pengunjung memasuki blog.Mungkin anda pernah meliha widget ini dipasang pada kebanyakan blog diwaktu ini.Ia boleh dipasang pada blogger dan juga wordpress.Widget ini boleh di tutup paparannya,bukan seperti sesetengah blog yang memasangnya seolah olah memaksa pengunjung untuk klik butang like.

Cara memasangnya:

Log in keblogger
Klik pada design >>Add a gadget
Pilih HTML/javascript widget
Dan masukkan kod dibawah ini

<style>
   
    #colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
    #cboxOverlay{position:fixed; width:100%; height:100%;}
    #cboxMiddleLeft, #cboxBottomLeft{clear:left;}
    #cboxContent{position:relative;}
    #cboxLoadedContent{overflow:auto;}
    #cboxTitle{margin:0;}
    #cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
    #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
    .cboxPhoto{float:left; margin:auto; border:0; display:block;}
    .cboxIframe{width:100%; height:100%; display:block; border:0;}
   
    #cboxOverlay{background:#000;opacity:0.5 !important;}
    #colorbox{
            box-shadow:0 0 15px rgba(0,0,0,0.4);
           -moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
            -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
           }
     
    #cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGhaLZN1R6x1NW3wamOmlS2E1qOp17ekn1S1iaurJdOXKxRVQ_-hyI0SHo2hMNTd4As-2AcZQ3af_p2pNyoo21a9WNLILKIGs4-FvIJTfPtMcFU4O4LIue36HSvzPPd1vYlpkMR9cUI-o/s1600/controls.png) no-repeat 0 0;}
    #cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCww8YiDZQKU-DsSAsGMqlird7t11YZOSA_5QhKxJTVKYSPqYmcmWeLmCKGMmfBfaSgqM8PxWMVzejP90aOHN_Yc7NRxdi7OSEuVWqJySKuU6sWxvS7HqE99fh6UPYhlxAeZlgvHRRNQY/s400/border.png) repeat-x top left;}
         #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGhaLZN1R6x1NW3wamOmlS2E1qOp17ekn1S1iaurJdOXKxRVQ_-hyI0SHo2hMNTd4As-2AcZQ3af_p2pNyoo21a9WNLILKIGs4-FvIJTfPtMcFU4O4LIue36HSvzPPd1vYlpkMR9cUI-o/s1600/controls.png) no-repeat -36px 0;}
         #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGhaLZN1R6x1NW3wamOmlS2E1qOp17ekn1S1iaurJdOXKxRVQ_-hyI0SHo2hMNTd4As-2AcZQ3af_p2pNyoo21a9WNLILKIGs4-FvIJTfPtMcFU4O4LIue36HSvzPPd1vYlpkMR9cUI-o/s1600/controls.png) no-repeat 0 -32px;}
         #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCww8YiDZQKU-DsSAsGMqlird7t11YZOSA_5QhKxJTVKYSPqYmcmWeLmCKGMmfBfaSgqM8PxWMVzejP90aOHN_Yc7NRxdi7OSEuVWqJySKuU6sWxvS7HqE99fh6UPYhlxAeZlgvHRRNQY/s400/border.png) repeat-x bottom left;}
         #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGhaLZN1R6x1NW3wamOmlS2E1qOp17ekn1S1iaurJdOXKxRVQ_-hyI0SHo2hMNTd4As-2AcZQ3af_p2pNyoo21a9WNLILKIGs4-FvIJTfPtMcFU4O4LIue36HSvzPPd1vYlpkMR9cUI-o/s1600/controls.png) no-repeat -36px -32px;}
         #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGhaLZN1R6x1NW3wamOmlS2E1qOp17ekn1S1iaurJdOXKxRVQ_-hyI0SHo2hMNTd4As-2AcZQ3af_p2pNyoo21a9WNLILKIGs4-FvIJTfPtMcFU4O4LIue36HSvzPPd1vYlpkMR9cUI-o/s1600/controls.png) repeat-y -175px 0;}
         #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGhaLZN1R6x1NW3wamOmlS2E1qOp17ekn1S1iaurJdOXKxRVQ_-hyI0SHo2hMNTd4As-2AcZQ3af_p2pNyoo21a9WNLILKIGs4-FvIJTfPtMcFU4O4LIue36HSvzPPd1vYlpkMR9cUI-o/s1600/controls.png) repeat-y -211px 0;}
         #cboxContent{background:#fff; overflow:visible;}
             #cboxLoadedContent{margin-bottom:5px;}
             #cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLWhXitgFetAG7hkScZVJ7GKaWLxKcy4dJdRx9I-BoiXPE49hJSz1j7iCqnV-chz6ZbKS0te1Tuzvt1k_sn9u9kntDS2IYwcCFjztBlJbUOIf1H6o5yPYALfJ8jvoYn6kcN5qAi7-GL0U/s400/loadingbackground.png) no-repeat center center;}
             #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjk4K1OxfLvqbdxEI9AIj-e1_oX5tVTJGHRtjzpAb8t9wQTX9L2DaMhwO6ZoR1ojiX0MNPNoV2Kr0G7WytWMKqS5pRZvuBd6gll0nHN2rVaNOXWaaS8LRmmB_EpddkCP5LFUZu-UKZabQA/s400/loading.gif) no-repeat center center;}
             #cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
             #cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
             #cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{position:absolute; bottom:-29px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGhaLZN1R6x1NW3wamOmlS2E1qOp17ekn1S1iaurJdOXKxRVQ_-hyI0SHo2hMNTd4As-2AcZQ3af_p2pNyoo21a9WNLILKIGs4-FvIJTfPtMcFU4O4LIue36HSvzPPd1vYlpkMR9cUI-o/s1600/controls.png) no-repeat 0px 0px; width:23px; height:23px; text-indent:-9999px;}
             #cboxPrevious{left:0px; background-position: -51px -25px;}
             #cboxPrevious.hover{background-position:-51px 0px;}
             #cboxNext{left:27px; background-position:-75px -25px;}
             #cboxNext.hover{background-position:-75px 0px;}
             #cboxClose{right:0; background-position:-100px -25px;}
             #cboxClose.hover{background-position:-100px 0px;}
             .cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px; right:27px;}
             .cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px;}
             .cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px; right:27px;}
             .cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px;}


    /*-----------------------------------------------------------------------------------*/
    /*   Facebook Likebox popup For Blogger
    /*-----------------------------------------------------------------------------------*/
    #subscribe {
        font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
    }
    #subscribe a,
    #subscribe a:hover,
    #subscribe a:visited {
        text-decoration:none;
    }
    .box-title {
       color: #F66303;
       font-size: 20px !important;
       font-weight: bold;
       margin: 10px 0;
    border:1px solid #ddd;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    box-shadow: 5px 5px 5px #CCCCCC;
    padding:10px;
    line-height:25px; font-family:arial !important;
    }
    .box-tagline {
       color: #999;
       margin: 0;
       text-align: center;
    }
    #subs-container {
        padding: 35px 0 30px 0;
        position: relative;
    }
    a:link, a:visited {
    border:none;
    }
    .demo {
    display:none;
    }
    </style>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>

    <script src="https://sites.google.com/site/teknikbuatblog/tbb/facebook%20pop-up.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
       if (document.cookie.indexOf('visited=true') == -1) {
           var fifteenDays = 1000*60*60*24*30;
           var expires = new Date((new Date()).valueOf() + fifteenDays);
           document.cookie = "visited=true;expires=" + expires.toUTCString();
       $.colorbox({width:"400px", inline:true, href:"#subscribe"});
           }
    });
    </script>
        <!-- This contains the hidden content for inline calls -->
    
            <div style='display:none'>
       <div id='subscribe' style='padding:10px; background:#fff;'>
            <h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3>
      <center>
          <center>

    <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbloggertricks&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>

</center>
<p style=" float:right;  margin-right:35px;  font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.mybloggertricks.com">Blogger Widgets</a></p>
</div>
</div>

#Tukarkan bloggertricks pada kod diatas dengan username facebook anda

Kemudian klik pada save untuk melihat hasilnya:
Kredit untuk mybloggertricks

Cara pasang widget add me on google

Widget add me on google adalah seakan akan facebook like box.Ia adalah widget yang memaparkan jumlah follower bagi Google + Circle.Ia adalah widget yang membolehkan kita berhubung dengan pengunjung.

Langkah langkah bagi  memasangnya:
Dapatkan google+ id pada google plus profile page
Url contohnya adalah seperti dibawah ini
https://plus.google.com/b/()812701480064512353519/posts

1.Masuk ke web widgetplus.com
2.Klik pada butang get widget
3.Masukkan google+ id tadi pada tab basic setting (seperti contoh pada teks berwarna merah diatas)

   Beberapa setting lain juga boleh diubah seperti warna background,warna button,saiz  teks dan sebagainya.
4.Kemudian klik pada butang get code(yang akan muncul diatasnya) dan salin kod yang diberi
5.Masuk ke design>>Page elements>>HTML/Javascript
6.Masukkan kod pada widget dan simpan untuk melihat hasilnya.



klik butang +1 jika suka artikel ini :) :)

Cara pasang welcome image pada blog

Welcome image ini adalah imej akan terpapar bila kita mula mula masuk ke blog.Kita perlu klik pada imej tersebut bagi memasuki blog berkenaan.Rasanya dah banya blog yang memasangnya dengan berbagai bagai imej.Jika ada berminat untuk membuatnya.Ikuti langkah seterusnya:

1.Log in ke Dashboard
2.Pilih Design >>Edit HTML

3.Cari kod  ]]></b:skin> pada template
Kemudian masukkan kod dibawah ini diatasnya:

</style></head>
<script language="javascript" type="text/javascript">
function toggle(el,milli) {
// Get the opacity style parameter from the image
var currOpacity = document.getElementById(el).style.opacity;
if(currOpacity != 0) { // if not faded
fade(el, milli, 100, 0);
} else { // else the images is already faded
fade(el, milli, 0, 100);
}
}

function changeOpacity(el,opacity) {
var image = document.getElementById(el);
// For Mozilla
image.style.MozOpacity = (opacity / 100);
// For IE
image.style.filter = "alpha(opacity=" + opacity + ")";
// For others
image.style.opacity = (opacity / 100);
}

function fade(el,milli,start,end) {
var fadeTime = Math.round(milli/100);
var i = 0; // Fade Timer
// Fade in
if(start < end) {
for(j = start; j <= end; j++) {
// define the expression to be called in setTimeout()
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
// setTimeout will call 'expr' after 'timeout' milliseconds
setTimeout(expr,timeout);
i++;
}
}
// Fade out
else if(start > end) {
for(j = start; j >= end; j--) {
var expr = "changeOpacity('" + el + "'," + j + ")";
var timeout = i * fadeTime;
setTimeout(expr,timeout);
i++;
}
}
}
</script>
<div class="input" onClick="javascript:toggle('ybl', 3000); this.style.display='none';
document.getElementById('tbb').style.display=''">
<center><img src="http://i219.photobucket.com/albums/cc282/garam63/welcome.png"
style="opacity:0.4;filter:alpha(opacity=40)"
onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseout="this.style.opacity=0.7;this.filters.alpha.opacity=40"/></center>
</div>
<div id="ybl" style="filter : alpha(opacity=0); -moz-opacity : 0; opacity : 0;">
<div id="tbb" style="display : none;">
<body>

#bahagian teks berwarna merah boleh digantikan dengan url imej anda sendiri

4.Kemudian simpan template anda

klik butang +1 untuk sharing artikel ini pada google :) :)

Cara buat simbol hati(love) berguguran

Tutorial kali adalah bagi anda yang suka menghiasi blog dengan bermacam macam widget iaitu cara membuatkan simbol hati yang berguguran pada blog anda.

Langkah langkah bagi membuatnya:
Masuk ke design--Pilih page elements

Add a gadget--Pilih ruangan dibawah header

HTML/javascript

Masuk kan kod ini:

<marquee behavior=scroll direction=down scrollamount=3 scrolldelay=49 height=731 style='position:absolute; left:85%; top:6px; width:15; height:731px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjidkbiae7FYRnBzPp4Lf3DivO71VlDEpT3a1V55Y_xHPW5RuUcu4P6-1hWlGHe1uIMYQJQ73UECKIIZJ_tCr27N5u37T7TO525iY7EHgwxi0VoTxoPozRvdUYnESX7EMqIYkqwEQWkbXY/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=2 scrolldelay=22 height=755 style='position:absolute; left:9%; top:170px; width:15; height:755px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjidkbiae7FYRnBzPp4Lf3DivO71VlDEpT3a1V55Y_xHPW5RuUcu4P6-1hWlGHe1uIMYQJQ73UECKIIZJ_tCr27N5u37T7TO525iY7EHgwxi0VoTxoPozRvdUYnESX7EMqIYkqwEQWkbXY/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=7 scrolldelay=49 height=759 style='position:absolute; left:80%; top:70px; width:15; height:759px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjidkbiae7FYRnBzPp4Lf3DivO71VlDEpT3a1V55Y_xHPW5RuUcu4P6-1hWlGHe1uIMYQJQ73UECKIIZJ_tCr27N5u37T7TO525iY7EHgwxi0VoTxoPozRvdUYnESX7EMqIYkqwEQWkbXY/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=5 scrolldelay=47 height=729 style='position:absolute; left:34%; top:70px; width:15; height:729px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjidkbiae7FYRnBzPp4Lf3DivO71VlDEpT3a1V55Y_xHPW5RuUcu4P6-1hWlGHe1uIMYQJQ73UECKIIZJ_tCr27N5u37T7TO525iY7EHgwxi0VoTxoPozRvdUYnESX7EMqIYkqwEQWkbXY/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=7 scrolldelay=13 height=584 style='position:absolute; left:12%; top:128px; width:15; height:584px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjidkbiae7FYRnBzPp4Lf3DivO71VlDEpT3a1V55Y_xHPW5RuUcu4P6-1hWlGHe1uIMYQJQ73UECKIIZJ_tCr27N5u37T7TO525iY7EHgwxi0VoTxoPozRvdUYnESX7EMqIYkqwEQWkbXY/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=7 scrolldelay=7 height=789 style='position:absolute; left:48%; top:170px; width:15; height:789px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjidkbiae7FYRnBzPp4Lf3DivO71VlDEpT3a1V55Y_xHPW5RuUcu4P6-1hWlGHe1uIMYQJQ73UECKIIZJ_tCr27N5u37T7TO525iY7EHgwxi0VoTxoPozRvdUYnESX7EMqIYkqwEQWkbXY/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=4 scrolldelay=19 height=777 style='position:absolute; left:23%; top:140px; width:15; height:777px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjidkbiae7FYRnBzPp4Lf3DivO71VlDEpT3a1V55Y_xHPW5RuUcu4P6-1hWlGHe1uIMYQJQ73UECKIIZJ_tCr27N5u37T7TO525iY7EHgwxi0VoTxoPozRvdUYnESX7EMqIYkqwEQWkbXY/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=4 scrolldelay=9 height=719 style='position:absolute; left:40%; top:91px; width:15; height:719px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjidkbiae7FYRnBzPp4Lf3DivO71VlDEpT3a1V55Y_xHPW5RuUcu4P6-1hWlGHe1uIMYQJQ73UECKIIZJ_tCr27N5u37T7TO525iY7EHgwxi0VoTxoPozRvdUYnESX7EMqIYkqwEQWkbXY/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=4 scrolldelay=17 height=592 style='position:absolute; left:52%; top:181px; width:15; height:592px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjidkbiae7FYRnBzPp4Lf3DivO71VlDEpT3a1V55Y_xHPW5RuUcu4P6-1hWlGHe1uIMYQJQ73UECKIIZJ_tCr27N5u37T7TO525iY7EHgwxi0VoTxoPozRvdUYnESX7EMqIYkqwEQWkbXY/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=7 scrolldelay=23 height=795 style='position:absolute; left:10%; top:1px; width:15; height:795px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjidkbiae7FYRnBzPp4Lf3DivO71VlDEpT3a1V55Y_xHPW5RuUcu4P6-1hWlGHe1uIMYQJQ73UECKIIZJ_tCr27N5u37T7TO525iY7EHgwxi0VoTxoPozRvdUYnESX7EMqIYkqwEQWkbXY/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=4 scrolldelay=50 height=532 style='position:absolute; left:77%; top:1px; width:15; height:532px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjidkbiae7FYRnBzPp4Lf3DivO71VlDEpT3a1V55Y_xHPW5RuUcu4P6-1hWlGHe1uIMYQJQ73UECKIIZJ_tCr27N5u37T7TO525iY7EHgwxi0VoTxoPozRvdUYnESX7EMqIYkqwEQWkbXY/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=7 scrolldelay=27 height=772 style='position:absolute; left:8%; top:8px; width:15; height:772px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjidkbiae7FYRnBzPp4Lf3DivO71VlDEpT3a1V55Y_xHPW5RuUcu4P6-1hWlGHe1uIMYQJQ73UECKIIZJ_tCr27N5u37T7TO525iY7EHgwxi0VoTxoPozRvdUYnESX7EMqIYkqwEQWkbXY/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=4 scrolldelay=43 height=750 style='position:absolute; left:33%; top:174px; width:15; height:749px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjidkbiae7FYRnBzPp4Lf3DivO71VlDEpT3a1V55Y_xHPW5RuUcu4P6-1hWlGHe1uIMYQJQ73UECKIIZJ_tCr27N5u37T7TO525iY7EHgwxi0VoTxoPozRvdUYnESX7EMqIYkqwEQWkbXY/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=4 scrolldelay=44 height=556 style='position:absolute; left:92%; top:197px; width:15; height:555px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjidkbiae7FYRnBzPp4Lf3DivO71VlDEpT3a1V55Y_xHPW5RuUcu4P6-1hWlGHe1uIMYQJQ73UECKIIZJ_tCr27N5u37T7TO525iY7EHgwxi0VoTxoPozRvdUYnESX7EMqIYkqwEQWkbXY/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=7 scrolldelay=36 height=577 style='position:absolute; left:87%; top:185px; width:15; height:578px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjidkbiae7FYRnBzPp4Lf3DivO71VlDEpT3a1V55Y_xHPW5RuUcu4P6-1hWlGHe1uIMYQJQ73UECKIIZJ_tCr27N5u37T7TO525iY7EHgwxi0VoTxoPozRvdUYnESX7EMqIYkqwEQWkbXY/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=5 scrolldelay=15 height=760 style='position:absolute; left:89%; top:47px; width:15; height:759px;'><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjidkbiae7FYRnBzPp4Lf3DivO71VlDEpT3a1V55Y_xHPW5RuUcu4P6-1hWlGHe1uIMYQJQ73UECKIIZJ_tCr27N5u37T7TO525iY7EHgwxi0VoTxoPozRvdUYnESX7EMqIYkqwEQWkbXY/s1600/heart.giff" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=7 scrolldelay=8 height=786 style='position:absolute; left:29%; top:0px; width:15; height:785px;'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjidkbiae7FYRnBzPp4Lf3DivO71VlDEpT3a1V55Y_xHPW5RuUcu4P6-1hWlGHe1uIMYQJQ73UECKIIZJ_tCr27N5u37T7TO525iY7EHgwxi0VoTxoPozRvdUYnESX7EMqIYkqwEQWkbXY/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=2 scrolldelay=31 height=720 style='position:absolute; left:29%; top:108px; width:15; height:719px;'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjidkbiae7FYRnBzPp4Lf3DivO71VlDEpT3a1V55Y_xHPW5RuUcu4P6-1hWlGHe1uIMYQJQ73UECKIIZJ_tCr27N5u37T7TO525iY7EHgwxi0VoTxoPozRvdUYnESX7EMqIYkqwEQWkbXY/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=2 scrolldelay=46 height=531 style='position:absolute; left:38%; top:45px; width:15; height:530px;'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjidkbiae7FYRnBzPp4Lf3DivO71VlDEpT3a1V55Y_xHPW5RuUcu4P6-1hWlGHe1uIMYQJQ73UECKIIZJ_tCr27N5u37T7TO525iY7EHgwxi0VoTxoPozRvdUYnESX7EMqIYkqwEQWkbXY/s1600/heart.gif" border="0" /></marquee>
<marquee behavior=scroll direction=down scrollamount=6 scrolldelay=39 height=573style='position:absolute; left:73%; top:129px; width:15; height:572px;'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjidkbiae7FYRnBzPp4Lf3DivO71VlDEpT3a1V55Y_xHPW5RuUcu4P6-1hWlGHe1uIMYQJQ73UECKIIZJ_tCr27N5u37T7TO525iY7EHgwxi0VoTxoPozRvdUYnESX7EMqIYkqwEQWkbXY/s1600/heart.gif" border="0" /></marquee>

Kemudian klik butang save dan lihat hasilnya.

Ucapan kepada pengunjung bila meninggalkan blog

Kedatangan pengunjung keblog kita merupakan sesuatu yang diharapkan para blogger.Sebagai menghargainya, bolehlah kita letakkan ucapan  yang akan terpapar bila pengunjung hendak meninggalkan blog kita.

Dibawah ini adalah cara membuatnya.

Masuk kedesign terlebih dahulu-Klik pada edit Html

dan cari kod </head> pada template

Kemudian masukkan kod dibawah ini selepas kod </head>

<script type='text/javascript'>
// goodbye alert
function goodbye(){
alert(&#39; Terima Kasih kerana berkunjung,sila datang lagi.. &#39;);
}
parent.window.onunload=goodbye;
</script>

Gantikan teks berwarna hijau dengan teks yang anda inginkan
Dan seterusnya  klik save template.

pasang radio online pada blog

Radio era adalah antara stesyen radio yg diminati.Mungkin ada yg berminat hendak memasang radio era blog masing masing .Berikut adalah cara memasangnya:

masuk ke design--page elements.

add a gadget

 dan pilih HTML/Javascript

dan masukkan kod dibawah ini:

<center><div></div><div><object type="application/x-shockwave-flash" data="http://ads.era.fm/inc/app/shared/dvrplayer/capsules/radioactive/amp_flash/era/era.swf" width="145" height="50"></object></div></center>

 Radio sinar FM

<embed name="plugin" src="http://ads.sinar.fm/inc/app/shared/dvrplayer/capsules/sinar.swf" type="application/x-shockwave-flash" width="199px" height="46px"></embed>

saiz boleh diubah pada width dan height pada kod diatas.

 Hitz Fm

<center><iframe src="http://ads.hitz.fm/inc/app/shared/dvrplayer/capsules/radioactive/amp_flash/hitz/index_t.html" width="640" height="360" scrolling="no" frameborder="0"></iframe></center>

 ria89.7 fm

<p><embed name="mediaplayer1" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" type="application/x-mplayer2" showstatusbar="1" enablecontextmenu="false" autostart="true" transparentstart="1" loop="0" controller="true" filename="http://www.mediacorpradio.sg/radioliveplayer/asx/ria897/fm897.asx" width="320" height="63"></embed>

kemudian klik save.

Letak favicon pada blog

Satu cara bagi blog kita dikenali adalah dengan meletak logo.Melalui logo itulah bila dilihat org akan tahu itu blog kita.Contoh logo huruf B semua org tahu bahawa ia adalah logo blogger.Dalam artikel saya sebelum ini ada tutorial cara memasukkan favicon pada blog.Blogger pula baru saja menyediakan kemudahan meletakkkan favicon pada blog kita.Jadi lebih mudah lah kerja kita hendak menukar favicon.Favicon ada lah logo kecil yg boleh kita lihat pada ruangan address bar pada browser.

Anda boleh memasukkan favicon dengan masuk ke design--page element.Jika dari paparan terbaru blogger dengan memilih tab layout.
Kemudian klik edit pada setting favicon pada bahagiian atas elemen navbar

Tetingkap baru akan muncul bagi membolehkan anda memilih imej favicon dari komputer anda.Ia hanya menyokong file ico sahaja.bagaimanapun anda boleh menukar fail jpeg,png dan lain fail yang bukan fail ico dengan perisian imej.Juga boleh menggunakan kemudahan menukar fail imej kepada ico dengan laman web yang menyediakan kemudahan menukar ico fail secara online seperti di http://www.icoconverter.com/

Bila sudah memasukkan fail ico yang dikehendakki kemudian klik butang save dan favicon tersebut akan muncul pada bahagian page element.

 
Seterusnya save template dan anda akan dapati ia akan muncul pada ruangan url pada browser.
Kalau dah ada favicon sebelum perlu dihapuskan terlebih dahulu.

Letak ikon label,author dan tarikh dibawah tajuk posting

Kebiasaannya ikon ikon ini berada dibawah posting.Posting kali ini akan menerangkan cara meletaknya dibawah tajuk posting

Masuk kedesign-edit HTML
Expand Widget templates

 Cari kod ini pada templates

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

dan kod ini dibawahnya:

<font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0ux6Boo8FxnvzKaGxKu2Lazu0wrIiSuFTlV3evT_2VP_ibCA9GLZoyrw3w1Aanf3zPlKkm-Ze7m6WWdqi5SvGGtgWo4Q1oBrp4SMr0qlNhns4qvEa5vI6Nfv2xkHA-HiCkGVnPg6DJ2E/s1600/editor-icon-16x16.png) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.author/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh17bnh-ezSzxwOOvNKRW7E5a6OhAb4g9mEdb8LHSzFTu4hnwR3jHnS7yjCN87-nzpk_pGnwc442AN3Cyf8zOw3PkpXIEIHE3-v6cQAHCVNVMim1r1R3ZDOiuN7WnGGhBL25U2cqsONnBg/s1600/PostDateIcon.png) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.timestamp/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCFELCJLwwRvOFeyXTEekQ3hFXlwWMmmusFIfwHHP98WP0I9R2zuR7abZ_MNGhzfompWkKpNwVDFTVOCMWKVB2baB3wNLjQLSwmLLIsHcTtQLzFybXcU81HX3jON1IBybIolv4Qp9ARR8/s1600/label+Icon.jpg) no-repeat scroll top left;padding-left:25px;font-size:11px;'><b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?max-results=8&quot;' rel='tag'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'></b:if>
</b:loop>
</b:if></font>

kemudian klik save

cara pasang menu accordion

Kebaikan Pemasangan menu accordion ini adalah ia menjimatkan ruangan pada sidebar.menu ini akan menyembunyikan widget dan akan terbuka bila dihalakan mouse cursor padanya:

 Cara memasangnya:

<style type="text/css">
h5 {
font-family: arial, trebuchet-ms, tahoma;
font-size: 13px;
font-weight:bold;
padding: 0 0 1em;

color: #ffffff;
}
.msg_list {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
.msg_head {
padding: 5px 10px;
cursor: pointer;
position: relative;
margin:1px;
background-color: #6D7B8D;
}
.msg_body {
padding: 5px 10px 15px;
background-color: #98AFC7;
}
</style>

<script type="text/javascript" src=" https://sites.google.com/site/teknikbuatblog/tbb/menuaccordion.js?attredirects=0&d=1 "></script>

<script type="text/javascript">
$(document).ready(function()
{
//hide the all of the element with class msg_body
$(".msg_body").hide();
//slides the element with class "msg_body" when paragraph with class "msg_head" is clicked
$("#firstpane h5.msg_head").click(function()
{
$(this).next("div.msg_body").slideToggle(700).siblings("div.msg_body").slideUp("slow");
});
//slides the element with class "msg_body" when mouse is over the paragraph
$("#secondpane h5.msg_head").mouseover(function()
{
$(this).next("div.msg_body").slideDown("slow").siblings("div.msg_body").slideUp("slow");
});
});
</script>

<div class="msg_list" id="secondpane">
<h5 class="msg_head">Tajuk 1</h5>
<div class="msg_body">

Masukkan kod disini.

</div>

<h5 class="msg_head">Tajuk 2</h5>
<div class="msg_body">

Masukkan kod disini.

<h5 class="msg_head">Tajuk 3</h5>
<div class="msg_body">

Masukkan kod disini.

</div>
</div>

Kod warna yang berwarna oren boleh diubah mengikut kesesuaian:

color: #ffffff;--warna font untuk tajuk
background-color #6D7B8D---warna latar belakang tajuk
background-color #98AFC7—warna latar belakang kotak accordion

kod kod widget bagi shoutbox,recents comment dan sebagainya boleh dimasukkan pada teks masukkan kod disini.
 Dan tajuk1, tajuk 2 dan tajuk 3 diatas diubah mengikut tajuk widget berkenaan

Cara pasang burung twitter terbang

Twitter adalah salah satu cara bagi mempromosi blog kita.Terdapat berbagai widget twitter,plugin dan sebagai boleh diletakkan pada blog.Tutorial Kali ini pula adalah cara memasang burung twitter yang berterbangan disekeliling blog.

Cara memasangnya:
Masuk kedesign-Page elements
Add a Gadget-HTML/Javascript
dan letakkan kod dibawah ini

<script src="https://sites.google.com/site/teknikbuatblog/tbb/burungtwitter.js?attredirects=0&amp;d=1" type="text/javascript">
</script>
<script type="text/javascript">
var twitterAccount = "username twitter anda";
var tweetThisText = " <data:blog.pageTitle/> ~ <data:blog.Url/> ";
tripleflapInit();
</script>

cara buat popular posts bergerak

Untuk membuat  popular posts bergerak seperti mana terdapat diblog ini ,kita mestilah memasang widget popular post terlebih dahulu.Jika sudah dipasang terus sahaja ke langkah 4.

Caranya :

1.Masuk ke Design-Page Elements







2.Kemudian pilih add a gadget





3.Ambil popular post







Sesudah widget tersebut dipasang

4.Seterus masuk ke design semula--edit HTML
tandakan pada expand template widget

cari kod seperti dibawah ini:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
 <b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<marquee align='left' direction='up' height='140' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='3' width='100%'>
      <b:loop values='data:posts' var='post'>
      <li>
        <b:if cond='data:showThumbnails == &quot;false&quot;'>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (1) No snippet/thumbnail -->
            <a expr:href='data:post.href'><data:post.title/></a>
          <b:else/>
            <!-- (2) Show only snippets -->
            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            <div class='item-snippet'><data:post.snippet/></div>
          </b:if>
        <b:else/>
          <b:if cond='data:showSnippets == &quot;false&quot;'>
            <!-- (3) Show only thumbnails -->
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
            </div>
            <div style='clear: both;'/>
          <b:else/>
            <!-- (4) Show snippets and thumbnails -->
            <div class='item-content'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' target='_blank'>
                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
              <div class='item-snippet'><data:post.snippet/></div>
            </div>
            <div style='clear: both;'/>
          </b:if>
        </b:if>
      </li>
      </b:loop>
   </marquee> </ul>
    <b:include name='quickedit'/></div>
  </div>
</b:includable>
</b:widget>

kod berwarna merah perlu ditambah seperti diatas
kemudian simpan template anda
Kelajuan boleh diubah pada scrollamount='3'.>ubah nilai 1 paling perlahan

Tukar perkataan pada linkwithin

Memasang widget linkwithin blog merupakan suatu perkara yang baik kerana boleh meningkatkan page view kita.Kebiasaannya perkataan seperti pada widget ini adalah you might also like atau anda mungkin juga meminati.Jika ingin menukar kepada perkataan lain berikut adalah caranya:

 Letakkan kod berikut bersama kod linkwithin

<script>linkwithin_text='teks yang anda ingin tampilkan'</script>

Sumber: http://www.linkwithin.com/faq

pasang widget follow by email

Follow  by email adalah satu widget yang baru saja keluarkan oleh blogger.Widget ini adalah bagi membolehkan pengunjung menerima artikel terbaru melalui e-mel .Widget baru ini adalah lebih memudahkan kita untuk memasangnya.

 

Cara memasangnya:

1.Masuk kedesign-page elements

2.Pilih add a gadget

3.Kemudian akan muncul paparan follow by email

4.Pada paparan seterusnya masukkan feed burner url jika telah ada url nya sebelum ini.Jika tiada blogger akan memasukkannya secara automatik. Akaun dengan feedburner juga akan tercipta secara automatik bila anda telah masukkan widget follow by email ini.

5.Kemudian save widget anda.

membuat paparan iklan melayang

Widget ini boleh kita gunakan untuk meletak iklan atau apa apa notis pada blog.Ia mempunyai butang untuk tutup dan akan ikut bergerak jika halaman di scroll atas atau kebawah.

Untuk membuatnya:
Masuk ke design-page elements
Add a gadget--HTML/Javascript dan masukkan kod dibawah:

<style type="text/css">
#topbar {
position:absolute;
z-index: 100;
padding: 8px;
background: #DB9D9A;
background: -moz-linear-gradient(top, rgba(255, 255, 255, .9), rgba(211, 211, 211, .9));
background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .9)),to(rgba(211, 211, 211, .9)));
border: 3px ridge #fff;
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-box-shadow: #58FA58 0 2px 15px;
-moz-box-shadow: #58FA58 0 2px 10px;
margin:0 auto 10px;
float:left;
color:rgba(0, 0, 0, 0.75);
font-size: 12px;
font-family: Verdana, serif;
text-shadow:0 1px 0 #FFFFFF;
}
#topbar img {
border:none;
}
#topbar .butang {
margin:0;
padding-bottom:5px;
text-align:right;
}
#topbar .butang button {
color:#FFFFFF;
border: solid 1px #494949;
margin:0;
padding:2px 15px;
cursor: pointer;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
background: #DB9D9A;
background: -webkit-gradient(linear, left top, left bottom, from(red), to(#DB9D9A));
background: -moz-linear-gradient(top, red, #DB9D9A);
}
#topbar .isi_iklan {
background-color:#81F7BE;
margin:0;
padding:4px;
width: 468px;
border: 2px groove #FF8000;
}
</style>
<script src="https://sites.google.com/site/teknikbuatblog/tbb/iklanpopup.js?attredirects=0&d=1" type="text/javascript"></script>
<script type="text/javascript">
var persistclose=1
var startX = 20
var startY = 20
var verticalpos="fromtop"
</script>
<div id="topbar">
<div class="butang"><a href="" onclick="closebar(); return false" style="text-decoration: none;"><text><b>[X]</b></text></a></div>
<div class="isi_iklan">

letak kod iklan anda disini

</div>
</div>

kemudian klik butang save

cara disable text highlight

Dalam artikel sebelum ini saya telah masukkan cara disable right click,yang kita digunakan bagi mengelak imej disalin.tetapi itu sahaja tidak cukup kerana teks pada artikel kita perlu juga dilindungi.Jadi kali ini pula saya akan tunjukan  cara bagi menghalang teks artikel kita dihighlight dan disalin.

caranya membuatnya:

Masuk ke design--Page elements
Add a gadget dan pilih HTML/Javascript

dan masukkan kod dibawah ini:

  <script type="text/javascript">
//form tags to omit in NS6+:
var omitformtags=["input", "textarea", "select"]
omitformtags=omitformtags.join("|")
function disableselect(e){
if (omitformtags.indexOf(e.target.tagName.toLowerCase())==-1)
return false
}
function reEnable(){
return true
}
if (typeof document.onselectstart!="undefined")
document.onselectstart=new Function ("return false")
else{
document.onmousedown=disableselect
document.onmouseup=reEnable
}
</script>

ataupun boleh juga cara ini:
Masuk kedesign-Edit Html
dan cari kod dibawah:

.post {
padding:10px;
font-size:70%;
margin: 0 0 25px 0;

-moz-user-select: -moz-none;

-khtml-user-select: none;

-webkit-user-select: none;

-o-user-select: none;

user-select: none;

}

tambahkan kod yang berwarna oren seperti diatas.
selamat mencuba.

menghapus paparan attribution pada template

Attribution adalah widget yang berada dibahagian bawah template kita.Ia memaparkan nama template dan perekanya.Ia tidak membawa kesan apa apa cuma mungkin ada yang ingin paparan ini ditiadakan.Jika ingin menghapuskan paparan ini,Caranya adalah seperti berikut:

Masuk ke design-edit HTML
tandakan expand widget templates
dan cari kod ini:

<b:section class='foot' id='footer-3' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>
</b:section>

jika sudah jumpa hapuskan kod tersebut

pada sesetengah template tiada kod tadi,tapi mempunyai kod seperti ini:

<b:widget id='Attribution1' locked='true' title='' type='Attribution'>
<b:includable id='main'>
<b:if cond='data:feedbackSurveyLink'>
<div class='mobile-survey-link' style='text-align: center;'>
<data:feedbackSurveyLink/>
</div>
</b:if>

<div class='widget-content' style='text-align: center;'>
<b:if cond='data:attribution != &quot;&quot;'>
<data:attribution/>
</b:if>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Delete semua kod diatas
kemudian klik save tempale
paparan berikut akan muncul

Pilih delete widgets
Kemudian lihat hasilnya.

cara pasang widget tukar warna background blog

Paparan warna latarbelakang amat memainkan peranan dalam menyerlahkan lagi tampilan blog kita.Kadang kadang  ada  yang tak berapa selesa dengan warna yang ada jadi dengan widget ini boleh lah ditukar pada warna yang disukai.Bagaimana pun jika telah memasang imej sebagai latar belakang warnanya tidak akan kelihatan .

Untuk membuatnya:

Terus ke design-page elements
Add a gadget--HTML/javascript
dan masukkan kod ini:

<center><script type="text/javascript">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script>

Tukar warna background

<table border="2" width="200" height="20" bordercolor="black">
<tr bordercolor="#4BFE78"> <td
onclick="bgChange('#72FE95')" bgcolor="#72FE95">
<td
onclick="bgChange('#FE8BF0')" bgcolor="#FE8BF0">

<td
onclick="bgChange('#87CEFA')" bgcolor="#87CEFA">
<td
onclick="bgChange('#FFDAB9')" bgcolor="#FFDAB9">
<td
onclick="bgChange('#D3D3D3')" bgcolor="#D3D3D3">

<td
onclick="bgChange('#FFC0CB')" bgcolor="#FFC0CB">


</td></td></td></td></td></td></tr>
</table>

<div class='clear'></div></center>

Jika hendak warna yang lain tukarkan kod warna diatas.Kedua dua kod hendaklah sama kiri dan kanan seperti yang saya tandakan dengan warna hijau.Kod warna boleh didapati disini. 
Paparan juga perlu diubah kepada transparent dengan menggunakan template designer.

Cara pasang widget animated recent post

Blogger ada menyediakan widget recent post yang memaparkan  posting posting terkini.Recent post ini memaparkan thumbnail juga jumlah komen pada posting.Tapi kekurangan nya adalah bersifat statik.Recent post ini bergerak ini lebih menarik perhatian pengunjung untuk melihat artikel artikel lain yang ada pada blog kita

Caranya:
untuk dashboard lama:
Masuk ke Design:
Pada Page Element-Pilih Add Gadget
HTML/Javascript

Untuk dashboard baru:
pilih Layout--add a gadget -- HTML/Javascript

Dan masukkan kod dibawah ini:

<center>
<script src="https://sites.google.com/site/teknikbuatblog/tbb/jquerry.js?attredirects=0&d=1" 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 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJqyYkb3C30ew9QfLVJJ9vxhjWfPHkLXe39zAOCA7-5Yxhyw7fL9GOycU6myQIiB7pAmSFuDEoSJl35V6j-oVcv-d_gmYi5wfeAA7DuzmJOImFx69u7A1wdx-HVcDKXU8DYQgiPFoTtzk/s1600/teknikbuatblogblogspot-com.jpg) 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:#A9A9F5;
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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsNlNxu6vmjAM02uGh6ruqKVjbkyDW8ppV793jQ3hZgHtIeo_2X1murxhrDApTwKsX0b_T5jhHpcj4Azjjxe9ZtqBbVOXdketz_jCyTRjRmeIvC1Co1kxdj4gddfPLxQjCohSuLzI0zgk/s1600/no_image+.gif";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsNlNxu6vmjAM02uGh6ruqKVjbkyDW8ppV793jQ3hZgHtIeo_2X1murxhrDApTwKsX0b_T5jhHpcj4Azjjxe9ZtqBbVOXdketz_jCyTRjRmeIvC1Co1kxdj4gddfPLxQjCohSuLzI0zgk/s1600/no_image+.gif";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsNlNxu6vmjAM02uGh6ruqKVjbkyDW8ppV793jQ3hZgHtIeo_2X1murxhrDApTwKsX0b_T5jhHpcj4Azjjxe9ZtqBbVOXdketz_jCyTRjRmeIvC1Co1kxdj4gddfPLxQjCohSuLzI0zgk/s1600/no_image+.gif";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsNlNxu6vmjAM02uGh6ruqKVjbkyDW8ppV793jQ3hZgHtIeo_2X1murxhrDApTwKsX0b_T5jhHpcj4Azjjxe9ZtqBbVOXdketz_jCyTRjRmeIvC1Co1kxdj4gddfPLxQjCohSuLzI0zgk/s1600/no_image+.gif";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsNlNxu6vmjAM02uGh6ruqKVjbkyDW8ppV793jQ3hZgHtIeo_2X1murxhrDApTwKsX0b_T5jhHpcj4Azjjxe9ZtqBbVOXdketz_jCyTRjRmeIvC1Co1kxdj4gddfPLxQjCohSuLzI0zgk/s1600/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://teknikbuatblog.blogspot.com/";
limitspy=4
intervalspy=4000
</script>
<div id="spylist">
<script src='https://sites.google.com/site/teknikbuatblog/tbb/tbb.js?attredirects=0&d=1' type='text/javascript'></script>
</div><a href="http://teknikbuatblog.blogspot.com/2010/12/cara-pasang-widget-animated-recent-post.html">
<font size="1">get this widget</font></a></center>

Dibawah ini adalah kod bagi anda yang inginkan widget ini dalam bentuk yang lebih kecil untuk disesuaikan untuk sidebar yang ruangnya agak terhad.

<center>
<script src="https://sites.google.com/site/teknikbuatblog/tbb/jquerry.js?attredirects=0&d=1" type="text/javascript"></script>
<style type="text/css" media="screen">
<!--

#spylist {
overflow:hidden;
margin-top:3px;
padding:0px 0px;
height:300px;
}

#spylist ul{
width:148px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}
#spylist li {
width:145px;
padding: 1px 1px;
margin:0px 0px 2px 0px;
list-style-type:none;
float:none;
height:50px;
overflow: hidden;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkEl3gVO-bdJW8DokLRlEmkO8E41shVuHMqHqMFw5345EoW3G6ECUsc4pNG_zqhPO4o15-gxGod3NViR57rk-l1plwCTy8tpKV7jq8mJGCQOFP60LD2sc9WlYXb2rbpMOqBBVZiEAp-2E/s1600/back2.png) repeat-x;
border:1px solid #ddd;
}
#spylist li a {
text-decoration:none;
color:#4B545B;
font-size:10px;
height:10px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 0px 0px;
}
#spylist li img {
float:left;
margin-right:2px;
background:#A9A9F5;
border:0;
}
.spydate{
overflow:hidden;
font-size:8px;
color:#0284C2;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:10px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:8px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
-->
</style>
<script language='javascript'>
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsNlNxu6vmjAM02uGh6ruqKVjbkyDW8ppV793jQ3hZgHtIeo_2X1murxhrDApTwKsX0b_T5jhHpcj4Azjjxe9ZtqBbVOXdketz_jCyTRjRmeIvC1Co1kxdj4gddfPLxQjCohSuLzI0zgk/s1600/no_image+.gif";
imgr[1] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsNlNxu6vmjAM02uGh6ruqKVjbkyDW8ppV793jQ3hZgHtIeo_2X1murxhrDApTwKsX0b_T5jhHpcj4Azjjxe9ZtqBbVOXdketz_jCyTRjRmeIvC1Co1kxdj4gddfPLxQjCohSuLzI0zgk/s1600/no_image+.gif";
imgr[2] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsNlNxu6vmjAM02uGh6ruqKVjbkyDW8ppV793jQ3hZgHtIeo_2X1murxhrDApTwKsX0b_T5jhHpcj4Azjjxe9ZtqBbVOXdketz_jCyTRjRmeIvC1Co1kxdj4gddfPLxQjCohSuLzI0zgk/s1600/no_image+.gif";
imgr[3] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsNlNxu6vmjAM02uGh6ruqKVjbkyDW8ppV793jQ3hZgHtIeo_2X1murxhrDApTwKsX0b_T5jhHpcj4Azjjxe9ZtqBbVOXdketz_jCyTRjRmeIvC1Co1kxdj4gddfPLxQjCohSuLzI0zgk/s1600/no_image+.gif";
imgr[4] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsNlNxu6vmjAM02uGh6ruqKVjbkyDW8ppV793jQ3hZgHtIeo_2X1murxhrDApTwKsX0b_T5jhHpcj4Azjjxe9ZtqBbVOXdketz_jCyTRjRmeIvC1Co1kxdj4gddfPLxQjCohSuLzI0zgk/s1600/no_image+.gif";
showRandomImg = true;
boxwidth = 255;
cellspacing = 6;
borderColor = "#232c35";
bgTD = "#000000";
thumbwidth = 50;
thumbheight = 50;
fntsize = 5;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 8;
summaryColor = "#666";
icon2 = " ";
numposts = 10;
home_page = "http://teknikbuatblog.blogspot.com/";
limitspy=5
intervalspy=4000
</script>
<div id="spylist">
<script src='https://sites.google.com/site/teknikbuatblog/tbb/tbb.js?attredirects=0&d=1' type='text/javascript'></script>
</div><a href="http://teknikbuatblog.blogspot.com/2010/12/cara-pasang-widget-animated-recent-post.html">
<font size="1">get this widget</font></a></center>

#Jangan lupa gantikan url blog saya,teks berwarna merah diatas dengan alamat blog sendiri.Kalau nak kecilkan size ubah pada kod warna hijau

Cara pasang email subscription form pada blog

Memasang langganan  secara email pada blog adalah dengan tujuan bagi membolehkan  pengunjung mengetahui jika blog kita membuat entri atau pun posting terbaru. Menambahkan borang langganan email ke blog  sangat mudah dilakukan dan merupakan salah satu cara untuk merangsang kunjungan berulang ke blog kita.Ia membolehkan pengunjung blog menerima email bila terdapat update pada blog kita.Langganan  ini adalah menggunakan kemudahan yg disediakan oleh feedburner.

Cara memasangnya pada blog:
1.Jika belum mempunyai akaun dengan feedburner daftar dulu disini.
2.kemudian klik pada my feed pada link bahagian atas paparan,kemudian klik pada nama blog

Jika belum ada feed masukkan url blog pada burn a feed right this instant dan klik next

3.seterusnya pilih publicize

4.Kemudian pilih email subscription

5.Kemudian pilih activate
6.Seterus pilih Use a Widget in dan pilih blogger..klik go untuk memasang secara automatik

Jika ingin memasang sendiri :
copy kod yang  terpapar

Kemudian masuk ke design—page elements
Add gadget—pilih HTML/Javascript
Paste kod tadi dan klik save.

Jika ingin memasang chicklet

Pada menu publicize seperti diatas tadi pada sidebar kiri pilih feed count .Kemudian akan keluar paparan seperti dibawah.cara memasang kod ini seperti diatas juga.

Cara pasang disable right click

Fungsi bagi disable right click adalah bagi melindungi artikel atau imej dari dicopy.Mesej akan keluar jika  right click cuba digunakan.Walaupun ada right click tapi masih boleh dicopy juga kerana ada cara lain yang boleh digunakan. Jadi untuk imej yang dimasukkan eloklah diletak watermark supaya tidak disalah gunakan.

Cara membuatnya:










Masuk kedesign--pilih pagelements
Add a gadget--pilih HTML/javascript
masukkan kod dibawah ini:

<script>

var message="Letak mesej disini";

///////////////////////////////////

function clickIE4(){if (event.button==2){alert(message);return false;}}

function clickNS4(e){if (document.layers||document.getElementById&&!document.all){if (e.which==2||e.which==3){alert(message);return false;}}}

if (document.layers){document.captureEvents(Event.MOUSEDOWN);document.onmousedown=clickNS4;}

else if (document.all&&!document.getElementById){document.onmousedown=clickIE4;}

document.oncontextmenu=new Function("alert(message);return false")

</script>

Gantikan letak mesej disini dengan mesej yang ingin ditampilkan
Kemudian save.