Slider Zinmag Primus

Akhirnya selesai juga saya PKL jadi bisa ngeblog lagi dech, maaf sahabat blogger apabila ada kunjungan atau komen yang terlambat saya balas dikarenakan saya tidak sempat. oke sebagai tanda maaf, saya akan memberikan Cara memasang Slider Zinmag Primus. apa yang dimaksud dengan tema di atas?? maaf saya g bisa menjelaskannya karena saya kurang tau apa yang di maksud tapi yang jelas contoh trik ini sama dengan Slider yang bergerak seperti di blog oketrik (Home Page).

Maaf kepada sahabat blogger kalau Trik memasang Slider Zinmag Primus ini telat untuk di bagikan di karenakan saya sibuk hihihihi, namun sekarang saya bisa membagikannya kepada sahabat blogger semua. Oiya awalnya muncul trik ini berasal dari sebuah template Zinmag Primus yang memakai Slider ini dan banyak sahabat-sahabat blogger lainnya mempublish cara memasang trik itu ke dalam template selain template itu jadi enak dech wkwkwkwk.

Oke g usah panjang lebar ngomongnya langsung ajach yuk ke caranya :

1. Login ke blogger
2. masuk ke dalam Tata Letak ==>> Edit HTML
3. cari kode ]]></b:skin> lalu taruh kode di bawah ini tepat di atasnya
   
   
   #slider {
   background:url(http://img99.imageshack.us/img99/9594/slide.png);
   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;
   }
   
   
   
4. Setelah itu cari kode yang tadi ( ]]></b:skin> ) trus taruh kode di bawah ini tepat di bawahnya
   
   
   <script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/jquery-1.2.6.min.js' type='text/javascript'/>
   <script src='http://bloggerstyles.com/data/templates/000/Zinmag-Primus/js/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>
   
   
   
5. Nah setelah itu simpan tapi cara ini belum selesai, sekarang kita masuk ke Elemen Halaman
6. setelah berada di Elemen Halaman Sekarang sobat tambahkan sebuah gadget lalu pilih yang HTML/javascript setelah itu masukan kode di bawah ini ke dalamnya
   
   
   <!-- Casing -->
   <div id='casing'>
   <!-- Slider -->
   <div id='slider'>
   <div id='mover'>
   
   <div class='slide'>
   <span class='slmet'> Posted by Oketrik </span>
   <h2><a href='http://oketrik.blogspot.com/2010/01/alien-black-template.html'>Alien Black Template</a></h2>
   <p>Akhirnya jadi juga template untuk di bagikan ke Sahabat blogger Semua, mungkin Template ini simple tapi banyak fitur yang membuat template ini Seo Friendly. oke kalau mau tau lebih dalam spesifikasi template ini saya akan memperjelaskannya......
   
   <a style='float:right' href='http://oketrik.blogspot.com/2010/01/alien-black-template.html'>Selengkapnya ==>></a>
   
   </p>
   <img alt="Smooth Scroling Page" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9A8a_nSHqHe7x94AyS-JhghoIUMVz4hBbUPLBoNCBJfUqGwVo6a_tBvV2oxK5wTdkE6caExT8_ZO0JmqgeiFUfzjA-PS66KlHxrx9VXFM6Z1cxYCoIwTfCAg8PgPoj-dma464Mh7pi9mH/s320/qiruns.blogspot.com+screen+capture+2010-1-28-16-4-44.jpg" />
   </div>
   
   <div class='slide'>
   <span class='slmet'> Posted by Oketrik </span>
   <h2><a href='http://oketrik.blogspot.com/2010/01/memasang-navbar-footer.html'>Memasang Navbar Footer</a></h2>
   <p>Navbar Footer adalah tema kali ini, maksud dari tema di atas itu sama dengan Navbar yang di berikan blogger namun perbedaannya adalah penempatan, kalau navbar dari blogger posisinya tepat di atas sedangkan Navbar footer ini posisinya melayang seperti Float Image.
   
   Dalam pemasangan Navbar Footer sangat mudah dan sangat simple, hanya....
   
   
   <a style='float:right' href='http://oketrik.blogspot.com/2010/01/memasang-navbar-footer.html'>Selengkapnya ==>></a>
   
   </p>
   <img alt="Navbar Footer" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9JvdbI8O3dKBLHsVJkwpgOgDE6H7u8zyNK98kZWgJP0l6F6x6QYsaR46EpUs64YGr9qts7DWlHy7t_KVveZqRe5qLKXw2yvtEosKwZg4fdQx6YaSO_dO8-wFvV7dq6rsQcD1EVroCUIFF/s320/Navbar+Footer.png" />
   </div>
   
   <div class='slide'>
   <span class='slmet'> Posted by Oketrik </span>
   <h2><a href='http://oketrik.blogspot.com/2010/01/memasang-smooth-scrolling-page.html'>Memasang Smooth Scrolling Page</a></h2>
   <p>Smooth Scrolling Page adalah salah satu tools blog yang berfungsi sama dengan back to top dan back to bottom, tools tersebut bermanfaat untuk mempercantik blog dan membuat kenyamanan kepada pengunjung.
   
   Perbedaan dari Smooth Scrolling Page dengan back to top dan back to bottom adalah.....
   
   <a style='float:right' href='http://oketrik.blogspot.com/2010/01/memasang-smooth-scrolling-page.html'>Selengkapnya ==>></a>
   
   </p>
   <img alt="Smooth Scroling Page" src="http://s2.sigmirror.com/files/53586_uxdxh/Smooth%20Scroling%20Page.png" />
   </div>
   
   <div class='slide'>
   <span class='slmet'> Posted by Oketrik </span>
   <h2><a href='http://oketrik.blogspot.com/2010/01/menambahkan-element-baru.html'>Menambahkan Element Baru</a></h2>
   <p>Penjelasan Tentang Page Element sudah saya tulis di artikel tentang Mengenal Page Element Di Blogspot jadi apabila masih bertanya-tanya tentang Page Element itu apa? baca saja artikel saya yang Mengenal Page Element Di Blogspot.Nah kalau maksud dari.....
   
   
   <a style='float:right' href='http://oketrik.blogspot.com/2010/01/menambahkan-element-baru.html'>Selengkapnya ==>></a>
   
   </p>
   <img alt="Menambahkan Elemen Baru" src="http://s2.sigmirror.com/files/53588_m7djj/Elemen.png" />
   </div>
   
   <div class='slide'>
   <span class='slmet'> Posted by Oketrik </span>
   <h2><a href='http://oketrik.blogspot.com/2009/12/memasang-fixed-menu.html'>Memasang Fixed Menu</a></h2>
   <p>Nah untuk kali ini saya akan memberikan trik Memasang Fixed Menu, Fixed Menu ini cukup bagus untuk mempercantik blog sobat, untuk contohnya silahkan lihat ke kiri blog saya yang ada gambar rumah dan yang lain-lain itu yang di sebut Fixed menu....
   <a style='float:right' href='http://oketrik.blogspot.com/2009/12/memasang-fixed-menu.html'>Selengkapnya ==>></a>
   
   </p>
   <img alt="Blog Oketrik" src="http://s2.sigmirror.com/files/53589_pawep/Melayang.png" />
   </div>
   
   <div class='slide'>
   <span class='slmet'> Posted by Oketrik </span>
   <h2><a href='http://oketrik.blogspot.com/2010/01/check-kecepatan-blog.html'>Check Kecepatan Blog</a></h2>
   <p>Dalam pembuatan blog yang mempunyai pagerank bagus diperlukan banyak trik salah satunya adalah Kecepatan Blog yang sangat cepat untuk memberikan kenyamanan kepada pengunjung. dalam dunia Blogsphere Kecepatan Blog sangat diperlukan untuk meningkatkan trafik blog. Kali ini saya akan memberikan informasi tentang kumpulan web yang bisa mengecheck loading kecepatan blog sobat. dengan adanya informasi ini semoga blog....
   
   <a style='float:right' href='http://oketrik.blogspot.com/2010/01/check-kecepatan-blog.html'>Selengkapnya ==>></a>
   
   </p>
   <img alt="Check Kecepatan Blog" src="http://s2.sigmirror.com/files/53587_fybii/Check%20Kecepatan%20Blog.png" />
   </div>
   
   <!-- /Mover -->
   </div>
   <!-- /Slider -->
   </div>
   <div class='clear'/></div></div>
   
   
   Penjelasan :
   
   • Kode yang berwarna Kuning bisa sobat ganti sesuai keinginan sobat Sendiri, dan apabila sobat kurang mengerti atau ingin memodifikasinya Sobat bisa tinggalkan pesan di kotak komentar yang sudah tersedia
     
   
   
7. Nah sekrang simpan dech dan lihat hasilnya

Gimana Sahabat tentang Cara Memasang Slider Zinmag Primus?? bagus tidak beritahu saya y dengan menulis komentar, oiya sekilas info untuk meningkatkan PR atau SEO kalau sobat berkomentar di blog yang memunya PR blog sobat bisa terindeks oleh Search Engine lebih cepat dan Mudah loh jadi berikomentar y tentang Trik yang satu ini. Sekian dari saya Terima Kasih Happy Blogging.

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg