Part 3 How to Create Your Own Blogger Template - Body and Outer Wrapper Block

Create a Blogger/Blogspot Templates : How to Create Your Own Blogger Template for beginners? Part 3 make blog templates and Knowing Body and Outer Wrapper Block

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 : Part 1 How to Create Your Own Blogger Template and Part 2 How to Create Your Own Blogger Template.

In this tutorial, we will discusses about Body and Outer Wrapper Block in a blogger templates, and how it's will be working. As we know, on the Body Block and Outer-wrapper/Container Block is a place to put all the elements, such as the header, sidebar, footer, content, etc. So we'll start the lessons.

How to Create Your Own Blogger Template

Source Code Blogger Templates

In accordance with the tutorial How to make a Blogger templates on the previous lessons (Part 2) 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/
    -----------------------------------------------
    */
  ]]></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 Body and Outer Wrapper CSS

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

* {
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*/

CSS Description:

Body Block:

  1. The Background color is white using code #ffffff , you could replace it with another color.
  2. font size is 14px and  font type is Arial (you can also replace them with any font you want for example Tahoma, Georgia, Times New Roman etc.)
  3. a {color: #9b50ba; text-decoration: none;} this determines the basic link color is wisteria color.
  4. a:hover {color: #0378B2; text-decoration: underline;} define the character of the Link when it is highlighted.
  5. a:visited {color:#9b59b6;text-decoration:nounderline;} define the characters visited Links.
  6. a img {border-width:1px; color:#333333;} define the character of a Picture Link

Outer-Wrapper

  1. Width: 960px, you can change it (this change will affect other elements, so if you want to change the wide Outer-wrapper, you must also change other elements).
  2. Margin: 0 auto, This means the margins or spacing out will be determined automatically, the position will display right in the midst because auto are fair.
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 3 How to Create Your Own Blogger Template - Body and Outer Wrapper Block
Part 3 How to Create Your Own Blogger Template - Body and Outer Wrapper Block
Create a Blogger/Blogspot Templates : How to Create Your Own Blogger Template for beginners? Part 3 make blog templates and Knowing Body and Outer Wrapper Block
https://1.bp.blogspot.com/-13KVwCFS2Y0/V2F0XwkkIcI/AAAAAAAACDk/W3CUjgot_mUDEEhqfaiAU6OKm4yAbrahACLcB/s320/how-to-make-blogger-templates.jpg
https://1.bp.blogspot.com/-13KVwCFS2Y0/V2F0XwkkIcI/AAAAAAAACDk/W3CUjgot_mUDEEhqfaiAU6OKm4yAbrahACLcB/s72-c/how-to-make-blogger-templates.jpg
KODE AJAIB
https://www.kodeajaib.com/2016/06/part-3-how-to-create-your-own-blogger.html
https://www.kodeajaib.com/
https://www.kodeajaib.com/
https://www.kodeajaib.com/2016/06/part-3-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