Wednesday, 31 October 2012

Run Android Apps On PC

BlueStacks App Player lets you run apps from your phone fast and full screen on Windows and Mac.

Over 5 million people around the world use top apps like Angry Birds Space, Kik Messenger, Where’s My Water and more on their laptops with BlueStacks. It took 10 engineers two years to build the complex "LayerCake" technology that enable this to happen – but you get to experience it free while in beta.

Just download this software and start using your favorite app on your pc. Choose your operating system below to download:


Monday, 29 October 2012

Removing Facebook Timeline

Half of users of facebook really hates new facebook timeline and they are tired of finding a way to remove it. Well earlier today i was searching Google Chrome Web Store and i found a really good tool for every browser to remove new facebook timeline.

First of all you can's disable timeline forever, you can just disable it on your own browser not publicly. After downloading this extension your timeline will be remove only on your own browser not publicly.

So time to get on download this extension on your favorite browser (Chrome/Firefox/Safari/IE) just visit and choose your browser.

You can also download extension below:

Google Chrome:

Mozilla Firefox:


Internet Explorer:

Setting Up robots.txt On Blogger

Months ago Blogger introduced custom robots.txt feature. This feature improve your blog's SEO but newbies really afraid to use this feature because it says :

Warning! Use with caution. Incorrect use of these features can result in your blog being ignored by search engines.

But don't worry guys today we'll learn about this feature here on this article.

By default, every blog that uses the Blogger platform will have a robots.txt as follows:

User-agent: Mediapartners-Google

User-agent: *
Disallow: /search
Allow: /


As you can see in above robots.txt there are three parts of code and let me explain them to you.

Mediapartners-Google is a robot from Google Adsense, leave it because if you changed this then ads will not served will not fit with your content.

The next line is for all the robots and marked with an asterisk (*). On the default configuration, it is clear that the label of our blog is not indexed Disallow: /search.

Keep in mind that a slash (/) is as your homepage, so for example if you want the label to get indexed, do not just fill up with a slash like this Disallow: / because that would be you do not allow the robot tracing your blog.

For example if you want to block a robot for particular page ( for example contact page) you can simply write as follows:

User-agent: Mediapartners-Google

User-agent: *
Disallow: /p/contact.html
Allow: /


Warning! Use with caution. Incorrect use of these features can result in your blog being ignored by search engines.

Saturday, 27 October 2012

Using Custom Short Domain With

As i promised in this article i'll teach you how to use your own short domain with So we have to do two things. One in your CNAME Records and second in your account so let's start with CNAME:

  • Visit you domain provider (for example BigRock or GoDaddy).
  • Click on your DNS Manager and Add A CNAME
  • In Host Name type your SubDomain (for example: and in Value put just like below pic:

Well after updating CNAME records you have to wait for several hours because it takes a bit time to update CNAME and all DNS records. After one or two hours you can do for second step:

  • Click on Settings tab in top menu > Click on Short Links

  • In Short Links tab click on Add Custom Domain and a pop-up will appear their you can put your domain name and it's done.

You can post your questions in the comment section below.....

Thursday, 25 October 2012

Redirect Your Feed To Social Networking Sites

As we mentioned in several posts that social sharing is a great way to get some really good traffic to your site but it really sucks to tweet and update every single posts to all of our facebook pages, profiles and twitter profile. In this condition getting a free site to do this for us is a better idea. got all what we are looking for. With we can share our feeds to all of our social networks on the go. It's simple we just have to confirm all our routes once and after this it'll automatically redirect all your content. is free for all our basic use but if you're using more than five feeds and three social networking profile then you have to pay a cheep monthly amount to them. So what are we waiting for just visit and get started.

In next article we will show you how to use our own domain with

Watch Flagged YouTube Videos Without Logging In

Youtube is so high on removing adult videos from their site and also youtube ask users to verify their age for watching flagged video which really makes me sick. My Google account is banned from Youtube and because of it i can't watch any flagged youtube video without logging out of my Google account. Last year while searching for funny memes i found a meme with a trick to watch flagged youtube video.

Unfortunately, I lost that meme image but i still got that trick on my mind which i'am going to share with you all guys. Make sure you're using a pc with flash player.

Here is a link of a flagged video by Smosh :

You can't watch above video without signing in now remove watch? and = from above link and make it look like this :

Wow that's easy..... here is a basic structure of this link

Hope this will help you.....

Tuesday, 23 October 2012

BigRock Promo Codes : .ORG Domain @ Rs 299

BigRock is back with another superb discount on .ORG domains. Now you can get a .ORG domain @ Rs. 299 only plus get a 5 Page DIY package FREE for 6 months with every .ORG Domain. !!! So don't waste your time and score a .ORG. You can get a .ORG For Rs 299 by clicking here.

Why Choose BigRock? :

BigRock is an ICANN-Accredited Domain Name Registrar that sells Domain names at the most competitive rates in the industry. BigRock's platform powers over 6 million domains. At BigRock they have a seamless domain search process and our cheap domain registration prices are upto 80% lesser than other Registrars. Bigrock is India #1 domain registration and web hosting provider. On BigRock you can register domain names in many different name spaces including .com, .net, .org, .biz, .info, .mobi, .in,,, .asia and many other spaces. Additionally they offer 24X7 support for all your domain registration and web hosting services. So if you are looking for Domain Registration in India look no further. BigRock is the destination for you!.

So go and get a .ORG for Rs 299 only by clicking here.

Note : This is a limited time offer only but if this offers expires then you can always get 10% discount on domains by clicking here.

Sunday, 21 October 2012

Amazing Paginator3000 Widget For Blogger

This amazing widget is created by the amazing Abu Farhan and you can check his blog by clicking here. This page navigator supports more than 500 pages even more and this is the most beautiful page navigation widget ever for blogger. Thanks to Abu Farhan for creating this widget. Here we go:

  • Go To Blogger > Template > Edit Html > Search for ]]></b:skin> and just above it post following css:

