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?
/2016/... http://fbgadgets ...
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>
Related movie you might like to see :
MOUSE COORDINATES IN JAVA SCRIPT
RELATED POST WIDGET LIST WITHOUT TH...
WHACK A RAT CSS GAME
USE ARABIC URDU LANGUAGE IN HTML
POST DATE THUMBNAIL IN BLOG
POST DATE HEADER IN BLOG
SEARCH YOUR VIDEO IN GOOGLE
INPUT BUTTON VALUE SWAP
DYNAMIC VIEWS BLOGGER TEMPLATE
FLASH PLAYER SWF FILE DOWNLOAD ARCH...
GOOGLE FILTER BUTTON IN IMAGE SEARC...
PAIR MATCHING GAME
CSS SLIDER WITHOUT JS
FLICKITY SLIDER SCROLL WITH RADIO N...
FLICKITY JS CSS SLIDER
CONVERT FILE PATH TO A URL LINK
Make Own API English Dictionary
JS IMAGE SCROLLER
BODY JS FILE LINK IN MAGENTO
INTENSO MAGENTO QUICK VIEW BUTTON
Related Post for Generic Blogger Template
RELATED POST WIDGET WITH SOCIAL WIDGET
CONVERT FILE PATH TO A URL LINK
GENERIC BLOGGER TEMPLATE PARTS
MAGENTO DWNLOAD
PAGE NAVIGATION WITH TITLE AND THUMBNAIL IN BLOG
RESPONSIVE BLOGGER TEMPLATE FB GDGETS
MAGENTO CUSTOM BLOCK DEVOLPMENT
CHANGE CSS TEMPLATE INTO BLOGGER TEMPLATE
BLOGGER EMPTY TEXT VIDEO THUMBNAIL CHANGE IN IMAGE WITH JAVA CODE
POST DATE HEADER IN BLOG
POST DATE THUMBNAIL IN BLOG
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment
Click to see the code!
To insert emoticon you must added at least one space before the code.