How To Disable Text Selection In Blogger

Sometime we need to copy text content from blog sites for personal use. But not all of blog site user copy text for personal use - a lot of content thief, content scraper copy our website/blog sites content for use them on their commercial project or use somebody's text content directly on their website.

To copy text content from a website firstly we have to select text. This text selection can be turn off. As major Blogging platform known as WordPress and Blogger. WordPress far advance satisfaction by using variety of plugins. Such as Wp Content Protect plugin disable text selection from WordPress blogs and in Blogger there is also a solution available to disable text selection. Let's see how to set it up and how it works.

How To Disable Text Selection In Blogger For Preventing Copy Paste :

• First Log in to your Blogger, select your Blog.
• Go to 'Layout' tab, Click "Add a Gadget"
• From pop up menu select "Html/Javascript"
• And in content box paste following script code.

<!--start of prevent copy paste by funisonline.blogspot.com-->
<script
scr='demo-to-prevent-copy-paste-on-blogger-files/googleapis.js'>
</script><br /><script type='text/javascript'>
if(type of document.onselectstart!='undefined') { document.onselectstart=new Function ('return false' ); } else { document.onmousedown=new Function ('return false');
document.onmouseup=new Function ('return true') }
</script>
<!--end of prevent copy paste by funisonline.blogspot.com-->

After pasting the code save it.

And view your Blogger blog the text selection with mouse option is gone. This method all text element will be block out if you need some advance system where some part of blogs will be enabled for copying texts then follow the up coming tutorial.

How To Use Google Fonts In Blogger Post

Your Blogger template's default fonts are basically Ariel, Georgia, Times, Trebuchet, Helvetica. These fonts are simple and not so attractive. If your blog running with these default fonts may be you will lost some audience, those audience who care about your blog design overall too. But these default fonts can be change easily. There are lots of font providers offers web fonts what can be easily integrate to your site. Google web font is one of the best web font provider. In Google font's collection more than 650+ font with various styles you can find.

Using Google font in your post, you can customize your font style more specifically, like font thickness, slant, width, line height, font weight, font script etc. Let's add Google font in your Blogger, this process is easy and difficulty is beginner.

How To Use/Install Google Font In Blogger Post :

Step 1 :

• Go to Google web font (Click Here)
• See demo of font family by Word, Sentence, Paragraph
• Use Filter (Left Side) for find more specific font style.
• After choosing a font style click on "Quick Use"
• Then you will direct to another page where you can find that font's set up codes.

Step 2 :

• Embedding CSS import (Easier)                           Or
• Embedding Link Standard (Easy)

Embedding CSS Import :

• On your chosen font's page you will see a option named "Add this code to your website"
• Select '@import' tab, and copy the given line
• Now, Login to your Blogger and select your blog
• Go to, Template and click on Edit HTML
• Search for ]]>< into code snippet (Using Ctrl+F or Cmd+F)
• And before ]]>< paste that copied line
• Then, go back to Google font's page and copy the line (font-family) of integrate the fonts into your CSS option
• Come back to Blogger's Template > Edit HTML, Again search for .post-body into code snippet
• Into post body's brackets paste that (font-family) line
• Save Template and check out your blog for live action.

Embedding Link Standard :

• On your chosen Font's page you will see a option "Add this code to your website"
• Below a <link> code you will see, copy it
• Now log in to your Blogger account, select your blog
• Go to Template > Edit HTML
• And search for </head> into code snippet (Using Ctrl+F)
• Above </head> paste that link code
• And modify the <link> code, Just add a slash (/) in the very last side of the <link> tag
• The modified version looks like this <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='Stylesheet' type='text/css'/>
• Then, go back to Google font's page and copy the line (font-family) of integrate the fonts into your CSS option.
• Come back to Blogger's Template>Edit HTML , Again search for .post-body into code snippet
• Into post body's bracket paste that (font-family) line 
• Save Template and check out your blog for live action

Additionally :
If you think font line height is not quite right than you expected. In that case add this code into .post-body bracket (line-height:1.5;)

