Widget sosial subscribe dengan button CSS3 ~ TutorialBlogger

Unknown on 04:53

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'), -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'), -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="follower-rss"> <span>515</span>readers

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="follower-facebook"><span>260</span>fans

</div>

<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.

TutorialBlogger

Main menu

Thursday, 28 March 2013

Widget sosial subscribe dengan button CSS3

Filled Under:

1 comments:

Follow us on Facebook

Sponsors