How To Add New Fonts in Blogger

Google web fonts
Wondering how to use Google Web Font in  Blogger. You may not wonder if you use Blogger Default Template as we can browse several font using Template Designer. But What if you are using Layout Template. You need to change your blogger posts fonts to make it more attractive. Ya, there is way to use Google Font by embedding it. 

To use Google Font kindly follow these below steps;

  • Go To This Link
  • Select You Font that you wish to add it .
  • Click on quick use. You can see the codes like this;
Google font

  • Inside it, you can see code similar to this;
<link href='' rel='stylesheet' type='text/css'>

  • Now, add / just after 'text/css'. Now, your code will be similar to this 
<link href='' rel='stylesheet' type='text/css'/>

  •  Go To Blogger Dashboard
  • Click on template and select Edit HTML
  • Now, just above </head>, add those codes
  • Search for this code using CTRL + F: ]]></b:skin> 
  • Now, in Google Fonts tab, scroll to Intregate Your Fonts To CSS and copy the codes given there. As an example, I will copy these codes;
font-family: 'Great Vibes', cursive;

  •  Now, you must paste these codes where you want to use it. For an example, If you want to use as your sidebar title, you must find sidebar h2 and add your code inside {YOUR CODES}. L Have a look at an example of it;
.sidebar h2 { font-family: 'Great Vibes', cursive; }

  • Save Your Template 
If you have any confusions, you can comment below and I will try my best to solve your problem. Till then goodbye everyone!
Nischal Khanal

Make Your Blog Page Title SEO Friendly

From the SEO (Search Engine Optimization) point of the view, blog page title is the most important element of your blog for ranking better in search engines! From this it can be concluded that a page title with high impact keywords ranks good in search engines and ultimately leady to boost our click through. Moreover it also drives some amount of unique traffic to our site. In blogger the page title is made up of blog title and post title. If the title of the post is not mentioned then its title will be the initial words of the posts. Take a small example of it:
Post Title Without SEO

The above example is the search listing for the post having title "Effective Ways To Earn Money Online Only first keywords are seen and the last few keywords are hidden. This is because of google as it only shows up to 70 characters of the page title in search results page. So whenever the page title exceeds the limit (70 characters) google simply cuts it off and so its victim will have to suffer low rank in search engine's result pages. Now what will you do ? Whats the solution for it? If it's so then you came to the right place. The solution for this is simple. The thing that should be done is just reverse the position of blog title and post title. By this post title will be shown in full granting it high priority in comparison to blog title.
Now, follow my steps to make SEO friendly blog post Titles:

  • Go To Blogger Dashboard
  • Click on Template and Select Edit HTML
  • Search For this code using CTRL + F : <title><data:blog.pageTitle/></title>
  • Now, replace the above code with the below codes;
<b:if cond='data:blog.pageType == &quot;index&quot;'>  <title><data:blog.pageTitle/></title>  <b:else/>  <title><data:blog.pageName/> | <data:blog.title/></title>  </b:if>

  • Save Your Template
Now, after adding this code, Google search engine will show full post titles. But, it may take a while to come in to effectiveness. So, be patient! If you guys are having any sorts of problems, you can comment below and I will try my best to help you!
Thank You!

Adding Read More Link To Blogger With Thumbnail

Hey guys after a long time of editing my blog template I am back with my new tutorial. One of my loyal visitor Sugam asked me a way for converting a whole post into a partial part with a thumbnail and auto read more link. At first, I was feeling difficult to create code myself but after long searching, I found a nice tool for blogger and that was auto read more link. Simply we can recognize it as a tool that shortens your post. But with this post you will be able to add read more link with thumbnail. The first picture of each post will be taken as thumbnail. Here is a  model of it;

By the help of auto read more link you will be able to make your site load faster. Due to this, the whole post shouldn't be shown and a partial part of post is shown which makes the time of displaying less. At the end of each partial post there would be a phrase "read more" or "see more". We can keep any words as our wish. By clicking on it users will be able to jump to the specific (targeted) post. This widget uses Javascript. It is seen in posts without thumbnail also. When there is no image then instead of image partial part of post covers it. So there is no exception. So isn't it a terrific tool. Now, let's add it in our blog.

Adding Auto Read More Link:

  • Go To Your Blogger Dashboard
  • Click on template and select Edit HTML
  • Search for this code using CTRL + F

  •  Now, add the below codes just below </head>
<!-- Auto read more script Starts --> <script type='text/javascript'> var thumbnail_mode = "yes"; //yes -with thumbnail, no -no thumbnail summary_noimg = 430; //summary length when no image summary_img = 340; //summary length when with image img_thumb_height = 200; img_thumb_width = 200; </script> <script type='text/javascript'> //<![CDATA[ function removeHtmlTag(strx,chop){   if(strx.indexOf("<")!=-1)  {   var s = strx.split("<");    for(var i=0;i<s.length;i++){     if(s[i].indexOf(">")!=-1){      s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);     }    }    strx =  s.join("");   }  chop = (chop < strx.length-1) ? chop : strx.length-2;   while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;   strx = strx.substring(0,chop-1);   return strx+'...';  }  function createSummaryAndThumb(pID){  var div = document.getElementById(pID);  var imgtag = "";  var img = div.getElementsByTagName("img");  var summ = summary_noimg;         if(thumbnail_mode == "yes") {  if(img.length>=1) {    imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';   summ = summary_img;  }  }  var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';  div.innerHTML = summary; } //]]> </script> <!-- Auto read more script End -->

  • Now, search for <data:post.body/> using CTRL + F 
  • You may find this code more than 3 times but stop at 1st one
  • Now, replace  <data:post.body/> with below code;
<!-- Auto read more Start --> <!-- The All Rounder Solutions Corner --> <b:if cond='data:blog.pageType == &quot;item&quot;'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <data:post.body/> <b:else/> <div expr:id='&quot;summary&quot; +'><data:post.body/></div> <script type='text/javascript'> createSummaryAndThumb(&quot;summary<>&quot;); </script> <a class='more' expr:href='data:post.url'>Read more ...</a> </b:if> </b:if> <!-- Auto read more End -->

  • Now, save your Template.
  • Check Your Blog
Further Tips

  • You can change 200 with your desired image's thumbnail size. 
  • You can change Read More with your desired words like See More, Show More, etc
Now, that's it. I hope that you have enjoyed reading this tutorial. If you have any problems, you can feel free to ask us anytime. We will try our best to help you.
Thank You!

Rotate You Image When Mouse Hover Over It

Really, image is very important in blogosphere. The things that we cant describe can be described by images. So, Leonardo Da Vinci also considered image as a worth thousands of words.
Lets come to our point guys, today we shall be discussing how to rotate image up to 360 Degrees when we hover our mouse upon it. This feature makes your specific images look different and unique. We will be doing this by using CSS code. We will be rotating/animating our images without Java Script and for this you will need to add codes in your site. By the help of CSS you can further enhance your blog. It doesn't affects your blog layout and loading time. In this post i will be teaching you how is image rotated when mouse hover. For best experience of this cool effect you will be needing latest browsers
For a live demo, you can hover your mouse to this below picture of Neymar Jr. When you guys hover your mouse up to it, it rotates up to 360 Degrees.

Now, let's add this effect in our blog. Follow my steps to add it in your blog;
  • Go To Blogger Dashboard
  • Select Your Blog
  • Click On Template
  • Click On Edit HTML
  • Search For This Code: ]]></b:skin> Using CTRL + F
  • Paste The Following Code Just Above ]]></b:skin>
