Widget Post / Entry Terbaru ( animasi scrool )

Assalamualaikum / Salam Sejahtera , lama x mengupdate Tutorial , masa x mengizinkan . Ok , harini cikgu nak Ajar cara membuat Widget Po...


Assalamualaikum / Salam Sejahtera , lama x mengupdate Tutorial , masa x mengizinkan . Ok , harini cikgu nak Ajar cara membuat Widget Post / Entry terbaru versi animasi . sebenarnya code ni cikgu ambil dalam blog mkr-lab , cuma cikgu translate dalam bahasa2 yg mudah kita faham 

CONTOH WIDGET TERSEBUT :

live demo : Click here


1. Log In ke dashboard 

2. Tekan layout

3. Tekan Add a Gadget   

4. Masukkan Code di dibawah di dalam Petak Yg disediakan :


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js' type='text/javascript'></script>
<style type="text/css">
div.spy-outer {
  border:2px solid white;
  -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  box-shadow:0px 1px 3px rgba(0,0,0,0.4);
  margin:0px auto;
}
div.spy-outer h2 {
  margin:0px 0px;
  padding:5px 10px;
  background-color:#646464;
  background-image:-webkit-linear-gradient(top, #8B8B8B, #3D3D3D);
  background-image:-moz-linear-gradient(top, #8B8B8B, #3D3D3D);
  background-image:-ms-linear-gradient(top, #8B8B8B, #3D3D3D);
  background-image:-o-linear-gradient(top, #8B8B8B, #3D3D3D);
  background-image:linear-gradient(top, #8B8B8B, #3D3D3D);
  color:white;
  font:bold 12px Arial,Sans-Serif;
  text-transform:none;
  text-shadow:0px 1px 2px black;
}
ul.spy {
  margin:0px 0px;
  padding:0px 0px;
  font:normal 10px/12px Arial,Sans-Serif;
  color:#353535;
  overflow:hidden;
}
ul.spy li {
  list-style:none;
  text-align:left;
  margin:0px 0px;
  padding:5px 7px;
  background-color:#9E9E9E;
  background-image:-webkit-linear-gradient(top, #B1B1B1, #F7F7F7);
  background-image:-moz-linear-gradient(top, #B1B1B1, #F7F7F7);
  background-image:-ms-linear-gradient(top, #B1B1B1, #F7F7F7);
  background-image:-o-linear-gradient(top, #B1B1B1, #F7F7F7);
  background-image:linear-gradient(top, #B1B1B1, #F7F7F7);
  border-top:1px solid #4E4E4E;
  border-bottom:1px solid #FFFFFF;
  word-wrap:break-word;
  overflow:hidden;
}
ul.spy a {text-decoration:none;}
ul.spy li em {
  font-weight:bold;
  color:#0B5D94;
}
ul.spy a.header {
  font:bold 12px/14px 'Trebuchet MS',Arial,Sans-Serif;
  display:block;
  color:#C00000;
  text-shadow:0px 1px 0px rgba(0,0,0,0.2);
}
ul.spy a.header:hover {
  color:#0556CF;
  text-decoration:underline;
}
ul.spy li .summ {
  margin-top:5px;
  overflow:hidden;
}
ul.spy li .imgwrap, ul.spy li img {
  float:right;
  margin:0px 0px 2px 7px;
  width:72px;
  height:72px;
  border:4px solid #E6E6E6;
  background:#fff url('http://reader-download.googlecode.com/svn/trunk/images/loading-white.gif') no-repeat 50% 50%;
  padding:0px;
}
ul.spy li .imgwrap {
  -webkit-box-shadow:0px 0px 2px rgba(0,0,0,0.7);
  -moz-box-shadow:0px 0px 2px rgba(0,0,0,0.7);
  box-shadow:0px 0px 2px rgba(0,0,0,0.7);
}
ul.spy li img {
  border:none !important;
  float:none;
  margin:0px 0px;
  padding:0px 0px;
  display:none;
}
</style>
<script type='text/javascript'>
var spyTitle           = "Artikel Terbaru",
    numposts           = 7,
    numchars           = 127,
    komentar           = "Komentar",
    pBlank             = "http://2.bp.blogspot.com/-11FkySHGB5Y/TpZ6SSbsF2I/AAAAAAAAA94/zK10UaL7jgo/s1600/images.jpeg",
    modeID             = true,
    showSummaries      = true,
    openNewTab         = false,
    showPostDate       = true,
    showComment        = true,
    showThumbnails     = true,
    animatedRecentPost = true,
    limitspy           = 4,
    intervalspy        = 4000,
    tickspeed          = 1000;
</script>
<script type="text/javascript" src="https://ivyth.googlecode.com/svn/js/rp-spy-whatever-v1-dte.js"></script>
<script src="http://cikgujazlan.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"></script>


p/s : ganti http://cikgujazlan.blogspot.com/ dengan Url Blog anda 

5 . Tekan Save

 

6. Tamat , jangan lupa comment :)

COMMENTS

BLOGGER: 1
Loading...
Nama

Agama Alat Bantu Mengajar Bahan dan Alatan BMM3105 broadband Cikgu Jazlan Cover File doa Domain .my Fotografi IPGKTAA Event Koleksi Cerpen Lain - Lain LOGO IPG KPM IPGKTAA Nota Bahasa Melayu Nota IPG Panduan KKBI PENDIDIKAN SENI VISUAL PJK PRU13 Running man Santai SERVIS Sukatan BM THUN 1-6 Tutorial TUTORIAL BLOG Tutorial Box.com Tv Online Virus Widget Blog
false
ltr
item
CIKGU JAZLAN: Widget Post / Entry Terbaru ( animasi scrool )
Widget Post / Entry Terbaru ( animasi scrool )
http://2.bp.blogspot.com/-FFMUEMoWCu8/UbAyVWiI4II/AAAAAAAACxI/F8gvN4sj48s/s1600/Untitled.jpg
http://2.bp.blogspot.com/-FFMUEMoWCu8/UbAyVWiI4II/AAAAAAAACxI/F8gvN4sj48s/s72-c/Untitled.jpg
CIKGU JAZLAN
http://www.cikgujazlan.my/2013/06/widget-post-entry-terbaru-animasi-scrool.html
http://www.cikgujazlan.my/
http://www.cikgujazlan.my/
http://www.cikgujazlan.my/2013/06/widget-post-entry-terbaru-animasi-scrool.html
true
4504742246731490904
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please Like | Share to Unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy