How to make featured image on Blogger?


#1

After seeing @NamanKumar new blog “Blogging Easier” on his review topic, There’s something in post that get my attention.

I am curious about the images that appear in the posting, before post title. How did the template designer make this ?

After Seeing some code on his blog, I only find CSS & HTML like this: :eyes:

.tcpic img{
margin-top:25px;
width:94%;
}

and this:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    	<div class='tcpic' id='pic1'/>
       </b:if>

So what’s the magic script then :question::question::question: If I put this code, there will be two same image on my post isn’t ?

<b:if cond='data:post.firstImageUrl'>
 <img expr:src ="data:post.firstImageUrl" expr:alt="data:post.title"/>
 </b:if>

Please someone tell me :pray: how to make this…

Summoning @Mohammad @Rohan @Shivansh @Templatezy @mybloggertricks and all member here :ok_hand:


#2

@Mad

Thanks for giving value to my suggestions.

Bro. I’m not using laptop or desktop machine, so that’s why i couldn’t share any suggestion.

Tomorrow I will try to come with my laptop, then i hope I will give you suggestion on what’s the magic script there…!!!


#3

Okay mate, waiting for your answeer too later :blush:


#4

@Mad here is a simple code for you. I am also using it.

<div id='featuredboxes'><div style='visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 100%; '><ul><li><div class='featuredbody'><a class='Fadein3' href='POST 1 LINK'><img height='100' src='POST 1 IMG LINK' width='170'/></a><div class='clear'></div><h3><a href='POST 1 LINK'>POST 1 DESCRIPTION</a></h3></div></li><li><div class='featuredbody'><a class='Fadein3' href='POST 2 LINK'><img height='100' src='POST 2 IMG LINK' width='170'/>
</a><div class='clear'></div><h3><a href='POST 2 LINK'>POST 2 DESCRIPTION</a></h3></div></li><li><div class='mbtbody'><a class='Fadein3' href='POST 3 LINK'><img height='100' src='POST 3 IMG LINK' width='170'/></a><div class='clear'></div><h3><a href='POST 3 LINK'>POST 3 DESCRIPTION</a></h3><p>POST 3 PARAGRAPH</p>
</div></li></ul></div></div>

And here is the css

#featuredboxes{height:250px;overflow:hidden;margin-top:0px;position:relative;width:948px;background:;border:0px solid #333; padding:5px 5px;margin-left:125px;}#featuredboxes ul{ margin-left: 10px; padding: 0pt; position: relative; list-style-type: none; z-index: 1;  width: 100%; }#featuredboxes ul li{ overflow: hidden; float: left; width: 300px; height: 250px; border-top:0px solid #333; margin-right:6px; padding:2px 0px 4px 0px; }#featuredboxes ul li:hover{ border-bottom:1px solid #c5c5c5; }#featuredboxes img{width:250px;height:200px; padding:2px; border: 1px solid #A3A3A3;  margin-top:0px;}#featuredboxes img:hover{border: 1px solid #c5c5c5; }.featuredbody img{float:left}.featuredbody {position:relative;margin:0 5px 0 5px;width:170px;height:210px;display:inline;float:left;color:#c4c4c4}.featuredbody h3{padding:5px 0;font-size:16px;font-weight:bold; font-family: oswald, sans-serif, arial; margin:0;}.featuredbody h3 a:link,.featuredbody h3 a:visited{color:#2F97FF;}.featuredbody h3 a:hover{color:#c5c5c5}.featuredbody p{margin:0; padding:0 0;color:#cdcdcd;font:10px normal verdana, sans-serif, Arial;}.Fadein3 img {filter:alpha(opacity=80);opacity: 0.8;border:0;}.Fadein3:hover img {filter:alpha(opacity=100);opacity: 1.0;border:0;}

#5

@HassanTahir, You solution is not that which @Mad is asking. Here’s the solution.

  • First Paste this CSS above ]]></b:skin>
.tcpic img{
margin-top:25px;
width:94%;
}
  • Now, Above your blog’s title code, Place below code. So it will automatically select the first image of the post. :smile:

`<b:if cond=‘data:blog.pageType == “item”’>

`

Hope It will Help You.


#6

It’s not what I’m asking for, but let me check out this code :blush:


#7

That’s what I’m posted here on my topic, then what :question:


#8

Has anyone gotten a solution to this yet? Please Post if you do.


#9

I found the tutorial from here kompiajaib.com/2015/06/judul-dan-gambar-postingan-di-atas.html

Will mark this thread as [Solved] :smile:


#10

Thanks, but not what I am looking for. I want it to appear like that of bloggingeasier.blogspot.com


#11

It’s just same trick, if you see inside bloggingeasier.blogspot.com template (ctrl+shift+i). Add this CSS first on your blog:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#items-thumbnail{display:none}
.post-upper{text-align:center;margin:0 30px;padding:20px 0 20px;border-bottom:1px solid #ddd}
.post-upper p.title{font-size:42px;font-weight:500;line-height:1.3em;color:#fff;margin:0;padding:0}
.post-upper .thumb-post{text-align:center;margin:0;padding:0}
.post-upper .thumb-post 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>

Then find <b:includable id='post' var='post'>, add this code above your <b:if cond='data:post.title'>

<b:if cond=‘data:blog.pageType == “item”’>

Add this Js too

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>

Save your template :blush:

Put this id="items-thumbnail" when uploading your image

<div class="separator" id="items-thumbnail" style="clear: both; text-align: center;">
<img src="http://4.bp.blogspot.com/-yuhkNIOq2R4/VYO_WxjYNFI/AAAAAAAAhWA/xIyww87X5s0/s1600/2.png" alt="thumbnail postingan" title="Thumbnail Postingan Yang Ini" width="720" height="350"/></div>

Publish…


#12

Thank you, Mad for sparing your time to give a well detailed tutorial. :smile: Thanks, Worked!!


#13

@Mad, I have already posted the solution of this in another forum topic. You can look at it too:


#14

Do you have non-encoded script version ? The script is very long :pensive:


#15

Well, using a obfuscated javascript is a way to optimize the javascript. If you want deobfuscated javascript, then here it is:

var _0x7c5d = ["src", "attr", ".entry-content img", ".tcpic", "appendTo", "<center><img src=\"", "\" class=\"firstpic\"/></center>", "remove", "first", "hide", "error", "img", "ready", "onload", "innerHTML"];
var _0x478e = [_0x7c5d[0], _0x7c5d[1], _0x7c5d[2], _0x7c5d[3], _0x7c5d[4], _0x7c5d[5], _0x7c5d[6], _0x7c5d[7], _0x7c5d[8], _0x7c5d[9], _0x7c5d[10], _0x7c5d[11], _0x7c5d[12], _0x7c5d[13], _0x7c5d[14]];
$(document)[_0x478e[12]](function() {
    var _0xe09ax2 = $(_0x478e[2])[_0x478e[1]](_0x478e[0]);
    $(_0x478e[5] + _0xe09ax2 + _0x478e[6])[_0x478e[4]](_0x478e[3]);
    $(_0x478e[2])[_0x478e[8]]()[_0x478e[7]]();
    $(_0x478e[11])[_0x478e[10]](function() {
        $(this)[_0x478e[9]]()
    });
});
window[_0x478e[13]] = function() {
    var _0xe09ax3 = document[_0x478e[15]](_0x478e[14]);
    if (_0xe09ax3 == null) {
        window[_0x478e[17]][_0x478e[16]] = _0x478e[18]
    };
    _0xe09ax3[_0x478e[19]](_0x478e[16], _0x478e[18]);
    _0xe09ax3[_0x478e[19]](_0x478e[20], _0x478e[21]);
    _0xe09ax3[_0x478e[19]](_0x478e[22], _0x478e[23]);
    _0xe09ax3[_0x478e[24]] = _0x478e[23];
};