-->

Cara Membuat Headline News di Blog Keren - Cara Memasang Headline News Di Blog. Headline News yang akan skipzen bahas pada kesempatan kali ini merupakan Headline News yang akan menampilkan artikel terbaru atau postingan terbaru pada blog, fungsinya hampir mirip dengan Recent Post yaitu artikel terbaru pada sebuah blog, namun disini kita akan mencoba menampilkan dalam bentuk Headline News. Posisinya akan ditempatkan pada header blog atau dibawah header blog dengan judul postingan satu baris secara bergantian.  Tentunya dengan Membuat Headline News pada blog akan menambah nilai plus tersendiri, karena secara tidak langsung kita telah mempermudah pengunjung untuk mengetahui postingan terbaru sebuah blog tanpa harus menuju halaman home atau halaman awal terlebih dahulu. Dengan begitu postingan terbaru akan mudah dilihat oleh para pengunjung, dan seandainya pengunjung tertarik dengan judul postingan terbaru yang telah kita buat maka pengunjung akan mencoba untuk membaca postingan terbaru yang muncul pada Headline News yang sudah kita pasang pada blog.
Cara Membuat Headline News di Blog Keren - Nah kalau sahabat penasaran dengan Headline News yang akan sundaboy share, berikut gambar contoh Headline News tersebut :
Cara Membuat Headline News di Blog Keren
Bagaimana, apakan sahabat tertarik Untuk Membuat Headline News di Blog? kalau tertarik silahkan ikuti petunjuk dibawah ini :
1. Langkah awal tentunya sahabat harus login terlebih dahulu
2. Silahkan Pilih Template dan klick "Edit HTML"
3. Setelah itu sahabat harus mencari kode ]]></b:skin>
4. Kalau sudah ketemu silahkan copy kode dibawah ini dan pastekan tepat diatas kode ]]></b:skin>

