Subscribe For Free Updates!

We'll not spam mate! We promise.

Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts

Thursday 2 July 2015

How To Change and Use Fonts in Blogger

Undoubtedly, Blogger is an amazing platform to create and manage blogs even if you're a newbie as we can see the number of blogs raising rapidly. Okay, everybody know this, but the most common problem with mostly every blogger user is using perfect template for blog as it matters a lot. Template should be user friendly, its font should be eye-friendly and easy to read, it should also be responsive and some more features we want the template.

Everybody have got any blogger template to use in their blogs either they're beautiful or ugly but we're using them. But the main thing is content and there font matters a lot. If you're feeling that your blog doesn't have beautiful font than you should change the font immediately. Because in the blog, the main thing is content or articles and if you've used any bad font that makes the article difficult than definitely it will affect on your blog visitors and you might loose your visitors.

Changing font is blogger is not a big deal. We've great collection of web fonts available on Google Fonts for free from where you can pick up any font and start using it on your blog or web. Google Fonts is one of the most popular place for fonts and almost every website is using fonts from there because there fonts are great and are hosted on Google servers which are really fast. Implementing fonts in our blog is really easy, we just need to add a html link tag below <head> which calls the font to load in our blog and use font-family CSS property to call the font in any web element.

Don't worry, if you're a newbie and don't know how to change and use Google Fonts in your blog because below I'm going to show you step by step that how can we easily do that.

How To Change & Use Google Fonts in Blogger?

Okay, So here I'm going to divide the tutorial in two pieces just to let you understand it easily. In this part, we'll remove the existing font in your blog and in second part, we'll install and use new font. Let's get started.

1. Removing The Existing Font

  • Go To Blogger >>  Template >> Backup Your Template
  • Click Edit HTML and Search For The Following Code
fonts.googleapis.com
  • Mostly, This will be available below <head> of the templates.
  • After finding the above code, you'll see it in the html <link> tag like the image below. 
  • Just remove that html link tagline.
  • Save Template.

2. Installing New Font in Your Blog

  • Go to Google Fonts and find the best font that you want to use.
  • After choosing font, click on "Quick use" button, shown in the image below.
  • Tick mark all the styles
  • Scroll down and copy the html link tag code.
  • Go To Blogger >> Template >> Edit HTML
  • Search For <head>
  • Paste The Code Below It and Save Template.
  • If it gives error, try adding / before > at the end, after that ending will be like />.
  • Okay, now font is installed and lets call it in our template.
  • Come back to Google font page and scroll down more.
  • There, you'll see the block like below.
  • Copy that code and Go To Blogger >> Edit HTML
  • Search for body { or body{
  • There you'll see font-famiy:bla-bla-bla;
  • Remove that font-family property till semicolon and paste the new one there.
  • Save Template.
  • If the font is not working properly now than add the following code above ]]></b:skin>
body, h1,h2,h3,h4,h5,h6 .post, .post-body, .content-wrapper, .main-wrapper, .outer-wrapper, .footer-wrapper, #content-wrapper, #main-wrapper, #footer-wrapper, #rsidebar-wrapper, .sidebar-wrapper {FONT FAMILY PROPERTY HERE!important}
  •  Paste the font family property in the highlighted and remove semicolon because we've added !important tag that will call the font importantly in the given areas.
  • Save Template 
  • You're Done!

Final Keystrokes

Seems like your blog is looking awesome after installing fresh font. Hope you successfully did this through this guide as we've tried to make it step-by-step. Even if you got stuck anywhere than feel free to ask below in comments. Please leave your views in comments, share this article with your friends and keep visiting us for more easy tutorials. Have a nice day!

How To Add an Instagram Widget in Blogger


Let's be honest. You are not a blogger 24/7. Sometimes you like to live life a little and capture moments. "The best camera is the one that is with you," uttered world renowned photographer Chase Jarvis.

Our smartphones accompany us everywhere. We use our phones to text. We use our phones to listen to music. We use our phones to watch videos. We use our phones to play games and we use them to take pictures

iPhonegraphy, is a popular form of photography that revolves around pictures taken with the iPhone. Our trusty devices give us the opportunity to be creative and take pictures anywhere and with ease. I am going to show you how easy it is to add an Instagram Widget to your Blog.

Why add an Instagram Widget In Blogger?

You have to understand that we are a visual society. Pictures and videos are shared more than any other medium. The highly popular mobile based social network, Instagram, works like Twitter but your updates are strictly photo based. 

As a blogger this gives you the opportunity to showcase your personality beyond the words that you type. Instagram also gives you the power to showcase your business and other hobbies. 

If you excel at designing blogs, for example, Instagram gives you the opportunity to share your work flow, your work station and even new templates. 

The possibilities are endless. 

How to Add An Instagram Widget In Blogger

  1. Go to Template >> Click Backup / Restore Button >> Download Full Template (In case you messed up)
  2. Go to Layout >> Add Gadget >> Select HTML/Javascript 
  3. Open another Tab >> Go to Instagme website - http://www.intagme.com/
  4. Put in your username >> Select Grid or Slideshow (Grid will have them show up like they do on Instagram while Slideshow is just a slideshow of your images)
  5. Select your Thumbnail size (100 px is the default) >> Select whether you want a Photo Border or not
  6. Decide if you want to change the Background Color 
  7. Preview your creation. If you like it select Get Code
  8. Copy the code into the HTML/Javascript section and save the widget 
  9. Preview your page layout. If you like it Save Arrangement
  10. This widget updates as you update your Instagram
Note : The best place for this widget is the sidebar. 

Final Words

Instagram appeals to professionals and amateurs alike. 

You can really spice up your blog with this addition. Remember that Instagram was bought out by Facebook so you can let your Facebook followers know that you have an Instagram account.

About The Guest Author : This article is written by Patrick McNease who blogs at Praverb.net.

Add Horizontal Social Buttons Bar Below Post Title In Blogger

Social networking buttons, plugins and widgets are known as one of the most important things for a blog as it helps in various places like gaining more traffic from social sites, allowing readers to share your posts and many more. Previously, we had shared manysocial and as well as other widgets which are placed in our widget library and today we're going to share another beautiful widget which is going to help you and your blog from many sides.

Horizontal Social Buttons Bar




This is the horizontal social sharing button bar which we're going to share today. This looks beautiful in the design as the buttons are placed in good manner and each button is separated in squares. This social buttons bar comes with a title which will help to get more shares and four different buttons from different social sites. These four buttons are Twitter's tweet button, Facebook's like button, Google Plus's +1 button and Stumble Upon's stumble it button. These all buttons are from well reputed social sites which are being used widely in the world and they will definitely help you, me and other or whoever use this, will get good number of traffic towards his blog from these social sites. And there is nothing to do for receiving traffic, you just need to place those buttons on your blog and your readers will automatically do the job if you've some loyal readers. I mean, they will socialize your content which can help you to receive good traffic. Basically, these buttons are built with XML, CSS, HTML and JavaScript which are used by developers of these buttons to prepare them. We've customized the coding of these buttons in such way that they will only load when they're needed and it really helps in improving the page load speed of your blog and it is also important to take a note about it while implementing new things in your blog.

Adding Horizontal Social Buttons Below Post Title In Blogger

Implementing this new horizontal social bookmarking button bar below post title in blogger is not a difficult task but you might need a hint or help if you're newbie so below we're going to guide you step by step on how can we do this. 
  • Go To Blogger >> Template >> Backup Your Template
  • Click Edit HTML and Find For </head> 
  • Just Above </head> Paste The Following Code.
<b:if cond='data:blog.pageType == "item"'>

<script type='text/javascript'>

// Twitter
(function (a, b, c){var d=a.getElementsByTagName(b)[0];if (!a.getElementById(c)){a=a.createElement(b);a.id=c;a.src="//platform.twitter.com/widgets.js";d.parentNode.insertBefore(a, d)}})(document, "script", "twitter-wjs");
// Stumbleupon
(function (){vara=document.createElement("script");a.type="text/javascript";a.async=true;a.src="https://platform.stumbleupon.com/1/widgets.js";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a, b)})();

</script>


<style type='text/css'>

/*Social Bar By Blogger Yard ----------------------------------- */
#SocialBar {
    float: left;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    width: 610px;
    margin-bottom: 20px;
    margin-left: -10px;
    margin-top: 10px;
}

.headingsharer h5 {
    float: left;
    padding-right: 20px;
    padding-top: 18px;
    text-transform: uppercase;
    font-weight: bold;
    margin: 0px;
    padding-left: 10px;
}

.tweeetero, .fbwolo, .g-plusones, .stumblo {
    float: left;
    border-left: 1px solid #eaeaea;
    padding-left: 18px;
    padding-top: 15px;
    padding-bottom: 10px;
}

.g-plusones {
    margin-left: 20px;
}

</style>

</b:if>
  • Click Save Template and You're Half Done!
  • Now Search For <div class='post-body entry-content'>
  • And Above It Paste The Following Code.
<b:if cond='data:blog.pageType == "item"'>
<div id='SocialBar'>
<div class='headingsharer'>
<h5>SOCIALIZE IT →</h5>
</div>
<div class='tweeetero'>
<a class='twitter-share-button' expr:data-text='data:post.title' expr:data-url='data:post.url' href='https://twitter.com/share'>Tweet</a>
</div>
<div class='fbwolo'>
<iframe allowtransparency='true' expr:src='"//www.facebook.com/plugins/like.php?href=" + data:post.url + "&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21"' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:80px; height:21px;'/>
</div>
<div class='g-plusones'>
<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'/>
</div>
<div class='stumblo'>
<su:badge expr:location='data:post.url' layout='1'/>
</div>
</div>
</b:if>
  • Click Save Template!
  • You're Done! 

Final Words

So friends this was the horizontal social buttons bar which is taken from Templateism so I've shared today and I hope you're going to use it and it will really help you to gain more social traffic and about the demo, you can see it live on this blog just scroll up and look below the post title. Keep visiting us for more widgets and also subscribe us to receive hot updates! Take a lot of care and happy blogging!

Customized Colorful Flat UI Labels Cloud Widget For Blogger


Improving the appearance of blog like bringing awesomeness and professionalism to blog templates and themes is always best. Because there are several reasons for this like getting approval from big advertising companies such as Google Adsense and BuySellAds. There are several professional templates on the internet which we can use but it might not have uniqueness because they're made for public and everyone can use that. After theme or template, it's also important to have professional widgets such as Labels or Tags widget, Popular Posts widget, Social Sharing, Related Posts etc. If you're enough smart in web designing then you can easily bring professionalism to your widgets but if not then there are also already made awesome widgets for you on the internet. Today, in this post, we're going to do a tweak with our blogs which will beautify our blog theme a little bit. Just today, I've customized label cloud widget for blogger and below I'm going to share it with all.

Colorful Flat UI Labels Cloud Widget

These days Flat UI and Metro designs are mostly trending in web designing. Today, when I came to update Blogger Yard and was about thinking about the topic. I thought why not today I do some customization with Blogger widgets and share it here. Then just started choosing the widget for customization and I came to know that labels cloud widget has been old looking on all blogs so I started doing something new to it. And made this colorful Flat UI label cloud widget. 

So, This is colorful Flat UI label cloud widget in which tags or labels are having multiple colors. That's why we've put "Colorful" word in its name. After this, It's look is inspired from Flat UI designs which is mostly famous these days. The colors which we've used in this widget are also Flat UI colors. Another specialty of this widget is that when someone hovers the mouse on any label it will give a beautiful effect on hover. This widget is customized using pure CSS3 and we've not used any JavaScript or any other heavy programming language which means that it will not affect on the loading speed of your blog. You can have its live demo by looking in the right sidebar of this blog. We're also using it here. So, let's start the tutorial on how can we implement this colorful Flat UI label cloud widget for Blogger.

Step 1. Adding Labels Cloud Widget

  • Go To Blogger >> Layout >> Add a Gadget
  • Choose "Labels" Widget.
  • Make Settings Like The Below Image & "Save" It.
Now the widget has been added into the blog and let's customize the label cloud widget.

Step 2. Customizing Labels Cloud Widget

  • Go To Blogger >> Template >> Backup Your Template
  • Click Edit HTMl and Find For ]]></b:skin>
  • Copy and Paste The Following Code Above ]]></b:skin>
/* Flat UI Labels Cloud By Www.BloggerYard.Com ---------------- */

.sidebar .label-size {
  position:relative;
  text-transform: uppercase;
  text-decoration:none;
  font-size:13px;
  font-family:Open Sans;
  color:#fff!important;
  }

.sidebar .label-size a {
  color:#fff!important;
  font-weight:bold;
  padding:8px 10px;
  margin:0 6px 6px 0;
  float:left;
  display:block;
  -moz-transition: all 0.4s ;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s ;
  -ms-transition: all 0.4s ;
  transition: all 0.4s ;
}

.sidebar .label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;}
.sidebar .label-size-1 a:hover {background:#16a085;}
.sidebar .label-size-2 a {background:#3498db;border-bottom:3px solid #226693;}
.sidebar .label-size-2 a:hover {background:#2980b9;}
.sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#27ae60}
.sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}
.sidebar .label-size-4 a:hover {background:#8e44ad}
.sidebar .label-size-5 a {background:#e74c3c;border-bottom:3px solid #922C20;}
.sidebar .label-size-5 a:hover {background:#c0392b}
  • Click "Save Template".
  • Congratulations! You've successfully customized colorful Flat UI label cloud widget in your blog.

Final Words

Friends so that was the colorful Flat UI label cloud widget which I've shared today with you all. I hope this will help you to improve the navigation and design of your blog as it seems awesome in the design. If you're facing any problem in implementing this widget then feel free to ask in the comments. We're also cooking some other widgets in our kitchen so keep in touch with us to enjoy new and latest upcoming widgets. Don't forget to share your views and also share it with your friends. Take care!

Top 25+ Responsive Best Free Blogger Templates

Blogspot community is rapidly growing these days and we can easily find out a lot of blogger templates released every day for blogger users. If you are one of those who are blogspot platform users, then you might be search for a good or best template for your blogspot blog. In this article, we have collected a list of 25+ responsive best free blogger templates that will fits into users device such as laptop, mobile etc through which he/she is accessing your website or blog.

Have a look at this amazing and best collection of responsive blogger templates given below:

1. NewsAgency Free Blogger Template

News Agency is three column responsive blogger template which is specially designed for news blog. It has different features like JQuery slider, Header ads space, drop down menu, breadcrumb, 4 column footer and related posts.

Demo Download

2. Magnifique Free Blogger Template

Magnifique is responsive and minimal blogger template, simple in design with top navigation menus etc.It is considered as best minimal theme for bloggers.

Demo Download

3. WorldTravel Free Blogger Template

World Travel is three column responsive template that is designed for travel blogs. Just like news agency blogger template, it has same features including JQuery slider, Header advertisement space, drop down navigation menus, 4 column footer, related posts and breadcrumb etc.

Demo Download

4. GamingNews Free Blogger Template

GamingNews is two column blogger template which is mainly designed for gaming niche blogs. It came up with features like Header ads banner, top navigation menus, breadcrumb and related posts etc.

Demo Download

5. Ryu Free Blogger Template

It is minimal, one column blogger template having responsive design. The top features of this template includes top widget panel, social buttons, multi-level navigation menu etc.

Demo Download

6. SimpleBT Responsive Free Blogger Template

SimpltBT is one column , responsive and free blogger template which suits best for status and personal niche blogs and can also be used for different purpose as well. The best part is that it has some other features that are much easier for bloggers to utilize them.

Demo Download

7. NewsBT Responsive 3 Column News Free Blogger Template

Professionally designed blogger template for news based blogs.  It can also be suitable for magazine blogs, professional and news blogs.Apart from responsive design, it has some other best features like recent posts widget, news ticket widget and magazine widget etc.

Demo Download

8. PetsWp Free Blogger Template

PetsWp Free Blogger Template is two column blogger template suitable for pets blogs. Just like gaming news blogger template is has same features that includes drop down menus, JQuery slider, headers ads space, tabbed widget, four column footer, breadcrumb etc.

Demo Download

9. Flyto Free Blogger Template

It is best online resource for young creatives and student designers who are looking for honest answer and solid solution in order to help you.

Demo Download

10. Profiliya Free Blogger Template

Profiliya is a popular Blogger Template because of presenting your writing or work and came up with awesome features that makes this blogger template fast and user friendly.

Demo Download

11. iTechno Free Blogger Template

iTechno is another good responsive designed blogger template which is specially designed for blogging and technology niche blogs. It is magazine style blogger template that really really beautiful and have awesome features.

Demo Download

12. FootballZone Free Blogger Template

It is another blogger template dedicated for football lovers to use on their football niche blogs.  Football Zone blogger template has features like 468*60 header advertisement space, related posts, breadcrumb etc and many more others.

Demo Download

13.  Prose Free Blogger Template

Prose is one column, simple and magazine blogger template having responsive layout. It has features like responsive design, 3 column footer, navigation menu etc and looks really great on each device because of responsive feature.

Demo Download

14. Modern Mag Free Blogger Template

If you are looking for some top and best blogger template which is suitable for you magazine, news, sports, multimedia blog then ModernMag will be the perfect choice for you.

Demo Download

15. ChattelsBlog Free Blogger Template

ChattelsBlog  is three column blogger template that works perfectly for business or personal blogs having features like social header buttons, top navigation menu, four columns footer etc.

Demo Download

16. Mag Day Responsive Free Blogger Template

MagDay is best, powerful another responsive blogger template developed by Sora Templates having all those features which you loves to see in premium blogger templates.

Demo Download

17. Shannon Pink Free Blogger Template

Shannon Pink blogger templates works perfectly for fashion, beauty or women related blog.

Demo Download

18. Discover Responsive Free Blogger Template

Discover is free blogger template that came up with tons of awesome features such as featured posts, featured slider, , clean and responsive design that gives awesome look on each device.

Demo Download

19. DietingMadeEasy Free Blogger Template

DietingMadeEasy blogger template is specially designed for cooking and health niche related blogs.

Demo Download

20. Quotes Free Blogger Template

Quotes Free Blogger Template is designed for Quotes, Images and Sayings related blog. It is simple blogger template that can also be used on personal and photography blogs.

Demo Download

21. Counter Free Blogger Template

Counter Free Blogger Template is best template for those blogs which are going to launch soon or under construction, It came up with features like email subscription area and JQuery countdown area.

Demo Download

22. Mashthirteen Responsive Free Blogger Template

Mashthirteen is the the best and recommend responsive and mobile friendly blogger template for blogspot users.  If you are running blogs about business, technology, health etc then this template will be the best choice.

Demo Download

23. Magfolio Free Blogger Template

Another good looking responsive blogger template designed for blogspot that can be used for news, magazine, personal or business related blogs etc. The best of magfolio blogger template includes grid style post layout, customized label cloud widget, social and SEO friendly, threaded commenting system.

Demo Download

24. WeblogMag Free Blogger Template

Professionally designed blogger template that can be used on news , magazine and business blogs. It came up with an awesome slider and good looking news ticker. In order to improve user experience, this theme came up with some top features.

Demo Download

25. Fifamag Free Reponsive Blogger Template

FifaMag is another responsive designed blogger template that is specially designed for Fifa World Cup niche blogs. All those bloggers who have started their niche blogs can take advantage of this best template and the best part about is that it is ads ready blogger template.

Demo Download

26. Symetry Free Blogger Template

Another three column and awesome responsive designed blogger template for bloggers having features like JQuery slider,  header social buttons, related posts, top navigation menus, left and right sidebar, four column footer and many more other etc.

Demo Download

27. SimpleBT Free Blogger Template

Another responsive designed free blogger template which is best choice for status and personal blogs. It is not limited to just only two of these features but you can also use this blog for multi-topics.

Demo Download

28. Seo Mag Free Blogger Template

Seo Mag Free Blogger Template is best for those blogs that are publishing technology related topics. The best part about this template is because of having good look and best performance.

Demo Download

29. Confit Free Blogger Template

If you are looking out for some best blogger template for restaurant or cafe based blogs, then Confit Free Blogger Template will be the best option for you. It has features like left sidebar, auto read more, navigation menu etc and many more other features.

Demo Download

30. Delivery Lite Free Blogger Template

Delivery Lite Free Blogger Template is another beautiful, modern, minimalist, mobile friendly and responsive designed.  This template can be utilize on magazine style blogs like news blogs, personal blogs etc for better results.

Demo Download

Do let us know your view about these top responsive best free blogger templates collection in comments section.