Blogger Post Title and Image Above The Main Wrapper
Updated on July 12, 2016
Initially I see it on some
wordpress news blogs and websites, but how can we make possible to display the post
title and image on above the post content and sidebar (outside the
main-wrapper) in blogger. Then I tried it on blogger and always failed because
the first image URL blogger Data: post.firstImageUrl cannot be kept outside the
loop or outside post code <b: includable and displays an error message like
the following:
Author: DHARMENDRA BHAMMU
Author: DHARMENDRA BHAMMU
TEMPLATE ERROR: Invalid
reference data post.firstImageUrl: No dictionary named: '' in: ['blog', the
'skin', 'view']
It is only possible when I
move the image tag outside the <b: includable > code, Then I started trying
to move html img posts into a div tag outside the area of posts
and finally succeeded with innerHTML JavaScript.
So let start how to put image and title on top of Main Wrapper:
Before making any changes
please take a template backup.
Go to your Dashboard on
Blogger
Click on >> Template
Click on >> Edit
HTML
Search for <div
class="outer-wrapper">
Copy and paste below code after
<div class="outer-wrapper"> tag
<b: if cond = 'data:blog.pageType == "item& uot; '>
<div class = 'post-above'>
<p class = 'title'>
<data:blog.pageName />
</p>
<div class = "thumb-post '/>
</div>
</b:if>
Now search </b:skin>
Paste below CSS code after
</b:skin> tag and save template.
<b:if cond = 'data:blog.pageType == "item"'>
<style type = "text/css">
# items-thumbnail {display:none}
.post-above {text-align:center;margin:0 20px; Padding:15px 0 15px; border-bottom:1px solid #ddd}
.post-above p.title {font-size:42px; font-weight:500; line-height:1.3em; color:#fff; margin:0; padding: 0}
.post-above .thumb-post {text-align:center; margin:0; padding:0}
.post-above-post .thumb img {width:100%; max-width:100%; height: auto; margin-top:15px}
h3.post-title, .post-header, .post h1, .post h2{margin:0!important;padding:0!important;height:0!important;font-size:0!important;line-height:0!important;}
p.att-javascript{font-size:150%;text-align:center}
</style>
</b:if>
Now place the script code
above the </body> tag
<b:if cond = 'data:blog.pageType == "item"'>
<script>
// <! [CDATA [
var items=document.getElementById("items-thumbnail"),divs=document.getElementsByClassName("thumb-post");[].slice.call(divs).forEach(function(e){e.innerHTML=items.innerHTML});
//]]>
</script>
</b:if>
Well now turn to how to
make a post with full width image, please create a picture for illustration
post sizable but note its size, try to have the image size is small, but does
not damage the quality. Try to create an image with dimensions 750px x 380px
and size under 100kb. Then upload the picture at the beginning of the post and
select the original size. In order for a valid HTML5 posting pictures, please
delete the link and code border = "0" as follows below, add title and
alt tags as well as width and height. Please switch to HTML mode and code
images will be as shown below prior removed its link:
<div class = "separator" style = "clear:both; text-align:center;"><a href = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd0yFm84yXvjQipcS8DwEa0vQl0_R9KPoJEF8v5rzuzS0UnXT9QOiZZuW0yXIh_arh7UHDmmFsRDwc-wSej5TQwTL6YkJIeJ2q3WVwieOL9Y1aKqIB6s_uC2tV4mM4ZURVzACD_5dqsimO/s1600/lablance.png" imageanchor = "1" style = "margin-left: 1em; margin-right: 1em; "><Img border = "0" src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd0yFm84yXvjQipcS8DwEa0vQl0_R9KPoJEF8v5rzuzS0UnXT9QOiZZuW0yXIh_arh7UHDmmFsRDwc-wSej5TQwTL6YkJIeJ2q3WVwieOL9Y1aKqIB6s_uC2tV4mM4ZURVzACD_5dqsimO/s1600/lablance.png" /></a></div>
Once removed the link and
border = "0":
<div class = "separator" style = "clear: both; text-align: center ;">
<img src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd0yFm84yXvjQipcS8DwEa0vQl0_R9KPoJEF8v5rzuzS0UnXT9QOiZZuW0yXIh_arh7UHDmmFsRDwc-wSej5TQwTL6YkJIeJ2q3WVwieOL9Y1aKqIB6s_uC2tV4mM4ZURVzACD_5dqsimO/s1600/ lablance.png "alt = "post thumbnails" title = "Thumbnail Post Title" width = "750" height = "380"/> </div>
Then add the code id =
"items-thumbnail" in the div her to be like this
<div class = "separator" id = "items-thumbnail" style = "clear: both; text-align: center ;">Usually there will be a code <br/> under the code shown above, please delete the code so as not to cause the distance between the top edge of the post with the first paragraph of the posting.
<img src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgd0yFm84yXvjQipcS8DwEa0vQl0_R9KPoJEF8v5rzuzS0UnXT9QOiZZuW0yXIh_arh7UHDmmFsRDwc-wSej5TQwTL6YkJIeJ2q3WVwieOL9Y1aKqIB6s_uC2tV4mM4ZURVzACD_5dqsimO/s1600/lablance.png" alt = "post thumbnail" title =" LabLance Image" width =" 750 "height =" 380 "/> </div>