Header Ads

Auto Read More dengan Besar / thumbnail Big tanpa Javascript untuk Blogger Posts

Baca juga artikel terkait lainnya

Yah aku punya ide ini dari masalah mengenai gambar kecil muncul di share facebook. Untuk mengatasi ini menggunakan data:post.firstImageUrl , yang membantu saya untuk menambahkan Auto read more dengan besar atau Apa Ukuran Gambar yang Anda inginkan. Setelah mengetahui teknik ini, dikonversi template blogger saya yang bisa browsing tanpa javascript (tidak termasuk komentar dan posting terkait). Dalam teknik ini situs blogger Anda berlari sangat cepat.

Auto Read More dengan Besar / thumbnail Big tanpa Javascript untuk Blogger Posts
Sebelum kita mulai hal pertama Anda harus memastikan bahwa Anda memiliki backup template blogger Anda.

Langkah 1 : Login ke blog Anda >> Buka Template Bagian >> Klik "Edit HTML" Tombol
Langkah 2 : Klik pada Template Box Cari <data:post.body/>dan hal itu mungkin terjadi 2 sampai 3 kali, mengganti semua jika Anda menemukan sekitar 2 kali <data:post.body/> atau jika Anda menemukan sekitar 3 kali <data:post.body/>mengganti salah satu kedua dan ketiga, oleh salah satu kode di bawah ini tersedia.

Kode: 1-Auto read more dengan thumbnail

<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'>
<img class='thumbnail' expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
</a>
</b:if>
<div class="snippet">
<data:post.snippet/>
</div>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Kode: 2-Auto read more dengan thumbnail dan standar tampilan gambar jika tidak ada gambar dalam posting.


<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'>
<img class='thumbnail' expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
</a>
<b:else/>
<a expr:href='data:post.url'>
<img alt='no image' class='post-image' src='http://1.bp.blogspot.com/-0ZVmySTNp8w/VatptLQV04I/AAAAAAAAA4A/Kyr5yVdA30c/s1600/No-image-available-technohalf.png'/>
</a>
</b:if>
<div class="snippet">
<data:post.snippet/>
</div>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Langkah 3: Sekarang waktunya untuk Sesuaikan thumbnail. Tampilan gambar di sebelah kiri menambahkan ini sebelum ]]> .thumbnail {float: kiri; margin-right: 12px} Tampilan gambar di sebelah kanan menambahkan ini sebelum ]]> .thumbnail {float: right; margin-left: 12px} Cara Meningkatkan Snippet / Hitungan Di sini JavaScript berperan menggantikan teks yang disorot atas dengan ini.

<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div> <script type='text/javascript'>createSnippet(&quot;summary<data:post.id/>&quot;);</script>


Sekarang menemukan </head>dan paste script ini di atas tag ini

{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSnippet(pID){
var div = document.getElementById(pID);
var summ = snippet_count;
var summary = '<div class="snippets">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Ganti snippet_count = 500;500-300 atau mungkin 200 sesuai kebutuhan

Powered by Blogger.