Sunday 16 October 2016
Generic Blogger Template
------------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE
0)BLOGGER TEMPLATE HAS WIDGET BASED LAYOUT
1) WIDGET LIKE NAVEBAR, HEADER,SIDEBAR,FOOTER
WIDGET SHWO EXTRA DIV TAG SOME DIV TAG WE USE WITH CSS CODE
AND GIVE DIV COLOR BACK GROUND COLOR
2)ADD HTML CODE
3) USE FIREBUG TOOL OR CTRL+SHIFT + I F12 TOOL
4) YOU NEED TO KNOW HOW TO WRITE CSS ID OR CLASS SELECTORS
OR CSS CODE WITHOUT CSS ID OR CLASS
5) HOW TO WRITE INLINE CSS CODE
6) BLOGGER HAS MORE HTML DIV ID THAN CSS DIV ID CODE
------------------------------------------------------------------------------------------------------------
READ MORE:
------------------------------------------------------------------------------------------------------------
http://www.w3schools.com/cssref/sel_class.asp
http://www.w3schools.com/css/css_syntax.asp
http://fbgadgets.blogspot.co.uk/2016/08/button-change-into-dropdown-menu.html
http://fbgadgets.blogspot.co.uk/2016/09/edit-html-source-code.html
http://fbgadgets.blogspot.co.uk/2016/12/responsive-blogger-template-fb-gdgets.html
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 ...
<?xml version="1.0" encoding="UTF-8" ?>
<html 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>
<b:include
data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template
Style
Name: GENERIC
BLOGGER TEMPLATE HEADER WRAPPER
Design by :
FBGadgets
URL :
http://fbgadgets.blogspot.co.uk/
-----------------------------------------------
*/
body {
background: White;
color: Black;
font: 12px Verdana;
margin:0;
text-align:center;
border: 2px solid Black;
}
/* 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 {
border: 2px solid
#000000;
}
#main-wrapper {
width: 900px;
float: left;
padding: 5px;
border: 2px solid
Red;
}
#sidebar-wrapper {
width: 300px;
float: right;
border: 2px solid
Black;
}
.sidebar h2 {
border: 2px solid
Red;
}
/* Footer
-----------------------------------------------
*/
#footer-wrapper {
border: 2px solid
Green;
background-color:Yellow;
height: 50px;
}
]]></b:skin>
</head>
<body>
<div id='outer-wrapper'>
<div id='header-wrapper'>
<b:section
class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget
id='Header1' locked='true' title='WhereIsMyIpAdress (Header)' type='Header'>
</b:widget>
</b:section>
</div>
<div id='main-wrapper'>
<b:section
class='main' id='main' showaddelement='no'>
<b:widget
id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section
class='sidebar' id='sidebar' preferred='yes'>
<b:widget
id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
</b:widget>
</b:section>
</div>
<div class='clear'> </div>
<div id='footer-wrapper'>
<b:section
class='footer' id='footer'/>
</div>
</div>
</body>
</html>
------------------------------------------------------------------------------------------------------------
OR USE THIS CODE
------------------------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
<html>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template
Style
Name: GENERIC
BLOGGER TEMPLATE HEADER WRAPPER
Design by :
FBGadgets
URL :
http://fbgadgets.blogspot.co.uk/
-----------------------------------------------
*/
body {
background: White;
color: Black;
font: 12px Verdana;
margin:0;
text-align:center;
border: 2px solid
Black;
}
/* 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 {
border: 2px solid
#000000;
}
#main-wrapper {
width: 900px;
float: left;
padding: 5px;
border: 2px solid
Red;
}
#sidebar-wrapper {
width: 300px;
float: right;
border: 2px solid
Black;
}
.sidebar h2 {
border: 2px solid
Red;
}
/* Footer
-----------------------------------------------
*/
#footer-wrapper {
border: 2px solid
Green;
background-color:Yellow;
height: 50px;
}
]]></b:skin>
</head>
<body>
<div id='outer-wrapper'>
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='data:blog.homepageUrl' type='Header'>
</b:widget>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
</b:widget>
</b:section>
</div>
<div class='clear'> </div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div>
</body>
</html>
------------------------------------------------------------------------------------------------------------
OR USE THIS CODEWITH OUT COMMENT BOX
------------------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
<?xml version="1.0" encoding="UTF-8" ?>
<html 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>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template
Style
Name: GENERIC
BLOGGER TEMPLATE HEADER WRAPPER
Design by :
FBGadgets
URL :
http://fbgadgets.blogspot.co.uk/
-----------------------------------------------
*/
body {
background: White;
color: Black;
font: 12px Verdana;
margin:0;
text-align:center;
border: 2px solid
Black;
}
/* 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 {
border: 2px solid
#000000;
}
#main-wrapper {
width: 900px;
float: left;
padding: 5px;
border: 2px solid
Red;
}
#sidebar-wrapper {
width: 300px;
float: right;
border: 2px solid
Black;
}
.sidebar h2 {
border: 2px solid
Red;
}
/* Footer
-----------------------------------------------
*/
#footer-wrapper {
border: 2px solid
Green;
background-color:Yellow;
height: 50px;
}
]]></b:skin>
</head>
<body>
<div id='outer-wrapper'>
<div id='header-wrapper'>
<div class='header section' id='header'><div class='widget Header' data-version='1' id='Header1'>
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>General Magic</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span>
</span></p>
</div>
</div>
</div></div>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' visible='true'>
<b:includable id='main' var='top'>
<b:if cond='!data:mobile'>
<!-- posts -->
<div class='blog-posts hfeed'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<div class='post-outer'>
<b:include data='post' name='post'/>
<b:include cond='data:blog.pageType in
{"static_page","item"}' data='post' name='comment_picker'/>
</div>
<!-- Ad -->
</b:loop>
<b:if cond='data:numPosts != 0'>
</div></div>
</b:if>
</div>
<data:top.googlePlusBootstrap/>
</b:if>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='comment-form' var='post'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='comment_count_picker' var='post'/>
<b:includable id='comment_picker' var='post'/>
<b:includable id='comments' var='post'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='iframe_comments' var='post'/>
<b:includable id='mobile-index-post' var='post'/>
<b:includable id='mobile-main' var='top'/>
<b:includable id='mobile-nextprev'/>
<b:includable id='mobile-post' var='post'/>
<b:includable id='nextprev'/>
<b:includable id='post' var='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>
<!-- Then use the
post body as the schema.org description, for good G+/FB snippeting. -->
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
</div>
</div>
</b:includable>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='shareButtons' var='post'/>
<b:includable id='status-message'/>
<b:includable id='threaded-comment-form' var='post'/>
<b:includable id='threaded_comment_js' var='post'/>
<b:includable id='threaded_comments' var='post'/>
</b:widget>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
</b:widget>
</b:section>
</div>
<div class='clear'> </div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div>
</body>
</html>
----------------------------------------------------------------------------
----------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------
OR USE THIS CODE
WHAT IS IN BLOG?
POST DATE POST TITLE POST BODY IN BLOG - YouTube
https://www.youtube.com/watch?v=whcmycpNZPE
4 mins ago - Uploaded by SAVE MONEY
POST DATE POST TITLE POST BODY IN BLOG ... http://fbgadgets.blogspot.co.uk
1. POST DATE
2. POST TITLE
3. POST BODY
4. POST READ MORE
5. B IF COND DIV
6. NOT SHOW READ MORE LINK
NOTE THAT:
B IF COND DIV GIVE HELPS IN NOT SHOW READ MORE LINK AFTER OPEN POST BUT WITHOUT
B IF COND DIV IT SHOW READ MORE LINK
------------------------------------------------------------------------------------------------------------
<?xml version="1.0" encoding="UTF-8" ?>
<html 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>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: GENERIC BLOGGER TEMPLATE HEADER WRAPPER
Design by : FBGadgets
URL : http://fbgadgets.blogspot.co.uk/
----------------------------------------------- */
body {
background: White;
color: Black;
font: 12px Verdana;
margin:0;
text-align:center;
border: 2px solid Black;
}
/* 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 {
border: 2px solid #000000;
}
#main-wrapper {
width: 900px;
float: left;
padding: 5px;
border: 2px solid Red;
}
#sidebar-wrapper {
width: 300px;
float: right;
border: 2px solid Black;
}
.sidebar h2 {
border: 2px solid Red;
}
/* Footer
----------------------------------------------- */
#footer-wrapper {
border: 2px solid Green;
background-color:Yellow;
height: 50px;
}
]]></b:skin>
</head>
<body>
<div id='outer-wrapper'>
<div id='header-wrapper'>
<div class='header section' id='header'><div class='widget Header' data-version='1' id='Header1'>
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>General Magic</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span>
</span></p>
</div>
</div>
</div></div>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1' visible='true'>
<b:includable id='main' var='top'>
<div class='blog-posts hfeed'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
<b:include data='post' name='post'/>
</b:loop>
</div>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='comment-form' var='post'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='comment_count_picker' var='post'/>
<b:includable id='comment_picker' var='post'/>
<b:includable id='comments' var='post'/>
<b:includable id='feedLinks'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='iframe_comments' var='post'/>
<b:includable id='mobile-index-post' var='post'/>
<b:includable id='mobile-main' var='top'/>
<b:includable id='mobile-nextprev'/>
<b:includable id='mobile-post' var='post'/>
<b:includable id='nextprev'/>
<b:includable id='post' var='post'>
<h3 class='post-title entry-title'>
<a expr:href='data:post.url'><data:post.title/></a>
</h3>
<!-- Then use the post body as the schema.org description, for good G+/FB snippeting. -->
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url'>Read More >></a>
</div>
</b:if>
</b:includable>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='shareButtons' var='post'/>
<b:includable id='status-message'/>
<b:includable id='threaded-comment-form' var='post'/>
<b:includable id='threaded_comment_js' var='post'/>
<b:includable id='threaded_comments' var='post'/>
</b:widget>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
</b:widget>
</b:section>
</div>
<div class='clear'> </div>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div>
</body>
</html>
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment