Membuat Widget News Sendiri

Demo :




Cara membuatnya

Dari Dashboard >> Design >> Edit HTML.


Langkah pertama > Penempatan kode CSS
dibawah <b:skin><![CDATA[
........
diatas ]]></b:skin>

#pscroller1{
background:lightyellow;
color:black;
font-family:verdana;
width:95%;
height:150px;
border: 1px solid black;
margin:0 auto;
padding:5px;
}
#pscroller2{
background:black;
width:95%;
font-family:verdana;
height: 20px;
border: 1px solid black;
margin:0 auto;
padding: 3px;
}
#pscroller2 a{
text-decoration: none;
}
.someclass{}

Langkah kedua > Penempatan URL JavaScript
dibawah ]]></b:skin>
........
diatas </head>

<script type='text/javascript'>
//<![CDATA[

var pausecontent=new Array()
pausecontent[0]='<a href="http://nanoyulianto.blogspot.com/2011/01/panduan-blogger-pemula.html">Panduan Blogger</a><br />Panduan dasar-dasar tentang Blogger. Cara membuat blogspot, posting, settings, dan bagi anda yang keriting.'
pausecontent[1]='<a href="http://nanoyulianto.blogspot.com/2011/01/seo-di-blogger.html">SEO</a><br />Tutorial mengoptimalkan Blogspot di Mesin Pencarian (Search Engine), seperti Memasang Meta Tags Description dan Keyword yang dikhususkan untuk para robot.'
pausecontent[2]='<a href="http://nanoyulianto.blogspot.com/2011/01/free-template-blogger.html">Free Template Blogger</a><br />Download gratis template Blogspot karya Nano Yulianto.'
pausecontent[3]='<a href="http://nanoyulianto.blogspot.com/2011/01/tutorial-memasang-google-font.html">Google Font</a><br />Jenis huruf-huruf menarik yang dipersembahkan dari Google dan Tutorial memasangnya di Blogspot.'
pausecontent[4]='<a href="http://nanoyulianto.blogspot.com/2011/01/tutorial-kode.html">Tutorial Kode</a><br/>Tutorial dasar-dasar kode HTML, XHTML, dan CSS. Menyelesaikan tutorial ini, dengan mudah anda bisa merubah template anda sesuai dengan keinginan, atau menjadi para pembuat template Blogspot.'
pausecontent[5]='<a href="http://nanoyulianto.blogspot.com/2011/01/javascript-blogger.html">JavaScript Blogger</a><br />Mempercantik, menghias, atau memperindah tampilan Blogspot dengan JavaScript.'
pausecontent[6]='<a href="http://nanoyulianto.blogspot.com/2011/01/profile-blogger.html">Profile Blogger</a><br />Ini bertujuan agar mempererat tali silahturahmi para Blogger Indonesia. Untuk memicu semangat berkreasi terus dan terus.'
pausecontent[7]='<a href="http://nanoyulianto.blogspot.com/2011/02/update-status.html">Update Status</a><br />Hanya sekedar obrolan biasa dan gak jelas.'

var pausecontent2=new Array()
pausecontent2[0]='<a href="http://nanoyulianto.blogspot.com/2011/01/free-template-blogger.html">Template: Penambahan Fitur Baru pada Template N2y Sedikit Mirip</a>'
pausecontent2[1]='<a href="http://nanoyulianto.blogspot.com/2011/01/javascript-blogger.html">JavaScript: Kursor Gambar Sasaran</a>'
pausecontent2[2]='<a href="http://nanoyulianto.blogspot.com/2011/01/seo-di-blogger.html">SEO: Menyisipkan Meta Tags di Posting Blogger</a>'

//]]>
</script>

<script type='text/javascript' src='http://pagenano.googlecode.com/files/News%20Teks.js'/>

Langkah ketiga > Penempatan JavaScript di kode HTML
dibawah <body>
........
diatas </body>

<script type="text/javascript">
//Angka dibawah untuk pause
new pausescroller(pausecontent, "pscroller1", "someclass", 3000)
document.write("<br />")
new pausescroller(pausecontent2, "pscroller2", "someclass", 2000)

</script>



Credit : Dynamic Drive

Alhamdulillah

0 comments:


Posting Komentar


Creative Commons License
Membuat Widget News Sendiri by Nano Yulianto is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at http://nanoyulianto.blogspot.com/2011/03/membuat-widget-news-sendiri.html.
Permissions beyond the scope of this license may be available at http://nanoyulianto.blogspot.com/.