Cirebon,tanggal 9 Mei 2018.
Kembali dengan saya di Blogger Trik, Kali ini saya akan meneruskan Pembahasan tentang Bagaimana Cara membuat dan memasang Breaking News dengan THUMBNAIL di Blogger. Berbeda dengan pembahasan pendahulunya pada pembuatan Breaking News tanpa Gambar kali ini saya akan berbagi Cara membuat dan memasang Breaking News dengan THUMBNAIL atau ada tambahan Gambar pada sisi Tulisan. Seperti contoh widget Breaking news dibawah ini.
Fungsi Breakng News pada Blog
Mengenal atap sirap kayu
Kayu Gelam | Mengenal kayu gelam atau kayu dolken
Apakah Baja Ringan itu bisa berkarat ?
JUAL BATA RINGAN DAN BAHAN BANGUNAN UJUNG ASPAL - BEKASI
What You Need to Know About Mesothelioma Attorney
HARGA BAJARINGAN TASO 0.75.100 PERBATANG TAHUN 2020
HARGA BAJARINGAN TASO PERBATANG TAHUN 2020
Memilih Plat / seng Talang air Hujan Terbaik
Apa itu Baja ringan TASO | Info
Bisakah Baja ringan Berkarat?
Mengenal dan memilih jenis-jenis kayu terbaik untuk Kusen Rumah # Kayu Merbau
Mengenal dan memilih jenis-jenis kayu terbaik untuk Kusen Rumah
PROSES pembuatan Mortar Bangunan - 2018
Pengertian perbedaan antara semen,Mortar dan #Beton ( Bag. 3 )
Pengertian perbedaan antara semen,Mortar dan Beton ( Bag. 2 )
Pengertian perbedaan antara semen,Mortar dan Beton (bag 1)
TATALOGAM LESTARI Top Brand Award 2018
CARA MENGHITUNG KEBUTUHAN BAUT GENTENG
CARA MENGHITUNG KEBUTUHAN RENG BAJARINGAN
CARA MENGHITUNG KEBUTUHAN GENTENG METAL PER METER
Harga Borongan Bangunan Baja ringan per Meter 2018
TUKANG BANGUNAN | PORTAL BAJARINGAN
Harga borongan bangunan pada pekerjaan Baja ringan 2018
mencari JASA TUKANG BAJARINGAN CIBINONG 2018
TALANG AIR MOBIL | Talang Spion Mobil Anti Air Hujan
Membuat dan memasang widget Breaking News pada Blog kita apakah pada Blogger atau pada Wordpress tujuanya adalah untuk menampilkan artikel - artikel baru yang kita miliki, sehingga pengunjung blog kita selalu ter up date. Pemasangan Widget Breaking News ini juga bertujuan untuk mempercantik tampilan Blog, Lihat saja setelah memasang widget Breaking news blog kita mirip seperti Tampilan News Berita di televisi.
Widget Breaking news ini juga bisa dimodifikasi tekhnik pemasanganya sehingga tidak ribet, seperti yang saya lakukan pada blog saya ini.
Cara memasang Widget Breaking News pada Blogger - Blogspot
Ok..mari kita mulai Cara membuat dan memasang Breaking News dengan THUMBNAIL di Blogger. 2018 dengan cara yang lebih simple dan Mudah di praktekan.
Berikut langkah-langkahnya :
1. Seperti biasa terlebih dahulu login ke Blogger, pilih blog > Klik Template, Edit HTML > Tambahkan kode di bawah ini tepat sebelum ]]></b:skin> atau </style>
/* CSS News Ticker */
.ticker-wrap{display:block;text-align:center;margin:0 20px 20px 20px;padding:2px;background:#fefefe;border:1px solid rgba(0,0,0,0.1);border-left:5px solid #3cc091}
.ticker-wrap>span{display:inline-block;background:#fefefe;padding:0;font:700 13px 'roboto',sans-serif}
.ticker-wrap>span>a{color:#222;text-decoration:none}
#ticker{height:100px;overflow:hidden;background:#fefefe;text-align:left}
#ticker ul{padding:0;margin:0;list-style:none}
#ticker ul li{height:90px;white-space:nowrap}
#ticker ul li img{float:left;width:80px;height:80px;margin:5px 7px 5px 5px}
#ticker ul li h3{margin:0;font:700 16px 'roboto',sans-serif}
#ticker ul li h3 a{color:#FF7F50;text-decoration:none;line-height:25px!important}
#ticker ul li .tickermeta{font:400 13px 'roboto',sans-serif;line-height:20px!important;color:#696969}
.ticker-wrap{display:block;text-align:center;margin:0 20px 20px 20px;padding:2px;background:#fefefe;border:1px solid rgba(0,0,0,0.1);border-left:5px solid #3cc091}
.ticker-wrap>span{display:inline-block;background:#fefefe;padding:0;font:700 13px 'roboto',sans-serif}
.ticker-wrap>span>a{color:#222;text-decoration:none}
#ticker{height:100px;overflow:hidden;background:#fefefe;text-align:left}
#ticker ul{padding:0;margin:0;list-style:none}
#ticker ul li{height:90px;white-space:nowrap}
#ticker ul li img{float:left;width:80px;height:80px;margin:5px 7px 5px 5px}
#ticker ul li h3{margin:0;font:700 16px 'roboto',sans-serif}
#ticker ul li h3 a{color:#FF7F50;text-decoration:none;line-height:25px!important}
#ticker ul li .tickermeta{font:400 13px 'roboto',sans-serif;line-height:20px!important;color:#696969}
Edit kembali sesuaikan dengan kondisi Blog kalian.
Area Edit saya tandai dengan Warna Biru.
2. Tambahkan kode berikut ini sebelum Tag penutup </body >
Kodenya sebagai berikut :
<script type='text/javascript'>
//<![CDATA[
// Breaking News ticker by https://halpentinguntukkita.blogspot.com
function getauthor(t){for(var e=0;e<t.length;e++)var i=t[e].name.$t;return i}function getmeta(t){var e=[];e[1]="Jan",e[2]="Feb",e[3]="Mar",e[4]="Apr",e[5]="May",e[6]="Jun",e[7]="Jul",e[8]="Aug",e[9]="Sep",e[10]="Oct",e[11]="Nov",e[12]="Dec";var i=t.substring(0,4),a=t.substring(5,7),n=t.substring(8,10),r=e[parseInt(a,10)]+" "+n+" "+i;return r}function arlinadesignTicker(t){var e=document.querySelector("#ticker"),i=t.feed.entry,a="<ul id='ticket-wrapper-inner'>";if(i){for(var n=0;n<i.length;n++){for(var r=i[n],s=0;s<r.link.length;s++)if("alternate"==r.link[s].rel){var l=r.link[s].href;break}try{var o='<img src="'+r.media$thumbnail.url+'"/>'}catch(t){var o=""}var u=r.title.$t,c=getauthor(r.author),d=getmeta(r.published.$t);a+="<li>"+o+'<h3><a href="'+l+'">'+u+'</a></h3><div class="tickermeta"><span>'+c+"</span> - <span>"+d+"</span></div></li>"}a+="</ul>",e.innerHTML=a}$("#ticker").vTicker()}!function(t){var e={speed:700,pause:4e3,showItems:1,mousePause:!0,height:0,animate:!0,margin:0,padding:0,startPaused:!1},i={moveUp:function(t,e){i.animate(t,e,"up")},moveDown:function(t,e){i.animate(t,e,"down")},animate:function(e,i,a){var n=e.itemHeight,r=e.options,s=e.element,l=s.children("ul"),o="up"===a?"li:first":"li:last";s.trigger("vticker.beforeTick");var u=l.children(o).clone(!0);if(0<r.height&&(n=l.children("li:first").height()),n+=r.margin+2*r.padding,"down"===a&&l.css("top","-"+n+"px").prepend(u),i&&i.animate){if(e.animating)return;e.animating=!0,l.animate("up"===a?{top:"-="+n+"px"}:{top:0},r.speed,function(){t(l).children(o).remove(),t(l).css("top","0px"),e.animating=!1,s.trigger("vticker.afterTick")})}else l.children(o).remove(),l.css("top","0px"),s.trigger("vticker.afterTick");"up"===a&&u.appendTo(l)},nextUsePause:function(){var e=t(this).data("state"),i=e.options;e.isPaused||2>e.itemCount||a.next.call(this,{animate:i.animate})},startInterval:function(){var e=t(this).data("state"),a=this;e.intervalId=setInterval(function(){i.nextUsePause.call(a)},e.options.pause)},stopInterval:function(){var e=t(this).data("state");e&&(e.intervalId&&clearInterval(e.intervalId),e.intervalId=void 0)},restartInterval:function(){i.stopInterval.call(this),i.startInterval.call(this)}},a={init:function(n){a.stop.call(this);var r=jQuery.extend({},e);n=t.extend(r,n);var r=t(this),s={itemCount:r.children("ul").children("li").length,itemHeight:0,itemMargin:0,element:r,animating:!1,options:n,isPaused:n.startPaused?!0:!1,pausedByCode:!1};t(this).data("state",s),r.css({overflow:"hidden",position:"relative"}).children("ul").css({position:"absolute",margin:0,padding:0}).children("li").css({margin:n.margin,padding:n.padding}),isNaN(n.height)||0===n.height?(r.children("ul").children("li").each(function(){var e=t(this);e.height()>s.itemHeight&&(s.itemHeight=e.height())}),r.children("ul").children("li").each(function(){t(this).height(s.itemHeight)}),r.height((s.itemHeight+(n.margin+2*n.padding))*n.showItems+n.margin)):r.height(n.height);var l=this;n.startPaused||i.startInterval.call(l),n.mousePause&&r.bind("mouseenter",function(){!0!==s.isPaused&&(s.pausedByCode=!0,i.stopInterval.call(l),a.pause.call(l,!0))}).bind("mouseleave",function(){(!0!==s.isPaused||s.pausedByCode)&&(s.pausedByCode=!1,a.pause.call(l,!1),i.startInterval.call(l))})},pause:function(e){var i=t(this).data("state");if(i){if(2>i.itemCount)return!1;i.isPaused=e,i=i.element,e?(t(this).addClass("paused"),i.trigger("vticker.pause")):(t(this).removeClass("paused"),i.trigger("vticker.resume"))}},next:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveUp(a,e)}},prev:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveDown(a,e)}},stop:function(){t(this).data("state")&&i.stopInterval.call(this)},remove:function(){var e=t(this).data("state");e&&(i.stopInterval.call(this),e=e.element,e.unbind(),e.remove())}};t.fn.vTicker=function(e){return a[e]?a[e].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof e&&e?void t.error("Method "+e+" does not exist on jQuery.vTicker"):a.init.apply(this,arguments)}}(jQuery),$(function(){var t=document.createElement("script");t.src="https://"+$(".ticker-wrap").data("domain")+"/feeds/posts/summary?alt=json&callback=arlinadesignTicker",t.type="text/javascript",document.getElementsByTagName("body")[0].appendChild(t)});
//]]>
</script>
//<![CDATA[
// Breaking News ticker by https://halpentinguntukkita.blogspot.com
function getauthor(t){for(var e=0;e<t.length;e++)var i=t[e].name.$t;return i}function getmeta(t){var e=[];e[1]="Jan",e[2]="Feb",e[3]="Mar",e[4]="Apr",e[5]="May",e[6]="Jun",e[7]="Jul",e[8]="Aug",e[9]="Sep",e[10]="Oct",e[11]="Nov",e[12]="Dec";var i=t.substring(0,4),a=t.substring(5,7),n=t.substring(8,10),r=e[parseInt(a,10)]+" "+n+" "+i;return r}function arlinadesignTicker(t){var e=document.querySelector("#ticker"),i=t.feed.entry,a="<ul id='ticket-wrapper-inner'>";if(i){for(var n=0;n<i.length;n++){for(var r=i[n],s=0;s<r.link.length;s++)if("alternate"==r.link[s].rel){var l=r.link[s].href;break}try{var o='<img src="'+r.media$thumbnail.url+'"/>'}catch(t){var o=""}var u=r.title.$t,c=getauthor(r.author),d=getmeta(r.published.$t);a+="<li>"+o+'<h3><a href="'+l+'">'+u+'</a></h3><div class="tickermeta"><span>'+c+"</span> - <span>"+d+"</span></div></li>"}a+="</ul>",e.innerHTML=a}$("#ticker").vTicker()}!function(t){var e={speed:700,pause:4e3,showItems:1,mousePause:!0,height:0,animate:!0,margin:0,padding:0,startPaused:!1},i={moveUp:function(t,e){i.animate(t,e,"up")},moveDown:function(t,e){i.animate(t,e,"down")},animate:function(e,i,a){var n=e.itemHeight,r=e.options,s=e.element,l=s.children("ul"),o="up"===a?"li:first":"li:last";s.trigger("vticker.beforeTick");var u=l.children(o).clone(!0);if(0<r.height&&(n=l.children("li:first").height()),n+=r.margin+2*r.padding,"down"===a&&l.css("top","-"+n+"px").prepend(u),i&&i.animate){if(e.animating)return;e.animating=!0,l.animate("up"===a?{top:"-="+n+"px"}:{top:0},r.speed,function(){t(l).children(o).remove(),t(l).css("top","0px"),e.animating=!1,s.trigger("vticker.afterTick")})}else l.children(o).remove(),l.css("top","0px"),s.trigger("vticker.afterTick");"up"===a&&u.appendTo(l)},nextUsePause:function(){var e=t(this).data("state"),i=e.options;e.isPaused||2>e.itemCount||a.next.call(this,{animate:i.animate})},startInterval:function(){var e=t(this).data("state"),a=this;e.intervalId=setInterval(function(){i.nextUsePause.call(a)},e.options.pause)},stopInterval:function(){var e=t(this).data("state");e&&(e.intervalId&&clearInterval(e.intervalId),e.intervalId=void 0)},restartInterval:function(){i.stopInterval.call(this),i.startInterval.call(this)}},a={init:function(n){a.stop.call(this);var r=jQuery.extend({},e);n=t.extend(r,n);var r=t(this),s={itemCount:r.children("ul").children("li").length,itemHeight:0,itemMargin:0,element:r,animating:!1,options:n,isPaused:n.startPaused?!0:!1,pausedByCode:!1};t(this).data("state",s),r.css({overflow:"hidden",position:"relative"}).children("ul").css({position:"absolute",margin:0,padding:0}).children("li").css({margin:n.margin,padding:n.padding}),isNaN(n.height)||0===n.height?(r.children("ul").children("li").each(function(){var e=t(this);e.height()>s.itemHeight&&(s.itemHeight=e.height())}),r.children("ul").children("li").each(function(){t(this).height(s.itemHeight)}),r.height((s.itemHeight+(n.margin+2*n.padding))*n.showItems+n.margin)):r.height(n.height);var l=this;n.startPaused||i.startInterval.call(l),n.mousePause&&r.bind("mouseenter",function(){!0!==s.isPaused&&(s.pausedByCode=!0,i.stopInterval.call(l),a.pause.call(l,!0))}).bind("mouseleave",function(){(!0!==s.isPaused||s.pausedByCode)&&(s.pausedByCode=!1,a.pause.call(l,!1),i.startInterval.call(l))})},pause:function(e){var i=t(this).data("state");if(i){if(2>i.itemCount)return!1;i.isPaused=e,i=i.element,e?(t(this).addClass("paused"),i.trigger("vticker.pause")):(t(this).removeClass("paused"),i.trigger("vticker.resume"))}},next:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveUp(a,e)}},prev:function(e){var a=t(this).data("state");if(a){if(a.animating||2>a.itemCount)return!1;i.restartInterval.call(this),i.moveDown(a,e)}},stop:function(){t(this).data("state")&&i.stopInterval.call(this)},remove:function(){var e=t(this).data("state");e&&(i.stopInterval.call(this),e=e.element,e.unbind(),e.remove())}};t.fn.vTicker=function(e){return a[e]?a[e].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof e&&e?void t.error("Method "+e+" does not exist on jQuery.vTicker"):a.init.apply(this,arguments)}}(jQuery),$(function(){var t=document.createElement("script");t.src="https://"+$(".ticker-wrap").data("domain")+"/feeds/posts/summary?alt=json&callback=arlinadesignTicker",t.type="text/javascript",document.getElementsByTagName("body")[0].appendChild(t)});
//]]>
</script>
3. Peletakan Widget pada Blog.
Pada Umumnya peletakan Widget Breaking News dengan THUMBNAIL adalah pada area Menu atas,atau diantara pembuka Tag <body > dan penutup Tag </body >. Namun saya lebih suka memasang widget Breaking News dengan THUMBNAIL ini dengan menggunakan fasilitas Tambah Gadget > Pilih HTML/javascript. jadi lebih leluasa untuk meletakan widget ini pada blog.
Pada Konten HTML/ JavaScript isikan Kode berikut :
 |
