Widget Selamat Idul Fitri 1432 Hijriah Blogspot

Tidak terasa Idul Fitri 1432 Hijriah sudah tinggal beberapa hari lagi permakblogs mengucapkan Selamat Idul Fitri 1432 H ya.. mohon maaf lahir batin... dan special nich dari oRiD widget yaitu widget selamat Idul fitri... contohnya ada tuh di atas kanan blog ini ... mau tau kodenya nich aku kasih dapetnya juga gratis... :)

<p align="right"><embed src="http://www.widgipedia.com/widgets/orido/wiDget-bedug-Lebaran-6270-8192_134217728.widget?__install_id=1248336094072&__view=expanded" width="400" height="200" flashvars="&col1=d89b09&col2=7cc034&dayAdd=0&cal=true&gig_lt=1248336103578&gig_pt=1248336182359&gig_g=1&gig_n=blogger" swliveconnect="true" quality="best" loop="false" menu="false" wmode="transparent" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer"></embed> </p>

cara pasangnya mudah kok cuma pake widget blogspot html/javascript tinggal copas aja kode di atas. Untuk merubah ukuran tinggal ubah width dan height nya. Jangan lupa di simpen ya... oke coy....



Thanks oRiD Widget...

Continue

Cara Memasang Jquery Slideshow di Blosgpot

Hai.. hai... sesuai permintaan pembaca PermakBlogs yang bertanya cara pemasangan slideshow menggunakan jQuary berikut aku kasih dah caranya. Sebenarnya sudah banyak kode Slideshow jQuery di perlintasan internet, tapi demi kelancaran bersama dan indahnya berbagi aku kasih dah cara pemasangan slideshow jQuery yang pernah ane coba. Lumayan panjang sich jadi simak baik-baik ya cara pemsangan slideshow jQuery ini.



Ikuti langkah dibawah ini ya :

1. Seperti biasa masuk ke account Blogspot kamu.
2. Pada Dasbor pilih rancangan pada blog kamu dan akan terlihat dasbor lalu klik Tata Letak>Edit HTML. Cari kode ]]></b:skin> jika sudah dapat copy paste kode dibawah ini diatasnya.
   
   
   #featured{
   
   width:400px;
   
   padding-right:250px;
   
   position:relative;
   
   height:250px;
   
   background:#fff;
   
   border:5px solid #ccc;
   
   }
   ini digunakan untuk mengatur ukuran box slideshow untuk disesuaikan dengan ukuran blog kita.
   
   
   
   
   #featured ul.ui-tabs-nav{
   
   position:absolute;
   
   top:0; left:400px;
   
   list-style:none;
   
   padding:0; margin:0;
   
   width:250px;
   
   }
   
   #featured ul.ui-tabs-nav li{
   
   padding:1px 0; padding-left:13px;
   
   font-size:12px;
   
   color:#666;
   
   }
   
   #featured ul.ui-tabs-nav li span{
   
   font-size:11px; font-family:Verdana;
   
   line-height:18px;
   
   }
   
   
   Ini digunakan untuk mengatur tab navigasi sebelah kanan yang ada gambar kecilnye. :)
   
   
   
   
   
   
   #featured .ui-tabs-panel{
   
   width:400px; height:250px;
   
   background:#999; position:relative;
   
   overflow:hidden;
   
   }
   
   #featured .ui-tabs-hide{
   
   display:none;
   
   }
   
   
   
   
   
   
   
   #featured li.ui-tabs-nav-item a{/*On Hover Style*/
   
   display:block;
   
   height:60px;
   
   color:#333; background:#fff;
   
   line-height:20px;
   
   outline:none;
   
   }
   
   #featured li.ui-tabs-nav-item a:hover{
   
   background:#f2f2f2;
   
   }
   
   #featured li.ui-tabs-selected{ /*Selected tab style*/
   
   background:url('images/selected-item.gif') top left no-repeat;
   
   }
   
   #featured ul.ui-tabs-nav li.ui-tabs-selected a{
   
   background:#ccc;
   
   }
   
   
   Ini untuk mengatur background dari tab sebelah kanan.
   
   
   
   
   
   
   #featured ul.ui-tabs-nav li img{
   
   float:left; margin:2px 5px;
   
   background:#fff;
   
   padding:2px;
   
   border:1px solid #eee;
   
   }
   
   
   
   
   
   
   
   #featured .ui-tabs-panel .info{
   
   position:absolute;
   
   top:180px; left:0;
   
   height:70px; width: 400px;
   
   background: url('images/transparent-bg.png');
   
   }
   
   #featured .info h2{
   
   font-size:18px; font-family:Georgia, serif;
   
   color:#fff; padding:5px; margin:0;
   
   overflow:hidden;
   
   }
   
   #featured .info p{
   
   margin:0 5px;
   
   font-family:Verdana; font-size:11px;
   
   line-height:15px; color:#f0f0f0;
   
   }
   
   #featured .info a{
   
   text-decoration:none;
   
   color:#fff;
   
   }
   
   #featured .info a:hover{
   
   text-decoration:underline;
   
   }
   
   
   
   
   trus klik simpan template dulu.
   
   Kode CSS lengkapnya seperti dibawah ini :
   
   
   
   
   #featured{
   
   width:400px;
   
   padding-right:250px;
   
   position:relative;
   
   height:250px;
   
   background:#fff;
   
   border:5px solid #ccc;
   
   }
   
   #featured ul.ui-tabs-nav{
   
   position:absolute;
   
   top:0; left:400px;
   
   list-style:none;
   
   padding:0; margin:0;
   
   width:250px;
   
   }
   
   #featured ul.ui-tabs-nav li{
   
   padding:1px 0; padding-left:13px;
   
   font-size:12px;
   
   color:#666;
   
   }
   
   #featured ul.ui-tabs-nav li span{
   
   font-size:11px; font-family:Verdana;
   
   line-height:18px;
   
   }
   
   #featured .ui-tabs-panel{
   
   width:400px; height:250px;
   
   background:#999; position:relative;
   
   overflow:hidden;
   
   }
   
   #featured .ui-tabs-hide{
   
   display:none;
   
   }
   
   #featured li.ui-tabs-nav-item a{/*On Hover Style*/
   
   display:block;
   
   height:60px;
   
   color:#333; background:#fff;
   
   line-height:20px;
   
   outline:none;
   
   }
   
   #featured li.ui-tabs-nav-item a:hover{
   
   background:#f2f2f2;
   
   }
   
   #featured li.ui-tabs-selected{ /*Selected tab style*/
   
   background:url('images/selected-item.gif') top left no-repeat;
   
   }
   
   #featured ul.ui-tabs-nav li.ui-tabs-selected a{
   
   background:#ccc;
   
   }
   
   #featured ul.ui-tabs-nav li img{
   
   float:left; margin:2px 5px;
   
   background:#fff;
   
   padding:2px;
   
   border:1px solid #eee;
   
   }
   
   #featured .ui-tabs-panel .info{
   
   position:absolute;
   
   top:180px; left:0;
   
   height:70px; width: 400px;
   
   background: url('images/transparent-bg.png');
   
   }
   
   #featured .info h2{
   
   font-size:18px; font-family:Georgia, serif;
   
   color:#fff; padding:5px; margin:0;
   
   overflow:hidden;
   
   }
   
   #featured .info p{
   
   margin:0 5px;
   
   font-family:Verdana; font-size:11px;
   
   line-height:15px; color:#f0f0f0;
   
   }
   
   #featured .info a{
   
   text-decoration:none;
   
   color:#fff;
   
   }
   
   #featured .info a:hover{
   
   text-decoration:underline;
   
   }
   
   
3. Kemudian tambahkan kode jQuerynya di bawah ini sebelum </head>
   
   
   
   
   <code><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
   
   <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js' type='text/javascript'>
   
   </code>
   
   <script type='text/javascript'>
   
   $("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
   
   </script>
   
   
   Kemudian klik Simpan Template
4. Kemudian langkah terakhir masukan kode html dibawah ini sesuai posisi yang diinginkan misal diatas posting dengan menambah widget HTML/Javascript.
   
   
   
   
   <div id="featured" >
   
   <ul class="ui-tabs-nav">
   
   <li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image1-small.jpg" alt="" /><span>15+ Excellent High Speed Photographs</span></a></li>
   
   <li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="#fragment-2"><img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image2-small.jpg" alt="" /><span>20 Beautiful Long Exposure Photographs</span></a></li>
   
   <li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image3-small.jpg" alt="" /><span>35 Amazing Logo Designs</span></a></li>
   
   <li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image4-small.jpg" alt="" /><span>Create a Vintage Photograph in Photoshop</span></a></li>
   
   </ul>
   
   <!-- First Content -->
   
   <div id="fragment-1" class="ui-tabs-panel" style="">
   
   <img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image1.jpg" alt="" />
   
   <div class="info" >
   
   <h2><a href="#" >15+ Excellent High Speed Photographs</a></h2>
   
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tincidunt condimentum lacus. Pellentesque ut diam....<a href="#" >read more</a></p>
   
   </div>
   
   </div>
   
   <!-- Second Content -->
   
   <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
   
   <img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image2.jpg" alt="" />
   
   <div class="info" >
   
   <h2><a href="#" >20 Beautiful Long Exposure Photographs</a></h2>
   
   <p>Vestibulum leo quam, accumsan nec porttitor a, euismod ac tortor. Sed ipsum lorem, sagittis non egestas id, suscipit....<a href="#" >read more</a></p>
   
   </div>
   
   </div>
   
   <!-- Third Content -->
   
   <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
   
   <img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image3.jpg" alt="" />
   
   <div class="info" >
   
   <h2><a href="#" >35 Amazing Logo Designs</a></h2>
   
   <p>liquam erat volutpat. Proin id volutpat nisi. Nulla facilisi. Curabitur facilisis sollicitudin ornare....<a href="#" >read more</a></p>
   
   </div>
   
   </div>
   
   <!-- Fourth Content -->
   
   <div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
   
   <img src="http://demo.webdeveloperplus.com/featured-content-slider/images/image4.jpg" alt="" />
   
   <div class="info" >
   
   <h2><a href="#" >Create a Vintage Photograph in Photoshop</a></h2>
   
   <p>Quisque sed orci ut lacus viverra interdum ornare sed est. Donec porta, erat eu pretium luctus, leo augue sodales....<a href="#" >read more</a></p>
   
   </div>
   
   </div>
   
   </div>
   
   
   
   
   jangan lupa disimpan ya..
   

nahh proses menambahkan slideshow sudah selesai coba cek blogspot kamu... EXPECTO PATRONUM (sindrom harry potter)... :)

bagaimana berhasil khan... mudah ya... kalau masih belum bisa jangan malu bertanya ya... :)

ok dechhh.. sekian dulu cerita dari kakak sampai ketemu lagi di cerita berikutnya... salam PermakBlogs ya ...

Continue