Cara Membuat Auto Readmore Judul di Samping Gambar Thumbnail (Tanpa JavaScript)

Baca Juga

Cara Membuat Auto Readmore Judul & Teks di Samping Gambar Thumbnail (Tanpa JavaScript)

Ada yang reques cara memasang Auto Readmore Tanpa JavaScript dengan posisi Judul di Samping Gambar Thumbnail, seperti umumnya template blog "zaman now".

Dengan kode Auto Readmore berikut ini, posisi gambar dan judul sejajar. Judul di samping gambar, diikuti snippet atau ringkasan (otomatis diambil dari alinea pertama atau teks bagian teratas postingan), seperti gambar berikut ini:

Tips membuat auto readmore judul di samping gambar thumbnail berikut ini untuk diterapkan di template blog bawaan blogger, khususnya versi Simple.

Langsung saja, ini kode dan cara memasangnya.

Auto Readmore Tanpa JavaScript - Judul di Samping Gambar Thumbnail

1. Tema > Edit HTML
2. Temukan kode <data:post.body/> yang kedua 
3. Ganti dengan kode berikut ini.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <div class='post-snippet' expr:data-snippet='data:post.snippet'/> </b:if> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == &quot;static_page&quot;'> <data:post.body/> </b:if> </b:if>

4. Temukan lagi kode seperti ini di bawah kode <b:includable id='post' var='post'>

      <h3 class='post-title entry-title' itemprop='name'>
<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>

5. Hapus kode tersebut dan Ganti dengan kode berikut ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:post.thumbnailUrl'> <img class='post-thumbnails' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/> <b:else/> <img alt='no image' class='post-thumbnails' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixNRzsnavls18JHXfdD7Ny7-SBWgVdzHCmWFmJu-B1N7SHTstZ40H7HY9grVhg_kvZK5_S9jNlZkeaaofhXLWxVbvYND_vBv7fcpAXobxB4Dthr5u-WAbMIZCTo2M8dVk11XWIH0i_Qfz0/'/> </b:if> </b:if> </b:if> <b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:post.title'> <h2 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> </h2> </b:if> <b:else/> <h1 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> </h1> </b:if>
    </b:if>

6. Pasang Kode CSS Autoreadmore berikut ini di atas kode </head>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'> <b:if cond='data:blog.pageType != &quot;item&quot;'> <style type='text/css'> .post-body{border-top:2px solid #ddd;padding-top:10px;font:normal 14px &#39;Arial&#39;, serif;margin:1.0em 0 .75em;line-height:1.3em;} .post-snippet:before{content:attr(data-snippet);} h3.date-header{text-transform:none;font:normal 12px Arial;color:#999;line-height:1.2em;margin:.1em 0} h3.date-header,.post-timestamp,.post-footer,.feed-links {display:none} .post {float:left;margin:10px 5px 0;overflow:hidden;padding:7px 7px 5px;positon:relative;width:100%;height:auto;} .post h1,.post h2{line-height:1em;margin:0 0 4px;padding:0;font:bold 12px Tahoma} .post-body{font:12px arial;border-top:none;padding-top:0px;background:none;margin:0;text-align:left} .post h1,.post h2{font:24px Oswald;line-height:1.2em;color:#444;margin:.0em 0 0;padding:4px 0} .post h1 a,.post h1 a:visited,.post h1 strong,.post h2 a,.post h2 a:visited,.post h2 strong{display:block;text-decoration:none;color:#444;} .post h1 strong,.post h1 a:hover,.post h2 strong,.post h2 a:hover{color:#0a2e56} .date-header {display:none}.post-thumbnails {
    margin: 0 15px 5px 0;
    float: left;
    width: 100px;
    height: 90px;
    object-fit: cover;
}
.post h2 {
    font-size: 18px;
    line-height: 1.2em;
    color: #444;font-family:Arial,Sans-serif;
    margin: .0em 0 0;
    padding: 4px 0;
}
</style> </b:if></b:if>

Kode warna merah adalah ukuran gambar thumbnail dan ukuran huruf judul posting

7. Cari dan ganti kode kode berikut ini:

<b:includable id='mobile-index-post' var='post'>
...........  banyak kode lain di sini ..........
</b:includable>

Dengan kode berikut ini ini:

<b:includable id='mobile-index-post' var='post'>
<div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
<div class='Image-thumb'>
<b:if cond='data:post.thumbnailUrl'>
<b:with value='data:post.thumbnailUrl ? resizeImage(data:post.thumbnailUrl, 350, &quot;4:3&quot;) : data:post.thumbnail' var='image_bro'><img expr:alt='data:post.title' expr:src='data:image_bro'/></b:with>
<b:else/>
<img expr:alt='data:post.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2diLqnCQO4lJU9s19zBeaadCniZ3Qq9Ld7AUQVfOuv3cGpLudPzunqUHcybP0WtX3iSE4Ev9SGtyA38ISoVYtCyiDHCkbr97e5ugW84720EDpE4nxwdCetM4w54ahEHr8u4YHzut0lcc/s320/no-image.PNG'/>
</b:if>
</div>
<a expr:href='data:post.url'>
<h3 class='post-title entry-title' itemprop='name'>
<data:post.title/>
</h3>
</a>
<div class='post-info'>
<span class='post-author'><i class='fa fa-user'/>&amp;nbsp;<b:if cond='data:post.authorProfileUrl'><a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'><data:post.author/></a><b:else/><data:post.author/></b:if></span>
<span class='post-date'><i class='fa fa-calendar'/>&amp;nbsp;<data:post.dateHeader/></span>
<span class='post-timestamp'><i class='fa fa-clock-o'/>&amp;nbsp;<abbr class='published' expr.title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></span>
<span class='post-labels'><b:if cond='data:post.labels'><i class='fa fa-tag'/>&amp;nbsp;<b:loop values='data:post.labels' var='label'><a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='not data:label.isLast'>,</b:if></b:loop></b:if></span>
<span class='post-comm'><i class='fa fa-comment'/>&amp;nbsp;<b:include cond='data:blog.pageType not in {&quot;item&quot;,&quot;static_page&quot;} and data:post.allowComments' data='post' name='comment_count_picker'/></span>
</div>
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' expr:itemprop='(data:blog.metaDescription ? &quot;&quot; : &quot;description &quot;) + &quot;articleBody&quot;'>
<div class='post-body entry-content' expr:id='&quot;summary&quot; + data:post.id' itemprop='articleBody'>
<b:if cond='data:post.snippet'>
<data:post.body/>
</b:if>
</div>
</div>
<script type='text/javascript'>
createSnippet(&quot;summary<data:post.id/>&quot;);</script>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>
<data:post.jumpText/>
</a>
</div>
<div style='clear:both;'/>
</div>
</b:includable>

Save!
Simpan template.

BERESSSS....!

Jika Anda "pusing" dengan cara di atas, dan ingin yang sudah jadi, alias ingin enaknya saja, silakan download kode file xml template simple bawaan blogger yang sudah dipasang kode autoreadmore di atas. (Download).

Cara lain sudah CB share di posting cara memindahkan Judul ke Samping gambar Thumbnail. 

Demkian Auto Readmore Tanpa JavaScript - Judul di Samping Gambar Thumbnail. Good Luck & Happy Blogging! (www.contohblog.com).*