Sunday 18 December 2016
RESPONSIVE BLOGGER TEMPLATE
----------------------------------------------------------------------------------------------------------------
RESPONSIVE GENERIC BLOGGER TEMPLATE CODE:
Read More:
https://css-tricks.com/the-perfect-fluid-width-layout/
https://btemplates.com/blogger-templates/responsive/
http://btemplates.com/2016/blogger-template-healthdaily/demo/
RESPONSIVE BLOGGER TEMPLATE - YouTube
https://www.youtube.com/watch?v=AIY1doPtj_Q
16 mins ago - Uploaded by SAVE MONEY
RESPONSIVE BLOGGER TEMPLATE FB GADGETS ... New Responsive Template "Fluid" - Fresh ...
<!-- RESPOSIVE TEMPLATE CODE START !-->
<html b:version='2' class='v2' 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'>
<!-- RESPOSIVE TEMPLATE CODE END !-->
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/***************************
****************************
ADD BSKIN TAG CODE
****************************
***************************/
/*-----------------------------------------------
Blogger Template Style
Name: Picture Window
Designer: Josh Peterson
URL: www.noaesthetic.com
----------------------------------------------- */
#header-inner{
border: 2px solid Black;
}
#sidebar-wrapper {
width: 300px;
float: right;
border: 2px solid Black;
}
.sidebar h2 {
border: 2px solid Red;
}
#footer-wrapper {
border: 2px solid Black;
width:960px;
height:95px;
}
]]></b:skin>
<!-- RESPOSIVE TEMPLATE CODE START !-->
<b:template-skin>
<b:variable default='960px' name='content.width' type='length'/>
<b:variable default='0' name='main.column.left.width' type='length'/>
<b:variable default='310px' name='main.column.right.width' type='length'/>
<![CDATA[
body {
min-width: 960px;
}
.content-outer{
min-width: 960px;
max-width: 960px;
width: 960px;
}
.content-fauxcolumn-outer{
min-width: 960px;
max-width: 960px;
width: 960px;
}
.columns {
padding-left: 0;
padding-right: 310px;
}
.fauxcolumn-center-outer{
left: 0;
right: 310px;
}
.fauxcolumn-left-outer{
width: 0;
}
.fauxcolumn-right-outer{
width: 310px;
}
.column-left-outer {
width: 0;
right: 100%;
margin-left: -0;
}
.column-right-outer{
width: 310px;
margin-right: -310px;
}
]]>
</b:template-skin>
<!-- RESPOSIVE TEMPLATE CODE END !-->
</head>
<body>
<!-- RESPOSIVE TEMPLATE CODE START !-->
<div class='content'>
<div class='content-outer'>
<div class='content-inner'>
<!-- RESPOSIVE TEMPLATE CODE END !-->
<!-- HEADER CODE START !-->
<header>
<div class='header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='General Magic (Header)' type='Header' version='1' visible='true'>
</b:widget>
</b:section>
</div>
</header>
<!-- HEADER CODE END!-->
<!-- RESPOSIVE TEMPLATE CODE START !-->
<div class='main-inner'>
<div class='columns fauxcolumns'>
<div class='column-center-outer'>
<div class='column-center-inner'>
<!-- MAIN CODE START !-->
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1' visible='true'></b:widget>
</b:section>
<!-- MAIN CODE START !-->
</div></div></div></div>
<!-- RESPOSIVE TEMPLATE CODE END !-->
<!-- RESPOSIVE TEMPLATE CODE START !-->
<div class='column-right-outer'>
<div class='column-right-inner'>
<!-- RESPOSIVE TEMPLATE CODE END !-->
<!-- SIDE CODE START !-->
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' visible='true'>
</b:widget>
</b:section>
</div>
<!-- SIDE CODE END !-->
</div></div>
<div style='clear: both'/>
<!-- FOOTER CODE START !-->
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
<!-- FOOTER CODE END !-->
</div></div></div>
</body>
</html>
---------------------------------------------------------------------------------------------------------------
OR UPPER CODE IN MINIMIZE CODE:
https://www.youtube.com/watch?v=edLvIS-_GqQ
http://computermaster5089.blogspot.com/2018/03/how-to-create-websitewebpage-in-html.html
https://www.google.co.uk/search?q=create+a+responsive+website+using+html5+and+css3&rlz=1C1CHBD_en-GBGB813GB813&source=lnms&tbm=isch&sa=X&ved=0ahUKEwiG6IrBr7bdAhUFbMAKHVKkCaMQ_AUICygC&biw=1280&bih=645#imgrc=HTYvlePPSbyZ0M:
---------------------------------------------------------------------------------------------------------------
<?xml version="1.0" encoding="UTF-8" ?>
<!-- RESPOSIVE TEMPLATE CODE START !--><html b:version='2' class='v2' 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'>
<!-- RESPOSIVE TEMPLATE CODE END !-->
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
/***************************
****************************
ADD BSKIN TAG CODE
****************************
***************************/
/*-----------------------------------------------
Blogger Template Style
Name: Picture Window
Designer: Josh Peterson
URL: www.noaesthetic.com
----------------------------------------------- */
#header-inner{
border: 2px solid Black;
}
#sidebar-wrapper {
width: 300px;
float: right;
border: 2px solid Black;
}
.sidebar h2 {
border: 2px solid Red;
}
.footer-outer {
border: 2px solid Green;
height: 95px;
background-color: Yellow;
}
]]></b:skin>
<!-- RESPOSIVE TEMPLATE CODE START !-->
<b:template-skin>
<b:variable default='960px' name='content.width' type='length'/>
<b:variable default='0' name='main.column.left.width' type='length'/>
<b:variable default='310px' name='main.column.right.width' type='length'/>
<![CDATA[
body {
min-width: 960px;
}
.content-outer{
min-width: 960px;
max-width: 960px;
width: 960px;
border: 2px solid Blue;
}
.columns {
padding-left: 0;
padding-right: 310px;
}
]]>
</b:template-skin>
<!-- RESPOSIVE TEMPLATE CODE END !-->
</head>
<body>
<!-- RESPOSIVE TEMPLATE CODE START !-->
<div class='content'>
<div class='content-outer'>
<div class='content-inner'>
<!-- RESPOSIVE TEMPLATE CODE END !-->
<!-- HEADER CODE START !-->
<header>
<div class='header-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='General Magic (Header)' type='Header' version='1' visible='true'>
</b:widget>
</b:section>
</div>
</header>
<!-- HEADER CODE END!-->
<!-- RESPOSIVE TEMPLATE CODE START !-->
<div class='main-inner'>
<div class='columns'>
<div class='column-center-outer'>
<!-- MAIN CODE START !-->
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1' visible='true'></b:widget>
</b:section>
<!-- MAIN CODE START !-->
</div></div></div></div>
<!-- RESPOSIVE TEMPLATE CODE END !-->
<!-- SIDE CODE START !-->
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' visible='true'>
</b:widget>
</b:section>
</div>
<!-- SIDE CODE END !-->
<div style='clear: both'/>
<!-- FOOTER CODE START !-->
<div class='footer-outer'>
<b:section class='footer' id='footer-3' name='Footer' showaddelement='no'>
<b:widget id='Attribution1' locked='true' title='' type='Attribution' visible='true'>
</b:widget>
</b:section>
</div>
<!-- FOOTER CODE END !-->
</div></div>
</body>
</html>
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment