Halo sobat blogger semua kali ini saya akan share pada sob-sob semua tentang cara membuat tampilan slide blog yang keren yah biar dilihat agak professional gitu blog kita.. oke langsung kesasaran ga perlu panjang lebar lagi.
Login ke blogger > Pilih Tata Letak dan tambahkan gadjet
Klik HTML JavaScript > Masukan kode dibawah ini:
<div id=”TickerBC3905386″ style=”width:220px;height:150px
;overflow: auto;overflow-x: hidden;overflow-y: hidden;border-style: solid;border-width: 0;border-color: #CC6699;background-color: #FFCCFF;” class=”bc_ticker”>
<table width=”100%”>
<tr>
<td width=”10″ style=”color: #0000CC; font-size: 10pt; font-family: Arial,Helvetica;”><a id=”TickerPrevBC3905386″ style=”text-decoration: none; color: #0000CC;” href=”javascript: ;” class=”bc_tickerarrow” onclick=”PrevTickerBC3905386();”>«</a></td>
<td id=”TickerContentBC3905386″ style=”vertical-align: top;background-” class=”bc_tickercontent”>
<a id=”TickerLinkBC3905386″ style=”text-decoration: none;” href=”javascript: ;” class=”bc_tickerlink” target=”_top”><b><span id=”TickerTitleBC3905386″ style=” ” class=”bc_tickertitle”></span></b></a> <span id=”TickerSummaryBC3905386″ style=” ” class=”bc_tickersummary”></span>
</td>
<td width=”10″ style=”color: #0000CC; font-size: 10pt; font-family: Arial,Helvetica;”><a id=”TickerNextBC3905386″ style=”text-decoration: none; color: #0000CC;” href=”javascript: ;” class=”bc_tickerarrow” onclick=”NextTickerBC3905386();”>»</a></td>
</tr>
</table>
<!– DO NOT CHANGE OR REMOVE THE FOLLOWING NOSCRIPT SECTION OR THE BLASTCASTA NEWS TICKER WILL NOT FUNCTION PROPERLY. –>
<noscript><a href=”http://www.blastcasta.com/” title=”Add News and Content to Websites, Customize: Combine and Filter Feeds”><img border=”0″ src=”http://www.blastcasta.com/images/tp.gif”/></a></noscript>
</div>
<script id=”scr3905386″ type=”text/javascript”></script>
<script type=”text/javascript”>
setTimeout(‘document.getElementById(\’scr3905386\’).src = (document.location.protocol == \’https:\’ ? \’https\’ : \’http\’) + \’://www.blastcasta.com/ticker-js.aspx?feedurl=http%3A//www.HAUSGAME.blogspot.com/feeds/posts/default&changedelay=4&maxitems=-1&showsummary=1&objectid=3905386\”, 500);
</script>
</div>
Gantikan tulisan berwarna merah dengan URL blog sobat. Sesuaikan ukuran kotak Slide Posting dengan ukuran ruang pada blog anda > Jadi deh
Atau cara yang kedua ini yah agak lebih rumit sih, tapi hasilya lebih keren kok..cek>
Login ke Blog anda > tataletak > Edit HTML
Cari dan letakan kode berikut sebelum kode ]]></b:skin>
#slider {
background:url(URL BACKGROUND SLIDE SOBAT);
height: 254px;
overflow: hidden;
position: relative;
margin: 5px 0;
}
#mover {
width: auto;
position:absolute;
overflow:hidden;
}
.slide {
padding: 20px 0px;
width: 1000px;
float: left;
position: relative;
height:200px;
}
.slide h2 {
font-family:georgia, Helvetica, Sans-Serif;
font-size: 24px;
color: #ac0000;
padding:0px 0px 0px 30px;
margin:0px 0px;
width:500px;
overflow:hidden;
}
.slide h2 a:link, .slide h2 a:visited {
color:#fff;
background-color: transparent;
}
.slide h2 a:hover {
color: #ddd;
background-color: transparent;
}
span.slmet {
color: #ee0909;
font-size: 10px;
font-family:Tahoma, georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
text-transform:uppercase;
}
.slide p {
color: #999;
font-size: 12px;
font-family:georgia, Helvetica, Sans-Serif;
line-height: 20px;
width: 500px;
padding:0px 0px 0px 30px;
margin:0px 0px;
}
.slide img {
position: absolute;
top: 20px;
left: 577px;
background:#fff;
padding:10px 10px;
}
#slider-stopper {
position: absolute;
font-family: Georgia, Helvetica, Sans-Serif;
top: 113px;
right: 65px;
color: #AC0000;
padding: 3px 8px;
font-size: 14px;
text-transform: uppercase;
z-index: 1000;
}
Berikutnya letakan kode berikut sebelum kode </head>
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/jquery-1.2.6.js' type='text/javascript'/>
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/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>
Cari kode berikut
<div id='header-wrapper'> ..........
</b:section>
Letakan kode ini setelah kode di atas. Atau anda juga bisa menambahkannya melalui add a gadget
<!-- Casing -->
<div id='casing'>
<!-- Slider -->
<div id='slider'>
<div id='mover'>
<div class='slide'> <span class='slmet'>
Posted by ADMIN HAUS</span> <h2><a href='
http://hausgame.blogspot.com' target='_blank'>
HAUSGAME the house of games </a></h2> <p>
hanya disini tempatnya download PC mini games terbaru 100% free and full fersion ...</p> <img src="
http://hausgame.site11.com/police.jpg />
</div> <div class='slide'> <span class='slmet'>
Posted by ADMIN HAUS </span> <h2><a href='
http:// hausgame.blogspot.com'>
HAUSGAME the house of games </a></h2> <p>
hanya disini tempatnya download PC mini games terbaru 100% free and full fersion kedua… </p> <img src="
http://hausgame.site11.com/motocross.jpg/>
</div> <div class='slide'> <span class='slmet'>
Posted by ADMIN HAUS </span> <h2><a href='
http:// hausgame.blogspot.com'>
HAUSGAME the house of games </a></h2> <p>
hanya disini tempatnya download PC mini games terbaru 100% free and full fersion ketiga...</p> <img src="
http://hausgame.site11.com/avenue.jpg /> </div> </div>
<!-- /Mover --> </div>
<!-- /Slider --> </div>
<div class='clear'/></div>
previewnya lihat di bagian atas posting saya.
Udah? Tinggal ganti aja tu tulisan yang berwarna-warni dengan blog dan link-link sobat
Semoga bermanfaat
