Spice Up Blogging And Technology: Blogger Widget

Showing posts with label Blogger Widget. Show all posts

Email Feedburner Subscription Widget For Blogger And Website

at Tuesday, April 16, 2013 Posted by Unknown Labels: Blogger Widget 1 comments

One of the important way to get more audience to your site is to get more subscribers to your site. You can do that by providing a attractive subscription widget to your blog or website. Here is a simple email subscription box which allows your users to subscribe to your feeds.

Once you get more number of subscribers to your site then automatically your traffic and audience will be increased. Just follow the below steps to get this widget.

Step 1: Goto Blogger Dashboard--> Select Layout.

Step 2 : Click Add a Gadget --> Select HTML/JavaScript.

Step 3 : Now paste the following code and save it and you are done.

<style>

.spiceupblogging h4 {

background: none;

color: #fff;

font-size: 26px;

padding: 0;

text-align: center;

text-shadow: 1px 1px #333;

}

.spiceupblogging #subbox {

background: #fff;

padding: 10px;

width: 80%;

}

.spiceupblogging #subbutton {

-moz-border-radius: 3px;

-moz-box-shadow: 0 1px 1px #a24a1d;

-webkit-border-radius: 3px;

-webkit-box-shadow: 0 1px 1px #a24a1d;

border-radius: 3px;

box-shadow: 0 1px 1px #a24a1d;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwwh3ti9kocEaHUg7eS4EFVoikPYx-UUCD3-ErCR8WrQSVxQ5z5k0612jM1DVpEw_ofgprMs2pUrTwLbCculyKQD7CWDsNyJji2Fx2NhT_mSm3V2AFfICD-JfUeT0wypUKqqh7TDwkowP3/s1600/1.png) 0 0;

border: none;

color: #333 !important;

font-size: 14px;

font-weight: bold;

margin: 0 auto;

padding: 10px 15px;

text-shadow: 1px 1px #fff;

text-transform: uppercase;

}

input[type="button"],

input[type="submit"],

a.more-link {

-moz-border-radius: 3px;

-moz-box-shadow: 0 1px 1px #ccc;

-webkit-border-radius: 3px;

-webkit-box-shadow: 0 1px 1px #ccc;

border-radius: 3px;

box-shadow: 0 1px 1px #ccc;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEia8V6L06brt13PARMnaHtdOVHvgKVQe9PPGP6yqf1RmmNEN6x2Gv0L49Gx1w_OEJvuHsOuRCk9SdsabJqOKWS7lSUnfxa0xgzktloTUC107e86A8RukfxENpykQ55xhG2N2OtpgdGxEdWo/s1600/2.png) 0 0;

border: none;

border-bottom: 1px solid #b15120;

color: #fff !important;

font-size: 13px;

font-weight: normal;

padding: 8px 12px 6px;

text-decoration: none;

text-shadow: 1px 1px #a1491d;

}

.spiceupblogging #subbutton:hover {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg2ibOchcA3M9PN0I1y3HPiGWm9I1lXCfM13M6KB-eZkRLmYqPV_BFbchHomzTj-TBqlPpoFqjh-f54VM4I2U-V_9PxpTr91YzXBTHft3sZkjbrwFK8qP9B0q-5BFHNyxopnjYS-y3DSJl/s1600/3.png) 0 -40px;

}

input:hover[type="button"],

input:hover[type="submit"],

a.more-link:hover {

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbB4gdtGxq6CZo4aIWEY0QKDT77qkF6da7wkSgE0aEOU3lMrUhQjhvT50nGE2bGzWph1iO98eBLR0oj75ix6HSQhRS0WG0DBXU1NgOwdqBooInn2peTfHwyzHVKJ2JZOeSh57ugmbfj1IC/s1600/4.png) 0 -40px;

cursor: pointer;

}

.spiceupblogging h4 {

background: none;

color: #fff;

font-size: 26px;

padding: 0;

text-align: center;

text-shadow: 1px 1px #333;

}

.spiceupblogging h4 {

margin-bottom: 10px;

text-shadow: 1px 1px #a1491d !important;

}

.spiceupblogging {

background-color: #00FFFF;

margin: -5px;

min-height: 201px;

padding: 20px 10px 20px;

text-align: center;

}

.spiceupblogging p {

color: #fff;

text-shadow: 1px 1px #a1491d;

}

.spiceupblogging #subbox {

-moz-box-shadow: 1px 1px 3px #ccc inset;

-webkit-box-shadow: 1px 1px 3px #ccc inset;

background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNLz0EhH9W83qovc9Ci54IShtEA5VB1muYkUhd_Y7qt7tSIKhjOGmwUM8DNy4XZgsEVq4xjzscjZSytgIdQS2EU4YO04VRQzc3iZtc1msIfHfzp9uCW078n321FmVKZBBGZxBhChJszhcZ/s1600/5.png) center left no-repeat;

box-shadow: 1px 1px 3px #ccc inset;

border-left: 1px solid #9e6e56;

border-top: 1px solid #9e6e56;

color: #aaa49f;

font-size: 11px;

font-weight: bold;

margin: 0 10px 15px;

padding: 14px 10px 12px 50px;

text-transform: uppercase;

width: 195px;

}

</style>

<div id="spiceupblogging-2" class="widget spiceupblogging-widget"><div class="widget-wrap"><div class="spiceupblogging"><h4 class="widgettitle">Email Newsletter</h4>

<p>Join our site which has more than 3000 subscribers. </p>

<form id="subscribe" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open(

'http://feedburner.google.com/fb/a/mailverify?uri=spiceupblogging', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">

<input type="text" value="Enter your email address …" id="subbox" onfocus="if ( this.value == 'Enter your email address …') { this.value = ''; }" onblur="if (

this.value == '' ) { this.value = 'Enter your email address …'; }" name="email" />

</form>

</div>

Just replace spiceupblogging with your feedburner ID.

If you need to replace the background color you can do it by replacing #00FFFF

Add Static Google Plus Box With Smooth Hover Effect For Blogger

at Tuesday, January 08, 2013 Posted by Unknown Labels: Blogger Widget, Social Media 6 comments

In this post i will explain you how to add static google plus box for your blogger. There is already this type of static like box for facebook, now i am providing you such thing for developing the google plus members and this can improve your traffic to certain amount.

This is purely made with CSS and if needed changes can be made such as colour and others. Before getting this you can view the demo to know how it will look at your site.

Add This To Blogger

Step 1: Login to your account.

Step 2: Now goto Layout-->Add A Gadget-->HTML/Javascript.

Paste the following code in it.

<style> .post-body{padding:8px 0 10px} </style>
<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 500;
summary_img = 390;
img_thumb_height = 120;
img_thumb_width = 180;
</script>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
(function() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = '//pagead2.googlesyndication.com/pagead/js/google_top_exp.js';
var head = document.getElementsByTagName('head')[0];
if (head) {
head.appendChild(script);
}})();
</script>
<style type="text/css">
#gpplikebox{
background-color:#F90101;
display:block;
padding:0;
z-index:99999;
position:fixed;
}
.gpplbadge{
background-color:#F90101;
display: block;
height:150px;
top:50%;
margin-top:-75px;
position:absolute;
left:-47px;
width:47px;
background-image:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRlclbw2H7K96JQZExm3-p7xAueUqFVLZ1KtuX6YsmKXgpQH3MF9Qjlnie_HwQGJ54z-jjbZb3BSHjR-7Gpktt4sc2K1Ojme4LNR9aeXP8Oxhjl0maCAXz5xi3bjq_mkqkbzKYlJ7kdKQ3/s1600/gplus-right.png");
background-repeat:
no-repeat;
overflow:hidden;
-webkit-border-top-left-radius:8px;
-webkit-border-bottom-left-radius:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-bottomleft:8px;
border-top-left-radius:8px;
border-bottom-left-radius:8px;
}
</style>
<script type="text/javascript">
(function(md){
md(document).ready(function(){
var $dur = "medium";
// Duration of Animation
md("#gpplikebox").css({right: -250, "top" : 100 })
md("#gpplikebox").hover(function () {
md(this).stop().animate({
right: 0
}, $dur);
}, function () {
md(this).stop().animate({
right: -250
}, $dur);
});
md("#gpplikebox").show();
});
})(jQuery);
</script>
<div id="gpplikebox" style="display:none;">
<div class="gpplbadge"></div>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdPuRk9VL5D4IGTxfyqE04tJ0zamweq6B75JEmTe9sCWxwmyzNit7OPAXxjXmpDw5iwcgWVuJO7zVHfsQMQSX8pFQLVdt71oZyQCMT8m46oq5WP8Wvsc_3F17SkEK5GlekmY55qSxySeOg/s128/bloggers-hero.blogspot.com.png'/>
<div class="g-plus" data-action="followers" data-height="300" data-href="https://plus.google.com/105700823233597076366" data-source="blogger:blog:followers" data-width="245">
</div>
<script type="text/javascript">
(function() {
window.___gcfg = {'lang': 'en'};
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</div>

Step 3: Now replace 105700823233597076366 with your Google plus ID.

Step 4: Click save and you are done.

Take few seconds to share this with your friends...

New Stylish Facebook Likebox For Blogger

at Saturday, December 15, 2012 Posted by Unknown Labels: Blogger Widget, Social Media 1 comments

Here is a new stylish facebook likebox for your website. Most of them promoting their site by sharing their articles to the social networking sites. For such work here is a likebox for blogger which is somewhat different from others.

This will be attractive and will make your visitors to like your facebook page. It is very simple to add this to your blogger. To get this do the following:

Step 1: Goto your Dashboard-->Layout-->Add a Gadget-->HTML/Javascript

Step 2: Paste the following code in it.

<style>.spiceFB {

width: 280px;

height: 150px;

border-radius: 3px;

position: relative;

background-color:#f4f4f4;

padding:5px 10px 15px 0;

}

.spiceFB, .spiceFB:before, .spiceFB:after {

background: #f4f4f4;

border: 1px solid #ccc;

}

.spiceFB:before, .spiceFB:after {

content: "";

position: absolute;

bottom: -3px;

left: 2px;

right: 2px;

height: 1px;

border-top: none;

}

.spiceFB:after {

left: 4px;

right: 4px;

bottom: -5px;

box-shadow: 0 0 2px #ccc;

}

</style>

<div class="spiceFB">

<div style="height:155px;overflow:hidden">

<fb:like-box href="https://www.facebook.com/spiceupblogging" data-width="300" data-height="179" data-show-faces="true" data-border-color="#f4f4f4" data-stream="false" data-header="false" class=" fb_iframe_widget "><span><iframe id="f5741c08" name="fdd6ca2ec" scrolling="no" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; border-image: initial; overflow-x: hidden; overflow-y: hidden; height: 179px; width: 300px; " class="fb_ltr" src="http://www.facebook.com/plugins/likebox.php?border_color=%23f4f4f4&channel=https%3A%2F%2Fs-static.ak.fbcdn.net%2Fconnect%2Fxd_proxy.php%23cb%3Df2babfba84%26

origin%3Dhttp%253A%252F%252Fwww.spiceupblogging.com%252Ff1ae6f85b

c%26relation%3Dparent.parent%26transport%3Dpostmessage&colorsch

eme=light&header=false&height=179&href=https%3A%2F%2F

www.facebook.com%2Fspiceupblogging&locale=en_US&sdk=joey&a

mp;show_faces=true&stream=false&width=300"></iframe></span></fb:like-box>

</div>

<div id="fb-root"></div>

<script>(function(d, s, id) {

var js, fjs = d.getElementsByTagName(s)[0];

if (d.getElementById(id)) return;

js = d.createElement(s); js.id = id;

js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";

fjs.parentNode.insertBefore(js, fjs);

}(document, 'script', 'facebook-jssdk'));

</script>

Step 3: Now replace spiceupblogging with your facebook page name.

Step 4: Now click on the save button.
That's it you are done.... Post your comments below.... Share this gadget with your friends.

How To Place Your Ads Or Widgets After The Post Title

at Tuesday, December 11, 2012 Posted by Unknown Labels: Blogger, Blogger Widget 1 comments

In this post i am going to explain that how to place google ads or any other ads after the post title. Placing your ads after the title will bring you more Click through rate(ctr). You can also follow these same steps to place any other gadgets after the post title.

Remember one thing before placing your ads by this steps you have to encode your adsense ads. After that your code will be ready to place at your template.

Step 1: Go to your dashboard-->Template-->Edit HTML-->Expand Widget Templates.

Step 2: Search for <div class='post-body'>

or

<div class='post-body entry-content'> (Click Ctrl+f to search).

Step 3: Now after this found line place the following code.
<b:if cond='data:blog.pageType == "item"'>
Your adsense code
</b:if>

You can also make your adsense to float for that use the following code.

<b:if cond='data:blog.pageType == "item"'>
<div style='float:left; margin-right:15px;'>
Your adsense code
</div>
</b:if>

Here you can change the value left to right to float your ads at the right side.
Replace Your adsense code with your coding.....
Now save your template.

Mashable Social Sharing Widget For Blogger

at Tuesday, September 04, 2012 Posted by Unknown Labels: Blogger Widget, Social Media 0 comments

The best way to promote a blog is to share the content with different social sharing websites. There are different social sharing gadgets are available to expose your blog. But each of the gadget will have different codes. Te only way to get all the needed important gadgets at one place is to use the mashable gadget to your blog.

This social sharing gadget will contain facebook,twitter,google plus sharing option. And also it contains the email subscription button to get more readers to your blog. It is sure that this type of mashable social sharing widget will bring more traffic to your blog.

To get this widget follow the below steps:

1.Goto your blogger Dashboard.
2.select Layout-->Add A Gadget-->Html/Javascript.
3.Copy the following code and paste it.

<style type="text/css">
/*<!CDATA[*/
#w2b-mashable{width:300px;margin:auto;padding:0;}
.w2b-googleplus {height: 57px;}
.w2b-facebook {background:#FFFFFF;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;}
.w2b-gplusone {background-color: #f5fcfe;border: 1px solid #d8e6eb;border-top: 1px solid white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height: 24px;height:30px;}
.w2b-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;}
.w2b-twitter {background-color: #eef9fd;border: 1px solid #c7dbe2;border-top: 0;}
.w2b-twitter a.twitter-follow-button {display: block;}
.w2b-twitter iframe {margin: 9px 11px;}
.w2b-emailbox {background-color: #E3EDF4;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 12px 16px;overflow: hidden;}
.w2b-emailbox form{width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
.w2b-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
.w2b-emailbox input.emailu:focus {color: #333;}
.w2b-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
.w2b-emailbox input.submitu:hover {text-decoration: none;}
.w2bDefault {border: 1px solid #cc7c00;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
.w2bDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}.w2b-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;}
.w2b-moresubs a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
/*]]>*/

</style>

/*<![CDATA[*/

window.___gcfg = {lang: 'en'};

(function(){

var po = document.createElement("script");

po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";

var s = document.getElementsByTagName("script")[0];

s.parentNode.insertBefore(po, s);

})();

/*]]>*/

</script>

</div>

</div>

(function() {

var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;

po.src = "https://apis.google.com/js/plusone.js";

var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);

})();/*]]>*/

</script>

<span>Recommend on Google</span>

</div>

<a href="https://twitter.com/spiceupblogging" class="twitter-follow-button" data-show-count="true">Follow @spiceupblogging</a>

</div>

<tr>

<td>

</td>

</td>

</tr>

</table>

</form>

</div>

<a href="http://www.spiceupblogging.blogspot.in/">Get this Gadget</a>

</div>

Now replace all spice up blogging with your social sharing names.

That's all you are done...

Facebook Social Sharing Corner Widget For Your Blog

at Sunday, August 26, 2012 Posted by Unknown Labels: Blogger Widget, Social Media 1 comments

We know that facebook is the largest social sharing website which is used by the website owners to develop their sites.There are different social sharing widgets available,but here is a different widget for facebook which will apparently bring more visitor to your site.

This widget will increase your number of likes on facebook and provide you good traffic sources.To get this widget do the following.

1.Goto your Blogger Dashboard.

2.Select layout-->Add A Gadget-->Html Javascript.

3.Copy the following code and paste it.

<style type="text/css">
#facebook {position: fixed;top: 0;right: 0;z-index: 9997;cursor: pointer;}
</style>
<a target="_blank" id="facebook" href="http://www.facebook.com/spiceupblogging/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSQshgq4Zkb7_l1NocbhFvfxCNgCc-PIL7xpD_D-juDCn3jHPrJlfFZyXV_Nu4OuoxQJyLgBP8o_V-zDNhkbPMF72ATxO2KeVAdJtATViEKq41Puz5ZUqPHm5mnt6_DyGjq6TU3KtE6g/s1600/JoinUsOnFacebook.png" alt="Join Me On Facebook" /></a>

4.Now replace spiceupblogging with your facebook page name.

That's all you are done.Leave your comments here...

Spice Up Blogging And Technology

Email Feedburner Subscription Widget For Blogger And Website

Add Static Google Plus Box With Smooth Hover Effect For Blogger

New Stylish Facebook Likebox For Blogger

How To Place Your Ads Or Widgets After The Post Title

Mashable Social Sharing Widget For Blogger

Facebook Social Sharing Corner Widget For Your Blog

Follow Us on Facebook

Search This Site

Followers

Categories

Weekly Hits

Blog Archive

Labels