How To Add Chat Emotions In Blogger Comments

Due to increase in the use of social media platform people have a habit of using funny Smileys along with their comments. Recently, one of our user asked us that how to add chat emotions in Blogger comments ? Today in this post, i will show you how to add chat emotions in blogger comments.

Why To Add Chat Emotions In Blogger ?

Action speaks louder than words. Similarly, chat emotions are a way to show your mood. Whenever a user leaves a comment on your site, you don't have any idea about how he is feeling. However, if the same comment has a Angry, Happy, or confused emotion image then you can easily understand that mood of the commenter. This is the reason why, a lot of commenting systems are adding emotions to there platform. And the same thing can be added to Blogger custom commenting system as well.

How To Add Chat Emotions In Blogger ?

First of all, Sign in to Blogger and then select your Blog.

After that, you need to click on Template from the left side bar and click on Edit HTML

Now, Press Ctrl+F and then you'll have search bar and then search for </ body> tag using that search bar. Once you found the </body> tag, then paste the following code above it.

"<script src='https://78f4de3676ac34c79dbc2146065980a0e371905b.googledrive.com/host/0B6AQ0cwAMPNQfnZBck56QnZHT0pSbFY1dmtWcFFwUjJWVlNMMFg3ZW1QSmJFT2l3RmVtTXc/js/netoops-whatapp-smileys-blogger-posts-comments.min.js'/><script type='text/javascript'>//bloggersmileys.init();</script> "

That's it, after adding the above link emotions can be used in comments. However, if you want to display emotions short codes to help users to use them efficiently in their comments, then continue following the tutorial.

Again in the Template, search for <div class='post-footer-line post-footer-line-3'> then look for </b:includable> tag and just above it paste the following script.

"<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='noopsmile' id='noopsmile' style='background-color:#E0F7FF;background:#eee; border-radius: 7px;width:634px; padding:10px; border:1px solid #ddd'>
<img src='https://78f4de3676ac34c79dbc2146065980a0e371905b.googledrive.com/host/0B6AQ0cwAMPNQfnZBck56QnZHT0pSbFY1dmtWcFFwUjJWVlNMMFg3ZW1QSmJFT2l3RmVtTXc/imgs/comment-section1.png'/><a style='display:none;' href='www.netoopsblog.com' >bloggerwidgets</a><div align='right' id='close' style='font: bold 13px arial;margin-top: -14px; cursor: pointer;'> Close [x] </div></div><div id='open' style='background-color:#eee; border-radius: 7px; padding:10px;width: 87px;cursor: pointer;display:none;left: 582px;position: fixed;top: 1%;z-index:999;font-weight:bold;'> Open Emoticions</div>
 </b:if> "

After that, you need to add the CSS coding of Smileys in order to make them look as appealing as Whatsapp, Facebook or any other popular social platform. Search for ]]></b:skin> tag and paste the following code it.

".post-body img.noops-smly {
  padding: 0 !important;
  margin-top: -2px !important;
} "

Afterwards, simply hit the Save Template button and start using those awesome smileys on your blog.

How To Add Voice Search Capability In Blogger

A good blog is the one which is not only saturated with good content but also it eases the difficulties of its fan by providing them alternative ways to make their work easier and quicker. Being a blogger, you should have enough potential to keep your fans in your hands and not letting them to wander for other blogs. Never letting your fan base decrease has been the greatest achievement of everyone's bright career. Be it blogging or music, your work or speech, one should never let the people, who adore them, slip out of their hands. A fully customized blog is the foremost recommended way to keep your fans stick to your blog.

Now think about how cool it would be when people will speak to search posts in your blog rather than typing long sentences. Yes ! you got it right. In this post we will be telling you how to add voice search capability in your blog. After providing you with a number of different ways to customize your blog, here we come again with a new feature that is called Voice Search.

Voice Search is a voicemail service which lets the users to know their queries by speech instead of writing, because nobody has got time for that. It will give your blog a more professional look. In this post, we would be telling you about the feature " Voice Search " its advantages and how to add it to blogger. In this post, i will show you how to add voice search capability in blogger.

Why To Add Voice Search In Blogger ?

Now the question arises why should we add voice search ? Well, here you go! it has been reported that half of the teens use voice search instead of typing the whole thing. It actually shows the need of voice search. Who does not want to do their work in the most easiest and time saving way? Voice search lets you to speak your mind and eases your hardships. Adults claim voice search to be Tech savvy. It is however assumed the longer your query is, the more chance you have got for the incorrect interpretation, although there is nothing like that. Voice search goes hand to hand and comes handy in most aspects.

How To Add Voice Search in Blogger :

Now after knowing so much about Voice Search, you might be wondering how to become its benefactor. Well, inserting voice search is a piece of cake. You do not have to wait much long not is there any need of pages long coding. All you have to do is to follow these simple steps and get your work done within minutes.

Adding a voice search is just a game of few minutes. You only need to add a line to your search input in order to avail that facility.
First login to your blogger account then go for dashboard.

• After logging in, choose Template and then go for Edit HTML
• It is then followed by a popup window. A popup window will open, press CTRL+F for windows.
• Now there will be series of different codes. You just have to add x-webkit-speech to the current search code which goes like this.

"<input class='field' id='s' name=”q” x-webkit-speech=”” x-webkit-grammar=”builtin:search” onwebkitspeechchange=”startSearch()” />"

Preview your blog and you are done adding a voice search to your blog !

Now go and add a Voice Search to your blog as well and let your fans gain some benefits from it. We hope this post have helped you in learning how to add voice search capability in blogger. Share your thoughts in the comment section below.

How To Add Whatsapp Share Button In Blogger

Blogger gives you the opportunity to promote your content via many social networks. Back in year 2009, when WhatsApp was launched, no one knew that it would challenge the graph of Facebook. In the year 2013, WhatsApp was declared as the most used social network, leaving Facebook behind. Today in this post i will tell you that how to add whatsapp share button in blogger.

Why Should You Add Whatsapp Share Button :

With the increase use of mobile phones by each passing day, it is necessary for you to make the best use of your phone by optimizing it and enabling it so share sites, writing content or anything you liked and want to share with your friends as well.

In the beginning Whatsapp was only a mobile feature but its increasing fame led to its availability on web as well. Now, just think about how beneficial it would be for you if one of your subscribers like any article on your blog and he shared it via WhatsApp, more the people view his shared article, more your website traffic will boost.

How To Add Whatsapp Share Button in Blogger :

Before adding Whatsapp share button to blogger, first we will discuss its position. It is recommended to add such traffic boosting widgets at the end of your article instead of putting them to the side bar running along the entire length of blog.

You can add Whatsapp share button with the help of following method :

Move your mouse pointer go to Template >> Edit HTML look for your old share buttons. Add the following code with your previous share buttons. Be keen with the codes.

"<!-- Whatsapp Share Buttons Start -->
<script type='text/javascript'>if(typeof wabtn4fg===&quot;undefined&quot;){wabtn4fg=1;h=document.head||document.getElementsByTagName(&quot;head&quot;)[0],s=document.createElement(&quot;script&quot;);s.type=&quot;text/javascript&quot;;s.src=&quot;https://dl.dropboxusercontent.com/u/7330191/whatsapp-sharing.js&quot;;h.appendChild(s);}</script>
<a class='wa_btn wa_btn_s' expr:data-href='data:post.url' expr:data-text='data:post.title' href='whatsapp://send' style='display:none'>Share</a>
<!-- Whatsapp Share Buttons End --> "

Preview your template and then save it.

Once above all steps are executed successfully it means that you are successful in execution of the task assigned. Now you could preview the blog and need to save the changes to the template by pressing the orange "Save Template" button.

Fully Different Style Popular Posts Widget

Create free fully different style popular posts widget on your blogger blog. This widget is for your blog to seems like attractive, its very easy to put on your blog, you just have to follow some simple steps.

Step 1 : Adding Popular Posts Widget 

Go to Blog Title > Layout > Add a Gadget > Popular Posts. After adding the widget Save the settings.

Step 2 : Adding The CSS 

Firstly go to Blog Title > Template > Edit HTML. Expand <b:skin>...</b:skin> if it is not expanded. Press Ctrl + F. Type ]]></b:skin> in search box and press enter key. Add the below given code just above ]]></b:skin>

.popular-posts li,.popular-posts .item-content{float:left;display:inline;list-style:none;}

.popular-posts .item-snippet,.popular-posts .item-title,.feed-links{display:none;}p.description,aside li{font-size:12px;}.popular-posts ul li,.item-content,.item-thumbnail{margin:0!important;padding:0!important;}.sixcol,.left-main,.right-sidebar{width:50%;}

#PopularPosts1 img {background: none repeat scroll 0 0 #FFFFFF;border: 1px solid #CCCCCC;border-radius: 110px 110px 110px 110px;padding: 4px;}

After adding the above code save the template.

Step 3 : Editing The HTML

Now search for <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>...</b:widget> You may/may not expand this code. All you have to do is replace the whole code with the code given below.

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>

<b:includable id='main'>

  <b:if cond='data:title'><h2><data:title/></h2></b:if>

  <div class='widget-content popular-posts'>

    <ul>

      <b:loop values='data:posts' var='post'>

      <li>

        <b:if cond='data:showThumbnails == &quot;false&quot;'>

          <b:if cond='data:showSnippets == &quot;false&quot;'>

            <!-- (1) No snippet/thumbnail -->

            <a expr:href='data:post.href'><data:post.title/></a>

          <b:else/>

            <!-- (2) Show only snippets -->

            <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

            <div class='item-snippet'><data:post.snippet/></div>

          </b:if>

        <b:else/>

          <b:if cond='data:showSnippets == &quot;false&quot;'>

            <!-- (3) Show only thumbnails -->

            <div class='item-thumbnail-only'>

              <b:if cond='data:post.thumbnail'>

                <div class='item-thumbnail'>

                  <a expr:href='data:post.href' target='_blank'>

                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>

                  </a>

                </div>

              </b:if>

              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

            </div>

            <div style='clear: both;'/>

          <b:else/>

            <!-- (4) Show snippets and thumbnails -->

            <div class='item-content'>

              <b:if cond='data:post.thumbnail'>

                <div class='item-thumbnail'>

                  <a expr:href='data:post.href' target='_blank'>

                    <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>

                  </a>

                </div>

              </b:if>

              <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>

              <div class='item-snippet'><data:post.snippet/></div>

            </div>

            <div style='clear: both;'/>

          </b:if>

        </b:if>

      </li>

      </b:loop>

    </ul>

    <b:include name='quickedit'/>

  </div>

</b:includable>

</b:widget>

That's it you are done now. You and your visitors can now see this different style of Popular Posts widget on your blogger blog.

 

Clean Social Subscribe Widget For Blogger

Hello dears, Today i will tell you the extremely elegant social subscribe widget which you can add in the footer of your blogger blog posts. This widget showcased Facebook, Twitter, Feedburner integration. This widget has been optimized for blog with smaller width too and looks perfect on all blogs. The widget uses Jquery, CSS and HTML for its working.

How To Put In Your Blog ?

First and foremost you need to add the code. First go to Blog Title > Template > Edit HTML. Press Ctrl + F and search for <data:post.body/> code in your template and paste the below given code just below <data:post.body/>.

Note : There maybe more than one (usually 2-4) <data:post.body/> so make sure that you have selected the right one. If the widget does not appear try changing the location of code.

<section class="newsletter">
<h2>
Tired of checking for new posts ?
</h2>
<div id="form-newsletter">
<div class="social facebook">
<a href="https://www.facebook.com/funisonline.blogspot" target="_blank">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjobeQXdWb4hNvAEMZEgo8wgNYBeLRWsC9laqpURWhFE8IolbPviUxoG6hJxGaYl79H-jotA7LRlit2HnUaOTixf1bz6ZkKvKwOzamKVEKFPR_rOoyd5AC7gKJpvaYZeLH4ASVv8R-AkmU/s1600/nl-facebook@2x.png" />
    </a>
    <iframe allowtransparency="true" class="social-box fb-like" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Ffunisonline.blogspot&amp;width=90&amp;height=21&amp;colorscheme=light&amp;layout=button_count&amp;action=like&amp;show_faces=false&amp;send=false&amp;appId=519648428126767&amp;locale=en_US" style="border: none; height: 21px; overflow: hidden; width: 90px;">
    </iframe>
  </div>
<div class="social twitter">
<a href="https://twitter.com/funisonline" target="_blank">
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNXRTZrGTpg0K0gKi_mXMgcjefxYJ2xbsMkh8-kOGJI1s6Vrrm1vOd6oBTGtpcYz2lVpwTvWSh9g1sIY5GqZ39tbLMTXTWoStEtkP6gSxBrMc5QNl-G07RKdsbAfp3ih1AGOvAnxkok9St/s1600/nl-twitter@2x.png" />
    </a>
    <iframe allowtransparency="true" class="social-box twitter-follow-button twitter-follow-button" data-twttr-rendered="true" frameborder="0" id="twitter-widget-0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1399599786.html#_=1399785529920&amp;id=twitter-widget-0&amp;lang=en&amp;screen_name=funisonline&amp;show_count=false&amp;show_screen_name=false&amp;size=m" style="height: 20px; width: 60px;" title="Twitter Follow Button">
    </iframe>
    <script>
      !function(d,s,id){
        var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;
        if(!d.getElementById(id)){
          js=d.createElement(s);
          js.id=id;
          js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);
    </script>
  </div>
<div class="newsletter-form">
<fieldset>
<h2>
       Get all posts directly in your mail.
      </h2>
<div class="fields">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=funisonline', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input class="email" id="email" name="email" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" type="text" value="Enter Your Email here.." />
          <input name="uri" type="hidden" value="FunisOnline" />
          <input name="loc" type="hidden" value="en_US" />
          <input class="subscribe" name="commit" type="submit" value="Subscribe" />
        </form>
</div>
</fieldset>
</div>
</div>
</section>
<style>
.newsletter{text-align:center;margin:20px 0;}
.newsletter .social.facebook{background:none repeat scroll 0 0 #3661A0}
.newsletter .social{padding-top:20%;width:20%;float:left;position:relative}
.newsletter #form-newsletter{display:block;width:90%;max-width:900px;min-width:500px;margin:0 auto}
.newsletter:before,.newsletter:after{content:&quot; &quot;;display:table}
.newsletter:after{clear:both}
.newsletter h2{color:#3B434D;font-family:Open Sans,sans-serif;font-size:1.5em;font-weight:300;width:65%;margin:1em auto}
.newsletter .social.twitter{background:none repeat scroll 0 0 #00ACED}
.newsletter .social a{display:block;left:30%;position:absolute;top:20%;width:40%}
.newsletter .social a img{max-width:100%;width:100%;transition: transform 0.3s ease-out 0s}
.newsletter .social a:hover img{transform:scale(1.1)}
.newsletter .social .social-box{bottom:20px;left:50%;position:absolute}
.newsletter .social .social-box.fb-like{margin-left:-45px}
.newsletter .social .social-box.twitter-follow-button{margin-left:-30px}
.newsletter .newsletter-form{background:none repeat scroll 0 0 #1E293B;float:left;padding-top:20%;position:relative;width:60%}
.newsletter .newsletter-form fieldset{height:38px;left:10%;position:absolute;top:10%;width:80%;border:none}
.newsletter .newsletter-form fieldset h2{color:#FFF;font-family:Open Sans, sans-serif;font-weight:300;width:100%;margin:0 0 1.5625em;font-size:16px;}
.newsletter .newsletter-form fieldset .fields{position:relative}
.fields .email{border-radius:10px 0 0 10px;outline:0 none;width:84%;border:0;left:0;position:absolute;padding:10.5px}
.fields .subscribe{background:none repeat scroll 0 0 #F0553B;border:medium none;border-radius:0 10px 10px 0;color:#FFF;right:0;position:absolute;padding:10px;transition:all ease 0.6s;}
.fields .subscribe:hover {background: none repeat scroll 0 0 #161616;}
</style>
<script type="text/JavaScript">
fontsize = function () {
    var abtSubs = $(".newsletter #form-newsletter").width() * 0.025; // 10% of container width
    $(".newsletter .newsletter-form fieldset h2").css('font-size', abtSubs);
};
$(window).resize(fontsize);
$(document).ready(fontsize);
</script>

Editing The Code :

After adding the above given code, you need to make some necessary changes for changing the user ID's. In the above code i have made 6 words in bold and blue, you need to change them as required. The first two are for Facebook Username, the third and fourth for Twitter handle and the last two are for Feedburner ID. After making these changes you just need to save your template.

How To Add A Thumbnail Photos Gallery In Blogger

Many users want to show their photos in thumbnails, Its just for to show their blog more attractive. So i realize that i should post about that how we can add a thumbnail photo gallery in Blogger. With the help of CSS we can make the <img> element to display on same position with rest of with thumbs and style the thumbnails as small blocks with a defined height/width. The script will add a click-event for each <li> object that changes its child's <img> visibility and will assign an "Active" class name to the <li> .

How To Add Image Gallery With Thumbnails To Blogger :

Step 1. Go to Dashboard > Template > Edit HTML

Step 2. Click anywhere in the code and press CTRL + F to open search box for code. Type the following tag in the search box and press Enter.

</head>

Step 3. Copy the following code and paste it above </head> tag.

<style type='text/css'>
#image-gallery { display: none; }
#jquery-gallery {padding:0;margin:0;list-style: none; width: 200px; }
#jquery-gallery li {background-size: 100%;-webkit-background-size: cover;-moz-background-size: cover; -o-background-size: cover;background-size: cover;margin-right: 10px; width: 80px; height: 80px; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 10px; margin-bottom: 10px; opacity: .5;filter:alpha(opacity=50); float: left; display: block; }
#jquery-gallery li img { position: absolute; top: 0px; left: 200px; display: none; }
#jquery-gallery li.active img { display: block; width:370px; border: 3px solid #fff; outline: 1px solid #E3E3E3; }
#jquery-gallery li.active, #jquery-gallery li:hover { outline-color: #bbb; opacity: .99;filter:alpha(opacity=99);}
#gallery-caption { position: absolute; right: 50px;color: #000;background: #FFFFFF;font-weight: bold; font-size: 16px; top: 0px;}
</style>

Step 4. Now above the same tag </head> paste this script.

 <script type='text/javascript'>
//<![CDATA[
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('image-gallery')) document.getElementById('image-gallery').id = 'jquery-gallery';
var li = document.getElementById('jquery-gallery').getElementsByTagName('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jquery-gallery').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
document.getElementById('gallery-caption').innerHTML = this.title;
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});
//]]>
</script>

Step 5. Now simply Save Template

Step 6. Now go to the Layout section Add a Gadget , Select Html/Javascript

Step 7. Now copy and below code and paste in into Html/Javascript

<div style="position:relative;">
<ul id="image-gallery">
<li><img src="IMAGE-URL1" /></li>
<li><img src="IMAGE-URL2" /></li>
<li><img src="IMAGE-URL3" /></li>
<li><img src="IMAGE-URL4" /></li>
<li><img src="IMAGE-URL5" /></li>
</ul>
</div>

Save you widget and Save your settings :)

How To Add A Responsive Mobile Drop Down Menu In Blogger

How To Add A Responsive Drop Down Menu In Blogger ? This is the question which is searched in Google many times, So today i will tell you that how we can add a responsive menu in Blogger. You just have to follow these simple and easy steps.

Step 1. Go to Blogger Dashboard > Layout > Add Widget , and paste the following code in Html/Javascript.

<!---Menu--> <nav id='nav-main'>

    <ul>

        <li><a href=''>Home</a></li>

        <li><a href=''>About</a></li>

        <li><a href=''>Gallery</a></li>

        <li><a href=''>Tutorials</a></li>

        <li><a href=''>Contact</a></li>

    </ul>

</nav>

<div id='nav-trigger'>

    <span>Menu <i class='fa fa-list'/></span>

</div>

<nav id='nav-mobile'/>

</div>

After pasting the code click on Save button to save the code.

Step 2. Go to Template > Edit HTML , Click anywhere in code and press CTRL + F to open search box, type or paste this code in search box and press enter.

]]></b:skin> 

Step 3. Paste the following code below ]]></b:skin>

