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, menyerupai umumnya template blog "zaman now".

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

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

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

Langsung saja, ini arahan dan cara memasangnya.

Auto Readmore Tanpa JavaScript - Judul di Samping Gambar Thumbnail

1. Tema > Edit HTML
2. Temukan arahan <data:post.body/> yang kedua 
3. Ganti dengan arahan 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 arahan menyerupai ini di bawah arahan <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 arahan tersebut dan Ganti dengan arahan 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='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png'/> </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 arahan </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 ialah ukuran gambar thumbnail dan ukuran abjad judul posting

7. Cari dan ganti arahan kode berikut ini:

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

Dengan arahan 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://1.bp.blogspot.com/-GlygfzLesKI/WSbC_DROQOI/AAAAAAAAAdA/XkZ-ommcuGgaJ1UEhmxMZpaq_RoDBX_OACLcB/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 arahan file xml template simple bawaan blogger yang sudah dipasang arahan 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.idtutorial.com).*

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours