Tempatnya Download Aplikasi full Apk, Mod, Pro, Premium untuk semua Sahabat Android.

Tuesday, September 26, 2017

Tutorial Membuat Sticky Bar Dengan Auto Scrolling Recent Post

Screenshot Sticky Bar Dengan Auto Scrolling Recent Post

Tutorial:

1. Login ke Dashboard blogger.
2. Klik butang " More Options (rujuk no 1 pada GAMBAR 1) " dan klik " Layout (rujuk no 2 pada GAMBAR 1) ".

GAMBAR 1

3. Pada halaman Layout, klik " Add a Gadget (rujuk no 3 pada GAMBAR 2) " pada mana-mana bahagian yang anda nak untuk letakkan kod javascript tu nanti.

GAMBAR 2

4. Cari HTML/Javascript dan klik butang tambah (rujuk no 4 pada GAMBAR 3).

GAMBAR 3

5.  Copy (CTRL+C) kod javascript dibawah:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script style="" src="
https://dl.dropboxusercontent.com/s/5h3nlqc11g8gmlr/recensticky.js"></script><script src="https://dl.dropboxusercontent.com/s/yv9or2p2bukvqr1/sticky2.js"></script><style>#md-stickybar{background:#000000 url('https://dl.dropboxusercontent.com/s/nx2j3swt83423bj/stickybar.png') repeat-x;width:100%;margin:0 auto;text-align:center;padding:0px 0;bottom:0px;color:#F40045;border-bottom:2px solid #000;/*box-shadow*/-webkit-box-shadow:#666666 0px 1px 3px;-moz-box-shadow:#666666 0px 1px 3px;box-shadow:#666666 0px 1px 3px;z-index:999;display:none;height:28px;position:absolute;line-height:1.85em;vertical-align:baseline;letter-spacing:1px;}#md-stickybar a{text-decoration:none;color:#FFFFFF;font-size:13px;font-weight:bold;font-family:arial,"Helvetica",sans-serif;line-height:24px;}#md-stickybar a:hover{text-decoration:underline;}#md-stickybar p{margin:0;list-style:none;}#md-stickybar img{vertical-align:middle;margin-right:6px;}#mdclose{padding:0px;float:right;cursor:hand;cursor:pointer;color:#ddd!important;}</style><div id='md-stickybar'><script>var nMaxPosts = 10;var nWidth = 95;var nScrollDelay = 175;var sDirection = "left";var sOpenLinkLocation = "N";var sBulletChar = ">>";</script><script style=""  src="http://faiz-tutorial.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2&amp;max-results=10 " ></script> <a href="#" id="mdclose"  onclick="return false;"><img src="
https://dl.dropboxusercontent.com/s/k49dycbrwkhguf6/cancel.png"/></a></div id='md-stickybar'>
Keterangan:
  • http://faiz-tutorial.blogspot.com  --  Gantikan dengan URL BLOG anda.
  • bottom:0px;  --  Gantikan bottom ke top kalau ingin paparkan di bahagian atas.
6. Paste (CTRL+V) pada ruang Content (rujuk no 5 pada GAMBAR 4)

GAMBAR 4
7. Seterusnya klik " Save (rujuk no 6 pada GAMBAR 4 ) " dan lihat la hasilnya..
Sumber https://faiz-tutorial.blogspot.co.id/

Share on Facebook
Share on Twitter
Share on Google+

Related : Tutorial Membuat Sticky Bar Dengan Auto Scrolling Recent Post