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
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 )
<!------------------------------------- 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/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>
<!-- 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/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 waktuBold 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...
.tentu saja ketika seseorang membuat sebuah Blog, Website, Komunitas, dll pasti ada tujuannya. ingat ada asap pasti ada api
)