#nav-trigger {

        display: none;

        text-align: center;

    }

    #nav-trigger span {

        display: block;

        background-color: #279CEB;

        cursor: pointer;

        text-transform: uppercase;

        padding: 0 25px;

        color: #EEE;

        line-height: 67px;

    }

    nav#nav-mobile {

        margin: 0px;

    }

    nav {

        margin-bottom: 30px;

    }

    nav#nav-main {

        background-color: #279CEB;

        margin: 0px;

        float: left;

    }

    nav#nav-main ul {

        list-style-type: none;

        margin: 0;

        padding: 0;

        text-align: center;

    }

    nav#nav-main li {

        display: inline-block;

        float: left;

        ont-family: 'Open Sans', sans-serif;

    }

    nav#nav-main li:last-child {

        border-right: none;

    }

    nav#nav-main a {

        padding: 0 25px;

        color: #EEE;

        line-height: 67px;

        display: block;

    }

    nav#nav-main a:hover {

        background-color: #3AB0FF;

        text-decoration: none;

        color: #fff;

    }

    nav#nav-mobile {

        position: relatifve;

        display: none;

    }

    nav#nav-mobile ul {

        display: none;

        list-style-type: none;

        position: absolute;

        left: 0;

        right: 0;

        margin-left: auto;

        margin-right: auto;

        text-align: center;

        background-color: #ddf0f9;

        z-index: 10;

        padding: 0px;

        border-bottom: solid 1px #cc0028;

    }

    nav#nav-mobile li:last-child {

    border-bottom: none;

    }

    nav#nav-mobile a {

    display: block;

    color: #29a7e1;

    padding: 10px 30px;

    text-decoration: none;

    border-bottom: 1px solid #00aeef;

    }

    nav#nav-mobile a:hover {

    background-color: #e6002d;

    color: #fff;

    }

/* =Media Queries

    ---------------------------------------------------- */

    @media all and (max-width: 900px) {

    #nav-trigger {

        display: block;

    }

    nav#nav-main {

        display: none;

    }

    nav#nav-mobile {

        display: block;

    }

    }

 Step 4. Search </head> tag in by typing or pasting this tag in search box and paste the following code just above the </head> tag.

 

<script type='text/javascript'>

    //<![CDATA[

    $(document).ready(function(){

        $("#nav-mobile").html($("#nav-main").html());

        $("#nav-trigger span").click(function(){

            if ($("nav#nav-mobile ul").hasClass("expanded")) {

                $("nav#nav-mobile ul.expanded").removeClass("expanded").slideUp(250);

                $(this).removeClass("open");

            } else {

                $("nav#nav-mobile ul").addClass("expanded").slideDown(250);

                $(this).addClass("open");

            }

        });

    });

    //]]>

    </script>

Now click on Save Template button to save changes.

How To Change User's Profile Picture Size In Blogger Comment

Sometimes we get many headache about the difficulties in blogger that how we can solve it, But every problem has the solution so don't worry. Today i will tell you that how we can change the user's profile picture size in Blogger comment.

Step 1. Go to Dashboard - Template > Edit HTML

Click anywhere in the code and press CTRL+F to open search box.

Step 2. Type or paste this tag inside the search box and press enter.

]]></b:skin>

Step 3. Depending on which comment system you use (with reply/no reply) , copy and paste on of the following code just above it:

(Works in Blogger threaded comment system)

 .comments .avatar-image-container{
background-color: rgb(34, 34, 34);
border:1px solid #ccc;
margin: 0px 10px 0px 0px;
padding: 0px 0px 0px 0px;
width: 64px;
max-height: 64px;
}
.comments .avatar-image-container img{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
max-width: 64px;
height: 64px;
}

(For old Blogger commenting system)

 .avatar-image-container{border:1px solid #d6d6d6;margin-left: -30px;-moz-border-radius: 4px;background:#fff;height:70px;min-height: 70px;width:70px;min-width:70px;}.avatar-image-container img {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqNQo5ZGwYSbf49LLg4QPLOJ0RFir-KvVI0HMzMGyRxg2hk6FfdziNCqqfxUmc5RTsnWIzh7R4TMORbSfrU-LkV8midPQJV7-_wH-Bj4AZvF2zhTTZJRGVfOksGbfn6YvvkmMyJ_x6xKo/s200/anonymous.jpg);background-repeat: no-repeat;background-position: center;background-size: 100%;width:70px;min-width:70px;height:70px;min-height:70px;

} 

Step 4. Click on Save Template button to apply changes.

jQuery Image Slider Widget For Blogger

In this tutorial you will learn that how can we add a jQuery image slider to our website or blog. The process is very easy, the slider's main point of view is to interact visitors and for the beauty of your blog/site. You can put it on a specific page or on the homepage.

How to add the Orbit Image Slider for Blogger ?

Step 1. From your Blog Dashboard, go to Template > Edit HTML > click anywhere inside the code area and press the CTRL + F keys to open the blogger search box. Paste or type the below tag in search box and press enter to find it.

</head>

Step 2. Just above </head> add the following script.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

<!--[if IE]>

<style type="text/css">

.timer { display: none !important; }

div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }

</style>

<![endif]-->

<script type='text/javascript'>

$(window).load(function() {

$(&#39;#featured&#39;).orbit({

advanceSpeed: 5000,

&#39;bullets&#39;: true,

&#39;timer&#39; : true,

&#39;animation&#39; : &#39;horizontal-slide&#39;

});

});

</script>

<script type='text/javascript'>

//<![CDATA[

/*

* jQuery Orbit Plugin 1.1

* www.ZURB.com/playground

* Copyright 2010, ZURB

* Free to use under the MIT license.

* http://www.opensource.org/licenses/mit-license.php

*/

(function(e){e.fn.orbit=function(a){a=e.extend({animation:"fade",animationSpeed:800,advanceSpeed:4E3,startClockOnMouseOut:true,startClockOnMouseOutAfter:3E3,directionalNav:true,captions:true,captionAnimationSpeed:800,timer:false,bullets:false},a);return this.each(function(){function m(c){function g(){f.eq(h).css({"z-index":1});s=false}var h=b,k=c;if(h==k)return false;if(!s){s=true;if(c=="next"){b++;if(b==n)b=0}else if(c=="prev"){b--;if(b<0)b=n-1}else{b=c;if(h<b)k="next";else if(h>b)k="prev"}a.bullets&&

x();if(a.animation=="fade"){f.eq(h).css({"z-index":2});f.eq(b).css({opacity:0,"z-index":3}).animate({opacity:1},a.animationSpeed,g);a.captions&&o()}if(a.animation=="horizontal-slide"){f.eq(h).css({"z-index":2});k=="next"&&f.eq(b).css({left:t,"z-index":3}).animate({left:0},a.animationSpeed,g);k=="prev"&&f.eq(b).css({left:-t,"z-index":3}).animate({left:0},a.animationSpeed,g);a.captions&&o()}if(a.animation=="vertical-slide"){f.eq(h).css({"z-index":2});k=="prev"&&f.eq(b).css({top:u,"z-index":3}).animate({top:0},

a.animationSpeed,g);k=="next"&&f.eq(b).css({top:-u,"z-index":3}).animate({top:0},a.animationSpeed,g);a.captions&&o()}}}var b=0,n=0,t,u,s,d=e(this).addClass("orbit"),f=d.find("img, a img");f.each(function(){var c=e(this),g=c.width();c=c.height();d.width(g);t=d.width();d.height(c);u=d.height();n++});f.eq(b).css({"z-index":3});if(a.timer){d.append('<div class="timer"><span class="mask"><span class="rotator"></span></span><span class="pause"></span></div>');var j=e("div.timer"),p;if(j.length!=0){var C=

a.advanceSpeed/180,v=e("div.timer span.rotator"),y=e("div.timer span.mask"),z=e("div.timer span.pause"),l=0,A,w=function(){p=true;z.removeClass("active");A=setInterval(function(){var c="rotate("+l+"deg)";l+=2;v.css({"-webkit-transform":c,"-moz-transform":c,"-o-transform":c});if(l>180){v.addClass("move");y.addClass("move")}if(l>360){v.removeClass("move");y.removeClass("move");l=0;m("next")}},C)},q=function(){p=false;clearInterval(A);z.addClass("active")};w();j.click(function(){p?q():w()});if(a.startClockOnMouseOut){var B;

d.mouseleave(function(){B=setTimeout(function(){p||w()},a.startClockOnMouseOutAfter)});d.mouseenter(function(){clearTimeout(B)})}}}if(a.captions){d.append('<div class="caption"><span class="orbit-caption"></span></div>');var r=d.children("div.caption").children("span").addClass("orbit-caption").show(),o=function(){var c=f.eq(b).attr("rel"),g=e("#"+c).html(),h=r.height()+20;r.attr("id","#"+c).html(g);g?r.parent().stop().animate({bottom:0},a.captionAnimationSpeed):r.parent().stop().animate({bottom:-h},

a.captionAnimationSpeed)};o()}if(a.directionalNav){d.append('<div class="slider-nav"><span class="right">Right</span><span class="left">Left</span></div>');j=d.children("div.slider-nav").children("span.left");var D=d.children("div.slider-nav").children("span.right");j.click(function(){a.timer&&q();m("prev")});D.click(function(){a.timer&&q();m("next")})}if(a.bullets){d.append('<ul class="orbit-bullets"></ul>');var E=e("ul.orbit-bullets");for(i=0;i<n;i++){j=e("<li>"+i+"</li>");e("ul.orbit-bullets").append(j);

j.data("index",i);j.click(function(){a.timer&&q();m(e(this).data("index"))})}var x=function(){E.children("li").removeClass("active").eq(b).addClass("active")};x()}})}})(jQuery);

//]]>

</script>

Step 3. Now its time to add the CSS. Find (CTRL +F) this tag:

]]></b:skin>

Step 4. Just above ]]></b:skin> add this code:

 #featured {height: 1px; width: 1px; overflow: hidden;}
div.orbit {
width: 1px;
height: 1px;
position: relative;
overflow: hidden;
}

