February 25, 2018

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

February 25, 2018

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:

Auto Readmore Tanpa JavaScript - Judul di Samping Gambar Thumbnail

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).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

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

  1. gambar nya kok jadi buram ya gan

    ReplyDelete
    Replies
    1. Tambahkan kode mengatasi gambar buram
      http://www.contohblog.com/2016/03/cara-mengatasi-gambar-buram-blur.html

      Delete
  2. Mas cara untuk mengatur jumlah kata-kata deskripsinya bagaimana mas (saya ingin menambahkan kata-kata deskripsinya sedikit lebih banyak lagi)

    ReplyDelete
    Replies
    1. Coba cek: http://www.contohblog.com/2015/04/cara-menambah-jumlah-ringkasan-snippet.html

      Delete
  3. mas, maksudnya itu ganti dengan kode ini apa ya? terima kasih sebelumnya

    ReplyDelete
    Replies
    1. maksud kode ini = kode yang ada di bawah

      Delete
  4. nggak ada title imagenya hehe

    ReplyDelete

Contact Form

Name

Email *

Message *