Instagram widgets for blogger - Follow button and slideshow

Want to add instagram photogallery or slideshow in blogger? Here learn how to add instagram follow button and slideshow in blogger.

Instagram is very popular photo sharing app around the world just same like twitter and facebook but Instagram is only for mobile users and your updates should based on photos which you want to showcase them. This gives us the great opportunity to showcase our photos from our mobile and also socialise them with our friends.

Well guys, With my point of view, you are not 24/7 blogger and not even you everyone are not. Because It is very hard to do blogging continually, we have to take breaks to refresh our minds. Now we are living in visual society and every day tons of images and videos are shared over social networks and one of them is Instagram.

Also read: New Best Free Blogger Templates with Awesome design

You may also know the great quote " One image is better than the hundred words".While, many times we may need to showcase our business or to share your photos with your readers and to make this work easier Instagram can help us a lot.

Here I am going to tell you how to add instagram follow button and instagram photo gallery or slideshow in your blog to able to showcase your work through images. So, get started....:)

Also read: Subcribe Box with Pure CSS Social Buttons

How to add Instagram Follow Button in blogger

To let your readers check your showcases on your instagram then you should provide them an option for them so they can easily follow you on Instagram and for the best way is adding the Instagram follow button in your site. But the problem is that Instagram has no option to create a follow button.


Don't worry because I am here. read below to add follow button.

1. Go to your blogger dashboard
2. Template tab and backup your template.
3. Now place the below code where you want the follow button to be appeared:

 <iframe src="http://widget.websta.me/follow/USER__NAME__HERE" style="height:27px;" frameborder="0" scrolling="no"></iframe>

• Change the USER_NAME_HERE with your instagram username
• Now click on save button.

How to add Instagram slideshow or photogallery in blogger

• Open the new tab and - go to intagme.com
• At there you should see a form type something like this:

• Don't be lazy! this will not take much your time, just a customization page for your instagram photo gallery.
• At first add your Instagram username.
• Then enter the hashtag of which you want to show photos
• Then choose the widget type. (slideshow, or grid)
• Now decide the size of the thumbnails and then decide if you want photo border or not.
• change background color if you want but default is white one.
• And you also have option weather you want to add sharing buttons on hover or not.
• After finishing click on get code and copy the code and paste in on your site where you want but I recommend you to add it on side bar.

The widget will update automatically as you update your instagram account.

Auto Social Fans Counter Widget for Blogger

Recently I am designing a blogger template for my customer, my customer said to me that he wants a auto social counter widget in his template. So, I think that like other widgets this auto social fans counter widget is also available somewhere on any site.

So, I head over to google and search for this widget but you know I found only one widget which counts automatically the social fans. That widget is designed by Syed Faizan Ali from MyBloggerLab. But there is big problem in it. It only counts the fans of facebook and twitter. But in my case I need counter of some more social networks such as instagram, youtube etc.

At last, I come to know that there is o auto social counter widget yet available for blogger. Then I think that lets build one. Then, I start making this widget. First I think that I should get help from APIs to build the widget, but unfortunately I am very bad in using the APIs.

Then an awesome idea came into my mind. As you know almost every social network offers a follow button. And except some follow buttons, the all others also have a little bubble attached with them which shows the total fans or followers. At that time I asked to myself that why not I use these follow buttons to build the auto social fans counter widget for blogspot blogs.

And then I dig out this widget after spending some hours in front of code editor. The widget have simple design. But don't worry in near future the second version of this widget will come soon. But for now you can use this widget too.

Want to install the widget? If yes then follow the below steps:

Step 1 :

In this widget I have used font awesome icons. So, in order to install this widget and make this widget work you have to first install the font awesome icons to your blogger template. For this follow the below steps:
Go to Blogger Dashboard >> Template >> EditHTML
Now search for <head> tag and just after this paste the following code:

 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

Step 3 :

Now it's time to add the css code of the widget so that your social counter widget get its style, for this follow the below steps.

• Again Goto Blogger Dashboard and click on Template tab
• Now click on EditHTML button and then search for ]]></b:skin> tag. Now, just before it paste the following code and then click on save template.

 .fb-likebox {
    padding: 10px;
  font-size: 20px;
  }
.twitter-follow {padding:10px;
  font-size: 20px; }
.gplus-follow {margin-left: 0px;
padding: 10px;

  font-size: 20px;
}
.youtube-follow {margin-left: 0px;
padding: 10px;

  font-size: 20px;
}

Step 4 :

Ok, guys now its time to add the final code. This will be placed at that place where you want your widget to be displayed. Mainly I have designed this widget for sidebar. So, below I show you how to add this auto social counter widget in sidebar. Follow the below steps:

• Goto Blogger dashboard.
• Now click on the layout tab and from sidebar click on add new widget.
• Now from the list select this widget:

HTML/JavaScript Add third-party functionality or other code to your blog.

• Copy the below code and paste the code in the new HTML/Javescript widget. And then click on the save button:

 <div class="socialcounter">

<div class="fb-likebox">
<span><span style="  position: relative;

  font-weight: bold;"><i class="fa fa-facebook"></i></span>
<div class="fb-like" data-href="https://www.facebook.com/itmagzine1" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div></span>
</div>
<div class="twitter-follow">
<span><span><span style="  position: relative;

  font-weight: bold;"><i class="fa fa-twitter"></i></span>
<a href="https://twitter.com/MaherAfrasiab1" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false">Follow @MaherAfrasiab1</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>
</span></span></div>
</div>
</div> <div class="gplus-follow">
<span><span style="  position: relative;

  font-weight: bold;"> <i class="fa fa-google-plus"></i></span>
<script src="https://apis.google.com/js/platform.js" async defer></script>

<-- Place this tag where you want the button to render. -->
<div class="g-follow" data-href="https://plus.google.com/gplus username or id" data-rel="{relationshipType}"></div> <div class="youtube-follow">
<span><span><span style="  position: relative;

  font-weight: bold;"><i class="fa fa-youtube"></i></span>
</span><script src="https://apis.google.com/js/platform.js"></script>

<div class="g-ytsubscribe" data-channel="your youtube url" data-layout="default" data-count="default"></div></span></div> 

That's it, you have successfully installed the new auto social counter with follow buttons social widget to your blogger blog. Enjoy!

Awesome free Weather Widget for blogger 2015

How its great if you let your readers and visitors to see the weather conditions and temperature from your blog. I think that by adding weather widget there should be increase in readership because along with your awesome posts and articles then can also enjoys the weather conditions.

For many days I have been looking for weather widgets for blogger and wordpress both. During searching I hit the Yowindow weather widget which is for blogger, wordpress or for any website or blog

The another thing which I like is that it changes its background landscape conditions according to weather conditions. For example if the weather is rainy then the background landscape also becomes rainy one.

Add Weather widget

1. Go to Yowindow weather widget
2. At there customize your weather widget according to your tastes.
3. The customization is very easy simply select options.
4. At first select your location. (Recommended by me is choose all locations.)
5. Then choose the Name of widget and then choose its theme. There are four themes are provided you can select anyone from them.
6. At third choose widget language.
7. At fourth choose the size of your widget. I recommend you to add it on sidebar and also resize it in a way that it fits into your sidebar.
8. Choose the time format and then choose the units on which the weather data will be shown. The default is US but you can customize it.
9. At last, choose the view that what things will be viewed on mini view of widget.
10. And after it at point eight if you using blogger then choose website or blog and copy the generated code from below and paste it your template.
11. If you are wordpress user then select the second option of wordpress and copy the generated code and paste it on your wordpress template.

Add in blogger:

1. Go to Blogger dashboard >> Template
2. Backup your template.
3. Now, go to layout tab  and click on add widget.
4. From list choose HTML/Javascript
5. Then paste the generated code in it and click on save
6. Congrats you have done it.

Add in Wordpress:

1. First of all - open your WordPress blog dashboard.
2. Go to Appearance/Widgets
3.  Look at the top-right of the page. Make sure "Primary Widget Area" box is open.
4. Drag "Text" widget to Primary Widget Area
5. Now paste the generated widget code in it and click on save button.

11 Excellent CSS image hover effects for blogs

"Looking for CSS image hover effects? .Here are the 11 Excellent CSS image hover effects for your blogs and sites."

Now a days we should have to add images in our site content as images can bring life in the content also help to attract visitors. To make our site more interactive and attractive we should have to addCSS image hover effects on images which can bring interativity to our site and also improve image quality and make content more interesting and attractive.

There are many CSS image hover effects are now developed by designers. Therefore, here in this post we have added 12 excellent CSS image hover effects for sites and blogs.

These can be used on blogger blog and on wordpress blogs but we have set the code according to blogger's template settings so we can easily add these CSS image hover effects in blogger by just pasting one of the below code in our template.

How to add CSS image hover effect in blogger

For the newbies who don't know how to add CSS image hover effect in blogge here is small guide for them so they can also become able to add css image hover effects to their blogger blogs. To add CSS image hover effect in blogger follow below steps:

• Goto blogger dashboard
• goto Template >> edit html
• Search for ]]></b:skin> tag ( quick tip: to search easily press ctrl+f )
• Just above ]]></b:skin> paste one of the below CSS image hover effect code.
• and you done!

11 Excellent CSS image hover effects

Grow CSS image hover effect

As seen in the above image with this CSS image hover effect the image will grow in size with the hover of mouse pointer. Below is the CSS chunk for this CSS image hover effect.

 .post-body img {
height: 300px;
width: 300px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post-body img:hover {
width: 400px;
height: 400px;
} 

Shrink CSS image hover effect

 /*SHRINK*/
.post-body img {
  height: 400px;
  width: 400px;

  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.post-body img:hover {
  width: 300px;
  height: 300px;
}

 Sidepan CSS image hover effect

 /*SIDEPAN*/
.post-body img {
  margin-left: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}
.post-body img:hover {
  margin-left: -200px;
}

 Vertical pan CSS image hover effect

 /*VERTPAN*/
.post-body img {
  margin-top: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}
.post-body img:hover {
  margin-top: -200px;
}

Tilt CSS image hover effect

  /*TILT*/
.post-body img {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.post-body img:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}

Morph CSS image hover effect

 /*MORPH*/
.post-body img {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.post-body img:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

Focus CSS image hover effect

 /*FOCUS*/
.post-body img {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.post-body img:hover {
  border: 70px solid #000;
  border-radius: 50%;
}

Blur CSS image hover effect

 /*BLUR*/
.post-body img {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.post-body img:hover {
  -webkit-filter: blur(5px);
}

Brighten CSS image hover effect

 /*DARKEN*/
.post-body img {
  -webkit-filter: brightness(-65%);
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.post-body img:hover {
  -webkit-filter: brightness(0%);
}

Bump up CSS image hover effect

 .post-body img {    border: 5px solid #ccc;    float: left;    margin: 15px;    -webkit-transition: margin 0.5s ease-out;    -moz-transition: margin 0.5s ease-out;    -o-transition: margin 0.5s ease-out;}.post-body img:hover {    margin-top: 2px;}

Grayscale effect CSS image hover effect

 .post-body img {    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */    filter: gray; /* IE6-9 */    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */;}.post-body img:hover {    filter: none;    -webkit-filter: grayscale(0%);}