BLOG TRANSPARENT TITLE MIDDLE POSITION WITH LINK

Monday, 20 January 2014

BLOG TRANSPARENT TITLE MIDDLE POSITION WITH LINK

--------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW 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 */

/*-----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: 500px;
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>

<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_size=485;
var show_default_thumbnail=true;
var default_thumbnail="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrwRZSbbVWL5tfffHhg_jp-OnuuZLIGkwpJFjoCueai4x9ssU3_RssOTmC55it0Qp-PgxpmlEVE9k9nqIiYUWPT0WfgYHFZdf6QRGx3X74bi7NFBVjUVGmoOWsefHHL-Cn_9lJRYcNTm8/s72-c/default.png";
if(show_default_thumbnail == true && image_url == "") image_url= default_thumbnail;
image_tag='<img src="'+image_url.replace('/s72-c/','/s'+image_size+'-c/')+'" class="postimg" alt="'+post_title+'"/>';
if(image_url!="") return image_tag; else return "";
}
//]]>
</script>

<b:if cond='data:blog.pageType != "item"'>
<style>
/*----- DateHeaderCode ----*/
h2.date-header {
margin:1.5em 0 .5em;
display:none;
}
/*-----PostTitleCode ---*/
.post h2 {
color:#222;
font-family:'
Source Sans Pro'
,Arial,Helvetica,Geneva,sans-serif;
font-size:28px;
font-weight:300;
line-height:31px;
}
.post h2 {
width:310px;
margin-top:-10px;
height:100%;
}
.post-title a,.post-title strong {
text-decoration:none;
background:rgba(0,0,0,0.8);
margin-top:120px;
padding:8px 0px 8px 8px;
font-family:"
Droid Sans"
;
color:#fff;
font-size:20px;
line-height:25px;
width:290px;
font-weight:700;
position: absolute;
}
/*-----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:265px;
height:285px;
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;
}

/*-----PostImageCode ---*/
.post img {
float:left;
background-repeat:no-repeat;
background-position: bottom center;
width:265px;
height:285px;
margin-bottom:8000px;
margin-left:10px;
margin-top:0;
border: none;
padding-bottom:3px;
}

/*-----PostWritingDeleteCode ---*/
.post-body{
font-size: 0px;
}
</style>
</b:if>

<script type='text/javascript'>
//<![CDATA[
function bp_thumbnail_resize(image_url,post_title)
{
var image_size=485;
img_thumb_height = 185;
img_thumb_width = 280;
var show_default_thumbnail=true;
var default_thumbnail="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrwRZSbbVWL5tfffHhg_jp-OnuuZLIGkwpJFjoCueai4x9ssU3_RssOTmC55it0Qp-PgxpmlEVE9k9nqIiYUWPT0WfgYHFZdf6QRGx3X74bi7NFBVjUVGmoOWsefHHL-Cn_9lJRYcNTm8/s72-c/default.png";
if(show_default_thumbnail == true && image_url == "") image_url= default_thumbnail;
image_tag='<img src="'+image_url.replace('/s72-c/','/s'+image_size+'-c/')+'" class="postimg" alt="'+post_title+'"/>';
if(image_url!="") return image_tag; else return "";
}
//]]>
</script>
</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 == "static_page"'>
<div class='post' id='post'>
<div class='entry'>
<p><data:post.body/></p>
<div class='clear'/>
</div>
</div>
<div class='clear'/>
</b:if>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<div class='post' id='post'>
<div class='post-image clearfix'>
<div class='imagebox'>
<a expr:href='data:post.url'><script type='text/javascript'>
document.write(bp_thumbnail_resize("<data:post.thumbnailUrl/>","<data:post.title/>"));
</script></a>
</div></div>
<div class='title'>
<h2 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>
</h2>
</div>
<div class='entry'>
<data:post.body/>
</div>
</div>
</b:if></b:if>
<b:if cond='data:blog.pageType == "item"'>
<div class='post' id='post'>
<div class='title'>
<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>
<div class='entry'>
<data:post.body/>
</div>
</div>
<div class='clear'/>
</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>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</body>
</html>

---------------------------------------------------------------------------------------------
OR USE THIS CSS CODE IF YOUR POST TITLE HEADING IS H3
---------------------------------------------------------------------------------------------

/*-----PostTitleCode ---*/
.post h3{
background-color:Red;
}
.post h3 a{
text-decoration:none;
background-color:Red;
color:Green;
font-size:20px;
font-weight:700;
width:290px;
position: absolute;
}

------------------------------------------------------------------------------------------------------------
BLOG POST TITLE WITH AUTO READ MORE LINK
------------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE
-------------------------------------------------------------------------------------------------------

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

/*---------------- Outer-Wrapper ----------------- */
#outer-wrapper {
width: 970px;
margin: 0 auto;
text-align:left;
}
#cwrapper {
width: 970px;
margin-top:10px;
}
#main-wrapper {
width: 640px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
/*---------------- Posts ---------------------*/
h2.date-header {
margin:1.5em 0 .5em;
display:none;
}
.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;
height:230px;
margin:10px 15px 0 5px;
overflow:hidden;
position:relative;
width:280px;
-moz-box-shadow: 0px 2px 10px #989898;
-webkit-box-shadow:0px 2px 5px #989898;
}
.post:hover {
background: #E4E4E4;
}
.post h3 {
margin-top:5px;
margin-bottom: 10px;
margin-left:15px;
font-size: 1.2em;
text-align:left;
padding-bottom:10px;
overflow:hidden;
height:10px;
text-transform: uppercase;
}
.post h3 a,.post h3 a:visited,.post h3 strong {
display:block;
text-decoration:none;
color:#333333;
font-weight:40;
}

.post img {
background-repeat:no-repeat;
background-position: bottom center;
height:180px;
margin-bottom:8000px;
margin-left:15px;
margin-top:0;
border: none;
padding-bottom:3px;
width:250px;
}
.post-body {
font-size: 0px;
overflow:hidden;
height:180px;
}
.post-body blockquote {
line-height:1.3em;
}
.post-footer {
line-height: 1.4em;
font-size: 0.9em;
margin:12px;
border-top:1px solid #bbb;
}
.post blockquote {
margin:1em 20px;
}

/* ------------- Post page---------------- */
.single {
background: #f1f1f1;
border: 1px solid #bbbbbb;
margin-bottom: 10px;
margin-right:10px;
margin-top:10px;
-moz-box-shadow: 0px 2px 10px #989898;
-webkit-box-shadow:0px 2px 5px #989898;
}
.single .post-body-2 {
padding:5px 12px 0 12px;
font-size:12px;
}
.single img {
max-width:600px;
}
.single h3 {
margin-top:10px;
margin-left:12px;
font-size: 1.2em;
text-transform: uppercase;
}
.single h3 a {
color: #000000;
text-decoration: none;
}
.single ul, .single ol {
list-style-position: inside;
margin-bottom: 10px;
}
.single li {
line-height: 1.5em;
padding: 2px 0;
}
.single blockquote {
font-family:'Courier New', Courier;
color : #6e818c;
margin : 10px;
padding : 10px;
width : 90%;
background:#F3F3F3;
border-left:5px solid #900;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-bottom: 1px solid #666;
font-size: 1.1em;
}

/* FINISH BLUR EFFECT CODE */

.post-thumbail img {
width: 305px;
}

/* Index Post */
.post-thumbail {
position:relative;
overflow:hidden;
height:171px;
margin:5px;
float:left;
}

.linkhover a {
position:absolute;
width:305px;
height:171px;
color:transparent;
}

]]></b:skin>

</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 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 != "item"'>
<div class='post' id='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-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>
</b:if>
<div class='post-header-line-1'/>
<div class='post-body entry-content'>
<div class='post-thumbail'>
<div class='linkhover'><a expr:href='data:post.url'><data:post.title/></a></div>
<data:post.body/>
</div>
<b:if cond='data:post.thumbnailUrl'>
<a expr:href='data:post.url'><img alt='thumbnail' class='post-thumbnail' expr:src='data:post.thumbnailUrl'/></a>
<b:else/>
<a expr:href='data:post.url'><img alt='thumbnail' class='post-thumbnail' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUXkJZM9srOl1bE07HoNGpONGGjUrG9aDQJjZIJB9TatneHsJ9ZK5HXASZYZys8Os2x0hlAgL7-JC_9nde0MkJE9e0CGGmAWifhZqvLQ8eEARh8ug-y1QqJeS0ETtMaD0QoEv4JcxP3sam/s1600/FBGadgets.png'/></a>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/></b:if>
<div style='clear: both;'/>

</div>
</div>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<div class='single' id='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-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>
</b:if>
<div class='post-body-2'>
<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>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
</body>
</html>
----------------------------------------------------------------------------------------------------------
UPPER CODE WITH POST TITLE WITH AUTO READ MORE LINK
----------------------------------------------------------------------------------------------------------
OR USE DISPLAY BLOCK FUNCTION IN CSS CODE WHICH CHANGE POST
TITLE INTO LINK NO ADD ONLY RED LINE
.post h3 a {
/*Display Block Function Post Title Into Link*/
display:block;
color: #000000;
text-decoration: none;
}