10 Free Fantastic Wordpress Template Built with Bootstrap

After a long time I'm sharing a wonderful collection of Free Wordpress Templates fully powered by Bootstrap3. The collection includes Gallery blog, Portfolio, Personal blog, Branding Design and more. 

1. Fullby

Fullby was inspired by the Twenty Fourteen default theme and its Fluid Modular Grid Responsive. It has Easy video publication- copying and and pasting the id of a youtube video and lots more.


2. Arcade Basic

A big and bold header image will quickly grab the attention of anyone who visits your site. It supports post formats and includes special styles for Jetpack galleries.


3. Blain

Blain is a Minimal Responsive theme with Plenty of premium features including Numbered page navigation, Responsive Slider, Customizable Header & Footer, 4 Page Layouts, Custom Widgets & User Friendly Time Display. Blain also has a powerful admin options panel, which lets you modify your site to a great extent.


4. Adament

Adament is a free premium responsive WordPress theme from fabthemes.com. This theme is built onBootstrap 3 framework.
This is a photography WordPress template. This is ideal to setup a photography related website.


5. Flat Theme

Best free responsive WordPress Theme based on twitter bootstrap 3.0. Advanced theme option with shortcodes generator is the key feature of this theme. There are tons of custom post type for Accordion, Tab, Alert, Slider, Columns, Icons, Services and many more.


6. Nova Lite

Nova is a responsive clean Tumblog WordPress Theme, based on Bootstrap framework. The theme support all modern browsers like Firefox, Chrome, Safari, Opera and Internet Explorer 8, 9 and 10 and uses the most modern technologies like Html5 and Css3.


7. Flat

Flat is a Personal WordPress Theme design & developed by YoArts. We like to say that Flat is both beautiful and charming at the same time.


 8. Vangard

Vangard is a free premium WordPress theme. This is a WordPress 3+ ready theme with features like custom menu, featured images, widgetized footer etc. Theme also comes with an option panel. The homepage of the theme has a customizable jQuery content slider.


 9. Ward

Create a truly unique design with Ward, a lightweight and fully responsive HTML5 theme based on the Gridiculous boilerplate. Use the new Theme Options customizer to add your own background, page layout, site width and more. Distinguish each post with one of the eight supported post formats, such as: Video, Image, Aside, Status, Audio, Quote, Link and Gallery. Install JetPack to display each of your galleries through a tiled view and jQuery carousel. Compatible with bbPress & BuddyPress.


10 Lobster

Lobster is lightweight, versatile and fully responsive. You can add your own background, set page layouts and more. Lobster supports eight post formats: Video, Image, Aside, Status, Audio, Quote, Link and Gallery.


If you like this post, don't forget to share.

Mashable Menu Style For Blogger

Presenting a New Ajax Blogger Navigation like Mashable.com. It'll show up the latest posts with Thumbnail as shown in the picture above as you hover any category. Its very advantageous for magazine blogs and news blogs.
Bellow is the process How to apply it on your blog. A link to a Demo is bellow, Check out.


