Widget To Show Total Number of Post and Comment In Blogger

Number of post and comments are the 2 things which tells the success of any blog. More comment your blog gets, more the trust builds among readers and the rank and traffic improves. Also, a successful blogger writes new post consistently. So it also have a good number of articles.

In this post, I am going to tell you about a widget by which you can show total number of posts and comments on your blog to you audience. If you have a good number of post and comments, then it will create a good impression about your blog towards new readers.

Widget To Show Total Number of Post and Comment In Your Blog

Step 1 : Open your blogger's dashboard. Go to Layout>>Add a widget >> HTML/Javascript.

Step 2 : Copy and paste the following below code into it.

             <script>function mbhTotalCount(json) {document.write(parseInt(json.feed.openSearch$totalResults.$t,10));}</script><div style="font: 25px Georgia;">

Total Published Posts: <script src="http://www.myonlinedestination.com/feeds/posts/default?alt=json-in-script&amp;callback=mbhTotalCount"></script></div>
<div style="font: 25px Georgia;">
Total Number Of Comments: <script src="http://www.myonlinedestination.com/feeds/comments/default?alt=json-in-script&amp;callback=mbhTotalCount"></script></div>

Step 3 : Replace myonlinedestination with your blog's url.

Step 4 : Save the widget. 

That's it. You have successfully added that widget to your blog. Now, your blog will show total number of posts and comments till date to your readers.

I hope this small guide helped you in adding this widget on your blog. If you have queries, then feel free to ask in the comments below or you can email me also.

Thanks for reading.

Read More

How To Place AdSense Ad Just Below The First Paragrapgh ?

AdSense is the great source of earning money from a blog but there seems to be a major impact on earning due to the placement of ads on different places in the blog. Bloggers keeps on trying different techniques to get more clicks on their ads. You can try many places like headers, inside blog post, bottom of the post, sidebars etc. One of the best place to get more clicks is to put AdSense ad below the first paragraph of your post.

It is not possible to directly put AdSense ad below the first paragraph. You have to make certain changes to avail this feature in your blog. In this post, I will guide you step by step to use this thing on your blog too. Just follow the below steps carefully.

Place AdSense Ad Just Below The First Paragraph

Step 1 : Open your blogger dashbaord. Go to Template  and edit the template in HTML form.

Step 2 : Search for <data:post.body/> using Ctrl+F. You may find it more than once, just stick to the second occurrence.

Step 3 : Now, replace it with the following given code.

             <div id='target'><data:post.body/></div>

Step 4 : Copy and paste the following code just below it.

              <script type='text/javascript'>

function insertAfter(addition,target) {

var parent = target.parentNode;

if (parent.lastChild == target) {

parent.appendChild(addition);

} else {

parent.insertBefore(addition,target.nextSibling);

}

}

var adscont = document.getElementById(&quot;content&quot;);

var target = document.getElementById(&quot;target&quot;);

var linebreak = target.getElementsByTagName(&quot;br&quot;);

if (linebreak.length &gt; 0){

insertAfter(adscont,linebreak[0]);

Step 5 : Add this code above the code given in step 3.

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

<div id='content'>

Adsense code placing center

</div>

</b:if> 

Step 6 : Replace the red text with your AdSense ad code.

Step 7 : Save the template and that's it. You are done.

Congrats !! You have successfully added the AdSense ad below the first paragrapgh of your every post.

I hope you liked this guide on adding AdSense ad below the first paragraph. If you faced any problem or have any confusion in any of the above steps then feel free to ask in the comments below. I will be happy to help you.

Thanks for reading

Read More

How To Share Your Post To All Facebook Friends And Groups With a Single Click

When you write a new post, the next important task is to share your work with the world. The most important tool which almost everyone uses is Facebook. Sharing new post on Facebook groups and with your friends gives you lot of traffic.

This task seems to be easy but in reality, it takes too much time. Each time you need to open a group, then paste your link manually inside it. This is a very slow process and if want to share your post in atleast 50 groups, then you have invest around 1-2 hours in this task.

Today, In this post, I will show you a very smart way of sharing a new post with Facebook friends and groups. Using this method you will be able to do this work in less than 5 minutes. Follow the steps given below carefully.

Share Your Post To All Facebook Friends/Groups With a Single Click

Step 1 : Go to Share This and register a new account.

Step 2 : Select the platform on which your blog is hosted. Customize the sharing options of the widget and don't forgot to add Facebook Send button on it.

Step 3 : After completing all the steps, you will get a HTML code. Copy the code and paste it into a new widget in your blog.

Step 4 : Now below your every post, you will see a set of sharing buttons on different social media. Now, click at the Facebook Send button.

Step 5 : Now, add many as recipients as you want. You can add your friends and groups on which you want to share it. It will not take more than 5 minutes in doing this work. Click on send button and your content will be shared with everyone.

I hope you liked this tutorial on sharing new post in all Facebook groups with just a single click. If you have any query then don't hesitate to ask in the comments below or you can also contact me on Facebook or G-mail. Also, share this trick with your friends too.

Read More

How To Add a Cyber Pet On Your Blogger Sidebar

Peoples, especially children like pets. There are a couple of good options available for a blogger to add a cyber pet in their blogs. Cyber pets, Graphic pets or Clip Art pets are a specific type of virtual pet typically utilizing animated images which are placed on an adopter's site or managed through adoption site.

In this post, I will show you how you can add a Cyber Pet in your blogger blog. It makes a blog look beautiful and more attracting. Follow the simple steps given below.

Add a Cyber Pet On Your Blogger Sidebar

Step 1 : Visit bunnyherolabs.com

Step 2 : Click on 'Cyber Pets' as shown below.

Step 3 : Choose your pet and customize its color, name and give it a nickname.

Step 4 : Now, choose 'other sites' and copy the given code.

Step 5 : Now go to your blogger account and go to Layout and add a new gadget. 

Step 6 : Select 'HTML/Javascript' from the list of widgets and paste the copied code inside it.

Step 7 : Arrange the position of the new widget where you want it to appear. Save the arrangement and you are done.

That's all you have to do. I hope this tutorial helped you to add cyber pets on your blogger blog. Keep visiting for new posts and don't forget to share this with your friends circle.

Read More

How To Install Google Fonts On Blogger Blog

Nowadays, people are not using the same fonts given by blogger. They just trying to customize their blog in every aspect and the font is one of them. We can easily use our desired fonts on our blog's titles and body content. You can easily host your fonts on a server by paying a decent amount. You can also use some free services like Google Fonts to make your blog's fonts beautiful.

Google fonts is the largest font's inventory. It has thousands of different fonts and the implementation is also very easy. In this post, I will show you how can install a Google Font on your blogger blog. Follow the steps given below and start using the attractive Google Fonts on your blog without spending a penny.

How To Install Google Fonts On Blogger Blog

Step 1 : Go to Google Fonts and you will be able to see the free inventory of web fonts. Take your time and look for the best font for your requirement. You can write a sample text and see how it looks. 

Step 2 : After selecting your favorite font style, click on 'Quick Use' button and proceed to next step.

Step 3 : Now choose the size of the font according to the need of your blog. You can choose more than one options but this will decrease the page speed of your blog. There is also a page speed meter shown on the right part of the page. Try to be in the green part of it.

Step 4 : Now scroll down the page and you will see a link. Copy the link in a notepad file and proceed to next step.

Step 5 : Open your blogger account. Go to 'Template' and edit the template in HTML form. Search for </head> and paste the copied code just above it.

Remember, you have to put </link> after the copied text to close the <link> tag.

Step 6 : To use the font, you have to integrate it with your CSS

1. If you want to implement it on your title, the you will use the following code-

    .post-title {font-family: 'FONT NAME'; } 

2. If you want to implement it on your post body, then you will use the following code-

   .post-body {font-family: 'FONT NAME'; }

3. If you don't want to implement the font style on a certain portion of your text, the use the following code - 

   <span style="font-family: FONT NAME;">Your-Text-Here</span>

After successfully going over the above steps, you will have your desired font style on your blog.

I hope this tutorial helped you to install your preferred font style on your blogger blog. If you faced any difficulty in using it, then feel free to ask in the comments below.

Read More

How To Create A Beautiful Drop Down Menu In Blogger

Drop down menu is something that is very important in a blog, especially when the number of posts reaches in three figures. When total number of post crosses over 100 then it will became difficult for the readers to reach your older posts. They don't waste time in looking for older and older posts. This will decrease your page views and also increases your blog's bounce rate.

It is the duty of every blogger to make the content of a blog, easily reachable. The content should be categorized beautifully using labels and drop down menus. You can easily add labels while writing the post in blogger but, to create a drop down menu you have to make certain changes in your template.

In this post, I will show you how you can add a beautiful drop down in your blog and make your blog more clean and more professional. Follow the steps given below.

How To Create A Beautiful Drop Down Menu In Blogger

Step 1 : Open your bloggers account. Go to 'Template' and edit it in HTML form. Now using the keys Control+F, open the search box.

Step 2 : Search for ]]></b:skin>

Step 3 : Copy and paste the following code just above it.

             /*-------- Begin Drop Down Menu -------*/

#menubar {

    background-color: transparent;

    width: 840px;

    color: #424338;

        margin: 0px;

        padding: 0;

        position: relative;

        border-top:0px solid ##8C001A;

        height:35px;

}

#menus {

    margin: 0;

    padding: 0;

}

#menus ul {

    float: left;

    list-style: none;

    margin: 0;

    padding: 0;

}

#menus li {

    list-style: none;

    margin: 0;

    padding: 0;

        border-left:0px solid #1A6680;

        border-right:0px solid #1A6680;

        height:auto;

}

#menus li a, #menus li a:link, #menus li a:visited {

    color: #FFFFFF; /* This changes the text color of visited links. */

    display: block;

   font:normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif;    margin: 5; 

           /* change margin value to 0 if you want no space between tabs */

           /* change 14 to another number to increase or reduce font size */

    padding: 9px 12px 10px 12px;

        text-decoration: none;

}

#menus li a:hover, #menus li a:active {

    background: #424338; /* This is the main menu background color when a user hovers. */

    color: #FFFFFF; /* This changes the text color. */

    display: block;

    text-decoration: none;

        margin: 0;

    padding: 9px 12px 10px 12px;      

}

#menus li {

    float: left;

    padding: 0;

}

#menus li ul {

    z-index: 9999;

    position: absolute;

    left: -999em;

    height: auto;

    width: 160px;

    margin: 0;

    padding: 0;

}

#menus li ul a {

    width: 140px;

}

#menus li ul ul {

    margin: -25px 0 0 160px;

}

#menus li:hover ul ul, #menus li:hover ul ul ul, #menus li.sfhover ul ul, #menus li.sfhover ul ul ul {

    left: -999em;

}

#menus li:hover ul, #menus li li:hover ul, #menus li li li:hover ul, #menus li.sfhover ul, #menus li

li.sfhover ul, #menus li li li.sfhover ul {

    left: auto;

}

#menus li:hover, #menus li.sfhover {

    position: static;

}

#menus li li a, #menus li li a:link, #menus li li a:visited {

    background: #424338; /* This is the background color for the drop down menu. */

    width: 120px;

    color: #FFFFFF; /* This changes the text color. */

    display: block;

    font:normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif; 

               /* change 14 to another number to increase or reduce font size */

    margin: 0;

    padding: 9px 12px 10px 12px;

        text-decoration: none;

z-index:9999;

border-bottom:0px solid #1A6680;

}

#menus li li a:hover, #menusli li a:active {

    background: #424338; /* This is the background color for the drop down menu when a user hovers. */

    color: #FFFFFF; /* This changes the text color. */

    display: block;     margin: 0;

    padding: 9px 12px 10px 12px;

        text-decoration: none;

}

/*-------- End Drop Down Menu -------*/

Step 4 : Save the template.

Step 5 : Now before going to next part, you should learn some basics so that you can change and customize the drop down menu according to your need.

Now look at the following code given below.

<div id='menubar'>

    <ul id='menus'>

      <li><a href='LINK'>TabName1</a></li>

      <li><a href='LINK'>TabName2</a></li>

      <li><a href='LINK'>TabName3</a></li>

      <li><a href='LINK'>TabName4</a></li>

    </ul>

  </div>

