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.
Langsung saja kita mulai :
1. Login ke blogger
2. Masuk ke Template dan Edit HTML
3. Cari kode tag
5. Sekarang cari kode tag
6. Simpan Template dan lihat hasilnya.
Cara Menampilkan headline news dengan cara yang lebih sederhana melalui widget sidebar ada disini
PB Blog ingin membagikan trik dan cara membuat nya.
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 */4. Sekarang cari lagi kode
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/ */}
</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>Jika di dalam template sobat, sudah terdapat kode berwarna merah, maka tidak perlu dimasukan lagi. cukup masukan kode yang ada di bawahnya.
<script type="text/javascript" src="https://9e03e74125fb7ace004443ce27e5dcd1808a3961.googledrive.com/host/0B-tJ1weveGVDQWsyWjRNbHhtWFk/swtBreakingNewsScrollingBar.js"></script>
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'>Note : Ganti Text berwarna merah dengan nama URL feed burner kamu.
<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 = "✈";
</script>
<script src='/feeds/posts/default?alt=json-in-script&callback=swtRecentPostsScroller&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('http://feedburner.google.com/fb/a/mailverify?uri=Showeblogin', 'popupwindow', 'scrollbars=yes,width=550,height=520');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 == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...'/>
<input class='emailButton' title='Register Yourself' type='submit' value='Signup'/>
</form>
</div>
</div>
6. Simpan Template dan lihat hasilnya.
Cara Menampilkan headline news dengan cara yang lebih sederhana melalui widget sidebar ada disini