Cool Blogger Tools

Add a Blue Professional Dropdown Menu in Blogger

noreply@blogger.com (Anonymous) — Tue, 25 Mar 2014 19:20:00 +0000

Click on Drop Down Menu and select Layout

Add a HTML/JavaScript Gadget

Paste below code in it.

<style>

/* Blue Dropdown Menu by www.widgetgenerators.blogspot.com */
#nav {
display:inline-block;
width:100%;
margin:0px auto;
padding:0;
background:#335599 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgukRiKv_1ZDa1gE07Yv3KgnzsswpEcmHR-v7I3SUfB_oTXkBJnqYBLoOMhkgt6kPBb37wZE-r9Y-UUG23YS1uRQHWdPBZnyDldPUMmb8QOTp7GsrtdiGUFHzsRhggZb649sW5brKikixPd/s320/bg-ABT.png) repeat-x 0 -110px;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
}
#nav li {
margin:10px;
float:left;
position:relative;
list-style:none;
}
#nav a {
font-family:verdana;
font-weight:bold;
color:#e7e5e5;
text-decoration:none;
display:block;
padding:8px 20px;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-shadow:0 2px 2px rgba(0,0,0, .7);
}/* selected menu element */
#nav .current a, #nav li:hover > a {
background:#7788aa url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgukRiKv_1ZDa1gE07Yv3KgnzsswpEcmHR-v7I3SUfB_oTXkBJnqYBLoOMhkgt6kPBb37wZE-r9Y-UUG23YS1uRQHWdPBZnyDldPUMmb8QOTp7GsrtdiGUFHzsRhggZb649sW5brKikixPd/s320/bg-ABT.png) repeat-x 0 -20px;
color:#000;
border-top:1px solid #f8f8f8;box-shadow:0 2px 2px rgba(0,0,0, .7); /*some css3*/
-moz-box-shadow:0 2px 2px rgba(0,0,0, .7);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}/* sublevels */
#nav ul li:hover a, #nav li:hover li a {
background:none;
border:none;
color:#000;
}
#nav ul li a:hover {
background:#335599 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgukRiKv_1ZDa1gE07Yv3KgnzsswpEcmHR-v7I3SUfB_oTXkBJnqYBLoOMhkgt6kPBb37wZE-r9Y-UUG23YS1uRQHWdPBZnyDldPUMmb8QOTp7GsrtdiGUFHzsRhggZb649sW5brKikixPd/s320/bg-ABT.png) repeat-x 0 -100px;
color:#fff;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
text-shadow:0 2px 2px rgba(0,0,0, 0.7);
}#nav ul li:first-child > a {
-moz-border-radius-topleft:10px; /*some css3*/
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}
#nav ul li:last-child > a {
-moz-border-radius-bottomleft:10px; /*some css3*/
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-left-radius:10px;
-webkit-border-bottom-right-radius:10px;
}/* drop down */
#nav li:hover > ul {
opacity:1;
visibility:visible;
}
#nav ul {
opacity:0;
visibility:hidden;
padding:0;
width:175px;
position:absolute;
background:#aabbcc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgukRiKv_1ZDa1gE07Yv3KgnzsswpEcmHR-v7I3SUfB_oTXkBJnqYBLoOMhkgt6kPBb37wZE-r9Y-UUG23YS1uRQHWdPBZnyDldPUMmb8QOTp7GsrtdiGUFHzsRhggZb649sW5brKikixPd/s320/bg-ABT.png) repeat-x 0 0;
border:1px solid #7788aa;border-radius:10px; /*some css3*/
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0 2px 2px rgba(0,0,0, .5);
-moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
-webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);-moz-transition:opacity .25s linear, visibility .1s linear .1s;
-webkit-transition:opacity .25s linear, visibility .1s linear .1s;
-o-transition:opacity .25s linear, visibility .1s linear .1s;
transition:opacity .25s linear, visibility .1s linear .1s;
}
#nav ul li {
float:none;
margin:0;
}
#nav ul a {
font-weight:normal;
text-shadow:0 2px 2px rgba(255,255,255, 0.7);
}
#nav ul ul {
left:160px;
top:0px;
}

</style>

    <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Tutorials</a>
            <ul>
                <li><a href="#">HTML / CSS</a></li>
                <li><a href="#">JS / jQuery</a>
                    <ul>
                        <li><a href="#">jQuery</a></li>
                        <li><a href="#">JS</a></li>
                    </ul>
                </li>
                <li><a href="#">PHP</a></li>
                <li><a href="#">MySQL</a></li>
                <li><a href="#">XSLT</a></li>
                <li><a href="#">Ajax</a></li>
            </ul>
        </li>
        <li><a href="#">Resources</a>
            <ul>
                <li><a href="#">By category</a>
                    <ul>
                        <li><a href="#">PHP</a></li>
                        <li><a href="#">MySQL</a></li>
                        <li><a href="#">XSLT</a></li>
                        <li><a href="#">Ajax</a></li>
                    </ul>
                </li>
                <li><a href="#">By tag name</a>
                    <ul>
                        <li><a href="#">captcha</a></li>
                        <li><a href="#">gallery</a></li>
                        <li><a href="#">animation</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="http://www.widgetgenerators.blogspot.com.com">FAQ's</a></li>
    </ul>

Save your widget.

Make Changes....!

Replace it # with your link.
Replace all Green Area with your showing menu name.

Blogger slider πολύ απλά στο blog σας

noreply@blogger.com (Anonymous) — Tue, 25 Mar 2014 19:06:00 +0000

Γεια σε όλους τους bloggers, σήμερα σας έχω ένα πολύ ωραίο και απλό στη χρήση slidershow για το blog σας για να βλέπουν οι επισκέπτες σας τις τελευταίες αναρτήσεις που δημοσιεύσατε. Μπορείτε να ρυθμίσετε το slider για το πόσα άρθρα θα εμφανίζει. Επίσης στο slideshow εκτός από την εικόνα θα σας εμφανίζει αυτόματα από κάτω τον τίτλο και την περιγραφή του κάθε άρθρου.

Το slider μπορείτε να το προσθέσετε στο δικό σας blog με το απλούστατο τρόπο που μάθαμε για να προσθέτουμε gadget στο blogger.

Σύνδεση στο λογαριασμό σας στο blogger.com

Διάταξη

Προσθήκη gadget

HTML/JavaScript

Επικόλληση και Αποθήκευση του πιο κάτω κώδικα

Εκεί που γράφει => url_blog: "http://lefta4klik.blogspot.gr/"(το έχω με κόκκινα γράμματα) βάζετε στη θέση του url του blog μου το δικό σας.
Μπορείτε να παίξετε με τις ρυθμίσεις css του slider για να το προσαρμόσετε στα μέτρα σας.

Pure CSS Expanded Social Network Widget

noreply@blogger.com (Anonymous) — Tue, 25 Mar 2014 03:42:00 +0000

Φίλες και φίλοι γεια σας, σήμερα θα δούμε ένα social network widget με έναπολύ
ωραίο smooth expand hover effect!Είναι με κώδικα Css, δεν καθυστερεί το άνοιγμα
των blog μας, και τοποθετείτε κάτα κύριο λόγο στην αριστερή sidebar, η άν έχετε χώρο,
κάτω στο footer των blog σας!

Δείτε εδώ το DEMO

Η εγκατάσταση του είναι πάρα πολύ απλή!

Πηγαίνετε blogger--> Διάταξη -->

Προσθήκη gadget-->HTML/JavaScript

και στο παράθυρο που θα ανοίξει βάλτε τον παρακάτω κώδικα-->
...................................................................................................................................................
<style>#NBT-SNS {width: 260px;margin: 5px 20px;padding:5px;}#NBT-SNS li {cursor: pointer;height: 48px;position: relative;list-style-type: none;}#NBT-SNS .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXn-H4DQFjEfBdL8KRtkagEkqgrk6ql9mvu73pat59KG4Hwksh8JHCTSw0L0Pu4GpV1w80PrXgG6AkmRWSpSfva2iEfK9hWk2JLfsOAYRrv9drKIxuJcAUjRpy2rtrwDL7Ubvpr323xaM/s1600/NBT-Social_Button.png') 0 0 no-repeat;background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;color: #141414;float:none;height: 48px;line-height: 48px;margin: 5px 0;position: relative;text-align: left;text-indent: 90px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5;-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;transition: width .25s ease-in-out, background-color .25s ease-in-out;-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;text-decoration: none;}#NBT-SNS span:hover {visibility: hidden;}#NBT-SNS span {display: block;top: 15px;position: absolute;left: 90px;}#NBT-SNS .icon {color: #fafafa;overflow: hidden;}#NBT-SNS .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -382px;}#NBT-SNS .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -430px;}#NBT-SNS .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -478px;}#NBT-SNS .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;}#NBT-SNS .linked {background-color: rgba(0, 87, 114, .42);background-position: 0 -574px;}#NBT-SNS .ytube {background-color: rgba(170, 0, 0, .42);background-position: 0 -670px;}#NBT-SNS .rss {background-color: rgba(255, 109, 0, .42);background-position: 0 -718px;}#NBT-SNS li:hover .icon {width: 250px;}#NBT-SNS li:hover .icon {background-color: #d91e76;}#NBT-SNS li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}#NBT-SNS li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}#NBT-SNS li:hover .google {background-color: #A70000;background-position: 0 -94px;}#NBT-SNS li:hover .pint {background-color: #C00;background-position: 0 -142px;}#NBT-SNS li:hover .linked {background-color: #005772;background-position: 0 -190px;}#NBT-SNS li:hover .ytube {background-color: #A00;background-position: 0 -286px;}#NBT-SNS li:hover .rss {background-color: #EC5601;background-position: 0 -334px;}#NBT-SNS .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}</style><ul id="NBT-SNS"><li><a href="http://www.facebook.com/USERNAME FACEBOOK" class="icon fb">Like us on Facebook</a><span>Like us on Facebook</span> </li><li><a href="https://twitter.com/USERNAME TWITTER" class="icon twit">Follow us on Twitter</a><span>Follow us on Twitter</span> </li><li><a href="https://plus.google.com/GOOGLE PLUS ID" class="icon google">Follow us on Google+</a><span>Follow us on Google+</span> </li><li><a href="http://www.pinterest.com/USERNAME PINTEREST" class="icon pint">Follow us on Pinterest</a><span>Follow us on Pinterest</span> </li><li><a href="http://in.linkedin.com/USERNAME LINKEDIN" class="icon linked">Follow us on LinkedIn</a><span>Follow us on LinkedIn</span> </li><li><a href="http://www.youtube.com/user/USERNAME YOUTUBE" class="icon ytube">Follow us on Youtube</a><span>Follow us on Youtube</span> </li><li><a href="http://feeds.feedburner.com/USERNAME FEED" class="icon rss">Subscribe via RSS</a><span>Subscribe via RSS</span></li></ul></div><div style='clear: both;'></div>
...............................................................................................................................................................
AΛΛΑΓΕΣ
Αντικαταστήστε ολά τα USERNAMES με τα αντίστοιχα δικά σας που έχετε στα social media, προσέξτε
στην αλλαγή να είναι ανάμεσα σε / " το username δηλαδή έτσι: /username" και μόλις
τελειώσετε πατήστε Αποθήκευση!Αυτό ήταν!

Καλή επιτυχία!!!

How To Add Adsense Inside Blogger Post

noreply@blogger.com (Anonymous) — Tue, 25 Mar 2014 03:22:00 +0000

Sometime you must be worried about your less google adsense revenue and try to be the best to increase the revenue but all in vain and can never be successed in such situation. Although we know that google adsense highly revenue mosltly depands upon the SEO of your blog "highly seo rank of your blog better will be the google adsense income" So in today post we will give you some amazing tips through which you can easily increase your google adsense revenue.

One of the best way to increase the google adsense revenue is to change the locations for your adsense banners and insert it into proper area where visitors come a across. Now to do this we will add the adsense code in below every post, after in every post title and in sidebar. In this way you will get maximum clicks on your ads once used it in proper area.

Be careful not to use so many ads on your blog it will increase your blog loading time see here Things that Increase Your Blog Loading Time

How To Add Adsense Ads Inside Your Blogger Post

Now you can easily put your ads inside blogger post just follow these simple steps:

We will have to parse our AdSense code>>>(Parse It Here) Or (Parse Here)
Now you will add your parse code in the below piece of code and then use it in template

Add Your Adsense Inside Post Left Side

<b:if cond='data:blog.pageType == "item"'>  
<div style="float:left;">
your adsense code goes here </div>
</b:if>

Add Your Adsense Inside Post Right Side

<b:if cond='data:blog.pageType == "item"'>  
<div style="float:Right;">
your adsense code goes here  </div>
</b:if>

Now Put Your Adsense Customize Code In This Way

Go to blogger dashboard >>edit html>>expand widgets:
Press (ctrl+F) and search this <data:post.body/> if you find it twice in your template <data:post.body/> then try for both and check the result which is one is correct.
If you want to add adsense ads at the top of post then simply past your code just above it <data:post.body/>
If you want to add adsense ads at the bottom of post then simply past your code just below it <data:post.body/>
If you have any query then feel free to ask your response will back in an hour.
Join us your choice here Facebook, Twiter, Google Plus, Blogger.

Css3 Smooth Slideout Menu Bar For Blogger 2013

noreply@blogger.com (Anonymous) — Tue, 25 Mar 2014 03:16:00 +0000

How to use Menu Bar Widget :

Log in to blogger account and Click drop down.
Now select "Template" Like Below.
Now you can see Live on blog, Click EDIT HTML Button"
Now click Proceed button.

Find this tag by using Ctrl+F ]]></b:skin>
Paste below code Before ]]></b:skin> tag

Css Style Code :

/* The CSS Code for the menu starts here digitalhubinc.com */

ul.nav8 {
list-style:none;
height:120px;
margin:0;
padding:0;
}

ul.nav8 table {
border-collapse:collapse;
width:0;
height:0;
margin:-1px 0 -5px -1px;
}

ul.nav8 > li {
float:right;
height:120px;
width:40px;
position:relative;
overflow:hidden;
-webkit-transition-duration:.5s;
-moz-transition-duration:.5s;
-o-transition-duration:.5s;
}

* html ul.nav8 > li {
width:auto;
}

ul.nav8 > li a.ie6 {
float:left;
height:120px;
width:39px;
position:relative;
overflow:hidden;
}

