Blogspothy - The blogspot professionals

Stylish 1-Click Social Follow Buttons For Bloggers

2017-07-28T10:10:00.000-07:00

As it does not need too much talk, we all knew the importance of social media integration on our blog. Social media is one the imperative factors that must be considered when identifying a quality branded blog.

While we all understood the vital role social media plays, thus, it is time we consider getting one for our blog.

In today’s tutorial, I will be presenting to you the best social follow button which will rapidly grow your social media community in the meantime.

Amazing features from this social follow button

1-Click Social Integration – what makes this social follow button stand out is the enhancement of its 1-click action. Readers can simply follow you without redirecting to your fan pages.

Responsiveness and Compatibility – It is very compatible with all old and modern internet browsers, also, it very responsive on every browsers.

Fits Every Position On Blog – It fits every position on blog, either you prefer to embed it to sidebar or footer, the choice is all yours.

Flexibility and Customization – This social button is flexible and easier to customize, you can style it the way you want, you can also manage the size just the way you want it.

Here is the procedure.

Step 1

Go to Layout on your blogger dashboard and click Add Widget then go ahead and click edit Html/Javascript.

Step 2.

Copy and paste any of below codes just right into Html/Javascript blank space and hit save.

 <style type="text/css"> #buttons { overflow: hidden; } .button1 { background: none repeat scroll 0 0 #EEEEEE; -moz-box-shadow: 0 1px 0 #FDFDFD inset; -webkit-box-shadow: 0 1px 0 #FDFDFD inset; box-shadow: 0 1px 0 #FDFDFD inset; float: left; margin: 0; padding: 15px 0 0; width: 135px; } .button1.facebook,.button1:hover.facebook .slide { margin-right: 1px; background: #3873ad; width:134px; height:95px; } .button1.google,.button1:hover.google .slide { margin-right: 1px; background: #f73c28; width:134px; height:95px; } .button1.twitter,.button1:hover.twitter .slide { background: #62c6f8; width:134px; height:95px; } .button1.rss,.button1:hover.rss .slide { background: #f18421; width:134px; height:95px; } .button1 i { color: #FFFFFF; display: block; font-family: FontAwesome; font-size: 20px; font-style: normal; height: 40px; line-height: 40px; margin: 0 auto 2px; text-align: center; width: 40px; border: 2px solid #fff; -o-border-radius: 10%; -ms-border-radius: 10%; -moz-border-radius: 10%; -webkit-border-radius: 10%; border-radius: 10%; } .social-container { color: #FFFFFF; font-size: 15px; font-weight: 600; height: 55px; line-height: 45px; overflow: hidden; position: relative; text-align: center; width: 100%; } .slide, .button1 i { -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .slide { height: 45px; position: absolute; top: -35px; width: 100%; } .icon-facebook:before { content:"\f09a"; } .icon-twitter:before { content:"\f099"; } .icon-google-plus:before { content:"\f0d5"; } .icon-rss:before { content:"\f09e"; } .slide:after { border-left: 2px solid #EEEEEE; bottom: 0; content: ""; display: block; height: 10px; position: absolute; width: 100%; } .button1:hover .slide { top: 0; } .facebook_c { position: relative; top: 10px; } .twitter_c { position: relative; top: 10px; } .rss .IN-widget, .button1 iframe { position: relative; top: -5px; } .google_c { position: relative; top: 5px; } .rss_c { position: relative; top: 6px; } .twitter iframe { width: 134px !important; } .google #___plusone_0 { width: 60px !important; } .button1.rss { margin-right: 0; } </style> <aside class='sidebar-wrapper'> <div class='sidebar section' id='sidebar'><div class='widget HTML' data-version='1' id='HTML2'> <div class='widget-content'>
<div id="buttons">
<div class="facebook button1">
<i class="icon-facebook"></i>
<div class="social-container fb">
<div class="slide">
<div class="facebook_c">
<iframe src="//www.facebook.com/plugins/like.php?href=https://www.facebook.com/Blogspothy-1943614969257628/&width&layout=button_count&action=like&show_faces=false&share=false&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:81px; height:21px;" allowtransparency="true"></iframe></div>
</div>
Facebook
</div>
</div>
<div class="twitter button1">
<i class="icon-twitter"></i>
<div class="social-container tw">
<div class="slide">
<div class="twitter_c">
<a href="https://twitter.com/blogspothy" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-via="mariuCSS"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div></div>
Twitter
</div>
</div> <div class="google button1"> <i class="icon-google-plus"></i> <div class="social-container tw"> <div class="slide"> <div class='google_c'>  <script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>  <div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/u/0/105950387027097996025" data-rel="publisher"></div></div> </div> Google+ </div> </div> <div class="rss button1"> <i class="icon-rss"></i> <div class="social-container tw"> <div class="slide"> <div class="rss_c"><p><a href="http://feeds.feedburner.com/blogspothy"><img src="http://feeds.feedburner.com/~fc/blogspothy?bg=f25816&fg=FFFFFF&anim=1" height="26" width="88" style="border:0" alt="" /></a></p> </div> </div> </div> </div> </div> </div>Rss</div></div></aside> <div style="font-size: 10px; float: right; margin-top: -15px">Get this <a href="https://blogspothy.blogspot.com.ng/2017/07/stylish-social-follow-button-for-blogger.html">Social Follow Widget</a></div>