And if you feel the font size is not suiting your site. So change font size with adding this code into .post-body bracket. change 16px to any px you want (font-size:16px;)

Then Save Template, you are done !

How To Set Auto Update Template Footer Credit Info

It makes a lot of sense to always add your website name along with Copyrights Date/Time in Footer credits to let your users get accustomed to your brand identify and also know that you reserve full copyright of the content you share on your blog. A credit link consists of mostly your Trademark/Benchmark name (i.e. Blog Title) and the Time interval for which you deserve full ownership of your blog resources and of its use and distribution. When we design Blogger templates we often add Credit links or attribution links at the bottom of the blog footer to let everyone know who designed and developed the template.

In case if you remind your visitors of who owns the content and resources then you can surely use the simple script share below which will dynamically insert your Blog Title, Blog link and current year in your blog to let everyone know of your Copyright. After using this XHTML + Javascript, no matter how many years may pass by, your footer credit will always show the current Copyrights Legal Date, thus preventing you from manually updating the Date each year and Blog Title each time you update the Site Title. Therefore this tutorial will help you Auto Insert Copyrights Legal Date and Trademark in Blogger Footer Credits. Lets get started.

Update Blogger Footer Credits :

1. Go to Blogger > Template > Backup your Template.
2. Click Edit HTML
3. Search your Footer Credits code and replace the contents with this simple code.

Code :  
           " <a expr:href='data:blog.homepageUrl'><data:blog.title/>™ </a>© <script type='text/javascript'>document.write(new Date().getFullYear());</script>, All Rights Reserved. "

Things To Note :

• data:blog.homepageUrl will be replaced with your Blog Homepage URL
• <data:blog.title/>™ will be replaced with your Homepage title i.e. Your Trademark
• The green highlighted script will be replaced with current new Date of the year. getFullYear() returns the year in four digits.
• Finally save your Template.

3 Basic Tips To Prevent A DDoS Attack

Distributed denial-of-service (DDoS) attacks are always in top headlines worldwide, as they are plaguing websites in banks, and virtually of almost every organization having a prominent online presence. The main cause behind the proliferation of DDoS attacks in that there is very low cost that the attacker has to incur to put such attacks in motion. Fortunately, today various prevention methods have been developed to tackle such attacks. Before delving further into understanding about the ways to prevent DDoS attack, let's first understand what exactly a DDoS attack is.

Understanding DDoS Attack :

A DDoS (distributed denial-of-service) attack is an attempt made by attackers to make computers, resources inaccessible to its anticipated user. In order to carry out a DDoS attack the attackers never users their own system, rather they create a network of zombies computers often called as "Botnet" - that is a hive of computers, to incapacitate a website or a web server.

Let's understand the basic idea! Now, the attacker notifies all the computers present on the botnet to keep in touch with a particular site or a web server, time and again. This increases traffic on the network that causes in slowing down the speed of a site for the intended users. Unfortunately, at times the traffic can be really high that could even lead to shutting a site completely.

3 Basic Tips To Prevent A DDoS Attack :

There are several ways to prevent the DDoS attack, however, here in this guest post i'll covering three basic tips that will help you to protect your website from the DDoS Attack.

1 : Buy More Bandwidth 

One of the easiest methods is to unsure that you have sufficient bandwidth on your web. You'll be able to tackle lots of low scale DDoS attacks simply by buying more bandwidth so as to service the request. How does it help? Well, distributed denial of service is a nothing more than a game of capacity. Let's suppose you have 10,000 computers system each distribution 1 Mbps directed towards your way. This means you're getting 10 GB of data that is hitting your web server every second. Now, that's causes a lot of traffic.

So to avoid such issue, you need to apply the same rule intended for normal redundancy. According to this technique, if you wish to have more web servers just multiply around diverse data centers and next make use of load balancing. By spreading your traffic to various servers will help you balance the load and will most likely create large space adequate to handle the incessant increase in traffic.

However, there's problem with this method that is buying more bandwidth can be a costly affair. And as you'll know that current DDoS attacks are getting large, and can be a lot bigger exceeding your budget limit.

2 : Opt For DDoS Mitigation Services

A lot of network or internet service providers render DDoS mitigation capabilities. Look for an internet service provider having the largest DDoS protection and mitigation network, automated tools, and a pool of talented anti-DDoS technicians with the wherewithal to take action in real time as per the varying DDoS attack characteristics. A viable alternative is to utilize a DDoS prevention appliance, which is specifically intended to discover and prevent distributed denial of service attacks.

3 : Restricted Connectivity 

In case you have computer system that are connected tot he web directly, a better idea is to properly install/configure your routers and firewall so as to limit the connectivity. For an instance, while receiving some data from a client machine you can only allow traffic to pass from the machine online on a few chosen ports (like HTTP, POP, SMTP etc.) via the firewall.

Wrapping Up !

Websites are largely getting attacked by hackers every second. Denial-of-Service attack is insanely getting huge and is creating a lot of problems for business organization having strong online vicinity. In this guest post you'll not only understand what a DDoS attack actually means, but will also come to know about a few type of method to prevent DDoS attacks. Aforementioned are three tips that i'll recommend you to run through to at least understand where to get started towards building a resilient web network with chances of surviving a DDoS attack.

Convert A Wordpress Blog To Blogger Simple And Easy Way

Blogger is a very widely used publishing platform, mostly because its strength lies in its simplicity and ease to use. It is quite easy to use, and is recommended for beginner bloggers who are looking for a quick and easy way to create a presence for themselves online. For bloggers who have created a Wordpress blog, but are at loss to maintain or modify it, they have great option in Blogger.

They can easily migrate their WordPress Blog to Blogger without hitch. In this post, we will talk about how you can shift WordPress to free Blogger.

Normally, such a transfer isn't easy. Data needs to be imported from WordPress first, and the imported to Blogger. Since Blogger doesn't allow any data format expect its own, there needs to be a conversation process that will convert WordPress exported files. Luckily, there's just such a utility available. Here, we will guide you through the simple steps. Following them, you can convert self-hosted WordPress blogs to Blogger, as well as migrate from free WordPress to Blogspot.

There are some steps you have to follow !

Step 1 : Importing From WordPress

Login to your WordPress account (for free WordPress users), and the choose the blog you want to convert into Blogger. Alternatively, you can login to your Blog's Dashboard directly by adding the /wp-login.php  suffix to your blog's home URL (eg yourblog.com/wp-login.php or yourblog.wordpress.com/wp-login.php) .

Navigate through your WordPress menu, and find the Tools option. When you click on it, you'll see further options, among which you will see Export option. Click on it. Choose what to export, you can select Posts, Pages, or feedback, but it is recommended that you select all content to ensure maximum content is transferred. Then click on Download Export File, which will let you save the exported file to your hard drive. You have completed step 1 at this point.

Step 2 : Convert Into Blogger Format

There is a useful little app that will do this job for you. To convert, visit this app's page, and navigate to the button in the middle of the content that says 'Choose File'. Browse to the file you downloaded from WordPress, and upload it here. The click Convert. After the conversion, you will need to save the output file. this file is in Blogger-Friendly format, and will be used inside Blogger.

Step 3 : Import To Blogger

The import process into Blogger is pretty straightforward. Simply login to, or sign up for your Blogger Account, and click on Create a Blog link. I'm assuming you want to create a new blog for your new content. But if you want to, you can import into an existing blog as well.

From the Dashboard, click on Settings >> Other >> Import Blog.

Now, all you need to do is follow the simple instructions, and upload the converted file. You well be guided through a wizard that will import data from this file into Blogger. Once done, you will see all your posts from WordPress ready to be published !

How To Generate Twitter API Key

After Twitter has closed the access to version 1.0 of API, we all are pushed to change the Latest Tweets Widget and Twitter Follower counter widget settings in order to make it work with Twitter API version 1.1 .