ul.sub {
list-style:none;
height:120px;
width:600px;
background:url(http://www.script-tutorials.com/demos/107/images/panel.png) no-repeat right top;
position:absolute;
left:0;
top:0;
margin:0;
padding:0;
}

ul.sub li {
float:left;
}

ul.sub li:first-child {
margin-left:45px;
}

ul.sub li a {
display:block;
width:110px;
height:120px;
float:left;
overflow:hidden;
position:relative;
text-decoration:none;
color:#000;
}

ul.sub li a b {
font-size:14px;
display:block;
padding:15px 15px 5px;
}
ul.sub li a b:hover {
font-size:16px;
color:#FF0000;
display:block;
padding:15px 15px 5px;
}
ul.sub li a p {
font-size:12px;
display:block;
margin:0;
padding:0 10px;
}

ul.sub li a p:hover {
font-size:13px;
display:block;
margin:0;
padding:0 10px;
}

ul.nav8 > li:hover {
width:600px;
}

ul.nav8 > li a.ie6:hover {
direction:ltr;
width:600px;
}

ul.sub li a:hover i {
opacity:1.0;
}

7. Go to blogger and click Layout
8. Click Add Gadget and select 'HTML/Javascript
9.Paste below code.

HTML Navigation menu Code :

<ul class="nav8">
<li>

<ul class="sub">
<li><a href="http://www.digitalhubinc.com/"><b>Home</b><p>custom description here</p><i></i></a></li>
<li><a href="http://www.digitalhubinc.com/search/label/CSS"><b>Tutorials</b><p>custom description here</p><i></i></a></li>
<li><a href="http://www.digitalhubinc.com/search/label/CSS"><b>Support</b><p>custom description here</p><i></i></a></li>
<li><a href="http://www.digitalhubinc.com/search/label/CSS"><b>About</b><p>custom description here</p><i></i></a></li>
<li><a href="http://www.digitalhubinc.com/search/label/CSS"><b>Back</b><p>custom description here</p><i></i></a></li>
</ul>

</li>
</ul>

Replace # with your links.

10. Now save your 'HTML/Javascript'.

End.

How To Create Blogger Template From Scratch

noreply@blogger.com (Anonymous) — Tue, 25 Mar 2014 03:07:00 +0000

As we've been always talking about Blogger and blogging, today we're going to make a long discussion on one of the most popular question asked blogger.com users that how to create a blogger template. Many bloggers have asked me this question on Facebook and through other contact services so I thought why not should I make a long post specially for them. Basically, This thing come in Web Design and Development so a person must have these skills in order to create blogger template otherwise reading and understanding this long article will be wasted. Today, I'll not take your too much time in this kind of discussion so let's start discussing about the main topic.

Requirements To Create a Blogger Template

First of all, I would like to mention the requirements which everyone should have fordesigning or creating blogger template because any common man can't easily make blogger templates it needs several skills. The first thing is that, you should know Blogger.com perfectly. How to create blog, making posts and pages, doing little customization, playing with gadgets and also how this platform actually works. After this, The basic knowledge of web design required in which HTML and CSS are most important. In blogger, We can use HTML, CSS, XML and JavaScript. If you know all these languages then you'll not face any problem in designing professional blogger template.

Step 1. Preparing Testing/Demo Blog For Creating Template

It is common thing that before creating any blogger template you'll make the demo blog for that template. So, create a blog and publish more than 10+ posts on it. There should be one image, all heading, 4-5 text paragraphs, numbered list, bullet list and quote in every post. We'll design these each and every thing so make 10+ posts with these all things and also integrate some important widgets in footer or sidebar. After that, you can use any default template on it but soon we'll remove it and design another template on it.

Step 2. Understanding Basic Structure Of Blogger Template

Before starting the template we should understand the basic structure of blogger template. We can also say that we're going to create simple empty page of blogger template. So, I've prepare the basic coding which will help you to understand basic structure.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>

<b:include data='blog' name='all-head-content'/>

<title>
<b:if cond='data:blog.pageType == "index"'>
<data:blog.pageTitle/>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<data:blog.pageName/> | <data:blog.title/>
<b:else/>
Page Not Found | <data:blog.title/>
</b:if>
</b:if>
</title>

<b:skin><![CDATA[

body {
background:white;
color:black;
}
#Navbar1 {dispaly:none!important;}
]]></b:skin>

</head>
<body>

<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>

</body>
</html>

In the above basic coding, you'll see that there are XML and HTML tags in the starting which means that this is built with XML and HTML. The main extension for this coding will be .XML. If you copy the above coding and paste it with the whole coding of a template then it will be saved and will show nothing on blog because this is simple blank HTML page. Let's understand the basic structure.

1. XML and HTML tags : As I already told you that XML and HTML tags are the main tags in which whole template will be stored. If we want to save this template in computer then we'll choose .XML extension while saving because blogger supports only .XML file templates.

2. Long <title> Coding : If you look in the title code below <head> you'll see long coding between <title> tag. Basically, That is customized title coding which has many benefits. We've used conditional tags to customize this title coding. The first condition tells that if someone opens the homepage or index main page then it will write the blog title as title of the webpage. Second condition is to show the post or page title first and show blog title after post or page title. In the last, there is 404 error page title coding.

3. <b:skin> Tag For Storing Stylesheet : There is additional built in tag for blogger templates to use <b:skin> tag with CDATA for storing the whole CSS or stylesheet of the blog. In these tags, you'll only see CSS which is being used in the whole blog. So, every CSS which you'll write should be placed in these tags.

4. <b:section> Tags For Widgets : In blogger, we use these tags to create widgets. Most important things like Blog Title and Content are done by implementing widgets in templates. In short, There are default widgets which are for Header and Blog Content which we use while creating template. For creating widgets, we should cover them with<b:section> tags which will help us to prepare layout page.

Step 3. Creating Header

After learning the basic structure, let's get started by creating header of blog. Basically, There are only two important things to create a blogger template. First one is Header and second one is Blog Content. Other things are also important but these are most ones. We'll use custom Header widget and will customize it according to our needs. Basically, Header is a widget and you know for creating widget, we should create section for a single or multiple widgets. Copy the code below and paste it anywhere in the <body> of template where you want to display Header widget.

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'></b:widget>
</b:section>

The above coding is not complete coding of Header but when you'll integrate the above coding in template then it will automatically become longer. Save this template, reload the Edit HTML page and you'll see expand arrow in the left side of <b:widget> tag. Blogger will automatically write the default coding on it. So, let's understand this header coding.

1. <b:section> having class='header' and id='header' : First of all, in the section tag, you'll see class='header' and id='header' which are common CSS class and id tags. So, by the help of these tags, you can do customization of header like giving specific width, height, margin, padding, font size, color etc to the header section only.

2. <b:section> having maxwidgets='1' : I don't need to explain these simple things, but for totally newbies I'll explain it. There is another XML tag of blogger which ismaxwidgets='1' by this, we can simply set the number of maximum widgets in that section just replacing the number 1.

3. <b:section> having showaddelement='no' : This is just another simple tag by which we can disable or enable the Add a Gadget option.

4. <b:widget> having id='Header1' : In the header widget, there is CSS id tag by which we customize the header widget with CSS.

5. <b:widget> having locked='true' : This tag allows you to lock and unlock widgets easily by choosing true or false. When the widget is locked, one can't easily edit that through layout page.

The current settings for this header widget and section are fine so we'll not edit them. Below, I'm going to give you class and ID CSS tags which will help you to customize header widget. Simply, add this below CSS between <b:skin> tag and fill them with your own properties.

#header { }

#header h1 { }

#header h1 a { }

#header .description { }

Step 4. Creating Pages Menu Widget

I forgot to mention the pages menu widget which is also important for creating menu. That kind of menu only displays the those links which are actually pages made in blogger blog. In default blogger templates, it's mostly used so here I'm going to teach you how can we implement them in our blogs. I'll just give you default XML and HTML coding and will show you way to design that with CSS. If you're well known with HTML and CSS then you can easily make custom menu there anywhere in the template. But for this pages menu, you might face problem. Let's get started.

This pages menu widget is also done by creating widget section and widget. So, below I'm going to give you another code which will be having section tags and there will be page list widget which is the main thing. Just put the below coding anywhere where you want to show up that pages menu widget.

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
</b:widget>
</b:section>

As we did in Header widget, this is also just a little piece of tags which will automatically complete itself with the default coding. For the customization, it's simple you can just take ID and Class tags from the above code and start writing your own CSS for them. But, This time I'm also going to give you CSS empty tags in which you've to fill properties according to your needs and design that better.

.tabs { }
#corsscol { }
#PageList1 { }
#PageList1 ul { }
#PageList1 ul li { }
#PageList1 ul li a { }

Step 5. Creating Blog or Content Widget

This is the main thing should is important most of all. In blogger, we create a default widget which is actual posts widget. In the layout pages, you might have seen the big widget named Blog Posts. We can easily create default blog posts widget with a bit of coding but customizing that according to our needs can be little difficult. First of all, open the html editor in blogger and paste the following blog posts widget code there.

<b:section class='main' id='main' preferred='yes' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
</b:widget>
</b:section>

Just like other widgets, we've also created section for that blog posts widget. After saving this widget in template, reload the html editor it will gain default coding of blog posts widget automatically. Here, get started in customizing the posts section according to your needs. Look at the class and id tags and write CSS for those tags to beautify posts area. When you'll expand blog posts widget, you'll get many <b:includable> tags that are actually in posts area. There will be specific includable tag having id='post' andvar='post'. If you expand that includable tag then it will show up the coding of posts area only where you can do customizing easily.

Step 6. Creating Custom Gadget Area Like Sidebar and Footer

The above five steps will get you a simple template but creating custom gadgets area can be useful like making sidebar, footer and other gadget necessary gadget areas. So, in this step we're going to learn that how can we easily create custom gadgets section in blogger layout. We'll just write <b:section> tag in which we can add widgets as more as we want. Go to html editor and paste the following code anywhere you want to create the gadgets area or section.

<b:section class='' id='' maxwidgets='' showaddelement='yes'>

</b:section>

There is nothing special then <b:section> tags in the above coding. Class and ID tags are empty where you can add your own custom names to call the CSS for that section. You can use class and ID to call CSS and beauty that gadgets section by adding any width, height, padding, margin etc. Another tag, maxwidgets='' is also in which you write any maximum number like 10 so that section wouldn't contain more than 10 widgets. If you want to show Add a Gadget option in layout then remain the yes in the showaddelement tag otherwise overwrite it with no.

Step 7. Setting up Layout Page

While creating template, also take care of layout page in blogger blog because that page depends on the template of a blog. If you do the things correctly then it won't get messed up but if you're facing problem then we've solution for this. We can rearrange the widgets and gadget sections there through using simple CSS. And for what, I've already written great post on fixing blogger layout page messed up. For rearranging the widgets in layout page, we'll use CSS and it will be like this.

body#layout #widgetID { The Properties For Widget In Layout Page Goes Here }
body#layout #widgetID2 { The Properties For Widget In Layout Page Goes Here }
body#layout #widgetID3 { The Properties For Widget In Layout Page Goes Here }
body#layout #widgetID3 { The Properties For Widget In Layout Page Goes Here }

Advanced Guide

Anyone who has basic knowledge of web designing can develop blogger template just by using simple HTML and CSS. Newbies might face problem in understanding the structure of blogger template but if you keep doing practice then you in a few days, you can be expert in that. Those web designers who can create HTML Templates or any other blogging platform themes then I don't think they're going to face any problem. Even designing blogger templates is one of the most easiest platforms than others.

Above we've only created the simple blogger template which contains header, pages menu and blog posts. There is no sidebar and footer in the above template. You can make sidebar by giving specific width to posts widget, float blog posts widget to left and create another section which will be sidebar. You'll need to float sidebar in right and also give such width to those blog posts and sidebar sections that these both should suite on the area. You can do many more experiments with blogger template designs and also you can cover each widgets section with specific HTML div tags.

While creating blogger templates, sometimes I make use of Inspect Element in Google Chrome which is common coding tool and it helps to edit any webpage. It will also help you to find the specific Class and ID tags of anything and you can customize them through CSS.

Final Words

So friends, that's how we can easily create blogger template from scratch. These were the basics of creating blogger template but I recommend you to keep doing practice that will help you to be more comfortable in coding blogger templates. I hope this little guide is going to help you in understanding the structure of blogger templates and designing them. If you're good in web design then you can become professional blogger templates designer. Best of luck in developing blogger templates. Have a nice day!

How to center any Blogger widget

noreply@blogger.com (Anonymous) — Tue, 25 Mar 2014 03:04:00 +0000

In this helpful Blogger tutorial you'll find out how to center any widget in your Blogger template.

There can be a number of ways to center widgets, below are a selection of options to try with your template.

Align singal gadget to the center

The codes below can be used to align your custom or third party widgets to the center via Blogger Dashboard > Layout > Add Gadget > HTML/Java Scripts

Option one

<div align="center">Your Widget Code</div>

Option two

<center>Your Widget Code</center>

Option three

<p align="center">Your Widget Code</p>

Simply replace the text in blue with your widget code.

Add the CSS rule to all widgets

The CSS rule below will center all widgets on your blog. Go to your Blogger dashboard >Template Customise > Advanced > Add CSS and apply to blog.

.widget {text-align: center;}

The CSS rule below will center any one of your widgets. Replace the text in blue with the widget ID. Go to your Blogger dashboard > Template Customise > Advanced > Add CSS and apply to blog.

#Your-widget-ID {text-align: center;}

Helpful Blogger tip on How to find widget ID?

Job Done...

HOW TO CENTER STUFF IN BLOGGER

noreply@blogger.com (Anonymous) — Tue, 25 Mar 2014 02:57:00 +0000

Code to center your Header Image:

#header-inner img {margin: 0 auto;}

To center your Header’s Title and Description (text):

#header-inner {text-align: center;}

Code to center your Post Titles:

.post-title {text-align:center;}

Code to center your Post Dates:

.date-header {text-align:center;}

Code to center your Gadget Titles:

.section-columns h2, #sidebar-right-1 h2, #sidebar-left-1 h2Â {text-align: center;}

Code to center your Sidebars:

.main-inner .column-left-inner, .main-inner .column-right-inner {text-align: center;}

Code to center your Tabs (menu):

.PageList {text-align:center !important;}
.PageList li {display:inline !important; float:none !important;}

Don’t forget to click Apply To Blog. And, you’re done!

Automatic Recent Posts Slider With jQuery For Blogger

noreply@blogger.com (Anonymous) — Tue, 25 Mar 2014 02:05:00 +0000

Recent posts slider is a best way to show of you blog's recent posts as a slide show.You may see the slider such slider in many wordpress blogs but when coming to blogger it is certainly not much seen.This widget is shared by Abu-Farhan and using my own tricks further I customized this plugin to works perfect with your blog.If you are thinking that customization's will be hard then you are wrong,this gadget is very easy to customize and very easy to add.You don't need to add images,text or any links like other sliders all is Automatic :D. Here I am giving a tutorial about adding recent post slider to blogger.First take a preview on slider.

Live Demo ▼

How To Add This Slider To Blogger?

Step 1 - Applying Styles

Go to Blogger Dashboard > Design > Edit HTML. (In new User Interface It Is - Dashboard > Template)
As always download a copy of your template first.
Now find for ]]></b:skin>
Add below code just before ]]></b:skin>

/* START EasySlider By helperblogger.com */

#slide-container {
    height: 360px;
    position: relative;
    width: 480px;
}

#slider {
    height: 360px;
    left: 25px;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    width: 480px;
    font-family: calibri;
}

.slide-desc {
    background: transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
    color: #FFFFFF;
    padding: 10px;
    position: absolute;
    right: 0px;
    text-align: left;
    top: 0;
    width: 200px;
    z-index: 99999;
}

.slide-desc h2 {
    display: block;
}

.crosscol .widget-content {
    position: relative;
}

#slider ul, #slider li,

#slider2 ul, #slider2 li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#slider2 {
    margin-top: 1em;
}

#slider li, #slider2 li {
/*

define width and height of list item (slide)

entire slider area will adjust according to the parameters provided here

*/
    width: 480px;
    height: 360px;
    overflow: hidden;
}

#prevBtn, #nextBtn,

#slider1next, #slider1prev {
    display: block;
    width: 30px;
    height: 77px;
    position: absolute;
    left: -30px;
    text-indent: -9999px;
    top: 71px;
    z-index: 1000;
}

#nextBtn, #slider1next {
    left: 520px !important;
}

#prevBtn, #nextBtn, #slider1next, #slider1prev {
    display: block;
    height: 77px;
    left: 0;
    position: absolute;
    top: 132px;
    width: 30px;
    z-index: 1000;
}

#prevBtn a, #nextBtn a,

#slider1next a, #slider1prev a {
    display: block;
    position: relative;
    width: 30px;
    height: 77px;
    background: url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
}

#nextBtn a, #slider1next a {
    background: url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;
}

/* numeric controls */

ol#controls {
    margin: 1em 0;
    padding: 0;
    height: 28px;
}

ol#controls li {
    margin: 0 10px 0 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 28px;
    line-height: 28px;
}

ol#controls li a {
    float: left;
    height: 28px;
    line-height: 28px;
    border: 1px solid #ccc;
    background: #DAF3F8;
    color: #555;
    padding: 0 10px;
    text-decoration: none;
}

ol#controls li.current a {
    background: #5DC9E1;
    color: #fff;
}

ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {
    outline: none;
}

/* END EasySlider By helperblogger.com */

You can edit above CSS values as you wish.You may use our HTML Editor to see a live preview of your changes.(Note - If you are editing this gadget in HTML Editor then you have to add all three codes simultaneously in editor)

Step 2 - Adding JavaScript

Now find for </body> tag
Add below code just after/below </body> tag.

<!-- Start easy content slider by helperblogger.com -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $("#slider").easySlider({
 auto: true,
 continuous: true
 });
});
//]]>
</script>
<!-- End easy content slider by helperblogger.com -->

Now save your template.

Adding The Gadget

Now go to Page Layout
Add a Gadget > HTML/JavaScript
Paste below piece of code and save it.

<div id="slider">
<script style="text/javascript" src="http://code.helperblogger.com/easySlider.min.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;
 var numchars_gal = 150;
 var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->
<script src="http://yourblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>

