Collection of Free Software and Games Just For You, enjoy it thank's for Coming.

Nov 28, 2010

Tips membuat tampilan slide posting update dan gambar pada blog yang keren | haus issue | haus game

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

No comments:

Post a Comment