Add this CSS code before ]]></b:skin>
/* Menu Stylings */ .w2bmenu *{margin: 0;padding: 0;} ul.w2bmenu {background: #ededed;background: -moz-linear-gradient(top, #ededed 0%, #e0e0e0 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#e0e0e0));background: -webkit-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -o-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: -ms-linear-gradient(top, #ededed 0%,#e0e0e0 100%);background: linear-gradient(to bottom, #ededed 0%,#e0e0e0 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#e0e0e0',GradientType=0 );list-style: none;width: 960px;margin: auto;border: 1px solid #cccccc;line-height: 1;} ul.w2bmenu:after{margin: 0;padding: 0;content: ' ';display: block;height: 0px;clear: both;} ul.w2bmenu li{list-style: none;float: left;position:relative;margin: 0;padding: 0;} ul.w2bmenu li a{margin: 0;padding: 12px 16px;font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;color: #6b6b6b;text-shadow: 0 1px 0 #fff;font-weight: 700;text-transform: uppercase;font-size: 12px;display: block;} ul.w2bmenu li a:hover,ul.w2bmenu li a.hoverover{background: #f5f5f5;} ul.w2bmenu ul{position: absolute;display: none;top: 100%;border:1px solid #ccc;} ul.w2bmenu li:hover > ul{display: block;} ul.w2bmenu ul li{float: none;min-width: 160px;background:#f5f5f5;text-shadow: none;} ul.w2bmenu ul li a{padding: 12px 14px;text-transform: none;font-weight: normal;} ul.w2bmenu ul li a:hover,ul.w2bajaxmenu ul li a.hoverover{background: #fff;} ul.w2bmenu ul ul{display: none;left: 100%;top: 0;} /* AJAX Menu Stylings */ ul.w2bajaxmenu li div.submenu {display: none;position: absolute;width: 600px;z-index: 90;left: -1px;top: 100%;overflow: hidden;min-height: 150px;background: #fff;border:1px solid #cccccc;border-top: 0 none;} ul.w2bajaxmenu li:hover div.submenu {display: block;} ul.w2bajaxmenu ul {display: block !important;border: 0 none !important;} ul.w2bajaxmenu ul li{background: none !important;} ul.w2bajaxmenu ul.verticlemenu{position: absolute;width: 33%;left:0;top:0;bottom: 0;background: #f5f5f5;} ul.w2bajaxmenu ul.postslist {position: relative;display: block;width:65%;float: right;margin: 8px 0;background: none;} ul.w2bajaxmenu ul.postslist li{display: block;overflow: hidden;border-bottom: 1px #eee solid;position: relative;min-height: 60px;padding: 8px 8px 8px 110px;} ul.w2bajaxmenu ul.postslist li:last-child{border-bottom: none 0;} ul.w2bajaxmenu ul.postslist li .imgCont{position: absolute;left: 0;top:8px;width: 100px;height: 60px;overflow: hidden;border:1px solid #dcdcdc;font-size: 0;line-height: 0;} ul.w2bajaxmenu ul.postslist li .imgCont img{position: relative;top:-20px;padding: 0;width: 100px;height: 100px;display: block;} ul.w2bajaxmenu ul.postslist li a{display: block;line-height: 1.4;padding: 0;} ul.w2bajaxmenu .loader{background:url('http://i.imgur.com/SeivG.gif') no-repeat scroll 0 0 transparent;width:22px;height:22px;position: absolute;top:50%;margin-top: -11px;right:5px;} ul.w2bajaxmenu .menuArrow {border-bottom: 4px solid transparent;border-top: 4px solid transparent;border-left: 4px solid #999999;display: block;height: 0;margin-top: -4px;position: absolute;right: 11px;top: 50%;width: 0;}

Now Add the bellow jQuery Library before </head> Tag
<script type="text/javascript" type="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"/></script>

Now Again Add the bellow jQuery Library before </head> Tag
<script type="text/javascript" src="http://widgets.way2blogging.org/blogger-widgets/ajaxbloggermenu.min.js"></script> 
<script type="text/javascript"> jQuery(document).ready(function($) {             $('#w2bajaxmenu').ajaxBloggerMenu({ numPosts : 4,  defaultImg : 'http://url-to-image.com/default-image.jpeg' }); }); </script>

Now For Menu Links Use the following <ul> class and id.
<ul id="w2bajaxmenu" class="w2bmenu">
You are done.
If you still have any problem in setting up the menu. Please comment bellow. I'll help you to do so. 

Wordpress Facebook Post Embed Plugin by TSD

I'm very excited to announce my first plugin for wordpress: "Wordpress Facebook Post Embed".

Facebook has added a new feature called “embedded posts” like twitter. This feature is not currently publicly usable though. Some popular web-news, magazine sites are using this feature. I came across a nice method by Amit Agarwal and created this wordpress plugin to make it more easier. Now by using this plugin you'll be able to embed any public facebook post into your wordpress blog. Its simple and easy. Just download and activate and you're ready to embed facebook posts.

Plugin Details:

Name: Wordpress Facebook Post Embed

Description: Plugin for embedding  facebook posts into wordpress blog

Author: Sunil Kumar Samanta

Version: 1.0

Plugin URI: http://www.thesoulofdesign.com

How to Install:

Got approved by Wordpress and hosted on wordpress repo. So Download it from Wordpress.org.

Go to your wordpress dashboard>>Plugins
Search for Wordpress Facebook Post Embed and install it.

Otherwise Upload the file and activate.

How to Use:

After activating, In any post just add a facebook post link with the shortcode as bellow.

How to get the post link:

Go to facebook and click on the publish time of a post and the post will open. Then copy the url of the page and use it for the post embed. Still if you have any query please comment bellow. :)


Download Wordpress Facebook Post Embed Plugin bellow

If you like my plugin or you have some suggestion or report a problem please post a comment bellow.

Blogger's Meta Tags Configuration for Better SEO

Do you use blogger? Are you serious about blogging? Make some changes in your blog's code and make it attractive for search engines. Add some Meta Tags in your template's code and you are done.

How to add meta tags?

Simply login to your blogger dashboard, go to  template and edit HTML. Now place the full code given bellow between <head> and </head> tags. And then save the template. If you are still facing problem, email me your template, I'll do the rest. :)

Here is the Full code Sample. All the tags are explained bellow.

<meta name="author" content="AUTHOR NAME" />
<meta name="robots" content="index, follow" />
<meta name="revisit-after" content="2 days" />
<meta name="language" content="en-us" />
<meta name="geo.country" content="COUNTRY SHORT CODE" />
<meta name="geo.placename" content="NAME OF THE PLACE" />
<meta name="distribution" content="global" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="rating" content="general" />

Lets see what each code means.

<meta name="author" content="AUTHOR NAME" />
Author tag is used to inform a search engine who the author of the blog is.

Description tag is a brief description about your blog.

Keywords tag informs a search engine about the most interesting topics of your blog.
KEYWORD tag is no more used by Google!

<meta name="robots" content="index, follow" />
Robots tag allows search engine to crawl. If you put NOFOLLOW in content field. Your blog'll block search engines for indexing.

<meta name="revisit-after" content="2 days" />
Revisit-after tag asks a search engine to come back in 2 days and index again.

<meta name="language" content="en-us" />
Language tag tells about the language of your blog.

<meta name="geo.country" content="COUNTRY SHORT CODE" />
Geo Country tag tells a search engine about your blog's base country. Ex.: Use IN for India.

<meta name="geo.placename" content="NAME OF THE PLACE" />
Geo Place Name tells a search Engine about the base place of your blog.

<meta name="distribution" content="global" />
This is not important. This tag tells about degree of distribution of your blog.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
Content Type tag tells about your content type.

<meta name="MSSmartTagsPreventParsing" content="true" />
This tag disables a feature that only appeared in the IE6 betas.

<meta name="rating" content="general" />
Rating tag says the rate of your page's audience appropriateness. Such as safe for kids or general etc.

I think everything is clear. If you are still confused, please feel free to comment here.

Image courtesy of Flickr

How to Use Hashtags on Facebook

Officially #hashtags became a part of your favorite social network Facebook. Here is how to Use Hashtags on Facebook.

What are #Hashtags and where can I use it?

#hashtags are some kind of linked tags using which you can see what the world is talking about the topic publicly.

You can use it in any posts, comments, photos etc.. Ok lets see how to use it.

How to create Hashtags?

While updating new status type a '#' symbol followed by the topic you want to tag, A blue box will cover your tag like the figure bellow.

Anything can be a hashtag like #facebook, #cat, #love etc. After you click post the post should look like bellow.

View Hashtags

Now you can view your hashtags by clicking on it. As soon as you click on a hashtag a popup box will overlay on the screen with the public posts on the tagged topic like bellow. Here we used the tag #hashtag

Search for Hashtags

You can search for the hashtags too.. add a '#' before the word and open the desired hashtags and see what the world is saying about it.

Hope everything is clear right? What do you think about hashtags on facebook. Feel free to comment here.

Happy #hashtagging

Introducing Hashtags on Facebook

Facebook finally announced #Hashtags for public conversations. Hashtags are just the first step to help people more easily discover what others are saying about a specific topic and participate in public conversations and now you can use Hashtags on Facebook.

You already heard of this on twitter, Instagram, Tumblr, or Pinterest. Now you can Use it on facebook posts.
When you click on a hashtag in Facebook, you'll see a feed of what other people and Pages are saying about that event or topic.

What you can do?

  • Search for a specific hashtag from your search bar. For example, #NBAFinals.
  • Click on hashtags that originate on other services, such as Instagram. 
  • Compose posts directly from the hashtag feed and search results.

As always, you control the audience for your posts, including those with hashtags.

What do you think about this decision of Facebook?