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

Buat widget recent comments dengan ada gambar

Salam 1Malaysia.
Berikut adalah bagaimana anda boleh menambah widget recent comments ke blog  anda.Anda juga mungkin mahu untuk menambah Recent Posts dengan widget Thumbnails untuk blog anda.
Kali ini memaparkan Recent Posts  dengan adanya gambar pengomen.
Jadi kita boleh melihat siapa yang memberi komen di blog kita.

langkah-langkah:
1. Pergi ke Papan Pemuka Blogger anda> Layout> Page Element> Add Gadget> HTML / JavaScript
2. Copy dan paste kod di bawah:

<div align="center"><style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #000;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 5,
showAvatar = true,
avatarSize = 50,
roundAvatar = true,
characters = 90,
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="https://sites.google.com/site/listblogtutorial/widget/comment.js"></script>
<script type="text/javascript" src="http://Nama blog Anda.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script></div><div style="font-family: arial, sans-serif; font-size: 8px;" id="rcdr"><a href=http://senang-template.blogspot.com/>Get Widget</a> </div><noscript>Your browser does not support JavaScript!</noscript>

3.Dalam kod, cari baris ini:
... Src = "http://Nama blog Anda.blogspot.com/feeds/comments/default ...
 Dan gantikan alamat blog (ditunjukkan dalam warna biru)  anda.

4. Tambah tajuk. Simpan.
Selesai.

Bagaimana untuk menukar nombor komen
Widget ini ditetapkan untuk memaparkan 5 recent comments. Jika anda ingin menukarnya, hanya cari nombor 5 dalam kod dan menggantikannya dengan bilangan komen yang anda mahu paparkan. Saya cadangkan menetapkan untuk 5 hingga 8 komen.
numComments = 5,

Bagaimana untuk menukar bilangan aksara / hide petikan
Widget ini ditetapkan untuk memaparkan maksimum 90 aksara petikan komen untuk setiap komen. Jika anda ingin menukar nombor itu, hanya mencari nombor 90 dalam kod dan menggantikannya dengan bilangan aksara yang anda ingin dipaparkan.
characters = 90,
cadangan 50-100.

Jika anda ingin menyembunyikan petikan komen, hanya masukkan 0 (sifar). Ex. ... O_rc var = 0

Begitulah cara Buat widget recent comments dengan ada gambar
Semoga berjaya.

READ MORE - Buat widget recent comments dengan ada gambar

Cara buat Twitter Widget di blog

Twitter,salah satu rangkaian sosial yang banyak digunakan selain muka-buku(facebook).
Sekarang banyak blogger meletakan widget twitter di blog agar memudahkan pembaca nak follow kita sebagai rakan twwet atau mengikut blog kita melalui twitter sahaja.

Cara buat Twitter Widget di blog juga amat mudah,kepada yang belum tahu nak membuatnya,ikut langkah mudah di bawah ini.

Pertama anda seharusnya sudah mendaftar dengan twitter,jika belum daftar sekarang.
(saya angap anda sudah mempunyai akaun twitter)

1.Buka twitter anda dahulu,dan pilih Widgets.(https://twitter.com/about/resources/widgets).


2.Klik pada My Website dan pilih Profile Widget.

3.Pada bahagian Setting,dibawah USERNAME tulis nawa Twitter anda.

4.Pada Preferences,Pilih mengikut kesesuaian anda,Number of Tweet terpulang berapa banyak nak letak.

5.Appearance,tukar warna mengikut kesesuaian blog,atau warna kegemaran anda.

6.Bahagian Dimensions ubah size kelebaran mengikut kesesuaian blog anda atau pilih dan tanda pada auto width,dimana ia akan berubah secara auto mengikut kesesuaian template blog kita.

7.Klik Test Settings untuk Lihat preview twitter yang dibuat,jika berpuashati klik Finish & Grab Code,Salin code dan letak di blog mengikut kesesuaian.

Kalau nak senang klik je dan secara auto widget twitter sudah berada di blog kita.

Begitulah Cara buat Twitter Widget di blog.
Salam,dan selamat mencuba.

READ MORE - Cara buat Twitter Widget di blog