Cara Mudah membuat Breaking News Berjalan di Blogger

adscblog

Mungkin sebagian sobat yang berkunjung ke blog ini pernah melihat di beberapa situs yang sudah Populer memiliki yang unik di atas Header atau di bawah Header nya yang hanya Judul postingan nya saja yang tampil nya tanpa di sertai Gambar atau Thumbnail

Biasa nya di sana akan bertuliskan Breaking News atau Headline News ya seperti itulah kira kira,disana akan tertera Judul Postingan yang terbaru di posting ataupun salah satu Label yang di tetapkan oleh Pemilik situs tersebut yang harus muncul di Breaking News Tersebut

Dengan Menambahkan Breaking News atau Headline News di blog kita maka akan Terlihat Cantik dan juga akan terlihat lebih Professional lagi di lihat oleh para pengujung blog yang datang mencari Artikel yang di cari nya

Cara Penerapan Headline news tersebut tentu nya banyak cara nya apabila di Flat Form WOrdPress maka untuk Breaking News tersebut sudah ada Plugin yang di sediakan sehingga kita sebagai pemilik blog tidak perlu cape cape untuk otak atik html lagi

Cara Membuat Breaking News atau Headline News di Blogger

Namun Bagi yang memiliki Blog dari Blogger Untuk memiliki Breaking News atau Headline News tersebut tentu nya melakukan Cara manual dengan cara menanam Html dan Javascript di bagian template agar bisa menampilkan Breaking News Tersebut

Nah untuk itu jika sobat ingin memasang Breaking News tersebut di blog yang berflatform kan Blogger silahkan sobat mengikuti langkah-langkah pemasangan nya mengikuti langkah-langkah di bawah ini

• Seperti Biasa silahkan sobat masuk ke bagian akun Blogger
• setelah itu silahkan sobat Klik blog sobat kemudian Tema > Edit Html
• Setelah berada di edit HTML silahkan sobat masukkan kode CSS berikut

/* CSS Breaking News */

#breakingnews {

margin:15px 0 0 0;

height:42px;line-height:29px;

overflow:hidden;

background:#fff;

border:1px solid #e6e6e6;

}

#breakingnews .breakhead {

position:absolute;

background:none repeat scroll 0 0 #363b40;color:#fff;

display:block;

float:left;

font-family:'Roboto Condensed';

font-size:16px;font-weight:400;

text-transform:uppercase;padding:6.5px 22px;

}

#adbreakingnews li a {

font-family:'Open Sans';

font-weight:400;color:#666;

margin-top:10px;

transition:all 0.5s ease-in-out;

}

#adbreakingnews li a:hover {

color:#359bed;

}

#adbreakingnews {

float:left;

margin-left:75px;margin-top:6px;

}

#adbreakingnews ul,#adbreakingnews li{

list-style:none;margin:0;padding:0

}

/* CSS Homepage Responsive */

@media only screen and (max-width:768px){

.img-thumbnail {

margin:0 10px 0 0;}}

@media only screen and (max-width:640px){

#content-wrapper {padding:0;

}

h2.post-title, h1.post-title, h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {

font-size:18px;margin:20px 0;clear:both;padding:20px 0 0 0;

}

.post {padding:15px;

}

.post-body {

margin-bottom:10px;

}

.post-vinfo {

margin-left:0;}.img-thumbnail {

width:100%;height:auto;margin:0;

}

.img-thumbnail img {width:100%;height:auto;

}

#breakingnews {margin:20px 0 0 0;margin-right:0;

}

#breakingnews .breakhead {padding:6.5px 14px;

}

#adbreakingnews {margin-left:50px;

}

.post .label-info {

left:15px;top:15px;}}

@media only screen and (max-width:480px){

h2.post-title, h1.post-title, h2.post-title a, h1.post-title a, h2.post-title, h1.post-title {

font-size:16px;

}

.post-body, .comment-info {

display:none!important;visibility:hidden;width:0;height:0;

}#breakingnews 

{

display:none;}}

• Langkah selanjut nya silahkan anda letakan kode berikut sebelum kode </head>

<script type="text/javascript">
//<![CDATA[// Breaking News$(document).ready(function(){var e="URL BLOG ANDA",t=20;$.ajax({url:""+e+"/feeds/posts/default?alt=json-in-script&max-results="+t,type:"get",dataType:"jsonp",success:function(e){function t(){$("#adbreakingnews li:first").slideUp(function(){$(this).appendTo($("#adbreakingnews ul")).slideDown()})}var n,r,s="",a=e.feed.entry;if(void 0!==a){s="<ul>";for(var l=0;l<a.length;l++){for(var o=0;o<a[l].link.length;o++)if("alternate"==a[l].link[o].rel){n=a[l].link[o].href;break}r=a[l].title.$t,s+='
<li><a href="'+n+'" target="_blank">'+r+"</a></li>
"}s+="</ul>
",$("#adbreakingnews").html(s),setInterval(function(){t()},5e3)}else $("#adbreakingnews").html("<span>No result!</span>")},error:function(){$("#adbreakingnews").html("<strong>Error Loading Feed!</strong>")}})});//]]></script>

• Setelah itu silahkan sobat letakan kode HTML di bawah ini di atas header atau di bawah Header terserah sobat memasang nya dimana

<div id=’breakingnews’><span class=’breakhead’><i class=’fa fa-rss’></i></span>
<div id=’adbreakingnews’>Loading…</div></div>

• Kemudian Save Template

Agar Breaking News bisa maksimal tampil,Pastikan di Blog sobat sudah tertanam jQuery seperti ini

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

 Namun jika kode tersebut sudah terpasang maka tidak perlu di pasang lagi
Nah itulah Cara membuat atau memasang Breaking News atau Headline News di blog,selamat mencoba

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 19 April and have 2 komentar