<style type="text/css">#buttons {overflow: hidden;margin-left:40px;}.button1 {background: none repeat scroll 0 0 #EEEEEE;-moz-box-shadow: 0 1px 0 #FDFDFD inset;-webkit-box-shadow: 0 1px 0 #FDFDFD inset;box-shadow: 0 1px 0 #FDFDFD inset;float: center;border-radius:7px;padding: 15px 0 0;width: 135px; }.button1.facebook,.button1:hover.facebook .slide {margin-right: 1px;background: #3873ad;width:229px;height:55px;border: 1px solid #2471a3;}.button1.google,.button1:hover.google .slide {margin-right: 1px;background: #f73c28;width:229px;height:55px;border: 1px solid #e8503c;}.button1.twitter,.button1:hover.twitter .slide {background: #62c6f8;width:229px;height:55px;border: 1px solid #5dade2;}.button1.rss,.button1:hover.rss .slide {background: #f18421;width:229px;height:75px;border: 1px solid #dc7633;}.button1 i {color: #FFFFFF;display: block;font-family: FontAwesome;font-size: 20px;font-style: normal;height: 40px;line-height: 40px;margin: 0 auto 2px;text-align: center;width: 45px;border: 2px solid #fff;-o-border-radius: 10%;-ms-border-radius: 10%;-moz-border-radius: 10%;-webkit-border-radius: 10%;border-radius: 10%;}.social-container {color: #FFFFFF;font-size: 15px;font-weight: 600;height: 55px;line-height: 45px;overflow: hidden;position: relative;text-align: center;width: 100%;}.slide, .button1 i {-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}.slide {height: 45px;position: absolute;top: -35px;width: 100%;}.icon-facebook:before {content:"\f09a";}.icon-twitter:before {content:"\f099";}.icon-google-plus:before {content:"\f0d5";}.icon-rss:before {content:"\f09e"; }.slide:after {border-left: 2px solid #EEEEEE;bottom: 0;content: "";display: block;height: 10px;position: absolute;width: 100%;}.button1:hover .slide {top: 0;}.facebook_c {position: relative;top: 10px;}.twitter_c {position: relative;top: 10px;}.rss .IN-widget, .button1 iframe {position: relative;top: -5px;}.google_c {position: relative;top: 5px;} .rss_c {position: relative;top: 6px;}.twitter iframe {width: 134px !important;}.google #___plusone_0 {width: 60px !important;}.button1.rss {margin-right: 0;} </style><aside class='sidebar-wrapper'><div class='sidebar section' id='sidebar'><div class='widget HTML' data-version='1' id='HTML2'><div class='widget-content'>
<div id="buttons">
<div class="facebook button1">
<i class="icon-facebook"></i>
<div class="social-container fb">
<div class="slide">
<div class="facebook_c">
<iframe src="//www.facebook.com/plugins/like.php?href=https://www.facebook.com/Blogspothy-1943614969257628/&width&layout=button_count&action=like&show_faces=false&share=false&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:81px; height:21px;" allowtransparency="true"></iframe></div>
</div>
</div>
</div>
<div class="twitter button1">
<i class="icon-twitter"></i>
<div class="social-container tw">
<div class="slide">
<div class="twitter_c">
<a href="https://twitter.com/blogspothy" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-via="mariuCSS"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div></div>
</div>
</div><div class="google button1"> <i class="icon-google-plus"></i> <div class="social-container tw"> <div class="slide"><div class='google_c'> <script type="text/javascript" src="https://apis.google.com/js/platform.js"></script><div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/u/0/105950387027097996025" data-rel="publisher"></div></div> </div> </div></div><div class="rss button1"> <i class="icon-rss"></i> <div class="social-container tw"> <div class="slide"> <div class="rss_c"><p><a href="http://feeds.feedburner.com/blogspothy"><img src="http://feeds.feedburner.com/~fc/blogspothy?bg=f25816&fg=FFFFFF&anim=1" height="26" width="88" style="border:0" alt="" /></a></p> </div> </div> </div></div></div></div></div></div></aside><div style="font-size: 10px; float: right; margin-top: -15px">Get this <a href="https://blogspothy.blogspot.com.ng/2017/07/stylish-social-follow-button-for-blogger.html" target="_blank">Social Follow Button</a></div>

