Bird

salju

cursor

header

http://aridhoprahasti.blogspot.com/
Blog Advertising

Slde

lintas me

Sabtu, 25 Januari 2014

Tips membuat tampilan slideshow posting update dan gambar pada blog yang keren

 


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

Comments
0 Comments

Tidak ada komentar:

Posting Komentar

Aridhoprahasti Education Blog