Blog Eksperimen

Tampilkan postingan dengan label Posting. Tampilkan semua postingan

Mengubah Ukuran Tumbnail Popular Post

Versi Javascript

<script type='text/javascript'>
//<![CDATA[
function resizeThumb(parentID, size) {
    var parent = document.getElementById(parentID),
        image = parent.getElementsByTagName('img');
    for (var i = 0; i < image.length; i++) {
        image[i].src = image[i].src.replace(/\/s72\-c/, "/s" + size + "-c");
        image[i].width = size;
        image[i].height = size;
    }
}
// Mengubah ukuran thumbnail widget Posting Populer
resizeThumb('PopularPosts1', 200);
//]]>
</script>

Versi JQuery

<script type='text/javascript'>
//<![CDATA[
function resizeThumb(el, from, to) {
    $(el).each(function() {
        $(this).attr({
            'src': $(this).attr('src').replace('/s'+from+'-c/', '/s'+to+'-c/'),
            'width': to, 'height': to
        });
    });
}
// Mengubah ukuran thumbnail widget Posting Populer
$(function() {
    resizeThumb('#PopularPosts1 img', '72', '200');
});
//]]>
</script>

Baca Selengkapnya...

Membuat Readmore Otomatis

Readmore Otomatis

Pada tahu belum apa itu read more?? itu tuh biasanya kalau di halaman depan blog kan banyak banget tuh daftar postingannya. Biar gak terlalu panjang, maka postingan pada halaman depan itu disingkat, maksudnya yang tadinya panjang hanya sebagian saja yang ditampilkan, nah untuk membuat yang semacam itu menggunakan read more, jika pembaca ingin melanjutkan membaca postingan tersebut yaitu dengan cara mengklik read more atau bahasa indo nya baca selengkapnya . . . Read more ini ada dua versi, yang pertama cara manual, dan yang kedua cara otomatis, tetapi di sini saya akan bahas mengenai read more yang otomatis. Hebatnya read more otomatis ini dilengkapi dengan thumbnail gambar dan otomatis menyesuaikan jumlah huruf yang ditampilkan. Jadi jika postingan yang sobat buat mengandung gambar, gambar tersebut secara otomatis akan dijadikan sebagai thumbnail gambar. Biar gak pusing, langsung saja sikat tutorial berikut :

Pertama, login dulu ke blogger terus masuk ke menu RANCANGAN >> EDIT HTML jangan lupa untuk mencentang expand template widget. Biar aman, backup dulu template blog sobat. Abis itu cari kode </head> kemudian copy script dibawah ini dan paste sebelum kode </head>.

<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
summary_noimg = 550;
summary_img = 551;
img_thumb_height = 150 ;
img_thumb_width = 150;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
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 createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<1) {
imgtag = '<span style="float:left; padding:0px 5px 5px 10px;"><img src="http://andreblog.googlecode.com/files/images.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 5px 5px 10px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Salin kode CSS di bawah ini, kemudian letakkan tepat di atas kode ]]></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;}

Nah, kalau sudah, masih pada halaman edit HTML cari lagi kode <data:post.body/> , biasanya setiap template berbeda, jika pada template sobat sudah ada script-script lain misalnya tombol like atau lainnya sesuaikan saja. Kalau sudah ketemu hapus dan ganti kode <data:post.body/> dengan kode di bawah ini :

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'><b>Read more »</b></a></span>
</b:if>
</b:if>

Setelah itu simpan template sobat dan lihat hasilnya pada halaman depan blog sobat, apakah sudah berubah atau belum.

Catatan Penting :

var thumbnail_mode = "no-float" ; (ini adalah untuk mengubah posisi gambar apakah di(float) kiri atau jika tidak silahkan ganti dengan (no-float)
summary_noimg = 550; (Banyaknya huruf yang akan ditampilkan di posting tanpa gambar / thumbnail)
summary_img = 551; (Banyaknya huruf yang akan ditampilkan di posting dengan gambar / thumbnail)
img_thumb_height = 150; (Thumbnail 'tinggi gambar dalam piksel)
img_thumb_width = 150; (Thumbnail 'lebar gambar dalam piksel)
http://andreblog.googlecode.com/files/images.jpg = (Gambar default yang akan ditampilkan jika postingan tidak mempunyai gambar).
Read more » = dapat diganti dengan Baca Selengkapnya, atau sesuai selera sobat

Semoga Berhasil.

Baca Selengkapnya...

Modifikasi Widget Popular Post With Grid Layout

Modifikasi Widget Popular Post

Grid Layout For The Popular Posts Widget - Cara membuat atau memodifikasi widget popular post menjadi lebih keren bergaya grid layout, seperti yang kita tahu untuk tampilan widget bawaan blogger ini cukup menarik, tapi bisa kita modif lagi dengan gaya yang berbeda, dan lebih keren tampilannya. Pastinya diluar sana sudah banyak yang share tentang topik ini. Saya ulas lagi disini karena saya awalnya mendapat masalah dalam proses pemasangan kode scriptnya, jadi mungkin postingan saya ini bisa mempermudah sobat blogger yang mengalami masalah dalam menerapkan cara modifikasi popular post ini.(lihat ScreenShotnya diatas!).

Ikuti langkah-langkahnya berikut ini:

Login ke blogger
Pergi ke munu Design > Page Element > Add a Gadget
Pilih Widget "Popular Post"
Settinglah persis seperti gambar dibawah ini, untuk jumlah post, bisa sobat atur sendiri.

Lalu Save.
Lanjut ke Edit HTML, beri ceklist pada Expand Widget Templates.
Jangan lupa juga BackUp template sobat (buat jaga-jaga kalo ada yang error).
Cari kode (CTRL+F) ]]></b:skin>

Dan tambahkan kode CSS berikut diatasnya:

.popular-posts
.item-thumbnail{
float:left;
}

.popular-posts ul{
padding-left:30px;
}

.popular-posts ul li {
list-style-image: none;
list-style-type: none;
display:inline;
}

.popular-posts ul li img {
padding:0px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;border-radius: 5px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
transition: all 0.3s ease;
border: 2px solid #CCC;
}

.popular-posts ul li img:hover {
border:2px solid #ccc;
-moz-transform: scale(1.3) rotate(-360deg) ;
-webkit-transform: scale(1.3) rotate(-360deg) ;
-o-transform: scale(1.3) rotate(-360deg) ;
-ms-transform: scale(1.2) rotate(-360deg) ;
transform: scale(1.3) rotate(-360deg);}

Lanjut cari teks PopularPosts1 (CTRL + F) biar lebih cepat.

Ini kode script lengkapnya:

<b:widget id='PopularPosts1' locked='false' title='Popular Post' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Gantilah kode script diatas dengan kode script berikut:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
   <b:if cond='data:title'><h2><data:title/></h2></b:if>
   <div class='widget-content popular-posts'>
   <ul>
       <b:loop values='data:posts' var='post'>
       <li>
           <b:if cond='data:showThumbnails == "false"'>
               <b:if cond='data:showSnippets == "false"'>
                   
                   <a expr:href='data:post.href'><data:post.title/></a>
               <b:else/>
                   
                   <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
                   <div class='item-snippet'><data:post.snippet/></div>
               </b:if> <
           b:else/>
               <b:if cond='data:showSnippets == "false"'>
                   
                   <div class='item-thumbnail-only'> <div class='item-thumbnail'>
                   <a expr:href='data:post.href' expr:title='data:post.title'>
                       <b:if cond='data:post.thumbnail'>
                           <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                       <b:else/>
                           <img alt='' border='0' expr:height='data:thumbnailSize' src='http://www.prismestate.com/images/noimages.png' expr:width='data:thumbnailSize'/>
                       </b:if>
                       </a>
                       </div>
                       </div>
               <b:else/>
               
               <div class='item-content'>
                   <b:if cond='data:post.thumbnail'>
                   <div class='item-thumbnail'>
                   <a expr:href='data:post.href' target='_blank'>
                   <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a>
                   </div>
               </b:if>
                   <div class='item-title'>
                   <a expr:href='data:post.href'><data:post.title/></a></div>
                   <div class='item-snippet'><data:post.snippet/></div> </div>
                   <div style='clear: both;'/>
                       </b:if>
                       </b:if>
                   </li>
                   </b:loop>
                       </ul>
           <b:include name='quickedit'/> </div>
       </b:includable>
   </b:widget>

Terakhir Simpan dan lihat hasilnya.

Tambahan:
Untuk kode CSS bisa sobat kreasikan sendiri, sesuai dengan kreativitas sobat masing-masing.
Sekian dari saya untuk topik pembahasan Cara Modifikasi Widget Popular Post With Grid Layout. Semoga bermanfaat.

Baca Selengkapnya...