To make things straight, you have to create a Twitter application to generate Twitter API Keys, Access Token and Secret Keys and so on.

Creating A Twitter Application :

To use Twitter counter widget and other Twitter related widgets, you need OAuth access keys. To get Twitter Access Keys, you need to create Twitter Application which is mandatory to access Twitter.

• Go to https://dev.twitter.com/apps/new and login, if necessary.
• Enter your Application Name, Description and your Website URL. You can leave the callback URL empty.
• Accept the TOS, and solve the CAPTCHA.
• Submit the form by clicking Create Your Twitter Application.
• Copy the consumer key (API Key) and consumer secret form the screen into your application.

Create Your Access Token For OAuth :

After creating your Twitter Application, you have to give the access to your Twitter Account to use this Application. To do this, click the Create My Access Token.

" Get The Consumer Key, Consumer Secret, Access Toke, Access Toke Secret "

In order to access the Twitter, that is to get recent tweets and twitter follower count, you need the four keys such as Consumer Key, Consumer Secret, Access Token, Access Token Secret.

To get all these keys, click the OAuth Tool tab in your Twitter Application and copy those keys and paste in our Theme Options page. That's it. Now your Twitter Counter will get the followers count and display them in your widget.

How To Redirect Blogger 404 Error Page To Homepage

A 404 error page tells you and search engines that a page is not found by displaying a text similar to it "Sorry, the page your were looking for is this blog does not exist" . This may happen because you have changed your URLs over time, either removed a few pages when you overhauled your design or a visitor may have accidentally misspelled an URL in existent in your blog, so it automatically redirects to the 404 error page (page not found).

And probably this will not make a good impression on the greatest potential users of our blog. Before the user clicks the back button or close the window/browser's tab, thus leaving our site forever, we may want to redirect 404 error in Blogger to a page, where are chances that the visitor will continue reading our blog. One of the most used methods is the "meta refresh" but the problem with this method is that it breaks navigation (doesn't allow to return back). In this case, the best method is by using Javascript about which i will go in detail below.

Redirect Blogger 404 Error With Javascript :

Go to your Blogger Dashboard, select your blog and then to Settings > Search Preferences > Custom Page Not Found.

Copy and paste the following code inside the empty box :

Sorry, the page you're looking for in this blog does not exist.
You will be redirected to homepage shortly.
<script type = "text/javascript">
BSPNF_redirect = setTimeout(function() {
location.pathname= "/"
}, 5000); 
</script>

The message which is going to be displayed can be modified as you want. If you are willing to redirect your blog 404 page to another page other than your home page, just replace pathname to href and / with url of your page. And finally, the number 5000 which is the delay expressed in milliseconds, can be changed to other value if this is more convenient.

Next thing to do is to save all changes made in this section and do a little test to check if the code works well. You can verify 404 error page functionality by adding a custom text at the end of your blog address and after hitting Enter, you should see the error page followed by a redirection after 5 seconds. That's it !

Replace Content In Your Wordpress Using SQL

Like we all know, we can use SQL to replace or remove some content in our Wordpress using phpMyAdmin, on this i will show you How To Replace/Remove Content On Your Wordpress Using SQL. On this trick you can access through phpMyAdmin on your server or using plugin Wp-DBManager and you can direct access through Wordpress Admin panel.

After you install DB Manager or logging into phpMyAdmin, go to run SQL interface and do this code:

UPDATE wp_posts SET post_content = REPLACE ( post_content, 'nofollow ', '' );

On this sample, you will remove all content with nofollow on your post content. Please not you can multiple SQL query too by using this method:

UPDATE wp_posts SET post_content = REPLACE ( post_content, 'nofollow ', '' );
UPDATE wp_posts SET post_content = REPLACE ( post_content, ' nofollow', '' );

UPDATE wp_posts SET post_content = REPLACE ( post_content, ' rel="nofollow"', '' );

This method does the same thing but multiple queries are executed at the same time. You can tweak this code what ever you want, like replace wordpress.org with funisonline.blogspot.com, so all your content with url's to wordpress.org will be replaced into funisonline.blogspot.com using this method.

UPDATE wp_posts SET post_content = REPLACE ( post_content, 'wordpress.org ', 'funisonline.blogspot.com' );

That's all, i hope our tutorial replace or remove content on your Wordpress using SQL worked for you.

How To Display Any External RSS Feed On Your Site

Have you seen other bloggers who display their other blog's feed on their site. You want to do it too for extra promotion and traffic. Well here is the tutorial for you. Simply paste the following code in anywhere in your theme.

<?php include_once(ABSPATH.WPINC.'/feed.php');
$rss = fetch_feed('http://feeds.feedburner.com/funisonline');
$maxitems = $rss->get_item_quantity(5);
$rss_items = $rss->get_items(0, $maxitems);
?>
<ul>
<?php if ($maxitems == 0) echo '<li>No items.</li>';
else
// Loop through each feed item and display each item as a hyperlink.
foreach ( $rss_items as $item ) : ?>
<li>
<a href='<?php echo $item->get_permalink(); ?>'
title='<?php echo 'Posted '.$item->get_date('j F Y | g:i a'); ?>'>
<?php echo $item->get_title(); ?></a>
</li>
<?php endforeach; ?>
</ul>

How To Create A Page That Shows Random Posts In Wordpress

Have you even been to a site and saw this cool feature ? They have a link in their top navigation to something like Stumble ! or Read Random Articles, or some other creative text. Each time you refresh, you are delivered with a new post. Well this trick is just for you then.

You would need to follow the trick # 1 in this post to create a custom page template, and simply paste this code in there:

"<?php
    query_posts(array('orderby' => 'rand', 'showposts' => 1));
    if (have_posts()) :
    while (have_posts()) : the_post(); ?>

    <h1><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h1>

    <?php the_content(); ?>

    <?php endwhile;
    endif; ?> "

This is a simple Wordpress loop that is running a query to display random posts and the number 1 in there is telling Wordpress to only show 1 post. You can change that number, but most of the time people do it one post a time.

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.

Add Paypal Donation Button To Your Blog Or Website

If you are running a blog or website have huge number of contents then adding Paypal Donation button to your blog will bring more benefits for you because if your site getting huge number of visitors then by adding this Paypal button you can get some donation for your hard work that you have done already by adding contents so if you have a site about some free things like cracked tools, free wordpress themes or some working methods of earning online, once a visitor will find your site and gets some benefits from your site then he/she will think about your hard work and if you have done really hard work into blog or website creating and sharing, when he/she feel some special about your blog, they can Donate you some money that will be much of you.

How To Add Paypal Donation Button In Your Side Bar Or Footer :

• Get yourself a Paypal account if you don't already have one.
• Login to your Paypal account.
• Click on the Merchant Services tab.
• Click on Donations text link.
• Choose your button from a button type.
• Write your company or organization name.
• Write Donation ID if available.
• Stick with the default button unless you wish to customize it.
• Choose your currency depending on your needs.

5 Best Online Backlinks Checker Tools For Your Website

Backlinks are most important part of Seo as we say that it's blood of body without Backlinks your blog could not get top position in Google, Google is most used search engine in the world if you will do research about your query on Google you will find most popular websites on the top of Google, When you see some sites that are mostly on top a question rise in your mind that how the admin of website do it?
Now i am going to answer your question that how you can Rank your Website on top of Google, Backlinks is a only best way to lead your site on top of Google so here i am sharing just 5 tools to check backlinks of your competitors websites.

Online Backlinks Checker Tools For Your Website :

• BackLinkWatch
• Ahrefs
• Analyze Backlinks
• Majestic SEO
• Open Site Explorer

More Info :
                    Dear users these tools are tested by me and i am 100% satisfied with them you can find it helpful and if you have a good backlinks checker tool, feel free to mention below in comments, i will try to add your suggestion also.

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 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.