Membuat Posting Read More/Baca Selengkapnya Untuk Blogspot

Posting Read More/Baca Selengkapnya dibentuk dengan tujuan untuk meringkas artikel-artikel yang terlalu panjang. Sangat tidak menyenangkan bagi para pengunjung andaikan mereka harus menggulung layar begitu panjang hanya untuk melihat posting-posting di bawahnya. Nah, untuk mengatasi duduk perkara itu, umumnya para penulis akan menciptakan sebuah sistem ringkasan posting menyerupai ini:

Link/tautan Baca Selengkapnya bertugas untuk mengarahkan para pengunjung menuju halaman orisinil dari artikel tersebut.
Cukup dua langkah perombakan saja yang kita perlukan untuk menciptakan sistem ini berfungsi, hanya saja di sini Saya menawarkan sedikit detail kecil untuk memperindah tampilan linknya.

Pertama-tama masuklah ke tab Rancangan kemudian pilih Edit HTML. Cek Expand Template Widget semoga seluruh elemen pembangun posting tampil.
Temukan arahan ini:

</head>

Salin arahan ini, kemudian letakkan sempurna di atasnya:

<script type='text/javascript'> //<![CDATA[     var thumbnail_mode   = "float",         summary_noimg    = 350,         summary_img      = 350,         img_thumb_height = 100,         img_thumb_width  = 120;      /******************************************     Script Posting Read-More versi 2.0 (blogspot)     (C)2008 oleh Anhvo     ********************************************/     function createSummaryAndThumb(a) {         var b=document.getElementById(a);var c="";var d=b.getElementsByTagName("img");var e=summary_noimg;if(d.length>=1){c='<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+d[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var f=c+"<div>"+removeHtmlTag(b.innerHTML,e)+"</div>";b.innerHTML=f}function removeHtmlTag(a,b){if(a.indexOf("<")!=-1){var c=a.split("<");for(var d=0;d<c.length;d++){if(c[d].indexOf(">")!=-1){c[d]=c[d].substring(c[d].indexOf(">")+1,c[d].length)}}a=c.join("")}b=b<a.length-1?b:a.length-2;while(a.charAt(b-1)!=" "&&a.indexOf(" ",b)!=-1)b++;a=a.substring(0,b-1);return a+"...";     } //]]> </script>

Setelah itu cari arahan yang tampak menyerupai ini:

<data:post.body/>

TIP: Tekan CTRL + F kemudian ketik data:post.body untuk mempermudah pencarian.

Ganti arahan tersebut dengan ini:

<b:if cond='data:blog.pageType != &quot;item&quot;'>     <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>     <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>     <span class='rmlink'><a expr:href='data:post.url'>Baca Selengkapnya</a></span> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'>     <data:post.body/> </b:if>

Klik Pratinjau untuk sekedar mengecek perubahannya.

Sistem ringkasan posting ini bergotong-royong sudah sanggup berfungsi dengan baik, jadi kau sanggup eksklusif menyimpan perubahannya. Tapi kalau kau ingin menawarkan sedikit kegantengan lagi dalam sistem postingmu ini, kau sanggup menawarkan dampak menyerupai tombol pada link Baca Selengkapnya.

Salin arahan CSS di bawah ini, kemudian letakkan sempurna di atas arahan ]]></b:skin> atau </style>:

.rmlink a        {background:#567856;color:#fff;padding:2px 15px 3px;margin:15px 0 0;border:0;float:right;text-decoration:none;border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;font-weight:bold;} .rmlink a:hover  {background:#FFDD56;color:#000;} .rmlink a:active {background:#000;color:#567856;}

Klik Simpan Template.

Sedikit Penyesuaian:

Tentukan banyaknya aksara yang ditampilkan dalam variabel summary_noimg (jika postinganmu tidak terdapat gambar) dan summary_img (jika postinganmu terdapat gambar).
Tentukan lebar dan tinggi thumbnail dalam variabel img_thumb_width dan img_thumb_height.

Pertimbangkan Juga Beberapa Posting Ini:

Sumber https://www.dte.web.id/