Thursday, 28 March 2013

Widget sosial subscribe dengan button CSS3

Widget laman sosial kini semakin menjadi satu keperluan bagi setiap para blogger namun anda pening kepala untuk memilih widget apa yang sesuai untuk blog anda.Apa kata anda cuba widget sosial yang satu ni.





















Cara nak letak kat blog anda.......

1)Pergi ke Blogger Dashboard -->Layout-->Add gadget.

2)Pilih gadget HTML/Javascript dan paste kod dibawah ke dalam ruang yang disediakan.




<style>
/*BT-Style Social Subscribe Widget By Bloggertricks.biz*/
.button {
    font: 15px Calibri, Arial, sans-serif;
/* A semi-transparent text shadow */
    text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
/* Overriding the default underline styling of the links */
    text-decoration: none !important;    white-space: nowrap;
    display: inline-block;    vertical-align: baseline;    position: relative;
    cursor: pointer;    padding: 10px 20px;    background-repeat: no-repeat;
/* The following two rules are fallbacks, in case
the browser does not support multiple backgrounds. */
    background-position: bottom left;    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzJwZimkpePRFGfZLk4e40AmCslI7HEuCE92jbN2AjBIvmVBwY3WClQObx4PcW5VoBOMRsMPqUvUKyAOVelaa1F7scBlI6RncINhUuBJX__VqWB7W2fTipNzVYnQIfuBN6GUrBb_9MvjE/s1600/
bloggertricksdotbiz+bg.png'); /* Multiple backgrounds version. The background images
are defined individually in color classes */
    background-position: bottom left, top right, 0 0, 0 0;
    background-clip: border-box; /* Applying a default border raidus of 8px */
    -moz-border-radius: 8px;    -webkit-border-radius: 8px;    border-radius: 8px;
/* A 1px highlight inside of the button */    -moz-box-shadow: 0 0 1px #fff inset;
    -webkit-box-shadow: 0 0 1px #fff inset;    box-shadow: 0 0 1px #fff inset;
/* Animating the background positions with CSS3 *//* Currently works only in
Safari/Chrome */    -webkit-transition: background-position 1s;
    -moz-transition: background-position 1s;    transition: background-position 1s;
}
.button:hover {/* The first rule is a fallback, in case the browser
does not support multiple backgrounds*/
    background-position: top left;background-position: top left, bottom right, 0 0, 0 0;
}
.button:active {/* Moving the button 1px to the bottom when clicked */
    bottom: -1px;}
.button.small {    font-size: 13px;}
.gray.button {    color: #525252 !important;  border: 1px solid #a5a5a5 !important;
    background-color: #a9adb1; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzJwZimkpePRFGfZLk4e40AmCslI7HEuCE92jbN2AjBIvmVBwY3WClQObx4PcW5VoBOMRsMPqUvUKyAOVelaa1F7scBlI6RncINhUuBJX__VqWB7W2fTipNzVYnQIfuBN6GUrBb_9MvjE/s1600/
bloggertricksdotbiz+bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzJwZimkpePRFGfZLk4e40AmCslI7HEuCE92jbN2AjBIvmVBwY3WClQObx4PcW5VoBOMRsMPqUvUKyAOVelaa1F7scBlI6RncINhUuBJX__VqWB7W2fTipNzVYnQIfuBN6GUrBb_9MvjE/s1600/
bloggertricksdotbiz+bg.png'), -moz-radial-gradient(center bottom, circle,
 rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient
(#c5c7ca, #92989c);    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzJwZimkpePRFGfZLk4e40AmCslI7HEuCE92jbN2AjBIvmVBwY3WClQObx4PcW5VoBOMRsMPqUvUKyAOVelaa1F7scBlI6RncINhUuBJX__VqWB7W2fTipNzVYnQIfuBN6GUrBb_9MvjE/s1600/
bloggertricksdotbiz+bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzJwZimkpePRFGfZLk4e40AmCslI7HEuCE92jbN2AjBIvmVBwY3WClQObx4PcW5VoBOMRsMPqUvUKyAOVelaa1F7scBlI6RncINhUuBJX__VqWB7W2fTipNzVYnQIfuBN6GUrBb_9MvjE/s1600/
bloggertricksdotbiz+bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%,
0% 100%, from(#c5c7ca), to(#92989c));float:right;margin-top:-5px;margin-right:-15px;
}
.gray.button:hover {  background-color: #b6bbc0; background-image: url('http://4.bp.
blogspot.com/-FvZU_8tLgFc/T9DDIjhSn9I/AAAAAAAAA1Y/TGXuHSyRQYk/s1600/
bloggertricksdotbiz+bg.png'), url('http://4.bp.blogspot.com/-FvZU_8tLgFc/T9DDIjhSn9I/
AAAAAAAAA1Y/TGXuHSyRQYk/s1600/bloggertricksdotbiz+bg.png'), -moz-radial-
gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz
-linear-gradient(#d1d3d6, #9fa5a9);    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzJwZimkpePRFGfZLk4e40AmCslI7HEuCE92jbN2AjBIvmVBwY3WClQObx4PcW5VoBOMRsMPqUvUKyAOVelaa1F7scBlI6RncINhUuBJX__VqWB7W2fTipNzVYnQIfuBN6GUrBb_9MvjE/s1600/
bloggertricksdotbiz+bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzJwZimkpePRFGfZLk4e40AmCslI7HEuCE92jbN2AjBIvmVBwY3WClQObx4PcW5VoBOMRsMPqUvUKyAOVelaa1F7scBlI6RncINhUuBJX__VqWB7W2fTipNzVYnQIfuBN6GUrBb_9MvjE/s1600/
bloggertricksdotbiz+bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%,
 0% 100%, from(#d1d3d6), to(#9fa5a9));}
.body{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjkL0Tb_qoHEWrzn-pKV2KREvQMdOLtNbeQUNicqVDh5gsWZsh_6ZnGHi29g0D2AcW4TPEM8mYJBSefVGLf1CfUcgREOX7RfETTWr5zdHeoEAlp4mFLjP0mDcDQxSonrX50AEOqAlvRs0/s1600/bg.png) no-repeat;
width:300;height:360;padding:22px;
}
.rss-bt {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_5ScU8wZ_qORAS12dp9qFMv-f0WF3DPDsZVSGcww7bGshXjyAvEUlfGO788o-1T-ZDyX54SmG1r00MiYMxDiMYssZ-sLaiFHcIkIVp4GlahuilIee91nEI1W9DrK-0SXoEWQgd5ZTZx4/s1600/RSS.png) no-repeat;
    height: 68px;
    padding-left:65px;
    margin-top: 5px;
margin-left:-15px;
}
.twitter-bt {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2TGF5QbGtHsYb0JQkVG7L-eYJJCG1HQ5E7w_N01p1yEpK4FF96RNEyUsOLtCS_1vT4xdSbR4ffQrg4YKu80QvvZdbhOm73r1RYxZXlOodgyIWFsct8CYWyHST5dX_Diu0Ia1xlbfp3FY/s1600/
TWITTER.png) no-repeat; height: 68px;
 padding-left:65px;
    margin-top: 15px;
margin-left:-15px;
}
.facebook-bt {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6JG0nNUb0bIX16TiWjUVhqzQoudo5PvN3mFK2lh3DQA78h0DnOFK96WXJeLXhlOnZvQuK2x9grLjoP_tYz85GGLlmg5jP2Ys5vOo8I4_SmvORoIQuoGPzfstNBBoEV0qVT-9l9evhr_s/s1600/
FACEBOOK.png) no-repeat;
height: 68px;
    padding-left:65px;
    margin-top: 25px;
margin-left:-15px;
}
.gplus-bt{
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglz3Wulmblq_yilsesUB-OK9ah0ae5y_n3-2FjjiuxO-1z8qZvTR4v14kK0DR0xp6GAVXptAOnjMZ55879L14NyeUXhKvAxrUAbd2HiQ_zNp7JRo7gQeO9T_MU1Nvq5PICkBrty3voRQ8/s1600/gpluss.png) no-repeat;
height: 68px;
    padding-left:65px;
    margin-top: 15px;
margin-left:-15px;
}
.follower-rss, .follower-twitter, .follower-facebook, .follower-gplus {
    font-family: Georgia,  sans-serif, Times;
    font-size: 1.1em;
        font-style:italic;
        color:#289728;
 padding-top:10px;
}
.follower-rss span {
    font-size: 1.9em;
    font-weight: bold;
        font-style:italic;
        color:#FFB93C; 
}
.follower-twitter span {
    font-size: 1.9em;
    font-weight: bold;
        font-style:italic;
        color:#6DB6E6; 
}
.follower-facebook span {
    font-size: 1.9em;
    font-weight: bold;
        font-style:italic;
        color:#3889BA; 
}
.follower-gplus span {
    font-size: 1.9em;
    font-weight: bold;
        font-style:italic;
        color:#3889BA; 
}
</style>
<div class="body">
<div class="rss-bt">
<div class="follower-rss"> <span>515</span>readers
<a href="http://feeds.feedburner.com/Your fedburner" class="button small gray">
Subscribe</a></div> </div>
<div class="twitter-bt"><div class="follower-twitter"><span>1058</span>followers
 <a href="http://twitter.com/yourtwitter" class="button small gray">Follow</a></div>                           