div.orbit img {
position: absolute;
top: 0;
left: 0;
}
div.orbit a img {border: none;}

div.timer {
width: 40px;
height: 40px;
overflow: hidden;
position: absolute;
top: 10px;
right:10px;
opacity: .6;
cursor: pointer;
z-index: 1001;
}

span.rotator {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: -20px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjeAUeJP2W1T74SJLCdFRMRpNoNJEmtjYG1lIQx1Fl1PJug4yewXZ-IOJ5e42n56X9R6MUuAHGKNrw4gsSSbiB3A1Di9iaRRABRSf6Y6NUhKW3tooMIIJMPNzotYDpq-Ik3InW_BxCmF9H/s1600/timer-icon.png);
background-repeat: no-repeat;
z-index: 3;
}

span.mask {
display: block;
width: 20px;
height: 40px;
position: absolute;
top: 0;
right: 0;
z-index: 2;
overflow: hidden;
}

span.rotator.move {left: 0;}
span.mask.move {
width: 40px;
left: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYyJFOnUcjl86egX_4jnizTgis4HHuvS_tPjc0H-ivPBqtTtn7y4p80rOQTGnj6njZ5KxZfLdiAJMBrXV_KAxIEP0WsVnow_iUuTNm-1oanq0hkko3lSBSesKa1CD5wyUOprvFw6wm8iyS/s1600/timer-right.png);
background-repeat: repeat;
background-position: 0px 0px;
}

span.pause {
display: block;
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB3N7kCHFhk3se2m7QMW6C2JyAYtUfqgZJ64EgmojqKraP3buOI59HuErvUYiKi6s5t4WguXmX0rr770zbTgG9BnWTdjfCtfPEwqBvJzS4QtW47eQESHvV394nR1b9T_qUfWWvZoqYjzqq/s1600/pause-icon.png);
background-repeat: no-repeat;
z-index: 4;
opacity: 0;
}

div.timer:hover span.pause,
span.pause.active,
div.timer:hover span.pause.active { opacity: 1; }

div.caption {
background: #000;
background: rgba(0,0,0,.6);
width: 100%;
z-index: 1000;
position: absolute;
bottom:-100px;
color: #fff;
padding: 8px 0;
text-align: center;
}

div.caption span {
padding: 0 10px;
font-size: 14px;
text-shadow: 0px 1px 0px rgba(0,0,0,.8);
margin: 0;
}
.orbit-caption { display: none; }

div.orbit:hover div.slider-nav { display: block; }
div.slider-nav { display: none; }
div.slider-nav span {
width: 33px;
height: 33px;
text-indent: -9999px;
position: absolute;
z-index: 1000;
top: 43%;
cursor: pointer;
}

div.slider-nav span.right {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF8xfp5hts8PB9bBzCrjvJXWmivPqNU67Fhqp-qS48KDUs_zR2Am-3YbA2TDW1sc7x_ZU1X3-K9-15h0WLtN0OT_PQTbpIHVxbmNXnpXNaIPbpSBA-a_GksguO4wC0FW-oUJ7jqDOX9niE/s1600/arrow-right.png);
right: 10px;
}
div.slider-nav span.left {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLLbiGSDHCNtlzVw9dHG4rjm9TczyRTdJh0AwbxQ9eSHEcQwYanoflZxRas2SqV-Rx63kzjzt_ssJXY8tW8ga-9QXislXYK-MdWR4xBnCFmxhPDWI46oLzaEMR4pMgCxBhkgqGONC2XTQc/s1600/arrow-left.png);
left: 10px;
}

.orbit-bullets {
position: absolute;
z-index: 1000;
list-style: none;
top: 10px;
left: 7px;
margin: 0;
padding: 0;
}

.orbit-bullets li {
float: left;
margin-left: 5px;
cursor: pointer;
color: #999;
text-indent: -9999px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy0ecTxlLa5QpL84JdXzHDMfDdfvOzpUirBokM4rNmM1dHMGHqhV_qkFlHMPjxnF60NNhfaMjFChi7hGNQ0jxjLDBqMOBR4lwD7T6OgcV4L22P8SNc5Ea2Kg_ugbV6VltDfkwguxOyFkeW/s1600/bullets.png);
background-repeat: no-repeat;
background-position: 0 0;
width: 7px;
height: 7px;
overflow: hidden;
}
.orbit-bullets li.active { color: #222; background-position: -7px 0; }

Step 5. Click on the Save Template button to save the changes.