Cara Membuat Auto Read More Blog - Judul di Samping Gambar

SEBELUMNYA sudah dibagikan tips Cara Membuat Auto Read More Halaman Depan Blog berupa judul, gambar, dan ringkasan. Posisi judul di atas gambar.

Kali ini tutorial serupa, sama-sama membuat auto readmore di halaman depan blog berupa judul, gambar thumbnail, dan ringkasan, namun posisi judul ada di samping gambar seperti halaman depan dan halaman label blog ini.

Kebanyakan tips dan kode auto readmore blog hasilnya menampilkan judul di atas gambar, baik yang tidak menggunakan javascript maupun yang hanya css dan htm.

Berikut ini penampakan auto readmore judul di samping gambar atau gambar sejajar dengan teks (judul dan ringkasan) seperti di homepage blogger bandung ini.

Cara Membuat Auto Read More Blog - Judul di Samping Gambar

Tips ini untuk diterapkan di template blog bawaan blogger. Template bukan bawaan blogger biasanya sudah dipasangkan auto readmore, jadi harus dihapus dulu kode yang lama, baru dipasang yang ini.

1. Tema > Edit HTML
2. Simpan kode CSS Auto Read More ini di atas kode </head>

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
.post-thumbnail{float:left;margin-right:20px;background:#fff;margin-bottom: 5px;}
.post h2{font-size:20px;font-weight:normal;line-height:1.2em;margin-bottom:10px;margin-top:0}
.post h2 a,.post h3 a:visited{color:#0060A6;display:block;text-decoration:none}
.post h2 a:hover{color:#FF0084}
.post-footer,.date-header,.feed-links {display:none}
</style>
</b:if>
</b:if>

3. Cari dan HAPUS kode yang ada di bawah kode <a expr:name='data:post.id'/> ini:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title' itemprop='name'>
<b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
<a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h3>
</b:if>

4. Ganti (replace) kode yang dihapus tadi dengan kode ini:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='140px' width='180px'/>
<b:else/>
<img alt='no image' class='post-thumbnail' height='140px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir97RpnALluP2YDKRP0tjarFXXdpSaHcJ1uUMmO1V1nW0nuazm8Ucatr8-F0AEn-SbtxuV4ye0osd6X7iGOvLeak51C0sjdCEzC3BwL5CamFcYQw_n7cmMs3hUy-n13uhQB7Y16k8eSW8/s200-c/last%2528gr%2529256.jpg' width='180px'/>
</b:if>
</b:if>
</b:if>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.title'>
<h2 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<h1 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h1>
</b:if>
<b:else/>
<h1 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</h1>
</b:if>

5. HAPUS dan GANTI kode <data:post.body/> yang kedua dengan kode ini:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<data:post.snippet/>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

6. HAPUS JUGA KODE INI yang ada di atas kode <div class='post-footer'> ini:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>

7. Simpan koder berikut ini di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("Blog1");
theText = bodyText.innerHTML;
theText = theText.replace(/s72-c/gi, "s200-c");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>

8. Save! Beres.

CARA LAINNYA

1. Tema > Edit HTML
2. Pasang Kode CSS Cara Membuat Auto Read More Blog - Judul di Samping Gambar berikut ini di atas kode </head>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style type='text/css'>
.post {float: left;margin: 0 0 15px 0;overflow: hidden;padding: 0 0 10px 0;position: relative;width: 100%;height: auto;}
.post-body {font-size:90%;line-height:1.3em;color:#777;margin:0;text-align:left}
.post-snippet:before{content:attr(data-snippet)}
h3.date-header,.date-header,.post-header,.post-timestamp,.post-footer,.feed-links{display:none}
.post h2 a,.post h2 a:visited,.post h2 strong{display:block;text-decoration:none;color:#2b2b2b}
.post h2{font-size:18px;line-height:1.3em;color:#2b2b2b;margin:0 0 8px 0;padding:0}
.post h2 a:hover{color:#48d}
.post-thumbnails{margin:0 20px 5px 0;float:left;width:180px;height:110px;object-fit:cover}
</style>
</b:if>
</b:if>

Kode warna merah adalah ukuran gambar.

3. Cari (Ctrl+F) dan ganti kode <data:post.body/> yang kedua atau ketiga (jika ada).

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

4. Cari kode berikut ini yang ada 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>

Hapus dan ganti dengan kode ini:

<b:if cond='data:blog.pageType != "item"'> <b:if cond='data:blog.pageType != "static_page"'> <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/AVvXsEjZtquAIJ-GCj47FIkQ1NPpb2kzO8NRWx_lsZ7lkKRmpu5Vy8BJ-LumPkoo6Bq55zQvhQpjtkukUaJEUU7l1QBQ8zpR1gwGl-sumN1T_jAaaPdLA0_ROJY1QfPqg28tRr_MnZ_w1v683J0F/'/> </b:if> </b:if> </b:if> <b:if cond='data:blog.pageType != "item"'> <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>

5. Cari kode berikut ini:

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

Ganti 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, "4:3") : 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/AVvXsEh7P-kaYi55RS865r5LVsIUQyzYfYkVaxbyI58SXAJPpTjtdpgXQqkFdU-t11jtf-daY5Fqgl1YtRtJRRvR-NKDR_jeorEwcM-fmoaYyL47j2naCpj5SNJJbrsM8nn1Y7My_n-QCBskYmQ/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'/>&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'/>&nbsp;<data:post.dateHeader/></span>
<span class='post-timestamp'><i class='fa fa-clock-o'/>&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'/>&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'/>&nbsp;<b:include cond='data:blog.pageType not in {"item","static_page"} and data:post.allowComments' data='post' name='comment_count_picker'/></span>
</div>
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id' expr:itemprop='(data:blog.metaDescription ? "" : "description ") + "articleBody"'>
<div class='post-body entry-content' expr:id='"summary" + data:post.id' itemprop='articleBody'>
<b:if cond='data:post.snippet'>
<data:post.body/>
</b:if>
</div>
</div>
<script type='text/javascript'>
createSnippet("summary<data:post.id/>");</script>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<data:post.jumpText/>
</a>
</div>
<div style='clear:both;'/>
</div>
</b:includable>

Save! Simpan template.
Selesai.

Itu dia Cara Membuat Auto Read More Blog - Judul di Samping Gambar. (bloggerbandung.net).*

Blogging Desain Blog

Blogger Bandung

Cara Membuat Auto Read More Blog - Judul di Samping Gambar

Cara Membuat Auto Read More Blog - Judul di Samping Gambar

Related Posts

1 comment

Post a Comment

Contact Form

Posting Terbaru

Label

Terpopuler