.paginator {
.paginator table {
.paginator table td {
.paginator span {
padding:3px 0;
.paginator span strong,
.paginator span a {
padding:2px 6px;
.paginator span strong {
.paginator .scroll_bar {
width:100%; height:20px;
.paginator .scroll_trough {
width:100%; height:3px;
.paginator .scroll_thumb {
width:0; height:3px;
top:0; left:0;
.paginator .scroll_knob {
top:-5px; left:50%;
width:20px; height:20px;
background:url( no-repeat 50% 50%;
cursor:pointer; cursor:hand;
.paginator .current_page_mark {
top:0; left:0;
width:0; height:3px;
.fullsize .scroll_thumb {
.paginator_pages {

  • Now find </body> and just above </body> post following script:

<script src='' type='text/javascript'></script>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=6;
<script src='' type='text/javascript'/>

Change based on your blog setting :
var postperpage=7;
var numshowpage=6;

Postperpage : How many Post every Page for your blog
numshowpage : how Many number will show in Your page Navigation

  • Now click on "Expand Widget Templates" and find 'data:label.url' and replace it with following code:

'data:label.url + &quot;?&amp;max-results=7&quot;'

Change 7 base on how many post every page..........

10 Tips For Beginner Bloggers

Blogging world is getting large everyday as so many peoples are creating blogs and it's hard for all of them to capture their targets and follow their blogging dream. So today i'am sharing few tips that might help all new bloggers:

1. Follow your niche: For every successful blogger it's important to follow your niche. Blogging is not what peoples like, It's what you like and you're good at. Before starting blogging you should figure out what you're going to blog about if you want to be a foodie blogger, a lifestyle blogger, a sporty blog, a sex blogger (yep I love them), it depends on what you like.

I love pro-wrestling so i stared a blog on Wrestling stuff and right now i got over 3k posts on it and i'am writing more posts everyday. That's the best part that you'll never get bored of posting what you're good at.

2. Choose a perfect name: A perfect blog needs a perfect name which is related to what you're blogging at. First of all never choose your name as your blog's name or address. Try to choose a name which attract Google and which is easy to remember for your fans.

Always try to choose an original name and don't copy names of other websites. I guess someone said "What's In The Name...."

3. Improve your looks: It's hard to find a perfect design for your blog but don't worry about that because you can get tons of templates for your blog by searching them on Google or you can get a simple template then customize it on your own. I mean it's just a waste of money if you're buying a premium template because free templates are as good as paid.

Choose a design according to your niche and which doesn't annoy your visitors. Because just like girls every blog wants to look sexy.

4. Writing is a must: Most importantly bloggers should focus on their content because good content is everything for your readers. Take a time to improve your writing skills and don't write like me (Believe me i do lots of mistakes). Always double check your article before posting to see your spelling and grammar mistakes.

Always give full information in your posts because sometime we just ignore something and thinks that it's a common-sense but believe me internet is full of experts and some really dumb guys.

5. Get involved in social media: Social media is a great way to earn new visitors and get in touch with old ones. Sites like facebook, twitter, youtube really helps us to earn some great traffic. Who knows maybe you become the next big thing of social media. Try to stay connected with all visitors on social networking sites.

It's important to make a facebook page for your blog and sharing your content on social media with your fans and friends.

6. Stay in touch: As i said it's good to stay in touch with your visitors and just like that it's also good to always stay in touch with your visitors by helping them and answering their comments. Maybe that visitor pay you for doing some work in their blog or maybe you find some good friends.

If your blog has a forum then make sure to participating in user posts so they think that you're interested in their activity.

7. Ask: Don't afraid of taking help of other bloggers and peoples they won't bite at all. I mean not everyone knows everything so i think it's a great idea to take some help from other bloggers and ask what you don't know.

It's never to hard to Google your problems. Well Google is the worlds best book so as our parents said "Read Books"

8. Y U NO USE MEMES: Don't just blog like a nerd mix up some memes and funny images to attract your readers. I know you're the biggest joke in the world but still you need some funny things on your posts to earn some real loyal fans.

It's not hard to find some amazing images for your blogs just Google it and you'll find tons of images.

9. Respect copyrights: Sharing content is good but don't forget to give the real owner of that content some credits. I mean he/she can claim you for using his/her content without their permissions so don't forget to respect their copyrights and give them some credits or some kind of shout-out on your blog.

Come on copy cats i know some of you guys also copy my content at-least you can post a link to my blog as a reward....Damn!!!

10. Let a life: To stay healthy and to keep your mind fresh it's really important to give yourself a little break. I mean don't spend full day in front of your PC. Go outside, have fun, hangout with your friends, date your girlfriend (Real one not online).

Sleep is important so don't forget to sleep at-least 6 hours everyday. This will keep your mind fresh and will also reminds you that there is a world outside your computer.

I hope these tips may help you in future and also i hope that after reading this you'll love to give me credits of my content you copy cats :p ....Happy blogging!!!

Saturday, 20 October 2012

How To Block An IP Address On Blogger

It's too hard to deal with spammers and copy cats but if some how you find their IP address then this article may help you. It's php based tutorial then we first need a php file hosting.

  • Copy/paste the PHP code below in a notepad
  • Replace IP Address 1, IP Address 2, and IP Address 3 with the actual IP addresses you want blocked
  • Save the file as a .php file (ex. ipblocker.php)

Blogspot IP address blocker.
$iplist = array(“IP Address 1″,”IP Address 2″,”IP Address 3″); // the list of banned IPs
$ip = getenv(“REMOTE_ADDR”); // get the visitors IP address
// echo “$ip”;
$found = false;
foreach ($iplist as $value) { // scan the list
if (strpos($ip, $value) === 0){
$found = true;
if ($found == true) {
echo “top.location = “error.html”;n”; // page to divert to

Upload your newly created PHP file on any PHP supported web hosting service like and

Now paste following script in your blog's template just above </head> :

<script language=’javascript’ src='URL of your php File' type='text/javascript'></script>
Save your template and it's done.... :)

Make Your Own URL Shortening Service With Google Short Links

As soon as your website becomes big we all want to include some advanced features and we all wants to create short links with our own domain not with or any other services and Google Short Links is perfect for us.

With Google Short Links you can create your own url shortening service in some easy steps. All you need is a custom domain with DNS management and a Google Apps account.If you don't have a Google Apps account then you can create it within minutes for free by clicking here.

Here is an example of what we're going to create. Just visit

Now after creating your Google Apps account add Google Short Links app on your account at this link. By default your redirection service will be available at but you are free to choose any other sub-domain for this purpose. From the dashboard, open your Short Links settings and add a new URL (I picked and then deleted the default links sub-domain.

Next open your web domains cpanel (DNS manager) and create a new CNAME record for the same sub-domain that should point to or as shown on their instructions.

Wait for a couple of minutes for the DNS changes to propagate across the Internet and your TinyURL clone is ready to serve. Here’s the default web interface where you can create short URLs using your Google Apps account.

You can check a sample of our short links :

I hope this may help you.....

Get A Free .in Domain And Web Hosting From Google

Google and HostGator is giving free .in domain and hosting for one year so i really prefer you all to try this because it's good to try all thinks like this before buying your first domain and hosting and it's totally free and if you like it then after one year you can renew your plan to get your domain and hosting.

Here's what you'll get:

  • Free easy-to-build professional website
  • Free .in domain name and hosting for one year
  • Free email addresses
  • Free 365 days support

There's no thinking twice. Get started today. Just go to and apply for your free .in domain.

Thursday, 18 October 2012

Downloading Paid Android Apps For Free

Choosing an Android phone or tab is a really smart choice because Android OS is owned by Google and it provides you best apps for your device. You can choose from millions of cool free and paid apps on Google Play but lot of us don't think paying for apps is a good idea so here we are with a nice trick to download all paid Android apps for free all you need is an internet connection and an Android phone.

First of all let me clear that i'am not responsible for any content you download for free because this is totally illegal so do this on your own risk.

OK so this is easy to download paid apps for free just follow these steps :

For this we need a file sharing website so i'am going to use 4shared for this so you can simply do this by visiting or you can download 4Shared App on your Android device by clicking here.

After downloading 4Shared app or visiting their website Sign Up for a free account on 4Shared and on search-bar search for your favorite Android app with the .apk format for example if you wanna download Temple Run then search for Temple Run.apk and download it and have fun for free.

Let me explain this to you 4Shared is a file sharing website and anyone can upload their file on 4Shared for free so the paid app you're downloading for free is probably uploaded by a person who paid for it.

If you're on an old device then you might need to download .apk installer on your Android to install these apps.You can find lots of .apk installers on Google Apps for free.

Tuesday, 16 October 2012

Social Subscription Scrolling Slider Widget For Blogger

After searching web finally i found a cool social subscribing widget for blogger. This widget contains like button, follow button and +1 button which will surely help you to build your social blogging network. Well there is nothing in the world like Social Blogging Network but i thought it was cool. Here we go:

  • Go To Blogger > Layout > Add A Gadget > HTML/JavaScript > Paste following code:

<script type="text/javascript" src=""></script>
<script type="text/javascript">$(window).scroll(function(){if($(document).scrollTop()>=$(document).height()/4)$("#mblsocialslide").show("slow");else $("#mblsocialslide").hide("slow");});function closeMBlsocialslide(){$('#mblsocialslide').remove();$.ajax({type:"POST",url:"/facebookpage.php"});}</script>
#mblsocialslide{background:#f3f3f3;border-radius:9px;-moz-border-radius:9px;-webkit-border-radius:9px;-moz-box-shadow:inset 0 0 3px #333;-webkit-box-shadow:inset 0 0 3px #333;box-shadow:inner 0 0 3px #333;padding:12px 14px 12px 14px;width:300px;position:fixed;bottom:13px;right:2px;display:none;z-index:3;height:65px;}
<div style="display: none;" id="mblsocialslide">
<a style="position:absolute;top:14px;right:10px;color:#555;font-size:10px;font-weight:bold;" href="javascript:void(0);" onclick="return closeMBlsocialslide();">(X)</a>
<span style="font-family: Tekton Pro; font-size: 20px; margin: 10px 0; text-shadow: 1px 1px 0 #FFFFFF;">Don't forget to join our community!</span><br />
<div style="float:left; margin:15px;"><g:plusone annotation="none"></g:plusone></div>
<div style="float:left; margin:15px;"><iframe src="//" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe></div>
<div style="float:left; margin:15px;"><a href="" class="twitter-follow-button" data-show-count="false" data-size="large" data-show-screen-name="false">Follow Us</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);;js.src="//";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div>
<div class='clear'></div>

  • Now replace TwitterUsername with your twitter username and PageUsername with your facebook page username and save it.....

Monday, 15 October 2012

Adding Read More Button On Blogger

Showing full post on homepage is not a good idea at all and it also makes your blog's loading a bit slow. So now i'am going to tell you how to add Read More button on your blog to make loading fast and giving a pro look to your blog. Here we go :

  • Go To Blogger > Template > Edit HTML > Search for </head>
  • Just above </head> paste following script:

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
<script type='text/javascript'>
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
strx = s.join("");
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;

If you want to change image thumbnail size then find these numbers 100 and  120.

  • Now click on Expand Widgets Template and search for <data:post.body/> and replace it with following code :

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType == "static_page"'>
<div expr:id='"summary" +'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<>");
<a class='more' expr:href='data:post.url'>Read more ...</a>

Save It and we're take a look at your blog...... 

Sunday, 14 October 2012

Amazing Social Sharing Widget For Blogger

Social Sharing is best way to get more visitors but it only effects if your visitors shares your good content on their social network and a good social sharing widgets really helps you to attract more visitors and a really good button helps you to add it directly on your blog so as you can see in above image this widget is totally awesome so you can add this widget by clicking on the "Add To Blogger" button below :

Make sure to add this widget just below posts on your layout.

Friday, 12 October 2012

Google + Style Subscription Box Widget For Blogger

Here is another cool subscription box for Blogger. You can call it a Google + style or a Chrome style but believe me it really doesn't matters what you say because all it matters is what your visitors say. So here is this quick and easy tutorial :

  • Go To Blogger > Layout > Add A Widget > HTML/JavaScript > Paste below code :

<div class="subscribe_outer">
<div class="subscribe_wrapper">
<p>Subscribe Updates, Its FREE!</p>
<div id="btntEmailsub">
<form class="btntEmailform" target="popupwindow" onsubmit="'', 'popupwindow', 'scrollbars=yes,width=600,height=540');return true" method="post" action="">
<input type="hidden" value="FeedID" name="uri">
<input type="hidden" value="en_US" name="loc">
<input class="emailText" type="text" value="Enter your email..." onfocus="if (this.value == " enter="" your="" email...")="" {this.value="" }"="" onblur="if (this.value == " ")="" ;}"="" onclick="value=''"name="email">
<input class="emailButton" type="submit" value="Signup Now!" title="">

.subscribe_outer {
    background: url("") repeat scroll 0 0 transparent;
    margin: 0 -10px;
    padding: 5px 0;
.subscribe_wrapper {
    background: url("") repeat scroll 0 0 #333333;
    color: #CCCCCC;
    font-size: 15px;
    line-height: 20px;
    padding: 10px 50px 18px 38px;
.emailButton {
    border: 0 none;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    font-weight: bold;
    padding: 10px 40px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
    width: 100%;
.emailText {
    background: url("") no-repeat scroll 10px center #FFFFFF;
    border: 0 none;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.05) inset;
    color: #444444;
    padding: 10px 40px;
    margin: 0 0 15px;
    outline: none;
    text-decoration: none;
    width: 70%;
input, textarea {
.subscribe_wrapper {
    color: #CCCCCC;
    font-size: 14px;
    line-height: 20px;
.emailButton {
    width: 300px;
.emailButton {
    background: -moz-linear-gradient(center top , #30A146 0%, #249334 100%) repeat scroll 0 0 transparent;
    border: 0 none;
    border-radius: 4px 4px 4px 4px;
    color: #FFFFFF;
    cursor: pointer;
    font-weight: bold;
    padding: 10px 40px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
    width: 100%;

Now in above code change FeedID with your feed id.

For example if your feed url is then WidgetCraft is your FeedID

Thursday, 11 October 2012

How To Edit Blogger Mobile Template

In this post we're going to learn about how to edit our blogger template for mobile phones so please starting this don't forget to enable mobile template on your blogger by visiting template section.

How To Customize The Structure Of Your Mobile Template :

Blogger Templates are made by using widgets. Blogger has added a new property (mobile) to the <b:widget/> tag. This property can take the following values: ‘default', ‘yes', ‘no', ‘only'. As you may have guessed, this property will determine how the widget will be rendered in the mobile view.

By default, the widgets that will be shown on mobile are:

  • Header
  • Blog
  • Profile
  • PageList
  • AdSense
  • Attribution

a) If you want to hide any of said widgets, you need to use the property mobile='no' in the widget tag. By doing so, that widget would no longer appear in the mobile view.

For instance, you can hide the Attribution Gadget in Mobile view if you use:

<b:widget id='Attribution1' locked='true' mobile='no' title='' type='Attribution'/>

b) If you want  to display a non-default widget in the Mobile view of your Blogger blog, then just set its mobile property to 'yes'.

Here is an example:

This is the normal tag for the Blog Archive Widget:

<b:widget id='BlogArchive1' title='Blog Archive' type='BlogArchive'>

When you set the mobile property as

<b:widget id='BlogArchive1' title='Blog Archive' mobile='yes' type='BlogArchive'>

you should see the Archive Widget on your Mobile view.

c) If you want a widget to appear only in the mobile view, you can achieve this be setting the Mobile property to 'only':

<b:widget id='Attribution1' locked='true' mobile='only' title='' type='Attribution'/>

If you use this tag, the attribution gadget will disappear from your desktop view, and will appear only on the mobile view.

How To Customize The Look And Feel Of Your Mobile Template :

You can fully customize the look of your mobile template. The body element of the mobile template will be styled by the mobile class:

<body class='loading mobile'>

Make sure that your template contains the following line of code:

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

If you have experience working with CSS, you can use this class name to style your mobile template.

.mobile .date-header {

Alternate Widget Content On Mobile View :

When you switch to the Custom Mobile Template, you might find that the template is too huge to fit into a Mobile Browser. If you want you can provide alternate content inside a widget.

For example:

<div class="widget-content">
<b:if cond="data:blog.isMobile">
<!-- Show a text link in mobile view.-->
<a href="">
Powered By Blogger
<!-- Show an image link in desktop view.-->
<a href="">
<img expr:src="data:fullButton" alt="Powered By Blogger"/>

This code will show a Powered by Blogger Text link on the Mobile View and a Powered by Blogger image on the normal desktop view.

The condition

<b:if cond="data:blog.isMobile"/>

can be used to check if a visitor is viewing your blog in a mobile browser or not. You can use this conditional check creatively and give a totally different look to the mobile version of the blog.

That’s all!

Google Page Rank Checker

Check Page Rank of your Web site pages instantly:

Wednesday, 10 October 2012

Facebook Style Select List

So we're back with a new post and also a new domain so now WidCraft is BWidgets and today i'am sharing this amazing CSS FB style select list with you guys. So many of us creates Facebook layouts so i think this will help :


This is a <div class="dropdown" id="dropdown">
            <a class="dropdown_button dropdown_close" href="#">Buy/Listen <span class="arrow"></span></a>
        <a class="dropdown_button dropdown_open" href="#dropdown">Buy/Listen <span class="arrow"></span></a>
        <ul class="dropdown_content">
            <li><a href="#">Buy on iTunes</a></li>
            <li><a href="#">Buy on Amazon</a></li>
            <li><a href="#">Buy on CD Baby</a></li>                              
            <li><a href="#">Listen via Spotify</a></li>                                                              

            <li><a href="#">View on YouTube</a></li>                                                              
            <li><a href="#">View on</a></li>                              
            <li><a href="#">View on</a></li>
    </div> button in the middle of a line of text.


a {
    color: #3b5998;
    text-decoration: none;
a:hover { text-decoration: underline }
h2 {
    color: #3B5998;
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
.dropdown {
    /* display: block; */
    display: inline-block;
    margin-right: 3px;
    margin-left: 3px;
    position: relative;
.dropdown .dropdown_button {
    cursor: pointer;
    width: auto;
    display: inline-block;
    padding: 4px 5px;
    border: 1px solid #AAA;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    font-weight: bold;
    color: #717780;
    line-height: 16px;
    text-decoration: none !important;
    background: white;
.dropdown:target .dropdown_button {
    border: 1px solid #3B5998;
    color: white;
    background: #6D84B4;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-topright: 2px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-radius: 2px 2px 0px 0px;
    border-radius: 2px 2px 0px 0px;
    border-bottom-color: #6D84B4;
.dropdown .dropdown_close { display: none }
.dropdown:target .dropdown_close { display: inline-block }
.dropdown:target .dropdown_open { display: none }
/* .dropdown .dropdown_button img {
    height: 14px;
    margin-top: 1px;
    margin-bottom: 1px;
    float: left;
    margin-right: 5px;
   ================================================== */
.arrow {
    display: inline-block;
    width: 0px;
    height: 0px;
    border-top: 5px solid #6B7FA7;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
.dropdown:target .arrow {
    border-top: 5px solid #fff;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
.dropdown .dropdown_content {
    display: none;
    position: absolute;
    border: 1px solid #777;
    padding: 0px;
    background: white;
    margin: 0;
.dropdown:target .dropdown_content { display: block }
.dropdown .dropdown_content li {
    list-style: none;
    margin-left: 0px;
    line-height: 16px;
    border-top: 1px solid #FFF;
    border-bottom: 1px solid #FFF;
    margin-top: 2px;
    margin-bottom: 2px;
.dropdown .dropdown_content li:hover {
    border-top-color: #3B5998;
    border-bottom-color: #3B5998;
    background: #6D84B4;
.dropdown .dropdown_content li a {
    display: block;
    padding: 2px 7px;
    padding-right: 15px;
    color: black;
    text-decoration: none !important;
    white-space: nowrap;
.dropdown .dropdown_content li:hover a {
    color: white;
    text-decoration: none !important;
.dropdown .dropdown_content li img {
    height: 14px;
    margin-top: 1px;
    margin-bottom: 1px;
    float: left;
    margin-right: 5px;
    border: none;

I know it's damn professional so just go and try this on your documents and blogs.....

Article Source :

Tuesday, 9 October 2012

BigRock Promo Codes : .COM Domain @ Rs 249

BigRock is back with another superb discount on .COM domains. Now you can get a .COM domain @ Rs. 249 only!!! So don't waste your time and score a .COM. You can get a .COM For Rs 249 by clicking here.

Why Choose BigRock? :

BigRock is an ICANN-Accredited Domain Name Registrar that sells Domain names at the most competitive rates in the industry. BigRock's platform powers over 6 million domains. At BigRock they have a seamless domain search process and our cheap domain registration prices are upto 80% lesser than other Registrars. Bigrock is India #1 domain registration and web hosting provider. On BigRock you can register domain names in many different name spaces including .com, .net, .org, .biz, .info, .mobi, .in,,, .asia and many other spaces. Additionally they offer 24X7 support for all your domain registration and web hosting services. So if you are looking for Domain Registration in India look no further. BigRock is the destination for you!.

So go and get a .COM for Rs 249 only by clicking here.

Note : This is a limited time offer only but if this offers expires then you can always get 10% discount on domains by clicking here.

Saturday, 6 October 2012

3 Best Websites For Creating A Free Newsletter

Newsletter is the best way to stay connected with you visitors and email them some new and hot content of your site. For my website i was finding some newsletter sites and with all research i found three useful and amazing sites to send your visitor a free and professional style newsletter.

1.Tinyletter : Tinyletter is the easiest and most stylish free newsletter service ever. It's easy to create newsletters on Tinyletter with the help of their rich text and html editor and it's 100% free to use and easy to create. It takes only 1 minute to setup your Tinyletter account and start sending newsletter to your subscribers.You can also embed your newsletter subscription form on your blog.

2.MailChimp : MailChimp allows you to send free newsletter to your subscribers with some really professional templates and with a really powerful newsletter system. It's a both free and premium service , you can send 1200 mails per-month to 2000 subscribers for free after crossing mails/subscribers limit you have to pay a little amount to access more mails and subscribers.

3.Letterpop : Letterpop allows you to create some really vintage and awesome newsletter with his easy to use drag and drop newsletter editor. Put your images , text , flickr images and all in your newsletter and send it by email , feeds , social networks and more.

Well i hope that after reading this you found a new newsletter service for your newsletter.

Thursday, 4 October 2012

White Bread Blogger Template

Download Demo

White Bread Blogger Template is first template created by me and it looks really good with a sleek look and some advance features like Bread Crumb and Page Navigation. Please leave your feedback.....

It Contains :
Display Post Author, Date, Labels And Comments Widget.
Custom AddThis Sharing Widget.
Numbered Page Navigation.
Add 3 Column Footer.
Animated CSS3 Navigation Menu.
Breadcrumb Navigation.

How To Install A Blogger Template

Blogger offers to so much free template but they don't look professional at all so when it comes to use a custom blogger template first question comes into a new blogger's mind is how to do that so here we're going to explain you :

  • First go to your favorite blogger template resource and download your favorite template or you can also create your own template.
  • Your download will contain a .xml file so we have to install this .xml file in our blog.
  • Go To Blogger > Template > Click on 'Backup/Restore' :

Now take a deep breath and eat some cookies because we're moving to next step which was easy as hell so just read carefully :

  • After clicking on Backup/Restore button a pop-up will appear. Now choose your .xml template file and click on upload just like this :

Now after clicking on Upload it'll take several seconds to upload your template (Depends on your net connection and template size) and after completing loading your new template is ready to use.....Enjoy

Tuesday, 2 October 2012

Display Post Author, Date, Labels And Comments With Icons Below Post Titles

Today i'am sharing a great post by Helper Blogger. Here is a great widget to show author name , time , label and a comment bar with icons just below your blogger post titles. When there are no comments posted,the comment link says 'Be the First to comment!' and when there is just one comment it says '1 comment so far'. Here we go :

Installing :

  • Go To Blogger > Template > Edit HTML > Tick expand widget templates check box.
  • Now search for <div class='post-header-line-1'> and just above it paste following code :

<font style='background:transparent url( no-repeat scroll top left;padding-left:25px;font-size:11px;'><></font> | <font style='background:transparent url( no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.timestamp/></font> | <font style='background:transparent url( no-repeat scroll top left;padding-left:25px;font-size:11px;'><b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url + &quot;?max-results=8&quot;' rel='tag'><></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>|</b:if>
<span class='post-comment-link' style='Float:right;'>
        <b:if cond='data:blog.pageType != &quot;item&quot;'>
          <b:if cond='data:post.allowComments'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick' style='background:url( no-repeat;Padding-left:20px;'><b:if cond='data:post.numComments == 0'>Be the first to comment!<b:else/> <b:if cond='data:post.numComments == 1'><data:post.numComments/> Comment so far<b:else/><data:post.numComments/> Comments so far</b:if> </b:if></a>

Customizing :

  •  You can change all icons of this widget and also text to display then there is one or zero comments.

Custom AddThis Sharing Widget For Blogger

Here is a sharing widget created by me with the help of AddThis script and first of all i just wanna clear that this is a sharing widget not a link to your social media profiles and it's awesome so trust me and add this.

Just click on Add To Blogger button below and add it on your blog :

Numbered Page Navigation For Blogger

You may saw this navigation on wordpress and other amazing sites by now because of Abu Farhan you can also use this amazing navigation in blogger.So here we go with this quick tutorial :

Installation :

  • Go To Blogger > Template > Edit HTML > Search for ]]></b:skin> :
  • Just above ]]></b:skin> paste following css :

.showpageArea {
.showpageArea a {
.showpageNum a {
border: 1px solid #ccc;
margin:0 5px;
.showpageNum a:hover {
border: 1px solid #ccc;
.showpagePoint {
border: 1px solid #ccc;
background: #f0f0f0;
margin:0 5px;
.showpageOf {
margin: 0 5px 0 0;
.showpage a {
border: 1px solid #ccc;
.showpage a:hover {
.showpageNum a:link,.showpage a:link {

  • Now search for </body> and just above it paste following script :

<!--Page Navigation Starts-->
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.searchLabel'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
<script src='' type='text/javascript'/>
<!--Page Navigation Ends -->

The var pageCount = 5; section defiines the number of posts displayed on each page, while var displayPageNum = 5; defines the number of links which are displayed on navigation widgets.

  • Save it and enjoy :)

How To Add 3 Column Footer To Blogger

In past i posted a post about 3 column footer widget which was cool but this time this footer is a simple and a basic one but still it looks real good. So without wasting any time just move on to tutorial :

Installing :

  • Go To Blogger > Template > Edit HTML > Search for ]]></b:skin> :
  • Just above ]]></b:skin>  paste following css :
/* ----- End 3 Column Footer Widget Code by  ----- */
#lower-wrapper{ -moz-box-shadow:0 0 7px rgba(0,0,0,0.5);  background:#fff; margin:10px auto 0;  padding:5px 0px 0px 0px;  width:1000px;  border:1px solid #dbe1e6;}
#lowerbar-wrapper{ color:#333;  float:left;  margin:0px auto auto;   padding-bottom:20px;  width:332px;  text-align:justify;  font-size:100%;  line-height:1.6em;  word-wrap:break-word; /* fix for long text breaking sidebar float in IE */ overflow:hidden; /* fix for long non-text content breaking IE sidebar float */}
.lowerbar{margin:0; padding:0;}
.lowerbar .widget{ border-right:1px solid #bbb;border-bottom:1px solid #bbb; background-color:#fff;margin-bottom:10px;}
.lowerbar .widget-content{padding:5px 5px 5px 15px;}
.lowerbar h2{background: none repeat scroll 0 0 rgb(79, 165, 241);color:#FFF;text-align:center; padding:4px 10px; margin:0; font-size:8.5pt; font-weight:bold; text-transform:uppercase;}
.main .Blog{border-bottom-width:0;}
.lowerbar ul{margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;list-style-type:none;}
.lowerbar li{margin:0px 0px 2px 0px;padding:0px 0px 1px 20px;border-bottom:1px dashed #dbe1e6;background:url( no-repeat left;}
.lowerbar a{color:#333;font-size: 12px; font-family:arial;text-decoration:none;text-decoration:none;}
.lowerbar a:hover{color:#A61111; text-decoration:none;}
.lowerbar a:visited{color:green; text-decoration:none;}
/* ----- End 3 Column Footer Widget Code by  ----- */

  • Now search for </body> and just above it paste following code :

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
<div style='clear: both;'/>
</div> </div>

Save it and we're done...leave your responses in the comment section below...

5 Must Have Google Chrome Extensions

Google Chrome is worlds #1 browser and it really makes browsing easy and fast but the fact is that it's not #1 just because of fast browsing and sleek looks , it's also popular because of some extensions and stuff which makes it really amazing. So here are top five extensions on my list :

1.RSS Feed Reader : A simple and pretty way of keeping track of your latest RSS and Atom feeds. The best RSS Feed Reader extension for Chrome. Inspired by Firefox's Live Bookmarks.Subscribe to your favorite feeds , organize them and get latest stuff on the go.You can get this extension by clicking here.

2.Silver Bird : Silver Bird is a Twitter extension that allows you to follow your timelines and interact with your Twitter account.Silver Bird is an awesome Twitter client extension for Google Chrome with lots of features. This extension was previously known as Chromed Bird, but has since been renamed Silver Bird.You can get this extension by clicking here.

3.Facebook Notifications : Keep up with your friends, even when you're not on Facebook. This extension connects to your Facebook account to show you what's happening with your friends including:

  • Likes and comments on your posts
  • Invitations to events
  • Posts in your groups
  • Friend requests
  • New messages
  • Other notifications you normally see when you're on Facebook
You can get this extension by clicking here.

4.My Chrome Theme : Create and share Google Chrome themes of your own design.
Add a personal touch to your browser. Create and share custom Chrome themes using your own images and designs.In three simple steps.You can get this extension by clicking here.

5.Screen Capture : It's easy to use this extension to capture visible content of a tab, a region of a web page, or the whole page as a PNG image. You can also edit your captured image before saving it as a PNG image. Highlighting, redacting and adding text are supported. You can get this extension by clicking here.

Have fun with can explore millions of cool extensions on your Google Chrome.....

Popular Posts

Powered by Blogger.