| Hanya contoh |
<div class='ticker-wrap' data-domain='URL Blog kalian'>
<div id='ticker'>
</div>
</div>
Setelah kode di isikan ke Konten area maka tinggal save dan atur posisi pada Blog.
Penempatanya terserah kalian, apakah di Menu atas, atau pada Widget samping. Kalian juga bisa meletakan pada Konten Blog hanya saja harus pada Halaman HTML seperti contoh pada halaman artikel ini.
Memasang atau menambah Widget Breaking News pada Blogger.
- Buka Dasbor> Posting> Tambah Baru
- Ketik nama judul di bidang judul (misalnya: Model Kue Baru)
- Masukkan paragraf Anda (misal: Lorem ipsum dana duduk amet, consectetur adipisicng elit. Nunc quic ante commodo,)
- Masuk ke Kategori> Buat Nama Kategori Anda (Misalnya: Sehat, Fashion, Makanan, Olahraga)
- Masuk ke Tag> Buat Nama Tag Anda (Misalnya: Kode, Cum, Toko, Model, Tautan, Tidur)
- Masuk & Set "Unggulan Gambar"
- Klik "Publikasikan"
- Buat Juga (4 atau 5) Tulisan Terbaru
- Masuk ke Penampilan> Widget
- Masuk & Klik "MagZen Pro: BERITA BREAKING WIDGET"
- Pilih "MagZen Sidebar"
- Klik "Tambah Widget"
- Masukkan "Judul" Anda (Misalnya: Breaking News)
- Masukkan "Tidak ada posting terbaru Anda untuk ditampilkan sebagai berita terbaru:" (Misalnya: 4)
- Klik "Simpan"
- Keluar & Klik kunjungi situs. Anda mengerti.
