Follow this Blog

Search Box

Membuat Slide News dengan Lof JSliderNews 1.0 - Jquery 1.3

Klik Gambar untuk melihat Demo....

Slide News istilah kerennya mungkin seperti itu ^_^ , Untuk slide dari Loft JsliderNews khusunya ada beberapa macam. dan yang akan kita kupas untuk kesempatan kali ini adalah slidenews seperti gambar diatas atau Slide dari kanan ke kiri dengan Gambar kecil sebagai Navigatornya

Jika anda mempunyai website atau Blog yang berisi Berita, Pc Games, Movie, dll. Munkin akan terlihat lebih Profesional jika anda menerapkan Slidenews seperti diatas di Website/Blog anda.


Untuk memasangnya sedikit membutuhkan kesabaran dan kejelian, tapi bukan berarti sulit..
Ok langsung saja Ikuti Langkah demi langkah dibawah ini


  • Masuk ke Blogger Dulu dengan ID anda
  • Kemudian Design ► Edit HTML
  • Backup dulu template anda jikalau nanti ada kesalahan Download Full Template  
  • Next Cari kode Seperti dibawah ini
]]></b:skin>
  • Hapus kode di atas  Kemudian Ganti dengan kode dibawah ini
/* CSS Document */
.lof-slidecontent, .lof-slidecontent a {color:#FFF;}
.lof-slidecontent a.readmore{color:#58B1EA;font-size:95%;}
.lof-slidecontent{position:relative;overflow:hidden;border:#F4F4F4 solid 1px;}
.lof-slidecontent .preload{height:100%;width:100%;position:absolute;top:0;left:0;z-index:100000;text-align:center;background:#FFF}
.lof-slidecontent .preload div{height:100%;width:100%;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKCcLO75iwjzSzFf3vzcIyLF0KAMzNt4at7WJeGk7ZZHFGHKhssrKcv-oIoe4v987Da_3LeZitKKOxc4jHxF14y_k_ayKLsVLkq-6tESLkd4a3YgJtavEQftNe98VK2iW_cNo0bAbc6bQ/s1600/load-indicator.gif) no-repeat scroll 50% 50%;}
.lof-main-outer{position:relative;height:100%;width:900px;z-index:3px;overflow:hidden;}




/*******************************************************/
.lof-main-item-desc{z-index:100px;position:absolute;bottom:50px;left:0px;width:350px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgi8-zbnlGvw8t2PQMDol3eOs86yJegzi3YqaeeHBT33VkdZSl-iDGAba-z7gcvQhmULk9HWKmGNWxmm1N_gIpWe8uLlOc5iSKg8o7DpAP1BnnQDb4jOoFedZg7XWmXI4D5os8agMcLxXY/s1600/bg_trans.png);height:100px;/* filter:0.7(opacity:60) */padding:10px;}
.lof-main-item-desc p{margin:0 8px;padding:8px 0}
.lof-main-item-desc h3{padding:0;margin:0}
.lof-main-item-desc h2{padding:0;margin:15px 0 0 0px;}
.lof-main-item-desc h3 a{    margin:0;background:#C01F25;font-size:75%;padding:2px 3px;font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;text-transform:uppercase;text-decoration:none}
.lof-main-item-desc h3 a:hover{text-decoration:underline;}
.lof-main-item-desc h3 i {font-size:70%;}


/* main flash */
ul.lof-main-wapper{/* margin-right:auto; */overflow:hidden;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKCcLO75iwjzSzFf3vzcIyLF0KAMzNt4at7WJeGk7ZZHFGHKhssrKcv-oIoe4v987Da_3LeZitKKOxc4jHxF14y_k_ayKLsVLkq-6tESLkd4a3YgJtavEQftNe98VK2iW_cNo0bAbc6bQ/s1600/load-indicator.gif) no-repeat scroll 50% 50%;padding:0px;margin:0;position:absolute;overflow:hidden;}


ul.lof-main-wapper li{    overflow:hidden;padding:0px;margin:0px;float:left;position:relative;}
.lof-opacity  li{position:absolute;top:0;left:0;float:inherit;}
ul.lof-main-wapper li img{padding:0px;}


/* item navigator */
.lof-navigator-wapper{position:absolute;bottom:10px;right:10px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwXMK3mn4KLZZBSie3ArlPKi_SFFrzryF1AaT8vv-Qm-rx6LsVEFBIP16Nvgg0yveN4KP6J1MNUbkwK8VlZouOFeGsFn6mL1hcd8l9NkNsRY91vK_ZXybaxozvXdDFAo40e18LCG6xAOc/s1600/transparent_bg.png) repeat;padding:5px 0px;}
.lof-navigator-outer{position:relative;z-index:100;height:180px;width:310px;overflow:hidden;color:#FFF;float:left}
ul.lof-navigator{top:0;padding:0;margin:0;position:absolute;width:100%;}
ul.lof-navigator li{cursor:hand; cursor:pointer;list-style:none;padding:0;margin-left:0px;overflow:hidden;float:left;display:block;text-align:center;}
ul.lof-navigator li img{border:#666 solid 3px;    }
ul.lof-navigator li.active img, ul.lof-navigator li:hover img {border:#A8A8A8 solid 3px;}
.lof-navigator-wapper .lof-next,  .lof-navigator-wapper .lof-previous{display:block;width:22px;height:30px;color:#FFF;cursor:pointer;}
.lof-navigator-wapper .lof-next {float:left;    text-indent:-999px;margin-right:5px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiGr6qVDPccoqBMPmgKRYeVb3IBXeSfcd6nHVK_BtqCPnSgvH-Hr3iBvSlj_jR17ytlV4LBhphpReHqfkBZWJRhepvtzCpP1WKypgtA46mV2pT4Pm5mD9z6AfEzQRAW2nMY10owCTAnEs/s1600/arrow-l.png) no-repeat right center;}
.lof-navigator-wapper .lof-previous {float:left;    text-indent:-999px;margin-left:5px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIHZWhbZRUdgqrGjfEOiQC_C29kTIpAOY-1jx_XdDEH5e-iQzs81MJUlHYFs8i3imLkLhZr5ujOaDkbQr4qyiE0NkX5QpNQemVCX8MVFBpGiMzvtItZsgWAn_gQkO2dPNjwKaRdQNRMH8/s1600/arrow-r.png) no-repeat left center;}
]]></b:skin>
  • Selanjutnya cari kode dibawah ini
</head>
  • Hapus kode diatas kemudian ganti dengan script dibawah ini
<script language='javascript' src='http://bendolbm.googlecode.com/files/jquery1.js' type='text/javascript'/>
<script language='javascript' src='http://bendolbm.googlecode.com/files/jquery.easing.js' type='text/javascript'/>
<script language='javascript' src='http://bendolbm.googlecode.com/files/script.js' type='text/javascript'/>




<script type='text/javascript'>
 $(document).ready( function(){   
        var buttons = { previous:$(&#39;#lofslidecontent45 .lof-previous&#39;) ,
                        next:$(&#39;#lofslidecontent45 .lof-next&#39;) };
                       
        $obj = $(&#39;#lofslidecontent45&#39;).lofJSidernews( { interval : 4000,
                                                direction        : &#39;opacitys&#39;,   
                                                 easing            : &#39;easeInOutExpo&#39;,
                                                duration        : 1200,
                                                auto             : false,
                                                maxItemDisplay  : 4,
                                                navPosition     : &#39;horizontal&#39;, // horizontal
                                                navigatorHeight : 32,
                                                navigatorWidth  : 80,
                                                mainWidth:980,
                                                buttons            : buttons} );   
    });
</script>
</head>


  • Save Template anda
  • Sekarang menuju Design ► Page Elements
  • Add Gadget ► HTML/JavaScript
  • Kemudian Masukkan kode dibawah ini didalam Gadget tsb ( untuk judul biarkan kosong saja )
<!------------------------------------- THE CONTENT ------------------------------------------------->
<div id="lofslidecontent45" class="lof-slidecontent" style="width:900px; height:340px;">
<div class="preload"><div></div></div>
 <!-- MAIN CONTENT -->
  <div class="lof-main-outer" style="width:900px; height:340px;">
      <ul class="lof-main-wapper">
          <li>
                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDBuQICSCy4b8Tp8hFKV_q2gCpyUmBFUUTWMAUzByL0_IavjGMH4ChHyCzAJ7gVDHnFEv8-odiSdY5xywB1n6SHOIZpqTJ3T-mFbeW5KiDPfz0A4ZU6g8MTbQ-Yksjr1PDPQ6_vRtFW1s/s1600/thumbl_980x340.png" title="Newsflash 2" />          
                 <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 1" href="#Category-1">/ Newsflash 1 /</a> <i> — Monday, February 15, 2010 12:42</i></h3>


                <h2>Content of Newsflash 1</h2>
                <p>The one thing about a Web site, it always changes! Joomla! makes it easy to add Articles, content,...
                <a class="readmore" href="#">Read more </a>
                </p>
             </div>
        </li>
       <li>
             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_iR0kwZmUkeYRh5RSBDrjqbYUcAWrjAoosRR9BtjPuXfOFhLM2cojhhDvzjx029bOYnpMuBNIcFyZlL3ngMG0wbpk77j9aV5b_DNzvmT9Ud1eUmkjeXiQkYgSkLvTJfvtSmbNlpPY2gw/s1600/thumbl_980x340_002.png" title="Newsflash 1" />          
               <div class="lof-main-item-desc">


                <h3><a target="_parent" title="Newsflash 2" href="#Category-2">/ Newsflash 2 /</a>     <i> — Monday, February 15, 2010 12:42</i></h3>
                <h2>Content of Newsflash 2</h2>
                <p>Joomla! makes it easy to launch a Web site of any kind. Whether you want a brochure site or you are...
                <a class="readmore" href="#">Read more </a>
                </p>
             </div>


        </li>
       <li>
             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijs7HuGmqXdWvFA6UAR91rKgNb2HiymQ8PtXtHcPxIKF5nJiD6zzO6022tDhzPZJleCnytFzIDgBOU2S3iBtCIpp8f1PE0xkc1XLDuMEIjddvKOjWsrctgtyj7E4gkNSDtXlkcKGYFvyA/s1600/thumbl_980x340_003.png" title="Newsflash 3" />           
              <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 3" href="#Category-3">/ Newsflash 3 /</a>     <i> — Monday, February 15, 2010 12:42</i></h3>
                <h2>Content of Newsflash 3</h2>
                <p>With a library of thousands of free Extensions, you can add what you need as your site grows. Don't...
                <a class="readmore" href="#">Read more </a>


                </p>
             </div>
        </li>
        <li>


             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyv2UtYYtUDsKGwHQId5MCSZm1zIxQiuosIK_ziZ-JevMeCNKcO-SgIXK92TVrg6MuuKtuPwMlLEy3N0HckJmQ02rRUxQ3zYoYp5jsHXVHvhRmFhQNmyXWqp2lwol4GdxpI8PqMHutTrI/s1600/thumbl_980x340_004.png" title="Newsflash 5" />           
              <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 4" href="#Category-4">/ Newsflash 4 /</a>    <i> — Monday, February 15, 2010 12:42</i></h3>


                <h2>Content of Newsflash 4</h2>
                <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
                <a class="readmore" href="#">Read more </a>
                </p>
             </div>
        </li>
       
        <li>


             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdJWn_HWnkV6lWs64KGe_nzQzvoVbVq3543Jgyl1fJANWu9N9PgwcRcLJbZx3FDBpp_4an9Q0O1ZH0SUKcR0wiwZ-BK23qGAXnN9H6XrqD2KKqdbWOW_MBmDqTljlzMfOjzWPGwLbS3ec/s1600/thumbl_980x340_005.png" title="Newsflash 5" />           
              <div class="lof-main-item-desc">


                <h3><a target="_parent" title="Newsflash 5" href="#">/ Newsflash 5 /</a>    <i> — Monday, February 15, 2010 12:42</i></h3>
               <h2>Content of Newsflash 5</h2>
                <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
                <a class="readmore" href="#">Read more </a>
                </p>
             </div>


        </li>
        <li>


             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikRUVKxmJVFj_TxT4k-0rehZisputwaPBPifjx8AIJaVdXl0axeLLBCTVYf2VI2smDvBg4pafRyuw2fWXqFjSP2biw9yYZ0gp4vwdtFtR-vG9lNWZmIzSvRimhow17ta5Oae6n1VfJc0Q/s1600/thumbl_980x340_006.png" title="Newsflash 5" />           
              <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 6" href="#">/ Newsflash 6 /</a>    <i> — Monday, February 15, 2010 12:42</i></h3>
                <h2>Content of Newsflash 6</h2>
                <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
                <a class="readmore" href="#">Read more </a>


                </p>
             </div>
        </li>
         <li>
             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFDUf_90eV11s3L1txWVUdKyol5cuweNfNB2kHFabCrXdtKqxoZpB5YXyYzHlcvAG9ATI972GS1FFhYc_8TwHvb6Uc0zvSX43gBHfUqiKct25y5ipvqd3VxOtpXgsqzBFaWpHTORnIru8/s1600/thumbl_980x340_007.png" title="Newsflash 5" />           
              <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 7" href="#">/ Newsflash 7 /</a>    <i> — Monday, February 15, 2010 12:42</i></h3>
                <h2>Content of Newsflash 7</h2>


                <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
                <a class="readmore" href="#">Read more </a>
                </p>
             </div>
        </li>
          <li>
             <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD9ECpptMVonJAnjehf5oeBha60-W6SPRZDclvofxQ79Or2zqypqadQLlcTIKeTPYCXoNSQzI5_DQ28xYM_oDRO54dthBVuXK64b_z01xO6BZ5SMZbdqsje-jffNcvECRpwfMqqy3laa0/s1600/thumbl_980x340_008.png" title="Newsflash 8" />           
              <div class="lof-main-item-desc">
                <h3><a target="_parent" title="Newsflash 8" href="#">/ Newsflash 8 /</a>    <i> — Monday, February 15, 2010 12:42</i></h3>


                <h2>Content of Newsflash 8</h2>
                <p>Joomla! 1.5 - 'Experience the Freedom'!. It has never been easier to create your own dynamic Web...
                    <a class="readmore" href="#">Read more </a>
                </p>
             </div>
        </li>
      </ul>     
  </div>
  <!-- END MAIN CONTENT -->
    <!-- NAVIGATOR -->


<div class="lof-navigator-wapper">


        <div onclick="return false" href="" class="lof-next">Next</div>
      <div class="lof-navigator-outer">
            <ul class="lof-navigator">
               <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj03NGlsK8wp8b8GiOqiv8jdTmHaj72hLJEDxCloyGAwd0CsVFlP1cpo8fZ4kL-D4zOQBx5C-zl3bT5hQh29NcPvO-UuSjIkh13QwujzuSq9mx8QIz-YU3IN5M5sHLHSaFeUbjU9mzEvn4/s1600/thumbl_980x340.png" /></li>
               <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIhMvfunwDOHzUKl_fqB2U98viiwwzgCMkp6bXC8xoup2L0D-MF47mZjZJLQSmXjadjjGzth_D1Vm_-uYBcssDnXswyYoos5IG1h0J2JDzmmAjZcMOd-nanzik1-Yiixr-w2P1Mo80Jtc/s1600/thumbl_980x340_002.png" /></li>
               <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGsvuEXSPleSbXAFC3IMFuFNP9H6rANU7r-vWMEdS4YsB0Tz_xURT4qTRtmi6khHe69iaAzSbEY_aEvhRAEVbJtlfHHlF0TGgJCAJNZ6x7_53u6N4-MUk5ytzSI4T2X2L_g4COx6n21p4/s1600/thumbl_980x340_003.png" /></li>
               <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpxr90OV2vtXIjWBARc0P2CWJBhkgx7BQ0_yd6QBWH9CrLCeeyOnJlFWEnrSJ1GOzmytb6zd82QeFnGPBDDNHV68uavLgp4LZTpIf8JPv43EesIPmym8wau-J2lAVa9JotNfBITyJLmLc/s1600/thumbl_980x340_004.png" /></li>   
               <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgencpCsIvPCdQVofwl0Uqv4A6kR_8s6dbEBIKQf9EOJzqyFPvjzlKYn9iFj6VgxcvCZyg8T-TaVFitoHhm0npgIO2hDaRK064z7sP0uH8QbJuBxnM4h-ugMCZTlhzf_cujk4lcr5BTfS4/s1600/thumbl_980x340_005.png" /></li>


               <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj97n3XBncdgcM4iIic0v35IEasnNSAsmXw09WXd4gVPq1rhjajyJBbL5GAWIFS1F5VwP5_dxDboc5_ciPbfPmkvOwKtXFfpNwt6AlCPczqIiLRET6ffxfDkA_vqj1SnFluGFM-QmFUSZM/s1600/thumbl_980x340_006.png" /></li>      
               <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcfbkprDoKVnC9Lf6OY7WxIFy7B2WhvI7ZcpVqLYhBoA4Otk6eqpo3BzXWZQgW72ZPptgqbnzWEXvbkTkfAlWmy1thN06q9HdmeK0Csa0N8z0fWVjz-5tcdA2LVSgMu7dMyoJrXKoduck/s1600/thumbl_980x340_007.png" /></li>      
               <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUX7YxVub8q5gsRdXZU63cBS6ECTlpBgLqxGIf6byfj0MrykRY4TjK4UKlBJpqumcG5Zm_bNxAg5R_rCFVmJpaX9qdHFWgKy36eTstVLrVvS53nghK8d-cEB2UJ7Iushsh1nTbTKrVkUo/s1600/thumbl_980x340_008.png" /></li>              
            </ul>
      </div>
        <div onclick="return false" href="" class="lof-previous">Previous</div>
 </div>
  <!----------------- --------------------->
 </div>
<script type="text/javascript">


</script>


MERAH   = Alamat Gambar Dengan ukuran ±  980 x 400 px
BIRU        = Alamat Gambar Kecil dengan ukuran ± 140 x 70 px
Pink          = Judul
Bold 1      = Tanggal dan waktu
Bold 2      = Discription

Sekian semoga bermanfaat, Bila anda mengalami kesulitan silahkan beritahu saya, akan saya coba bantu sebisa saya....

0 komentar

Posting Komentar

TABDIV

    Dr Seuss The Lorax (2012) John Carter (2012) The Three Musketeers (2011) The Artist (2011) Alvin and the Chipmunks 3: Chipwrecked (2011) Act of Valor (2012) Safe House (2012) The Grey (2012) The Descendants (2011) The Girl with the Dragon Tattoo (2011) The Sitter (2011) The Muppets (2011) Happy Feet Two (2011) CAM 350MB Ganool The Adventures of Tintin (2011) Ghost Rider 2: Spirit of Vengeance (2011) This Means War (2012) The Woman in Black (2012) The Vow (2012) Hugo (2011) Journey 2: The Mysterious Island (2012) Immortals (2011) Underworld 4: Awakening (2012) Chronicle (2012) Mission Impossible Ghost Protocol (2011) Puss in Boots (2011) Tower Heist (2011) Man on a Ledge (2012) The Three Musketeers (2011)

Recent Comment

My Rank

Lihat Most Wanted Review Film DISINI
Biasakan cari judul film dulu di DAFTAR ISI / LIST FILM DISINI  
DIMOHON TIDAK REQUEST DI SEMBARANG WEB !!!
Silahkan PM kesini untuk request review film...
Yg jelas & perlu diperhatikan, untuk Film-Film terbaru pasti akan di posting, tidak perlu capek-capek request
File ekstensi .001 / .002, dst... harus di join dulu dengan HJ-SPLIT, Googling aja utk dapat HJ-SPLITnya, setelah di join baru extract memakai WinRar. Solusi error waktu extract --> Klik kanan file .Rar yg korup, pilih Extract files.., centang Keep broken files pada tulisan pojok kiri bawah lalu klik OK.