All Blogging Tips

Everything About Blogging

How To Easily Create Animated Favicons And Add It To Blogger

By 3 Comments

Favicon Demo

Favicon is actually the icon that appears next to your Website URL in the browser address bar. A favicon is usually your blog logo. There are many services which only provide you facility to add image to favicons only. But now you can Create Animated Favicons which will allow you to add image with animating text. I will show you How To Easily Create Animated Favicons And Add It To Blogger.

Steps To Easily Create Animated Favicons?

  • Goto FaviconGenerator
  • And Just goto Bottom of the page. Upload your image which you want to use for favicon and type desire text which you want to make animating You will find all the help at favicongenerator

Favicon Generator Screenshot

  • Hit the Generate Favicon Button and you will be taken to this page,

download animated favicon

Here you will see many images just right click the animated one and save it to your computer.

How To Add Animated Favicons In Blogger

    • Go To Blogger > Design > Edit HTML
    • And Search For <b:skin>and just above it paste the code below,
<link href='ADD YOUR FAVICON LINK HERE' rel='icon" type='image/gif'/>
  • Replace ADD YOUR FAVICON LINK HERE with the image URL of the favicon you saved in Picasa album.
  • Save your template and you are done!

View your blog to see it in action on the address bar and tabs. Hope you liked it! Questions are always welcomed here:>>

Snow Falling Effect With Bells Widget For Your Blog

By 4 Comments

In this post I have a very cool Snow Falling Effect With Bells widget. You can use to super charge your blog over the Christmas. With just a small piece of code you have Snow Flakes gently falling down your blog. Adding Snow Falling Effect With Bells is very simple and I’m sure it won’t disrupt the readers. Before you add the Snow to your blog you can check out the demo.

LIVE DEMO

Adding Snow Falling Effect With Bells Widget

Adding To Blogger

  1. Go to Design > Page Elements.
  2. Click Add A Gadget.
  3. In Add A Gadget window, select HTML/Javascript .
  4. Copy the code below and paste it inside the content box.
  5. Save the gadget.
  6. Drag the gadget and reposition it under Blog Posts gadget.
  7. Click Save button (top right hand corner).

Adding To WordPress

  1. Go to Dashboard > Appearance > Widgets > Available Widgets.
  2. Drag Text widget into a sidebar.
  3. Paste in the code.
  4. Save.

If below code is not working,  please download this code

<script type="text/javascript">

            //Configure below to change URL path to the snow image
      var snowsrc="http://3.bp.blogspot.com/-0l_0DkjlekY/Tt-6P7Vam3I/AAAAAAAAFjI/ht10gKN3-Ys/s400/falling-snow.png"
      // Configure below to change number of snow to render
      var no = 15;
      // Configure whether snow should disappear after x seconds (0=never):
      var hidesnowtime = 0;
      // Configure how much snow should drop down before fading ("windowheight" or "pageheight")
      var snowdistance = "pageheight";

    ///////////Stop Config//////////////////////////////////

      var ie4up = (document.all) ? 1 : 0;
      var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

        function iecompattest(){
        return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
        }

      var dx, xp, yp;    // coordinate and position variables
      var am, stx, sty;  // amplitude and step variables
      var i, doc_width = 800, doc_height = 600;

      if (ns6up) {
        doc_width = self.innerWidth;
        doc_height = self.innerHeight;
      } else if (ie4up) {
        doc_width = iecompattest().clientWidth;
        doc_height = iecompattest().clientHeight;
      }

      dx = new Array();
      xp = new Array();
      yp = new Array();
      am = new Array();
      stx = new Array();
      sty = new Array();
      snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "   http://3.bp.blogspot.com/-0l_0DkjlekY/Tt-6P7Vam3I/AAAAAAAAFjI/ht10gKN3-Ys/s400/falling-snow.png" : snowsrc
      for (i = 0; i < no;    i) { 
        dx[i] = 0;                        // set coordinate variables
        xp[i] = Math.random()*(doc_width-50);  // set position variables
        yp[i] = Math.random()*doc_height;
        am[i] = Math.random()*20;         // set amplitude variables
        stx[i] = 0.02   Math.random()/10; // set step variables
        sty[i] = 0.7   Math.random();     // set step variables
            if (ie4up||ns6up) {
          if (i == 0) {
            document.write("<div id=\"dot"  i  "\" style=\"POSITION: absolute; Z-INDEX: "  i  "; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='" snowsrc "' border=\"0\"><\/a><\/div>");
          } else {
            document.write("<div id=\"dot"  i  "\" style=\"POSITION: absolute; Z-INDEX: "  i  "; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='" snowsrc "' border=\"0\"><\/div>");
          }
        }
      }

      function snowIE_NS6() {  // IE and NS6 main animation function
        doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
            doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
        for (i = 0; i < no;    i) {  // iterate for every dot
          yp[i]  = sty[i];
          if (yp[i] > doc_height-50) {
            xp[i] = Math.random()*(doc_width-am[i]-30);
            yp[i] = 0;
            stx[i] = 0.02   Math.random()/10;
            sty[i] = 0.7   Math.random();
          }
          dx[i]  = stx[i];
          document.getElementById("dot" i).style.top=yp[i] "px";
          document.getElementById("dot" i).style.left=xp[i]   am[i]*Math.sin(dx[i]) "px"; 
        }
        snowtimer=setTimeout("snowIE_NS6()", 10);
      }

        function hidesnow(){
            if (window.snowtimer) clearTimeout(snowtimer)
            for (i=0; i<no; i  ) document.getElementById("dot" i).style.visibility="hidden"
        }

    if (ie4up||ns6up){
        snowIE_NS6();
            if (hidesnowtime>0)
            setTimeout("hidesnow()", hidesnowtime*1000)
            }

    </script>

<br /> <img src="http://2.bp.blogspot.com/_u4gySN2ZgqE/TQ-G1GVAD3I/AAAAAAAABtw/doqIyU32ngs/s1600/christmas-bells-icon.png" style="position:fixed; top: 0px;left:0px;border:none;"/><img class="aneesh" src="http://3.bp.blogspot.com/_u4gySN2ZgqE/TQ-SkcTSrTI/AAAAAAAABt4/Qqpj5MR3tU8/s1600/christmas-bells-icon-right.png" style="position:fixed; top: 0px;right:0px;border:none;"/><br />

<script> if (typeof bp_onload_queue == 'undefined') var bp_onload_queue = [];      if (typeof bp_dom_loaded == 'boolean') bp_dom_loaded = false;     else var bp_dom_loaded = false;      if (typeof bp_async_loader != 'function') {         function bp_async_loader(src, callback, id) {              var script = document.createElement('script');             script.type = "text/javascript";             script.async = true;             script.src = src;             script.id = id;             /*Check if script previously loaded.*/             var previous_script = document.getElementById(id);             if (previous_script) if (previous_script.readyState == "loaded" || previous_script.readyState == "complete") {                 callback();                 return;             } else {                  script = previous_script;             }             if (script.onload != null) previous_callback = script.onload;             script.onload = script.onreadystatechange = function() {                 var newcallback;                 if (previous_script && previous_callback) newcallback = function() {                     previous_callback();                     callback();                 };                 else newcallback = callback;                 if (bp_dom_loaded) {                     newcallback();                 } else bp_onload_queue.push(newcallback);                 /* clean up for IE and Opera*/                 script.onload = null;                 script.onreadystatechange = null;             };             var head = document.getElementsByTagName('head')[0];             if (!previous_script) head.appendChild(script);          }     }      if (typeof bp_domLoaded != 'function') function bp_domLoaded(callback) {         bp_dom_loaded = true;         var len = bp_onload_queue.length;         for (var i = 0; i < len; i  ) {             bp_onload_queue[i]();         }     }     /*JS gets loaded here */      bp_domLoaded();      /*Loading jQuery Asynchronously */     bp_async_loader("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", function() {          bp_async_loader("http://blogergadgets.googlecode.com/svn/trunk/snowfall.min.jquery.js", function() {}, "bp-snow");      }, "jQueryjs"); </script> <a href="https://allbloggingtips.com/2011/12/22/snow-falling-effect-with-bells-widget-for-your-blog/" target="_blank"><img src="https://lh5.googleusercontent.com/-yPvmBp_p424/TuYsnjeIzaI/AAAAAAAACNY/KrkMl02fzh0/I/snowfall-widget-for-blogger.png" alt="Snowfall Widget for Blogger" /></a>

 

Hope you will like this widget. DO comment if you want to get in touch with me or facing problem with this Snow Falling Effect With Bells!

How To Add Stylish Breadcrumbs Navigation In Blogger

By 9 Comments

Breadcrumbs or breadcrumb is a navigation used in user interface, typically it appear horizontally across the top of a web page , after navigation, usually below title bars or headers in blog area. You can also find example of breadcrumbs in my blog after navigation. See a screenshot to know what actually are a breadcrumbs.

How To Add Stylish Breadcrumbs Navigation In Blogger

I suggest every Bloggers who are using Blogspot Platform to add breadcrumbs. This help people to easily know about your post and also it helps you in SEO purpose.

Typical breadcrumbs look like this:

Home page > Section page > Subsection page or Home page >> Section page >> Subsection page.

Backup You Template Before we add Breadcrumbs in Blogger

After backing up blogger template Follow below given simple steps on How To Add Stylish Breadcrumbs Navigation In Blogger

Steps to Add Breadcrumbs in Blogger

  • Login to Blogger Dashboard > Design > Edit Html
  • Find Below code

<b:include data='top' name='status-message'/>

and replace it wit this code:

<b:include data=’top’ name=’status-message’/>

<b:include data='posts' name='breadcrumb'/>

#Step 3. Now Find this code:

<b:includable id='main' var='top'>e

 

  • and replace it with below code
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumb on home page -->
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == "true"'> »
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
» Unlabelled
</b:if>
» <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == ""'>
<a expr:href='data:blog.homepageUrl'>Home</a> » All posts
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
<b:includable id='main' var='top'>

Making It Cool with CSS

To add cool effect to Breadcrumbs follow below steps.

  • Find this code
]]></b:skin>

and replace it with

/* Breadcrumbs Css info @ https://allbloggingtips.com */
.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:2px solid #e6e4e3;}
]]></b:skin>
To add Hover Effect
  • Insert below code after adding code in above step
.breadcrumbs :hover{
border-bottom:2px dashed #e6e4e3;
background:#f1f1f1;
}
If you are using multiple labels for one post then this breadcrumbs will show only the last label you have added, so put label at end in Labels for this post: section for which you want to show in your breadcrumb.

That’s All. If you are using WordPress Theme than i will publish a article on How to Add Breadcrumbs in WordPress themes. Till keep visiting. Got any problem feel free to comment!

Add Post Views Counter In WordPress Posts Without Plugin

By 24 Comments

Add Post Views Counter In WordPress Posts Without PluginDid you ever want to know how many times a particular post has been viewed? I will show you How To Add Post Views Counter In WordPress Posts Without Plugin. This is very useful to track post views this will help you in future to write more interesting, quality content articles which can attract more visitors. Just add the following snippets to your template files and you are ready to go for Post Views Counter In WordPress!

I am not responsible if you done any mistake. So Check this video to Adding Code Though File Manager

 

Step 1: Adding Post Views Counter Code in Functions.PHP
  • Go to Appearance > EditorHow to Edit Functions.PHP
  • Under Editor section Select Functions.php in the list of php files on the right of your screen (or just see image below)
  • Paste Below code in functions.php
// Display or Count how many times a post has been viewed. // id = the post id and action = display or count function arixWp_PostViews( $id, $action ) { $axCountMeta = 'ax_post_views'; // Your Custom field that stores the views $axCount = get_post_meta($id, $axCountMeta, true); if ( $axCount == '' ) { if ( $action == 'count' ) { $axCount = 0; } delete_post_meta( $id, $axCountMeta ); add_post_meta( $id, $axCountMeta, 0 ); if ( $action == 'display' ) { echo "0 Views"; } } else { if ( $action == 'count' ) { $axCount++; update_post_meta( $id, $axCountMeta, $axCount ); } else { echo $axCount . ' Views'; } } }
  • After adding above code Click Update File
Step 2: Showing Posts Views Counter in WordPress Posts
  •  Select Single.PHP from right of your screen (See image below)

Single.PHP Screenshot

  • Now Paste below code just after High Lighted Section in above image.
 
    <?php echo arixWp_PostViews( get_the_ID(), 'count' ); ?>

To display the count outside the loop use this:

  <?php echo arixWp_PostViews( get_the_ID(), 'display' ); ?>

If you want them to show in the loop use this instead.

 <?php echo arixWp_PostViews( $post->ID, 'display' ); ?>
  • Finally Click on Update File and You had done.

Check your blog post to check whether counter is working or not!. Feel Free to Ask any question about this Post Views Counter In WordPress

<credit>

How to Show Blog Stats In WordPress Sidebar Widget

By 1 Comment

This Blog Stats Widget displays the total number of views to your blog (not including your own views). It’s a nice way of showing off how popular your blog is.

Here’s an example what it looks like when it’s activated on a blog sidebar:

Here is how to Show Blog Stats In WordPress. Once you add the widget to your sidebar from Appearance -> Widgets, you’ll see that the widget settings look like this:

Title – Set the title to use above the blog stats count. (i.e. Stats, Traffic Love)

123,45 – Set the word(s) to use along with the number. “Hits” and “views” are popular choices, but feel free to get creative and make up your own.

Video

Hope this post How to Show Blog Stats In WordPress Sidebar Widget will help you. Feel free to ask any question in comment section about Show Blog Stats In WordPress

Source: WordPress Support