Cara Membuat Widget Recent Comments

Sumber http://helplogger.blogspot.com/2012/03/recent-comments-widget-for-blogger.html

Tata Letak > Add a Gadget > HTML/Javascripts> Contents

Copy Paste kode berikut

<script style=text/javascript src="http://helplogger.googlecode.com/svn/trunk/recent comments widget.js"></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://bloganda.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><span id=rcw-cr><a href=http://helplogger.blogspot.com/2012/03/recent-comments-widget-for-blogger.html>Recent Comments Widget</a></span><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} </style>

Ganti  bloganda.blogspot.com dengan alamat blog anda

Ganti angka 5 pada  a_rc=5 dengan jumlah komentar yang anda inginkan

Ganti  m_rc=false dengan  m_rc=true jika anda ingin menambahkan tanggal komentar

Ganti  n_rc=true dengan n_rc=false jika anda ingin menyembunyikan judul

Ganti  angka 100 pada o_rc=100 dengan jumlah huruf paling banyak komentar yang ditampilkan

Rivado Shido

Cara Membuat Preloader Simpel Di Blog

Sumber http://niklausgerber.com/blog/preloadme-a-lightweight-jquery-website-preloader/

Preloader kali ini berfungsi untuk memunculkan animasi sementara blog sedang di load. Elemen lain akan disembunyikan selama proses loading dan akan dimunculkan dengan efek fade dengan mulus.



Tertarik?



Proses Instalasi, komentar bila anda gagal

Plugin JQuery

1. Buka Template > Edit HTML


2. Klik salah 1 kode, pencet CTRL + F


3. Cari </body>


4. Diatas kode tersebut tambahkan kode 

<!-- jQuery Plugin -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<!-- Preloader -->
<script type='text/javascript'>
//<![CDATA[
$(window).load(function() { // makes sure the whole site is loaded
$('#status').fadeOut(); // will first fade out the loading animation
$('#preloader').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
$('body').delay(350).css({'overflow':'visible'});
})
//]]>
</script>

CSS / Skin

1. Cari ]]></b:skin> 


2. Diatas kode tersebut tambahkan kode

/* Preloader */
#preloader {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff; /* change if the mask should have another color then white */
    z-index:99; /* makes sure it stays on top */
}
#status {
    width:200px; /* lebar gambar, kalau yang dibawah nya tinggi gambar */
    height:200px;
    position:fixed;
    left:50%; /* centers the loading animation horizontally one the screen */
    top:50%; /* centers the loading animation vertically one the screen */
    background-image:url(http://sierrafire.cr.usgs.gov/images/loading.gif); /* alamat gambar */
    background-repeat:no-repeat;
    background-position:center;
    background-size: 200px;
    margin:-100px 0 0 -100px; /* is width and height divided by two */
}

HTML

1. Cari kode <body>


2. Dibawah kode tersebut tambahkan kode berikut

<!-- Preloader -->
<div id='preloader'>
    <div id='status'/>
</div>

Cara Menyembunyikan Suatu Widget Dalam Halaman Tertentu

Selamat malam semua. Kali ini saya akan memberikan tutorial tentang cara menyembunyikan suatu widget dari suatu halaman. Hal ini sungguh berguna jika anda ingin membuat halaman berisi film (mungkin supaya fokus, hehehe). 

Berikut caranya:

1. Cari tag elemen widget tersebut .Baca disini

2. Dasbor > Template > Edit HTML

3. Tuju ke kode widget anda

Kode akan terlihat seperti ini

Atau anggap saja seperti ini sebagai contoh

01	<b:widget id='WidgetID' locked='false' title='Widget title'type='HTML'>

02	<b:includable id='main'>

03	<b:if cond='data:title != &quot;&quot;'>

04	<h2 class='title'><data:title/></h2>

05

</b:if>

06	<div class='widget-content'>

07	<data:content/>

08

</div>

09	<b:include name='quickedit'/>

10	</b:includable>

11	</b:widget>

4. Masukkan kode kondisi dibawah <b:includable id='main'>. Masukkan kode

<b:else/>
<style type='text/css'>
#WidgetID {display:none;}/*to hide empty widget box*/
</style>
</b:if>

diatas </b:includable>

Maka akan seperti ini contohnya

<b:widget id='WidgetID' locked='false' title='Widget title' type='HTML'>
<b:includable id='main'>
MASUKAN KODE KONDISI
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
<b:else/>
<style type='text/css'>
#WidgetID {display:none;}/*to hide empty widget box*/
</style>
</b:if>
</b:includable>
</b:widget>

5. Simpan / Save template

Komentar jika ada kesalahan

Disunting dari http://www.bloggersentral.com/2010/02/display-widget-on-specific-pages-in.html