latest articles

Add a Blue Professional Dropdown Menu in Blogger


  • Login to Blogger > Dashborad
  • 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.

Read more

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

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

Το slider μπορείτε να το προσθέσετε στο δικό σας blog με το απλούστατο τρόπο που μάθαμε για να προσθέτουμε gadget στο blogger.
  • Σύνδεση στο λογαριασμό σας στο blogger.com
  • Διάταξη 
  • Προσθήκη gadget
  • HTML/JavaScript
  • Επικόλληση και Αποθήκευση του πιο κάτω κώδικα

<style scoped="" type="text/css"> #coinautoslide{margin:0 auto;border:4px solid white;border-radius:2px;font:normal normal 11px Verdana,Geneva,sans-serif;line-height:1.6em} .coin-slider{overflow:hidden;zoom:1;position:relative} .coin-slider a{text-decoration:none;outline:none;border:none} .cs-buttons{font-size:0;padding:10px;float:left} .cs-buttons a{margin-left:5px;height:10px;width:10px;float:left;border:1px solid #B8C4CF;color:#B8C4CF;text-indent:-1000px} .cs-active{background-color:#B8C4CF;color:#FFFFFF} .cs-buttons a{border-radius:50%;background:#CCC;background:-webkit-linear-gradient(top,#CCCCCC,#F3F3F3);background:-moz-linear-gradient(top,#CCCCCC,#F3F3F3);background:-o-linear-gradient(top,#CCCCCC,#F3F3F3);background:-ms-linear-gradient(top,#CCCCCC,#F3F3F3);background:linear-gradient(top,#CCCCCC,#F3F3F3)} a.cs-active{background:#599BDC;background:-webkit-linear-gradient(top,#599BDC,#3072B3);background:-moz-linear-gradient(top,#599BDC,#3072B3);background:-o-linear-gradient(top,#599BDC,#3072B3);background:-ms-linear-gradient(top,#599BDC,#3072B3);background:linear-gradient(top,#599BDC,#3072B3);border-radius:50%;box-shadow:0 0 3px #518CC6;border:1px solid #3072B3!important} .cs-title{width:100%;padding:5px 0;background-color:#000000;color:#FFFFFF} .cs-title strong{display:block;font-size:120%} .cs-title p{margin:0} .cs-title cite{font-size:90%} .cs-title strong,.cs-title cite,.cs-title p{padding:0 10px} .cs-prev,.cs-next{background-color:#000000;color:#FFFFFF;padding:0 10px} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> <script type='text/javascript'> var AutoCoinConfig = { url_blog: "http://lefta4klik.blogspot.gr/", MaxPost: 8, cmtext: "Komentar", MonthNames : ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"], pBlank : "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.gif", NoCmtext : "Belum Ada Komentar", imageSize :500, SumChars : 100, tagName:false, width: 500, height: 250, spw: 7, sph: 5, delay: 3000, sDelay: 30, opacity: 0.7, titleSpeed: 500, effect: '', navigation: true, links : true, hoverPause: true, prevText: 'prev', nextText: 'next' }; </script> <script src="https://googledrive.com/host/0B3fIJ7nZFI9iSnJweDBXVUsydG8/" type="text/javascript"></script>


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

Pure CSS Expanded Social Network Widget


Φίλες και φίλοι γεια σας, σήμερα θα δούμε ένα  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και μόλις
τελειώσετε πατήστε Αποθήκευση!Αυτό ήταν!

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

How To Add Adsense Inside Blogger Post

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:
  1. We will have to parse our AdSense code>>>(Parse It Here)  Or (Parse Here)
  2. 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.  
Read more

Css3 Smooth Slideout Menu Bar For Blogger 2013


How to use Menu Bar Widget :
  1. Log in to blogger account and Click drop down. 
  2. Now select "Template" Like Below.
  3. Now you can see Live on blog, Click EDIT HTML Button"
  4. Now click Proceed button.         
                                                                                                     
  1. Find this tag by using Ctrl+F    ]]></b:skin>
  2. 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>
        <!--[if lte IE 6]><a class="ie6" href="#url"><table><tr><td><![endif]-->
            <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>
        <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
    </ul>

Replace # with your links.

10. Now save your 'HTML/Javascript'.

End.
Read more

How To Create Blogger Template From Scratch

Create Blogger Template
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 == &quot;index&quot;'>
        <data:blog.pageTitle/>
        <b:else/>
        <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
          <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!
Read more

How to center any Blogger widget



How to center any Blogger widget gadget
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...
Read more