Thursday, 8 December 2016
CHANGE CSS TEMPLATE INTO BLOGGER TEMPLATE
--------------------------------------------------------------------------------------------------------
READ MORE:
http://all-free-download.com/free-website-templates/download/food_blog_582.html
https://youtu.be/DgKbmLvu7uQ
----------------------------------------------------------------------------------------------------------
FOOD AND BLOGGER CSS TEMPLATE CODE
---------------------------------------------------------------------------------------------------------
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Food Blog Website - free CSS template</title>
<meta name="keywords" content="free css template, XHTML, CSS, food blog
template" />
<meta name="description" content="Food Blog Template - free CSS website layout,
XHTML CSS template" />
<style type='text/css'>
/*
CSS Credit:
http://www.templatemo.com/
*/
html {
background: #fff;
}
body {
margin: 0;
padding:0;
font-family: Arial,
Helvetica, sans-serif;
font-size: 12px;
line-height: 1.5em;
color: #333333;
width: 100%;
display: table;
}
a { color: #666;}
a:hover { color:
#999; }
#templatemo_background_section_top
{
width: 100%;
height:230px;
background: #824646
repeat-x;
}
#templatemo_background_section_middle
{
width: 100%;
background: #fff;
clear: both;
overflow:hidden;
}
#templatemo_background_section_bottom
{
width: 100%;
height: 327px;
background: Black
repeat;
float: left;
}
.templatemo_container
{
width: 1000px;
margin: auto;
}
#templatemo_header {
width: 100%;
height:188px;
background: #824646
no-repeat;
}
/* Logo Area */
#templatemo_logo_section
{
width:auto;
height:auto;
margin-top:60px;
margin-left: 60px;
float:left;
display: inline;
}
#templatemo_logo_section
h1 {
padding-top: 10px;
font-size: 32px;
color:#fff;
margin:0px;
font-weight:
normal;
}
#templatemo_logo_section
h2 {
font-size:20px;
color:#fff;
padding-top:5px;
font-weight:
normal;
}
/* End Of Logo Area*/
/* Menu Section */
#templatemo_menu_panel
{
width:100%;
height: 42px;
margin: 0 auto;
background: Black
repeat-x;
float:left;
}
#templatemo_menu_panel
#templatemo_menu_section {
width: 930px;
height: 32px;
margin:0 auto;
padding: 0 0 0 30px;
color: #03a0a6;
}
#templatemo_menu_section
ul {
float: left;
width: 930px;
margin: 0;
padding-top: 2px;
list-style: none;
}
#templatemo_menu_section
ul li {
display: inline;
}
#templatemo_menu_section
ul li a {
float: left;
width: 110px;
padding-top: 8px;
font-size: 14px;
font-weight: bold;
text-align: center;
text-decoration:
none;
color: #fff;
padding-left: 10px;
padding-right: 10px;
}
#templatemo_menu_section
li a:hover, #templatemo_menu_section li .current {
color: #ff0;
height: 30px;
background:Green
repeat-x;
}
/* End Of Menu */
/* Left Section */
#templatemo_left_section
{
width: 560px;
float: left;
margin: 10px 0px 10px
35px;
}
* html
#templatemo_left_section {
margin-left: 15px;
}
.templatemo_post {
width: 552px;
margin-top: 5px;
margin-bottom: 15px;
}
.templatemo_post_top
{
width: 560px;
height: 47px;
background: Green
no-repeat;
}
* html
.templatemo_post_top h1 {
margin-bottom: -11px;
}
.templatemo_post_top
h1{
font-size: 17px;
/* font-weight: normal;*/
color:#fff;
font-weight:bold;
padding-top: 18px;
padding-left: 25px;
}
.templatemo_post_mid_top
{
width: 560px;
height: 20px;
background: White
no-repeat;
}
.templatemo_post_mid
{
width: 560px;
background: White
repeat-y;
}
.templatemo_post_bottom
{
width: 560px;
height: 34px;
background: White
no-repeat;
padding-top:
15px;
}
.templatemo_post_mid
img {
border: #ccc solid
1px;
float: left;
margin: 3px 15px 0 0;
}
.templatemo_post_mid
p {
font-size: 12px;
color:#333;
margin : 0px 25px
25px 25px;
text-align: justify;
}
span.post {
margin: 0px 25px 0px
25px;
color: #999999;
font-size: 11px;
display: block;
}
/* End Of Left
Section */
/* Right Section */
#templatemo_right_section
{
width: 310px;
float: right;
margin: 10px 30px
10px 0px;
}
.templatemo_section_box
{
width: 292px;
margin-top: 5px;
margin-bottom: 15px;
}
.templatemo_section_box_top
{
width: 300px;
height: 50px;
background: Green
no-repeat;
}
.templatemo_section_box_top
h1 {
font-size: 17px;
color:#fff;
font-weight:bold;
padding-top: 18px;
padding-left: 25px;
}
.templatemo_section_box_mid
{
width: 300px;
background: White
repeat-y;
}
.templatemo_section_box_mid
p {
font-size: 12px;
color:#333;
margin : 0px 25px
15px 25px;
text-align: justify;
}
.templatemo_section_box_mid
p a {
font-size: 12px;
color:#666;
}
.templatemo_section_box_mid
img {
float: left;
display:inline;
margin-bottom: 15px;
margin-left: 16px;
border:none;
}
.templatemo_section_box_mid
ul {
margin-bottom:15px;
margin-top:0px;
padding-right:15px;
color: #333;
}
.templatemo_section_box_bottom
{
width: 300px;
height: 28px;
background: White
no-repeat;
margin-top: -15px;
}
/* End Of Right
Section*/
.clear{
clear:both;
height:1px;
}
#templatemo_bottom_section
{
width: 100%;
height: 43px;
background:Black
repeat-x;
}
#templatemo_footer {
width: 100%;
height: 28px;
background: Black
repeat-x;
text-align: center;
padding-top: 15px;
color: #fff;
}
#templatemo_footer a
{
color: #fff;
}
</style>
<!-- Designed by w w w . t e m p l a t e m o . c o
m -->
</head>
<body>
<div id="templatemo_background_section_top">
<div class="templatemo_container">
<div id="templatemo_header">
<div id="templatemo_logo_section">
<h1>Food Blog Layout</h1>
<h2>Free CSS Template</h2>
</div>
</div><!-- end of headder -->
<div id="templatemo_menu_panel">
<div id="templatemo_menu_section">
<ul>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="#">Menus</a></li>
<li><a href="#">Drinks</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div> <!-- end of menu -->
</div><!-- end of container-->
</div><!-- end of templatemo_background_section_top-->
<div id="templatemo_background_section_middle">
<div class="templatemo_container">
<div id="templatemo_left_section">
<div class="templatemo_post">
<div class="templatemo_post_top">
<h1>Blog Post Title 1 goes here</h1>
</div>
<div class="templatemo_post_mid_top">
</div>
<div class="templatemo_post_mid">
<p><img alt="Blog" src="images/templatemo_061_phone.jpg" />Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Vivamus nec dui. Donec nec neque ut quam
sodales feugiat. Nam vehicula dapibus lectus. Integer imperdiet pretium dolor.
Vivamus felis. </p>
<p>Vivamus vulputate vehicula mi. Maecenas consectetur purus. Vestibulum id
mi vitae nunc vulputate ullamcorper. Donec feugiat orci sed sapien. </p>
<p>Fusce risus sem, egestas quis, imperdiet id, pellentesque vel, tortor.
Fusce ante. Nunc at mi nec urna mollis ullamcorper. Nam aliquet, ligula in
aliquet molestie, nunc arcu tristique nibh. </p>
<div class="clear"></div>
</div>
<div class="templatemo_post_bottom">
<span class="post">Posted By: Admin |
Category: <a href="#">Javascripts</a> | Added: 15:45, 31 March 2048</span>
</div>
</div><!-- end of templatemo_post-->
<!-- end of
templatemo_post-->
</div><!-- end of left section-->
<div id="templatemo_right_section">
<div class="templatemo_section_box">
<div class="templatemo_section_box_top">
<h1>Advertisements</h1>
</div>
<div class="templatemo_section_box_mid">
<img alt="125x125
Banner" src="images/templatemo_ads.jpg" />
<img alt="Advertise
Here" src="images/templatemo_ads.jpg"/>
<img alt="Advertisement" src="images/templatemo_ads.jpg"/>
<img alt="Your
Banner" src="images/templatemo_ads.jpg"/>
<div class="clear"> </div>
</div>
<div class="templatemo_section_box_bottom"></div>
</div><!-- end of section box -->
<div class="templatemo_section_box">
<div class="templatemo_section_box_top">
<h1>About This Blog</h1>
</div>
<div class="templatemo_section_box_mid">
<p>This free website blog layout is provided by <a href="http://www.templatemo.com" target="_parent">templatemo.com</a> website. You may download, modify and apply this layout for any web
blog CMS templates.</p>
</div>
<div class="templatemo_section_box_bottom"></div>
</div><!-- end of section box -->
<div class="templatemo_section_box">
<div class="templatemo_section_box_top">
<h1>Categories</h1>
</div>
<div class="templatemo_section_box_mid">
<ul>
<li><a href="http://www.webdesignmo.com/blog" target="_parent">Web Design</a></li>
<li><a href="#">JavaScripts</a></li>
<li><a href="http://www.templatemo.com" target="_parent">CSS Templates</a></li>
<li><a href="http://www.flashmo.com" target="_parent">Flash Templates</a></li>
<li><a href="#">Photo Gallery</a></li>
</ul>
</div>
<div class="templatemo_section_box_bottom"></div>
</div><!-- end of section box -->
</div><!-- end of right Section -->
</div><!-- end of container-->
</div><!-- end of background middle-->
<div id="templatemo_bottom_section">
<div class="templatemo_container">
<div id="templatemo_footer">
Copyright © 2048 Your
Company Name |
<a href="http://www.iwebsitetemplate.com" target="_parent">Website Templates</a> by
<a href="http://www.templatemo.com" target="_parent">Free CSS Templates</a>
</div>
</div>
</div><!-- end of background bottom-->
<div align=center>This template downloaded form <a href='http://all-free-download.com/free-website-templates/'>free website templates</a></div></body>
<!-- Designed by w w w . t e m p l a t e m o . c o
m -->
</html>
FOOD AND BLOGGER XML TEMPLATE CODE
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'/>
<title>Food Blog Website - free CSS template</title>
<meta content='free css template, XHTML, CSS, food blog template' name='keywords'/>
<meta content='Food Blog Template - free CSS website layout, XHTML CSS template' name='description'/>
<b:skin><![CDATA[/*
/*
CSS Credit:
http://www.templatemo.com/
*/
html {
background: #fff;
}
body {
margin: 0;
padding:0;
font-family: Arial,
Helvetica, sans-serif;
font-size: 12px;
line-height: 1.5em;
color: #333333;
width: 100%;
display: table;
}
a { color: #666;}
a:hover { color:
#999; }
#templatemo_background_section_top
{
width: 100%;
height:200px;
background: #824646
repeat-x;
}
#templatemo_background_section_bottom
{
width: 100%;
height: 327px;
background: Black
repeat;
float: left;
}
.templatemo_container
{
width: 1000px;
margin: auto;
}
#templatemo_header
{
width: 100%;
height:188px;
background: #824646
no-repeat;
}
/* Logo Area */
#templatemo_logo_section
{
width:auto;
height:auto;
margin-top:60px;
margin-left: 60px;
float:left;
display: inline;
}
#templatemo_logo_section
h1 {
padding-top: 10px;
font-size: 32px;
color:#fff;
margin:0px;
font-weight:
normal;
}
#templatemo_logo_section
h2 {
font-size:20px;
color:#fff;
padding-top:5px;
font-weight:
normal;
}
/* End Of Logo
Area*/
/* Menu Section */
#templatemo_menu_panel
{
width:100%;
height: 42px;
margin: 0 auto;
background: Black
repeat-x;
float:left;
}
#templatemo_menu_panel
#templatemo_menu_section {
width: 930px;
height: 32px;
margin:0 auto;
padding: 0 0 0
30px;
color: #03a0a6;
}
#templatemo_menu_section
ul {
float: left;
width: 930px;
margin: 0;
padding-top: 2px;
list-style: none;
}
#templatemo_menu_section
ul li {
display: inline;
}
#templatemo_menu_section
ul li a {
float: left;
width: 110px;
padding-top: 8px;
font-size: 14px;
font-weight: bold;
text-align: center;
text-decoration:
none;
color: #fff;
padding-left: 10px;
padding-right:
10px;
}
#templatemo_menu_section
li a:hover, #templatemo_menu_section li .current {
color: #ff0;
height: 30px;
background:Green
repeat-x;
}
/* End Of Menu */
/* Left Section */
#templatemo_left_section
{
width: 560px;
float: left;
margin: 10px 0px
10px 35px;
}
* html
#templatemo_left_section {
margin-left: 15px;
}
.templatemo_post {
width: 552px;
margin-top: 5px;
margin-bottom:
15px;
}
.templatemo_post_top
{
width: 560px;
height: 47px;
background: Green
no-repeat;
}
* html
.templatemo_post_top h1 {
margin-bottom:
-11px;
}
.templatemo_post_top
h1{
font-size: 17px;
/* font-weight: normal;*/
color:#fff;
font-weight:bold;
padding-top: 18px;
padding-left: 25px;
}
.templatemo_post_mid_top
{
width: 560px;
height: 20px;
background: White
no-repeat;
}
.templatemo_post_mid
{
width: 560px;
background: White
repeat-y;
}
.templatemo_post_bottom
{
width: 560px;
height: 34px;
background: White
no-repeat;
padding-top:
15px;
}
.templatemo_post_mid
img {
border: #ccc solid
1px;
float: left;
margin: 3px 15px 0
0;
}
.templatemo_post_mid
p {
font-size: 12px;
color:#333;
margin : 0px 25px
25px 25px;
text-align:
justify;
}
span.post {
margin: 0px 25px
0px 25px;
color: #999999;
font-size: 11px;
display: block;
}
/* End Of Left
Section */
/* Right Section */
#templatemo_right_section
{
width: 310px;
float: right;
margin: 10px 30px
10px 0px;
}
.templatemo_section_box
{
width: 292px;
margin-top: 5px;
margin-bottom:
15px;
}
.templatemo_section_box_top
{
width: 300px;
height: 50px;
background: Green
no-repeat;
}
.templatemo_section_box_top
h1 {
font-size: 17px;
color:#fff;
font-weight:bold;
padding-top: 18px;
padding-left: 25px;
}
.templatemo_section_box_mid
{
width: 300px;
background: White
repeat-y;
}
.templatemo_section_box_mid
p {
font-size: 12px;
color:#333;
margin : 0px 25px
15px 25px;
text-align:
justify;
}
.templatemo_section_box_mid
p a {
font-size: 12px;
color:#666;
}
.templatemo_section_box_mid
img {
float: left;
display:inline;
margin-bottom:
15px;
margin-left: 16px;
border:none;
}
.templatemo_section_box_mid
ul {
margin-bottom:15px;
margin-top:0px;
padding-right:15px;
color: #333;
}
.templatemo_section_box_bottom
{
width: 300px;
height: 28px;
background: White
no-repeat;
margin-top: -15px;
}
/* End Of Right
Section*/
.clear{
clear:both;
height:1px;
}
#templatemo_bottom_section
{
width: 100%;
height: 43px;
background:Black
repeat-x;
}
#templatemo_footer
{
width: 100%;
height: 28px;
background: Black
repeat-x;
text-align: center;
padding-top: 15px;
color: #fff;
}
#templatemo_footer
a {
color: #fff;
}
]]></b:skin>
<!-- Designed by w w w . t e m p l a t e m o . c o
m -->
</head>
<body>
<div id='outer-wrapper'>
<div id='header-wrapper'>
<div id='templatemo_background_section_top'>
<div class='templatemo_container'>
<div id='templatemo_header'>
<div id='templatemo_logo_section'>
<h1>Food Blog Layout</h1>
<h2>Free CSS Template</h2>
</div>
</div><!-- end of headder -->
<div id='templatemo_menu_panel'>
<div id='templatemo_menu_section'>
<ul>
<li><a class='current' href='index.html'>Home</a></li>
<li><a href='#'>Menus</a></li>
<li><a href='#'>Drinks</a></li>
<li><a href='#'>Services</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</div> <!-- end of menu -->
</div><!-- end of container-->
</div><!-- end of templatemo_background_section_top-->
</div>
<div id='templatemo_background_section_middle'>
<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: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'>
<div id='templatemo_background_section_middle'>
<div class='templatemo_container'>
<div id='templatemo_left_section'>
<div class='templatemo_post_top'>
<h1>
<a expr:href='data:post.url'><data:post.title/></a>
</h1>
</div>
<!-- Then use the
post body as the schema.org description, for good G+/FB snippeting. -->
<div class='templatemo_post_mid'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
<div class='templatemo_post_bottom'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</div>
<b:if cond='data:post.hasJumpLink'>
<div class='ReadMore'>
<a expr:href='data:post.url'>Read More >></a>
</div>
</b:if>
</div></div></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='templatemo_right_section'>
<div class='templatemo_section_box'>
<div class='templatemo_section_box_top'>
<h1>Advertisements</h1>
</div>
<div class='templatemo_section_box_mid'>
<img alt='125x125 Banner' src='images/templatemo_ads.jpg'/>
<img alt='Advertise Here' src='images/templatemo_ads.jpg'/>
<img alt='Advertisement' src='images/templatemo_ads.jpg'/>
<img alt='Your Banner' src='images/templatemo_ads.jpg'/>
<div class='clear'/>
</div>
<div class='templatemo_section_box_bottom'/>
</div><!-- end of section box -->
<div class='templatemo_section_box'>
<div class='templatemo_section_box_top'>
<h1>About This Blog</h1>
</div>
<div class='templatemo_section_box_mid'>
<p>This free website blog layout is provided by <a href='http://www.templatemo.com' target='_parent'>templatemo.com</a> website. You may download, modify and apply this layout for any web
blog CMS templates.</p>
</div>
<div class='templatemo_section_box_bottom'/>
</div><!-- end of section box -->
<div class='templatemo_section_box'>
<div class='templatemo_section_box_top'>
<h1>Categories</h1>
</div>
<div class='templatemo_section_box_mid'>
<ul>
<li><a href='http://www.webdesignmo.com/blog' target='_parent'>Web Design</a></li>
<li><a href='#'>JavaScripts</a></li>
<li><a href='http://www.templatemo.com' target='_parent'>CSS Templates</a></li>
<li><a href='http://www.flashmo.com' target='_parent'>Flash Templates</a></li>
<li><a href='#'>Photo Gallery</a></li>
</ul>
</div>
<div class='templatemo_section_box_bottom'/>
</div><!-- end of section box -->
</div><!-- end of right Section -->
<div class='clear'> </div>
<div id="templatemo_bottom_section">
<b:section class='footer' id='footer'/>
<div class="templatemo_container">
<div id="templatemo_footer">
Copyright 2048 Your Company Name |
<a href="http://www.iwebsitetemplate.com" target="_parent">Website Templates</a> by
<a href="http://www.templatemo.com" target="_parent">Free CSS Templates</a>
</div>
</div>
</div><!-- end of background bottom-->
</div>
</body>
</html>
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment