Hello!
Can i help you?
Showing posts with label Blogger Plugins. Show all posts
Showing posts with label Blogger Plugins. Show all posts
JQUERY: Simple Accordion Drop Down Menu With Jquery & CSS
JQuery Plugin: Social Subscription Sliding Bar
Adding social widget can be important part of increasing your blog or website traffic, Social widget enable visitors to subscribe quickly on your official pages on social media networks. This tutorial have one really Amazing Sliding plugins, Sliding plugin bar sticky at the right side of your page that will slide out social share buttons when mouse hovers over. Social Plugins: Stay Tuned Social Subscription Widget V 2.0
There are literally hundreds of social media sharing plugins that can display social share button for WordPress, blogger and many more are added each day. Today we have a great social subscription plugins with attractive design which we have created early, its a second version of our previous social subscription plugins with tooltip. In this version we have removed some CSS reset bugs and also make some addition in the plugin layout. The plugin allow visitors to join social networks, such as Facebook, Twitter, Pinterest, Google plus, FACEBOOK, Twitter, PINTERST, RSS FEED, LINKEDIN, TUMBLR and YOUTUBE.Add CSS3 HTML5 Email Subscription Widget To Blogger Blog
After a long we are back again with a beautiful subscription box, If you aren’t building a email subscription widget, you’re missing significant opportunities to capture leads, build community, and create a sustainable way to communicate with those who are interested in what you have to say (and/or sell). Your subscriber is like diamond and it’s a resource you must develop, nurture and grow. It doesn’t matter what type of business or nonprofit work you are in or how big or small you are. You need to build your email subscription. But simply putting a newsletter sign-up form on your site isn’t the most effective thing you can do. It’s also about how you place it on your site, what tactics you use to drive subscribers and it’s a LOT about content… what you share and how you communicate with your email subscription list so that you provide them value. So today we sharing with you a subscription widget with elegant design we have used image for background and also use HTML5 required attribute and some eye caching CSS3 effects we hope you may like it.How To Add Flat Scrolling “Back To Top” Button Into Blogger Blog
Performs a smooth page scroll to an anchor on the same page using JQuery, it is very cool way to attract your readers and maker your web site navigation easy.Today in this tutorial we will share a awesome JQuery smooth scrolling back to top button, It appears on the right side bottom only when the user scrolls down the page and disappears as he scrolls up. A back to top button is crucial for a blog or site because visitors enjoy easy site navigation so this button will provide them with this ease. We have kept the installation process a one step process. Please see this button in action towards the bottom right corner of this blog.Flat Flipping Floating Stay Connected Widget For Blogger
Nowadays Stay connected Widget are very important websites and blogger owners. Whether you run a website or you are a blogger, you definitely need social subscription widget. To tell your users or visitors about your social media accounts. With the increase of the use of social media, it has rather become a necessity to have social media accounts. But choosing the right social icons according to your theme is also important. You don’t want your visitor to just ignore your social media links, due to ugly looking icons. Social Sharing Floating Bar With Multiple Background & 3D Border (V2)
Recently a lot of my readers have been saying me please sharing that floating bar which is you are using on your blog. So today we are going to bring it here for our valuable readers. To add as much value as possible i’ve included some other social sharing buttons plugins in the bar so your website or blog readers have more choice when he/she decide to share your articles. Social Share Buttons let the user stay on the site and share the content on their social media profiles with just a click and without leaving the site. Site visitors can choose interesting content to share, click on the social share button and easily post an update to their social media profiles. Check the previous version? Floating SharingIn our newer version we just add sharethis button and also make it attractive with multiple background theme, I hope you will enjoy after adding plugin to you blog and website.
Attractive Latest Post Widget For Entertainment Blogger Blog
How To Add It To Blogger Blog
- Go to blogger layout section
- Click Add A Gadget.
- In Add A Gadget window, select HTML/JavaScript .
- Copy the code below and paste it inside the content box.
- Save the gadget.
- Drag the gadget and reposition it where you want to show recent posts.
- Click Save button (top right hand corner).
<style>
#bp_recent {
width:320px;
padding: 5px;
color: #999;
font-size: 14px;
text-align:justify;
}#bp_recent img {
width: 120px;
height: auto;
border: 8px solid rgba(255, 255, 255, 0.5) !important;
-webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.2);
box-shadow:1px 1px 1px rgba(0,0,0,0.2);
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}#bp_recent img:hover {
opacity: 0.5;
-webkit-box-shadow:0px 1px 1px 1px rgba(0,0,0,0.2);
box-shadow:0px 1px 1px 1px rgba(0,0,0,0.2);
}
#bp_recent a{
margin-bottom: 10px!important;
}</style>
<div id='bp_recent'></div>
<script type="text/javascript" src="http://yourjavascript.com/401413211131/recentposts-orig.js"></script>
<script style='text/javascript'>
var numberOfPosts = 8;
var showPostDate = false;
var showSummary = false;
var summaryLength = 0;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 55;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
var readMore = 'Read More';
</script>
<script src='http://www.mybloggertricks.org//feeds/posts/summary?max-results=10&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>
1. Simply replace the http://www.mybloger-tricks.com with your own blog address (Url) which is include "http://".
2. Widget comes with fixed width you can also edit width by changing following value (300 to 350 e.g.).
width: 320px;
Do you have any query regarding this tutorial on how to add recent posts widget to blogger? Post your queries via comment and we'll get back to you as soon as possible. I hope this tutorial has been of interest. Thank you everyone for reading and special thanks to bloggerplugins.org for his valuable help for making script. Make sure you browse the comments as some of them contain useful advice about how to make your widget customizable, how to reduce number of the posts even further the size of the recent post image, etc. If you don't want to miss any of our future updates? Subscribe to our rss feeds to get all our latest updates delivered directly to your email inbox.
Stay Tuned Social Profiles Plugin With Tooltip For Blogger Blog
In today’s tip we’ll show you how to create some simple, animated tooltips using CSS transitions and the pseudo-classes :before and :after. For the little pointer, we will style the pseudo-elements :before and :after. We will style them the same way and create a triangle by using transparent left and right borders. The :before pseudo-element will serve as a shadow for the :after pseudo-element, so we’ll give it a blue color. After the growth and advance development in Social media websites, lots of peoples are showing their interest in appearing their website with their favorite social networking website i.e. Facebook, Google Plus, Twitter and etc. Tooltips is the fancy addition in the Social networking Widgets. Whenever, your visitors would place their pointer on a social icon a small box will appear with information about the specific item that is being hovered. AddThis Smart Layers Plugin For Blogger And WordPress
If you’ve read our previous tutorials on Addthis sharing tool, you probably know about AddThis. Any website that’s been developed over the last few years, now has social follow and social sharing options, and AddThis is the number one provider of those sharing buttons. Now good news is that, he lunched smart layer plugin for Blogger, WordPress and also for Joomla. smart layer plugin is very easy-to-install layers float effortlessly over your content without disrupting your layout. Now that's smart way to add sharing buttons, follow us buttons and also you can show recommended post slider at the right bottom corner. We are very excited to share this much pretty tool with our valuable readers. Below are the steps how to add it on your blog and website. it's also easy to set up, social sharing buttons in various places on your WordPress site.Blogger Recent Posts Widget With 3D And Metro Style Border
How to add it to blogger blog
- Go to blogger layout section
- Click Add A Gadget.
- In Add A Gadget window, select HTML/JavaScript .
- Copy the code below and paste it inside the content box.
- Save the gadget.
- Drag the gadget and reposition it where you want to show recent posts.
- Click Save button (top right hand corner).
<style>
#bp_recent {
width:300px;
padding: 5px;
color: #999;
font-size: 14px;
text-align:justify;
}#bp_recent img {
width: 70px;
height: auto;
border-top:5px groove #00a4ef !important;
border-bottom:5px groove #ffb900 !important;
border-right:5px groove #7fba00 !important;
border-left:5px groove #f25022 !important;webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.2);
box-shadow:1px 1px 1px rgba(0,0,0,0.2);
}#bp_recent a{
color: #fff;
font-size: 15px;
text-transformation: uppercase;
margin-bottom: 10px!important;
}#bp_recent a:hover {
text-decoration: underline;
}</style>
<div id='bp_recent'></div>
<script type="text/javascript" src="http://yourjavascript.com/401413211131/recentposts-orig.js"></script>
<script style='text/javascript'>
var numberOfPosts = 9;
var showPostDate = false;
var showSummary = false;
var summaryLength = 0;
var titleLength = 0;
var showCommentCount = false;
var showThumbs = true;
var showNoImage = true;
var imgDim = 55;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = false;
var readMore = 'Read More';
</script>
<script src='HERE_IS_YOUR_BLOG_URL/feeds/posts/summary?max-results=10&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>
Widget Customizations
1. Simply replace the HERE_IS_YOUR_BLOG_URL with your own blog address (Url) which is include "http://".
2. Widget comes with fixed width you can also edit width by changing following value (300 to 350 e.g.).
width: 300px;
Need any help
Do you have any query regarding these tutorial on how to add recent posts widget to blogger? We're always there to put you through. Post your queries via comment and we'll get back to you as soon as possible. We've done our own part by sharing these informative tutorial with you. So, it's now your turn to show appreciation by leaving a useful comment below.You don't want to miss any of our future updates? Subscribe to our rss feeds to get all our latest updates delivered directly to your email inbox.
Pinterest Pin It Official Button on Image Hover (Good News)
Pinning an image just got easier and more intuitive with this hover button. You may have noticed that some professional photographer website have custom pinterest hover button for their website's professional images, with Word Press it’s quite straightforward, whereas with Blogger it can be much more complicated, mostly for those who are hate modifying the code for their blog template.Now luckily we're excited to tell that pinterest developer team finally made an official image hover pin it button for blogger. The on hover pin it button appear just like the regular pin it button, but it only shows up when a person mouse over an image.The pin it button should disappear again when your mouse-cursor is not on the image anymore.They look great on pages with lots of images and might look and feel better if your design is on the minimal side. Pinterest developer team made it very easy to install on your blogger blog. It only takes one line of code to get the button on mouse over the image. So follow the simple step below.
How To Add It In Blogger Blog
No HTML is required for hoverbuttons; all you have to do is load the JavaScript listed below. Once you have this installed, images should show a Pin It button when hovered over. (If you're already running pinit.js, just add the data-pin-hover="true" attribute to the existing SCRIPT tag.)
1. Go to your blogger dashboard>>Template>> Edit HTML
2. and find the following code in your template code.
</body>
3. and put it just above your closing </BODY> tag. (provided by pinterst).
4. Click on save button and you're done..!!!
<script type="text/javascript" data-pin-hover="true" src="//assets.pinterest.com/js/pinit.js"></script>
Note:- If you are already using pinterest pin it button then just add following attribute code in pinterest script tag.
data-pin-hover="ture"
You can see complete script above in step 3.
Note:- If you're not already running pinit.js on your page, please visit the Widget Builder to find out more about the Pin It button and the rest of Pinterest's fleet of handy widgets.
Some Images Won't Work with the following reasons.
CSS background images, images that are under 80 by 80 pixels in size, images that have the data-pin-no-hover="true" attribute set, images that have the nopin="nopin" attribute set, and images whose SRC attribute starts with data: won't show hover buttons.
You can definitely still use Pinterest regular Pin It button, and we think these new hover buttons are pretty nice, too..!!
Email Popup Subscription Box For Blogger Blog
How to install email popup subscription box
You can Install This Widget Easily in your Blog By Following These Simple Steps....
Before you edit any template it's better to keep a Backup. So First Backup your Template.
1. Go to your Blogger Dashboard>>Template>>Edit Html
2. Find following code in your template.
</head>
3. and paste the following code before/above </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script><script src='http://yourjavascript.com/69231961363/jquery-colorbox-min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var setDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + setDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"395px", height:"435px", inline:true, href:"#email-popup"});
}});</script>
Note:- *7 Setting this value will effect cookie refreshment. I have set the Subscription box to appear once to the visitor and Subscription box will appear again after 1 week. If you want to display after a 1 day then set 7 to 1. if you set the value 1 then it Must annoying your Blog regular readers. So Leave it By Default and follow the next step.
4. Now Search for </b:skin>. ( Note:- Click the black arrow to expand the code. )
#subscriptionwrap {
width: 600px;
background: #e9e9e9;
padding: 15px;
margin: 14px;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow: 0 1px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
box-shadow: 0 1px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
}.subscriptionbox h4 {
font-size: 30px;
font-family: 'Verdana', Arial;
font-variant: small-caps;
margin: 0 auto;
text-align: center;
line-height: 30px;
color: #333;
font-weight: 600;
text-shadow: 1px 1px 5px #333;
text-decoration: none !important;
}.subscriptionbox p {
font-family: geogia;
font-style: italic;
font-size: 26px;
text-align: center;
margin: 0px;
line-height: 30px;
margin-top: 25px;
border-bottom: 1px solid #333;
color: #454545;
padding-bottom: 20px;
}.emailbutton1 {
background: #f7f8f9;
background: -webkit-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
background: -moz-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
background: -o-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
background: -ms-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
background: linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f7f8f9",endColorstr="#e9e9e9",GradientType=0 );
border: 1px solid #ddd;
-webkit-border-top-right-radius: 4px;
-moz-border-top-right-radius: 4px;
border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
-webkit-box-shadow: 0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow: 0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
box-shadow: 0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
color: #888 !important;
text-shadow: 0 1px 0 #fff;
line-height: 1.5;
top: 0px;
margin: 10px 0 0 -15px;
cursor: pointer;
padding: 18px 15px 15px 15px !important;
font-size: 14px;
font-weight: bold;
text-decoration: none !important;
}.emailbutton1:hover {
background: #f1f1f1;
background: -webkit-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
background: -moz-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
background: -o-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
background: -ms-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
background: linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f1f1f1",endColorstr="#e0e0e0",GradientType=0 );
text-decoration: none !important;
}.emailinput1 {
width: 490px !important;height: 37px; padding-right: 30px !important;
float: left;
margin: 10px 0 0 0px;
padding: 8px 40px 8px 10px;
border: 1px solid #d2d2d2;
background: #fff;
font-family: georgia;
font-style: italic;
font-size: 16px;
color: #949494;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
text-decoration: none!important;
}
5. Save your template and you are done second last step! Visit your blog to see it working just perfectly? if everything is working fine then Follow the final step below.
6. Now finally find the following code.
</body>
7. and paste the following code before closing </body> tag.
<div style='display:none'>
<div id='email-popup' style='position:scroll; z-index:99999;'>
<div id='subscriptionwrap'>
<div class='subscriptionbox'>
<h4>Ready To Be Make <strong>Elegant Blog</strong></h4>
<p>Subscribe to My Blogger Tricks to enjoy Free Tricks</p>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform1' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=bl0ggertricks", "popupwindow", "scrollbars=yes,width=550,height=520");return true' target='popupwindow'>
<input name='uri' type='hidden' value='bl0ggertricks'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='emailinput1' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
<input class='emailbutton1' title='' type='submit' value='SignUp'/>
</form>
</div>
</div>
</div>
</div>
8. Now you need to make these changes in html code.
- Edit the highlighted yellow text to anything you like. It will appear at the top of the input box.
- Now replace bl0ggertricks with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
- Replace bl0ggertricks with your feed title. It appear at the end of your feed link. In my case it is <input name='uri' type='hidden' value='bl0ggertricks'/>
9. Save your template and you are all set!
Visit your blogs and see it popping up just fine! Remember that the popup will show only once. To see it again you will first need to delete your browser cookie and then refresh the page to see it appearing again. I just hope you would find this tutorial easy and yet exciting. Please let me know if you need any help. I just hope you can make your strong Twitter Followers growth. Wish you success and peace buddies. Stay updated by subscribing our email news feed or like our facebook page.
Image Credit:- FreeDigitalPhotos.net
Add Twitter Popup Follower Box To Blogger Blog
Now a days every blog owner thinks to increase his/her blog's traffic and the most popular way to increase blog's traffic is to Share your post on social media Sites like Facebook, Twitter, DiGG etc. So today i have come with Twitter Follower Box Widget for blog owner who run their blog on blogger. It works like and is closely based on Facebook fan/Like box algorithm. The widget designed for get more Twitter Followers. This box has also a close button at the top right corner. Visitor can close this widget by clicking on close button. Popup box widgets really annoy your visitors when they appear again and again, but they help you in developing your blog well when you use them properly. Twitter is a major source of traffic which can send your blog a good traffic flow when you have enough Followers on your Twitter page. To expand your Twitter network and to increase your Twitter Followers, I have brought a very stylish Onetime Twitter Follower Popup Widget for your blogger blog which will appear onetime only and thus it will increase your Twitter Followers dramatically without annoying your visitor. We are again Say Thanks to jacklmoore for providing a juqery light box.
Live Preview
How to add it to blogger
You can Install This Widget Easily in your Blog By Following These Simple Steps....Before you edit any template it's better to keep a Backup.. So First Backup your Template.
1. Go to your Blogger Dashboard>>Template>>Edit Html
2. Find following code in your template.
</head>
3. and paste the following code before/above </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script><script src='http://yourjavascript.com/69231961363/jquery-colorbox-min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var setDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + setDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"395px", height:"435px", inline:true, href:"#twitter-popup"});
}});</script>
Note:- *7 Setting this value will effect cookie refreshment. I have set the Follower box to appear once to the visitor and Follower box will appear again after 1 week. If you want to display after a 1 day then set 7 to 1. if you set the value 1 then it Must annoying your Blog regular readers. So Leave it By Default and follow the next step.
4. Now Search for </b:skin>. Click the black arrow to expand the code.
/* 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;
-webkit-overflow-scrolling: touch;
}
#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;
max-width: none;
-ms-interpolation-mode: bicubic;
}
.cboxIframe {
width: 100%;
height: 100%;
display: block;
border: 0;
}
#colorbox, #cboxContent, #cboxLoadedContent {
box-sizing: content-box;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
} /* User Style: Change the following styles to modify the appearance of Colorbox. They are ordered and tabbed in a way that represents the nesting of the generated HTML. */#cboxOverlay {
background: #000;
}
#colorbox {
outline: 0;
}
#cboxContent {
margin-top: 20px;
background: #000;
}
.cboxIframe {
background: #fff;
}
#cboxError {
padding: 50px;
border: 1px solid #ccc;
}
#cboxLoadedContent {
border: 5px solid #000;
background: #fff;
box-shadow: 3px 3px 3px #fff;
}
#cboxTitle {
position: absolute;
top: -20px;
left: 0;
color: #ccc;
}
#cboxCurrent {
position: absolute;
top: -20px;
right: 0px;
color: #ccc;
}
#cboxLoadingGraphic {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1e07ZypPNOkyGU50DNJKhLh0IcQdNECq0k239P2gQwojYyImttsKuri6vFYUeu8VOreB619ew9xMNRNrUOSPT1-LAqpM6VRTG_J3kG-UVWgU7TywvvPVThcDPLGkZFltYO4gJPAKXvKk4/s32/loading.gif) no-repeat center center;
} /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */#cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {
border: 0;
padding: 0;
margin: 0;
overflow: visible;
width: auto;
background: none;
} /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */#cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {
outline: none;
}
#cboxSlideshow {
position: absolute;
top: -20px;
right: 90px;
color: #fff;
}
#cboxPrevious {
position: absolute;
top: 50%;
left: 5px;
margin-top: -32px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXE_BZDZQScOPg0LTck2wqBjs_AF4TWB0J9dxbhfC9kkoJZNp6VQ2dcHmOlPsTQBy7AuDLbrod3KBQUwD5x2bD4U9rizbaUPi9iuzOct_q4hukp94oPAkX65MJ9LcPSIjLvcwKPOPZXeaN/s1600/controls.png) no-repeat top left;
width: 28px;
height: 65px;
text-indent: -9999px;
}
#cboxPrevious:hover {
background-position: bottom left;
}
#cboxNext {
position: absolute;
top: 50%;
right: 5px;
margin-top: -32px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXE_BZDZQScOPg0LTck2wqBjs_AF4TWB0J9dxbhfC9kkoJZNp6VQ2dcHmOlPsTQBy7AuDLbrod3KBQUwD5x2bD4U9rizbaUPi9iuzOct_q4hukp94oPAkX65MJ9LcPSIjLvcwKPOPZXeaN/s1600/controls.png) no-repeat top right;
width: 28px;
height: 65px;
text-indent: -9999px;
}
#cboxNext:hover {
background-position: bottom right;
}
#cboxClose {
position: absolute;
top: 5px;
right: 5px;
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXE_BZDZQScOPg0LTck2wqBjs_AF4TWB0J9dxbhfC9kkoJZNp6VQ2dcHmOlPsTQBy7AuDLbrod3KBQUwD5x2bD4U9rizbaUPi9iuzOct_q4hukp94oPAkX65MJ9LcPSIjLvcwKPOPZXeaN/s1600/controls.png) no-repeat top center;
width: 38px;
height: 19px;
text-indent: -9999px;
}
#cboxClose:hover {
background-position: bottom center;
}
5. Save your template and you are done second last step! Visit your blog to see it working just perfectly? if everything is working fine then Follow the final step below.
6. Now finally find the following code.
</body>
7. and paste the following code before closing </body> tag.
<div style='display:none'>
<div id='twitter-popup' style='background:#fff;position:scroll;z-index:99999;'>
<div style='text-align:center;'> <h3 style='background: #000; color: #fff; margin-bottom: 20px; font-family: Verdana; Font-size: 18px; font-weight: bold; padding: 10px;'>Receive All Updates Via Twitter</h3>
<div id='twitter-box'/>
<script>
var tw_user = 'mybloggertriks';
var tw_width = 342;
var tw_height = 315;
var no_face = 18;
(function() {
var tw_box = document.createElement('script'); tw_box.type = 'text/javascript'; tw_box.async = true;
tw_box.src = '//50.63.179.86/twitter/tw.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(tw_box);
})();
</script>
</div>
</div>
</div>
8. Replace mybloggertriks with your Twitter username.
9. save your template and you are all done. .!!
Visit your blogs and see it popping up just fine! Remember that the popup will show only once. To see it again you will first need to delete your browser cookie and then refresh the page to see it appearing again. I just hope you would find this tutorial easy and yet exciting. Please let me know if you need any help. I just hope you can make your strong Twitter Followers growth. Wish you success and peace buddies. Stay updated by subscribing our email news feed or like our facebook page.
Add Simple And Awesome Subscription Box below your post
Today we are going to make a high quality RSS subscription box with no images. Alerting your visitors to subscribe at the bottom of your posts often help in increasing the number of your blog subscribers. The more readers you get the faster your blog grow. Providing visitors with easy and clean options to subscribe and bookmark should always be your first priority. I managed to design a simple box using CSS3 gradient and text shadow effect to create a container with RSS form inside it. The widget will stick to the bottom of your post and will let your visitors to submit their email addresses and subscribe to your FEED updates. Surely the best way to draw attention!..
How to add Subscription Box Below Your Blog Post
1. The First thing you need to do is to login into your Blogger account and go to >> Template >> Edit HTML and search for the ending ]]></b:skin>tag and just above it paste the following code.
#subscriptionwrap {
float: left;
width: 600px;
background: #e9e9e9;
padding: 15px;
border: 1px solid #ddd;
-webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;
-webkit-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4); -moz-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4); box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
}
.subscriptionbox h4 {
font-size: 38px;
font-family: 'Verdana', Arial;
font-variant: small-caps;
margin: 0 auto;
text-align: center;
line-height: 30px;
color: #333;
font-weight: 600;
text-shadow:1px 1px 5px #333;
text-decoration: none !important;
}
.subscriptionbox p {
font-family: geogia;
font-style: italic;
font-size: 26px;
text-align: center;
margin: 0px;
line-height: 30px;
margin-top: 25px;
border-bottom: 1px solid #333;
color: #454545;
padding-bottom: 20px;
}
.emailbutton1 { background:#f7f8f9; background:-webkit-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%); background:-moz-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%); background:-o-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%); background:-ms-linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%); background:linear-gradient(top,#f7f8f9 0%,#e9e9e9 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr="#f7f8f9",endColorstr="#e9e9e9",GradientType=0 ); border:1px solid #ddd; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; margin:0 auto; margin-left: -10px; -webkit-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4); -moz-box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4); box-shadow:0 1px 0 #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4); color:#888 !important; text-shadow:0 1px 0 #fff; line-height:1.1; top: -1px; cursor:pointer; padding:22px 15px 19px 15px !important; font-size:14px; font-weight:bold; text-decoration:none !important;}
.emailbutton1:hover, .formbutton:hover{ background:#f1f1f1; background:-webkit-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%); background:-moz-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%); background:-o-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%); background:-ms-linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%); background:linear-gradient(top,#f1f1f1 0%,#e0e0e0 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr="#f1f1f1",endColorstr="#e0e0e0",GradientType=0 ); text-decoration:none !important;}
.emailinput1{ height:40px; margin:10px 0 0 0px; padding:8px 40px 8px 10px; border: 1px solid #d2d2d2; background:#fff; font-family:georgia; font-style:italic; font-size:16px; color:#949494; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px;}
.emailinput1{ padding-right:30px !important; width:450px !important;}
Note:- if you want to change the width of subscription box. Just change the following value in above code “width: 600px; to any other value like 640px, 700px, 760px….!!!!!
2. In the template, search for the <data:post.body/> tag and just below it paste the following HTML Coding. In case, you are unable to find <data:post.body/>, then you can paste it just below <div class='post-footer-line post-footer-line-1'>.
<div id='subscriptionwrap'>
<div class='subscriptionbox'>
<h4>Ready To Be Make <strong>Elegant Blog</strong></h4>
<p>Subscribe to My Blogger Tricks to enjoy Free Tricks</p><center>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=bl0ggertricks", "popupwindow", "scrollbars=yes,width=550,height=520");return true' target='popupwindow'>
<input name='uri' type='hidden' value='bl0ggertricks'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='emailinput1' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
<input class='emailbutton1' title='' type='submit' value='SignUp'/>
</form>
</center>
</div>
</div>
3. Now you need to make these changes in html code.
- Edit the highlighted yellow text to anything you like. It will appear at the top of the input box.
- Now replace http://feedburner.google.com/fb/a/mailverify?uri=bl0ggertricks with your Feedburner Email Feed link. You can get it by visiting your feedburner account then navigate to Publicize and then to Email Subscriptions.
- Replace bl0ggertricks with your feed title. It appear at the end of your feed link. In my case it is <input name='uri' type='hidden' value='bl0ggertricks'/>
4. Save your template and you are all set!
You have successfully learned how to display related Articles below posts in blogger. Go and preview your posts to see everything is working in an order or not. Visit your blogs to see the new eye-catching change. I am sure this will greatly increase the number of your blog subscribers and don’t forget to subscribe our blog RSS Feed to get new tips & tricks. Thanks for reading our post.
Another Stay Connected Widget With All Subscription Option
Social media has changed the world of SEO and online marketing. In last couple of years, many social media marketing companies are coming into the market to create brand awareness via Social media promotion. If you are into Blogging, I’m sure you must be aware of advantage of having a Blog subscription box and some time it’s hard to select from hundred of subscription options available. Last time i have shared Stay Connected Widget for Blogger. Today I'm going to share Another awesome & Unique Social Subscription and email subscription Box for our honorable readers . Its really looks awesome & give a unique look to your blog. So add this beautiful email subscription box to your blog & attract new visitors to make them your blog's subscriber. You can see live demo on our blog sidebar. We are also working on this widget make it more attractive and easy to edit. So Now Stop the Description and let's start the tutorial.
How to add it to blogger blog
1. Login to your blogger Dashboard
2. Go to Layout and click a Add A Gadget.
3. Select HTML/JavaScript gadget.
4. . In title Field Write anything you want. like Stay Connected, Subscribe Us, Subscribe Now.
5. Copy the following code and paste it inside the content box.
<style>
.mbt-subscribe-box-email-field {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2F4GxQ9WLvTwnP_p1aPkl0sqqsyq6ybxsLkNsZo5fk4UVM9CVo4cp8Jvr2e-ZKW57h6bHp2CBgY-UmePsB-HdykNst8z7rnpzYv-2KAdPDGmxfnvz4W8aEXU79FnFJLiIUq1cZbixrrhi/s1600/sprites.png) no-repeat 0 -28px;
width: 280px;
float: left;
color: #777;
margin: 0 0 10px 0;
padding: 10px 30px;
border: 1px solid #ccc;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}
.mbt-subscribe-box-email-button {
background: #09f;
width: 280px;
float: left;
color: #fff;
font-family: 'Verdana, Arial;
font-size: 16px;
font-weight: bold;
padding: 10px;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
text-transform: small-caps;
}
.mbt-subscribe-box-email-button:hover {
background: #303030;
}
</style>
<!-- Social Profile Icons Start-->
<div id='social' style=' background: #d2ebff; width: 301px; padding: 10px 0 0 0px; margin: 0 0 0 0px; float: left;'>
<a href='http://feeds.feedburner.com/bl0ggertricks' imageanchor='1' target='_blank' title='Grab Our Rss Feed'><img alt='Icon' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSXp4ZAlOCNbC-CMiKH12jN_dUJz745KxZBwjfSo-jBPQ-Pu_0bugB6sccHJHtflzYyCffKAsLueYy1mZaMALb2kwO81qPCGQHKPo6i59cwnsAuT0hU-LbzbEXXEmRL80vuCGinAVFx37D/s1600/rss-feed-icon.png' style='margin-right:3px; margin-left: 4px;'/></a>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=bl0ggertricks&loc=en_US' imageanchor='1' rel='nofollow' target='_blank' title='Get Free Updates Via Email'><img alt='Icon' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1ExcFDVM5Y7tELnZtNvSs13GtMqL4LFDmpv6aljs3v2l4gdI2uV6_SQeWDneb8SyYYl27XpL2HeWaimxX2dj1CSLZ6lHJLbXnKFA3-WLgVedxhZ4NqBjIveAyVVpNFVu0GKh_5CTrDb82/s1600/Email-rss-feed-icon.gif' style='margin-right:3px;'/></a>
<a href='http://www.facebook.com/mybloggertiks' imageanchor='1' rel='nofollow' target='_blank' title='Like Our Facebook Page'><img alt='Icon' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkWqyCjbEt4SYV3uKTrxOhq10Ok3vmt4wpu6vbfgV-ScS56BI5C8pr-DeVrHRvjwm-xIU5niIbczZXLK-ZzeBwNjCXHh5n8FO6Ekcaozm4_Et3tPBuNPVjeZF5SmpcUnJNW4iSHG79ea91/s1600/facebook-icon.gif' style='margin-right:3px;'/></a>
<a href='http://twitter.com/mybloggerstricks' imageanchor='1' rel='nofollow' target='_blank' title='Follow Our Updates On Twitter'><img alt='Icon' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBYiJcamdaqiZ6EtK3HJfQTc46AGWea5RFXUo_jMRi_P0IenullSj0vQSk-4uun5viukybD-fqixRDoE8l9j1Hy9suvzvZ3KrvEtgww0aJDuwF_GDlSsMF842EjRBaup26Qx9XFZ6IjJpL/s1600/twitter-icon.gif' style='margin-right:3px;'/></a>
<a href='https://plus.google.com/108204301284356444972' rel='nofollow' target='_blank'><img alt='Follow Me on Google Plus' height='43' src='http://www.dcddesign.com/images/social-media/google-plus-icon.jpg' style='margin-right:3px;' width='43'/></a>
<a href='http://pinterest.com/mybloggertrickx/' rel='nofollow' target='_blank'><img alt='Follow Me on Pinterest' height='43' src='http://passets-cdn.pinterest.com/images/big-p-button.png' style='margin-right:3px;' width='43'/>
</a>
<!-- Feedburner Chicklet Start-->
<center>
<a href='http://feeds.feedburner.com/bl0ggertricks'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/bl0ggertricks?bg=088A4B&fg=444444&anim=1' style='border:0' width='80' float='right' margin-right='5px'/></a></center>
</div>
<!-- Social Profile Icons End-->
<!-- Feedburner Chicklet Start-->
<!-- Twitter Follow Button Start-->
<div style="background: #d2ebff; width: 280px; float: left; padding: 10px 15px 10px 5px; margin: 0px; border-bottom: 1px solid #f2f2f2;">
<a href="https://twitter.com/mybloggertriks" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MyBloggerTricks</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js?a4185c";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<!-- Twitter Follow Button End-->
<!-- Facebook Like Button Start-->
<div style='background: #d2ebff; width: 280px; float: left; padding: 10px; margin: 0 0 10px 0px; border-bottom: 1px solid #f2f2f2;'>
<div class='fb-like' data-href='https://www.facebook.com/mybloggerstricks' data-send='true' data-show-faces='false' data-width='280'/>
</div>
<!-- Facebook Like Button End-->
<!-- Google plus Badge Start-->
<div style='background: #d2ebff; float: left; margin: 10px 0 10px 0px;'>
<div class="g-person" data-width="280" data-height="70" data-href="//plus.google.com/108204301284356444972" data-layout="landscape" data-rel="author"></div>
</div>
<div style='background: #d2ebff; float: left; margin: 0 0 10px 0;'>
<div class="g-page" data-width="280" data-height="70" data-href="//plus.google.com/103598710564060829080" data-layout="landscape" data-rel="publisher"></div>
</div>
<!-- Google plus Badge end-->
<!-- Email Subscription Start-->
<center>
<div class="mbt-subscribe-box-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=Bl0ggertricks" class="mbt-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Bl0ggertricks', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="Bl0ggertricks" /><input name="loc" type="hidden" value="en_US" /><input class="mbt-subscribe-box-email-field" name="email" autocomplete="off" onblur="if (this.value == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address')
{this.value = '';}" value="Enter your email address"/><input class="mbt-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form></div>
</center></div>
<!-- Email Subscription End-->
Customization
Some customization are required for making this widget work perfectly for you. Follow the Steps:
- Replace the all highlighted text in yellow color (Bl0ggertricks) with your RSS User Name.
- Replace the all highlighted text in Red Color (mybloggerstricks) with your Facebook page User Name or user id.
- Replace the all highlighted text in Blue Color (mybloggertriks) with your twitter username.
- Replace the highlighted text in Brown Color (108204301284356444972) with your Google Plus Profile Id.
- Replace the all highlighted text in Orange Color (103598710564060829080) with your Google Plus Page Id.
All Done: After customizing the Gadget according to your desire needs, just Save the Gadget. Now go and check your site, we are sure it would not let you down.
Optional Steps.
If in case the facebook like button did not work then add this Javascript SDK code just below <body>
<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>
If in case the Google Plus Page badge and Google Profile badget did not work then add this Javascript code just below <body>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
You can surely ask for my help which would be no less than a pleasure. Please post any query you may have in the comment box below. Till then take good care of yourselves. Peace and blessings pals!..
add awesome social sharing widget To Blogger Blog
Add It to blogger
- Go To Blogger Dashboard > Template > Edit HTML. Before Editing Your Template Please Make a Backup.
- Backup your template.
- Search for ]]></b:skin> and just before it give a space and add this code.
div#bt-social-share {
background:#f3f3f3;
width:600px;
height: 80px;
border: 1px solid transparent;
border-radius: 5px;
-moz-border-radius: 5px;-webkit-border-radius: 5px;
}#bt-social-share ul {
list-style: none;
clear: none;
padding: 0px 0px ;
margin: 25px 10px 0 0;
float:right;
}
#bt-social-share ul li {
display: inline;
background:none;
vertical-align:middle;
margin:0;
padding:0;
}
#bt-social-share ul li a {
display: block;
float: left;
width: 32px;
height:32px;
background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHw-oXG5WgPr2pyotL8JTpXFKriJONkO2iFi4mDd2Xv7Jyd3uNM7RbH4uQuk1r__ulHh_73CxGsOdXSnd9sxFSzidadeNEfkgV06UnB_WeNIhosNQLL-ROwvDSAmSazbzlTFrq4XMzr998/s1600/Social_sprites.png);
margin-left:3px;
background-repeat: no-repeat;
margin-right: 2px;
-moz-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
}#bt-social-share ul li a.facebook {background-position: -0px -0px; }
#bt-social-share ul li a.facebook:hover {background-position: -0px -33px; }#bt-social-share ul li a.twitter {background-position: -32px -0px; }
#bt-social-share ul li a.twitter:hover {background-position: -32px -33px; }#bt-social-share ul li a.google {background-position: -64px -0px; }
#bt-social-share ul li a.google:hover{background-position: -64px -33px; }#bt-social-share ul li a.pinterest {background-position: -96px -0px; }
#bt-social-share ul li a.pinterest:hover {background-position: -96px -33px; }#bt-social-share ul li a.delicious {background-position: -128px -0px; }
#bt-social-share ul li a.delicious:hover {background-position: -128px -33px;}#bt-social-share ul li a.digg {background-position: -160px -0px; }
#bt-social-share ul li a.digg:hover {background-position: -160px -33px;}#bt-social-share ul li a.addtoany {background-position: -192px -0px; }
#bt-social-share ul li a.addtoany:hover {background-position: -192px -33px;}
4. Save Changes and jump to the next step of this tutorial.
Note:- To change the Widget box size, change this value width: 600px;
5. Now Search for <data:post.body/> And Put Below Code immediately after it!
<div id='bt-social-share'>
<span style="font-family: 'Source Sans Pro', sans-serif;float:left; margin-left: 10px; font-size:14px; line-height: 80px; text-shadow: 0px 0px 1px #333;">Share This Story, Choose Your Platform! </span>
<ul>
<li><a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li><li><a class='twitter' expr:href='"http://twitter.com/?status=" + data:post.title + " - " + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li>
<li><a class='google' expr:href='"http://www.google.com/bookmarks/mark?op=add&bkmk=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li>
<li><a class='pinterest' href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());'/>li>
<li><a class='delicious' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'/></li>
<li><a class='digg' expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li>
<li><a class='a2a_dd addtoany' expr:href='"http://www.addtoany.com/share_save?url=" + data:post.url + "&title=" + data:post.title ' title='Share this post on others'/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li>
</ul>
</div>
6. Hit save and you are done again!
Troubleshooting
While finding the <data:post.body/> code is coming three time. This Problem comes when we install Auto Read Hack in our Blogs. For this Problem Search for any one line from below and Put Above HTML Section of Widget Code after it!
<div class='post-footer-line post-footer-line-1'>
<div class='post-footer'>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
If you faced any problem then feel free to let me know. I will write more tutorials on this topic this week so that you may get all the latest updates. I hope this Widget proves useful to most of you and it may bless your blogs with even more traffic.
Add Simple Social Sharing Below Your Blogger Posts
Social media buttons is a great way to boosting your blog traffic. The shares of your blog content made through these social buttons circulate over different social networks will help your blog engaged with long term traffic. Twitter, Facebook and Pinterest all offer JavaScript that they'd LOVE for you to add to your site. Tracking is one of the reasons that they'd love you to add these. That may or may not be a strong reason not to add their JavaScript, but a concrete reason not to is speed. When you add three services' JavaScript you're adding three DNS lookups, three (or 20) HTTP requests for their JavaScript and images, and on and on. That JavaScript has to execute as well, of course, but the value it provides isn't justified over the speed and hassle involved in our opinion. We add just one third party (addtoany) script in this widget. I wanted to add social sharing links without adding JavaScript. Fortunately all these services support sharing via simply visiting a URL. Stated differently, you can share via an HTTP GET. This widget uses a total of 9 Icons but believe it or not it is super-fast and loads with in seconds.
Now lets add them below each post in blogger
- Go to Blogger Dashboard > Select the Blog > Go to Template page of the Blog
- Click Edit HTML button.
- and Add the Following CSS Code before
]]></b:skin>
div#social-sharing {
width:550px;
height: 90;
background: radial-gradient(center center, circle cover, #ffffff, #f9f9f9);
background: -o-radial-gradient(center center, circle cover, #ffffff, #f9f9f9);
background: -ms-radial-gradient(center center, circle cover, #ffffff, #f9f9f9);
background: -moz-radial-gradient(center center, circle cover, #ffffff, #f9f9f9);
background: -webkit-radial-gradient(center center, circle cover, #ffffff, #f9f9f9);
padding:10px;
margin:0 auto;
border: 1px solid #999;
border-radius:5px;
-webkit-border-radius:5px 5px 5px 5px;
-moz-border-radius:5px 5px 5px 5px;
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
}
div#social-sharing:hover {
-webkit-box-shadow: 1px 1px 3px #CCC inset;
-moz-box-shadow: 1px 1px 3px #CCC inset;
box-shadow: 1px 1px 3px #CCC inset;
}
#social-sharing img {
width: 35px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
opacity:1;
filter:alpha(opacity=1); /* For IE8 and earlier */
}
#social-sharing img:hover {
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-o-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
transition: all 0.6s ease-out;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
.social-sharing-title {
text-align: center;
padding: 3px 10px 2px 0px;
margin: 0 0px 0 0;
color: #8d0303; text-transform: uppercase;
line-height: 25px;
vertical-align: middle;
font-size: 14px;
}
You can replace the Statement Text Color Highlighted in Red. You can also change the Background width by changing the width: 550px; highlighted above in yellow color.
4. Next, locate the Second instance of
<data:post.body/> tag and paste the following code Below/after it:
<b:if cond='data:blog.pageType == "item"'><
center>
<div id='social-sharing'>
<div class='social-sharing-title'>Do You Like This ? Please Take Five Second To Share It!</div>
<!-- Facebook -->
<a class='face-book' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='nofollow' target='_blank' title='Share This On Facebook'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFTwGKB7KwSbvTHRQfnih4tb2jef-u3mi4B1HYQOO-0a7Kz4mJdi-Yj5sMdmOYKXFtFuTmAs-ItFfhPflS2Fs6uBzm6yQElkNoB6X-MrCs_Kuki_Qub8lsttLTafIrerqqx8ftWwqlaFNk/s1600/Facebook.gif'/></a>
<!-- Twitter -->
<a class='twitter' expr:href='"http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Tweet This'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkNJFo0w25P5k5k3lOmuEbOngz3V5SQ1VdXOtzC9eSN3IVKl7UpvIQJSBssvMH6xr5JXNo_EDXd8Gddp3217Fz1eKivBlPythF3TBrcxP30biYEg_jZzrVDUz9AXPW9dBM99rnz8l4o6qZ/s1600/twitter_bird.gif'/></a>
<!-- Pinterest -->
<a class='pint-er-est' href='javascript:void((function()%7Bvar%20e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)%7D)());'><img alt='Pinterest' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNtGxpepGoz7arysBbwa63_SOW00UqbrkZUH_mmXGG5Lu64wU8G3_oVXBcMFodQfsx-FVdTn_fWWT9mvgALXlPT0JzXRq9UC7W2uaKxAGkeIjXX4eEZYCoUmiQ9a8dVNKzLQ4eGNXtb3YQ/s1600/Pinterest.gif'/></a>
<!-- Stumbleupon -->
<a class='stumbleupon' expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Stumble this'><img alt='StumbleUpon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjCm2tWUl8g0RQm5lEk62dlNJBol7tyCUFeea9CxkhnMFDpksGSjxTsUkNjCucxLcAsHTc2m6d5r66MIHH2XW8jj8kAt9WMDDvMFThjtCzlgMrtSZOsrTQTbcxgxbYWfyBARS4k-CFAlKY/s1600/stumbleupn.gif'/></a>
<!-- Delicious -->
<a class='del-icio-us' expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Share This On Delicious'><img alt='Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn7__3m3sqXM26WMjNtQc9oBq0uHgONw1t2U_y6Rx50biGLpcmaFsCj2bjSLUCKpbVLWYENFmZnYYtyH4kgcwLwUURSvVQcn8UjRkOIqMnHhq8UXEnrM1rSHD1Qa6Vroh_DwZ1TTtKqjol/s1600/Delicious.gif'/></a>
<!-- Reddit -->
<a class='reddit' expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank' title='Bookmark this'><img alt='Reddit' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHpOnz0NMOsR7qpNUAT-nxNdvI4B654004YJag-Tv0Shli1iUVu3GLEw-aWrTGvf2XThHCvFpDl4AGDn6UeQAtbCTnrs9pqn9FzLDXrT8Snv7Q2uJzroKD6YGPerpqcd6XJpZmbRcCqA1p/s1600/reddit.gif'/></a>
<!-- Digg -->
<a class='digg' expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url' rel='nofollow' target='_blank' title='Digg This'><img alt='Digg' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzr8VVm-94JoegR8Bdo1Td7d1uRvOUGFonbb94Qq6U1Jml4YTuNAAKUxrwht9ZHIC5ENs_tVpc8fv5MtHSvwSowU_WKTxbFFb0Q_XC0IeHAVFAyvNIQ2gFrZiSO5dCvxmgtClySp2tDxRr/s1600/digg.gif'/></a>
<!-- Email -->
<a href='mailto:?Subject=My Blogger Tricks&Body=Check out this site.. http://www.mybloggertricks.org/' rel='nofollow' target='_blank' title='Email This'><img alt='Email' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-sa1sNGikKBbru88obRHyII7cU3CjbKUDqvxO_MKiU8L5oBPprcW15pk00A_nd2q30xS0iP-_2n2e8tuzPytUEqDyErr90FYlM6R8thutV7NcpQb4HFFGTH-weTct9U5951233AoLbNse/s1600/email.gif'/></a>
<!-- addtoany -->
<a class='a2a_dd more' expr:href='"http://www.addtoany.com/share_save?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank' title='Share On Others Networks'><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/><img alt='Delicious' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicwfqP30JLfePiG_IN6l48UMWQhpX7cybsoIDIEzOJb29bLDzSXN8CG9LFU4ibfQ0l4x9wUjuMIeVcBaAkBIka6x43ibsOGwlBbbO4ee_mKBPk5HopPq8kFXDLxkVBX8fHdmisMis-XpUB/s1600/share-to-any.gif'/></a>
</div>
</center>
5. See Preview before saving.
Note:- The buttons will only appear on post pages. We place this limit because the
Pin-it button only pins the page on which it appears. As such on homepage (if we were to allow it there), every instance of the button will pin the homepage, not the post (as it’s “supposed” to).
Troubleshooting
While finding the
<data:post.body/> code is coming three time.This Problem comes when we install Auto Read More Hack in our Blogs. For this Problem Search for any one line from below and Put Above Section of Widget HTML Code after it!This
<div class='post-footer-line post-footer-line-1'>
Or this
<div class='post-footer'>
Or this
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
Let me know about other social sites that support this kind of sharing in the comments, and I'll add your tips to this post. I hope you will enjoy this tutorial and take a 5 seconds to share it.Cheers
Subscribe to:
Posts (Atom)