7 best CDN service Wordpress plugins to use

7 best CDN service Wordpress plugins to use
CDN full means Content delivery network, it's an advanced content delivery service that uses a huge distributed system of servers in multiple data centers to serve website content (Text, codes, images, video etc) to website visitors and give high end performance of website and visitor satisfaction. CDN 's content delivery system is very very powerful than your website hosting's server, and makes your website super fast loading (more than 200%), makes your website secure from various hack protection. In the matter of running Wordpress powered blogsite using CDN is kind of mandatory.
So here I listed those best and free CDN plugins name and satisfaction. Basically these plugin are use for launching the CDN service, basically you have to go to these plugin provider service to create account, add your site to service. So read on 7 best free CDN service to use for wordpress sites.

7 best CDN service Wordpress plugins to use


1. Cloud Flare
CloudFlare is the most popular free CDN service. Operating 23 data centers around the world. This service offers speeding up your site (can be more than 300%), Web pages with ad servers and third party widgets load snappy on both mobile and computers, Protect your website from a range of online threats, present data of all your website’s traffic including threats even search engine bots, one click set up cloud flare app will make your site more stronger and safe.

2. CoralCDN
Coral CDN help speed up a website by loading assets from multiple sources around the Internet. Coral CDN provides a free network of servers to help website owners easily off-load resources to improve the performance of the site. Has Modern peer to peer indexing technologies, 260 servers around the world.

3. jsDelivr
jsDelivr is a free public CDN that hosts JavaScript libraries and jQuery plugins, including all of the files they need to work css&png. It even hosts JavaScript files that use popular WordPress plugins. It will Speeds up your website, Cuts the bandwidth bill, Offloads the server from extra requests. Supports HTTPS and Uses Google CDN to load jQuery to take advantage of the user's browser cache. They has 91 server around globe

4. Bootstrap CDN
Official WordPress plugin of Bootstrap CDN by MaxCDN. It's a free and public content delivery network. Users of Bootstrap CDN can load CSS, JavaScript and images remotely from its servers. Provides Faster website, Less requests to your server

5. Incapsula
Incapsula gives any website the security and performance previously only available to the website elite. Through a simple DNS settings change, website traffic is seamlessly routed through Incapsula's global network of high powered servers. In realtime, blocking even the latest web threats from sophisticated SQL injection attacks to malicious bots and intruding comment spammers, accelerated and optimized site for faster load times

6. Blue Hat CDN
This plugin offers lossless image optimization, JavaScript/CSS compression, parallel download optimization, database optimization. It also supports offloading your static media files to various cloud delivery networks including, Blue Hat Cloud Delivery Network, Amazon CloudFront, and Rackspace CloudFiles. Plus Optimizes Your HTML Code to be HTML 5 Compliant Optimizes, OneClick Setup etc

7. Photon
Provide by wordpress, comes with Jetpack plugin. Give your site a boost by loading images in posts from the WordPress.com content delivery network. It will cache your images and serve them from a super-fast network.

And using these CDN service you can have a faster website and more secure blogging. Don't forget to mention what CDN service you use or you will be.

Add Slide Out Facebook likebox to Blogger blogs

Add Slide Out Facebook likebox to Blogger blogs
For increasing blogsite's fan in term of social media we generally use Facebook. And highlight your site's Facebook fan-page and let visitor quickly like your fanpage, Facebook's default likebox is very useful. Now here in this tutorial I'm am presenting Facebook's default likebox in a slide out menu what made with CSS3 and HTML. It will appear on very right side of your side, fixed at it's position and the words 'Like us on Facebook' as anchor title, hover with your mouse pointer the Facebook likebox will be appear with smooth slide, and removing mouse it will be hide again. Let's see how it looks like and how to add it in your Blogger.

Add Slide Out Facebook likebox to Blogger blogs


Live Demo- (here you go)

How to set up:
This like box adding has two step, read on-

Step 1: Install
  • First log in to your Blogger, select your Blog, 
  • Go to 'Layout' tab, select 'add a gadget' 
  • From popup menu select 'Html/javascript' and copy and paste codes into content box
  • And configure

Codes-