<style type="text/css">#buttons {overflow: hidden;}.button1 {background: none repeat scroll 0 0 #EEEEEE;-moz-box-shadow: 0 1px 0 #FDFDFD inset;-webkit-box-shadow: 0 1px 0 #FDFDFD inset;box-shadow: 0 1px 0 #FDFDFD inset;float: left;border-radius:7px;padding: 15px 0 0;width: 135px;margin:1px;}.button1.facebook,.button1:hover.facebook .slide {margin-right: 1px;background: #3873ad;width:86px;height:74px;border: 1px solid #2471a3;}.button1.google,.button1:hover.google .slide {margin-right: 1px;background: #f73c28;width:86px;height:74px;border: 1px solid #e8503c;}.button1.twitter,.button1:hover.twitter .slide {background: #62c6f8;width:86px;height:74px;border: 1px solid #5dade2;}.button1 i {color: #FFFFFF;display: block;font-family: FontAwesome;font-size: 20px;font-style: normal;height: 40px;line-height: 40px;margin: 0 auto 2px;text-align: center;width: 45px;border: 2px solid #fff;-o-border-radius: 10%;-ms-border-radius: 10%;-moz-border-radius: 10%; -webkit-border-radius: 10%;border-radius: 10%;}.social-container {color: #FFFFFF;font-size: 15px;font-weight: 600;height: 55px;line-height: 45px;overflow: hidden;position: relative;text-align: center;width: 100%;}.slide, .button1 i {-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;transition: all 0.2s ease-in-out;}.slide {height: 45px;position: absolute;top: -35px;width: 100%;}.icon-facebook:before {content:"\f09a";}.icon-twitter:before {content:"\f099";}.icon-google-plus:before {content:"\f0d5";} .slide:after {border-left: 2px solid #EEEEEE;bottom: 0;content: "";display: block;height: 10px;position: absolute;width: 100%;}.button1:hover .slide {top: 0;}.facebook_c {position: relative;top: 10px;}.twitter_c {position: relative;top: 10px;}.rss .IN-widget, .button1 iframe {position: relative;top: -5px;}.google_c {position: relative;top: 5px;}.twitter iframe {width: 134px !important;}.google #___plusone_0 {width: 60px !important;}</style><aside class='sidebar-wrapper'><div class='sidebar section' id='sidebar'><div class='widget HTML' data-version='1' id='HTML2'><div class='widget-content'>
<div id="buttons">
<div class="facebook button1">
<i class="icon-facebook"></i>
<div class="social-container fb">
<div class="slide">
<div class="facebook_c">
<iframe src="//www.facebook.com/plugins/like.php?href=https://www.facebook.com/Blogspothy-1943614969257628/&width&layout=button_count&action=like&show_faces=false&share=false&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:81px; height:21px;" allowtransparency="true"></iframe></div>
</div>
</div>
</div>
<div class="twitter button1">
<i class="icon-twitter"></i>
<div class="social-container tw">
<div class="slide">
<div class="twitter_c">
<a href="https://twitter.com/blogspothy" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-via="mariuCSS"></a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div></div>
</div>
</div><div class="google button1"> <i class="icon-google-plus"></i> <div class="social-container tw"> <div class="slide"><div class='google_c'><script type="text/javascript" src="https://apis.google.com/js/platform.js"></script><div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/u/0/105950387027097996025" data-rel="publisher"></div></div></div>---</div></div></div></div></div></div></aside><div style="font-size: 10px; float: right; margin-top: -15px">Get this <a href="https://blogspothy.blogspot.com.ng/2017/07/stylish-social-follow-button-for-blogger.html"target="_blank">Social Follow Widget</a></div>

Customizations

Change all codes in red colors to your own social media ID

Change all codes in color yellow to manage size of the button. [Optional]

Final Words

Now, by following all the above steps appropriately, you are going to get the best out of the social follow button.

If you are facing any problem regarding this button, do not hesitate to pinch me up in the comment.

Also, please share this tutorial if you find it helpful.

Fix Not A Squared Image Issue When Adding Blogger Favicon

2017-07-20T01:25:00.001-07:00

Favicon is a small image that shows beside all website's title on every browser. See below image for an illustration.

Favicon is one the good traits of a blog that shouldn’t be ignored, as it does not only help a blog to look more professional but also it helps to rapidly popularize a blog.

