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 :

HTML :

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 Last.fm</a></li>                              
            <li><a href="#">View on PeterSchoffelen.nl</a></li>
        </ul>
     
    </div> button in the middle of a line of text.

CSS :

b,
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 : http://cssdeck.com/labs/facebook-style-dropdown-menu

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, .co.in, .co.uk, .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.

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.

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

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjavzoRG9bfyrjlRqJ-YEyq_E9VrXArh02J5-_Kb8Ks3jSRVE-e9Eg_gwUG0PjAP54kLQ9z8mJqF1zwkHX4gaMCp5yEChjTt1G5nCyNnyH-ry-san5I1-AeeqmH_YfL7S_aSBVoNG39D-U/s1600/author.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.author/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnuBIJuJnKzy9R9IkTwPmSS4X0_5txI0Xsy9Ixk-Cwq6A5dQjXeylNir6xumH1L62aEpYl-cazDM0naaRoLofzdm1XygHP0OOg8jFYTieaUx5XbWBiZ9LH98h-ozsqTPoGg8ZVuJR2j4U/s1600/clock-icon.gif) no-repeat scroll top left;padding-left:25px;font-size:11px;'><data:post.timestamp/></font> | <font style='background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDhdzvktxmxLTbsOUvVsExq9HzYnFON7p8OzGwvD4WaUqmdNhdyItxsiG5zEgiijnWRCpbnqZY7Vturb4Xl96iA9N3QqwzAuazWu9JBHdBALwx90YFXrbwb-VoPgk1XNHzrXTVokmZ_hU/s1600/tag+icon.gif) 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'><data:label.name/></a>
<b:if cond='data:label.isLast != &quot;true&quot;'>|</b:if>
</b:loop>
</b:if></font>
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-SZ6VJVZxY0nuGkWd1ezF5fF9s38C9wobjd8TBJMezWUjJ74Hr1WdOhhSzQRjYKJADrevDms8u42BUWEoo0ZB8DJ1XnJko5x69CYXdkpX3l85vo57wCEzjw2dCuxq7nO5vx7nYNvUQdo/s1600/comment-icon.png) 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>
          </b:if>
        </b:if>
      </span>

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 {
padding:10px;
}
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #ccc;
margin:0 5px;
padding:5px;
background:#fff;
}
.showpageNum a:hover {
border: 1px solid #ccc;
background-color:#f0f0f0;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #ccc;
background: #f0f0f0;
margin:0 5px;
padding:5px;
}
.showpageOf {
text-decoration:none;
padding:5px;
margin: 0 5px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #ccc;
padding:5px;
background:#fff;
}
.showpage a:hover {
text-decoration:none;
background:#f0f0f0;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333;
}

• 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>
<script src='http://widcraft.googlecode.com/svn/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if>
</b:if>
</b:if>
<!--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 http://www.widcraft.blogspot.com  ----- */
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMO8j_wKkuvv9kD_ZsLIWYjHi5hXQ4IXGw9P39OF7Gh2_ZZ-cjC6NY3kzj0_QFchk2-j72vqcdWP0Q45VtE3ysOio5GyssWD21FyGi96vem1gw-twgT1HU2a0_1Lm52B235A3D9_MdB6xF/s1600/bullet-point-image-1.png) 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 http://www.widcraft.blogspot.com  ----- */

• 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'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
<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 them....you can explore millions of cool extensions on your Google Chrome.....