This code will create a set of four horizontal menus naming TabName1 to TabName4. These are just simple horizontal menus with no drop down yet. Now to make a drop down in any of these menus, we have to add the following given below code inside it.

 <ul>

          <li><a href='LINK'>DropDownName1</a></li>

          <li><a href='LINK'>DropDownName2</a></li>

          <li><a href='LINK'>DropDownName3</a></li>

        </ul>

The above code adds three drop down menus named as DropDownName1 to DropDownName3. 

Now, combining the above two steps, the complete code will look like given below.

<div id='menubar'>

    <ul id='menus'>

         <li><a href='LINK'>DropDownName1</a></li>

         <li><a href='LINK'>DropDownName2</a></li>

         <li><a href='LINK'>DropDownName3</a></li>  

         <li><a href='LINK'>TabName4</a>

             <ul>

                <li><a href='LINK'>DropDownName1</a></li>

                <li><a href='LINK'>DropDownName2</a></li>

                <li><a href='LINK'>DropDownName3</a></li>

             </ul>

         </li>

    </ul>

  </div>

This code will create four horizontal menus and three sub menus under 'TabName4'. You can add as many as sub menu as you wish. 

Don't forget to replace the LINK with the URL of your post or labels.

Step 6 : Now, go to 'Layout' and add a new gadget. Select HTML/Javascript and copy and paste the above code in it and make required changes in it. Save the widget and you are done.

Congrats!! You have successfully added drop down menu in your blog. I hope this tutorial helped you to add drop down menus in your blog. If you faced any problem doing it, then feel free to ask below in the comments. 

Read More

How To Replace Default Blogger Scrollbar With Custom WebKit Scrollbar

Scrollbar appears at the right side of any page and it helps the user to scroll up and down the page. We already knows about the scroll bar in a default blogger template. To have a good experience for the user, the scroll bar should be smooth. Although, the default scroll bar is good enough and working without any complaint but, adding a newly customized scroll bar makes your blog more attractive.

WebKit scrollbar provides you with a very beautiful and smooth working scroll bar. The scroll bar is user friendly and makes your blog more professional. In this post, I will show you how you can also implement WebKit scrollbar in your blog. Just follow these simple steps given below.

Replace Default Blogger Scrollbar with Custom WebKit Scrollbar

Step 1 : Open your blogger's dashbaord. Go to 'Template' and edit the template in HTML form.

Step 2 : Now click anywhere inside the code box and using the keys Control+F, open search box.

Step 3 : Search for ]]></b:skin>

Step 4 : Now paste the following code just above it.

             /* For the "inset" look only */

html {

    overflow: auto;

}

body {

    position: absolute;

    top: 20px;

    left: 20px;

    bottom: 20px;

    right: 20px;

    padding: 30px; 

    overflow-y: scroll;

    overflow-x: hidden;

}

/* Let's get this party started */

::-webkit-scrollbar {

    width: 12px;

}

/* Track */

::-webkit-scrollbar-track {

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 

    -webkit-border-radius: 10px;

    border-radius: 10px;

}

/* Handle */

::-webkit-scrollbar-thumb {

    -webkit-border-radius: 10px;

    border-radius: 10px;

    background: rgba(255,0,0,0.8); 

    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 

}

::-webkit-scrollbar-thumb:window-inactive {

background: rgba(255,0,0,0.4); 

}

Step 5 : Save the template and that's it. You have successfully changed your default blogger scrollbar.

I hope this small tutorial helped you to add WebKit scrollbar in your blog. If you faced any problem then feel free to ask below in the comments.

Read More

How To Add a Forum To Your Blogger Blog

A forum is a platform where everyone can put their opinions, ask questions, reply to someone's query or just participate in a discussion. It is always good to have a forum in your website or blog. It gives your user a way to interact with you and other users of the same website. Also, they have more chances of getting their question answered.

Although, users can also interact through comments but, asking a question in a comment which is not related to that post, feels awkward. So a forum gives them the freedom to start a whole new conversation.

Adding a forum in a blogger blog is a tough task. Blogger is a free platform so it lacks of so many features. But, we can still add a forum to our blog using Google Groups. Google Group provides you with a free forum with high flexibility. It's a free tool and you can customize it any time very easily. In this post, I will show how to add Google Group forum to your blog. Follow these steps carefully.

Add a Forum To Your Blogger Blog

Step 1 : First, you have to log in to your gmail account. Now, go to https://groups.google.com/forum/?fromgroups#!myforums and click on 'Create Group' as shown below.

Step 2 : Now, you will see a form. Fill the the required details. All the points are explained below.

Group name : Write a name for your new forum. It will be good to choose a name related to your subject. You can also rename it any time.

Group email address : A group email address will be created automatically according to the group name. For example, if you write "Marketing" in the group name then you will be provided with marketing@googlegroups.com as group email address.

Group description : Write a small description about your forum so that the visitor could understand about it.

Group's primary language : Select the language for your forum according to you. Most of the people select the English and it is by default selected English only.

Group type : This option you have to select according to your need. You will get four options i.e Email list, Q&A Forum, Web Forum, Collaborative inbox. Depending on your requirement , select the one out of four.

Basic permission : In this section, you have to decide the basic permissions about your forum which you want to give to your users.

Once you filled all the information correctly, click 'Create' button. Now your group is successfully created.

Step 3 :  Now open your blogger account. Go to Pages and create a new page. Edit the Page in HTML form.

Step 4 : Now copy and paste the following code there.

             <iframe frameborder="0" height="1000px" id="forum_embed" scrolling="no"

src="javascript:void(0)" width="100%">

    <br />

</iframe>

<script type="text/javascript">

    document.getElementById("forum_embed").src =

        "https://groups.google.com/forum/embed/?place=forum/yourgroupname" +

        "&showsearch=true&showpopout=false&parenturl=" + encodeURIComponent(window.location.href);

</script>

Replace yourgroupname with the name of your group.

Step 5 : Publish the page and you are done with it.

Congrats !! You have successfully created and added a forum to your blog.

I hope this tutorial helped you to add forum to your blog/website. If you faced any difficulty in doing it, then feel free to ask in the comments below.

Read More

How To Embed Audio Clips In Your Blogger Blog

Have you ever thought of adding a audio clip in your posts. Many times you have seen a YouTube videos between the content of a post. It's very common thing to embed a YouTube in your post. But, adding a audio clip is a new thing to most of the bloggers.

Adding a audio clip have so many uses. You can give a introduction about your blog in a small audio or you can start a series of audio episodes related to any topic using the same technique. This will help you to get more subscribers and helps you to increase your blog traffic and ranking. It is very useful and also it is easier to make a audio clip than a video, if you are producing it on your own.

In this post, I will show you how you can embed a audio file in your post. Here we will be using SoundCloud to host your audio files. Follow the steps given below.

Embed Audio Clip In Your Blog Post

Step 1 : First, you have to create a account at SoundCloud. Sign up at SoundCloud by filling some few details. You can also use your gmail or Facebook account to sign up.

Step 2 : Now, after creating your account, go to https://soundcloud.com/upload and click on 'Choose files to upload'.

Step 3 : Now upload the file and fill the necessary information as shown below.

Write the title of your audio and add some tags related to it. Add a description of your audio if you want and also add a image. Now make your audio public so that everyone can see it. Click on Save button.

Step 4 : Now, after successfully uploading your audio go to your account and look for that uploaded file. Look for the share button.

Click on this button and a new window will appear. Now go under 'Embed'.


Step 5 : Now copy the HTML code as shown below.

Step 6 : Now, go to your blogger account. Go to posts and edit the post in which you want to embed that audio. Now edit the post in HTML form and paste that copied code where you want it to appear.

Step 7 : Publish the post and you are done with it.

Congrats!! You have successfully embed a audio clip in your post.

I hope this tutorial helped you to add audio clip in your post. If you faced any problem then feel free to ask in the comments below. Don't forget to share this with your friends.

Read More

How To Add a Toluna Poll In Your Blogger Blog

Blogging is only successful when your blog is really helping the readers. You may think that you are producing a great content but, it is not you who judges the work of yourself. Your readers will decide how good your blog is.

As a blogger, it is your responsibility to interact with your readers, reply to their comment and solve their problems. You should reply to every mail from your readers. One of the best way to interact with your user is to add a poll in your blog. You can ask any question about your blog or any change you wants to bring in your blog. Readers will have options to choose from and it will give a good look of what they want you to do.

In this post, I will show you how you can add a Toluna poll to your blog. You can customize it according to you, add as many options as you want. Follow these steps given below.

Add Toluna Poll In Your Blogger Blog

Step 1  : First, you have to create a account at Toluna. Click here  to create a new account. You can also sign up with your Facebook account.

Step 2 : Confirm your email and login to your account. Now, its time to create your poll. Go to https://us.toluna.com/Recent/?create. You will see four options Poll, Topic, Thumb It and VS Battle out of which you have to select Poll.

Step 3 : Now, as you can see in the above picture, you have to write your question or anything in place of 'Ask Something'. Write the answers in the space shown, you have to write at least 2 option to give choices to your users. To add more than 2 option, simply click the plus(+) sign.

Now, select a category of your question and click on Create button.

Step 4 : Now go to your profile and choose that created poll.Now find embed button as shown below.

Step 5 : Now you will see a box as shown in the picture below. Customize the size of your poll and copy the code shown to you.

Step 6 : Now, open your blogger account. Go to Layout>>Add a gadget>>HTML JavaScript and paste the copied code there.

Step 7 : Save the template and you are done with it.

Congrats!! You have successfully added a poll to your blog.

I hope this widget helps you to add a Toluna poll to your blog to interact with your readers. If you faced any problem then feel free to ask in the comments below.

Read More

How To Create Sticky Floating Widget In Blogger

A sticky floating widget is a widget which takes a fixed position in your blog. It's position does not depends or change on scrolling the page. It will float to the same position as your scroll up or down the web page.
This type of widgets are very useful and becoming in trends these days. People mostly use this feature in their subscription widget to increase their number of subscribers. You can also use it to show a news, notice or any product about your blog. Some people also use it in their ad to increase their earnings. Its depends on your choice of using this feature.

Note :
1. Google AdSense don't like their ads to be sticky. So they might ban your account.
2. Avoid adding to many floating widgets because it may annoy the users and also make other widgets less effective.

In this post, I will show you how you can make your widgets to be floating or sticky. Follow the steps given below carefully.

Create Sticky Floating Widgets In Blogger

Step 1 : First, you have to create a simple widget. Go to Layout>>Add a Gadget. Give a name for it. Here, I am using 'Sticky Floating Widget' as a example.

Step 2 : Now, go to Template>>Edit HTML.

Step 3 : Click anywhere inside the codes and using the keys Control+F, open the search box.

Step 4 : Search for </body> and paste the following code just above it.

             <script>

/*<![CDATA[*/

// Sticky Plugin

// =============

// Author: Kewal Dubey

(function($) {

    var defaults = {

            topSpacing: 0,

            bottomSpacing: 0,

            className: 'is-sticky',

            center: false

        },

        $window = $(window),

        $document = $(document),

        sticked = [],

        windowHeight = $window.height(),

        scroller = function() {

            var scrollTop = $window.scrollTop(),

                documentHeight = $document.height(),

                dwh = documentHeight - windowHeight,

                extra = (scrollTop > dwh) ? dwh - scrollTop : 0;

            for (var i = 0; i < sticked.length; i++) {

                var s = sticked[i],

                    elementTop = s.stickyWrapper.offset().top,

                    etse = elementTop - s.topSpacing - extra;

                if (scrollTop <= etse) {

                    if (s.currentTop !== null) {

                        s.stickyElement.css('position', '').css('top', '').removeClass(s.className);

                        s.currentTop = null;

                    }

                }

                else {

                    var newTop = documentHeight - s.elementHeight - s.topSpacing - s.bottomSpacing - scrollTop - extra;

                    if (newTop < 0) {

                        newTop = newTop + s.topSpacing;

                    } else {

                        newTop = s.topSpacing;

                    }

                    if (s.currentTop != newTop) {

                        s.stickyElement.css('position', 'fixed').css('top', newTop).addClass(s.className);

                        s.currentTop = newTop;

                    }

                }

            }

        },

        resizer = function() {

            windowHeight = $window.height();

        };

    // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):

    if (window.addEventListener) {

        window.addEventListener('scroll', scroller, false);

        window.addEventListener('resize', resizer, false);

    } else if (window.attachEvent) {

        window.attachEvent('onscroll', scroller);

        window.attachEvent('onresize', resizer);

    }

    $.fn.sticky = function(options) {

        var o = $.extend(defaults, options);

        return this.each(function() {

            var stickyElement = $(this);

            if (o.center)

                var centerElement = "margin-left:auto;margin-right:auto;";

            stickyId = stickyElement.attr('id');

            stickyElement

                .wrapAll('<div id="' + stickyId + 'StickyWrapper" style="' + centerElement + '"></div>')

                .css('width', stickyElement.width());

            var elementHeight = stickyElement.outerHeight(),

                stickyWrapper = stickyElement.parent();

            stickyWrapper

                .css('width', stickyElement.outerWidth())

                .css('height', elementHeight)

                .css('clear', stickyElement.css('clear'));

            sticked.push({

                topSpacing: o.topSpacing,

                bottomSpacing: o.bottomSpacing,

                stickyElement: stickyElement,

                currentTop: null,

                stickyWrapper: stickyWrapper,

                elementHeight: elementHeight,

                className: o.className

            });

        });

    };

})(jQuery);

/*]]>*/

</script>

<script type='text/javascript'>

   $(document).ready(function(){

    $("#mblfloater").sticky({topSpacing:0});

   });

 </script>

Step 5 : Now, search for name of your widget. Here , I am searching for 'Sticky Floating Widget'. Look for the code similar to shown below.

<b:widget id='HTML2' locked='false' title='Sticky Floating Widget' type='HTML'>

            <b:includable id='main'>

  <!-- only display title if it's non-empty -->

  <b:if cond='data:title != &quot;&quot;'>

    <h2 class='title'><data:title/></h2>

  </b:if>

  <div class='widget-content'>

    <data:content/>

  </div>

</b:includable>

          </b:widget>

Step 6 : Replace the above code with the code given below.

            <b:widget id='HTML2' locked='false' title='Sticky Floating Widget' type='HTML'>

            <b:includable id='main'>

<div id='mblfloater'>

  <!-- only display title if it's non-empty -->

  <b:if cond='data:title != &quot;&quot;'>

    <h2 class='title'><data:title/></h2>

  </b:if>

  <div class='widget-content'>

    <data:content/>

  </div>  </div>

</b:includable>

          </b:widget>

Step 7 : Save the template and you are done with it.

You have successfully created a floating widget for your blog.

I hope this tutorial helped you to create sticky floating widget for your blog. If you faced any problem in it then feel free to comment your problem below.

Read More

How To Embed Facebook Post In Your Blog's Post

Most of the time you have heard about adding a YouTube video in your blog sidebar or in the post. But, you may not know that you can also embed a Facebook post in your blog. This is a good way to show some more information on your post and it makes your blog to look more professional. Also, the user can directly like, comment or reply to that post without going to that particular Facebook page. But remember, you can only embed Facebook post which are public.

In this post, I will show you how you can also start adding Facebook post in your content. Follow these simple steps given below.

Embed Facebook Post In Your Blog's Content

Step 1 : First you have to look for the public post which you want to embed in your blog. The post can be yours or any others. When you select it, look for the downward arrow to open options related to it.

Step 2 : Click on 'Embed Post' and you will see a HTML code related to it. Copy that HTML code in a notepad file.

Step 3 : Now, open your blogger account and go to 'Post' sections. Edit the post on which you want to embed this Facebook status. 

Step 4 : Edit that post in HTML form and paste the copied code there according to you.

Step 5 : Now publish or update that post and you are done with it. Now, you will see that Facebook update on your post and it can be liked or commented directly form there. Below is a preview how it will look like in your blog.

I hope this tutorial helped you to embed Facebook updates in your blog's post. If you face any problem then feel free to comment below or if you liked it then please share it.

Read More

How To Embed YouTube Videos In Your Blog's Background

You might wondered by seeing a YouTube video in the background of many blogs. It makes the blog more beautiful. Also, some bloggers uses this feature to give all information about the niche of their blog which could helps the readers to know whats inside the blog and they can decide whether to subscribe on it or not.

But, remember that sometimes this can increase your page loading time. Also, the video cannot be paused, so if the video is too long, then it will irritate the readers. There is a one more drawback that if the videos contains any add, then user will have to watch it and this will reduce your blog's reputation and traffic.

In this post, I will show you how you can embed a YouTube video on your blogs also. Just follow this guide and you will be doing it on your blog within minutes.

Embed YouTube Videos In Your Blog's Background

Step 1 : Open your blogger's dashbaord. Go to 'Template' and edit your template in HTML form.

Step 2 : Now open the search box by using the keys Control+F and search for </head>.

Step 3 : Just above </head>, copy and paste the following code given below.

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

<script type='text/javascript'>

//<![CDATA[

/* jQuery tubular plugin

|* by Sean McCambridge

|* http://www.seanmccambridge.com/tubular

|* Copyright 2012

|* licensed under the MIT License

|* Enjoy.

|*

|* Thanks,

|* Sean */

var videoWidth = 853;

var videoRatio = 16/9;

var defaultDiv = 'wrapper-video';

jQuery.fn.tubular = function(videoId,wrapperId) {

wrapperId = (typeof(wrapperId) == undefined) ? 'wrapper-video' : wrapperId;

t = setTimeout("resizePlayer()",1000);

jQuery('html,body').css('height','100%');

jQuery('body').prepend('<div id="yt-container" style="overflow: hidden; position: fixed; z-index: 1;"><div id="ytapiplayer">You need Flash player 8+ and JavaScript enabled to view this video.</div></div><div id="video-cover" style="position: fixed; width: 100%; height: 100%; z-index: 2;"></div>');

jQuery('#' + wrapperId).css({position: 'relative', 'z-index': 99});

var ytplayer = 0;

var pageWidth = 0;

var pageHeight = 0;

var videoHeight = videoWidth / videoRatio;

var duration;

var iframe = '<iframe id="myytplayer" width="' + videoWidth + '" height="' + videoHeight + '" src="http://www.youtube.com/embed/' + videoId + '?autoplay=1&controls=0&modestbranding=1&showinfo=0&hd=1&iv_load_policy=3&version=3&wmode=transparent&loop=1&playlist=' + videoId + '" frameborder="0" allowfullscreen></iframe>';

jQuery('#ytapiplayer').html(iframe);

jQuery(window).resize(function() {

resizePlayer();

});

return this;

}

function onYouTubePlayerReady(playerId) {

ytplayer = document.getElementById("myytplayer");

ytplayer.setPlaybackQuality('medium');

ytplayer.mute();

}

function resizePlayer() {

var newWidth = jQuery(window).width();

var newHeight = jQuery(window).height();

jQuery('#yt-container, #video-cover').width(newWidth).height(newHeight);

if (newHeight > newWidth / videoRatio) {

newWidth = newHeight * videoRatio;

}

jQuery('#myytplayer').width(newWidth).height(newWidth/videoRatio);

}

//]]>

</script>

<script type='text/javascript'>

//<![CDATA[

$().ready(function() {

$('body').tubular('81LLg23KM_w','wrapper-video');

});

//]]>

</script>

Step 4 : Now again search for <body> and just below it paste the following code given below.

             <div id='wrapper-video'>

Step 5 : Now search for </body> and just above it write </div> to end the above added tag.

Step 6 : Now replace 81LLg23KM_w with the YouTube video ID of your video.

You will find video ID in the URL of that video as shown in the below picture.

Here the highlighted text is the video id of that video.

Step 7 : Save the template and you are done with it.

I hope this tutorial helped you to embed YouTube videos in your blog's background. If you face any problem then feel free to ask below in comments.

Read More