This is default featured slide 1 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 2 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 3 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 4 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

This is default featured slide 5 title

Go to Blogger edit html and find these sentences.Now replace these sentences with your own descriptions.

Tuesday, January 14, 2014

Membuat Popular Post Hanya Tumbnail

Posting Tentang dunia perbloggeran lagi, kali ini tentang cara Membuat Popular Post Hanya Tumbnail, secara default blogger menampilkan judul saja, gambar dan judul, gambar judul dan sebagian paragraf pertama, sedangkan untuk menampilkan gambarnya saja kita harus mengakal sendiri, karena blogger tidak menyediakan untuk menampilkan hanya gambarnya saja;
Sekrinsyutnya seperti dibawah ini;
Kalau disorot mouse pada link gambar akan berputar sehingga tampilan gambarnya menjadi besar dan muncul tulisan judul postingan, seperti gambar dibawah ini;
Caranya cukup sederhana, masbro tertarik!!.. ikuti langkah dibawah ini;

Langkah pertama;
Login ke dasbor blogger dengan id masbro sendiri, tambahkan widget Popular Post dengan klik "Tambah gadget" setelah tampil pop up pilih "Entri Populer" dengan  tekan tekan tombol +


kemudian pilih dan atur Konfigurasi Entri Populer seperti gambar dibawah ini, setelah selesai tekan tombol Simpan;



Langkah kedua;
Masuk ke edit html, ingat! jangan centang expand widget biarkan saja, masukkan kode dibawah ini diatas kode ]]></b:skin>
.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);}
Selanjutnya cari kode seperti ini;

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>

Kalau sudah ketemu hapus dan ganti dengan kode dibawah ini

<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"'>
<!-- (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 == "false"'>
<!-- (3) Show only thumbnails -->
<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://2.bp.blogspot.com/-erTXCq61ULM/TmHYAQBZ0GI/AAAAAAAACCs/6cBX54Dn6Gs/s72-c/default.png' expr:width='data:thumbnailSize'/>
</b:if>
</a>
</div>
</div>
<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>
Dan lihat hasilnya, maka akan seperti sekrinsyut diatas, monggo dicoba.

Membuat Sidebar Accordion dengan jQuery

Membuat Sidebar Accordion dengan jQuery, Maximum Tips Trick kali ini akan membahas bagaimana cara dan apa manfaat membuat Sidebar Accordian akan dibahas pada post ini. Apa itu Sidebar Accordion mungkin teman teman akan lebih jelas pembahasannya bila searching di google, tapi untuk contohnya, sobat blogger bisa lihat di sidebar Blog ini.

Membuat Sidebar Accordion dengan jQuery
Sidebar Accordion dengan jQuery

Kriteria Post Hari Ini :
  • Goal : Sidebar kuno kita akan berubah tampilan menjadi lebih elegant
  • Tujuan : Memperindah Blog kita sehingga visitor akan betah
  • Harapan : Theme Blog kita lebih user friendly
How To Make Sidebar Accordion With JQuery :

Berikut lengkap Membuat Sidebar Accordion dengan jQuery : 
  • Masuk pada bagian Template » Edit HTML 
Kemudian Letakkan kode berikut ini atas kode ]]></b:skin> 

#sidebar-wrapper h2 {
margin: 0 2px;
padding:3px 7px 3px 13px;
 
text-shadow:0 1px 0 black;
background-color:#AD3000; 
border:1px solid #ccc; 
font:normal bold 12px "Trebuchet MS", Trebuchet, sans-serif; 
color:#fff; 
text-transform:uppercase; 
} 
#sidebar-wrapper h2:hover { 
margin: 0 2px; 
padding:3px 7px 3px 13px; 
background:#860000; 
font:normal bold 12px "Trebuchet MS", Trebuchet, sans-serif; 
color:#fff; 
text-transform:uppercase; 
border-bottom:1px solid #404040; 
} 
#sidebar-wrapper h2.active { 
background-color:#B60000; 
color:#FFF; 
} 
#sidebar-wrapper .widget { 
margin:0 0; 
padding:0 0; 
} 
#sidebar-wrapper .widget-content { 
padding:5px 5px 5px 13px; 
max-height:auto; 
overflow:auto; 
} 
#sidebar-wrapper1 .widget-content ul li { 
border-top:1px solid #444; 
border-bottom:1px solid #222; 
}
Selanjutnya Letakkan kode berikut ini diatas kode </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function() {
    $('#sidebar-wrapper .widget-content').hide();
    $('#sidebar-wrapper h2:first').addClass('active').next().slideDown('slow');
    $('#sidebar-wrapper  h2').css('cursor', 'pointer').click(function() {
        if($(this).next().is(':hidden')) {
            $('#sidebar-wrapper h2').removeClass('active').next().slideUp('slow');
            $(this).toggleClass('active').next().slideDown('slow');
        }
    });
});
//]]>
</script> 
 Simpan Template

Keterangan:
Kode B60000 merupakan background pada judul widget. 
Kode #sidebar-wrapper  merupakan ID sidebar.

Kode


<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>


merupakan jQuery, jika template anda sudah terdapat kode ini, maka tidak usah ditambahkan lagi, atau anda juga bisa mengganti jQuery yang lama dengan yang versi terbaru.

Sunday, August 4, 2013

Widget Entri Populer dengan Gambar Berputar




Langsung aja caranya, Berikut:
1.Pertama login dulu ke akun Blogger
2.Lalu klik Rancangan
3.Edit Html, jangan lupa centang expand widget template
4.Lalu cari kode ]]></b:skin>, untuk mempermudah pencarian tekan Ctrl+F

5.Setelah dapat kode ]]></b:skin>, letakkan kode di bawah ini pada kode tadi

<style type='text/css'>
.PopularPosts .item-title{display:none}
.PopularPosts ul li {background: none repeat scroll 0 0 transparent;float: left;list-style: none outside none;margin: 5px !important;padding: 0 !important;}
.PopularPosts ul li img {padding:0;-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;height: 80px;width: 80px;}
.PopularPosts ul li img:hover {border:2px solid #BBB;-moz-transform: scale(1.2) rotate(-1090deg) ;-webkit-transform: scale(1.2) rotate(-1090deg) ;-o-transform: scale(1.2) rotate(-1090deg) ;-ms-transform: scale(1.2) rotate(-1090deg) ;transform: scale(1.2) rotate(-1090deg) ;}
</style>

6.Lalu klik simpan
7.Setelah itu klik tambah gadget pilih entri populer
8.konfigurasi seperti gambar di bawah ini
atur tampilkan centang Thumbnail Gambar lalu tampilan entri 9 
Lalu klik simpan