Cara Membuat Headline News, Breaking News Atau Recent Post Scroll Di Blogger

Pasti kawan-kawan menginginkan adanya Headline news di bagian atas postingan blog. biasanya fitur ini sudah disediakan oleh beberapa template blog yang di unduh secara gratisan, tapi ada juga yang belum ada.


PB Blog ingin membagikan trik dan cara membuat nya.

Cara Membuat Headline News, Breaking News Atau Recent Post Scroll Di Blogger

Langsung saja kita mulai :

1. Login ke blogger
2. Masuk ke Template dan Edit HTML
3. Cari kode tag  ]]></b:skin> di dalam dengan menekan CRTL+F di keyboard, dan pastekan kode di bawah ini tepat di atas atau di bawah kode ]]></b:skin>

swtHeaderBar{/* SWT Breaking News Scrolling Bar START */
height:30px;
background:#192a3e;
width:98%;
margin:0 10px;
border: 1px solid #1ABC9C;
overflow: hidden;
}
.swtBreakingNews{
background: #1ABC9C;
float:left;
height:30px;
position:relative;
overflow:hidden;
width:66%;
padding-left:10px;
}
#swtEmailsub {
background: #1ABC9C;
width:30%;
float:right;
position:relative;
height:30px;
padding-right:10px;
}
form.swtEmailform {
background:#192a3e;
position:relative;
height:30px;
padding-top: 4px;
}
.emailText { background: url("http://img.superwebtricks.com/files/email-subscribe-button.png") no-repeat scroll 2px center #fff;
color: #444;
width: 45%;
padding-left: 18px;
}
.emailButton {cursor: pointer;
text-shadow: 1px 1px 0 rgba(0, 0, 0, .4);
font-weight: bold;
width: 35%; }
.swtBreakingNews marquee {
background: #ffffff;
height: 30px;
}
.swtBreakingNews marquee span {
font-size: 1.5em;
}
.swtBreakingNewsTitle {
background: #192a3e;
position:absolute;
float: left;
padding: 0 10px;
height: 32px;
line-height: 30px;
color: #FFF;
font-family: Georgia,serif;
text-transform: uppercase;
font-size: 1em;
margin-right: 10px;
/* SWT Breaking News Scrolling Bar START
Tutorial at http://www.banguet.blogspot.com/ */}
4. Sekarang cari lagi kode  </head> menggunakan CRTL+F di keyboard, dan pastekan kode di bawah ini tepat di atas atau di bawah tag </head> tadi
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://9e03e74125fb7ace004443ce27e5dcd1808a3961.googledrive.com/host/0B-tJ1weveGVDQWsyWjRNbHhtWFk/swtBreakingNewsScrollingBar.js"></script>
Jika di dalam template sobat, sudah terdapat kode berwarna merah, maka tidak perlu dimasukan lagi. cukup masukan kode yang ada di bawahnya.

5. Sekarang cari kode tag <header> , atau <div id='header'>, atau <div id='header-outer'> dan masukan kode di bawah ini tepat di atas atau di bawahnya.

    <div class='swtHeaderBar'>
    <div class='swtBreakingNews'><div class='swtBreakingNewsTitle'>Breaking News</div>
    <script type='text/javascript'>
    var ScrollPosts =12;
    var ScrollPostsWidth = 100;
    var ScrollPostsDelay = 111;
    var ScrollPostsDirection = "left";
    var ScrollPostsArrow = "&#9992;";
    </script>
    <script src='/feeds/posts/default?alt=json-in-script&amp;callback=swtRecentPostsScroller&amp;max-results=999' type='text/javascript'></script>
    </div>
    <div id='swtEmailsub'>
    <form action='http://feedburner.google.com/fb/a/palingbanguet' class='swtEmailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=Showeblogin&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input name='uri' type='hidden' value='SuperWebTricks'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input class='emailText' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' type='text' value='Enter your email...'/>
    <input class='emailButton' title='Register Yourself' type='submit' value='Signup'/>
    </form>
    </div>
    </div>
Note : Ganti Text berwarna merah dengan nama URL feed burner kamu.

6. Simpan Template dan lihat hasilnya.

Cara Menampilkan headline news dengan cara yang lebih sederhana melalui widget sidebar ada disini
 

Related Posts