BLOG POST IMAGE SIZE EXPERIMENT TEMPLATE

Friday, 4 October 2013

BLOG POST IMAGE SIZE EXPERIMENT TEMPLATE

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<b:include data='blog' name='all-head-content'/>

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

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

Blogger Template Style

Name: FB Gadgets

Designer: FB Gadgets

http://fbgadgets.blogspot.co.uk/

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

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

.post h3 {

background-color:Red;

background-position:initial initial;

background-repeat:initial initial;

border:1px solid #E3E3E3;

border-bottom-left-radius:0;

border-bottom-right-radius:10px;

border-top-left-radius:0;

border-top-right-radius:10px;

box-shadow:#FFFFFF 0 0 0 1px inset;

font-size: 1.2em;

color:#FFFFFF;

font-family:Oswald;

font-size:140%;

font-weight:400;

line-height:1.4em;

margin:0.25em 0 0;

padding:0 0 4px;

margin:0 0 5px;

padding:5px;

}

.post h3 a {

color: Blue;

text-decoration: none;

}

/* YOU NEED TO POST IMAGE CODE WRITE TWO TIMES
BECAUSE IT'S DOES NOT WORK*/

/* WHEN POST OPEN POST IMAGE SHOW BIGGER*/

.post img {

width: 600px;

height: 500px;

border-radius: 0%;

border: 10px solid white;

-webkit-box-shadow: 5px 5px 5px #111;

box-shadow: 5px 5px 5px #111;

-webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

-ms-transition: all 1s ease;

transition: all 1s ease;

}

]]></b:skin>

<b:if cond='data:blog.pageType != "item"'>

h2.date-header {

margin:1.5em 0 .5em;

display:none;

}

.post {

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

background-color:#F1F1F1;

background-position:initial initial;

background-repeat:initial initial;

border-color:#FFFFFF #FFFFFF #7C7C7C;

border-style:solid;

border-width:1px;

float:left;

height:300px;

width:300px;

margin:10px 15px 0 5px;

overflow:hidden;

position:relative;

}

.post h3 {

background-color:Red;

background-position:initial initial;

background-repeat:initial initial;

border:1px solid #E3E3E3;

border-bottom-left-radius:0;

border-bottom-right-radius:10px;

border-top-left-radius:0;

border-top-right-radius:10px;

box-shadow:#FFFFFF 0 0 0 1px inset;

font-size: 1.2em;

color:#FFFFFF;

font-family:Oswald;

font-size:140%;

font-weight:400;

line-height:1.4em;

margin:0.25em 0 0;

padding:0 0 4px;

margin:0 0 5px;

padding:5px;

}

.post h3 a {

color: Blue;

text-decoration: none;

}

.post img {

float:left;

width: 200px;

height: 200px;

border-radius: 0%;

border: 10px solid white;

-webkit-box-shadow: 5px 5px 5px #111;

box-shadow: 5px 5px 5px #111;

-webkit-transition: all 1s ease;

-moz-transition: all 1s ease;

-o-transition: all 1s ease;

-ms-transition: all 1s ease;

transition: all 1s ease;

}

.post img:hover{

float:left;

width: 200px;

height: 200px;

border-radius: 50%;

border: 10px solid white;

-webkit-box-shadow: 5px 5px 5px #111;

box-shadow: 5px 5px 5px #111;

-webkit-transform: rotate(360deg);

-moz-transform: rotate(360deg);

-o-transform: rotate(360deg);

-ms-transform: rotate(360deg);

transform: rotate(360deg);

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

-ms-transition: all 0.5s ease;

transition: all 0.5s ease;

}

</style>

</b:if>

</head>

<body>

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

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

<b:includable id='main' var='top'>

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

<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 class='post'>

<h3 class='post-title'>

<b:if cond='data:post.link'>

<a expr:href='data:post.link'><data:post.title/></a>

<b:else/>

<a expr:href='data:post.url'><data:post.title/></a>

</b:if>

</h3>

<div class='post-body entry-content'>

<data:post.body/>

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

<b:section class='footer' id='footer'/>

</div>

</body>

</html>

-----------------------------------------------------------------------------------------------
POST THUMBNAIL WRITING DELETE CODE

REPLACE BELOW BLACK CODE WITH BLUE CODE
-----------------------------------------------------------------------------------------------
<div class='post-body entry-content'>
<data:post.body/>
</div>


<div class='thumbs'>
<a class='PostLink' expr:href='data:post.url' expr:title='data:post.title'>
<img class='PostLink' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
</a>
</div>


<b:if cond='data:blog.pageType == "static_page"'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</div>

---------------------------------------------------------------------------------------------
OR USED THIS RIGHT COMPLETE CODE
--------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------
POST THUMBNAIL SQUARE TO CIRCLE WITHOUT JAVA CODE
IN THIS CODE POST WRITING DELETE WITH CSS CODE
POST THUMBNAIL NOT SHOW BLUR EFFECT
----------------------------------------------------------------------------------------------

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: FB Gadgets
Designer: FB Gadgets
http://fbgadgets.blogspot.co.uk/
----------------------------------------------- */

/*-----PostTitleCode ---*/
.post h3 {
background-color:Red;
background-position:initial initial;
background-repeat:initial initial;
border:1px solid #E3E3E3;
border-bottom-left-radius:0;
border-bottom-right-radius:10px;
border-top-left-radius:0;
border-top-right-radius:10px;
box-shadow:#FFFFFF 0 0 0 1px inset;
font-size: 1.2em;
color:#FFFFFF;
font-family:Oswald;
font-size:140%;
font-weight:400;
line-height:1.4em;
margin:0.25em 0 0;
padding:0 0 4px;
margin:0 0 5px;
padding:5px;
}
.post h3 a {
color: Blue;
text-decoration: none;
}

/* YOU NEED TO POST IMAGE CODE WRITE TWO TIMES
BECAUSE IT'S DOES NOT WORK*/
/* WHEN POST OPEN POST IMAGE SHOW BIGGER*/
/*-----PostImageCode ---*/
.post img {
width: 600px;
height: 500px;
border-radius: 0%;
border: 10px solid white;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
/*-----PostLinkCode ---*/
.lcover{
top: 8px;
width: 160px;
height: 310px;
text-indent: -9999px;
position: absolute;
}

]]></b:skin>

<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
/*----- DateHeaderCode ----*/
h2.date-header {
margin:1.5em 0 .5em;
display:none;
}
/*-----PostTitleCode ---*/
.post h3{
background-color:Red;
background-position:initial initial;
background-repeat:initial initial;
border:1px solid #E3E3E3;
border-bottom-left-radius:0;
border-bottom-right-radius:10px;
border-top-left-radius:0;
border-top-right-radius:10px;
box-shadow:#FFFFFF 0 0 0 1px inset;
font-size: 1.2em;
color:#FFFFFF;
font-family:Oswald;
font-size:140%;
font-weight:400;
line-height:1.4em;
margin:0.25em 0 0;
padding:0 0 4px;
margin:0 0 5px;
padding:5px;
}
.post h3 a{
color: Blue;
text-decoration: none;
}
/*-----PostThumbnailCode ---*/
.post {
background: #f1f1f1;
border-top:#fff 1px solid;
border-left:#fff 1px solid;
border-right:#fff 1px solid;
border-bottom:#7c7c7c 1px solid;
float:left;
width:240px;
height:240px;
margin:10px 15px 0 5px;
overflow:hidden;
position:relative;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post:hover{
float:left;
width: 240px;
height:240px;
border-radius: 50%;
border: 10px solid white;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/*-----PostImageCode ---*/
.post img{
float:left;
width: 240px;
height:240px;
border-radius: 0%;
border: 10px solid white;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post img:hover{
float:left;
width: 240px;
height: 240px;
border-radius: 50%;
border: 10px solid white;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/*-----PostWritingDeleteCode ---*/
.post-body{
font-size: 0px;
}
</style>
</b:if>
</head>
<body>
<div id='outer-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<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>
<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'>
<b:if cond='data:blog.pageType == "index"'>
<div class='post'>

<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<a expr:href='data:post.url'><data:post.title/></a>
</b:if>
</h3>

<div class='thumbs'>
<a class='lcover' expr:href='data:post.url' rel='nofollow'>
<data:post.body/>
</a>
</div>

</div>
</b:if>



<b:if cond='data:blog.pageType == "item"'>
<div class='post' id='post'>

<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>

<div class='post-body'>
<p><data:post.body/></p>
<div style='clear:both'/>
</div>

</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='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div>
</body>
</html>

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: FB Gadgets
Designer: FB Gadgets
http://fbgadgets.blogspot.co.uk/
----------------------------------------------- */
/* Use this with templates/template-twocol.html */

.post img {
height:600px;
width:600px;
}

/*-----PostLinkCode ---*/
.lcover{
top: 8px;
width: 350px;
height:311px;
text-indent: -9999px;
position: absolute;
}

]]></b:skin>

<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
h2.date-header {
margin:1.5em 0 .5em;
display:none;
}
.post{
float:left;
width: 330px;
height:311px;
border: 2px solid #000000;
margin:10 10px 10px 10;
padding:10px 0px 0px 10px;
border: 1px solid #9B1212;
display:inline;
overflow:hidden;
position:relative;
}
.post img {
float:left;
width: 330px;
height: 200px;
border-radius: 0%;
border: 10px solid white;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
/*-----PostWritingDeleteCode ---*/
.post-body{
font-size: 0px;
}
</style>
</b:if>
</head>
<body>
<div id='outer-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<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>
<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 class='post'>
<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<a expr:href='data:post.url'><data:post.title/></a>
</b:if>
</h3>


<div class='thumbs'>
<a class='lcover' expr:href='data:post.url' rel='nofollow'>
<data:post.body/>
</a>
</div>
<div class='post'>
<data:post.body/>
</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='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div>
</body>
</html>
---------------------------------------------------------------------------------------
OR USE THIS CODE
-------------------------------------------------------------------------------------

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: FB Gadgets
Designer: FB Gadgets
http://fbgadgets.blogspot.co.uk/
----------------------------------------------- */
/* Use this with templates/template-twocol.html */

.post img {
height:600px;
width:600px;
}

/*-----PostLinkCode ---*/
.lcover{
top: 8px;
width: 350px;
height:311px;
text-indent: -9999px;
position: absolute;
}

]]></b:skin>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
h2.date-header {
margin:1.5em 0 .5em;
display:none;
}
.post{
float:left;
width: 330px;
height:311px;
border: 2px solid #000000;
margin:10 10px 10px 10;
padding:10px 0px 0px 10px;
border: 1px solid #9B1212;
display:inline;
overflow:hidden;
position:relative;
}
.post img {
float:left;
width: 330px;
height: 200px;
border-radius: 0%;
border: 10px solid white;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
/*-----PostWritingDeleteCode ---*/
.post-body{
font-size: 0px;
}
</style>
</b:if>
</head>
<body>
<div id='outer-wrapper'>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<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>
<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 class='post'>
<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<a expr:href='data:post.url'><data:post.title/></a>
</b:if>
</h3>


<div class='thumbs'>
<a class='lcover' expr:href='data:post.url' rel='nofollow'>
<div class='post'>
<data:post.body/>
</div>
</a>
</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='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</div>
</body>
</html>