.smasherimg {
border:3px solid #808080;
margin-left: 0px;
-o-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
-ms-transition: all 0.6s ease-out;
-webkit-transition: all 0.6s ease-out;
zoom: 1;
.smasherimg:hover {
opacity: 1;
5px solid #D70E3C;
transform: rotate(360deg);
zoom: 1;
  • Change #D70E3C to your desired border color
  • Change 5px to your desired border size
  • If You want to make the image totally opaque, change 0.6 To 1 in opacity 
  • Save Your Template
For Rotating Images Of Whole Blog;
Guys, if you want to make all the images to rotate of your blog, follow my steps. Or if you want to rotate only specific pictures, skip these steps
Steps to rotate all images of blogger posts;
  • Change .smasherpic with .post img
  • Save The Template

Now, the effect will be saved in your template. But, for rotating it in specific images of blogger posts, you must paste a code in every images. It isn't much hard as it sounds.
Follow my steps to rotate specific images in blogger posts;
  • Create A New post
  • Write all the informations that you need to post
  • Upload Images that you need to hover
  • Open the post editor from HTML Mode
  • Just before your image Tag, paste the following code;
    <div class="rotate">
    <img src="Your Image URL"/>
    • Finally publish the post
    • You Are Done
    Now, when you hover the mouse over the image which you have made rotate, it will rotate up to 360 degrees. That's all guys, If you enjoyed this tutorial, be sure to share this posts. Stay tuned for different fantastic posts. Till Then, Good bye Guys!!
    Happy Blogging!!!

    Make A Link To Open 30+ Times In Just A Click

    increase-visitsHello friends! As you all might have open your respective blogs already, Tell me what is the most difficult challenge in blogging? Probably (according to me) it's traffic ya! I mean other things like writing posts, designing a good blog, etc. comes under our knowledge, but getting plenty of traffic is really hard.
    Just we open a very informative blog but others don't see it, then what's that blog value? It's a complete zero we guess. So today I am going to unleash a very useful trick to you all. This tutorial will increase the pageviews of you blog by 4 times. Sounds cool na, Can you believe that? You may not, but it's really the true fact.

    Note: This Trick Only works for those who has a bit traffic initially!

    What it does is that you will keeping a button with a link and as soon as somebody clicks on it your site will be opened at once in more than 30 tabs/windows. Now say me wont your site pageviews be boosted. 
    Let's proceed then;
    • Go To Blogger Dasboard
    • Click On Layout and Select Add A Gadget
    • Click on HTML/ Javascript
    • Copy The Below Code And paste in that box:
    <script> function open_win()  { for(i=0;i<=750;i++)""); } </script>  <form> <input type="button" value="Click Here" onclick="open_win()" /> </form>
    •  Change the red line with your Blog's URL
    • Finally, click on save!
    Now, after checking your blog, you can find the button which you just created. When you click on it, the window will open 30+ times. Now, thats it. I am hopeful that you enjoyed this topic. 
    If you have any problems, you can ask me via comment form!
    Goodbye Everyone!

    Change Your Comment Style In Blogger

    As We Know That comments are the base of the blog. We Can find our solutions, ask queries, talk with admin and do many things with comment. But, as we know that the default comment style provided by blogger is not nice. It Looks ugly.
    So, today i'm posting you how to Change comment style in your blogger blog.
    The Comment box looks like this;

    Now, let's add this in Our Blog. Follow My Simple steps to add it in our blog:

    • Log in to your blogger account
    • Select Template and click Edit HTML (Click on Proceed)
    • Find ]]></b:skin> [USING CTRL+F] 
    • Copy the Code below

    comments .comment-block {
    background: url("") repeat scroll 0 0 transparent;
    border: 4px solid #EAEAEA;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 3px 3px 0 #D6D6D6;
    margin-left: 48px;
    padding: 3px 10px;
    position: relative;
    #comments .avatar-image-container img {
    border: 2px solid #FFFFFF !important;
    border-radius: 50px 50px 50px 50px;
    height: 57px;
    max-width: 57px;
    .comments .avatar-image-container {
    border: 2px solid #FFFFFF;
    border-radius: 34px 34px 34px 34px;
    box-shadow: 1px 1px 3px #ABABAB;
    float: left;
    margin-left: -40px;
    max-height: 60px !important;
    overflow: hidden;
    width: 60px !important;
    .comment-header {
    border-bottom: 2px solid #F1F1F1;
    .comment-block:hover > .comment-header {
    -moz-transition: border-color 0.5s ease 0s;
    border-bottom: 2px solid #000000;
    .comments .comment .comment-actions a {
    background: -moz-linear-gradient(center top , #EEEEEE 0%, #CCCCCC 100%) repeat scroll 0 0 transparent;
    border: 2px solid #E0E0E0;
    border-radius: 3px 3px 3px 3px;
    color: #000000;
    font: bold 12px arial;
    margin-right: 14px;
    padding: 4px 11px !important;
    text-decoration: none !important;
    text-shadow: 1px 1px 0 #FFFFFF;
    • After Pasting It, Save the template
    Now Your blog's Comment Style Looks More Amazing and attractive than before. This Is an easy tutorial. If you have any problems regarding this, comment and I shall be helping you.
    Happy Blogging!!!

    Remove Subscribe To Posts (Atom) From Your Blog

    While looking our blog in a detailed way, we will find a text below every Page; Subscribe to Posts: (Atom). This text was first used for  subscribing like RSS. But, after the advancement of RSS, there is no use of it. This text now only hampers the beauty of our blog. So, in this post, we will be discussing on how to remove it.
    Let's Begin. Now, Follow My Steps:
    • As usual, Go To Your Blogger Dashboard
    • Click On Template
    • Then Click On Edit HTML
    • There Search this Code:
      <b:include name='feedLinks'/>
      • After You find this code, delete it
      • Save Your Template
      Now, your blog shouldn't show this text as in the picture;
      Now, that's it. Thanks for reading this tutorial. I guess, this tutorial might have helped you to remove that ugly Subscribe to posts atom link permanently from your blog. 
      If you have encountered any sorts of problems, you can ask me any time. I will always be there to help you anytime. Till then, bye everyone! Keep visiting our blog for more daily updates!
      Happy Blogging!!! 

      Best Blogger Backgrounds and Textures Sites[Free]

      Blogger is a vast world for amateurs and professionals who have their passions for writing posts in
      their own style. It offers us different facilities which helps us to make our blog look attractive. Unlike other free web hsoting like Wordpress, where we must completely design our site before posting, blogger enables us to write and customize our blog and post anytime.
      In this post, we will be discussing about changing our blogger backgrounds. The backgrounds offered by blogger looks ugly and it is not attractive too. So, i;m going to present you some websites where we can find blogger backgrounds and textures absolutely free. So, here are some websites:
      Shabby Blogs offers us some unique blogger backgrounds and textures absolutely free. Just choose your desired background and click on "Install Background". It will also  teach how to paste the blogger background.
      Dotty Dot Dot is a blog where we can get geometrical type of blogger backgrounds like squares, dots, circles and so on. You must copy the background code of your desired background to add it on your blog.
      CgTextures provides us the real backgrounds of different food items, fire, textures and much more. Their site is full of photos and textures that could be added as a background image with a reduced transparency.

      Now let's add these backgrounds on blogger:
      Adding Background Image using Blogger Template Designer
      If you have default Blogger Template, then Follow these Steps. But If you are using a custom template, skip this steps and read next steps.

      • Go To Your Blogger Dashboard
      • Click on Dropdown menu and click Template
      • Click On Customize
      • Once you have clicked on customize, then click on Background.
      • Click On The Box Below Background Image and Then Click on "Upload"
      • Upload Your Image And Click On Done.
      • Clock On Apply To Blog In the top of the blog
      • Enjoy.
      Adding Background Image on Custom Blogger Template
      • Go To Your Blogger Dashboard
      • Click on Dropdown menu and click Template
      • Click On Edit HTML
      • Press CTRL + F Keys To Open Search Blog
      • Search For This Code: ]]></b:skin>
      • Immediately Before ]]></b:skin> , add The Following Code:
       body {
      background-image: url(IMAGE-URL.png) !important;
      background-repeat: no-repeat;
      background-position: center top; 
      background-attachment: fixed;
      background-size: 100%; 

      Change The (IMAGE-URL.png) with your Blogger Background Image URL. Note: the no-repeat value prevents the image from repeating either vertically or horizontally. If you want to repeat the image vertically or horizontally, use background-repeat: repeat-y and background-repeat: repeat-x. If you want to change the background size, change the 100% value to your desired value.
      If you are wanting to change the pattern, paste the same code inside CSS codes box.

      • Finally, save the Template
      • Enjoy..
      Now, you have changed your blogger backgrounds. If you have any problems regarding this, comment.
      Happy Blogging!!!

      Add Troll Emotions On Blogger Comment

      We might Have seen different emotions In Different Social Networking Sites like Facebook, Twitter, LinkedIn And Much More. Moreover, it can be used to express our feelings in much better way! But, the best image which we like very much is troll images. Troll images helps to express a person's feelings from some pictures. Now a days, trolls and memes are very famous among the general publics. Troll images are regarded as the best way to make decisions, discussions and debate more interesting and funnier! This also makes our blog stand out and encourages our visitors to comment and discuss more on our articles. Moreover, it can increase our traffic too! Sounds too interesting na, but if you used this widget, believe me guys, your blog'd be famous than before. We also have seen it in Blogger Comments but in my view, we've seen very rare websites having troll emoctions facility in the comment form. So, I'm sharing this amazing widget with you guys! This widget helps to Impress both the author and visitors of the blog. We can share our ideas regarding the blog in animated way using these troll emoctions. So, in this post, we will be discussing on Adding these troll Emotions.

      Now, let's Add This. Follow My Steps To Get This;

      • Go To Blogger Dashboard
      • Click On Template From Dropdown Menu
      • Click On Edit HTML
      • Find This Code ]]></b:skin> Using CTRL+F
      • Now Add This Code Just Above it;
      .conemo{display:block;background-color:#F7F7F7;padding:10px;color:#735555;border:2px #A6A6A6;border-style:dashed}#emoWrap{background-color:#fafafa;color:#000;font:normal bold 12px/normal Tahoma,Verdana,Arial,Sans-Serif;text-align:center;padding:10px 14px}.emo,.emoKey{display:inline;vertical-align:middle}.emoKey{border:1px solid #ccc;background-color:#fff;font:normal bold 11px/normal Arial,Sans-Serif;color:#000;margin:0 0 0 2px;padding:1px 2px}#emoWrap,#hide-emo{display:none}.emobttn{background-color:#fff;padding:4px;color:#fff;border-radius:3px;border:1px solid #F5ACAC}.emobttn:hover{box-shadow:1px 1px 5px #E77B7B}.emobttn{margin-left:15px}.emo-button{color:#E47B7B!important}.emotitle{font-size:14px;line-height:1.2em;border-radius:2px}
      • Now again, search for </head> using CTRL + F 
      • And just Above </head>, add this code;
      <script type='text/javascript'>
      var emoRange = "#comments p, div#emoWrap",
          pwd = "iframe#comment-editor",notetext = "Make your comments Awesome",
       emobox = true,
      emocode = " :-Z :-{{ |-( :-V :s :> :O >:) I:| ):-) :fkyeah: |< :-O =) :/ :-| :) :-)) :| 8-| %-} (P) 8| :@ :-@ =D :( :&#39;( @:-) :p (*0*) O.O :-! :-p :< :? :-(0) ";
      <script src='' type='text/javascript'/>
      • Now, finally save your template!
      • Check Your Blog
      Now, we've successfully added troll emoctions in our blog. Now, if you guys are having any problems, or if the code hasn't worked properly, you can just comment below! I'd try my best to help you. Till then, bye bye everyone!
      Happy Blogging!
      Nischal Khanal 
      If You Have Any Problems regarding this, Comment And I shall be helping you. Happy Blogging!!

      Add Facebook Like Box With Smooth Hover Effect In Blogger

      Hi guys, I was busy with some work, so I couldn't posted for so long. But, now I'm free. Today, I'm
      going to tell you how to add a static Facebook like button. It has a special feature. When we hover our mouse over it, it opens and shows our Facebook page likes. Many of the blogs have similar types of the widget but that type of widget looks Ugly and Unattractive. But, this widget looks much attractive.
      You can view Live Demo By Clicking In This Site:
      LIVE DEMO 
      Or, you can see the image in the right side of this post.
      Now, let's add it in our blog. Follow My Simple Steps To get It in your Blog:
      • Go To Blogger Dashboard
      • Select your Blog
      • Click On Layout 
      • Click On Add A Gadget
      • Select HTML/JAVASCRIPT 
      • Paste The Following Codes There:

      <!-- The All Rounder Solutions Corner -->
      <script src=""></script><style type="text/css">.tinyservalfbplikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 6px;text-align: right;z-index: 99999;}.tinyservalfbplikebox span a{color: #808080;text-decoration:none;}.tinyservalsfbplikebox span a:hover{text-decoration:underline;}#fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}
      .fbplbadge {background-color:#3B5998;display: block;height: 200px;top: 38%;margin-top: -85px;position: absolute;left: -47px;width: 47px;background-image: url("");background-repeat: no-repeat;overflow: hidden;}
      <a href= rel="dofollow" target="_blank" ><img src="" alt= "Blogger widgets" width="1" height="1" border="0" style=" position: fixed; bottom: 0%; right: 0%; top: 0px;" /></a>
      <script type="text/javascript">
      var $dur = "medium"; // Duration of Animation
      md("#fbplikebox").css({right: -250, "top" : 100 })
      md("#fbplikebox").hover(function () {
      right: 0
      }, $dur);
      }, function () {
      right: -250
      }, $dur);
      <div class="mdfbplikebox">
      <div id="fbplikebox" style="display:none;">
      <div class="fbplbadge"></div>
      <iframe src=";width=250&amp;height=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:400px;background:#ffffff;" allowtransparency="true"></iframe>
      <!-- Ends !-->
      Change nischalcreation with your Facebook Page's Name

      • Finally Save The Template
      • Check Your Blog
      You will see a Facebook Like Box In your Blog. If you have any problems regarding this, Comment and I shall Be helping you.
      Happy Blogging!!!