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>
<!-- = / conditional statement / = -->
<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;'/>
<!-- clear for photos floats -->
</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>
<!-- single n post -->
</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;
}
Related movie you might like to see :

CSS SYNTAX HIGHLIGHT CHANGE IN NOT...

WEB IMAGE DOWNLOADER

TEXT COMPARE OR DUPLI TEXT FINDER

BLOCK JAVA SCRIPT BY GOOGLE CHROME

MOUSE COORDINATES IN JAVA SCRIPT

RELATED POST WIDGET LIST WITHOUT TH...

DYNAMIC VIEWS BLOGGER TEMPLATE

FLASH PLAYER SWF FILE DOWNLOAD ARCH...

WHACK A RAT CSS GAME

GOOGLE FILTER BUTTON IN IMAGE SEARC...

BUTTON PADDING CHANGE HEIGHT WIDTH

INPUT BUTTON VALUE SWAP
?
+
X
Recommended for you
Loading..
Related Post for BLOG TRANSPARENT TITLE MIDDLE POSITION WITH LINK
RECOMMENDED POST SLIDE OUT FOR BLOGGER TEMPLATE -------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE ------------------------------------------ā¦
EDIT IMAGE IN NOTEPAD++ ---------------------------------------------------------------------------------------------------------------------- https://www.google.co.uk/search?q=edit+picture+in+noā¦
HTML SYNTAX HIGHLIGHTER ----------------------------------------------------------------------------------------------------------------- CODE: -------------------------------------------------------ā¦
BLOG HOSTING HELP DIRECT LINKS TO YOUR FILES ON GOOGLE DRIVE - YouTube ā¶ 5:17 https://www.youtube.com/watch?v=ehue47G5ayc 14 hours ago - Uploaded by SAVEā¦
CODE OR TEXT WRITING BOX -------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE IN HTML --------------------------------ā¦
SEARCH BOX WITHOUT JAVA CODE ------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE <input id='input' name='q' placeholdeā¦
Generic Blogger Template ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE 0)BLOGGER TEMPLATE HAS WIDGET BASED LAYOā¦
PADDING BUTTON ------------------------------------------------------------------------------------------------------------ READ MORE: http://www.w3schools.com/css/css_padding.asp ----------ā¦
RELATED POST WIDGET WITH SOCIAL WIDGET ---------------------------------------------------------------------------------------------- GO INSIDE POST INCLUDABLE WIDGET <b:includable id='post' var='post'> FINDā¦
BlogPagerWithJavaCode BLOG PAGER - YouTube ā¶ 6:22 https://www.youtube.com/watch?v=u54p0R8tS30 4 mins ago - Uploaded by SAVE MONEY BLOG PAGER ... how to create paging,pagination in ā¦
Recommended Post Slide out for Blogger ---------------------------------------------------------------------------------------------------- RECOMMENDED POST SLIDE OUT FOR BLOG - YouTube ā¶ 2:50 https:/ā¦
GOOGLE PROJECT HOSTING ------------------------------------------------------------------------------------------------------------- STEP:1 LOGIN YOUR GOOGLE ACCOUNT STEP:2 GO TO SITE https://code.ā¦
BLOG FILE HOSTING GOOGLE PROJECT WITH TORTOISE SVN SOFTWARE EDIT HTML PAGE IN GOOGLE - YouTube ā¶ 4:19 https://www.youtube.com/watch?v=Q4yfMqPFSYE 16 mins ago - Uploaded by SAVE MONEY http://fbgadgets.blogspot.co.uk/2016/09/ā¦
BLOG COMMENT FORM TEMPLATE <html> <head> <b:skin><![CDATA[/* ]]></b:skin> </head> <body> <div id='outer-wrapper'> <div id='main-wrapper'> <b:secā¦
BLOG PAGER WITH NEWER OLDER HOME POST ----------------------------------------------------------------------------------------------------- BLOG PAGER WITH NEWER OLDER HOME POST READ MORE: BLOG PAGER - YouTube ā¦
BLOGGER MEGA GRID AND LIST TEMPLATE ------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE: BLUE GRID AND LIST CODE WHICH SHOW YOUR POā¦
Direct Link Generator CODE ----------------------------------------------------------------------------------------------------- CODE: -------------------------------------------------------------------ā¦
WHITE SPACE REMOVER CODE --------------------------------------------------------------------------------------------------------------------- COPY AND PASTE BELOW CODE IN POST HTML SECTION COPY CODE ā¦
White Space Remover /************************************BODY************************************/ body { background-color: #eee; font-family: Arial, Helvetica Neue, Helvetica, sans-serif; foā¦
BLOG HOSTING HELP READ MORE: http://www.000webhost.com/ DIRECT LINKS TO YOUR FILES ON GOOGLE DRIVE - YouTube ā¶ 5:17 https://www.youtube.com/watch?ā¦
PAGE NAVIGATION WITH TITLE AND THUMBNAIL IN BLOG ------------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE IN THIS CODE U NEED SAME POST HTML CODE,Pā¦
BLOGGER EMPTY TEXT VIDEO THUMBNAIL CHANGE IN IMAGE WITH JAVA CODE ------------------------------------------------------------------------------------------------------ COPY AND PASTE BELOW CODE ----------------------------------------------ā¦
WORD PRESS PARTS -------------------------------------------------------------------------------------------------------- Read More: ----------------------------------ā¦
INSTALL WORD PRESS TEMPLATE Plugins are tools which provide additional functionality to your application. To install a plugin you generally just need to put the plugin file into your 'wp-content/plugins' diā¦
GOOGLE IMAGE HOSTING BY PICSA -------------------------------------------------------------------------------------------------------- READ MORE: -----------------------------------------------ā¦
C DRIVE OPEN IN GOOGLE AND DATA URI IMAGE C DRIVE OPEN IN CHROME - YouTube ā¶ 2:14 https://www.youtube.com/watch?v=aXpogZBq6fk 4 mins ago - Uploaded by SAVE MONEY C DRIVE OPEN IN CHROME. SAVE MONEY ... Chroā¦
SEARCH YOUR VIDEO IN GOOGLE ----------------------------------------------------------------------------------------------- 1) CLICK SEAACH TOOLS TAB 2) CLICK 24 HOUR PAST OPTION ------------------------ā¦
Labels:
B
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.