Now replace yourblog.blogspot.com with your own blog url.[Code Line - 10] (Only change blog URL don't change any other things.

To change number of post find this var numposts_gal = 6; line in above code. (Code Line - 4)

If you want to change number of characters to show in description find this piece of code var numchars_gal = 150; (Code Line - 5)

Now save your all the changes and you are done.Visit your blog to see this beautiful slide.

Follow this tutorial to show this gadget only on specific page or only in homepage.

Your questions,queries and feedback are always welcome.Also if you need any help about customizing this gadget then feel free to ask me.I'll glad to help you.

Add JQuery Mega Vertical Sidebar Menu In Blogger (Demo)

noreply@blogger.com (Anonymous) — Tue, 25 Mar 2014 01:52:00 +0000

Examples

For further examples of the vertical mega menu plugin, including sample styles refer to our WordPress Vertical Mega Menu Demo Page or view the advanced styling example.

Example 1

//

$('#mega-1').dcVerticalMegaMenu();

//

Plugin Default Settings:

3 items per row
no animation
direction of flyout: right

Example 2

//

$('#mega-2').dcVerticalMegaMenu({

    rowItems: '3',

    speed: 'slow',

    effect: 'fade',

    direction: 'left'

});

//

Settings:

3 items per row
animation effect: fade in
speed: slow
direction of flyout: left

Example 3

//

$('#mega-3').dcVerticalMegaMenu({

    rowItems: '4',

    speed: 'slow',

    effect: 'slide',

    direction: 'right'

});

//

Settings:

4 items per row
animation effect: slide out
speed: slow
direction of flyout: right

Example 4

//

$('#mega-4').dcVerticalMegaMenu({

    rowItems: '3',

    speed: 'fast',

    effect: 'slide',

    direction: 'left'

});

//

Settings:

3 items per row
animation effect: slide out
speed: fast
direction of flyout: lef

Add JQuery Mega Vertical Sidebar Menu In Blogger

noreply@blogger.com (Anonymous) — Tue, 25 Mar 2014 01:43:00 +0000

We can add navigation bar at header To Blogger. But this article explains how to add Mega Vertical Sidebar Menu in blogger. This is really fantastic vertical sidebar. The jQuery Mega Vertical Sidebar Menu allows readers to view all menu for each top-level Menu Item. You can now set the number of sub-menus per each row. I hope it will help your readers to navigate to the desired section of the page. A wordpress plugin is available for vertical sidebar menu.

Demo

Go to Blogger Dashboard → Design → Page Elements
Click on Add a Gadget then select HTML/JavaScript Widget
Copy the code shown below and paste it inside the widget

<style>
/* Page Styles */
.menu-container {padding: 20px 0; width: 250px; float: left;}
.clear {clear: both;}
ul{list-style:none;
border:0;outline:none;margin:0;padding:0;}

/* Vertical Mega Menu Styles */
.mega-menu{
font: bold 13px Arial, sans-serif;
line-height: 16px;
background: #333;
border-left: 1px solid #1B1B1B;
position: relative; /* Required */
}
.mega-menu li a {
display: block;
color: #fff;
padding: 12px 38px 12px 25px;
text-shadow: 1px 1px 1px #000;
text-decoration: none;
border-top: 1px solid #555;
border-bottom: 1px solid #222;
border-right: 1px solid #1B1B1B;
}
.mega-menu li a:hover, .mega-menu li.mega-hover a {
background: #4b4b4b;
color: #fff;
border-right: 1px solid #4b4b4b;
}
.mega-menu li a.dc-mega {
position: relative;
}
/* Add arrow icon to parent links */
.mega-menu li a .dc-mega-icon {
display: block;
position: absolute;
top: 18px;
right: 15px;
width: 6px;
height: 8px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijClvT1DqPK4XuLU9bYJa7bejy1qEhYmvN4alsd9yVP7g_ax5bnXEIFrgWdmTRyQt315njGfR2VX5ab0TFmRWqSZM4dNmpopYPI1ib-W9apasE1bKeWO1VMuXKRnCxkSVZ1EkVMFSKxMg/s1600/ext-black.png) no-repeat 0 0;
}
/* Mega menu container */
.mega-menu li .sub-container {
position: absolute; /* Required */
background: #4B4B4B;
padding: 10px 10px 0 10px;
overflow: hidden;
border: 1px solid #4b4b4b;
border-left: none;
}
.mega-menu li .sub .row {
width: 100%; overflow: hidden; /* Clear floats */
}
.mega-menu li .sub li {
float: none;
width: 150px;
font-size: 1em;
font-weight: normal;
}
.mega-menu li .sub li.mega-hdr {
float: left; /* Required */
margin: 0 5px 10px 5px;
}
.mega-menu li .sub a, .mega-menu.left li .sub a {
background: none;
border: none;
text-shadow: none;
float: none;
color: #fff;
padding: 7px 10px;
display: block;
text-decoration: none;
font-size: 0.9em;
}
.mega-menu li .sub li.mega-hdr a.mega-hdr-a {
padding: 5px 5px 5px 15px;
margin-bottom: 5px;
background: #E88221;
text-transform: uppercase;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 1px #333;
}
.mega-menu li .sub li.mega-hdr a.mega-hdr-a:hover {
color: #000;
text-shadow: none;
}
.mega-menu .sub li.mega-hdr li a {
padding: 4px 5px 4px 20px;
background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlqGqB0X1XhISBxcMkiP9a2QzmLY7rqAwzxRgghL2llA6bfHY-hRkpOIH1pVddi9Jwm5YZPP9Qkjck0kp0eharntC-uZQJLRRGaRObb0jALwAUiYBtOtkG4gd7F9llSp0Xi3ueuhtBwgg/s1600/arrow_white.png)  no-repeat 5px 8px;
font-weight: normal;
}
.mega-menu .sub li.mega-hdr li a:hover {
color: #a32403;
background: #efefef  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA02DEwtlgnKojM9qaCw3R3DVzQsmZv16SdcnewerRRxXOTILwmMm0csefPyVj5OeFVVThseiJh7mqPymTlIKbHEuBHj_qy_BiU2ZOu3HSBe_cTVCqgcc-2ggS371Q1Jpm2DOseePYbNk/s1600/arrow_on.png)  no-repeat 5px 8px;
}
.mega-menu .sub ul li {
padding-right: 0;
}
/* Styling for Menu Items with only 2 levels */
.mega-menu li .sub-container.non-mega .sub {
padding: 10px;}
.mega-menu li .sub-container.non-mega li {
padding: 0;
margin: 0;
width: 150px;
}
.mega-menu li .sub-container.non-mega li a {
padding: 7px 5px 7px 22px;
background:  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlqGqB0X1XhISBxcMkiP9a2QzmLY7rqAwzxRgghL2llA6bfHY-hRkpOIH1pVddi9Jwm5YZPP9Qkjck0kp0eharntC-uZQJLRRGaRObb0jALwAUiYBtOtkG4gd7F9llSp0Xi3ueuhtBwgg/s1600/arrow_white.png)  no-repeat 7px 10px;
}
.mega-menu li .sub-container.non-mega li a:hover {
color: #a32403;
background: #efefef  url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiA02DEwtlgnKojM9qaCw3R3DVzQsmZv16SdcnewerRRxXOTILwmMm0csefPyVj5OeFVVThseiJh7mqPymTlIKbHEuBHj_qy_BiU2ZOu3HSBe_cTVCqgcc-2ggS371Q1Jpm2DOseePYbNk/s1600/arrow_on.png)  no-repeat 7px 10px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type='text/javascript'  src='http://latesthack.googlecode.com/svn/mywidgets/VerticalSidebarMenu/jquery.hoverIntent.minified.js'></script>
<script type='text/javascript'  src='http://latesthack.googlecode.com/svn/mywidgets/VerticalSidebarMenu/jquery.dcverticalmegamenu.1.0.js'></script>
<script type="text/javascript">
$(document).ready(function($){

$('#mega-1').dcVerticalMegaMenu({
rowItems: '3',
speed: 'fast',
effect: 'show',
direction: 'right'
});
});
</script>
</head>
<body>
<div class="menu-container clear">
<ul id="mega-1" class="mega-menu">
<li><a href="#">Menu Item A</a>
<ul>
<li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
</ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
</ul></li>
<li><a href="#">Sub-Header 3</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
</ul></li>
<li><a href="#">Sub-Header 4</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 5</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 6</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li></ul></li>
<li><a href="#">Menu Item B</a>
<ul>
<li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
</ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
</ul></li>
<li><a href="#">Sub-Header 3</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
</ul></li>
</ul></li>
<li><a href="#">Menu Item C</a>
<ul><li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 3</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 4</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 5</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 6</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 7</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li></ul></li>
<li><a href="#">Menu Item D</a>
<ul><li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 3</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 4</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 5</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 6</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li></ul></li>
<li><a href="#">Menu Item E</a>
<ul><li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
</ul></li>
<li><a href="#">Menu Item F</a>
<ul><li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 3</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 4</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 5</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 6</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 7</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li></ul></li>
<li><a href="#">Menu Item G</a>
<ul><li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 3</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 4</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 5</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 6</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li></ul></li>
<li><a href="#">Menu Item H</a>
<ul><li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li></ul></li>
<li><a href="#">Menu Item I</a>
<ul><li><a href="#">Sub-Header 1</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
<li><a href="#">Sub-Header 2</a>
<ul><li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li>
<li><a href="#">Menu Link</a></li></ul></li>
</ul></li></ul>
</div>

Replace Menu Item with your own text
Replace Sub-Header with your own text
Replace Menu Link with your own links
If your Bloger template already have <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script> then do not need to add this
Now save the widget

How To Hide/Remove Blogger’s “No Posts”

noreply@blogger.com (Anonymous) — Tue, 25 Mar 2014 01:36:00 +0000

This simple trick comes from a young blogger named Aumkar Thakur, and what it basically teaches you is how to hide the “No posts” message box in your Blogger. This can be seen when you’ve just opened up your Blogger account and you still haven’t posted anything yet.

To hide it, just follow the quick 3-step instructions below:

From your Blogger dashboard, go to ‘Template’ and then click on ‘Customize’
Click on ‘Advanced’ and then on the submenu, scroll down to the bottom and click on ‘Add CSS’
Now copy and then paste this very short code inside the CSS panel:

.status-msg-wrap

display: none;

Congratulations! The ‘No posts’ message box should now have disappeared when you look at your blog site’s preview window below.

Add Multi-Tabbed widget to Blogger Sidebar

noreply@blogger.com (Anonymous) — Tue, 25 Mar 2014 01:33:00 +0000

Hello iHowMore Friends! Do you know about Multi tab Widget?
Multi tab Widget is a great space efficient widget for Blogger. It helps to decrease the load time of your Blogger blog by combining three or more than three widgets into one. The tabbed navigation widget features tabs and a content window; when clicking on the tabs, different content is visible in the window beneath. You can use it for Popular posts, Top commenters, Recent Posts, Recent Posts or any widget as you like.

Lets move to tutorial just Follow below steps to add a Multi-Tabbed Widget to your Blogger blog. you can see a Multi-Tabbed widget in our sidebar.

ADD MULTI-TABBED WIDGET TO YOUR BLOGGER SIDEBAR

Go to Design>Page Elements, click Add a gadget, then choose HTML/JavaScript
Paste below code inside it

Customization
Replace Tab 1 Title, Tab 2 Title, Tab 3 Title with you Tab Title.
Replace Tab 1,2,3, Content goes here with your widget code.
Change width: 300px; height: 300px; with your need.
Wanna change Background Color of Multi-Tabbed widget : Replace #ffffff with you favorite color.

Now Save & See you blog you have added this widget successfully!

Blogger post name automatically as Page Title (Gr+En)

noreply@blogger.com (Anonymous) — Tue, 25 Mar 2014 01:31:00 +0000

Learn how to make the name of every post automatically as page title, improving your SEO...(En+Gr)

  English :
Go at html edit of your blogs template and search (Ctrl+f) for :
<data:blog.pagetitle>
It will be like this :
<title><data:blog.pageTitle/></title>
Replace it with :
<title>
       <b:if cond='data:blog.pageType == "index"'>
       <data:blog.title/>
       <b:else/>
       <data:blog.pageName/>
       </b:if>
</title>

Ελληνικά :
Πηγαίνετε στις ρυθμίσεις Προτύπου του blog σας και επιλέξτε την Επεξεργασία Html. Ενεργοποιήστε και την επιλογή "Επέκταση προτύπων γραφικών στοιχείων" και κάντε αναζήτηση (Ctrl+F) μέσα στον Html κώδικα για το εξής :
<data:blog.pagetitle>
Θα το βρείτε κάπως έτσι:
<title><data:blog.pageTitle/></title>
Αντικαταστήστε το παραπάνω με τον εξής κώδικα :
<title>
       <b:if cond='data:blog.pageType == "index"'>
       <data:blog.title/>
       <b:else/>
       <data:blog.pageName/>
       </b:if>
</title>

ΣΗΜΕΙΩΣΗ : H ρύθμιση αυτή που αναφέρουμε στο post αυτό ΛΕΙΤΟΥΡΓΕΙ στην αναζήτηση του Google κανονικά και με Ελληνικούς Χαρακτήρες!Δηλαδή εαν κάποιος αναζητεί κάτι σχετικό με το όνομα του post σας τότε θα εμφανίστεί στα αποτελέσματα και το δικό σας post, άσχετα με το url link το οποίο μπορεί να μην είναι στα ελληνικά!
Ενα τρικ το οποίο μπορείτε να εφαρμόσετε ειναι να δημοσιεύσετε αρχικά το post σας είτε με Αγγλικό τίτλο είτε με Ελληνικό τίτλο, αλλά λατινικούς χαρακτήρες(greeklish).Κι έπειτα απλα κάνετε edit το post και αλλάζετε τον τίτλο όπως θέλετε είτε στα ελληνικά, είτε αγγλικά. Έτσι έχετε το URL ακριβώς όπως επιθυμείτε και τον τίτλο του post και της Σελίδας στα ελληνικά.

Converting Your Blogger Template Into Blank Template with widget

noreply@blogger.com (Anonymous) — Tue, 25 Mar 2014 01:28:00 +0000

Blogger templates are codded using the *XHTML 1.0 Strict Document Type*. It was developed by world wide web consortium on 26 January 2000. Unlike PHP or ASP.net the rules of XML are strict and unforgiving. A slight mistake in code results in terrifying error messages that you often see while editing your blog template.

So here we're going to show you how to convert your blogger template into a blank templatefor all your HTML related work or any project you're going to do. All credits of this post goes to MBT.

Installing Template :

Go To Blogger > Template > Edit HTML > Replace full template code with following code :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
////////////////////////STATIC HTML THEME////////////////////////////////////////////////////////////////////////////////////////
----------------------------------------------- */
#navbar-iframe { height:0px; visibility:hidden; display:none }
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override) margin: 0;
padding: 0;
}
]]></b:skin>

  </head>
  <body>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>
