Part 4 How to Create Your Own Blogger Template - Header Block

Part 4 Create a Blogger/Blogspot Templates : How to Create Your Own Blogger Template for beginners? Part 4 make blog templates and Knowing Header Block Blogger Templates

Create a Blogger/Blogspot Templates - How to make your Own Blogger Templates quickly and easily for beginners? This tutorial is a continuation of the previous tutorial How to create a templates before, Recommended before following this tutorial, please read the previous tutorials :
  1. Part 1 How to Create Your Own Blogger Template.
  2. Part 2 How to Create Your Own Blogger Template.
  3. Part 3 How to Create Your Own Blogger Template.
In this lesson, we will learn about "Header Block" in Blogger templates. As we know, on the Header Block is a place to put all the elements, such as the Title of Blog's, Descriptions, a menus etc. So we'll start the lessons.
How to Create Your Own Blogger Templates

Source Code Blogger Templates

In accordance with the tutorial How to make a Blogger templates on the previous lessons (Part 1, part 2 and part 3) we've made a blog templates look like this source code :

<?xml version="1.0" encoding="UTF-8" ?>
<!--XML (Extensibel Markup Language)-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html 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>
    <title><data:blog.pageTitle/></title>
    <!--judul blog-->
  <b:skin><![CDATA[
    /*
    -----------------------------------------------
    Blogger Templates Style
    Name    : Newbie To Blogger
    Designer: Harison Matondang
    URL     : http://www,hc-kr.com/
    -----------------------------------------------
    */
    * {
    margin:0;
    padding:0;
    border:none;
    vertical-align:baseline;
    outline:none;
    }
    .clear {clear:both;}

    /* CSS Body Block Start*/
    body {
    background:#ffffff;
    font-size:14px;
    font-family:Arial;
    margin:4px;
    padding:4px;
    }

    a {color:#9b50ba;text-decoration:none;}
    a:hover {color:#0378B2;text-decoration:underline;}
    a:visited {color:#9b59b6;text-decoration:nounderline;}
    a img {border-width:1px; color:#333333;}


    /* CSS Outer Wrapper Block Start*/
    #outer-wrapper {
    width:960px;
    margin:0 auto;
    padding:0;
    }
/* CSS Outer Wrapper Block End*/
  ]]></b:skin>
  </head>
<body>
   <div id='outer-wrapper'>
   <!-- Open Outer Wrapper Block-->
   <div id='header-wrapper'>
   <!-- Open Header Block-->
   <b:section class='header' id='header' maxwidgets='1'>
        <b:widget id='Header1' locked='true' title='www.Hc-Kr.Com' type='Header'/>
   </b:section>
   </div>
   <!--Header is Ended Here-->
        <div id='main-wrapper'>
        <!-- Open main-wrapper Block for our post, comment or widgets -->
        <b:section class='main' id='main'>
            <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
        </b:section>
        </div>
        <!--Main wrapper ended-->
        <div class='clear'>&#160;</div>
  <div class='clear'/>
    <div id='sidebar-wrapper'>
    <!-- Open sidebar Block -->
    <b:section class='sidebar' id='sidebar-1' showaddelement='yes'/>
  </div>
  <!--sidebar ended here-->
  <div id='footer-wrapper'>
  <!-- Open Footer Block-->
    <b:section class='footer' id='footer-1' showaddelement='yes'/>
  </div>
  <!--bagian footer end-->
</div>
<!-- End Of Outer Wrapper Block -->
</body>
</html>

Create Header Block CSS

And now we will make CSS code on Header Block, make sure you write the entire code below and place it between <![CDATA[ /* CSS code Here */ ]]> :

/* Header Wrapper Block CSS */
#header-wrapper {
width:960px;
height:150px;
background:#e74c3c;
}

#header-inner {
background-position: left;
height:150px;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
text-align: left;
color:#ffffff;
}

#header h1 {
padding:40px 20px 0 10px;
line-height:1.2em;
text-shadow:1px 1px 1px #ffffff;
text-transform:uppercase;
letter-spacing:.2em;
}

#header a {
color:#ffffff;
text-decoration:none;
}

#header a:hover {
color:#ffffff;
}

#header .description {
margin:0 5px 5px 0 ;
padding:0 20px 0 10px;
max-width:700px;
letter-spacing:.2em;
color:#ffffff;
}

#header img {
margin-left: auto;
margin-top: auto;
}

CSS Descriptions :

  1. #header-wrapper :  width 960px and height 150px using background color #c0392b.
  2. #header h1 : is for our blog title's.
  3. #header .decription : is for Blog Descriptions.
Please follow and apply this tutorial on your blog that you've created before, and give a comment if you have a trouble.

See you on the next lessons.

COMMENTS

Next Recomended


Feel free to code it up and send us a pull request.

Hi everyone, let's me know how much this lesson can help your work. Please Subscribe and Follow Our Social Media 'kodeajaib[dot]com' to get Latest tutorials and will be send to your email everyday for free!, Just hit a comment if you have confused. Nice to meet you and Happy coding :) all ^^



Follow by E-Mail


Name

ADO.NET,3,Ajax,6,Android,9,AngularJS,4,ASP.NET,4,Blogger Tutorials,7,Bootstrap,7,C++,1,Codeigniter,2,Cplusplus,6,Crystal Report,6,CSharp,25,Ebook Java,2,FlyExam,1,FSharp,3,Game Development,2,Java,35,JDBC,2,Laravel,84,Lumen,2,MariaDB,2,Ms Access,3,MySQL,31,ODBC,6,OleDB,1,PHP,14,PHP Framework,5,PHP MYSQLI,9,PHP OOP,5,Python,8,Python 3,4,SQL Server,4,SQLite,4,Uncategorized,5,Vb 6,2,Vb.Net,89,Video,48,Vue Js,4,WPF,2,Yii,3,
ltr
item
KODE AJAIB: Part 4 How to Create Your Own Blogger Template - Header Block
Part 4 How to Create Your Own Blogger Template - Header Block
Part 4 Create a Blogger/Blogspot Templates : How to Create Your Own Blogger Template for beginners? Part 4 make blog templates and Knowing Header Block Blogger Templates
https://3.bp.blogspot.com/-71FTnmuT5DQ/V2QB0MmhsUI/AAAAAAAACEU/ikNRj-h3PH0azUlBeIn8Al8cWy1Zzw-UwCLcB/s320/how-to-make-blogger-templates.jpg
https://3.bp.blogspot.com/-71FTnmuT5DQ/V2QB0MmhsUI/AAAAAAAACEU/ikNRj-h3PH0azUlBeIn8Al8cWy1Zzw-UwCLcB/s72-c/how-to-make-blogger-templates.jpg
KODE AJAIB
https://www.kodeajaib.com/2016/06/part-4-how-to-create-your-own-blogger.html
https://www.kodeajaib.com/
https://www.kodeajaib.com/
https://www.kodeajaib.com/2016/06/part-4-how-to-create-your-own-blogger.html
true
3214704946184383982
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy