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 Layout >>Add a gadget

Pilih HTML/javascript

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/AVvXsEjblNZzdgMmr9EGDbpBDUx-NEKK8ofyBFlMYmHGDOS8XgSZ1-SMGquRWU3-tmFBSBTudd4NMMXw4gBSVJlWcVAxDTPVWa4j_ELe7-LQVq_vyDTpayoXG4tjyWFVuNwE2v_Jg7rJsWZTchE/s1600/controls.png) no-repeat 0 0;}
    #cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4qRfG8Gfhbo-F_dqddMf22tYqmbUBtNsh4lu6u1d935ANHuTq8PE-z2btB1jVkj-hadVOM1U2pF57y9ZTeD8AF54ojv2Z3sjphYFeNK64uefTPl46JzamgvXvJfsy1zJ7SkYVTW3GfVg/s400/border.png) repeat-x top left;}
         #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjblNZzdgMmr9EGDbpBDUx-NEKK8ofyBFlMYmHGDOS8XgSZ1-SMGquRWU3-tmFBSBTudd4NMMXw4gBSVJlWcVAxDTPVWa4j_ELe7-LQVq_vyDTpayoXG4tjyWFVuNwE2v_Jg7rJsWZTchE/s1600/controls.png) no-repeat -36px 0;}
         #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjblNZzdgMmr9EGDbpBDUx-NEKK8ofyBFlMYmHGDOS8XgSZ1-SMGquRWU3-tmFBSBTudd4NMMXw4gBSVJlWcVAxDTPVWa4j_ELe7-LQVq_vyDTpayoXG4tjyWFVuNwE2v_Jg7rJsWZTchE/s1600/controls.png) no-repeat 0 -32px;}
         #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4qRfG8Gfhbo-F_dqddMf22tYqmbUBtNsh4lu6u1d935ANHuTq8PE-z2btB1jVkj-hadVOM1U2pF57y9ZTeD8AF54ojv2Z3sjphYFeNK64uefTPl46JzamgvXvJfsy1zJ7SkYVTW3GfVg/s400/border.png) repeat-x bottom left;}
         #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjblNZzdgMmr9EGDbpBDUx-NEKK8ofyBFlMYmHGDOS8XgSZ1-SMGquRWU3-tmFBSBTudd4NMMXw4gBSVJlWcVAxDTPVWa4j_ELe7-LQVq_vyDTpayoXG4tjyWFVuNwE2v_Jg7rJsWZTchE/s1600/controls.png) no-repeat -36px -32px;}
         #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjblNZzdgMmr9EGDbpBDUx-NEKK8ofyBFlMYmHGDOS8XgSZ1-SMGquRWU3-tmFBSBTudd4NMMXw4gBSVJlWcVAxDTPVWa4j_ELe7-LQVq_vyDTpayoXG4tjyWFVuNwE2v_Jg7rJsWZTchE/s1600/controls.png) repeat-y -175px 0;}
         #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjblNZzdgMmr9EGDbpBDUx-NEKK8ofyBFlMYmHGDOS8XgSZ1-SMGquRWU3-tmFBSBTudd4NMMXw4gBSVJlWcVAxDTPVWa4j_ELe7-LQVq_vyDTpayoXG4tjyWFVuNwE2v_Jg7rJsWZTchE/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/AVvXsEi9kgQmnEZoTDTVFhXfK5Heh21CHwsACpGOSJwBbyo6iiC9IkOUCT17-IbvD_DFW-5-6DEF00yKNBivFA4irYiFchvUq-kx3FxyFRl09WwU-KPWmVnxRKUdVVZVEM4A2dcuZY2n1ti0hCI/s400/loadingbackground.png) no-repeat center center;}
             #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU37a_A5tyBvGpIht7WYyVJGdJtYKJ2RGugWMXQkkZTwd84PwphMGsqpIC_lioQIFIP93souGcpMf2LF9ZAIXYVV0pPPyLk8A4cK9drJ6jPFI6FO9_R8rr3oOn7rbCNduPMOSM4AI1J88/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/AVvXsEjblNZzdgMmr9EGDbpBDUx-NEKK8ofyBFlMYmHGDOS8XgSZ1-SMGquRWU3-tmFBSBTudd4NMMXw4gBSVJlWcVAxDTPVWa4j_ELe7-LQVq_vyDTpayoXG4tjyWFVuNwE2v_Jg7rJsWZTchE/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 

update 8/5/2013

Letak Frame Dan Background Pada Shoutbox

Preview:

Ramai juga yang bertanyakan saya macam mana cara nak combine frame dan background pada shoutbox..tutorial kali ni akan menunjukkan cara-caranya. Jom start:

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi:

<center><div id="edited" style="width:200px; height:360px; background:url(http://img856.imageshack.us/img856/9573/framefibox5.png) no-repeat left top; padding-top:90px; padding-left:0px; position:relative" align="center">

<center><div id="custombg" style="width:180px; height:255px; background:url(http://dl6.glitter-graphics.net/pub/3220/3220296jsbm3yjnbc.png) repeat; padding-top:0px; padding-left:0px; position:relative" align="center">

<iframe frameborder="0" title="shoutboxsaya" height="255" src="http://shout.busuk.org/?shoutboxsaya" id="r" style="filter:alpha(opacity=60);opacity:0.60;-moz-opacity:0.60; display:block; " scrolling="auto" width="180"></iframe>

</iframe></div></center></div></center></div>

Nota:

url warna biru - masukkan url image frame yang korang suka. Korang boleh create sendiri atau just pilih frame yang dah disediakan di sini.

url warna merah - masukkan url background yang korang nak. search kat sini atau pilih jer background yang dah disediakan kat sini.

url warna orange - url shoutbox korang. ( pada kod shoutbox korang, ambik dekat src='http://.....')


4) Lastly, klik save dan lihat hasilnya.

Selamat mencuba! :)

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 :) :)

Pasang butang share tweet,like dan Plus One

Butang share kali ini adalah  Facebook like, Tweet,dan juga Google  Plus One .Mungkin sebelum ini anda agak sukar untuk meletaknya sebaris kerana memasangnya secara berasingan Jadi  dengan tutorial ini akan lebih memudahkan memasangnya.dalam satu barisan.

Cara memasangnya:
Salin kod dibawah ini terlebih dahulu:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<table border='0'><tr>
    <td><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=90&amp;action=like&amp;font=arial&amp;colorscheme=light&amp;height=21&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:90px; height:21px;'/></td>
<td> <a class='twitter-share-button' data-count='horizontal' data-related='' data-via='teknikbuatblog' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share'>Tweet</a>
<script src='http://platform.twitter.com/widgets.js' type='text/javascript'/></td>
<td><g:plusone expr:href='data:post.url' size='medium'/></td><td><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:send colorscheme='light' expr:href='data:post.url' font='arial'/></td>
</tr></table>    </b:if>

Kemudian masuk ke design…>> Template>edit HTML

Cari kod <div class='post-header-line-1'/>
 Gunakan fungsi search(klik didalam ruangan kod pada template tekan butang CTRL + F untuk mengaktifkan fungsi search)
jika hendak memasang dibawah tajuk posting jika tiada cari kod  <data:post.body/> dan letak kod tadi diatasnya.

Jika hendak memasangnya dibawah letakkan selepas kod <data:post.body/>

Letakkan kod dibawah ini diatas kod </head>

<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>

Jika pernah memasang butang google plus one sebelum ini,tidak perlu memasang kod diatas.

Simpan template dan lihat hasilnya.
Jika anda menggunakan read more dan hendak ia terpapar dihadapan dan juga pada ruang posting delete kod yang berwarna merah diatas
Gantikan perkataan teknikbuatblog dengan username twitter anda


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

update 8/5/2013