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 isyarat 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 buat blog itu- 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 isyarat dan cara memasangnya.

Auto Readmore Tanpa JavaScript - Judul di Samping Gambar Thumbnail

1. Tema > Edit HTML
2. Temukan isyarat <data:post.body/> yang kedua 
3. Ganti dengan isyarat 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 isyarat menyerupai ini di bawah isyarat <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 isyarat tersebut dan Ganti dengan isyarat 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 isyarat </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 yakni ukuran gambar thumbnail dan ukuran abjad judul posting

7. Cari dan ganti isyarat kode berikut ini:

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

Dengan isyarat 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 isyarat file xml template simple bawaan blogger yang sudah dipasang isyarat 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.carabuatblogitu.com).*

Share To:

Endo Sadewa

Post A Comment:

0 comments so far,add yours