Pada postingan kali ini saya akan membagikan tutorial Cara Membuat Breaking News Dengan Thumbnail Dengan Efek Jquery. Mungkin kita sering melihat di tv ketika kita buka acara berita nanti dibawahnya akan ada tulisan berjalan sebagai info di dalamnya. Namun kali ini saya akan membuat Breaking News bukan berjalan tapi bergerak kebawah atau Slideshow. Dan tentunya dilengkapi dengan Judul Posting, Gambar, Deskripsi Posting. Sebagai contoh kalian bisa lihat GIF di bawah.
1. Salin kode di bawah ini dan letakkan di atas ]]></b:skin> atau </style>
.rke{padding:4px 14px 0 0;}
#rp_plus_img{height:64px;overflow:hidden;padding-left:0;margin-top:0;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:64px;margin-bottom:14px;padding:1px;list-style:none;}
#rp_plus_img a{color:#3366ff;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;border:1px solid #eee;border-left:3px solid #3498db;font-size:14px;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #eee;width:60px;height:60px;}2. Setelah itu Simpan Template
3. Salin kode di bawah pastekan di atas kode </body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://googledrive.com/host/0B6EgpUw_IbdHeGZyekRDOFE1bjQ"></script>
<script type="text/javascript">
var speed = 400;
var pause = 4500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>4. Dan Save Template
5. Sekarang pergi ke Tata Letak, setelah itu pilih tempat dimana akan di tampilkan widget ini, setelah itu klik Tambahkan Gadget
6. Lalu pilih HTML/JavaScript
7. Pastekan kode di bawah ini ke box yang ke 2
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 7;
var numchars = 180;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>8. Klik Simpan
Keterangan :
var speed = : Lama waktu bergeraknya post berpindah ke post lainnya
var pause = : Lama waktu mau berpindah/pause
var numposts = : Jumlah postingan yang ada di Breaking News nantinya
var numchars = : Jumlah karaker deskripsi di postingan
Tada blognya udah ada Breaking News keren :3. mungkin bagi yang malas bisa pakai cara ini, cara yang paling simple :D
1. Pergi langsung ke Tata Letak
2. Dan pilih tempa akan di tampilkan script ini, kemudian klik Tambahkan Gadget
3. Pada bagian Box Pertama/Bagian judul gak usah di isi, langsung saja copy script di bawah ini dan pastekan di Box Kedua/Tempat Script.
<style type="text/css">
.rke{padding:4px 14px 0 0;}
#rp_plus_img{height:64px;overflow:hidden;padding-left:0;margin-top:0;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:64px;margin-bottom:14px;padding:1px;list-style:none;}
#rp_plus_img a{color:#3366ff;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;border:1px solid #eee;border-left:3px solid #3498db;font-size:14px;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #eee;width:60px;height:60px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://googledrive.com/host/0B6EgpUw_IbdHeGZyekRDOFE1bjQ"></script>
<script type="text/javascript">
var speed = 400;
var pause = 4500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 7;
var numchars = 180;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>4. Klik Simpan
Simple kan? ._. mungkin kalian ingin tampilkan Breaking News ini di atas Posting, kalian bisa Drag Scriptnya dan letakkan di atas Posting, seperti gambar di bawah.
Semoga bermanfaat....
