Tuesday, March 22, 2011
Pada kesempatan kali ini mencoba menghadirkan satu tips untuk membuat "headline Slide". Cukup sederhana sekali,
Oke, jika anda tertarik untuk membuatnya, silakan ikuti langkah-langkahnya dibawah ini :
1. Login terlebih dahulu ke Blogger
2. Masuk ke bagian Tata Letak/Layout
3. Pilih Tab menu Edit HTML
4. Centang tulisan Expand Widget Template
5. Cari code ini ]]></b:skin> (untuk memudahkan pencarian tekan Ctrl+F)
6. Copy Paste code CSS dibawah ini sebelum code diatas :
| #slider { background:#101010; height: 153px; text-align:center; overflow: hidden; position: relative; margin: -5px 0px; } #mover { width: 600; position:absolute; overflow:hidden; } .slide { padding: 15px 0px; width: 1000px; float: left; position: relative; height:130px; } .slide h2 { font-family:Georgia, Helvetica, Sans-Serif; font-size: 18px; font-weight:bold; text-align:left; color: #FFFF00; padding:0px 0px 0px 0px; margin:0px 0px; width:440px; overflow:hidden; } .slide h2 a:link, .slide h2 a:visited { color:#E1771E; background-color: transparent; } .slide h2 a:hover { color: #ff0000; background-color: transparent; } span.slmet { color: #ee0909; font-size: 10px; font-family:Tahoma, georgia, Helvetica, Sans-Serif; line-height: 20px; width: 200px; padding:0px 0px 0px 30px; margin:0px 0px; text-transform:uppercase; } .slide p { color: #FFFFFF; font-size: 12px; text-align:left; font-family: Georgia, Helvetica, Sans-Serif; line-height: 20px; width: 440px; padding:0px 0px 0px 0px; margin:0px 0px; } .slide img { position: absolute; top: 20px; left: 225px; background:; padding:10px 10px; } #slider-stopper { position: absolute; font-family: Georgia, Helvetica, Sans-Serif; top: 1000px; right: -125px; color: #FF0000; padding: 3px 8px; font-size: 14px; font-weight:bold; text-transform: uppercase; z-index: 1000; } |
7. Langkah selanjutnya cari code ini </head>
8. Copy Paste code berikut sebelum code </head>
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/jquery-1.2.6.min.js' type='text/javascript'/>
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/slider.js' type='text/javascript'/>
<script type='text/javascript'><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover"; }
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), ""); }}}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
<script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/slider.js' type='text/javascript'/>
<script type='text/javascript'><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("catmenu").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover"; }
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\b"), ""); }}}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>
9. Simpan hasil kerja anda
10. Langkah selanjutnya klik tab menu Elemen Laman
11. Buat klik Add a Gadget, pilih HTML/Javascript
12. Paste code dibawah ini didalamnya
<!-- Casing -->
<div id="casing">
<!-- Slider -->
<div id="slider">
<div id="mover">
<div class="slide">
<h2><a href="http://serba-seru.blogspot.com/">JUDUL SLIDE 1</a></h2>
<p>isi artikel slide 1</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://serba-seru.blogspot.com/">JUDUL SLIDE 2</a></h2>
<p>isi artikel slide 2</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://serba-seru.blogspot.com/">JUDUL SLIDE 3</a></h2>
<p>isi artikel slide 3</p>
<img src=""/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
<div class="clear"/></div></div>
<div id="casing">
<!-- Slider -->
<div id="slider">
<div id="mover">
<div class="slide">
<h2><a href="http://serba-seru.blogspot.com/">JUDUL SLIDE 1</a></h2>
<p>isi artikel slide 1</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://serba-seru.blogspot.com/">JUDUL SLIDE 2</a></h2>
<p>isi artikel slide 2</p>
<img src=""/>
</div>
<div class="slide">
<h2><a href="http://serba-seru.blogspot.com/">JUDUL SLIDE 3</a></h2>
<p>isi artikel slide 3</p>
<img src=""/>
</div>
</div>
<!-- /Mover -->
</div>
<!-- /Slider -->
<div class="clear"/></div></div>
13. Ganti tulisan http://serba-seru.blogspot.com dengan link posting blog anda.
14. Ganti tulisan berwarna merah dengan Judul Slide anda
15. Ganti tulisan berwarna biru dengan isi artikel slide anda
NB: Untuk mengubah warna background dan lain-lainnya bisa anda edit pada code CSS diatas
Selamat berkreasi
Semoga bermanfaat
(Sumber : http://forantum.blogspot.com)