<div style='margin-top:400px; '>

<center><p><a href='http://www.widcraft.blogspot.com'>Widget Craft </a>© 2012.</p></center>
</div>
  </body>
</html>

Click On Save.

Click save and when prompted about the following error:

Warning: Your new template does not include the following widgets:
BlogArchive1 Profile1 Attribution1 Header1 Blog1

Simply click on Delete widgets and you are all done!

Editing This Template :

While creating widgets, you will add the JavaScript just below <head> or above </head>
You will add the CSS code inside the two yellow highlighted sections
And you will add the widget data or HTML code inside the two green body tags

Adding A Widget :

Now to give you an idea of how easily a blogger template could be designed from scratchsimply add the following code just above </body> to make the Post widget function on your Static HTML Theme.

<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>

Save your template and then visit the layout page again. You will be able to see the Post widget and you can now easily edit its formatting options. Go and create a new post and visityour blog to see it working just fine. Congratulations! you have created one of your first blogger widgets. Play this way with some exciting new widgets and find out how creative you could go.

Create Blank Blogger Template or Blank HTML Page

noreply@blogger.com (Anonymous) — Tue, 25 Mar 2014 01:24:00 +0000

Is it possible to create blogger Blank template or a blank html page?
yes, it is Possible and Easier to create a Blank Blogger Template.
Blogger templates are coded using the XHTML 1.0 Strict Document Type.Unlike PHP or ASP.net the rules of XML are strict and unforgiving. A slight error in code results in terrifying error messages that you often see while editing your blog template. The entire blogger template consists of widgets that are operated and managed using classes and IDs. The blog posts section itself is a giant widget that can be styled in different ways.

Steps to Create Blank Blogger Template:
1. Login to Blogger > Dashboard
2. Create a New Blog > Select Simple Blogger Template
3. Click on Drop Down Menu and choose Template
4. Now Click on Edit HTML > Proceed.
5. Delete all codes and copy & paste the below code in it

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  <head>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
  <b:skin><![CDATA[/*
-----------------------------------------------
Blank Blogger Template
Name: Blank Blogger Template
URL: http://lwthacking.blogspot.com
----------------------------------------------- */
]]></b:skin>
</head>
  <body>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>
<div style='margin-top:700px; '>
<br/>
<center><b><font color='#ffffff'>© All Rights Resrved by <a href='http://Lwthacking.blogspot.com' style="color: #ffffff">LWTHacker</a> 2013.</font></b></center>
</div>

</body>
</html>

6. Now click Save Template and you will get this error (see below)
then, Click delete button.

Warning: Your new template does not include the following widgets:
BlogArchive1 Profile1 Attribution1 Header1 Blog1

When You See the Layout of this template, It will be Blank and only it will show only the Favicon

Customizing Blank Template:
Add Meta tags/JavaScripts/links etc. in between <head> ... </head>
Add CSS codes to style your page in between <b:skin><![CDATA[ ... ]]></b:skin>
Add Content in between <body> ... </body>
Enjoy :) - See more at: http://bungleisinthejungle.blogspot.gr/2013/02/create-blank-blogger-template-or-blank.html#sthash.rQ6pTjgd.dpuf

TOP floating dropdown menu to blogger

noreply@blogger.com (Anonymous) — Tue, 18 Feb 2014 14:05:00 +0000

Floating widgets like floating navigation menu, Floating share buttons or floating social icons are very popular these days. It is very easy to add these floating widgets to your blogger blogs. We can create any floating widget with help of CSS code. In this posts we will discuss about adding a floating dropdown navigation menu to blogger blogs.

Benefits of adding floating dropdown menu to blogger :

Navigation menu is an essential part of any blog or website. It helps visitors to easily navigate throughout the whole blog. A dropdown navigation menu is a simple horizontal menu with an extra dropdown list. This extra list helps in adding more number of links to your navigation menu. Suppose if you have large number of post categories in your blog then a simple horizontal navigation menu will fail to provide required space to your links. That is why using a dropdown navigation menu is a better choice rather then using a simple horizontal menu. Having a floating dropdown menu in your blog is another plus point because accessing a floating dropdown menu is very easy. It always remains on top of the blog whether the visitor scrolls the blog up or down. So to make your blog`s navigation system easily accessible for your visitors you must use floating dropdown navigation menu on your blogger blogs.

Features of our floating dropdown menu

Light weight CSS code which do not effect your blog`s loading speed.
In built Social media icons.
Beautiful CSS color gradients are used for menu design.
Easy to add and customize.

Adding Floating dropdown menu to blogger

Login to your blogger dashboard.
Select your blog.
Select Template option.
Click Edit HTML.
Find </head> in the template code.
Paste following code just below it and save the template.
Preview your blog to see the new floating dropdown menu in action.

Code for floating dropdown menu :

<style>

#wctopdropcont{
  width:100%;
  height:40px;
  display:block;
  padding:0;
  margin:0 0 22px 0;

 z-index:100;
  top:0px;
left:0px;
 position:fixed;
    box-shadow:2px 2px 5px  #444444;
-moz-box-box-shadow:2px 2px 5px  #444444;
-web-kit-box-shadow:2px 2px 5px  #444444;
-goog-ms-box-shadow:2px 2px 5px  #444444;
background:#180000;
}

#wctopdropnav{
  float:left;
  width:700px;
  height:40px;
  display:block;
  padding:0;
  margin-left:40px;
}

#wctopdropnav ul{
  float:left;
  margin:0;
  padding:0;

}

#wctopdropnav li{
  float:left;
  list-style:none;
  line-height:40px;
  margin:0;
  padding:0
background:#180000;

}

#wctopdropnav li a, #wctopdropnav li a:link{
  color:#fff;
  display:block;
  margin:0;
font:16px georgia, verdana;
  padding:10px;
  text-decoration:none;
}

#wctopdropnav li a:hover, #wctopdropnav li a:active, #wctopdropnav .current_page_item a  {
  color:#fff;
  padding:10px;
background: rgb(180,223,91); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(180,223,91,1) 0%, rgba(180,223,91,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(180,223,91,1)), color-stop(100%,rgba(180,223,91,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4df5b', endColorstr='#b4df5b',GradientType=0 ); /* IE6-9 */
}
#wctopdropnav li li a, #wctopdropnav li li a:link, #wctopdropnav li li a:visited{
  font-size: 12px;
background:#180000;
  color: #fff;
  width: 150px;
  margin: 0;
  padding: 0px 10px;
  line-height:30px;
  position: relative;
}

#wctopdropnav li li a:hover, #wctopdropnav li li a:active {
  color: #fff;
background: rgb(180,223,91); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(180,223,91,1) 0%, rgba(180,223,91,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(180,223,91,1)), color-stop(100%,rgba(180,223,91,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(180,223,91,1) 0%,rgba(180,223,91,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b4df5b', endColorstr='#b4df5b',GradientType=0 ); /* IE6-9 */
}

#wctopdropnav li ul{
  z-index:9999;
  position:absolute;
  left:-999em;
  height:auto;
  width:170px;
  margin:0px;
  padding:0px
}

#wctopdropnav li:hover ul, #wctopdropnav li li:hover ul, #wctopdropnav li li li:hover ul, #wctopdropnav li.sfhover ul, #topwctopdropnav li li.sfhover ul, #topwctopdropnav li li li.sfhover ul{
  left:auto
}

#wctopdropnav li:hover, #wctopdropnav li.sfhover{
  position:static
}
#wctopdropsoc {
  float:right;
  width:220px;
  padding:0px 0px ;
  margin:9px 10px 0px 0px;
   }
#wctopdropsoc img
{
margin-left:5px;
margin-top:-2px;
height:26px;
border:none;
}

</style>

  <div id='wctopdropcont'>
     <div id='wctopdropnav'>
         <ul>
           <li><a href=''>Home</a></li>
           <li><a href='#'>About us</a></li>    
           
           <li><a href='#'>Tools</a>
               <ul>
                  <li><a href='#'>Item 1</a></li>
                  <li><a href='#'>Item 2</a></li>
                  <li><a href='#'>Item 3</a></li>
                  <li><a href='#'>Item 4</a></li>
                  
               </ul>
           </li>
    <li><a href='#'>Categories</a>
              
             <ul>
                  <li><a href='#'>Widgets</a></li>
                  <li><a href='#'>Templates</a></li>
                  <li><a href='#'>SEO</a></li>
                  <li><a href='#'>Wordpress</a></li>
                  <li><a href='#'>Blogger</a></li>
                  <li><a href='#'>Customization</a></li>
               </ul>
           </li>
             <li><a href='#'>Contact us</a>           
           </li>
         </ul>
      </div>

      <div id='wctopdropsoc'>
         
<a href='http://feeds.feedburner.com/WindroidClubblog' target='_blank'><img alt='Subcribe to our RSS feeds' src='http://2.bp.blogspot.com/-ea9ILzszTF0/UR3ySvlxd0I/AAAAAAAABMQ/4QBrWHbt0FU/s1600/feed.png'/></a>
<a href='http://www.facebook.com/Windroidclub' target='_blank'><img alt='Join Us on Facebook' src='http://1.bp.blogspot.com/-3wW_EmAR24w/UR3tVFL5fFI/AAAAAAAABLc/RMS76XM5sK8/s1600/fbb.png'/></a>
<a href='https://twitter.com/windroidclub' target='_blank'><img alt='Follow us on Twitter' src='http://1.bp.blogspot.com/-wSCdvgK8Ctw/UR3tWusvgyI/AAAAAAAABL0/FY3nUvdlJx0/s1600/tww.png'/></a>
<a href='https://plus.google.com/105802694845534710685' target='_blank'><img alt='Add to Circles' src='http://1.bp.blogspot.com/-YWI0K2Ebh2Q/UR3tVS1gDhI/AAAAAAAABLk/8hYaD0Yur_k/s1600/gpp.png'/></a>

      </div>
   </div>

Instructions :

Modify the value of background:#180000; to change background color of the menu.

3D EFFECT SOCIAL ICON TO YOUR BLOG

noreply@blogger.com (Anonymous) — Sat, 15 Feb 2014 13:44:00 +0000

Hey guys! I saw a 3d social icon with rotating spin effect on my friend’s blog, it was just so cool that I asked him for the code. After having the code I did some more touches and it was more beautiful, I couldn’t keep it to myself so i decide to share this awesome widget with you. In case you’re still wondering, what I’m i saying take a look at the image below.

Or better still; take a look at a live practical at by your right…

When putting your mouse on the icon, did you see how it rotates? How awesome is that? Don’t be afraid, click it to subscribe to our feed ***lol***.

3D SOCIAL ICON WITH ROTATE SPIN EFFECT

If you want one like that, copy the codes below

1<style> #social a:hover {background-color: transparent;opacity:0.7;} #social 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; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social">

2 

3<p>

4 

5<!--Start Rss Icon-->

6 

7<a title="Grab Our Rss Feed" href="UR FEEDS URL HERE" target="_blank"><img border="0" src="http://www.onenaijablog.com/img1/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a>

8 

9<!--End Rss Icon-->

10 

11<!--Start Email Rss Icon-->

12 

13<a rel="nofollow" title="Get Free Updates Via Email" href="UR EMAIL RSS URL HERE" target="_blank"><img border="0" src="http://onenaijablog.com/img1/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a>

14 

15<!--End Email Rss Icon-->

16 

17<!--Start Facebook Icon-->

18 

19<a rel="nofollow" title="Like Our Facebook Page" href="UR FACEBOOK PAGE HERE" target="_blank"><img border="0" src="http://onenaijablog.com/img1/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a></p>

20 

21<p>

22 

23<!--End Facebook Icon-->

24 

25<!--Start Twitter Icon-->

26 

27<a rel="nofollow" title="Follow Our Updates On Twitter" href="UR TWITTER PAGE HERE" target="_blank"><img border="0" src="http://onenaijablog.com/img1/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a>

28 

29<!--End Twitter Icon-->

30 

31<!--Start Google+ Icon-->

32 

33<a title="Follow Us On Google+" rel="nofollow" href="UR GOOGLE PAGE HERE" target="_blank"><img style="margin-right:1px;" src="http://onenaijablog.com/img1/GOOGLE-PLUS-48x48.png"/></a>

34 

35<!--End Google+ Icon-->

36 

37<!--Start Pinterest Icon-->

38 

39<a title="Follow Our Pins" rel="nofollow" href="UR PINTREST URL HERE" target="_blank"><img style="margin-right:1px;" src="http://onenaijablog.com/img1/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a>

40 

41<!--End Pinterest Icon-->

42 

43</p>

44 

45</div><br/> </center>

Have you copied it? Or do you want it to be straight like the image below?

then copy the code below…

1<style> #social a:hover {background-color: transparent;opacity:0.7;} #social 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; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social">

2 

3<p>

4 

5<!--Start Rss Icon-->

6 

7<a title="Grab Our Rss Feed" href="UR FEEDS URL HERE" target="_blank"><img border="0" src="http://www.onenaijablog.com/img1/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a>

8 

9<!--End Rss Icon-->

10 

11<!--Start Email Rss Icon-->

12 

13<a rel="nofollow" title="Get Free Updates Via Email" href="UR EMAIL RSS URL HERE" target="_blank"><img border="0" src="http://onenaijablog.com/img1/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a>

14 

15<!--End Email Rss Icon-->

16 

17<!--Start Facebook Icon-->

18 

19<a rel="nofollow" title="Like Our Facebook Page" href="UR FACEBOOK PAGE HERE" target="_blank"><img border="0" src="http://onenaijablog.com/img1/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a>

20 

21<!--End Facebook Icon-->

22 

23<!--Start Twitter Icon-->

24 

25<a rel="nofollow" title="Follow Our Updates On Twitter" href="UR TWITTER PAGE HERE" target="_blank"><img border="0" src="http://onenaijablog.com/img1/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a>

26 

27<!--End Twitter Icon-->

28 

29<!--Start Google+ Icon-->

30 

31<a title="Follow Us On Google+" rel="nofollow" href="UR GOOGLE PAGE HERE" target="_blank"><img style="margin-right:1px;" src="http://onenaijablog.com/img1/GOOGLE-PLUS-48x48.png"/></a>

32 

33<!--End Google+ Icon-->

34 

35<!--Start Pinterest Icon-->

36 

37<a title="Follow Our Pins" rel="nofollow" href="UR PINTREST URL HERE" target="_blank"><img style="margin-right:1px;" src="http://onenaijablog.com/img1/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a>

38 

39<!--End Pinterest Icon-->

40 

41</p>

42 

43</div><br/> </center>

TO INSERT IT ON YOUR WORDPRESS

Go to your wordpress admin section and click appearance click widget and drag the “Text” widget to where you want the icons to be. Now paste the code and save it, voila! You now have an awesome 3d spinning social icon on your blog.

TO INSERT IT ON YOUR BLOGGER BLOG

Go to your blogger blog admin panel and click “Layout” click “Add a Gadget” on the new interface that comes out, choose “HTML/JavaScript” and paste any of the choosing codes click save and you’re done..

How do you find this post? You can drop your comment using the comment box below.

Do click the like button subscribe and share us with friends if you find the post interesting. Don’t forget to subscribe to our feed for latest update on the go.

How to center any Blogger widget

noreply@blogger.com (Anonymous) — Sat, 15 Feb 2014 09:21:00 +0000

Center any Blogger widget

In this helpful Blogger tutorial you'll find out how to center any widget in your Blogger template.

There can be a number of ways to center widgets, below are a selection of options to try with your template.

Align singal gadget to the center

The codes below can be used to align your custom or third party widgets to the center via Blogger Dashboard > Layout > Add Gadget > HTML/Java Scripts

Option one

<div align="center">Your Widget Code</div>

Option two

<center>Your Widget Code</center>

Option three

<p align="center">Your Widget Code</p>

Simply replace the text in blue with your widget code.

Add the CSS rule to all widgets

The CSS rule below will center all widgets on your blog. Go to your Blogger dashboard >Template Customise > Advanced > Add CSS and apply to blog.

.widget {text-align: center;}

#Your-widget-ID {text-align: center;}

Helpful Blogger tip on How to find widget ID?

Job Done...

Automatic Read More Button For Blogger Blogs

noreply@blogger.com (Anonymous) — Tue, 11 Feb 2014 22:32:00 +0000

Today we give you trick to Add Automatic Read More Button For Blogger your long blog post which appear in your home page. Read more buttons needed because blogger show full post on your home page but many blogger want to show only summary of blog post on home page. So we need to add read more buttons on home page to split long blog post to summary and add read more after summary. Here I am showing you How to Add Automatic Read More Button For Blogger Blogs. After add this code your home page long post automatically convert into 2-3 line summary and add read more button after summary.

Before we Move, You may Also Liked to Read:

Add Automatic Read More Button For Blogger Blogs

Please follow below steps to Add Automatic Read More Button For Blogger Blogs:

Step 1

Step 2

Go to Blogger Template at the left panel and Click on Edit HTML Link as shown in below picture.

Step 3

Find below code with the help of CTRL + F:

</head>

Step 4

Copy and Paste below code above </head>:

<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
summary_noimg = 400; /* Summary length if no image*/
summary_img = 300; /* Summary length with image*/
img_thumb_height = 200; /*Image Height*/
img_thumb_width = 200; /*Image Width*/
</script>
<script type='text/javascript' src='http://netoopscodes.googlecode.com/svn/branches/Js%20files/auto-readmore-blogger.js' ></script>

Step 5

Now search below code:

<data:post.body/>

Step 6

Replace below code with this:

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more...</a></span><a href="http://www.haakblog.com"><img src="https://bitly.com/haakblog"></a>
</b:if>
</b:if>

Step 7

Click on Save Button.

If you have any question or update than you can contact with us any time at our E-mail supportHaakblog@gmail.com. I am always ready for fixing your css/HTML issues, For personalized help, you canHIRE ME

Custom Popular Post Widget In Blogger

noreply@blogger.com (Anonymous) — Tue, 11 Feb 2014 22:20:00 +0000

Today we provide you how to Add Custom Popular Post Widget In Blogger to display your popular posts in sidebar. Blogger allow adding simple popular post widget with default style so we provide you some style to change your popular post widget style to custom popular widget. Popular post widget shows most visited blog posts and display in four combinations:

Only the title of the post.
Post with thumbnail and title.
Post with Summary and Title.
Post with thumbnail and post snippet.

Popular post widget also attract visitors to get most popular post in your blog which means your blog get higher income and increase number of page views. We provide you step by step guide to how to add custom popular post widget in blogger. Let’s Start:

How To Add Custom Popular Post Widget In Blogger

There are two part of add custom popular post widget to blogger. Please follow below steps to Add Custom Popular Post Widget In Blogger:

Part 1: Add Popular Post widget in blogger

Step 1

Login into blogger account. Go to Blogger dashboard and click on Layout tab and click on Add a Gadget link as shown in below picture.

Step 2

When you click on Add a Gadget link a popup window will open with all gadgets list. Select popular widget from gadgets list as shown in below picture.

Step 3

Now Customize popular post widget as your requirement as shown in below picture.

Step 4

Click on save button.

Part 2: Change Popular Post Widget Style

Please follow below steps to add custom style of popular post widget:

Step 1

Now go to Template and click on Edit HTML button as shown in below picture.

Step 2

Search below code with help of CTRL + F:

]]></b:skin>

Step 3

Now choose your style from below images. Copy below code of style and paste it to just before above code:

Style 1

.popular-posts ul{padding-left:0px;} .popular-posts ul li {background: #FFF no-repeat scroll 5px 10px; list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 20px !important; border: 1px solid #dcdcdc; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; } .popular-posts ul li:hover { background:#FF8040; } .popular-posts ul li a { text-decoration:none; font:14px Georgia, verdana; color:#222222; } .popular-posts ul li a:hover { text-decoration:none; color:#fff; }

Style 2

#PopularPosts1 h2{position:relative;padding:8px 10px 6px 10px;width:100%;margin-bottom: 5px;font-size:17px;color:#757575; /* Color of the widget's title /text-align:left;}#PopularPosts1 ul{list-style:none;counter-reset:li;padding:10px;left:-8px;width:100%;}#PopularPosts1 li{ / Styles of each element /width:100%;position:relative;left:0;margin:0 0 1px 12px;padding:4px 5px;}#PopularPosts1 ul li:before{content: counter(li);counter-increment: li;position: absolute; left: -30px;top: 50%;margin-top: -13px;background: #8E8E8E; / background color of the numbers /height: 1.9em;width: 2em;line-height: 2em;text-align: center;font-weight: bold;color: #fff;font-size: 14px;}#PopularPosts1 ul li:after{position: absolute;content: '';left: -2px;margin-top: -.7em; top: 50%;width: 0;height: 0;border-top: 8px solid transparent;border-bottom: 8px solid transparent;border-left:10px solid #8E8E8E; / background color of the right arrow/}#PopularPosts1 ul li a{color: #444;text-decoration: none; font-size:15px;}#PopularPosts1 ul li {position: relative;display: block;padding: .4em .4em .4em .8em;padding: .4em;margin: .5em 0 .5em 0.4em;background: #ddd;transition: all .3s ease-out;text-decoration:none;transition: all .1s ease-in-out;}#PopularPosts1 ul li:hover{background: #eee; /* Background color on mouseover /} #PopularPosts1 ul li a:hover{color:#444; / Link color on mouseover */margin-left:3px;}

Style 3

.popular-posts ul{padding-left:0px;}
.popular-posts ul li {
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #dddddd;
-moz-box-shadow:1px 1px 2px #dcdcdc;
-web-kit-box-shadow: 1px 1px 2px #dcdcdc;
-goog-ms-box-shadow:1px 1px 2px #dcdcdc;
box-shadow:1px 1px 2px #dcdcdc;
border-radius:5px;
background: rgb(44,83,158); /* Old browsers */
background: -moz-linear-gradient(top, rgba(44,83,158,1) 0%, rgba(44,83,158,1) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(44,83,158,1)),
color-stop(100%,rgba(44,83,158,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(44,83,158,1) 0%,rgba(44,83,158,1)
100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(44,83,158,1) 0%,rgba(44,83,158,1) 100%);
/* IE10+ */
background: linear-gradient(to bottom, rgba(44,83,158,1) 0%,rgba(44,83,158,1)
100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2c539e',
endColorstr='#2c539e',GradientType=0 ); /* IE6-9 */
}
.popular-posts ul li:hover {
-moz-box-shadow:1px 1px 2px #dcdcdc;
-web-kit-box-shadow: 1px 1px 2px #dcdcdc;
-goog-ms-box-shadow:1px 1px 2px #dcdcdc;
box-shadow:2px 2px 4px #333333;
border:1px solid #333333;
color:#fff;
}
.popular-posts ul li a
{
text-decoration:none;
font:16px Georgia, verdana;
color:#ffffff;
}
.popular-posts ul li a:hover {
text-decoration:none;
}

Style 4

#PopularPosts1 h2{padding:8px 10px 3px 0;width:100%;margin:0;font-size:16px;position:relative;left:-20px;display:block;border-bottom:2px solid #ccc;}#PopularPosts1 ul{list-style:none;counter-reset:li;padding:10px;width:100%;}#PopularPosts1 li{ /* Styles of each element */width:100%;position:relative;left:0;margin:0 0 6px 10px;padding:4px 5px;}#PopularPosts1 ul li:before{ /* Style of the numbers */content:counter(li);counter-increment:li;position:absolute;top:3px;left:-39px;font-size:21px;width:28px;height:28px;border-radius: 50%;color:#777; /* Text color */border: 2px solid #ddd; /* Rounded border color */padding:0;text-indent:9px;}#PopularPosts1 ul li a{display:block;position:relative;left:-45px;width:100%;margin:0;min-height:28px;padding: 5px 3px 3px 39px;color:#333; /* color of the links */text-decoration:none;font-size:14px; /* Font size of the links */font-style: italic;
}#PopularPosts1 ul li a:hover{color:#3366ff;margin-left:3px;}

Style 5

.popular-posts ul { padding-left:0px; -moz-box-shadow:1px 1px 2px #dcdcdc; -web-kit-box-shadow: 1px 1px 2px #dcdcdc; -goog-ms-box-shadow:1px 1px 2px #dcdcdc; box-shadow:1px 1px 2px #dcdcdc; border: 1px solid #dcdcdc; } .popular-posts ul li { list-style-type: none; margin:0 0 5px 0px; padding:5px 5px 5px 20px !important; border-bottom:1px dashed #dcdcdc; background:#ffffff; } .popular-posts ul li a { text-decoration:none; font:16px georgia,verdana; color:#3d87c4; } .popular-posts ul li a:hover { text-decoration:none; color:#333333; }

Step 4

Click on Save button and refresh your blog to see custom popular widget on your blog.

Scrolling Adsense Feature When Scroll Down at Page

noreply@blogger.com (Anonymous) — Mon, 10 Feb 2014 21:42:00 +0000

As last we said about some Adsense Placing Space like RIGHT, LEFT, CENTER in the blogger but this tutorial is very different be'coz you can make scroll your ads when you scroll down the page and it will show at the bottom of the page. This widget is made by using the JavaScript codes and some little CSS codes which will give a certain good look to your adsense and feel it like a pro. but as we feel that codes are highly sensitive so you can only customize the CSS part and Scrolling effect but from myside I made smoothing scrolling as much as I can. Rest is depend on you.

Click on Drop Down Menu and select Layout

Add a HTML/JavaScript Gadget

Paste below code in it.

<div id='BeH-Fixed'>
Place Your Adsense Codes Here
    </div>

<script>
window.onload = function() {

function getScrollTop() {
    if (typeof window.pageYOffset !== 'undefined' ) {
      // Most browsers
      return window.pageYOffset;
    }

    var d = document.documentElement;
    if (d.clientHeight) {
      // IE in standards mode
      return d.scrollTop;
    }

    // IE in quirks mode
    return document.body.scrollTop;
}

window.onscroll = function() {
    var box = document.getElementById('BeH-Fixed'),
        scroll = getScrollTop();

    if (scroll <= 2509) {
      box.style.top = "2510px";
    }
    else {
      box.style.top = (scroll + 1) + "px";
    }
};

}
</script>
<style>
#BeH-Fixed {

position: absolute;
z-index:9999;
}
</style>

Save Your Widget and You are done.

Replace Place Your Adsense Codes Here it with your Adsense OR Chitika Codes.

3D Sliding In-Out Pro Social Sharing Widget V2 with Fixed Postion

noreply@blogger.com (Anonymous) — Mon, 10 Feb 2014 21:25:00 +0000

As in our last post we provide a Sliding In-Out Pro Social Sharing Widget for blogger and today we want to share some thing same widget just with a little bit of change in this widget that it's a fixed widget and it doesn't include the email subscription box and it's a totally fixed widget with 3D and mouse hover effect as you can see in the Live Demo. It's also a totally pure CSS enabled widget with no javascript and no jQuery also it doesn't have the other plugins with make it hard to install and hard to see it you also don't need to install it many times but you can easily install it in one time just a simple step with copy and paste. As we provide the last widget with generator but for this widget we didn't have the time to make generator for it be'coz we want to share it with our visitors as soon as possible and i can't wait to share it with my visitors. So, make it correct and enjoy with this professional looking widget and after it your blog will look a professional blog.

Click on Drop Down Menu and select Layout

Add a HTML/JavaScript Gadget

Paste below code in it.

<style> .WG-flt-wdt { position:fixed; right:10px; top:36% ; } .WG-flt-wdt img { float:right; clear:right; margin:1px; -webkit-transition: all .0s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .WG-flt-wdt img:hover { -moz-transform: scale(1.2) rotate(6deg); -webkit-transform: scale(1.2) rotate(6deg); -o-transform: scale(1.2) rotate(6deg); -ms-transform: scale(1.2) rotate(6deg); transform: scale(1.2) rotate(6deg); } </style> <div class="WG-flt-wdt">
<style> .WG1 { display: block; width: 64px; height: 64px; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimn5rNa_nWLX1QoKgKpGkAIGgdXAjJpvapgVBkRn376BUFOrXNWnVh4puYrgX6Hbh6rZQnw-rgyXrlC0wXxeQx3qZ5DXHU1x0ZyOFlzI-WmeUqthCqPXK26wLHlV8tTZ3ZXvtYonS-iv6K/s1600/Facebook+Icon.png') bottom; text-indent: -99999px; } .WG1:hover {         background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkto-eYkPyFnY9hl1dkqfheyz8p5g4MInwtn7FXobiSDzzmZU7D9mKaw8mS_-joCL1y6-DYslgm0Nhe7gnEwfXy4MDh1mM6XGB9WkOB7vxrR-AcfJRcgFReiCFjqn5jnAlzwZn3PoquGB8/s1600/Facebook+Rollout+Image.png' ) bottom; height: 64px; } </style> <a class="WG1" href="http://www.facebook.com/WidgetGenerators" title='Like Us'></a>

<style> .WG2 { display: block; width: 64px; height: 64px; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEih79H954kzGfCyjlnyk1Ud9vRjDWkQhgWrsRZFyjvoMRIz2lZaYX17HscyNfc6mUjY8lU9Kiscc_s7QnFgnK_Yg0zn9gtqdkZmXjlfPUksUg0YyGOOmLnrLUmN8CU3el4jLuoCpenIX7cU/s1600/Twitter+Icon.png') bottom; text-indent: -99999px; } .WG2:hover {         background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCc7s4sLxFUeH-v5uw-b5NAF-n8sR-3-roaWhz-QmW529oqjRG91saeXbLrZGyC55av2dmal6eak7TjWfL1nqf5tkxBU1E4W_aAfoT4zenSylnwdUnXUiCfpMu0Oj7R_1DhlBPlKbxmGMh/s1600/Twitter+Rollout+Image.png') bottom; height: 64px; } </style> <a class="WG2" href="http://www.twitter.com/WidgetGenerator" title='Follow Us'></a>

<style> .WG3 { display: block; width: 64px; height: 64px; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSWXPj6o7MuROLv6jxnmMoahNxMAxhb6TDIRbrmsLqTzeS43tElxhl0Dxux-RVgTdUessRRhvyl8YHy0XcXtdJpgMMonTAUDES8IZLHTlTmvPtnOZXFfswGP5s7slJzRB9I-iqpiAFg5XE/s1600/Feedburner+Icon.png') bottom; text-indent: -99999px; } .WG3:hover {         background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiexmTsWvSycUGfhI4khZveHLVGgB12hI40hIiwYFSFJDf1lOPHctT4Q1LH0LJZO7TBbRZZccq3cTiIAbicQUD7Z8VU1fWrcJVVGU74NIdD-1RiYU6uXdV5qEuegJwyess0wBKNwYJTBVmw/s1600/Feedburner+Rollout+Image.png') bottom; height: 64px; } </style> <a class="WG3" href="http://feeds.feedburner.com/WidgetGenerators" title='Subscribe Us'></a>

<style> .WG4 { display: block; width: 64px; height: 64px; background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBqKLnSSfsirPZ7A95Z-eHkRBxwQM3gm4ZW1C9BpY7t3G9fQbTnxNZPtAtIQhngchTSmZ44BvpqHyeKPt9LdIz1iaPCSDZZF9v1cC6Q4YHkalPzoPZZlMt6bxRN92w_pKLnGy8Z8aBxOb6/s1600/Google+Icon.png') bottom; text-indent: -99999px; } .WG4:hover {         background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1iENVnqZoZKs38tCQaont11b9ywErujo9NU3pAGsvnKmoYO9jFIlbxGXYcU9LHo0OOB01wEBtixCrKJPcOvmxs6UhsgjtXJ7e3FLr9IlW-UCDq1jn2nZGfx9_YQ3EvAQe4zG1nA6IQnvN/s1600/Google+Rollout+Image.png') bottom; height: 64px; } </style> <a class="WG4" href="https://plus.google.com/107877224551351252870" title='Add in Circle'></a>
</div>

Now Save your Widget and You are done.

Customize it

If you want to fix this template on left side then replace this text right with left.

MAKE CHANGES....!

Replace this http://www.facebook.com/WidgetGenerators with your Facebook Fan Page User name.

Replace this http://www.twitter.com/WidgetGenerator with your twitter user name.

Replace this http://feeds.feedburner.com/WidgetGenerators with your RSS Subscription user name.

Replace this https://plus.google.com/107877224551351252870 with your Google+ User name.

Add Simple Minimal Style Social Subscription Widget

noreply@blogger.com (Anonymous) — Mon, 10 Feb 2014 20:02:00 +0000

Having a site not integrated to any social media then you must surely integrate it soon by installing our minimal style social subscription widget. Because impact of social media is very much on bringing traffic to your sites and helping your brand or group to grow and get recognized soon.

Here in this tutorial we will be adding minimal style social subscription widget to your blogger sites. This widget is simple and sleek in look, it integrates the various social media platform to your sites or blogs, so that visitors can easily land on your social media fan pages to connect with you there socially.

Step#1

Open Blogger Dashboard → Layout → Add Gadget → Html/Javascript Editor
Now copy paste the below code to Html editor and save the gadget.




<style>
.social { width: 100%; margin:0;float:none }
.social ul { border: 1px solid #CCCCCC; margin:  0 0 0 0; padding: 0; display:table }
.social ul li { list-style:none; padding: 0 0 0 0 !important;margin:0 0 0 0; text-transform: none; border-bottom: 1px solid #CCCCCC; border-top: 1px solid #FFFFFF; width:100% }
.social ul li:first-child { border-top: 0 none; }
.social ul li:last-child { border-bottom: 0 none; }
.social ul li a { background-color: #F2F2F2 !important; color: #404040; display:block; }
.social ul li a:hover { background-color: #fafafa !important; }
.social ul li .rss { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPf2WjsJ7dPlYm-DuO6V3c2gW4_hVfratSKx4Vzr5pH8fIM7aoLFf86w8sF00YFy9zyQ-L4MfXjxW1th8oEErV5b6zheynyVVDRdVWD2b9nlS08_6qCgHwqZMC-b6kM-cqAPkH8LQVwg/s1600/RSS-1.png") no-repeat scroll 10px center #F87E12; padding: 17.5px 60px; }
.social ul li .twitter { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_TVVKyLi7qTXNDLB_oAl20El9DklKoVZd16VUiLZyqQ7NVcoSvyh6GGl4ScRo37e5y-9HZ8-CJiBTlC6tbdSpxNB3gW-n9ls2SPueZ1ie7CPN_BaSPKqhpxpAUGpMerNzYkJ3NxrmTw/s1600/Twitter.png") no-repeat scroll 10px center #4CACEE; padding: 17.5px 60px;}
.social ul li .facebook { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbxdrnvoQClTc5jDcjAp52JYfbF0YqvurBa8m_FuKJpOe5QGWPLx6ULmasD2n0ivj57t-TXv-vaiHugWQOEOLU2_WhxUCmayiuCA1dVONJequ2EJuomll3m5TFg3R4udggUKE2YXrBnA/s1600/Facebook-1.png") no-repeat scroll 10px center #3B5998; padding: 17.5px 60px; }
.social ul li .google { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvP4q-SFW0OgkHPjuierOb_qQsIOMP2qqdE_tSNBWdKfr6Awvj0u2KXfvaxUAGLoBgZ1YebBror-d23-fsKWh8a3iUWMELlcs1fDep4d4VUXRYRxCU7HUxxrnR7fTH_4Kziu3ugvh-Zw/s1600/google.png") no-repeat scroll 10px center #D44937; padding: 17.5px 60px; }
.social ul li .linkedin { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcF_-8Ylzubd__-K7nxnEFjFPtLi-C-lShNOpGQipLPmuAjvv_tS_qRdD35DH4DImTZ1S1E-QQuOXbTxkoGEv3TJJVe15j9Mb15CQQ7J90beIeS-1REnHjrRvwKg9avMCk9lvdcsdJoA/s1600/LinkedIn-1.png") no-repeat scroll 10px center #3692C3; padding: 17.5px 60px; }
.social ul li .youtube { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY63Ond_BOyQhTH9Almf5wY2M7tu0OrPVZhI8g_EQWMNYSlpzd8KcYdsW7032jvQs4DOAOZUhyphenhyphen4RlPr-S-tdSmAcUQFxhjCX-GbWHWw2Um2XGmglaQHZfObeVmPeae5ToBVj7I54CBbg/s1600/Youtube-1.png") no-repeat scroll 10px center #C6312B; padding: 17.5px 60px; } .social-about { display: none; }
</style>

<div class="social">
<ul>
<li><a class="rss" href="http://feeds.feedburner.com/xxxxxxxxxx">Subscribe to the RSS Feed</a></li>
<li><a class="twitter" href="https://twitter.com/xxxxxxxxxx">Follow me on Twitter</a></li>
<li><a class="facebook" href="https://www.facebook.com/xxxxxxxxxx">Find me on Facebook</a></li>
<li><a class="google" href="https://plus.google.com/xxxxxxxxxx" rel="author">Join me on Google+</a></li>
<li><a class="linkedin" href="http://in.linkedin.com/xxxxxxxxxx">Connect with me on LinkedIn</a></li>
<li><a class="youtube" href="http://www.youtube.com/xxxxxxxxxx">Watch me on YouTube</a></li>
</ul>
</div>

Step#2

There are little modifications are to be done before adding this widget to your blog.
Replace xxxxxxxxxx
with your site's/blog's username.
After you have replaced the username with yours save the widget now it's all yours.

Add Floating AdSense and Other Ads On Sidebar Of Your Blog

noreply@blogger.com (Anonymous) — Fri, 07 Feb 2014 12:40:00 +0000

Many bloggers are using floating ads on their blogs. Because they are earning much money with floating ads. If your blog's sidebar has no more ad space then you can use these ads. By using floating technique we can generate more click on AdSense or other ads. Today in this tutorial we will guide you how to show 160px x 600px floating AdSense ads on right or left side of your blog. Before displaying ads please read carefully about TOS of your respective ad network that are they allow to float ads or not?

Demo

Add This Widget to Blogger Blog

Go to Blogger Dashboard » Layout
Click On Add a Gadget
Choose HTML/JavaScript.
Copy The Below Code and Paste it In "HTML/JavaScript" Gadget.

<style>

#blogsdaddyflotads {

height:30px;

width:auto;

background: #333333 url('..');

background-repeat:repeat-x;

text-align:left;

padding-top:4px;

}

#bdadsbase{

height:600;

margin:0auto;

width:160px;

background:#fff;

border-bottom:2px #333333 solid;

border-right:2px #333333 solid;

border-left:2px #333333 solid;

text-align:center;

padding:4px;

}

#bdadsheadline{

opacity:1.0;

height:auto;

width:auto;

position:fixed;

top:65px;

left:10px;

border-bottom:1px #005094 solid;

border-bottom:0px blue solid;

color:#333;

padding:0px;

z-index:1001;

font-size:13px;}

</style>

<script type="text/javascript">

function getValue()

{

document.getElementById("bdadsheadline").style.display = 'none';

}

</script>

<div id="bdadsheadline">

<div id="blogsdaddyflotads">

<span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em"></span>

<span style="color:#fff;font-size:13px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.1em;float:right;padding-top:3px;padding-right:10px"><a href="http://www.blogsdaddy.com/2013/07/float-adsense-on-sidebar-of-blogger.html" target="_blank" rel='nofollow' onclick="getValue()">close(x)</a></span>

</div>

<div id="bdadsbase">

<h3></h3>

<p align="left"><h3></h3></p>

<p>

Your Ad Code Here

<br/></p></div></div>

Customization

Replace "Your Ad Code Here" With Your Own Ad Code.
Change 160px to Increase or Decrease Width.
Change Left With Right to Float Right Side Of Your Blog.