Tuesday, 31 December 2013

Amazing Post Navigation For Blogger

It's already 2014 here in India, so I'd like to wish you all a very happy New Year. Stay safe and don't drink to much ;)

It's still New Year's Eve in most of part of the globe, so let me end the year with a final post on this blog. And this tutorial comes from the Blogger King MBT.

It's a new stylish jQuery post navigation for your blog. It'll appear on in your Blogger posts and it'll definitely catch the attention of your readers. The pagination buttons make no sense when placed at the bottom of comments container.

Add This To Blogger:

First. we will add CSS and some necessary script to our Blogger template.

  • Go To Blogger > Template
  • Click "Edit HTML"
  • Search and add following CSS just above ]]></b:skin>

    /*################MBT Pager ##########################*/

    .mbt-pager { border-top: 2px dashed #ddd; border-bottom: 2px dashed #ddd;  margin-bottom: 10px;   overflow:hidden; padding:0px;}
    .mbt-pager li.next { float: right; padding:0px; background:none; margin:0px;}
    .mbt-pager li.next a { padding-left: 24px; }

    .mbt-pager li.previous { margin:0px -2px 0px 0px; float: left;  border-right:1px solid #ddd; padding:0px; background:none;
    .mbt-pager li.previous a { padding-right: 24px;  }

    .mbt-pager li.next:hover, .mbt-pager li.previous:hover  {background:#333333; }

    .mbt-pager li { width: 50%; display: inline; float: left; text-align: center; }
    .mbt-pager li a { position: relative; min-height: 77px; display: block; padding: 15px 46px 15px; outline:none; text-decoration:none;}

    .mbt-pager li i { color: #ccc; font-size: 18px; }

    .mbt-pager li a strong { display: block; font-size: 20px; color: #ccc; letter-spacing: 0.5px; font-weight: bold; text-transform: uppercase; font-family:oswald, sans-serif, arial; margin-bottom:10px;}

    .mbt-pager li a span { font-size: 15px; color: #666;  font-family:oswald,Helvetica, arial; margin:0px;}
    .mbt-pager li a:hover span,
    .mbt-pager li a:hover i { color: #ffffff; }
    .mbt-pager li.previous i { float:left; margin-top:15%; margin-left:5%; }
    .mbt-pager li.next i { float: right;
    margin-top: 15%;
    margin-right: 5%; }

    .mbt-pager li.next i, .mbt-pager li.previous i ,
    .mbt-pager li.next,  .mbt-pager li.previous{
    -webkit-transition-property: background color; -webkit-transition-duration: 0.4s; -webkit-transition-timing-function: ease-out;
    -moz-transition-property: background color; -moz-transition-duration: 0.4s; -moz-transition-timing-function: ease-out;
    -o-transition-property: background color; -o-transition-duration: 0.4s; -o-transition-timing-function: ease-out;
    transition-property: background color; transition-duration: 0.4s; transition-timing-function: ease-out; }

    .fa-chevron-right {padding-right:0px;}

  • Now, we will add fonts from Google Fonts & jQuery support.  Search for <head> and just below it paste the following code:

<script src="http://widcraft.googlecode.com/svn/jquery.js" type="text/javascript"></script>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

  • Now, it's for the main event. We will add our navigator to the bottom of your post. Search for data:post.body and paste following below it:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>

    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>

    <ul class='mbt-pager'>

            <li class='next'>
    <b:if cond='data:newerPageUrl'>
    <i class='fa fa-chevron-right'/><a class='newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' rel='next'/>
    <i class='fa fa-chevron-right'/><a rel='next'><strong>Next</strong> <span>You are viewing Most Recent Post</span></a>

        <li class='previous'>
    <b:if cond='data:olderPageUrl'>
    <i class='fa fa-chevron-left'/><a class='older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' rel='previous'/>
    <i class='fa fa-chevron-left'/><a rel='previous'><strong>Previous</strong> <span>You are viewing Last Post</span></a>


    <script type='text/javascript'>
        var newerLink = $('a.newer-link');
        var olderLink = $('a.older-link');
        $.get(newerLink.attr('href'), function (data) {
         newerLink.html('<strong>Next</strong> <span>'+$(data).find('.post h3.post-title').text()+'</span>');  
        $.get(olderLink.attr('href'), function (data2) {
         olderLink.html('<strong>Previous</strong> <span>'+$(data2).find('.post h3.post-title').text()+'</span>');  


Save your template, and that's it for this year!

Huge Announcement:

In 2014, BWidgets.com will only cover stuff related to Blogger & Google. All WordPress and other stuff will go into your NEW WEBSITE (details coming soon). Our new site will also feature a new Google PageRank checker among other cool tools. So stay tuned!

Friday, 13 December 2013

Add Falling Snow To Blogger

Single bells single bells single all the way! It's HOLIDAY SEASON, and we're back with another great script. It's a great script and will work everywhere, not just Blogger.

This great script comes from schillmania.com. It's just a single .js file, we don't need any jquery support for this script. Just add this script to your Blogger blog and we're done. For newbies, here's how to add:

  • Blogger > Template > Edit HTML> Add following script just above </head> tag:

<script src="https://widcraft.googlecode.com/svn/snowstorm.js"></script>

Want to customize snow fall effects? See Customizing Snowstorm for more.

Wednesday, 11 December 2013

Take Screenshot In Windows Without Any Software

Today I'm sharing a very basic, but a very useful trick with you all. Most of us bloggers have a screenshot software on their devices, but they're just a waste of space as you can easily shot your screen with one click! Here's how to do it:

Press PrntScr key and Windows captures the entire screen and copies it to its clipboard. Now start “Paint” or any other software where you can paste an image. Hold CTRL and press V and Windows pastes the screenshot, which is in the clipboard, into your document. Now just save your image!

Tuesday, 3 December 2013

How To Enable Jetpack Stats On MobilePress

Almost every WordPress admins uses WordPress' Jetpack plugin on their site to connect and use WordPress.com feature on their self-hosted WordPress. There are a lot of great modules in the Jetpack plugin, but Jetpack Stats module is my personal favorite.

MobilePress is also a well known plugin to create a mobile friendly version of your WordPress. It allows custom themes and a few other mobile friendly settings. But Jetpack's stats module only tracks the desktop version of your site, not the MobilePress version.

Don't worry about this, as I have found a way to enable Jetpack's stats module on our MobilePress. Here is how:

  • First of all, enable Jetpack stats module on your WordPress. Now visit your WordPress website as a guest (without signing in).
  • Now right click & click on View Page Source to view the source code of your current page, and search stats.wordpress.com in the source code page. You'll find a code similar to this:

<script src="http://stats.wordpress.com/e-201349.js" type="text/javascript"></script>
<script type="text/javascript">
var load_cmc = function(){linktracker_init(YOURUNIQUEBLOGID,0,2);};
if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc);
else load_cmc();

  • Copy your unique blog id from your unique Jetpack stats snippet and place it in the following code:

<script src="http://stats.wordpress.com/e-201341.js" type="text/javascript"></script><script type="text/javascript">
st_go({v:'ext',j:'1:2.5',blog:'YOURUNIQUEBLOGID',post:'<?php the_ID(); ?> ',tz:'-4'});
var load_cmc = function(){linktracker_init(YOURUNIQUEBLOGID,0,2);};
if ( typeof addLoadEvent != 'undefined' ) addLoadEvent(load_cmc);
else load_cmc();

  • Now paste the above code in the footer.php (webroot / wp-content / plugins / mobilepress / themes / default / footer.php) file of your current MobilePress theme. That's IT!!

As you can see, there's only one difference in the above two codes. In the second code, I have replaced the current post id with <?php the_ID(); ?>, otherwise your Jetpack wouldn't count views for specific page, and all your visits would be counted as Homepage views or of a specific post.

Popular Posts

Powered by Blogger.