All Stories
Showing posts with label Widgets. Show all posts
Showing posts with label Widgets. Show all posts

How to add Social Media Icons to blogger-Blogger Widgets.

Osama Zia | 6/27/2013 10:52:00 pm | | | 2 Comments so far
Social Interaction plays an important role on your blog. You can get traffic, subscribers, followers and indeed new friends from all over the world. Blogger platform is an easy interface for beginners. It provides a flexible environment for the beginners to make them move to the advance level.

Sidebar widgets provide readers a shortcut to different directions. To link your social media URL’s  in sidebars make it easy for readers to get interaction with the author. We have found a CSS based very light simple and clean social media icons to direct your readers to your social media profiles. It is not designed by OZY NETWORK and we are not taking it's ownership.

DEMO


Let’s see how it works. 

How to add CSS section

  • Open to your blogger dashboard
  • Click on Template >> Edit Html
  • Now Press CTRL+F and find  ]]></b:skin>
  • Paste the below code above/before it.
.subscribe{width:289px !important;background: #fbfbfb;height:59px; border: 1px solid #A3A3A3; font-size: 90%; margin-left:-11px !important; margin-bottom:15px !important;
margin-top:0px !important;margin-right:0px !important;padding: 7px 0px 4px 10px !important;}
.subscribe a{padding:40px 11px 0px 0px; display: block;}
.subscribe a:hover {opacity:0.8;}
#subscribe-icon li{font-size: 11px; margin: 0 2px 5px 2px; width: 52px; text-align: center;height: 42px;display:inline;float:left;}
.sub-youtube a{background: url(http://3.bp.blogspot.com/-RSnY0aqLC9M/UXp2bGmRAoI/AAAAAAAAA2E/UCRb8Vh7iZA/s1600/icon-youtube.png) no-repeat 0 0;}
.sub-twitter a{background: url(http://1.bp.blogspot.com/-S4XgwbX9MGQ/UXp2cwpbGaI/AAAAAAAAA2M/C2l_npg4lzw/s1600/icon-twitter.png) no-repeat 0 0;}
.sub-facebook a{background: url(http://4.bp.blogspot.com/-90OYXK2FmSU/UXp2eI7Lk6I/AAAAAAAAA2Y/TCubqtQ2LlA/s1600/icon-facebook.png) no-repeat 0 0;}
.sub-rss a{background: url(http://4.bp.blogspot.com/-qwZ3rbj5uxc/UXp2eZBRKcI/AAAAAAAAA2U/8hjCEXcHvZo/s1600/icon-rss.png) no-repeat 0 0;}
.sub-email a{background: url(http://2.bp.blogspot.com/-GcCWYpIpUHc/UXp2e30KdQI/AAAAAAAAA2c/8ilWCLWMWUQ/s1600/icon-email.png) no-repeat 0 0;}
Save your template and the CSS part is done!

How to add Social Icons in Side bar-HTML 

Now follow the easy steps :
  • Open your blogger dashboard
  • Click on Layout. 
  • Click on a widget section where you want to add it and choose html/javascript. 
  • Paste the follow code there.
<div class='subscribe'>
<ul id='subscribe-icon'>
<li class='sub-youtube'><a href='YOUR-YOUTUBE-URL' rel='nofollow' target='_blank'>Youtube</a></li>
<li class='sub-twitter'><a href='YOUR-TWITTER-URL' rel='nofollow' target='_blank'>Twitter</a></li>
<li class='sub-facebook'><a href='YOUR-FACEBOOK-URL' rel='nofollow' target='_blank'>Facebook</a></li>
<li class='sub-rss'><a href='YOUR-FEED-URL' rel='nofollow' target='_blank'>RSS</a></li>
<li class='sub-email'><a href='YOUR-NEWSLETTER-URL' rel='nofollow' target='_blank'>Email</a></li>
</ul>
</div>

What More

It is clearly mentioned that where you have to put your Social Media Profile Url's. Its is a CSS based very light Social Media Icons and it will not affect your blogger speed anyway. If you are facing any problem regarding this widget, we are here to help you.

Social Interaction plays an important role on your blog. You can get traffic, subscribers, followers and indeed new friends from all over the world. Blogger platform is an easy interface for beginners. It provides a flexible environment for the beginners to make them move to the advance level.

Sidebar widgets provide readers a shortcut to different directions. To link your social media URL’s  in sidebars make it easy for readers to get interaction with the author. We have found a CSS based very light simple and clean social media icons to direct your readers to your social media profiles. It is not designed by OZY NETWORK and we are not taking it's ownership.

DEMO


Let’s see how it works. 

How to add CSS section

  • Open to your blogger dashboard
  • Click on Template >> Edit Html
  • Now Press CTRL+F and find  ]]></b:skin>
  • Paste the below code above/before it.
.subscribe{width:289px !important;background: #fbfbfb;height:59px; border: 1px solid #A3A3A3; font-size: 90%; margin-left:-11px !important; margin-bottom:15px !important;
margin-top:0px !important;margin-right:0px !important;padding: 7px 0px 4px 10px !important;}
.subscribe a{padding:40px 11px 0px 0px; display: block;}
.subscribe a:hover {opacity:0.8;}
#subscribe-icon li{font-size: 11px; margin: 0 2px 5px 2px; width: 52px; text-align: center;height: 42px;display:inline;float:left;}
.sub-youtube a{background: url(http://3.bp.blogspot.com/-RSnY0aqLC9M/UXp2bGmRAoI/AAAAAAAAA2E/UCRb8Vh7iZA/s1600/icon-youtube.png) no-repeat 0 0;}
.sub-twitter a{background: url(http://1.bp.blogspot.com/-S4XgwbX9MGQ/UXp2cwpbGaI/AAAAAAAAA2M/C2l_npg4lzw/s1600/icon-twitter.png) no-repeat 0 0;}
.sub-facebook a{background: url(http://4.bp.blogspot.com/-90OYXK2FmSU/UXp2eI7Lk6I/AAAAAAAAA2Y/TCubqtQ2LlA/s1600/icon-facebook.png) no-repeat 0 0;}
.sub-rss a{background: url(http://4.bp.blogspot.com/-qwZ3rbj5uxc/UXp2eZBRKcI/AAAAAAAAA2U/8hjCEXcHvZo/s1600/icon-rss.png) no-repeat 0 0;}
.sub-email a{background: url(http://2.bp.blogspot.com/-GcCWYpIpUHc/UXp2e30KdQI/AAAAAAAAA2c/8ilWCLWMWUQ/s1600/icon-email.png) no-repeat 0 0;}
Save your template and the CSS part is done!

How to add Social Icons in Side bar-HTML 

Now follow the easy steps :
  • Open your blogger dashboard
  • Click on Layout. 
  • Click on a widget section where you want to add it and choose html/javascript. 
  • Paste the follow code there.
<div class='subscribe'>
<ul id='subscribe-icon'>
<li class='sub-youtube'><a href='YOUR-YOUTUBE-URL' rel='nofollow' target='_blank'>Youtube</a></li>
<li class='sub-twitter'><a href='YOUR-TWITTER-URL' rel='nofollow' target='_blank'>Twitter</a></li>
<li class='sub-facebook'><a href='YOUR-FACEBOOK-URL' rel='nofollow' target='_blank'>Facebook</a></li>
<li class='sub-rss'><a href='YOUR-FEED-URL' rel='nofollow' target='_blank'>RSS</a></li>
<li class='sub-email'><a href='YOUR-NEWSLETTER-URL' rel='nofollow' target='_blank'>Email</a></li>
</ul>
</div>

What More

It is clearly mentioned that where you have to put your Social Media Profile Url's. Its is a CSS based very light Social Media Icons and it will not affect your blogger speed anyway. If you are facing any problem regarding this widget, we are here to help you.

Related post widget for blogger blogspot

Osama Zia | 4/05/2013 06:18:00 pm | | Be the first to comment!
Sometimes we used to search some useful widgets and after trying many times on search engine we stop searching and use default methods for applying it on blog. Related post widget is one of the most popular blogger widget which is used by different pro bloggers to attract more users and to make their blog convenience for searching related topics and articles. Yesterday I was searching related post widget for my blog and after searching it on different search engines I found a very easy script. There are no stepwise processes to install it. You just need a single step. Let’s see how we can install it.



Copyright Information
We don’t know who the author of this script is and we don’t take its ownership.

Recommendation
How to change the text format of a blogger/blogspot


Related post widget script

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
   'containerSelector':'div.post-body'
   ,'loadingText':'loading...'
});</script>

How to install it

  1. Open your blogger dashboard.
  2. Click on Layout
  3. Add widget anywhere you want
  4. Click on Html/Javascript.
  5. Paste it there and save it.
You are done. Check your blogger and you will see the related posts shown under every post.

 

What More!

It is a very simple script which will not affect your blog anyway. It will show the links below every post and for displaying snippets with it we use to alter its coding. For a nice look of your blog I recommend this widget otherwise you can  use link with in website for the related post widgets.


Sometimes we used to search some useful widgets and after trying many times on search engine we stop searching and use default methods for applying it on blog. Related post widget is one of the most popular blogger widget which is used by different pro bloggers to attract more users and to make their blog convenience for searching related topics and articles. Yesterday I was searching related post widget for my blog and after searching it on different search engines I found a very easy script. There are no stepwise processes to install it. You just need a single step. Let’s see how we can install it.



Copyright Information
We don’t know who the author of this script is and we don’t take its ownership.

Recommendation
How to change the text format of a blogger/blogspot


Related post widget script

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://blogger-related-posts.googlecode.com/files/related-posts-widget-1.0.js" type="text/javascript"></script>
<script type="text/javascript">
relatedPostsWidget({
   'containerSelector':'div.post-body'
   ,'loadingText':'loading...'
});</script>

How to install it

  1. Open your blogger dashboard.
  2. Click on Layout
  3. Add widget anywhere you want
  4. Click on Html/Javascript.
  5. Paste it there and save it.
You are done. Check your blogger and you will see the related posts shown under every post.

 

What More!

It is a very simple script which will not affect your blog anyway. It will show the links below every post and for displaying snippets with it we use to alter its coding. For a nice look of your blog I recommend this widget otherwise you can  use link with in website for the related post widgets.


Recent Comment

Followers

Blog Archive

Copyright © 2013 Ozy Network. WP Theme-junkie converted by BloggerTheme9
Blogger template. Proudly Powered by Blogger.
back to top