<style>/*crawlist.net CSS starts*/
.ks-slide {
  position: fixed;
 top: 200px;
  right: 0;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
.ks-box{
  height:270px;
  width:266px;
  border:2px solid #444444;
  border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
  background:#fff;
  position: fixed;
 top: 200px;
  right: -265px;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
.ks-slide:hover {
right:265px;
}
.ks-slide:hover .ks-box{
  right: 0;
}/*crawlist.net CSS ends*/</style>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="ks-slide">
  <img src="http://4.bp.blogspot.com/-c-Zay0UPk8c/U4MpbjvmZlI/AAAAAAAAEAs/AQ-VlQNOxQw/s1600/m.png" />
  <div class="ks-box">
<div class="fb-like-box" data-href="http://www.facebook.com/crawlistblog" data-width="265" data-height="265" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="true"></div>
  </div>
</div>


Step 2: Configure
  • Replace http://www.facebook.com/crawlistblog with your Facebook fanpage address.
  • If you want this slide out Facebook fanpage to appear some up or some low, just change this two pixel value (marked in pink) default is 200 px to whatever pixel you want.
  • After configuring is over now save gadget and template. And check your blogger blog out.
Last words: Slide out likebox is very useful, because it doesn't take place in widget area so you can put other widgets or keep widget area clean! It also look good and make your Facebook likebox unique on your Blogger site. And if you have any question about this widget don't forget to ask. Chill....

How to disable Text selection in Blogger for preventing copy paste

How to disable Text selection in Blogger for preventing copy paste
Sometime we need to copy text content from blogsites for personal use. But not all of blogsite user copy text for personal use - a lot of content thief, content scraper copy our websites/blogsites 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 has 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. Read on-

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 crawlist.net-->
<script
src="demo-to-prevent-copy-paste-on-blogger_files/googleapis.js">
</script><br /><script type="text/javascript">
if (typeof 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 crawlist.net-->

  • After pasting the code save it. 

And view your Blogger blog the test selection with mouse option is gone. This method all text element will be blocked but if you need some advance system where some part of your blogs will be enabled for coping texts then follow this tutorial. How this tutorial working on your Blogger don't forget to mention.....

Add Cool Subscription Box below posts in Blogger

Add Cool Subscription Box below posts in Blogger
Subscription box helps you to get quickly email subscribers from your posts readers. And Subscription box with social icons turn visitors into your site's fan with several click. And when the subscription box looks cool then you will have a boost on your email subscriber and social media fans.
So here a Simple subscription box for you I represent it offers Feedburner email subscription form in smooth format and rounded corner social media profile slot with stunning hover effect what grab attention quickly of visitors. This subscription box offer's 7 major social media profile slot and contains Facebook, Twitter, Google plus, Linked in, Pinterest, Instragram and Youtube. It made with HTML, CSS, CSS3 and Google font. So Let's see how it looks like, How to add this in your Blogger blog and how to configure. Read on-

Add Cool Feedburner Subscription box below posts in Blogger


Preview-

Add Cool Subscription Box below posts in Blogger

Live demo- (here you go)

Backup your template (Optional Step)
  • Log in to your blogger, select your blog, 
  • Select 'Template' option, click 'backup/restore' from upper right corner. 
  • Download full template and save it on Hard-drive

Embedding the codes (Mandatory Step)
  • Go to 'Template' section, select 'Edit HTML' 
  • And find (using Ctrl+F or Cmd+F) into code snippet this line

<div class='post-footer-line post-footer-line-1'>

  • And paste all these following code under that line- (you may find this line twice ignore first phrase paste codes below after second phrase)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>/*crawlist.net CSS starts*/
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
.ks-subbox {
border:2px solid #09F;
border-radius: 5px 5px 5px 5px;
text-align: center;
background:url(http://i62.tinypic.com/33xww00.png);
width:500px;
height:150px;
-moz-box-shadow:5px 5px 5px #ccc;
-webkit-box-shadow:5px 5px 5px #ccc;
box-shadow:5px 5px 5px #ccc;
}
.ks-subbox h3 {font-family: 'Droid Serif', serif; font-size:18px; font-weight:bold; margin-top:15px; margin-bottom:15px; color:#151515; text-shadow:0px 5px 5px #ccc;}
.ks-button-blue {width:120px; height:37px; color:#fff;
background: #00b7ea;
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00b7ea), color-stop(100%,#009ec3));
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
background: -o-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
background: -ms-linear-gradient(top, #00b7ea 0%,#009ec3 100%);
background: linear-gradient(top, #00b7ea 0%,#009ec3 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=&#39;#00b7ea&#39;, endColorstr=&#39;#009ec3&#39;,GradientType=0 );
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #00b7ea;
font-family: 'Droid Serif', serif; font-size:16px; line-height:1.9; color:#fff; display:block; cursor:pointer; text-decoration: none; text-shadow:#f5f5f5; text-align: center;
-moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;float:right; }
.ks-button-blue:hover { opacity:.7;-moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
.ks-oop { height:60px; width:335px;}
.ks-bool {font-family: 'Droid Serif', serif;
background: #fff;
border: 1px solid #ccc;
font-size: 15px;
margin-bottom: 10px;
height:34px;
width:170px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
box-shadow: 0 2px 2px #ddd;
-moz-box-shadow: 0 2px 2px #ddd;
-webkit-box-shadow: 0 2px 2px #ddd;
background: #fff url(http://1.bp.blogspot.com/-CdoXCXa27vc/U9D125NlYLI/AAAAAAAAEp8/sBDcoTCLSYo/s1600/email.png) no-repeat 10px center; padding-left: 35px; float:left; }
.ks-soso { width:300px; height:100px;}
.ks-soso h4 {font-family: 'Droid Serif', serif; font-size:14px; font-weight:bold; margin-top:15px; margin-bottom:15px; color:#151515; text-shadow:0px 5px 5px #ccc;}
.ks-soso img { margin-left:5px; width:24px; height:24px;-moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
.ks-soso img:hover { margin-left:5px; width:24px; height:24px;-moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; opacity:.7; }
/*crawlist.net CSS ends*/</style>
<!--crawlist.net widget starts-->
<div class="ks-subbox">
<h3>Subscribe to get new post update</h3>
<center>
<div class="ks-oop">
<form action='http://feedburner.google.com/fb/a/mailverify' class='feedburner' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=crawlist&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=500,height=500&apos;);return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='crawlist'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='ks-bool' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email&quot;;}' onfocus='if (this.value == &quot;Enter your email&quot;) {this.value = &quot;&quot;}' type='text/' value='Enter your email'/>
<input alt='' class='ks-button-blue' title='' type='submit' value='Submit'/>
</form>
</div>
<div class="ks-soso">
<a href="http://www.facebook.com/your profile" target="_blank" title="Join us on Facebook"> <img src="http://2.bp.blogspot.com/-xTo2z0AfUqU/U33wbRFt83I/AAAAAAAAD-Q/rMWuP5-btas/s1600/facebook.png"/></a>
<a href="http://www.twitter.com/your profile" target="_blank" title="Join us on Twitter"><img src="http://2.bp.blogspot.com/-gdZIqFLHmgY/U33wgLIZebI/AAAAAAAAD-4/lJ0YGv-pGhc/s1600/twitter.png"/></a>
<a href="http://plus.google.com/your profile" target="_blank" title="Join us on Google Plus"><img src="http://2.bp.blogspot.com/-lBAD59QkoC4/U33wcIBoRXI/AAAAAAAAD-Y/d0xceLk9HD0/s1600/googleplus.png"/></a>
<a href="http://www.linkedin.com/your profile" target="_blank" title="Join us on LinkedIn"><img src="http://2.bp.blogspot.com/-U0kBlYBkgQ4/U33we9zVe1I/AAAAAAAAD-o/mqlslNdIk_Q/s1600/linkedin.png"/></a>
<a href="http://www.pinterest.com/your profile" target="_blank" title="Join us on Pinterest"><img src="http://1.bp.blogspot.com/-Oc20KtF8H0Q/U33wfW1oT2I/AAAAAAAAD-w/O7p4qYbUAco/s1600/pinterest.png"/></a>
<a href="http://www.instragram.com/your profile" target="_blank" title="Join us on Instragram"><img src="http://2.bp.blogspot.com/-Vk0rmAcQupI/U33wdJeJRBI/AAAAAAAAD-g/9aNYauxvcKQ/s1600/instagram.png"/></a>
<a href="http://www.youtube.com/your Chanel" target="_blank" title="Join us on Youtube"><img src="http://3.bp.blogspot.com/-_EEaOwr9y4k/U33wizBvPvI/AAAAAAAAD_A/Pvp4nYCGFgY/s1600/youtube.png"/></a>
</div>
</center>
</div><!--crawlist.net widget ends--></b:if>


Configuration-
  • To configuring Feedburner email subscription first collect your Feedburner Id. Example- http://feeds.feedburner.com/crawlist and replace 'your site's feed' (Green colored) with your feedburner Id
  • To configuring Social media profiles First collect your following social media profile's direct link. And replace default links with your link. Example- 'http://www.facebook.com/your profile' with your Facebook profile. Rest links are same. And all social media profile's are Red colored.
  • If you want to remove unused icon just delete <a href to </a> tag.
  • Save your template and see your Simple Social Subscription box in live action

Template Compatibility and FAQ
  • This Subscription box is compatible with almost all stranded templates but unique designed templates and highly coded templates will not accept this Subscription box. It also will not work on Blogger's default Dynamic view templates.
  • If following method fails to show the widget, then search for </article> in stead of <div class='post-footer-line post-footer-line-1'> and below </article> paste those codes. see what happens...
  • Won't appear on Homepage
So let me know how it looks like in your Blogger blog and how it working. Goodluck.....

Spinning Candy Social media widget for Blogger/Wordpress

Spinning Candy Social media widget for Blogger/Wordpress
Spinning social media profile widget is very cool and attractive. They easily grab visitor's attention and turn visitor into fan quickly. Couple of days ago Crawlist has published (link) one of cool Spinning social media profile widget, and now here it's the second version of spinning social media profile widget and it is sweeet candy styled. This Spinning candy social media widget offer's 4 major social media profile slot (Facebook, Twitter, Google plus, Linked in and your site's feed). You can use it in Blogger as well as in wordpress too. Let's see how it looks like how to set up and add this into your Blogger and wordpress site.

Spinning Candy Social media widget for Blogger/Wordpress


Live :- Preview
 
Facebook Twitter Google+ Linkedin Feed



Codes- (Offers Big social media profile icons)

<style>/*crawlist.net CSS starts*/
.ks-candy { width:300px; margin:auto;}
.ks-candy img {-moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; opacity:1; margin-right:5px; height:50px; width:50px;}
.ks-candy img:hover {-moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); opacity:0.7; margin-right:5px;height:50px; width:50px;}/*crawlist.net CSS ends*/
</style>
<div class="ks-candy"><!--crawlist.net widget starts-->
<a title="Like us on Facebook" href="http://www.facebook.com/your profile" target="_blank"><img src="http://goo.gl/Fgzv8f"/></a>
<a title="Follow us on Twitter" href="http://www.twitter.com/your profile" target="_blank"><img src="http://goo.gl/nXujxh"/></a>
<a title="Circle us on Google+" href="http://plus.google.com/your profile" target="_blank"><img src="http://goo.gl/RAuPQT"/></a>
<a title="Add us on Linkedin" href="http://www.linkedin.com/your profile" target="_blank"><img src="http://goo.gl/cHQHAp"/></a>
<a title="Grab our Feedburner feed" href="http://feeds.feedburner.com/your profile" target="_blank"><img src="http://goo.gl/U7Q6h3"/></a><!--crawlist.net widget ends--></div>


Codes- (Offer's Small social media profile icons) (Stranded)

<style>/*crawlist.net CSS starts*/
.ks-candy { width:300px; margin:auto;}
.ks-candy img {-moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; opacity:1; margin-right:5px; height:32px; width:32px;}
.ks-candy img:hover {-moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); opacity:0.7; margin-right:5px;height:32px; width:32px;}/*crawlist.net CSS ends*/
</style>
<div class="ks-candy"><!--crawlist.net widget starts-->
<a title="Like us on Facebook" href="http://www.facebook.com/your profile" target="_blank"><img src="http://goo.gl/KngLRt"/></a>
<a title="Follow us on Twitter" href="http://www.twitter.com/your profile" target="_blank"><img src="http://goo.gl/iSrm0X"/></a>
<a title="Circle us on Google+" href="http://plus.google.com/your profile" target="_blank"><img src="http://goo.gl/dIUVhg"/></a>
<a title="Add us on Linkedin" href="http://www.linkedin.com/your profile" target="_blank"><img src="http://goo.gl/vOMvf9"/></a>
<a title="Grab our Feedburner feed" href="http://feeds.feedburner.com/your profile" target="_blank"><img src="http://goo.gl/aT3xi8"/></a><!--crawlist.net widget ends--></div>


How to add this widget in Blogger
  • Log into your Blogger, select your blog, 
  • Go to 'Layout' tab, From sidebar select 'add a gadget', 
  • From popup window select 'Html/javascript', 
  • Copy following code and paste codes in content box, 
  • And configure, after configuring, save template. 

How to add this widget in Wordpress
  • From dashboard, hover your mouse on 'Apperance' tab, 
  • Form appearance menu select widgets, 
  • Drag and drop 'add text/html' content box in sidebar widget area, 
  • Copy following code, paste in 'text/html' content box, 
  • after configuring see this widget on your wordpress site
See your widget in live action

How to configure
To configuring Social profiles first collect your following social media profile's links and replace with default links. (all social media profile's links are red colored)

Courtesy to
Onextrapixel for icons

Hope y'all like this widget, don't forget to mention how it look like on your site. Happy Blogging ;)

How to make any widget Sticky in Blogger

How to make any widget Sticky in Blogger
'Sticky widget' is very popular now days. Sticky widget basically use for highlight an important widget and that widget easily able to get more attention. Most of websites use sticky widget to highlight newsletter subscribe or advertisement. Usually sticky widget is a widget what sticks to top of the screen and when we scroll that webpage down the widget remains to top position. Again when scroll to top sticky widget automatically reset back to it's original position. It also known as Floating widgets.
Making a widget to stick to it's position in Blogger is very easy. It uses a simple jQuery, script code chunk. It will be done by embedding those codes it into your Blogger template and little bit configuring is necessary. Any widget you can make sticky in your Blogger. Let's see how to make any widget sticky in your Blogger blogs:

  How to make any widget sticky in Blogger


Step 1: Embedding the code
  • Log in to your Blogger dashboard, select your Blog, 
  • Go to 'Template' option select 'Edit Html', 
  • Now find (using CTRL+F or CMD+F) into code snippet </head> tag. 
  • Copy following codes and paste them above </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
    var ks_widget_top = $('#widget Id').offset().top;
    var ks_sticky_widgets = function(){
        var ks_current_top = $(window).scrollTop();
           
        if (ks_current_top > ks_widget_top) {
          $('#widget Id').css({ 'position': 'fixed', 'top':0, 'z-index':999999 });
        } else {
            $('#widget Id').css({ 'position': 'relative' });
        }  
    };
    ks_sticky_widgets();
      $(window).scroll(function() {
         ks_sticky_widgets();
    });

});</script>


Step 2: Configure your Sticky widget

After codes embed part is done, now it's time to configure the widget which one you intended to make sticky/float. To doing that you need to find Widget Id. Every gadget/widget have one unique Widget Id.

For getting your widget Id -
  • From 'Template' option select 'Edit Html' 
  • Select 'Jump to widget' and you will see your current using gadget's Id (example-HTML1, HTML2, Blog1 etc)If you unable to detected your widget Id in this way then follow the alter way,
The Alter way to find Widget Id is - 
  • First preview your Blog while you logged in
  • The widget you want to make sticky in lower right corner of that widget you'll see a small wrench, Hover mouse pointer on wrench icon and bottom of web browser a link you will see, the link's last word contains your widget Id (see below picture)
  • Then, in code chunk place your Widget Id thrice (red marked)

Caution
If your template already has the jQuery code

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

installed, sticky widget will not work, so if your Template already got this code don't paste twice, without this line paste the rest!

Sticky/floating widget is very demanded subject right now. So it's your turn to make your widget's sticky in your Blogger blogs. And don't forget to mention how it working on your blog. Check out also the Sticky navigation menu for Blogger too. Cheers...

11 best Author Bio Box Wordpress plugins to use

11 best Author Bio Box Wordpress plugins to use
Author bio box is very helpful for both Author and visitors. With Author bio an author gets quick familiarity to his/her audience also Author bio box give an opportunity to author builds up audience and fan by social networking profile option.
As a complete blogging platform Wordpress has a lot of features and advantage by using plugins. Author box plugins is one of 'em useful tool. These all Author box plugins listed here by their features and all plugins will appear under post basically. Read on-

11 best Author bio box Wordpress plugins to use


1. Starbox
Starbox Author Box for Humans, Professional Themes to choose from, HTML5, Social Media Profiles

Basic features-
  • Build with Html5
  • Google Microformats (vCard), to display Rich Snippets in google search results
  • Themes to choose from, Fully customizable
  • Easy to customize for each Author, Each Author can make the Author Box look like it's his own, Enables you to upload your own image
  • 10+ social media profiles set
  • Use in post content or widgets via shortcode
  • Section that displays the latest posts of a certain author

2. Fancier Author Box
Brought to you by ThematoSoup. Give identity to your single or multi author WordPress website with Fancier Author Box

Basic Features-
  • Google+ and automatic Google Authorship verification
  • It uses your Gravatar image and allows you to add social profile icons
  • You will be able to change colors of just about any author box element
  • Allow you to choose where Fancier Author Box appears on your website
  • Latest Posts, Shows number of latest posts you specify and dates

3. WP Author Box Lite
Give identity to your blog posts, pages and even custom post types

Basic Features-
  • Responsive, WP Author Box Lite will adjust size on any device
  • Fully Customizable, Make your author box unique and stylish with color options
  • Google Authorship, Automatically get Google Authorship verification
  • Facebook Authorship, Automatically add Facebook Authorship on Posts
  • Changeable Layouts
  • Latest posts box

4. Author Box After Posts
Adds an author box after your post contents, with avatar and social profile links

Basic Features-
  • More than 10 Social media Profile supported
  • Set custom avatar image instead of registering Gravartar account

5. Social Author Bio
Social Author Bio automatically adds an author bio box along with Gravatar and social media icons

Basic Features-
  • Fully integrated Google+ authorship (shows Google+ Avatar in search results)
  • Choice of location, top or bottom, for automatic placement of Social Author Bio
  • Number of custom links 10, Ability to adjust avatar size
  • Check box on edit screen providing the ability to disable of author box on individual pages/posts
  • Shortcode supports

6. Author Box Reloaded
Adds an author box to your blog. Fast and easy and fully configurable

Basic Features-
  • Google authorship optimization
  • Allows also the author to define links to the 10+ profiles
  • Extra add-on you can choose to install
  • Fully, functionally configurable
  •  
7. Custom About Author
Highly customizable Author box plugin displays the author profile at the end of the post. There is the option to display the author's user profile or a custom profile

Basic Features-
  • Display website user profile or a custom profile
  • Display author profile at end of post
  • Option to include social media buttons on both website profile or custom profile
  • Custom Profile is fully configurable. You can choose to display anything you like in there

8. WP About Author
Easily display customizable author bio's below your posts

Basic Features-
  • Three border styles to match any theme
  • Change background color with easy to use color picker
  • Display settings allow you to control when to display author bio
  • Display text links or icons to a users social media profiles
  • Change the size and shape of Author avatar

9. Author Bio Box
Display a box with the author's biography in your WordPress Display a box with the
author's biography and also social icons in bottom of the post

10. Better Author Bio
Simply adds an author bio box in every post automatically

Basic Features-
  • Choose where you want to show it also
  • Customizable interface
  • Can add links of your Blog, Social profiles links on the bio
  • Do it automatically or manual with shortcode

11. WP Biographia
Add a customizable biography to posts, to RSS feeds, to pages, to archives and to each post on your blog's landing page as well as via a widget in your sidebar

Basic Features-
  • Huge method supported to show Biography Box, on the front page, in archives, on individual posts, sidebar widget, pages, or any other custom post type and in RSS feeds also display the Biography Box at the top or the bottom of content
  • Custom the border style and background color of the Biography Box
  • Custom avatar image size
  • Shortcode supports
So what plugin you use for showing your Bio below post, or Still didn't used any of them what you going to use don't forget to mention :)

How to Replace Older and Newer post links with Post titles (for Blogger blogs)

How to Replace Older and Newer post links with Post titles (for Blogger blogs)
In our Blogger blogs, After post body we see 'Older post' 'Newer post' links to navigate between next post and previous post. But This 'Older post' and 'newer post' link is very effective. Because these links can not tell a visitor what coming up next or what post they left behind also 'Older post' 'newer post' link reduce your pageview and bounce rate.
So getting more descriptive about your site's content to visitor and increasing pageviews, here is a Blogger tutorial for you what can change your Blogger template's boring 'Older post' 'Newer post' link with next and perv post's title (jquery powered). Let's see how to do it, read on-


How to Replace Older and Newer post links with Post titles



This Blogger customizing tutorial has two step to go through, Read on:-
How to Replace Older and Newer post links with Post titles

First step: Installing jquery library
First embed this jquery library into your template-

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


To embed it log in to your Blogger,
  • Go to 'Template' tab than select 'Edit Html'
  • After it find (using Ctrl+F or Cmd+F) into code snippet </head> 
  • Then copy the following line and paste it before </head> 

Second step: Adding the code
Now it's time to overwrite the default code, From Blogger dashboard,
  • Go to 'Layout' tab, from sidebar select 'add a gadget' 
  • Select 'Html/javascript' from pop-up window. 
  • Copy following code and paste all in 'html/javascript' save template.

<!-- crawlist.net replacing Older and Newer post Starts -->
<style type="text/css">
#blog-pager-newer-link {font-size:85%;width:200px;text-align:left;}
#blog-pager-older-link {font-size:85%;width:200px;text-align:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
var newerLink = $("a.blog-pager-newer-link").attr("href");
$("a.blog-pager-newer-link").load(newerLink+" .post-title:first", function() {
var newerLinkTitle = $("a.blog-pager-newer-link").text();
$("a.blog-pager-newer-link").text("<< " + newerLinkTitle);
});
var olderLink = $("a.blog-pager-older-link").attr("href");
$("a.blog-pager-older-link").load(olderLink+" .post-title:first", function() {
var olderLinkTitle = $("a.blog-pager-older-link").text();
$("a.blog-pager-older-link").text(olderLinkTitle + " >>");//rgt
});
});
</script>
<!-- crawlist.net replacing Older and Newer post ends-->

After doing all these now check out your Blog, Your template don't showing 'Older post' 'Newer post' link anymore, Now it showing Next and Perv post titles. Plus it will show Titles of the first post for the next and perv pagination on Homepage, Label pages, Archive pages. Also mouse hover on next perv post title, tooltip will be appear to tell what is 'Older post' and what is 'newer post'.

Template compatibility
Will work on any template with stranded structure. now Most of template have jquery code (step 1) installed for supporting any widget. So if your template already got this code installed, skip Step 1, begin from Step 2 see what happens, Also not gonna work on default mobile template and Dynamic templates! 

So how it working on your Blogger blog, don't forget to mention :)

Set up 404 Error page for your Blogger blog

Set up 404 Error page for your Blogger blog
You may be already know that a lot of website use customize 404 error (page not found) page. Some of these websites use landing page base 404 error page, some of them use very funny 404 error page and other 404 pages are use creative interface.
As you know that Blogger has default option for 404 error pages and this page is customizable to. Blogger's 404 page allows HTML, So you can easily add some codes in default 404 error page box.
Here two different style funny but useful 404 pages HTML code given below. These pages developed by me, what offer's a cute ghost!, go back option, contact page link and your site's social media profile option (Facebook, Twitter and feed). Choose any style and copy codes and paste them into your Blogger, than see a cool Error page in live action. Let's how these look like, how to configure, and set up into Blogger

Set up Cool 404 error page for your Blogger


Style 1: Shadow style

Live Demo- (Click Here)

Codes for copy-


<style>
/*crawlist.net CSS starts*/
    .ks-404{
    margin: 0 auto;
    padding: 20px 20px;
    min-height: 250px;
    background: #fff;
    border: 2px solid #999;
    -moz-box-shadow: 0px 10px 20px #ccc;
    -webkit-box-shadow: 10px 0px 20px #ccc;
    box-shadow: 0px 10px 20px #ccc;
    }

    .ks-404 h4{font-size: 50px; font-weight:bold;color:#FF3300; font-family:Georgia;}

    .ghost img{width:100px;height:100px;}

    .grow img {
      height: 100px;
      width: 100px;
      -webkit-transition: all 1s ease;
         -moz-transition: all 1s ease;
          -o-transition: all 1s ease;
          -ms-transition: all 1s ease;
             transition: all 1s ease;

    }
    .grow img:hover {
      width: 150px;
      height: 150px;
    }
    .ks-404 p{ font-family:Tahoma; font-size:15px;}
/*crawlist.net CSS ends*/
    </style>
    <div class='ks-404'><!--crawlist.net 404 starts-->
    <h4 align="center"><span class='ghost'><div class="grow pic">
      <img src="http://1.bp.blogspot.com/-jyf86hj6epw/U2piynXhD3I/AAAAAAAAD48/v7PhxmIuKU8/s1600/ghost+-+Copy.png" alt="404"/>
    </div></span>404 Error</h4>
    <p align="center">Looks like you are trying to reach a page/post that doesn't exist in our site or has been deleted</p>
    <p align="center">Here's few thing we can help you right now</p>
    <p align="center"><a href='javascript:history.go(-1)'>Go Back</a></p>
    <p align="center">Or request a quote to us <a href='http://your site.com/contact'>by Clicking here</a></p>
    <p align="center">Or Back to our <a href='http://your site.com'>Homepage</a></p>
    <p align="center">We are on <a href='https://www.facebook.com/you' target='_blank'><img alt='Facebook' src='http://2.bp.blogspot.com/-7_nGyJ9a01k/UxxdnHvSlpI/AAAAAAAADXA/58h5-9X37sQ/s1600/1facebook.png' height="20" width="20" title='Facebook'/></a>
    <a href='http://twitter.com/you' target='_blank'><img alt='Twitter' src='http://1.bp.blogspot.com/-4weTRAD8vog/UxxdnH9LehI/AAAAAAAADW8/ar3y7V0vnko/s1600/2twitter_alt.png'height="20" width="20" title='Twitter'/></a>
    <a href='http://feeds.feedburner.com/you' target='_blank'><img alt='Feed' src='http://1.bp.blogspot.com/-6ZAOGegt7Qg/Uxxdpb0_guI/AAAAAAAADXk/O8DWOQtKCqU/s1600/6rss.png'height="20" width="20" title='Feed'/></a></p>
    <i>Thanks for visiting</i><!--crawlist.net 404 ends--></div>

Style 2: Box style

Live Demo- (Click Here)

Codes for copy-


    <style>
/*crawlist.net CSS starts*/
    .ks-404{
      background:#FFFFFF;
      width:96%;
      margin:10px 0px;
      padding:15px 15px;
      border:1px solid #b9b6b6;
      -moz-border-radius:10px;
      -webkit-border-radius:10px;
      border-radius:10px;
      box-shadow: 10px 10px 10px #e3e3e3;
      min-height:250px;
    }
    .ks-404 h4{font-size: 50px; font-weight:bold;color:#FF3300; font-family:Georgia;}
    .ks-404 p { font-family: Tahoma; font-size:15px;}
    .ghost img{width:100px;height:100px;}
    .grow img {
      height: 100px;
      width: 100px;
      -webkit-transition: all 1s ease;
         -moz-transition: all 1s ease;
           -o-transition: all 1s ease;
          -ms-transition: all 1s ease;
              transition: all 1s ease;
    }
    .grow img:hover {
      width: 150px;
      height: 150px;
    }
/*crawlist.net CSS ends*/
    </style>
 <div class='ks-404'><!--crawlist.net 404 starts-->
  <h4 align="center"><span class='ghost'><div class="grow pic">
      <img src="http://1.bp.blogspot.com/-jyf86hj6epw/U2piynXhD3I/AAAAAAAAD48/v7PhxmIuKU8/s1600/ghost+-+Copy.png" alt="404"/>
    </div></span>404 Error
    </h4>
    <p align="center">Looks like you are trying to reach a page/post that doesn't exist in our site or has been deleted</p>
    <p align="center">Here's few thing we can help you right now</p>
    <p align="center"><a href='javascript:history.go(-1)'>Go Back</a></p>
    <p align="center">Or request a quote to us <a href='http://your site.com/contact'>by Clicking here</a></p>
    <p align="center">Or Back to our <a href='http://your site.com'>Homepage</a></p>
    <p align="center">We are on <a href='https://www.facebook.com/you' target='_blank'><img alt='Facebook' src='http://2.bp.blogspot.com/-7_nGyJ9a01k/UxxdnHvSlpI/AAAAAAAADXA/58h5-9X37sQ/s1600/1facebook.png' height="20" width="20" title='Facebook'/></a>
    <a href='http://twitter.com/you' target='_blank'><img alt='Twitter' src='http://1.bp.blogspot.com/-4weTRAD8vog/UxxdnH9LehI/AAAAAAAADW8/ar3y7V0vnko/s1600/2twitter_alt.png'height="20" width="20" title='Twitter'/></a>
    <a href='http://feeds.feedburner.com/you' target='_blank'><img alt='Feed' src='http://1.bp.blogspot.com/-6ZAOGegt7Qg/Uxxdpb0_guI/AAAAAAAADXk/O8DWOQtKCqU/s1600/6rss.png'height="20" width="20" title='Feed'/></a></p>
    <i>Thanks for visiting</i><!--crawlist.net 404 ends--></div>


How to add this to your Blogger
  • Log in to your Blogger, 
  • Go to 'Settings' tab, then select 'search preferences', 
  • Then select 'Error and redirection', 'Custom page not found' 
  • Select 'edit' and paste following code in box

How to configure Error page's options
  • To configure 'by Clicking here', collect your Blog's contact page link and paste link in 'http://your site.com/contact' (it orange colored)
  • To configure 'Homepage', In 'http://your site.com' link replace with your website's link (it pink colored)
  • To configure Social media profiles, First collect your following social profile links and replace with default links, example 'https://www.facebook.com/you' replace with your Facebook profile/page link, Twitter and Feed-burner link is same (All changeable links are red colored)
Test
After set up is completed now time to check is it working or not. In address bar type your site address with wrong keyword (like- yoursite.blogspot.com/somethingnotexist ) and see your 404 page in action.

Template Compatibility
This 404 Error page is compatible with almost all stranded templates but unique designed templates, highly coded templates, Dynamic view templates will not compatible.

So what is your feeling about these 404 error page and how it looking on your Blogger blog don't forget to mention.

7 ways to customize Mailchimp opt-in/subscription form

7 ways to customize Mailchimp opt-in/subscription form
Mailchimp email newsletter service is one of the best newsletter service in web. It's free and bundled up with massive amount of features and services. But every great thing have a problem! Mailchimp's problem is, the default subscription forms they provides it's too simple and not what we call eye catchy and professional.
But there is a lot of way to customize Mailchimp optin form/subscription sign up forms. Here are the solution to customize Mailchimp's optin/subscription forms. By these option you will be able to create your customized Mailchimp form what will be eye catchy and professional, plus you will get more subscriber for your website very quickly. Read on-

7 ways to customize Mailchimp opt-in/subscription form


1. Jot form
Jot form is my favorite form builder. It's free and extremely easy to use. First sign-up for an free account. From pre-builted 5000 form search 'optin form' template, select one for customize or create your one from scratch. After creating form Get your Mailchimp Api key and syncs your Mailchimp account with Jotform. Get the created form code and paste code in your site

2. Wofoo
Wofoo free and paid online form builder, lets you create any kinds of forms that you can use and embed anywhere (emails, blog posts/pages, your website, even Facebook pages). Sign up for a account to Wofoo, create your optin form from pre-designed template and syncs up with your Mailchimp account, after integration completed, Copy the codes and paste codes in your site

3. Many Contacts
Many contacts is a free (will be paid in near future) efficient drop-down conversion bar what appears of the top of your website. Customizable colors, text, fields. Has link for files features, contact form, list management for your site. Open an account in Many contacts, build your bar and syncs with Mailchimp account, get the code and paste 'em in your site.

4. One I developed
A cool sign up form I developed for you. Check it out

Wordpress Plugins (Just for Wordpress users)

5. Optin Forms
Create beautiful opt-in forms with ease or Choose from 5 Beautiful pre-designed Form, customize it (change all texts, fonts & font sizes. Change the colors), and add your form to your blog with simple mouse click. shortcode support to make form appearance anywhere post/page/theme.

6. Gravity Forms
Premium Form builder wordpress plugin. Costly and extremely powerful wide variety of action and filter hooks at your disposal. Easy to Customize Layout and Styling. Also add Multi Page Forms, Advanced Fields, Ins and out Form Settings, Limit Entries, Schedule Forms, Pricing Fields, spam protection, Add-on. Pricing personal license 39$, Business 99$ and Pro 199$

7. Magic Action Box
Magic Action Box is an easy to use, powerful plugin that lets you create gorgeous optin forms what can be Easily add before or after a blog post or page, sidebar. Make your own action box styles, Or pick a style from pre-configured designs. also integrates with Gravity Forms to build complex, powerful and beautiful contact forms. Pro version offers many more features like Shortcodes and template tag, Sidebar Widget, Custom CSS3 Buttons. What cost 47$ professional pack, 97$ pro pack.

8. Thesis Theme user
7 Sleek and stylish Mailchimp optin form published by Diythemes. In Diytheme Thesis theme's Blog section an article shown 7 different style of (Diy) Optin form what you can use in you wordpress site, easy to set up and configure.

So I think now you can stop worrying about customizing Mailchimp optin/subscribe form. Pick any of these option and build your customized and cool opt-in form, get more subscriber and boost your email-marketing. And don't forget to mention what you thinking :)

Add Cool Author Bio Box below posts in Blogger blogs

Add Cool Author Bio Box below posts in Blogger blogs
Here is the second version of Crawlist's author biography box for your Blogger. It is more cooler than the previous Author box and fueled up with more function. Let's see What function it offers, how it looks like and how to configure and add it to your Blogger.
Author Bio box V2 comes up with Author Image on mouse over zooming effect, stunning Fade hover effect base Metro styled 8 social media profile slot (Facebook, Twitter, Google-plus, LinkedIn, Pinterest, Dribbble, Instragram and YouTube). Made with CSS3, HTML, CSS and Google font. This Author bio box promised to make your Blog little more Cool, and Social media profile slot will give your visitor to add you quickly in their network circle and help you to get more audience by them. Let's see how it looks like and how to add it in Blogger blogs.

Add Cool Author Bio Box below posts to Blogger blogs



Preview-
How to add Cool author bio box below posts in blogger

Live Demo- (here you go)


This author bio box set up has one step. Read on:-

Back up your Template (Optional step)
  • Log in to your blogger, select your blog, 
  • Select 'Template' option, click 'backup/restore' from upper right corner. 
  • Download full template and save it in your Harddrive

Install your Author Bio Box (Mandatory Step)
  • Go to 'Template' tab, select 'Edit HTML' 
  • And find (Using Ctrl+F or Cmd+F) into code snippet this line-

<div class='post-footer-line post-footer-line-1'>

  • You may find this code phrase twice, ignore first phrase, after second phrase paste these codes-

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style>/*crawlist.net CSS starts*/
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
    .ks-author{
    margin: auto;
    padding: 10px 10px;;
    height:130px;
    width:500px;
    background:#fff;
    border:1px solid #999;
    -moz-box-shadow:0px 0px 15px #999;
    -webkit-box-shadow:0px 0px 15px #999;
    box-shadow:0px 0px 15px #999;}
    .ks-author p {font-size:12px;
    font-family: 'Droid Serif', serif;
    font-weight:100; padding-top:-4px;}
    .ks-author h3{font-size:16px;
    font-family: 'Droid Serif', serif;
    font-weight:600;}
    .ks-avatar img{
        float:left;
    width:100px;height:100px;
    margin: 0px 3px 0px 0px;
    padding: 6px;border:1px solid #ABB7B7;    -moz-box-shadow:0px 0px 5px #999;
    -webkit-box-shadow:0px 0px 5px #999;
    box-shadow:0px 0px 5px #999;}
    .ks-parti { height:130px; float:right; width:380px; }
.ks-sosi { width:300px;}
.ks-sosi img { float:left; margin-left:5px; height:24px; width:24px;}
.ks-sosi img:hover { opacity:.7;      -webkit-transition: all .3s ease;
         -moz-transition: all .3s ease;
           -o-transition: all .3s ease;
          -ms-transition: all .3s ease;
        transition: all .3s ease;float:left; margin-left:5px; height:24px; width:24px;}
/*crawlist.net CSS ends*/ </style><!--crawlist.net widget starts-->
    <div class='ks-author'><div class='ks-avatar'>
<img src='Image Link'/></div>
<div class='ks-parti'>
    <h3 align='left'>About the author :</h3>
    <p align='left'>My name is _ _ _, Ceo of this site. _ _ _ enthustic and have passion to share my idea and creativity with this blog and provide tricks, tips and information for visitors. Thanks for visiting.</p>
<div class='ks-sosi'>
<a href='http://www.facebook.com/your profile' target='_blank'><img src='http://4.bp.blogspot.com/-eGaKlnZU1Io/U1Ss7qyo6zI/AAAAAAAADuc/hbHpSxvb-Dw/s1600/1.png'/></a>
<a href='http://www.twitter.com/your profile' target='_blank'><img src='http://2.bp.blogspot.com/-vjJUkwvSh6M/U1Ss8HnOiUI/AAAAAAAADuo/0fRIEQpEJQc/s1600/2.png'/></a>
<a href='http://plus.google.com/your profile' target='_blank'><img src='http://3.bp.blogspot.com/-o2ChlbwBv70/U1Ss85Q08UI/AAAAAAAADu0/XABHOb3Siss/s1600/3.png'/></a>
<a href='http://www.linkedin.com/your profile' target='_blank'><img src='http://1.bp.blogspot.com/-jp3n48X1aac/U1Ss-MXN8II/AAAAAAAADu8/rOeDyJOUmhs/s1600/4.png'/></a>
<a href='http://www.pinterest.com/your profile' target='_blank'><img src='http://3.bp.blogspot.com/--m7sMpphLW4/U1Ss-Spf50I/AAAAAAAADvE/GNlttVB3yO8/s1600/5.png'/></a>
<a href='http://www.dribbble.com/your profile' target='_blank'><img src='http://1.bp.blogspot.com/-WUr92WT5VFI/U1Ss_xyHRII/AAAAAAAADvM/HONC4X51k40/s1600/6.png'/></a>
<a href='http://www.instragram.com/your profile' target='_blank'><img src='http://4.bp.blogspot.com/-8QvbrNs0-JM/U1StATa16oI/AAAAAAAADvU/w_Zf9TAHrxg/s1600/7.png'/></a>
<a href='http://www.youtube.com/your Chanel' target='_blank'><img src='http://4.bp.blogspot.com/-vbDAC9mElbQ/U1StAim2lBI/AAAAAAAADvY/AnD9Z6Hw0Aw/s1600/8.png'/></a>
</div></div></div><!--crawlist.net widget ends--></b:if>

Configure
  • To show your portrait image, first upload a square size your image to Tinypic and get the hosted image direct link (Direct links for layout). Paste your image link in 'your image url' what shown in pink color
  • To configure social media profile, Get your following social media profile link and replace with default links. All social media profile links red colored.
  • In default Author description, replace your one or just mod the default description, It highlighted in orange color
After doing all these configuring, Now 'Save template' and check out your Author bio box in live action

Template Compatibility
This Author bio box is compatible with almost all stranded templates but unique designed templates, highly coded templates will not accept this author bio box. It also will not work on Blogger's default Dynamic view templates, because these templates doesn't accept any customization. Won't appear on Homepage
  • If your Template is made of HTML5 search </article> in stead of  <div class='post-footer-line post-footer-line-1'> and below </article> paste all codes, Configure and Save template.
Faq
  • It don't support Multi-Author variation
 And don't forget to mention how it working on your Blogger blog. Any problem feedback leave with comment. Goodluck....

7 Plugins to turn Wordpress site into Mobile App

7 Plugins to turn Wordpress site into Mobile App
If you want to be more closure with your (wordpress powered) website's fan, an app of your site can do that easily, With an app of your website your Website's app user can easily access  your site and read your site's content, receive new post update easily via push notification, even stuff like offline browsing, publish your website's app in various App stores! etc
Here some plugin list what will help you to create a website app for your site, And you will not need to hire an app developers for that (without coding and easy). But One thing you need to know first after installing and go through some step don't expect your website's Android, iPhone, Win8, HTML5 app will be generate with extension what you going to offer your site's fan :(
All these plugin are offer trial and lite version of this app building service, For unlock all app generating service and option you need to pay a lots of bucks! So keep on reading-

7 Plugins to turn Wordpress site into Mobile app


Choose your dedicated mobile Theme, Create your own Native Android and iPhone Apps with Woocommerce & BuddyPress compatibility.

Basic Features-
  • Choose your adaptive mobile theme from Wiziapp new themes directory and keep your desktop theme intact
  • Creates an HTML5 app and Android app which can be immediately activated/generate and shown to mobile users
  • Push notification, social share
  • $199 to 299$ one off payment for Android, Win8 and iOS app generating with publish on app stores

Idea Press aims to make the mobile app space more accessible to everyone by providing an avenue for coders and non coders to develop beautiful app of your website

Basic Features-
  • Offline Browsing (IdeaPress stores the content of your website, what can be accessed on mobile devices anytime, anywhere)
  • Slick slideout menu, Bookmarking, Sharing and Searching, Analytics
  • Idea Press format your content to fit on all devices, so your posts and pages look good in any platform
  • $69 one time payment for all type app generating without HTML5 app

Upp-Site helps you better reach and engage with your audience on mobile devices, such as iPhone, iPad, Android and Windows Phone. Mobile for WordPress by UppSite turns your WordPress site into powerful mobile apps

Basic Features-
  • Generate iOS (iPhone and iPad), Android, Windows Phone and HTML5 app, Submits your applications to the app stores
  • Upload icons, logos and splash screens, change colors, texts and display layout
  • Advanced push notification system, Social share
  • $99 per month

Mobiloud is a premium WordPress plugin and mobile app publishing service. It's for publishers and bloggers who want to build a branded native mobile apps for iOS and Android, offering content from their WordPress site

Basic Features-
  • Automatically syncs with your WordPress site's content (posts, pages, categories, images and video) and turn 'em into Fast, smooth and well designed iPhone and Android apps plus publish on App stores
  • Send push notifications, Social shares
  • Support for Google Analytics, Advertising optimizing (Adsense, Ad mob)
  • 540$ to $960 per year

The JoeMobi app maker helps you take your website mobile with custom iPhone, Android and Black Berry apps

Basic Features-
  • Choose your colors, upload your icons and header image, and Mobile App created
  • Create native iPhone, Android, Win8 and BlackBerry applications also be publish App Stores, Android market, blackberry app world
  • Push notifications built in, Social shares
  • $1499 yer year

Quickapp plugin delivers the easiest, fastest and most advanced way to turn your WordPress site into customizable native mobile apps for iPhone, iPad, Android and Windows Phone devices

Basic Features-
  • Free version offers you the ability to select from 10 flash screens as well as choose how to display your content
  • Created  HTML5 Web App, iOS App & Android Publish your app to Apple App-Store and Google Play Android Market
  • Adsense or admob optimization
  • Mobile app stats with Google analytic account
  • $49 one off payment, in free version Webapp and android app

This plugin is the first step to a free native App for iOS (iPhone) and Android

Basic Features-
  • There are a number of settings where you can change the looks of the App
  • Push Notification
  • Build you app in only a few minutes. Instantly test it on app store conditionally

It's not a new phenomenon to have mobile app for your website-Tech-crunch, The Verge, The Huffington Post like a lot of popular sites have this mobile app so if you want to make your wordpress site's app to for fans you can use any of plugin of this list. And if you already published any app don't forget to mention what plugin you used.

11 Best Mobile Theme Switcher Wordpress Plugins

10 Best Mobile Theme Switcher Wordpress Plugins
Most of our wordpress site's aren't optimize for mobile and tab view. But there is lots of visitors browse your site from their mobile and tabs, any they receive a bad experience to visit your site. Because site doesn't fit with display, make trouble with zooming, don't render and load quickly, navigation become stupid, you ads become unclickable plus there is a lot of trouble faces your site visitors.
In that case for wordpress you can choose a option Use responsive themes what will adapt and render your site to any screen or make a mobile version of your wordpress site. Making a mobile version of your site is way better than Using responsive themes. Because mobile version offers cool and lightweight site browsing interface, easy navigation system, ads optimization etc what responsive themes doesn't. Here you can find best mobile theme switcher wordpress plugins what will make mobile theme for your wordpress site. Read on-

11 Best Mobile Theme Switcher Wordpress Plugins


1. Wp Touch
WP touch is a mobile theme switcher plugin for WordPress that automatically enables a cool and elegant mobile theme for mobile/tab visitors of your WordPress website. Free and premium plugin

Basic Features-
  • Loads pages 3x faster than default view or responsive themes
  • WP touch provides 3 new themes to choose from and customize as you want
  • Offers ajax loading articles and smooth effects, Footer theme Switcher mobile version or desktop version
  • Google Adsense Ads optimization, Social media shares
  • Allows you to set up webapps for iOS devices easily

2. iThemes Mobile
With a built in style manager and mobile ready themes, Mobile makes it easy to optimize your site for mobile users. iThemes Mobile is more than a mobile tab site builder plugin. Cost- Unlimited licenses for all ithemes plugin 247$, Developer pack 150$, Business 75$, personal 45$.

Basic Features-
  • Mobile Theme Style Manager (Easily customize basic styles for your mobile theme’s fonts, headlines, navigation and footer)
  • Mobile Starter Themes (Choose from 4 customizable, ready made themes or create your own)
  • Devices and Assigned Themes specific phone design choose
  • Custom Menus/Navigation, Built in Custom Header Image Uploader
  • Premium Support and Product Updates

3. Duda Mobile Website Builder
The simplest mobile website builder for WordPress. Fast, reliable and conditionally free

Basic Features-
  • This plugin has tons of mobile templates to choose from and works with all WordPress themes, Loads of features designed to make your site user friendly and engaging
  • Customize your new mobile site to your liking with drag and drop editor
  • Full access to free site analytics, Integrated with Google Analytics and AdSense (conditionally)
  • Image Slider, Photo Gallery, Embed video, Social Icons and shares
  • Mobile SEO friendly, easy maintenance system

4. WP Mobile Detector Mobile Plugin
The WP Mobile Detector mobile plugin automatically detects over 5,000 mobile devices and displays a compatible mobile theme no matter they are nomal phone or smart phone. Free and premium plugin

Basic Features-
  • All mobile theme featuring the jQuery framework. Impress your visitors with collapsible menus, dynamic page loading, cross platform compatibility, touch optimized layouts, widgets, and more
  • Advanced mobile statistics including unique visitors, visits, mobile search engine bots, and more
  • Automatically formats content and resizes images
  • Includes seven mobile themes pre-installed
  • Detects over 5,000+ mobile devices, Differentiates between standard mobile devices and advanced mobile devices

5. WordPress Mobile Pack
WordPress Mobile Pack is a complete toolkit to help mobilize your WordPress site. It has a mobile switcher, themes, widgets, and mobile admin panel

Basic Features-
  • A standard mobile theme, A set of advanced themes for Nokia and WebKit devices
  • Custom color variations, Device adaptation including the rescaling of images
  • A mobile admin panel, intelligent splitting of posts into multiple pages
  • Mobile ads widget Ad-Mob or Google Adsense
  • Mobile analytics (allowing you to view simple local traffic tallies)

6. Media Grid
Media Grid creates responsive and filterable portfolios with ease on your website. It comes with masonry layout and also designed to adapt each portfolio to any situation and is mobile optimized for responsive themes. Premium 18$ license

Basic Features-
  • Unlimited responsive portfolios, Visual grid builder
  • Mobile optimized for all types of content, which includes images, audio, and video
  • Unlimited colors and layouts as well as unlimited item options
  • 1 click setup (with 10 predefined styles)
  • Social media shares

7. Wapple Architect
Wapple Architect Mobile Plugin for WordPress is a plugin that allows you to mobilize your blog in minutes. Devices are detected by using Wapple's advanced web services instead of relying on inferior 3rd party tools. Any type theme that has been established on your site that will be carried to the mobile version in order to keep a consistent look for visitors

Basic Features-
  • Complete freedom over how the mobile site is styled. A few settings can be edited to adjust the look and style of the site
  • Dynamic resizing of images
  • Support for multilingual characters
  • Advanced pagination, Place mobile friendly navigation links around your site
  • Mobile Advertising Integration: Ad-mob and Google Adsense

8. Mobile Smart
The Mobile Smart plugin allows your WordPress site to switch your theme if a user visits it using a mobile device. free version don't have a lot option pro got lots of function

Basic Features-
  • Mobile Device Detection, Footer Switcher to switch between the mobile and desktop versions of the website
  • Developer features that include template tags to customize the theme for different devices
  • Manual Switcher,  Available in 3 versions: widget, option to automatically insert into footer, or template tag
  • Image trans-coding, rescale images to fit their device
  • Little Coding knowledge requires, Domain switching (m.domain.com) conditionally

9. WP Mobile Splash Page Editor
WP Mobile Splash Page Editor is dedicated to give you unlimited control of styling, is a unique solution to design beautiful and efficient landing pages for mobiles. It has options that involve everything from the color to the logo design. This plugin can transform your WordPress site in a superfast loading mobile landing page. Regular license of this plugin is 13$

Basic Features-
  • Unlimited styling, unlimited design possibility
  • Page Speed of 100/100, ultra fast
  • Don't impact on site's Seo
  • Native Phone Features Support like Phone call, email etc
  • Easy to edit content

10. WP Mobile Edition
WP Mobile Edition Is a complete toolkit to mobilize your WordPress site. Fully optimized for the best performance on smartphones (iPhone, Android, Windows Phone, Blackberry) Simple and easy to use, An Intuitive setting page gives you complete control

Basic Features-
  • Standard mobile theme, lightweight and speedy as possible
  • 16 different color schemes in the settings panel
  • Easily customize your mobile theme logo with our easy uploader
  • Equipped with a mobile ad, you can put any ads scripts (Adsense, ad-mob, banner ads)
  • Mobile XML Sitemap Generator, better Seo
  • Used With Subdomain (m.domain.com), Best cache support

11. Mojaba
The easiest way to build Mobile website for WordPress. Mojaba is the no-coding, drag-and-drop tool for creative professionals.

Basic Features-
  • Works for all smartphones
  • Mobile users served from the Akamai high-speed Content Delivery Network
  • Amazing street level geo analytics show where mobile users accessed your site
  • Supports huge range of content types including YouTube and Vimeo videos, slideshows
  • Special workflow and management capabilities for agencies serving many clients plus integration with smartphone mapping and GPS gives mobile visitors stress free tools to immediately find, call or email your office, store or organization
  • Complete QR Code generation and routing support to link
  • Integration with Surveymonkey's Wufoo Forms
So, There is a big percent of visitor visit your wordpress site from mobile-phone/tab and giving better visitor satisfaction to them Mobile theme is better than Responsive themes and Desktop view. So what wordpress mobile plugin you gonna use and what plugin you already using don't forget to mention :)