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>