RESPONSIVE BLOGGER TEMPLATE FB GDGETS

Friday, 23 December 2016

RESPONSIVE BLOGGER TEMPLATE FB GDGETS

----------------------------------------------------------------------------------------------------------------
RESPONSIVE BLOGGER TEMPLATE FB GDGETS 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/
UNRESPONSIVE BLOGGER TEMPLATE
http://fbgadgets.blogspot.co.uk/2016/12/generic-blogger-template-parts.html
Blogger Skin Mask
http://fbgadgets.blogspot.co.uk/2017/01/blogger-skin-mask.html

RESPONSIVE BLOGGER TEMPLATE - YouTube

▶ 9:19

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 ...

----------------------------------------------------------------------------------------------------------------

<?xml version="1.0" encoding="UTF-8" ?>

<html>

<head>

<b:skin><![CDATA[/*

-----------------------------------------------

Blogger Template Style

Name: BTheme Blogger Template

Designer: Kumar

URL: www.bloggertheme.net

Version: 1.0

----------------------------------------------- */

/* Use this with templates/template-twocol.html */

body {

background: White;

color: Black;

font: 12px Verdana;

margin:0;

text-align:center;

}

a:link,a:visited {

color:#1C4991;

text-decoration:none;

}

a:hover {

color:#C00;

text-decoration:underline;

}

/*---------------- Header -------------------*/

#header-wrapper {

border: 2px solid Black;

}

#header-inner {

border: 2px solid Black;

}

#header {

border: 2px solid Black;

}

.title {

border: 2px solid Green;

background-color:Yellow;

color:red;

}

/*---------------- Outer-Wrapper ----------------- */

#outer-wrapper {

width: 970px;

margin: 0 auto;

text-align:left;

border: 2px solid Black;

}

#main-wrapper{

width: 640px;

float: left;

word-wrap: break-word;

overflow: hidden;

}

/*---------------- Posts ---------------------*/

h2.date-header {

margin:1.5em 0 .5em;

display:none;

}

/*---------------- Sidebar Content ------------------ */

#sidebar-wrapper {

width: 330px;

float: right;

word-wrap: break-word;

overflow: hidden;

}

.sidebar {

color: #000;

line-height: 1.5em;

font-size:12px;

text-transform: uppercase;

}

.sidebar ul {

list-style-image:none;

list-style-position:outside;

list-style-type:none;

margin:0;

padding:0;

}

.sidebar li {

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_LVrjpTo2Z8FjsauoOceipjUIakj0APYVJVPn7GupCZVVBP45KzBxtG89aUrVLtThouB-SzYhLJhwrqnhwEBm86TJQzxOBs8TlGypg5DwBv2kTjVCW29nvBDZk1IKTfroBoCgnz3OAE4m/s1600/bullet_star.png) no-repeat scroll left center;

line-height:1.5em;

margin:0;

padding:0 0 0.25em 15px;

}

.sidebar ul li a {

color:#1C4991;

text-decoration: none;

}

.sidebar ul li a:hover {

color: #C00;

text-decoration: underline;

}

.sidebar .widget {

border: 1px solid #bbbbbb;

background-color: #ffffff;

margin-bottom: 10px;

-moz-box-shadow: 0px 2px 10px #989898;

-webkit-box-shadow:0px 2px 5px #989898;

}

.sidebar .widget-content {

padding:5px 15px 5px 15px;

}

.sidebar h2 {

background: #ddd;

padding: 11px 10px;

margin:0;

font-size: 12px;

color:#000;

font-weight:bold;

text-transform: uppercase;

}

.main .Blog {

border-bottom-width: 0;

}

/*---------------- Footer---------------- */

#footer{

border: 2px solid Green;

background-color:Yellow;

color:Red;

height:33px;

overflow: hidden;

}

.cookie-choices-inner{display:none;}

]]></b:skin>

</head>

<body>

<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>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' visible='true'>

</b:widget>

</b:section>

</div>

<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>

<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>

</div>

</body>

</html>

-----------------------------------------------------------------------------------------------------------------
OR USE THIS HTML CODE
------------------------------------------------------------------------------------------------------------------

<body>