</div>                   
<div class="facebook-bt">                     
<div class="follower-facebook"><span>260</span>fans
<a href="http://facebook.com/yourpage" class="button small gray">Like Us</a>                           </div>              
</div>
<div class="gplus-bt">                     
<div class="follower-gplus"><span>360</span>followers <a href="your google plus" class="button small gray">
Add Me</a></div>                     
</div><span style=" float:right; padding:5px; margin-right:-10px;"><a href="http://www.bloggertricks.biz/2012/06/bt-style-social-subscribe-with-css3.html">|Grab This|</a></span></div>


4)Save dan lihat blog anda.

Kemaskini maklumat

1)Gantikan http://feeds.feedburner.com/Your fedburner dengan url Feedburner.
2)Gantikan http://twitter.com/yourtwitter dengan url Twitter anda.
3)Gantikan http://facebook.com/yourpage dengan url Facebook anda.
4)Gantikan google plus kami dengan url Google Plus Profile anda.

Tambahan

1)Gantikan 515,1058,260,360 dengan jumlah sebenar subscriber,Follower,like dan circles anda.

Widget laman sosial kini semakin menjadi satu keperluan bagi setiap para blogger namun anda pening kepala untuk memilih widget apa yang sesuai untuk blog anda.Apa kata anda cuba widget sosial yang satu ni.Semoga berjaya.












Pelbagai jenis widget Alexa untuk blogger


Apa itu Alexa? alexa.com merupakan sebuah laman web bagi menentukan ranking bagi laman web atau blog anda. Kami menyediakan 3 jenis bentuk bagi meletakkan widget ini di blog anda.selamat mencuba.

Cara meletakkan Widget Alexa ke blog anda.

1)Pilih widget yang anda minat
2)Login ke Blogger.
3)Copy kod tersebut.
4)Klik pada rancangan>>Add widget>>HTML/Javascript
5)Paste kod di bawah pada ruang yang disediakan.

Widget Alexa jenis 1












<center><a href="http://www.alexa.com/siteinfo/http://www.tutorblogger2u.blogspot.com/">
<script type='text/javascript' src='http://xslt.alexa.com/site_stats/js/s/a?url=http://www.tutorblogger2u.blogspot.com/'></script>
</a></center>

Widget Alexa jenis 2

















<center><a href="http://www.alexa.com/siteinfo/http://www.tutorblogger2u.blogspot.com/">
<script type='text/javascript' src='http://xslt.alexa.com/site_stats/js/s/b?url=http://www.tutorblogger2u.blogspot.com/'></script>
</a></center>

widget alexa jenis 3










<center><a href="http://www.alexa.com/siteinfo/http://www.tutorblogger2u.blogspot.com/">
<script type='text/javascript' src='http://xslt.alexa.com/site_stats/js/s/c?url=http://www.tutorblogger2u.blogspot.com/'></script>
</a></center>


Kalau dah siap anda anda hanya perlu gantikan http://www.tutorblogger2u.blogspot.com/ dengan url laman blog anda dan save.
Semoga berjaya.

Wednesday, 27 March 2013

Widget E-mail subscribe yang menarik

         
  



















Anda pasti mempunyai E-mail bukan.Dan widget Email Subcription ini memang sudah famous bagi para blogger dan anda juga dapat info terbaru tentu blog seseorang jika anda subcribe Email merekaHari ini saya ingin berkongsi mengenai sebuah widget yang sangat cool dan menarik untuk blog anda.Apa yang anda perlukan sekarang ini ialah copy dan paste kod yang anda berkenaan dan anda akan mendapat apa yang anda mahukan.

bagaimana nak menambah widget Email Subcription ini ke blog anda

1) Sign in ke blogger.com
2) Copy salah satu kod di bawah 
3) Gantikan username saya dengan anda.
4) Pergi ke Blogger Dashboard>>Layout
5) Klik pada Add Gadget
6) Pilih HTML/Javascript
7) Paste kod dan save.


Widget Email yang Pertama.

 











<style type="text/css">
#helperblogger-emailbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTAfomoHaHcO9i4J4Jo7LNmN5C4ky0CMFUbsq2ANrdguLgw7_Ia7Z4YCI8LLWebSXSNbzsIDOEnIuHohPDu0YQxQ3n9QEiZ-twIK-3T_PdGDqn4RDQiDU5J5v2PI94UqZRete6pYs8Cxk/s1600/helperblogger.com-silver.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}
 
form#helperblogger-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}
 
form#helperblogger-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
}
 
form#helperblogger-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style>
 
<div id="helperblogger-emailbox">
    <form id="helperblogger-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=HBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="HBlogger" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail Here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>


Widget Email yang kedua

 










<style type="text/css">
#helperblogger-emailbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJSNPNTO_itBXpwVJrABe0wGQuTkifJoyy4q3hMWKQ12pNq4Sq5xKwLq_AjoqtyM6izAOhnzOahPZK2w6-HaoYKYC6D5aqglCcOSwaiR957fiHyt0J7efPUSk1Typ_JWH9c60nkA2yZ1g/s1600/helperblogger.com-red.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}
 
form#helperblogger-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}
 
form#helperblogger-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
}
 
form#helperblogger-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style>
 
<div id="helperblogger-emailbox">
    <form id="helperblogger-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=HBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="HBlogger" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail Here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>


Widget Email yang ketiga

 











<style type="text/css">
#helperblogger-emailbox {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhamY9IdWZM-HVOx6cdWqshyphenhyphen2RWH3LQlHTDVh9g0W7yBkVCNcuaEtzvOxHjQzuZWtrNvvevhbaIFI9FFfEDMis-9UDS9v8Aln6P7td13hw3XWeay_RkEcNPubtnRAtBe2EAY1ioSFU-3yo/s1600/helperblogger.com-blue.png)no-repeat scroll center center transparent;
    height: 143px;
    width: 368px;
}
 
form#helperblogger-emailform {
    display: block;
    margin: 0;
    padding-left: 42px;
    padding-top: 67px;
}
 
form#helperblogger-emailform #s {
    background: transparent;
    border: none;
    color: #444242;
    font-family: georgia;
    font-size: 15px;
    font-style: italic;
    height: 30px;
    margin-top: -2px;
    padding-left: 2px;
    vertical-align: top;
    width: 227px;
}
 
form#helperblogger-emailform #sbutton {
    background: transparent;
    border: none;
    cursor: pointer;
    height: 30px;
    padding-right: 45px;
}</style>
 
<div id="helperblogger-emailbox">
    <form id="helperblogger-emailform" action="http://feedburner.google.com/fb/a/mailverify"
    method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=HBlogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
        <input type="hidden" value="HBlogger" name="uri" />
        <input type="text" id="s" name="email" value="Enter Your E-Mail Here"
        onfocus='if (this.value == "Enter Your E-Mail Here") {this.value = ""}'
        onblur='if (this.value == "") {this.value = "Enter Your E-Mail Here";}'
        />
        <input type="hidden" name="loc" value="en_US" />
        <input type="image" src="http://img1.blogblog.com/img/blank.gif" id="sbutton"
        />
    </form>
</div>





Saya berharap anda tidak menghadapi masalah untuk copy dan Paste widget ini.Semoga berjaya meletakkan widget ini di blog anda dan saya berharap anda menyukainya.........

Sosial Media Widget Berbentuk telur yang Comel(Boleh meluncur apabila di klik)




Tutorial kali ini agak menarik kerana widget yang akan diberikan adalah agak comel dan berbentuk telur dan boleh sliding jika di-klik.Jadi untuk anda yang mempunyai blog yang comel bolehlah meletakkan widget ini dan enjoy.












Cara untuk meletakkan Widget ini ke blog.

1) sign in ke blogger.com

2) Pilih option Template

3) Tekan (ctrl+shift) cari kod </head>

4)Copy dan paste kod di bawah sebelum kod </head>




<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/><script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/><script type='text/javascript'>stLight.options({publisher: &quot;bea50586-2b9f-448d-947a-01385f28e305&quot;, onhover:false}); </script><link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>



5) Sekarang cari (ctrl+f) kod </body>

6) Paste kod di bawah sebelum </body>


<div style='position: fixed; bottom: 2%; left: 2%;'><div class='shareEgg' id='shareThisShareEgg'/></div><script type='text/javascript'>stlib.shareEgg.createEgg(&#39;shareThisShareEgg&#39;, [&#39;facebook&#39;,&#39;twitter&#39;,&#39;googleplus&#39;,&#39;linkedin&#39;,&#39;blogger&#39;,&#39;stumbleupon&#39;,&#39;sharethis&#39;],{title:&#39;<data:blog.pageTitle/>&#39;,url:&#39;<data:blog.url/>&#39;,theme:&#39;shareegg&#39;});</script>


7)Save template anda dan anda enjoy....

JQuery Popup untuk facebook like box yang menarik










Di sini kami ingin mengajarkan cara nak buat like box yabg menarik sesuai untuk blog anda agar lebih comel. Anda boleh menambah alat ini dengan sangat mudah ke blog anda dengan hanya salin dan tampal code.anda hanya perlu untuk menggantikan nama facebook page saya dengan facebook page anda dan siap.

Bagaimana nak menambah POP UP ini ke dalam blog anda
Seperti biasa saya telah menyediakan pemasangan yang amat mudah .Anda hanya perlu copy dan paste kod di bawah .....


Sekarang pergi ke Blogger Design> Dashboard.
Add a Gadget> HTML / JavaScript.
Paste kod di bawah selepas menggantikan username saya dengan anda.



<style>
/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#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%; height: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;}

/*
User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvwszpBjIG-bYA_FAd32d-5IQNc-fVBOjBJu6xAlMgwbGlswdKia8Bfx2SDkfNJLcf2NfFlUz7U_PMGbb5VYRuURTk_o2aMiPKSQ-89HewGa3sksyDvEaWh0iZ3gp41i1kdj0C7hSzPLHR/s1600/overlay.png) repeat 0 0;}
#colorbox{}
#cboxTopLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8aXZHo1271n_PHQPk9bO1Ji0p6E8s6VzkwDqMQlhQI_z51LKEr6HnKtgP0sfqisC1uXw6p9FttNHBGE1Nbw_329E1EeJebqTR0MJ0Ry-hJrIaDX14Hn4gk73QMWDBbCjz1xn7Rse6pni-/s1600/controls.png) no-repeat -101px 0;}
#cboxTopRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8aXZHo1271n_PHQPk9bO1Ji0p6E8s6VzkwDqMQlhQI_z51LKEr6HnKtgP0sfqisC1uXw6p9FttNHBGE1Nbw_329E1EeJebqTR0MJ0Ry-hJrIaDX14Hn4gk73QMWDBbCjz1xn7Rse6pni-/s1600/controls.png) no-repeat -130px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8aXZHo1271n_PHQPk9bO1Ji0p6E8s6VzkwDqMQlhQI_z51LKEr6HnKtgP0sfqisC1uXw6p9FttNHBGE1Nbw_329E1EeJebqTR0MJ0Ry-hJrIaDX14Hn4gk73QMWDBbCjz1xn7Rse6pni-/s1600/controls.png) no-repeat -101px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8aXZHo1271n_PHQPk9bO1Ji0p6E8s6VzkwDqMQlhQI_z51LKEr6HnKtgP0sfqisC1uXw6p9FttNHBGE1Nbw_329E1EeJebqTR0MJ0Ry-hJrIaDX14Hn4gk73QMWDBbCjz1xn7Rse6pni-/s1600/controls.png) no-repeat -130px -29px;}
#cboxMiddleLeft{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8aXZHo1271n_PHQPk9bO1Ji0p6E8s6VzkwDqMQlhQI_z51LKEr6HnKtgP0sfqisC1uXw6p9FttNHBGE1Nbw_329E1EeJebqTR0MJ0Ry-hJrIaDX14Hn4gk73QMWDBbCjz1xn7Rse6pni-/s1600/controls.png) left top repeat-y;}
#cboxMiddleRight{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8aXZHo1271n_PHQPk9bO1Ji0p6E8s6VzkwDqMQlhQI_z51LKEr6HnKtgP0sfqisC1uXw6p9FttNHBGE1Nbw_329E1EeJebqTR0MJ0Ry-hJrIaDX14Hn4gk73QMWDBbCjz1xn7Rse6pni-/s1600/controls.png) right top repeat-y;}
#cboxTopCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCze1-SpNCIvl1iJ8cjtj55equlvzzUiloI7C-IEzy3VFOgoIDPuNoP3PE1h90bDFzQ_K58nHVy_9WU9a0mId5h9Eg-6WSg43lLskyBIMGTt-EOgnmsZdz2ayleQT9z1rpOpkSehCtu0FA/s1600/border.png) 0 0 repeat-x;}
#cboxBottomCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCze1-SpNCIvl1iJ8cjtj55equlvzzUiloI7C-IEzy3VFOgoIDPuNoP3PE1h90bDFzQ_K58nHVy_9WU9a0mId5h9Eg-6WSg43lLskyBIMGTt-EOgnmsZdz2ayleQT9z1rpOpkSehCtu0FA/s1600/border.png) 0 -29px repeat-x;}
#cboxContent{background:#fff; overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:28px;}
#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8aXZHo1271n_PHQPk9bO1Ji0p6E8s6VzkwDqMQlhQI_z51LKEr6HnKtgP0sfqisC1uXw6p9FttNHBGE1Nbw_329E1EeJebqTR0MJ0Ry-hJrIaDX14Hn4gk73QMWDBbCjz1xn7Rse6pni-/s1600/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}
#cboxNext{position:absolute; bottom:0; left:27px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8aXZHo1271n_PHQPk9bO1Ji0p6E8s6VzkwDqMQlhQI_z51LKEr6HnKtgP0sfqisC1uXw6p9FttNHBGE1Nbw_329E1EeJebqTR0MJ0Ry-hJrIaDX14Hn4gk73QMWDBbCjz1xn7Rse6pni-/s1600/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwKNKvdiPwfoSpM1BNf0ixQxNQNqkf-JqAtBrLCS-b1HOcp7Cr_c-ocHmSeHJ5qlkhgTujVHH85eXIYtTrdXbhvKzZyfOxScVY9YXdIJFAenV3co4MPMenLASzMu9o0hczxHc9rUsDYBCK/h120/loading.gif) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwKNKvdiPwfoSpM1BNf0ixQxNQNqkf-JqAtBrLCS-b1HOcp7Cr_c-ocHmSeHJ5qlkhgTujVHH85eXIYtTrdXbhvKzZyfOxScVY9YXdIJFAenV3co4MPMenLASzMu9o0hczxHc9rUsDYBCK/h120/loading.gif) no-repeat center center;}
#cboxClose{position:absolute; bottom:0; right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8aXZHo1271n_PHQPk9bO1Ji0p6E8s6VzkwDqMQlhQI_z51LKEr6HnKtgP0sfqisC1uXw6p9FttNHBGE1Nbw_329E1EeJebqTR0MJ0Ry-hJrIaDX14Hn4gk73QMWDBbCjz1xn7Rse6pni-/s1600/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxClose:hover{background-position:-25px -25px;}

/*
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

/*
The following provides PNG transparency support for IE6
Feel free to remove this and the /ie6/ directory if you have dropped IE6 support.
*/
.cboxIE6 #cboxTopLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjEm8L5YzSNBB64SlDSUYFqbpRMEFSP3U4X_UbixzWTFs8DgTzrPVprJlX5HgKldrHqpNo6cnYLrGc3kZHJsh8rIQBaTMbwtzH2aieMKxEqbfFJfwyULTG1sydXFgx4hPtMMWhEJs-DqSvk/s1600/borderTopLeft.png);}
.cboxIE6 #cboxTopCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEoj1c5qsldQA4mrvdRlQmpa7OfkCXcqMaqbNJ0a0O4nK_TgWtKCHpqgc_EGwVcu3my2G1nJTK40Vhz28jckA9mGgXbcKyGK07g41cf7N8wszmx0V_YSjgJu2v08cv7iCiWtUcdHfhfNln/s1600/borderTopCenter.png);}
.cboxIE6 #cboxTopRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMw8MfuzEJeUG6g1yVMXEnqGZgiWmmAWWw8HGTWk98px5wwNr7kRsGsahX0URSw-4x4pgeUT-CKdqzIA6XrWpwVZv15SjKQVuL9QioSPR4F8G7-V6hOTS52yGDKH7UNAPDu4qnpv4VA0so/s1600/borderTopRight.png);}
.cboxIE6 #cboxBottomLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMw8MfuzEJeUG6g1yVMXEnqGZgiWmmAWWw8HGTWk98px5wwNr7kRsGsahX0URSw-4x4pgeUT-CKdqzIA6XrWpwVZv15SjKQVuL9QioSPR4F8G7-V6hOTS52yGDKH7UNAPDu4qnpv4VA0so/s1600/borderTopRight.png);}
.cboxIE6 #cboxBottomCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEe61GjTwqPYcJe3_WGPh2S2Of6Kleru1hp0z-4lPl3c29QRxxnN4_rGfNcJuthcd4ow-ZDohk4LkszZCB9p8AS3isKAkfPErzuJFYdyhFth6yQgUo9qHFtLpY1hRo3_5ClNxfIsKP7mb_/s1600/borderBottomCenter.png);}
.cboxIE6 #cboxBottomRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhex2_UPKHl3REZhWRISs8FRzCRb0zLhDr6N32ZBf5iumWBaUZG344w4KJwcvUB7bzIyFnWBEgum4jPzyWjHNl_W-dG-xPSqGar2imakSMHcomWYfw72hbAL37FgzFPmdwqUsQ6NaKALPO9/s1600/borderBottomRight.png);}
.cboxIE6 #cboxMiddleLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQIJ2p9Rj24fEayoJo1XQduct4huppRgNmg9Vk7H5JQV-_a2OBxXlzc9k8BcCnAtPIj20tmxSAaZklelXKMEE-z4EwI_bq8oYjwrtdlFI-BD966P5lYRTo8esr4IgoyBnNmYpatzRCyTLx/s1600/borderMiddleLeft.png);}
.cboxIE6 #cboxMiddleRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtOOEBIv3XqTFq01ZlHA0lMGluvvoOHs-L7mzygbpq-2-e0efWDk7TzfCdJqUqh-9NaCRo0OxPdVSHLJD_E3GggFficMn9sVvx5bTCxSTW7ZKQQGi1tZEORCW2ex0R4qjrZZCEUHbzFWfD/s1600/borderMiddleRight.png);}

.cboxIE6 #cboxTopLeft,
.cboxIE6 #cboxTopCenter,
.cboxIE6 #cboxTopRight,
.cboxIE6 #cboxBottomLeft,
.cboxIE6 #cboxBottomCenter,
.cboxIE6 #cboxBottomRight,
.cboxIE6 #cboxMiddleLeft,
.cboxIE6 #cboxMiddleRight {
_behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}

/*-----------------------------------------------------------------------------------*/
/* Facebook Likebox popup For Blogger By Helper Blogger
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}

.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='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src="http://code.helperblogger.com/jquery.colorbox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*7;
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;'>
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9OEvjjgZ87ewMiijWZQ5Bf7k_TBxWFOcfWFCop6J_WnLjUshZNiODz8gw-Em-VRFvbHr0bU9NdsuVaX_rN-LMlpF-4BwDWY_J_bsFVZeP4cty9avBh8NJp9fRhoHMWbpmvTeQvA33XNlK/s1600/LikeUsOnFacebook.png" width:300px; height:150px;"/></center>
<center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbtsnts&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"><!-- Warning: Don't edit this line,If you edited this line then your gadget may not work --></iframe></center><p style=" float:right; margin-right:45px; font-size:4px;" ><a style=" font-size:8px; color:#3B78CD; text-decoration:none;" href="http://goo.gl/9fXrd">Grab This Gadget »</a> </p></div>
</div>


Sekarang gantikan btsnts dengan username facebook page anda (yang dalam warna merah)
Penyesuaian (Optional)

Saya telah menetapkan masa popup ini keluar 7 hari yang bermakna po pup ini akan muncul hanya sekali dalam 7 hari pelawat melawat.Jika anda mahu popup ini muncul setiap hari anda hanya perlu menukar * 7 nilai * 1 dalam kod di atas. (yang berwarna warna Kuning)

Social Ikon media 3D berputar/bergerak








Bagaimana ingin menambah widget ini ke dalam blog

1) Sekarang pergi ke Blogger Design> Dashboard.
Add a Gadget> HTML / JavaScript.

2)Paste kod di bawah selepas tu save.



<<Mula dari sini>>

<style>p#hb_socialicons img {
    -moz-transition: all 0.8s ease-in-out;   
-webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
p#hb_socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
</style>
<center><p id="hb_socialicons">
    <a href="
http://www.facebook.com/bloggertricksdotbiz">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgU_r0cYlb9cZ0qZ3OMcIJ2-37QNPoMm4jr9ae1XOaD8DjBlb0Zbzu7T_G_URljg-Ogsa-uCOQbOCfTYPfkFuqjBRTXK7XntQ8mpjfZCc8K5ouoi60oKY1yOSJhEp2ES0Q0S0KU0cwNGus/s1600/
bloggertricksdotbizFB.png " /></a>
<a href="
https://plus.google.com/110100302012846213219">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL9iIawoOb6EmZ6mvoFxoLRYIM3P5BOUajFtHUu-wn7Km2jNJ51t1C1FAyP-yGbaGcpgQV-I9mEe1x2qBl3sRKJXsQzU7IPp4I2q4PHEH-Qgcp2ECYuSA09AaDfydRNCAJHCSJaIH2z6I/s1600/
bloggertricksdotbizGP.png " /></a>
<a href="
http://www.twitter.com/jackievijay143">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKn6_x290DlCOIIA6uG9f_Xn9iHpl92_xpOrxPqRgUwqqcOOR86D7aN2xTPdw_47hOBEkUhI7kAkOgZs7Xq4MxXtz3DQgW-SrdjPQQpyZm2IRmmVEnb5VuTNswGcIXomlbQnLxLBKk_q0/s1600/
bloggertricksdotbizTW.png " /></a>
<a href="
http://pinterest.com/jackievijay143">
<img border="0" src=" http://3.bp.blogspot.com/-Npr8b-w9EDw/UCM9Itv5_cI/AAAAAAAABhk/8ejVQgh4k7w/s1600/
bloggertricksdotbizPT.png " /></a>
<a href="
http://www.feeds.feedburner.com/bloggertricks/btvj">
<img border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWkQ6e5gu18jzPvRX2_uxiaFXAJqkufuGpElTK6FF91lzPYiN7S48WnLrLTvTMSIW57mSifJz6AlCk95XozDVLgq8z4DNZfUqMi0Z1WzLIhkhywqWpiO5M0mDIpLCx7NutC-CsYklVTpw/s1600/
bloggertricksdotbizRSS.png" /></a>
</p></center>


<<berakhir di sini>>

script di atas bersaiz 64*64



Nota>>

1)Anda harus menukar setiap kod berwarna merah dengan kod sosial media anda seperti facebook,twitter dan google+.
2)Pastikan anda copy dan paste semua kod dengan betul.


setelah selesai anda akan dapat sebuah social widget yang amat cool dan pasti ramai pelawat blog anda akan kagum dengan anda....selamat mencuba

Monday, 25 March 2013

Cara membuat like box facebook tersembunyi


Pengguna Facebook semakin hari semakin ramai,hal ini menyebabkan ramai blogger sibuk membuat sebuah social plugins di blog atau laman web mereka.Bagi mereka yang mempunyai ramai fan page di facebook mereka pasti tidak akan melepaskan peluang ini dan sebahagian besar para blogger sudah memasang   like box yang disediakan oleh facebook.

Mungkin banyak blogger pening kepala kerana tidak mempunyai ruang di blog mereka bagi menambah widget terbaru,ini merupakan jalan penyelesaian bagi para blogger untuk mempunyai pelbagai widget yang menarik dan kemas.Widget ini akan tersembunyi di tepi blog dan akan keluar apabila disentuh.

Adakah anda ingin meletakkan widget ini di blog anda?jika jawapannya ya maka anda perlu mengikut langkah-langkah di bawah.


1)Login ke Blogger
2)Klik pada rancangan>>Add widget>>HTML/Javascript
3)Paste kod di bawah pada ruang yang disediakan.

<<mula dari sini>>

<HTML><META HTTP-EQUIV="content-type" CONTENT="text/html;charset=utf-8">
&lt;script 
type="text/javascript"&gt;<BR>//&lt;!--<BR>$(document).ready(function() 
{$(".floatinglikebox").hover(function() {$(this).stop().animate({right: "0"}, 
"medium");}, function() {$(this).stop().animate({right: "-250"}, "medium");}, 
500);});<BR>//--&gt;<BR>&lt;/script&gt;<BR>&lt;style 
type="text/css"&gt;<BR>.floatinglikebox{background: 
url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjioPUyKd7fsPrIg_BHvZZK5a_BPAmowoK-tj1tELphPTf6QARTrvieVrB5GvF8iIDEwcePEJaR9VhhwpBGdrBMMrmtxakBzKK88j4GdOlMBVI11JUJX38CV_mGJPtD_qzIu2dABp0Fxvg/s1600/floatingfb.png") 
no-repeat scroll left center transparent !important;display: block;float: 
right;height: 270px;padding: 0 5px 0 40px;width: 245px;z-index: 
99999;position:fixed;right:-250px;top:20%;}<BR>.floatinglikebox 
div{border:none;position:relative;display:block;}<BR>.floatinglikebox 
span{bottom: 10px;font: 10px tahoma,verdana,arial,sans-serif;position: 
absolute;right: 6px;text-align: right;z-index: 99999;}<BR>.floatinglikebox span 
a{color: #808080;text-decoration:none;}<BR>.floatinglikebox span 
a:hover{text-decoration:underline;}<BR>&lt;/style&gt;&lt;div 
class="floatinglikebox" style=""&gt;&lt;div&gt;&lt;iframe 
src="//www.facebook.com/plugins/likebox.php?href=<SPAN 
style="COLOR: blue">http://www.facebook.com/Bdiggfriendspage</SPAN>&amp;amp;width=251&amp;amp;height=270&amp;amp;colorscheme=light&amp;amp;show_faces=true&amp;amp;border_color=%23cccccc&amp;amp;stream=false&amp;amp;header=false&amp;amp;appId=159468740772399" 
scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:251px; 
height:270px; background:#fff;" 
allowtransparency="true"&gt;&lt;/iframe&gt;&lt;span&gt;&lt;a 
href="http://bdigg.blogspot.com/2012/04/cara-membuat-like-box-facebook.html" 
target="_blank"&gt;+ Get This&lt;/a&gt;&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;

<<Berakhir di sini>>

*Gantikan kode berwarna biru dgn Url facebook anda.

4)Pergi ke edit HTML dan letakkan kod di bawah di atas kod </head>

<<bermula di sini>>

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

<<berakhir di sini>>

5)Save template anda dan siap.

Sekian sahaja tutorial saya bagi segmen cara membuat like box tersembunyi dan saya berharap anda mendapat manfaat daripada tutorial ini.