Simple Jquery Stikcy (Merque) menampilkan recent posts blogspot

By:
Dalam tutorial blogger ini, pendopo2.blogpspot.com akan memberikan sedikit script yang sangat sederhana, dan mudah digunakan di Blogspot, apalagi yang baru menggunakan bloggspot termasuk newbie nih saya author pendopo2.blogspot.com.


Tentunya lagi-lagi !!! banyak sekali mungkin sudah ribuan yang memberikan tutorial mengenai membuat sticky atau text berjalan (Marque), tetapi setelah browsing kemana-kemana akhirnya penulis mendapatkan script dari plugin wp (Hack WP) dimana juga teman-teman desaign blogger sudah ada yang menggunakan script ini untuk mempercantik tampilan blogspotnya, tentunya dong....tidak harus cantik tampilannya tetapi disupport juga sisi fungsinya, agar tidak sayang dengan beratnya loading saat di akses user lainya.

Sayang bukan !!! jika kita hanya menambilkan dilihat dari sisi bagusnya tetapi tidak melihat sisi fungsingya untuk apa ?. Tapi tentu teman teman lebih pandai dari saya sebagai author blog ini.

Sebelumnya Lihat contoh disini DEMO
 
Langsung saja kita akan masuk dalam pembahasan pembuatan Simple Sticky Untuk Blogspot, Terlebih dahulu tentunya masuk dalam account blogspot, masuk dalam themplate dan masuk dalam HTML untuk obrak-abrik jeroan themplate.

Untuk CSSnya :


#md-stickybar{background:#000000 url('http://3.bp.blogspot.com/-zQeUG7PU9Uw/TmkiptyZ1eI/AAAAAAAAE98/At4tRBC9HQc/s400/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;}

Untuk JavaScriptnya :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script style="" src="http://dl.dropbox.com/u/72998674/Blogger%20Kode/stickyposts/recensticky.js"></script>
<script src="http://dl.dropbox.com/u/72998674/Blogger%20Kode/stickyposts/sticky2.js"></script>

Untuk Div :

<div id='md-stickybar'>
<script>var nMaxPosts = 10;var nWidth = 95;var nScrollDelay = 175;var sDirection = "right";var sOpenLinkLocation = "N";var sBulletChar = ">>";</script><script style=""  src="http://pendopo2.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="http://1.bp.blogspot.com/-MSEzL6EtjrM/Tt-hrSkKVnI/AAAAAAAAFiQ/AGUGFpnSUHk/s400/cancel.png"/></a>
</div id='md-stickybar'>

Jadi Keseluruhan :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script style="" src="http://dl.dropbox.com/u/72998674/Blogger%20Kode/stickyposts/recensticky.js"></script>
<script src="http://dl.dropbox.com/u/72998674/Blogger%20Kode/stickyposts/sticky2.js"></script><style>#md-stickybar{background:#000000 url('http://3.bp.blogspot.com/-zQeUG7PU9Uw/TmkiptyZ1eI/AAAAAAAAE98/At4tRBC9HQc/s400/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 = "right";var sOpenLinkLocation = "N";var sBulletChar = ">>";</script><script style=""  src="http://pendopo2.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="http://1.bp.blogspot.com/-MSEzL6EtjrM/Tt-hrSkKVnI/AAAAAAAAFiQ/AGUGFpnSUHk/s400/cancel.png"/></a></div id='md-stickybar'>

Untuk yang langsung setting di widget dengan Pilihan HTML bisa langsung copas keseluruhan dan ganti alamat blog pendopo2.blogspot.com dengan alamat blog sendiri.

Untuk yang tidak langsung ke widget atau main di theme bisa satu satu
-letakan Di atas /skin untuk Css
-javascriptnya diatas head
-divnya bisa diletakan diatas /body

Selamat mencoba !!! sukses selalu ...

Location: Kramat Jati, Jakarta Capital Region, Indonesia [edit]

Pasang INTERNET FASNET PLUS TV KABEL FIRSTMEDIA
Pasang FIRSTMEDIA internet speed hingga 100mbps + CHannel TV HD hingga 50HD hub 087777313417 only SMS