Widget CCTV yang cantik

Kali ini kita berkongsi tentang widget pula.
Lihat gambar atas,widget CCTV yang cantik untuk menghias blog.

Jika ingin memasangnya,hanya salin code di bawah,dan letak pada kotak HTML/javascript

<script language="JavaScript" src="https://sites.google.com/site/listblogtutorial/widget/listblogtop.js" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript"> cot("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu6LMY8bWhZOSUWsdsNMrX-t9wB36K7TPui6ZlIS1v270SlAZ4UCZI_pzpPnae79Ot3HXXA_aMHaVjXQIWbW6amOJ1pnUs4MNu0yrT4RJkmUdQF0C8q7Fyr4haNiA6cfzUikaXuEgf1bo/s1600/cctv.png")</script>

Untuk widgetnya bergerak-gerak,salin code yang ini.

<script language="JavaScript" src="https://sites.google.com/site/listblogtutorial/widget/listblogtop.js" type="text/javascript"> </script> <script language="JavaScript" type="text/javascript"> cot("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLShdHR_oljt2h4K2ueke8t43sBJ4YjRwUKlseKAVjxNBH1npVwx-rbkBWCQaFdHpmXDU1c-mOYH7i_4DeurzWUMPXJ0s5eqfpywb8NpIuo1vlXXhrGCBpAsqUwyV1nTXS55s3KM8uIE4/s1600/cctv.gif")</script>

Selamat berjaya.

READ MORE - Widget CCTV yang cantik

Cara buat facebook comment dengan mudah

Cara buat facebook comment di blogspot dengan mudah sekali dan tidak terlalu banyak langkah langkah yang dipraktekkan dalam edit template HTML
kenapa tutorial ini hanya untuk blogger/blogspot?

login blogger masing-masing
menu design-> klik edit HTMl ->tanda kotak kecil expand widget template.

silahkan copy kode dibawah ini

<b:if cond=”data:blog.pageType == &quot;item&quot;”> <div id=’fb-root’/>
<script src=’http://connect.facebook.net/en_US/all.js#xfbml=1&#8242;/>
<fb:comments expr:href=’data:post.url’ num_posts=’2&#8242; width=’500&#8242;/>
</b:if>

untuk memasang kode diatas ada dua cara yang boleh kita buat

cara yang pertama paste kod di atas tepat dibawah kode <data:post.body/>

cara yang ke dua silahkan cari kod <b:includable id=’status-message’> setelah jumpa ,diatas kod tersebut ada kod sebagai berikut </b:includable> nah silahkan paste kod di atas tepat diatas kod </b:includable>

kerana template blog masing-masing berbeza jadi silahkan sesuaikan dengan template yang di gunakan .kalau cara yang pertama tidak berhasil .silahkan buat cara yang ke dua pasti berhasil.

jangan lupa simpan template anda dan lihat hasilnya

READ MORE - Cara buat facebook comment dengan mudah

Back to Top atau kembali ke Atas dan ke Bawah

Membuat Back To Top sudah banyak ditulis oleh para blogger dan banyak cara di gunakan dan salah satunya menggunakan jQuery.

Back to top memudahkan kita atau para pengunjung blog untuk kembali ke halaman atas.


Cara membuatnya
1. Yang pertama buka Blogger >>Design >>Edit HTML
2. Langkah selanjutnya copy kod css dibawah ini dan letak tepat diatasnya kod ]]></b:skin>

#bawah {
background-color:#FFF;
border:1px solid #CCC;
position:fixed;
background:transparent url(http://img89.imageshack.us/img89/4998/arrowdown.png) no-repeat top right;
background-position:50% 50%;
width:20px;
height:20px;
bottom:10px;
opacity:0.7;
right:55px;
white-space:nowrap;
cursor:pointer;
-moz-border-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
padding:7px
}

#atas {
background-color:#FFF;
border:1px solid #CCC;
position:fixed;
background:transparent url(http://img600.imageshack.us/img600/8649/arrowup.png) no-repeat top right;
background-position:50% 50%;
width:20px;
height:20px;
bottom:10px;
opacity:0.7;
right:15px;
white-space:nowrap;
cursor:pointer;
-moz-border-radius:3px;
-webkit-border-top-left-radius:3px;
-webkit-border-top-right-radius:3px;
-khtml-border-top-left-radius:3px;
-khtml-border-top-right-radius:3px;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
padding:7px
}

3.Langkah selanjutnya copy kod javascript dibawah ini dan letak tepat diatasnya kode </body>

<div style="display:none;" class="atas" id="atas"></div>
<div style="display:none;" class="bawah" id="bawah"></div>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script text="text/javascript">
$(function() {
var $elem = $('#outer-wrapper');
$('#atas').fadeIn('slow');
$('#bawah').fadeIn('slow');
$('#bawah').click(
function (e) {$('html, body').animate({scrollTop: $elem.height()}, 800);});
$('#atas').click(
function (e) {$('html, body').animate({scrollTop: '0px'}, 800);});
});
</script>


4. Dan langkah terkahir klik simpan dan lihat hasilnya

READ MORE - Back to Top atau kembali ke Atas dan ke Bawah