Bagaimana Cara Buat Popular Post Widget Bergerak

Macamana cara nak buat Popular Post bergerak di sebelah bahagian sidebar kiri atau kanan blog saudara (ianya bergerak dari atas ke bawah) ia kelihatan lebih dinamik dan menarik, jom lihat bagaimana caranya:

Langkah 1. Login masuk akaun blogger,selepas tu masukDashboard > Layout > Add Gadget > Popular Posts seperti gambar di bawah :

Nota : ***Penting : Sila klik add Popular Posts terlebih dahulu seperti gambarajah di atas


Seterusnya :

Langkah 2.
Login masuk akaun blogger, selepas tu pilih
Dashboard > Layout > Add Gadget > HTML/Javascript ,
selepas tu copy & paste semua kod di bawah padaHTML/Javascript,


***Nota penting : Sila rujuk gambarajah di atas.

<style type="text/css" media="screen">

#PopularPosts1 {

overflow:hidden;

margin-top:5px;

padding:0px 0px;

height:400px;

}

#PopularPosts1 ul {

width:340px;

overflow:hidden;

list-style-type: none;

padding: 0px 0px;

margin:0px 0px;

}

#PopularPosts1 li {

width:340px;

padding: 5px 5px;

margin:0px 0px 5px 0px;

list-style-type:none;

float:none;

height:80px;

overflow: hidden;

background:#fff url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/post.jpg) repeat-x;

border:1px solid #ddd;

}

#PopularPosts1 li .item-title {

color:#A5A9AB;

font-size:1em;

margin-bottom:0.5em;

}

#PopularPosts1 li .item-title a {

text-decoration:none;

color:#4B545B;

font-size:11px;

height:18px;

overflow:hidden;

margin:0px 0px;

padding:0px 0px 2px 0px;

}

#PopularPosts1 li img {

float:left;

margin-right:5px;

background:#EFEFEF;

border:0;

}

#PopularPosts1 li .item-snippet {

overflow:hidden;

font-family:Tahoma,Arial,verdana, sans-serif;

font-size:10px;

color:#262B2F;

padding:0px 0px;

margin:0px 0px;

}

#PopularPosts1 .item-snippet a,

#PopularPosts1 .item-snippet a:visited {

color:#3E4548;

text-decoration: none;

}

#PopularPosts1 .spyWrapper {

height: 100%;

overflow: hidden;

position: relative;

}

#PopularPosts1 {

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

}

.tags span,

.tags a {

-webkit-border-radius: 8px;

-moz-border-radius: 8px;

}

a img {

border: 0;

}

-->

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" charset="utf-8">

$(function () {

$('.popular-posts ul').simpleSpy();

});

</script>

<script src="http://accordion-for-blogger.googlecode.com/svn/trunk/simplespy.js" type="text/javascript"></script>

Langkah 3
klik butang Save.
O.K dah selesai......sekarang saudara boleh preview blog untuk lihat hasilnya..... selamat mencuba.

Follow BB di Google+ sekiranya anda mendapati tutorial ini membantu....dan jangan lupa share dengan rakan blogger yang lain, selamat mencuba....

Bagaimana-Nak-Buat-Menu-Bar-Attractive

Bagaimana cara untuk membuat Menu Bar dibawah header blog tuan-tuan,ianya dibina menggunakan CSS dan BB namakan ia sebagai Attractive Css3 atau menu bar drop down menu, anda boleh rujuk disini. Menu bar ini simple dan kelihatan menarik dan sesuai dipadankan dengan Blogger (New Template Designer) yang berwajah baru oleh www.blogger.com

Berikut dibawah adalah langkah-langkah yang saya ingin kongsi dengan anda :


1. Log masuk ke akaun blogger,selepas tu klik dan scroll ke bawah drop down menu,

2. Selepas tu sila pilih " Template",

3. Sekarang pilih " EDIT HTML",

4. Kemudian klik butang " Proceed ",

5. Cari code html dengan menekan Ctrl+F ]]></b:skin>

6. Paste kod html di bawah sebelum tag ini ]]></b:skin>

***Sila abaikan bahagian ini sekiranya tak faham.....(Terus ke step 7-10 dan save)

/* The CSS Code for the menu starts here for belajarblogging.com */
#container1 {
width: 960px;
margin: 0 auto;}
.menu33{height:40px;border-right:1px solid rgba(255,255,255,0.3);float:left;}a{text-decoration:none;color:#FFFFFF;text-transform:uppercase;font-size:15px;font-weight:bold;}ul{margin:0;padding:10px 10px ;}
a:link {color:#ffffff;}
a:hover {color:#ffffff;text-decoration: none;}
a:visited {color: #FFFDFD;text-decoration: none;}
ul.menu33 li{list-style:none;float:left;height:40px;text-align:center;background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1)));background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);}
ul li a{display:block;padding:0 20px;border-left:1px solid rgba(255,255,255,0.1);border-right:1px solid rgba(0,0,0,0.1);text-align:center;line-height:40px;background:-webkit-gradient(linear,left top,left bottom,from(rgb(168,168,168)),to(rgb(69,69,69)));background:-moz-linear-gradient(top,rgb(168,168,168),rgb(69,69,69));-webkit-transition-property:background;-webkit-transition-duration:700ms;-moz-transition-property:background;-moz-transition-duration:700ms;}
ul li a:hover{background:transparent none;}
ul[rel=sam1] li a{background:#606060;}
ul[rel=sam1] li a:hover{background:transparent none;}
ul li.active a{background:-webkit-gradient(radial,50% 100%,10,50% 50%,90,from(rgba(31,169,244,1)),to(rgba(0,28,78,1)));background:-moz-radial-gradient(center 80px 45deg,circle cover,rgba(31,169,244,1) 0%,rgba(0,28,78,1) 100%);}

7. Pergi ke blogger dan klik "Layout",

8. Klik "Add Gadget" dan pilih "HTML/Javascript",

9. Copy & Paste semua kod dibawah ini :

<div id="container1">
<ul class="menu33" rel="sam1">
<li class="active"><a href="http://www.belajarblogging.com">Home</a></li>
<li><a href="http://www.belajarblogging.com">Tentang Kami</a></li>
<li><a href="http://www.belajarblogging.com">Perkhidmatan Kami</a></li>
<li><a href="http://www.belajarblogging.com">Pertanyaan</a></li>
<li><a href="http://www.belajarblogging.com">Produk Kami</a></li>
<li><a href="http://www.belajarblogging.com">Tips Jualan</a></li>
<li><a href="http://www.belajarblogging.com">Hubungi Kami</a></li>
</ul>
</div>

Ubah URL www.belajarblogging.com dengan link URL anda. Contohnya : www.niagaonline.com/

10. klik save.
    You are done...selesai.

Selamat Mencuba.......sekiranya anda mendapati tutorial widget ini berfungsi...sila share dengan rakan-rakan yang lain....jangan lupa komen ye!......klik di tabung BB untuk membantu BB terus relevan di alam siber untuk manfaat bersama.....terima kasih.