Thursday, 8 December 2016

CHANGE CSS TEMPLATE INTO BLOGGER TEMPLATE

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">&nbsp;</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 &gt;&gt;</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'>&#160;</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>








Related Post for CHANGE CSS TEMPLATE INTO BLOGGER TEMPLATE

  • CHANGE CSS TEMPLATE INTO BLOGGER TEMPLATE -------------------------------------------------------------------------------------------------------- READ MORE: DREAMWEAVER BLOGGER TEMPLATE PART 1 https://youtu.be/TaqrgPā€¦
  • GENERIC BLOGGER TEMPLATE PARTS ---------------------------------------------------------------------------------------------------- WHAT IS IN BLOG? RESPONSIVE BLOGGER TEMPLATE - YouTube ā–¶ 9:19 ā€¦
  • CHANGE CSS TEMPLATE INTO BLOGGER TEMPLATE -------------------------------------------------------------------------------------------------------- READ MORE: http://all-free-download.com/free-website-templates/downloaā€¦
  • RCSV EDITOR ---------------------------------------------------------------------------------------------------------------- READ MORE: ----------------------------------------------------ā€¦
  • CSS INLINER ------------------------------------------------------------------------------------------------------- READ MORE: Writing inline CSS can be a pain, so we built a tool that'llā€¦
  • RESPONSIVE BLOGGER TEMPLATE FB GDGETS ---------------------------------------------------------------------------------------------------------------- RESPONSIVE BLOGGER TEMPLATE FB GDGETS CODE: Read More: htā€¦
Posted by on Thursday, 8 December 2016 at 02:38
Labels: , , , , , , , , , , ,

0 comments:

Post a Comment

:) :)) ;(( :-) =)) ;( ;-( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ $-) (b) (f) x-) (k) (h) (c) cheer
Click to see the code!
To insert emoticon you must added at least one space before the code.

Subscribe to: Post Comments (Atom)
FB Gadgets | Template Designed by Fatakat PhotosCoolBThemes.com
Code by : paid web directory

https://www.google.co.uk/search?q=site%3Ablogspot.com+fbgadgets