.newspic {background:#252525 url(http://3.bp.blogspot.com/-zMXeFmgTWNo/Ud6wE3PxRBI/AAAAAAAACpw/jIkXxSqkCTg/s1600/hotnews.png) no-repeat top left;width:900px;margin:0 auto;padding:0 auto; height:24px;color:#fff;}.news {width: 900px;margin:0 auto;padding:0 auto;line-height: 1.2em;text-align:left;font-family:Arial;font-size:11px;color:#fff;overflow:hidden;clear:both;}.news a:link, .news a:visited{color:#000000;text-decoration:none;}.news a:hover {color:#ddd;text-decoration:underline;}

Keterangan :
width:900px : merupakan lebar dari Headline News (sesuaikan dengan template sahabat)

5. Selanjutnya silahkan cari lagi kode </head>
6. Copy kode dibawah ini dan letakan tepat diatas kode </head>

<script src='http://www.google.com/jsapi?key=ABQIAAAAUMsU2d40bO1-m8DeADFRexTdcQS31_Y0TkToW9tE1XWPEnv6YBSa1QfZaAr4GJ8-AZkWddpnW9Y0hA'/><script type='text/javascript'>//<![CDATA[var gfeedfetcher_loading_image="indicator.gif";google.load("feeds","1");function gfeedfetcher(c,a,b){this.linktarget=b||"";this.feedlabels=[];this.feedurls=[];this.feeds=[];this.feedsfetched=0;this.feedlimit=5;this.showoptions="";this.sortstring="date";document.write('<div id="'+c+'" class="'+a+'"></div>');this.feedcontainer=document.getElementById(c);this.itemcontainer="<li>"}gfeedfetcher.prototype.addFeed=function(b,a){this.feedlabels[this.feedlabels.length]=b;this.feedurls[this.feedurls.length]=a};gfeedfetcher.prototype.filterfeed=function(b,a){this.feedlimit=b;if(typeof a!="undefined"){this.sortstring=a}};gfeedfetcher.prototype.displayoptions=function(a){this.showoptions=a};gfeedfetcher.prototype.setentrycontainer=function(a){this.itemcontainer="<"+a.toLowerCase()+">"};gfeedfetcher.prototype.init=function(){this.feedsfetched=0;this.feeds=[];this.feedcontainer.innerHTML='<img src="'+gfeedfetcher_loading_image+'" /> Loading news...';var a=this;for(var b=0;b<this.feedurls.length;b++){var c=new google.feeds.Feed(this.feedurls[b]);var d=(this.feedlimit<=this.feedurls.length)?1:Math.floor(this.feedlimit/this.feedurls.length);if(this.feedlimit%this.feedurls.length>0&&this.feedlimit>this.feedurls.length&&b==this.feedurls.length-1){d+=(this.feedlimit%this.feedurls.length)}c.setNumEntries(d);c.load(function(e){return function(f){a._fetch_data_as_array(f,e)}}(this.feedlabels[b]))}};gfeedfetcher._formatdate=function(a,c){var d=new Date(a);var b=(c.indexOf("datetime")!=-1)?d.toLocaleString():(c.indexOf("date")!=-1)?d.toLocaleDateString():(c.indexOf("time")!=-1)?d.toLocaleTimeString():"";return"<span class='datefield'>"+b+"</span>"};gfeedfetcher._sortarray=function(a,b){var b=(b=="label")?"ddlabel":b;if(b=="title"||b=="ddlabel"){a.sort(function(e,d){var g=e[b].toLowerCase();var f=d[b].toLowerCase();return(g<f)?-1:(g>f)?1:0})}else{try{a.sort(function(e,d){return new Date(d.publishedDate)-new Date(e.publishedDate)})}catch(c){}}};gfeedfetcher.prototype._fetch_data_as_array=function(b,a){var d=(!b.error)?b.feed.entries:"";if(d==""){alert("Google Feed API Error: "+b.error.message)}for(var c=0;c<d.length;c++){b.feed.entries[c].ddlabel=a}this.feeds=this.feeds.concat(d);this._signaldownloadcomplete()};gfeedfetcher.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._displayresult(this.feeds)}};gfeedfetcher.prototype._displayresult=function(a){var e=(this.itemcontainer=="<li>")?"<ul>\n":"";gfeedfetcher._sortarray(a,this.sortstring);for(var c=0;c<a.length;c++){var d='<a href="'+a[c].link+'" target="'+this.linktarget+'" class="titlefield">'+a[c].title+"</a>";var b=/label/i.test(this.showoptions)?'<span class="labelfield">['+this.feeds[c].ddlabel+"]</span>":" ";var g=gfeedfetcher._formatdate(a[c].publishedDate,this.showoptions);var f=/description/i.test(this.showoptions)?"<br />"+a[c].content:/snippet/i.test(this.showoptions)?"<br />"+a[c].contentSnippet:"";e+=this.itemcontainer+d+" "+b+" "+g+"\n"+f+this.itemcontainer.replace("<","</")+"\n\n"}e+=(this.itemcontainer=="<li>")?"</ul>":"";this.feedcontainer.innerHTML=e};var gfeedfetcher_loading_image="indicator.gif";function gfeedrssticker(d,b,a,c){this.tickerid=d;this.delay=parseInt(a);this.mouseoverBol=0;this.itemsperpage=1;this.messagepointer=0;gfeedfetcher.call(this,d,b,c);this.itemcontainer="<div>";this.tickerdiv=document.getElementById(d)}gfeedrssticker.prototype=new gfeedfetcher;gfeedrssticker.prototype.constructor=gfeedrssticker;gfeedrssticker.prototype._displayresult=null;gfeedrssticker.prototype.entries_per_page=function(a){this.itemsperpage=a};gfeedrssticker.prototype._signaldownloadcomplete=function(){this.feedsfetched+=1;if(this.feedsfetched==this.feedurls.length){this._initscroller(this.feeds)}};gfeedrssticker.prototype._initscroller=function(a){var c=this;gfeedfetcher._sortarray(a,this.sortstring);this.itemsperpage=(this.itemsperpage>=a.length)?1:this.itemsperpage;var b=a.slice(this.messagepointer,this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(b,this.showoptions,this.itemcontainer,this.linktarget);this.tickerdiv.onmouseover=function(){c.mouseoverBol=1};this.tickerdiv.onmouseout=function(){c.mouseoverBol=0};this.messagepointer=this.itemsperpage;if(window.attachEvent){window.attachEvent("onunload",function(){c.tickerdiv.onmouseover=c.tickerdiv.onmouseout=null})}setTimeout(function(){c._rotatemessage()},this.delay)};function formatrssmessage(d,b,f,g){var c=(f=="<li>")?"<ul>\n":"";for(var e=0;e<d.length;e++){var h='<a href="'+d[e].link+'" target="'+g+'" class="titlefield">'+d[e].title+"</a>";var j=/label/i.test(b)?'<span class="labelfield">['+d[e].ddlabel+"]</span>":" ";var k=gfeedfetcher._formatdate(d[e].publishedDate,b);var a=/description/i.test(b)?"<br />"+d[e].content:/snippet/i.test(b)?"<br />"+d[e].contentSnippet:"";c+=f+h+" "+j+" "+k+"\n"+a+f.replace("<","</")+"\n\n"}c+=(f=="<li>")?"</ul>\n":"";return c}gfeedrssticker.prototype._rotatemessage=function(){var b=this;if(this.mouseoverBol==1){setTimeout(function(){b._rotatemessage()},100)}else{var a=this.feeds.slice(this.messagepointer,this.messagepointer+this.itemsperpage);this.tickerdiv.innerHTML=formatrssmessage(a,this.showoptions,this.itemcontainer,this.linktarget);this.messagepointer=(this.messagepointer+this.itemsperpage>this.feeds.length-1)?0:this.messagepointer+this.itemsperpage;setTimeout(function(){b._rotatemessage()},this.delay)}};//]]></script><style type='text/css'>.titlefield{ /*CSS for RSS title link in general*/text-decoration: none;}.labelfield{ /*CSS for label field in general*/color:#aaa;font-size: 100%;}.datefield{ /*CSS for date field in general*/color:#aaa;font:normal 14px Arial;text-transform:none;}#example1{ /*Demo 1 main container*/width: 780px;height: 14px;border: 0px solid #aaa;padding: 0px;font:bold 16px Arial;text-transform:none;text-align:left;background-color:transparent;}code{ /*CSS for insructions*/color: #fff;}#example1 a:link, #example1 a:visited {color:#f2f2f2;text-decoration:none;}#example1 a:hover {color:#C8D3F2;text-decoration:none;}</style>

7. Tahap akhir kita akan memanggil script Headline News supaya bisa muncul diblog, untuk menampilkan Headline News di blog terdapat dua cara , Yaitu :

Cara Pertama :
Silahkan cari kode <div id='header'> atau sahabat bisa mencari kode yang lain sesuai dengan keinginan sahabat untuk menempatkan Headline News pada blog sahabat. Jadi terserah sahabat mau diletakan dimana Headline News tersebut. setelah ketemu kode tersebut silahkan copy kode dibawah ini lalu pastekan tepat diatas kode diatas.

<div class='newspic'><div style='float:left;width:900px;padding:1px 0 6px 130px; position:relative; overflow:hidden;'><script type='text/javascript'>var cssfeed=new gfeedrssticker(&quot;example1&quot;, &quot;example1class&quot;, 4000, &quot;_new&quot;)cssfeed.addFeed(&quot;Creating Website&quot;, &quot;http://www.skipzen.blogspot.com/feeds/posts/default&quot;) //Specify &quot;label&quot; plus URL to RSS feedcssfeed.displayoptions(&quot;date&quot;) //show the specified additional fieldscssfeed.setentrycontainer(&quot;div&quot;) //Wrap each entry with a DIV tagcssfeed.filterfeed(9, &quot;date&quot;) //Show 9 entries, sort by datecssfeed.entries_per_page(1)cssfeed.init()</script></div><div style='clear:both;'/></div>

Keterangan :
width:900px = merupakan lebar dari Headline News (sesuaikan dengan tempolate milik sahabat)
9 = Merupakan jumlah postingan yang ingin ditampilkan
http://www.skipzen.blogspot.com = Silahkan ganti dengan URL sahabat sendiri

Cara Kedua :
Sahabat bisa memasukan kode diatas kedalam Widget, caranya :
1. Pilih Tata Letak
2. Selanjutnya silahkan tambahkan widget baru
3. Pilih HTML/Javascript
4. Pastekan kode diatas tadi kedalam Widget
5. Simpan template dan lihatlah hasilnya.

Cara Membuat Headline News di Blog Keren - mungkin hanya itu saja yang dapat kami share pada kesempatan kali ini. kalau sahabat mengerti dengan kode CSS silahkan sahabat bisa memodifikasi Headline News sesuai dengan tampilan yang sahabat inginkan. sekian dan terimakasih.. happy Blogging.

Cara Membuat Tombol Back To Top di Blog Dengan Efek Lengkap

Cara Membuat Tombol Back To Top di Blog Dengan Efek Lengkap - Kali ini saya akan mencoba memberikan tutorial Cara Membuat Tombol Back To Top di Blog Dengan Efek Lengkap, Tombol Back To Top ini berguna untuk mempercepat kembali ke halaman atas pada sebuah halaman website hanya dengan satu klick tanpa menggunakan scroll.
Terlebih lagi kalau postingan atau isi blog sahabat sangat panjang kebawah, maka setelah pengunjung membaca dan melihat isi postingan atau halaman blog sampai kebawah tentunya akan menscroll kembali keatas dan ini dirasa sedikit mengganggu kenyamanan bagi pengunjung, nah dengan adanya Tombol Back To Top pengunjung tidak perlu lagi menscroll untuk kembali keatas, hanya dengan sekali klick maka pengunjung sudah ada pada bagian paling atas halaman.
Nah apabila sahabat tertarik untuk membuatnya, berikut langkah langkah Cara Membuat Tombol Back To Top di Blog Dengan Efek Lengkap:
1. Masuk ke Blogger
2. Kemudian pilih Tata Letak
3. Tambahkan widget baru atau "Add Gadget"
4. Pilih HTML/Javasript
5. Copy kode dibawah ini dan pastekan kedalam widget

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Scroll/Back to Top"><img src="http://2.bp.blogspot.com/-q3o-98KRP3k/T4KSXarq9oI/AAAAAAAAAWc/NDkuJXBkPo8/s1600/top1.png" /></a> 
6.Simpan dan lihatlah hasilnya
Demikian tutorial kali ini tentang Cara Membuat Tombol Back To Top di Blog Dengan Efek Lengkap, semoga bermanfaat. untuk saran dan kritiknya silahkan poskan pada kotak komentar. terimakasih

Cara Membuat Space Iklan Dengan Ukuran Otomatis Keren Dan Menarik 

Cara Membuat Space Iklan Dengan Ukuran Otomatis Keren Dan Menarik  - Space Iklan merupakan salah satu tempat untuk menempelkan sebuah iklan advertiser pada halaman blog, dimana space iklan tersebut bermacam macam jenisnya, ada space iklan yang berbentuk tulisan, dan ada juga space iklan bentuk banner dengan gambar. Apabila sahabat mempunyai sebuah situs dengan jumlah pengunjung yang banyak dan telah ber PR tinggi maka sahabat sudah bisa mencuri hati para pengiklan atau avertiser untuk memasang iklan pada situs milik sahabat dengan Cara Membuat Space Iklan Dengan Ukuran Otomatis Keren Dan Menarik.

Cara Membuat Space Iklan Dengan Ukuran Otomatis Keren Dan Menarik  ini sahabat bisa menempelkan space iklan advertiser pada blog tanpa memasukan kode tinggi dan lebar dari ukuran iklan tersebut, jadi sahabat tinggal memasukan banner iklan dan ukuran banner tersebut akan langsung menyesuaikan dengan ukuran widget situs sahabat.
Nah sekarang apabila sahabat tertarik untuk Membuat Space Iklan Dengan Ukuran Otomatis silahkan sahabat lakukan langkah langkah dibawah ini :

1. Login ke Blogger
2. Pilih Rancangan
3. Edit HTML
4. Setelah itu cari kode ]]></b:skin>
5. Copy kode dibawah ini dan letakan tepat diatas kode ]]></b:skin>

#ads {margin:0px;padding:0px;text-align:center}
#ads  img {margin:2px 2px;text-align:center;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-box-shadow: 1px 2px 1px #ccc;-moz-box-shadow: 1px 2px 1px #ccc;box-shadow: 1px 2px 1px #ccc;}
#ads img:hover {-moz-opacity: 0.7;opacity: 0.7;filter:alpha(opacity=70);}

6. Selanjutnya silahkan sahabat simpan template
7. Langkah berikutnya sahabat buka Tata Letak
8. Lalu buatlah widget iklan pada sidebar dangan cara klick "Add Gadget"
9. Pilih HTML/Javascript
10. Copy kode dibawah ini lalu masukan kedalam widget tadi
<div id="ads">
<a href="url iklan kesatu" target="_blank" title="judul iklan"><img alt="judul gambar" border="0" src="url gambar" /></a>
<a href="url iklan kedua" target="_blank" title="judul iklan"><img alt="judul gambar" border="0" src="url gambar" /></a>
<a href="url iklan ketiga" target="_blank" title="judul iklan"><img alt="judul gambar" border="0" src="url gambar" /></a>
</div>
Keterangan :
url iklan kesatu = Masukan link url iklan
judul iklan = Judul iklan advertiser
judul gambar = alt Gambar
url gambar = Alamat Url Gambar iklan

11. Save template dan lihatlah hasilnya
Apabila sahabat belum mempunyai Advertiser (pengiklan) maka sahabat bisa memasukan url ke situs sahabat dan untuk gambar, sahabat bisa membuatnya dengan adobe photoshop dengan ukuran 125x125, 300x250, dan lain sebagainya. sahabat jangan hawatir dengan ukuran iklan karena untuk ukuran secara otomatis akan didesuaikan.
Berikut contoh space iklan yang sudah skipzen buat, kalau sahabat belum punya gambarnya sahabat bisa memakai gambar yang sudah skipzen buat dibawah ini :
Space Iklan Dengan Ukuran Otomatis
http://3.bp.blogspot.com/-fjDZQH7l6ow/T_7-on2rchI/AAAAAAAABLY/1GI175xDDJg/s1600/space1.jpg

space iklan
http://1.bp.blogspot.com/-DFas0IukO2g/T_7_K444gHI/AAAAAAAABLg/gQe2ou3mngc/s1600/space2.jpg
space iklan
http://1.bp.blogspot.com/-lEdoCj9KfWs/T_8GJ-NO4AI/AAAAAAAABL4/js6G_B7OPnw/s1600/SPACE3.png

space iklan
http://4.bp.blogspot.com/-pw2oI_NfR1M/T_8GguFRYyI/AAAAAAAABMA/GVkSgARu7Lo/s1600/SPACE4.png

Nah itulah Cara Membuat Space Iklan Dengan Ukuran Otomatis yang dapat skipzen share, mudah mudahan bermanfaat, happy blogging