Menggulir Otomatis Widget Posting Terbaru Untuk Blogger / Blogspot
Jika Anda memiliki banyak posting di blog, atau jika Anda ingin menunjukkan kepada semua orang daftar buku favorit Anda, tetapi memiliki sedikit ruang di widget bilah sisi, ini akan sangat membantu Anda. Posting ini menjelaskan cara menambahkan gulir terbaru (marquee) posting terbaru Widget di blog-nya yang terlihat bagus di blog blogspot Anda. Ini mirip dengan tampilan posting terbaru di sidebar Anda, tetapi ini akan memiliki tenda di widget ini. Sekarang jika Anda ingin menampilkan blog Anda dengan cara ini, baik di bagian atas atau bawah blog Anda, maka Anda dapat menggunakan widget baru ini:
Cara Memasang Gulir Otomatis Widget Posting Terakhir.
Menambahkan Widget Ke Blogger.
Pergi ke Blogger >> Layout >> Tambah Gadget >> Pilih Gadget HTML / JavaScript.
Salin kode berikut dan rekatkan di dalam widget HTML / JavaScript.
<script type = 'text / javascript'>
var jnWidth = "100";
var jnScrollAmount = "10";
var jnScrollDelay = "50";
var jnDirection = "left";
var jntargetlink = "yes";
var jnnumPosts = "10";
var jnBulletchar = ">>>";
var jnimagebullet = "yes";
var jnimgurl = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3FdDha8pKBI5C2JIZmP6a49Gs7w1c6juglNlms9gml8ZdLrpBMvWglBo4s9FOyzuFGKEq9QaajlrXqRtXry06C5joAo6u_je7cNvZwEPstowCVkPzvDQUikHIoexpKuipRPkl_z9qhyHH/s1600/arrowe.gif";
var jnfontsize = "16";
var jnbgcolor = "FFFFFF";
var jnlinkcolor = "FF0000";
var jnlinkhovercolor = "3366CC";
</script> <a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"> <img src = "https://bitly.com/24workpng1" alt = "Tips dan Trik Blogger" border = "0" style = "position: fixed; bottom: 10%; right: 0%; top: 0px;" /> </a> <a href="http://24work.blogspot.com/" target="_blank" title="Tips Dan Trik Terbaru"> <img src = "https://bitly.com/24workpng1 "alt =" Kiat Dan Trik Terbaru "border =" 0 "style =" posisi: fixed; bawah: 10%; kanan: 0%; " /> </a> <a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tricks"> <img src = "https://bitly.com/24workpng1" alt = "Trik Blogger" border = "0" style = "posisi: tetap; bawah: 10%; kiri: 0%;"
/> </a> <jenis script = 'teks / javascript' src = 'http: //24work-new.googlecode.com/svn/trunk/24work-blogspot/scrolling-recent/scrolling-recent-v3-ycode. js '> </script>
<script type = 'text / javascript' src = " http://bdlab.blogspot.com / feeds / posts / default? alt = json-in-script & callback = jnAdvRecentPostsScrollerv3 & max-results = 10"> </script>
var jnWidth = "100";
var jnScrollAmount = "10";
var jnScrollDelay = "50";
var jnDirection = "left";
var jntargetlink = "yes";
var jnnumPosts = "10";
var jnBulletchar = ">>>";
var jnimagebullet = "yes";
var jnimgurl = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3FdDha8pKBI5C2JIZmP6a49Gs7w1c6juglNlms9gml8ZdLrpBMvWglBo4s9FOyzuFGKEq9QaajlrXqRtXry06C5joAo6u_je7cNvZwEPstowCVkPzvDQUikHIoexpKuipRPkl_z9qhyHH/s1600/arrowe.gif";
var jnfontsize = "16";
var jnbgcolor = "FFFFFF";
var jnlinkcolor = "FF0000";
var jnlinkhovercolor = "3366CC";
</script> <a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"> <img src = "https://bitly.com/24workpng1" alt = "Tips dan Trik Blogger" border = "0" style = "position: fixed; bottom: 10%; right: 0%; top: 0px;" /> </a> <a href="http://24work.blogspot.com/" target="_blank" title="Tips Dan Trik Terbaru"> <img src = "https://bitly.com/24workpng1 "alt =" Kiat Dan Trik Terbaru "border =" 0 "style =" posisi: fixed; bawah: 10%; kanan: 0%; " /> </a> <a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tricks"> <img src = "https://bitly.com/24workpng1" alt = "Trik Blogger" border = "0" style = "posisi: tetap; bawah: 10%; kiri: 0%;"
/> </a> <jenis script = 'teks / javascript' src = 'http: //24work-new.googlecode.com/svn/trunk/24work-blogspot/scrolling-recent/scrolling-recent-v3-ycode. js '> </script>
<script type = 'text / javascript' src = " http://bdlab.blogspot.com / feeds / posts / default? alt = json-in-script & callback = jnAdvRecentPostsScrollerv3 & max-results = 10"> </script>
Sekarang Ganti http://bdlab.blogspot.com dengan Url blog Anda.
Dan sekarang klik Simpan
Catatan: - Pilih sesuai Bullet Gambar atau Icon yang memiliki transparan Latar Belakang dan kecil di Ukuran
ScrollAmount: | ( 0 = Tidak Ada Gulir ) |
ScrollDelay: | ( 0 = MaxScrollSpeed ) |
Anda hanya dapat memodifikasi kode dengan warna merah (variabel) sesuai dengan kebutuhan Anda, misalnya. dalam hal " var w2bScrollDelay ", turunkan jumlahnya, semakin tinggi kecepatannya.
Bagaimana Cara Memasang Widget Ini Di 'Blogger'?
Pengguliran otomatis Widget posting terbaru akan memberikan gulir judul posting dengan tautan
Widget ini memiliki Efek MARQUEE otomatis yang akan menghasilkan judul bergulir
<script type = 'text / javascript'>
var nMaxPosts = 10;
var nLebar = 100;
var nScrollDelay = 175;
var sDirection = "left";
var sOpenLinkLocation = "N";
var sBulletChar = ">>";
</script> <a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"> <img src = "https://bitly.com/24workpng1" alt = "Tips dan Trik Blogger" border = "0" style = "position: fixed; bottom: 10%; right: 0%; top: 0px;" /> </a> <a href="http://24work.blogspot.com/" target="_blank" title="Tips Dan Trik Terbaru"> <img src = "https://bitly.com/24workpng1 "alt =" Kiat Dan Trik Terbaru "border =" 0 "style =" posisi: fixed; bawah: 10%; kanan: 0%; " /> </a> <a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tricks"> <img src = "https://bitly.com/24workpng1" alt = "Trik Blogger" border = " 0 "style =" posisi: diperbaiki; bawah: 10%; kiri: 0%; "/> </a> <script type = 'text / javascript' src = 'http: //24work-new.googlecode.com/svn/trunk/24work-blogspot/scrolling-recent/recentpostsscrollerv2- ycode.js '> </script>
<script type = "text / javascript" src = " http://bdlab.blogspot.com/ feeds / posts / default? alt = json-in-script & amp; callback = RecentPostsScrollerv2 & amp; hasil maksimal = 10"> </ script >
var nMaxPosts = 10;
var nLebar = 100;
var nScrollDelay = 175;
var sDirection = "left";
var sOpenLinkLocation = "N";
var sBulletChar = ">>";
</script> <a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tips and Tricks"> <img src = "https://bitly.com/24workpng1" alt = "Tips dan Trik Blogger" border = "0" style = "position: fixed; bottom: 10%; right: 0%; top: 0px;" /> </a> <a href="http://24work.blogspot.com/" target="_blank" title="Tips Dan Trik Terbaru"> <img src = "https://bitly.com/24workpng1 "alt =" Kiat Dan Trik Terbaru "border =" 0 "style =" posisi: fixed; bawah: 10%; kanan: 0%; " /> </a> <a href="http://24work.blogspot.com/" target="_blank" title="Blogger Tricks"> <img src = "https://bitly.com/24workpng1" alt = "Trik Blogger" border = " 0 "style =" posisi: diperbaiki; bawah: 10%; kiri: 0%; "/> </a> <script type = 'text / javascript' src = 'http: //24work-new.googlecode.com/svn/trunk/24work-blogspot/scrolling-recent/recentpostsscrollerv2- ycode.js '> </script>
<script type = "text / javascript" src = " http://bdlab.blogspot.com/ feeds / posts / default? alt = json-in-script & amp; callback = RecentPostsScrollerv2 & amp; hasil maksimal = 10"> </ script >
Sekarang Ganti http://bdlab.blogspot.com dengan Url blog Anda.
Dan sekarang klik Simpan
Cara Menambahkan Widget Ini:
1. Kustomisasi Bellow form dan Klik tombol Generate .
2. Dan Klik tombol Tambahkan ke Blogger untuk menambahkan widget ini ke blog Anda.
>> Tata Letak >> Tambah Gadget >> Pilih Gadget HTML / JavaScript
Tambahkan bar pemberitahuan tenda ke blogger
1. Buka Blogger
2. Masuk ke dasbor Blogger Anda
2. Pilih opsi Tata Letak dan pilih Tambahkan opsi gadget .
3. Pilih HTML / JavaScript Gadget
5. Dalam widget HTML / JavaScript tempel kode berikut dan simpan.
<style>
# wcnot-cont
{
top: 0px;
kiri: 0px;
z-index: 9999999;
posisi: tetap;
lebar: 100%;
latar belakang: # 222222;
warna: #ffffff;
font: georgia 16px;
box-shadow: 2px 2px 5px # 444444;
-moz-box-shadow: 2px 2px 5px # 444444;
-web-kit-box-shadow: 2px 2px 5px # 444444;
-goog-ms-box-shadow: 2px 2px 5px # 444444;
}
# wc-movtext
{
text-align: center;
padding: 8px;
font-family: Verdana, "Times New Roman", Georgia, Serif;
ukuran font: 12px;
warna: #ffffff;
}
# wc-movtext a
{
color: #ffffff;
teks-dekorasi: tidak ada;
font: georgia 16px;
}
# wc-movtext a: hover
{
color: yellow;
teks-dekorasi: tidak ada;
}
</style>
<div id = 'wcnot-cont'>
<div id = "wc-movtext">
<marquee behaviour = 'alternate' direction = "left"
onmouseover = "this.stop ();"
onmouseout = "this.start ();">
<p>
<a href=" http://bit.ly/wmV0kq "target="_blank"> <b> Cara mengubah kursor mouse di blog blogger menjadi kursor animasi < / b> </a>
| <a href=" http://bit.ly/x4d7ln "target="_blank"> <b> Navigasi Halaman Bernomor Untuk Blogger Script Baru </b> </a>
| <a href = " http://bit.ly/vGLd4R"target =" _ blank "> <b> Posting Terbaru animasi untuk Thumbnail - Simple Spy </b> </a>
| <a href=" http://bit.ly/xqQlgS" target="_blank"> <b> 17+ Slider Konten Unggulan untuk Blogger Menggunakan jQuery </b> </a>
</p>
</marquee>
</div>
<div>
# wcnot-cont
{
top: 0px;
kiri: 0px;
z-index: 9999999;
posisi: tetap;
lebar: 100%;
latar belakang: # 222222;
warna: #ffffff;
font: georgia 16px;
box-shadow: 2px 2px 5px # 444444;
-moz-box-shadow: 2px 2px 5px # 444444;
-web-kit-box-shadow: 2px 2px 5px # 444444;
-goog-ms-box-shadow: 2px 2px 5px # 444444;
}
# wc-movtext
{
text-align: center;
padding: 8px;
font-family: Verdana, "Times New Roman", Georgia, Serif;
ukuran font: 12px;
warna: #ffffff;
}
# wc-movtext a
{
color: #ffffff;
teks-dekorasi: tidak ada;
font: georgia 16px;
}
# wc-movtext a: hover
{
color: yellow;
teks-dekorasi: tidak ada;
}
</style>
<div id = 'wcnot-cont'>
<div id = "wc-movtext">
<marquee behaviour = 'alternate' direction = "left"
onmouseover = "this.stop ();"
onmouseout = "this.start ();">
<p>
<a href=" http://bit.ly/wmV0kq "target="_blank"> <b> Cara mengubah kursor mouse di blog blogger menjadi kursor animasi < / b> </a>
| <a href=" http://bit.ly/x4d7ln "target="_blank"> <b> Navigasi Halaman Bernomor Untuk Blogger Script Baru </b> </a>
| <a href = " http://bit.ly/vGLd4R"target =" _ blank "> <b> Posting Terbaru animasi untuk Thumbnail - Simple Spy </b> </a>
| <a href=" http://bit.ly/xqQlgS" target="_blank"> <b> 17+ Slider Konten Unggulan untuk Blogger Menggunakan jQuery </b> </a>
</p>
</marquee>
</div>
<div>
Catatan: Dalam kode berikut ganti kode warna hijau dengan judul posting Anda dan kode warna merahdengan tautan ke posting ini.
Banyak terima kasih kepada Harish untuk membuat kode ini dan saya baru saja menguji dan memodifikasi untuk bekerja pada blogger
EmoticonEmoticon