Part 5 How to Create Your Own Blogger Template - Sidebar Block

Blogger Tutorials For Beginners : Part 5 How to Create Your Own Blogger Template, How to create and knowing Sidebar Block in blogger/blogspot templates.

Create a Blogger/Blogspot Templates - Part5 How to create your Own Blogger Templates quickly and easily for beginners? This sessions about 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 (Knowing Blogger Element).
  3. Part 3 How to Create Your Own Blogger Template (Body and Outer Wrapper Block).
  4. Part 4 How to Create Your Own Blogger Template (Header Block).
In new lesson, we will learn about "Sidebar Block" in a Blogger templates. As we know, on the Sidebar Block is a place to put all the elements, such as the Menus Widget, Post Popular Widget, etc. So we'll start the lessons.
How to Create Your Own Blogger Template - Sidebar Block

Source Code Simple Blogger Templates

From the tutorial How to make a Blogger templates on previous lessons (Part 1, part 2, part 3 and Part 4) we've created 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*/

    /* 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 Header 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 Sidebar-Wrapper CSS Block

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

#sidebar-wrapper{
  width:200px;
  margin:10px 0 0 0;
  padding:0;
  float:right;
  word-wrap: break-word;
  overflow: hidden;
  }
#sidebar-wrapper h2{ /* H2 Sidebar */
background:#CCC;
margin:0;
  padding:5px;
  font-size:14px;
  font-weight:bold;
  color:#191919;
  }
.sidebar {
  font-color:#151515;
  margin:0;
}
.sidebar-wrapper ul {
list-style:none;
margin:0;
padding:0;
}
.sidebar ol {
list-style:decimal;
}
.sidebar li {
line-height:1.4em;
border-bottom:1px dotted #EAEAEA;
}
.sidebar .widget-content {
padding:10px;
margin:0;
}
.sidebar .widget {
margin:0px;
margin-bottom:10px;
border:1px solid #CCC;
}
.clear {
  height:1px;
  margin:0;
  padding:0;
  clear:both;
  }
/* End of Sidebar-Wrapper CSS */

Sidebar-Wrapper CSS Descriptions

You can see, we will put the entire all of Sidebar widget on the Sidebar-Wrapper block, please see this area :

<div id='sidebar-wrapper'>
    <!-- Open sidebar Block -->
    <b:section class='sidebar' id='sidebar-1' showaddelement='yes'/>
  </div>
  <!--sidebar ended here-->

On the Blogger Elements, you can manually add a widget into Sidebar-Wrapper.

With The Sidebar-Wrapper Css Block have size of width 200 px respectively you can increase, but it should be kept in mind in addition the width of each element affect the other element, so if making changes to the width of the sidebar please Fox also the  Main-Wrapper width by adjusting the reduced width of the Main-Wrapper.

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 5 How to Create Your Own Blogger Template - Sidebar Block
Part 5 How to Create Your Own Blogger Template - Sidebar Block
Blogger Tutorials For Beginners : Part 5 How to Create Your Own Blogger Template, How to create and knowing Sidebar Block in blogger/blogspot templates.
https://3.bp.blogspot.com/-_XMsWEoXhbI/V269WY5Tj7I/AAAAAAAACFg/X02iakDPWB8lf6hWYHKU-WhjbWuGDrcZQCLcB/s320/how-to-make-blogger-templates.jpg
https://3.bp.blogspot.com/-_XMsWEoXhbI/V269WY5Tj7I/AAAAAAAACFg/X02iakDPWB8lf6hWYHKU-WhjbWuGDrcZQCLcB/s72-c/how-to-make-blogger-templates.jpg
KODE AJAIB
https://www.kodeajaib.com/2016/06/part-5-how-to-create-blogger-templates.html
https://www.kodeajaib.com/
https://www.kodeajaib.com/
https://www.kodeajaib.com/2016/06/part-5-how-to-create-blogger-templates.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