BENDOL Collection: Membuat Slide News dengan Lof JSliderNews 1.0

Direction: Right - Left. The Navigator is the list of thumbnails

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/AVvXsEjMjddJqgf7JOclNT_EYyPbay2uwhoOxS7JimTmz_aNy5zWhITGh1awtchViWss-djT_cz_wHEYH1y1udrC-I8lUKBe5oVruWwZ4ByqWDRrt_rT3TZA610LbSghXjZ1tEZBc6sbJXiR67A/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/AVvXsEjhJkKHhOK55UOWqFZCtwhIz1AMDis4xFJ2AV2FURHmFJQOoPmwHpM5c53HjdTiBeivcJm14OCzWGuqpS-pJOqLBfedrtwuq999c28N9vCXySqcrGMeijaU60adRgHVtIAZLx-m-HU4QtE/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/AVvXsEjMjddJqgf7JOclNT_EYyPbay2uwhoOxS7JimTmz_aNy5zWhITGh1awtchViWss-djT_cz_wHEYH1y1udrC-I8lUKBe5oVruWwZ4ByqWDRrt_rT3TZA610LbSghXjZ1tEZBc6sbJXiR67A/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/AVvXsEiCDZRsQOUFCrAJg9Fmth0a7C06t795PbSU4s_VTKvNiB4a-T3b6E0bNECRCXEFGzkjM6mXwoKVfFgIwYSHBfkEckRlRCwjJMQHFDDrqQJB4yi6lfqtFcVhg-OpytMSO_duYyN1LQGe_So/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/AVvXsEhm2hJfxTcfXPGAIfraDnKbok98JGUwMD4zHnulG7LZNtw4WXNbmogblTVU34wgFsk0SYXrQlWaASOvAS-V-uPZ5R2GTJ5PT_vKy_vrgcWAk8jy7dSPL3MxIaR4mp3JTXhCOn4x6exNej4/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/AVvXsEi5DQDoelugM1pGFELD96c7022PnFZ6ghs_f590zkgsLagNTurwK-JI1e8OsEuvrF9oug-XUALLa6xF23Nr-DMGnF2VvWSPj39AUWh_oMcNF6XCNpk18SOIzj9tc7eaRSrYdUQwR-O67iE/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:$('#lofslidecontent45 .lof-previous') ,
                        next:$('#lofslidecontent45 .lof-next') };

        $obj = $('#lofslidecontent45').lofJSidernews( { interval : 4000,
                                                direction        : 'opacitys',
                                                 easing            : 'easeInOutExpo',
                                                duration        : 1200,
                                                auto             : false,
                                                maxItemDisplay : 4,
                                                navPosition     : 'horizontal', // 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 )

<div id="lofslidecontent45" class="lof-slidecontent" style="width:900px; height:340px;">
<div class="preload"><div></div></div>

<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/AVvXsEgD9mpj5ytZi6NlIqPFZr9Cr4J13HlvLwf3D66iNM4naHz5HHzTXduNyoTjWrGqGJaq0pWg8Bcdz4Y_HrJ5HMq6KPU5NZjfVjPpn3xaLRJRsawamg6ZQyt9jCIkJdZQAHE-Prbuphlm0JE/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/AVvXsEiJ5ispj8enaED7FJAMBQlI9MFzVufjav9qtiWksCHXP8EwEnl4a1nOZCbf7cKjH0G2CulJnf0so1kUyaOncY5xiaCOj1Kv57EWI7MqmzzO9vSkgAAXRvnvCOIVFesDL2spA6DBTS51MfM/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/AVvXsEiCQYG-zjDoKsSJBP9Po9pemfqhT6tTz3vhyphenhyphenz2Rpuom0oGYlYPag5gNzkYSdchiVxZMafSs74FLvOc4HyLhsa5wYDkpg9j01mY6UNTW7nKgerCu3uPc6rt-9Cra6RW1fCzgJzJMw8Hc-B4/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/AVvXsEi8z1LeCQOQNkWSuvJtCyCS4-McpZgyT_kEJtUeKZlVYtiBZd7fJQFNkHdbqlJmcD62TJ-nVDJNo1NVGOzdA_BzKeeJhxByFJdKDdD-eLnGRLLNt_WGb0z3GpVyjhFk-GHjQ8A_YjBIbWw/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/AVvXsEjYSgFc1P4zcgkR9xwK-CSXD8kOacAFxM23qZzEi4dUkROCauGWXRZLYDGLgfwW5Lqejn5hhs05eHKr2kmqfvS6R5rwB9i5w7xKlwvqdXTzgBWNubkzF-qxIGqKA8mlLGDFmspi5GuSJGM/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/AVvXsEg9Dj0GUc8haDoeQaxlIaU9vILoH_C-fWuGmu35DbE7LAta-_hW9fRUuJW8TogQWp42ROAmOPonPh2l7gQ0N8EGVYOqmkoQEKTH6ihZD8xTYCauoaE5xOcOIfk6F_87GcOuneVNmT0bkT4/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/AVvXsEi8tVo5vvi4aeZVH3Dwum2nRyzIGM79vi8qaK_ipu_N4fws3YooFatuOjoiqEz5ujW1kZYC243dz5gh3pM1ndvgshXUdajuQIPHVmA45eGw2ym8m1fQtuVTi7hWI62fDVoimnacQTQASYc/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/AVvXsEgub9b2rl_V89YJDwugSCBs9Vq46uY_F4NX_9SgLeK42hAfnsErZb4qhdSNuvAcDXyjBb_sN2k5ENBqKDoY8rAS2jwnofkMfKpXVZ3he_uJVGa-GbUDeycBku4-C2JHYvekPAQWUrmIan0/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>

    

<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/AVvXsEiB9SZVEzjMjFUio7mmU44SI-H5ZsuDmnHE-XQdPLE0mFYFg76ZfyCud2EtzS1APSnDvtEJcr0OxrM2BCNUop2apgrDRjFXJbMxxjGE3RRLiE_WQdlADpARYov-tc4scTp7rVT_YdLp9es/s1600/thumbl_980x340.png" /></li>
               <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiodHW5pZjrXdgw8nF1w4S1yT-NjEROwmkwVrKJ_aSROGjxOdsAF6t7EKzYPKU2ewKcTCMDi48vhrR0ETxBoOW1WWWMmDMMEilaIAd8fyptVAcANxpLvnH6U9toNAUdn1CuuToykMQ0QDE/s1600/thumbl_980x340_002.png" /></li>
               <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4aL3sGUkDo6c1XFMzso0cRWhmTzDyMOpAh_KrFJ-l8F9kNPv2i3FkqpkcDGjJ3tkdK-5z58zNtSqC3UJX__mjxNGxcMEtHCG_lKhBwHyEIxCT7uIqHs15gL8xb5rXRA0vIPJm6_w-eIg/s1600/thumbl_980x340_003.png" /></li>
               <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif6XxKONBx0N_zUEwRpbkgLu-KoXiAvUVWR8ISxtWo2jyROHescCygjQe3gOpp8RTc3U6Wax_SKBHcZbSSmNsPf6-sWiqTobQCEddBARXGZHo-OR5PEQwulMtxdEgUbAWER60SLgWRF8A/s1600/thumbl_980x340_004.png" /></li>
               <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX_cdrxusEdRdCDv_f_d4xVd9OBoWX5D8luuoPO8zhoTV_h3QNWl-oCsm6q2MWslWiWkrrOyVYbVmOfwf-pHoPsdRLdBMWGFJ5unJ0iOdm1iUwTnyC-d86yJCFPkCOFKuu38br-9csHzU/s1600/thumbl_980x340_005.png" /></li>

               <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkuvK88lGYvpvHMcdxYYgwyvzqeAShWH-WYGhJ-ddhajhmIjGlRcBU7rpfbBFv7zmlpN9m8Nw1bdycHUhLn0aIpnVonYuc_ovvmxePhzGO6RYjMMpQYMjpuad-wpY1IiDROYustHvc5AU/s1600/thumbl_980x340_006.png" /></li>
               <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHw6Ilb_0ihoHz7LSj2qODIjLd1z6Dew8zGVi49F-Rw0jRNLWRZPnE7-doKbtkf3kdEqXK9Z1HdWPq7UJIYs1IN6GA8cwKqoajN2gN3O3W6WHqGj9-nZPT5oIrZ1EtugunA454uXN22Ms/s1600/thumbl_980x340_007.png" /></li>
               <li><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrzBRjf4ZlYFuCMb_BmTVYNcppsO3tuVDZVOkTsmt7PpOkXkm7D_XsTLntaKJeEIGA6tN40Qd0RRTgyoux-QuMZvI0ho3NimmzcrKnOHp2a9B4ycCq9trkwgpaQ7ArbG0RoDxqlh_nbuY/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....

Untuk Next Post SlideNews Loft JSliderNews 1.0 Beda Tampilan....Tunggu postingan selanjutnya ya...

3 comments:

Joko Aquarium on June 5, 2011 at 8:41 PM said...: maap ghan, plugin ini ada doc-nya ga? Doc-nya di mana yak??
Selama ini ak pake s3slider, cos ada doc-nya.
Juga s3slider bisa digunakan di blog post..
Bisakah plugin ini digunakan di blog post? Sehingga akan ada beberapa layout hasil plugin ini di satu halaman...
Harajuku on June 13, 2011 at 5:46 PM said...: http://www.dynamicdrive.com/ di mari gan...

silahkan dilihat sendiri :D
Anonymous said...: keren sob

MenuJQuery

BENDOL Collection

TIME

Saturday, March 26, 2011

Membuat Slide News dengan Lof JSliderNews 1.0 - Jquery 1.3

3 comments:

Post a Comment

Popular Posts

Subscribe

Followers