For example, here at Blogspothy, we used bold letter 'B' as our blog favicon, so whenever somebody is browsing many websites on only one browsers, there is no doubt that, he will surely need to open new tabs, and when he does, he can quickly back to blogspothy when needed once he looks into the blog’s favicons.

And besides, blog favicon makes your blog stand out and gives much uniqueness. Now, many blogspot beginners are facing tough time when trying to add favicon to their blog because of a squared image problem.

If you are one of these people, then you are welcome to get that problem solved. The truth is, I used this blog without favicon for good solid 2 months, because I didn’t know how to add it.

All my efforts to get a squared image were not appreciated by blogger, I tried many photo editors, I tried many photo size converters, yet I still can’t fix it. Not until I came to meet this favicon generator website, which helped me solve this problem in less than 1 minute. And this is why I’m writing this post to help all Blogspothy readers and all massive blogspot newbie.

According to blogger (Blogspot), all favicon should be a squared image with maximum file size of 100kb. This simply means, you really need something of 10kb-90kb sizes of image. While now, we are going to generate favicon image which is even going to less than or equal to 10kb in size.

Let see how to get that.

Please Note: This trick is 100% working charm, as a matter of fact, you will have to commend me for this (Lol). Follow below steps to get your blogger favicon in place. It takes just 1 minute and no need to be a savvy coding geek.

Step 1: Get ready any photo you would like to use. Only (Png and Jpg.)

The very first step you need to take is to ensure you have gotten the image you will like to use. It does not matter if it is small or big, you can design photo by using photoshop, Corel Draw, or Microsoft Power Point.

Based on choices, I always voted to use Microsoft power Point mostly for all my photo designs.

Step 2: Visit that helpful site to generate different sizes of favicon you need.

The next step is to visit the website that will help you generate various favicon sizes. Go ahead and visit favicon-generator.org here.

Step 3: Upload your photo

This step includes uploads of your desired photo. Click browse button and navigate the photo you want to use, and then go ahead and click create favicon. See below screenshot as an illustration.

Step 4: Download the generated favicon to your computer.

Now, you will be able to download all sizes of favicon into your local computer. Go ahead and clicks download the generated favicon. See screenshot here.

Step 5: Extract the downloaded zip file

Now, you are done with the favicon generator website, you will now go to your computer where your downloaded files stores and navigate the recent downloaded favicon zipped file, when you see the file, go ahead and right click on it and hit extract all button.

Another Method For Locating The Downloaded File.

If the first method is too technical, then stay on your browser which you have used to download the file, navigate the download button (I think every browsers has a download button). When you click the download button, the file you just downloaded will be placed on the top, then, just go ahead and double-click the file icon besides the downloaded file’s name.

After that, you will find your mouse exactly on that file, you may rename the file for future use, then right click and hit extract all button. Then, you will be able to see all the favicon and their sizes below them.

Step 6: Add Favicon To Your Blog

Now, go ahead and login into your blogger dashboard, go to layout, and click edit favicon, click upload file and double click on the favicon photo you want to use. Now you will be asked to choose any one you want, I suggest you choose 9696, 7676, or 48*48.

Anyway, you may choose any size. And click upload. And this time, you will never get the damn No square image feedback.

Final words Now.

Let us know if this tutorial has help you fix favicon issue in the comment box below, and do not hesitate to ask anything regarding this topic. Now make sure you share this tutorial to people who might also need it.

How To Add Feedburner Feed Count Image (Chicklet) To Blog

2017-07-20T01:24:00.000-07:00

Feed burner is an ancient, free, and yet, one of the best e-mail list managing tools. They have served a lot of internet companies (included bloggers) to build their audience over the years and came out with good and recommendable reputations.

In this tutorial, I will show you how to add feedburner feed count with image.

This count image or call it chicklet is very useful in many occasions, such as, you may decide to place it nakedly on your blog sidebar or anywhere on your blog. You can even decide to use it ordinarily, without adding any Css style.

Now, let learn how to get the chicklet.

Steps 1 – Go to feedburner and login to your feed.

Step 2 – Click on “publicize” tab.

Step 3 – Click on the "feed count" tab at the bottom left corner.

Step 4 – Then, we are now in the pilot seat. Let’s customize your feed count. [optional]

Step 5 – Scroll down and click “activate” to enable the feed count service.

Step 6 – Make use of the color to style matching it with your blog color then hit save.

Final Step – Copy the given code to any where you want the chicklet to be, and that’s it, you have successfully added feed burner image with count.

Final words.

Do not hesitate to write me in the comment if there is anything you didn’t get and I will always try my best to fix it. Do share this post on social media below.