Cara Membuat Slide Image Description For Blogger

Cara Membuat Slide Image Description For Blogger - Ini adalah sebuah trik yang sangat unik untuk membuat slide image dengan deskripsi dibawahnya. Jika sobat memiliki postingan spesial yang ingin dishare, bisa menggunakan tips ini, dan letakkan di sidebar blog. Sobat bisa menggunakan imge dan dskripsi yang bisa diubah-ubah sesuka hati. Cara membuat nya pun sangatlah mudah, sobat tinggal tambahkan script berikut ke Add Gadget HTML.

<style>
.image-box {
  width:280px;height:280px;overflow:hidden;background-color:white;
  border:1px solid #ccc;float:left;margin:1px 1px;
  font:normal normal 12px/1.4 Segoe,"Segoe UI",Arial,Sans-Serif;
  color:#333;
}
.image-container,
.image-details {height:280px;border:5px solid white;background-color:#ffc;
  transition:margin-top .4s ease-out .4s;
}
.image-container img {
  width:280px;height:280px;padding:0 0;margin:0 0;border:none;outline:none;max-width:none;
  max-height:none;
  background-color:black;
}
.image-details h4,
.image-details p {
  margin:0 0 .2em;padding:0 0;height:70px;
}
.image-details h4 {
  font-size:120%;height:auto;
}
.image-details .details {
  padding:10px 12px;overflow:hidden;
}

.image-details .more {
  color:white;text-decoration:none;display:block;
  text-align:center;font-weight:bold;background-color:#f9a;height:26px;line-height:26px;margin:10px 0 0;
}

.image-box:hover {border-color:#bbb; width:280px;
  height:280px;}
.image-box:hover .image-container {margin-top:-160px}
.image-details .more:hover {background-color:black}
</style>

<div class="image-box-wrapper" id="image-box-wrapper">
 <div class="image-box">
  <div class="image-container">
   <img width="280" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimFS3QxPjKHiPXQ2bDhvqkr7Ne9W9MFTK9_eNqLI9jJtLvJBcA9g3FxRBBaxsftlpgLPndKe8_Cz3zPRqlbsq8UqMXWFHfpnmkFgSZXcLWU_eUje3TIoVYFJNCemxsgL5TdBL13z7ajms/s1600/3.jpg" alt="Food">
  </div>
  <div class="image-details">
   <div class="details">
    <h4>Lorem Ipsum</h4>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy...</p>
    <p><a class="more" href="Post Link ">More</a></p>
   </div>
  </div>
 </div>


 <div style="clear:both;"></div>

</div>

Cara edit :  
- width="280" height="280" = ini untuk mengatur lebar dan tinggi slide
- https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimFS3QxPjKHiPXQ2bDhvqkr7Ne9W9MFTK9_eNqLI9jJtLvJBcA9g3FxRBBaxsftlpgLPndKe8_Cz3zPRqlbsq8UqMXWFHfpnmkFgSZXcLWU_eUje3TIoVYFJNCemxsgL5TdBL13z7ajms/s1600/3.jpg = URL image yang harus sobat ganti.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy = Deskripsi
- Post Link = Link yang akan sobat isi untuk slide 

Okey, cukup sekian sob  Cara Membuat Slide Image Description For Blogger. Semoga bermanfaat

Script by : www.bloggertrix.com

Cara Membuat Nivo Slider Dengan Navigasi Angka

Cara Membuat Nivo Slider Dengan Navigasi Angka - Satu lagi nih sob cara membuat widget slideshow di blog, dan kali ini masih menggunakan slide dari nivo slider. Pada postingan saya sebelumnya seputar slider adalah Cara Membuat Slide Header Di Blog, kalau sobat belum membacanya silahkan dilihat siapa tahu tips sebelumnya juga berguna.

Slider kali ini memiliki beberapa keunggulan, seperti memiliki tombol angka dibagian kanan atas ,slide dan memiliki tombol next - previous slide.  Untuk lebih jelas nya silahkan sobat lihat live demonya dibawah ini :

Bagaimana sob ? tertarik untuk mencoba slide ini ?..Jika tertarik tinggal sobat ikuti saja langkah-langkah dibawah ini :

1. Masukkan kode berikut diatas ]]></b:skin>

.nivoSlider {
position:relative;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYKGuoVYr0cpiSSzMQ6LvbkiGHOcquZzTXtNdboSzi1v-gRykfGHZnR6At7-_rML1OVgjJb-FAMGgCaVy_OvtQFhRFU65iB2PqKfrr-o3TPNTZgXAyAfYRPaCKWR3isOJ4pygX3It4GpY/s1600/loading.gif) no-repeat 50% 50%;
width:618px; /* Samakan dengan lebar gambar */
height:246px; /* Samakan dengan tinggi gambar */
}

.nivoSlider img {
position:absolute;
top:0px;
left:0px;
display:none; /* Menghilangkan semua gambar saat halaman masih memuat */
}

.nivoSlider a {
border:0;
display:block;
}

.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}

/* Elemen palsu yang diciptakan oleh jquery.nivo.slider.js
berupa potongan-potongan gambar */

.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}

.nivo-box {
display:block;
position:absolute;
z-index:5;
}

/* Deskripsi setiap slide */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8;
width:100%;
z-index:8;
}

.nivo-caption p {
padding:5px 10px;
margin:0;
}

.nivo-caption a {display:inline !important;}
.nivo-html-caption {display:none;}

/* Navigasi Next & Prev */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}

.nivo-prevNav {left:0px;}
.nivo-nextNav {right:0px;}

.nivo-controlNav {
position:absolute;
top:10px;
right:15px;
}

/* Navigasi 1,2,3... */
.nivo-controlNav a {
font:normal 10px Verdana,Arial,Sans-Serif;
color:white;
text-decoration:none;
position:relative;
z-index:9;
cursor:pointer;
background-color:#111;
width:17px;
padding:2px 0px 3px;
margin:0px 1px;
text-align:center;
display:inline-block;
*display:inline;
}
.nivo-controlNav a.active {
background-color:#3399ff;
}

/* Detail navigasi Next & Prev */
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(http://3.bp.blogspot.com/-LTDk7usJ89E/Tz-256SAdGI/AAAAAAAACK4/l0-lD459yQU/s1600/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}

a.nivo-nextNav {background-position:-30px 0;right:15px;}
a.nivo-prevNav {left:15px;}

/* Detail caption gambar */
.nivo-caption {font:bold 12px Arial,Sans-Serif;}
.nivo-caption a {color:#fff;border-bottom:1px dotted #fff;}
.nivo-caption a:hover {color:#fff;}

2. Masukan kode brikut diatas </head> 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://mrpujiajadeh.comze.com/mrpujiajadeh-nivo-slider.js' type='text/javascript'/>
<script type='text/javascript'>
$(window).load(function() {
$(&#39;#slider&#39;).nivoSlider();
});
</script>

3. Masukan kode berikut di Widget HTML sobat:

<div class='nivoSlider'>

<a href='http://al-atsariyyah.com/wajibnya-shalat-berjamaah.html' target='_blank'><img alt='hukum shalat berjamaah' src='http://4.bp.blogspot.com/-CgG4_x14M80/UBEsU1rpqlI/AAAAAAAAB9I/mhG99GwBaXo/s1600/shalat%2Bberjamaah%2Bpelajaran%2Bblog.jpg' title='Bagaimana Hukum Shalat Berjamaah?'/></a>

<a href='http://beritamuslimsahih-ahlussunnah.blogspot.com/2011/10/benarkah-musiklagunyanyian-itu-haram.html' target='_blank'><img alt='musik haramkah' src='http://4.bp.blogspot.com/-2Ass6ZmUVaU/UBEr-EUwQFI/AAAAAAAAB8w/-wEvqiTK2b4/s1600/musik%2Bharam%2Bpelajaran%2Bblog.jpg' title='Benarkah Musik Itu Haram?'/></a>

<a href='http://beritamuslimsahih-ahlussunnah.blogspot.com/2011/12/bagaimana-hukum-cadar-niqabwajib-atau.html' target='_blank'><img alt='hukum cadar' src='http://3.bp.blogspot.com/-iy6Yaos6EsM/UBEr9JUjZHI/AAAAAAAAB8k/QO1sI7wEtPA/s1600/hukum%2Bcadar%2Bpelajaran%2Bblog.jpg' title='Hukum Jilbab dan Cadar'/></a>

<a href='http://beritamuslimsahih-ahlussunnah.blogspot.com/2010/10/ahlussunnah-wa-al-jamaah.html' target='_blank'><img alt='ahlussunnah wal jamaah' src='http://1.bp.blogspot.com/-FVoBxLbHVg4/UBEr8_4ubNI/AAAAAAAAB8Y/0Kq-68Piiyk/s1600/ahlussunnah%2Bpelajaran%2Bblog.jpg' title='Siapakah Ahlussunnah wal Jamaah?'/></a>

</div>

<script type='text/javascript'>
$(window).load(function() {
$('div.nivoSlider').nivoSlider();
});
</script>

4. Silahkan sobat edit yang saya beri tanda merah, seperti Link gambar, URL gambar, dan Judul Gambar / Slide.

5. Klik save

Selamat sobat sudah mempunyai Nivo Slider Dengan Navigasi Angka yang sangat keren.

Cara Membuat Slide Header Di Blog

Cara Membuat Slide Header Di Blog - Buat sobat blogger yang ingin mempercantik blog nya dengan header yang berubah-ubah atau tampilan header nya menjadi slide, bisa mengikuti tips yang satu ini. Dari segi tampilan nya cukup menarik, karena hampir menyerupai tampilan slide flash. Seperti apa demo nya silahkan sobat lihat dibawah ini.

Bagaimana sob, tertarik ingin membuat slide header ini ? Silahkan Ikuti langkah-langkah dibawah ini :

Login ke blogger.com

- Pilih template
- Kemudian pilih Edit html
- Jangan Lupa centang expand widget untuk tampilan html penuh..
- Selanjutnya cari kode </head> ,(gunakan F3 atau dengan Ctrl + F untuk memudahkan pencarian)
- Kemudian masukan code script yang ada dibawah dengan cara copy/paste diatas kode </head>

      <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/> <script src='http://mrmung.googlecode.com/files/coin-slider.min.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function() { $(&#39;#coin-slider&#39;).coinslider({ width: 950,height:144, navigation: false, delay: 5000 }); }); </script>

**> Keterangan : width:950,height:144 adalah ukuran lebar dan tinggi slideshow yang nantinya akan ditampilkan di blog. Tapi Untuk Ukuran ini Terserah masing-masing orang mau seberapa lebar header blog yang dimiliki.. ukuran kecilpun bisa misalkan kita mau memasangnya di sidebar.

• Selanjutnya Pilih HTML/Javascript

Copy/paste script dibawah ini di area HTML/javascript

<div id='coin-slider'>

<center>
<a href="URL LINK" target="_blank">
<img src="LINK URL GAMBAR DISINI" />
<span>

ISIKAN KETERANGAN GAMBAR DI SINI BROW

</span>
</a>

<a href="URL LINK" target="_blank">
<img src="LINK URL GAMBAR DISINI" />
<span>

ISI KETERANGAN gambar DI SINI

</span>
</a>

<a href="URL LINK" target="_blank">
<img src="LINK URL GAMBAR DISINI" />
<span>

ISI KETERANGAN gambar DI SINI

</span>
</a>

</center>
</div>

<div id='coin-slider'>
<center>
<a href="http://www.cobadibaca.com" target="_blank">
<img src="LINK URL GAMBAR DISINI" />
<span>
Hanya Mencoba untuk Coba Dibaca....
</span>
</a>

<a href="URL LINK" target="_blank">
<img src="LINK URL GAMBAR ANDA" />
<span>

ISI KETERANGAN GAMBAR DI SINI

</span>
</a>
<a href="URL LINK" target="_blank">
<img src="LINK URL GAMBAR ANDA" />
<span>

ISI KETERANGAN GAMBAR DI SINI

</span>
</a>

</center>
</div>

Okey, cukup sekian cara membuat slide header di blog.


Semoga Bermanfaat.

Cara Membuat Slider Otomatis Vertikal Image

Cara Membuat Slider Otomatis Vertikal Image - Kali ini saya akan memberikan satu lagi tutorial membuat slider, yaitu slider otomatis untuk image atau gambar vertikal. Slide ini karya dari maskolis.com. Untuk apa kegunaanya dan kira-kira cocok untuk blog bertema apa ? Nanti sobat bisa lihat sendiri di demo live nya.

Slider ini sangat sederhana, dan bekerja secara otomatis berdasarkan artikel terbaru dan kategori tertentu. Untuk lebih jelas silahkan klik demo diatas, slider ini bisa diletakkan di sidebar dengan ukuran lebar 300px. Slider ini sekilas terlihat seperti slider yang ada pada template-template dari designer India seperti Lasantha Bandara, Lansindu, Sameera dan lainnya, yang masih memasukkan gambar dan URL secara manual.  Jika sobat pengguna template buatan mereka, dan ingin mengganti agar slider bekerja secara otomatis, silahkan simak berikut langkah-langkah pembuatannya :

1. Setelah login ke Blogger, pilih blog yang ingin ditambahkan slider ini.
2. Kemudian masuk ke Template >> Edit HTML (centang kotak expand widget templates)
3. Di back up atau disimpan dulu templatenya, jika sewaktu-waktu terjadi kesalahan bisa dikembalikan ke bentuk semula.
4. Klik "Buka" dan masukkan kode berikut di atas kode ]]></b:skin> : 

/* Slider */
.sompret-wrapper {float:right; position: relative;}
.sompret { overflow: hidden; position: relative; width:300px; height:400px;}
.image_reel { position: absolute; top: 0; left: 0; }
.image_reel img {overflow: hidden;float: left;width:300px; height:auto;}
.paging {background:#878773; border:1px solid #676756;padding: 4px 0 2px; text-align: right;z-index: 100; }
.paging a { text-indent:-9999px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8DsfkG_qO4ej5xKgbBFz9Jr0yD9DHUuJlHWnEETBuBQHE3HKKxkY8SEQhLm1vljJ5EgfdOxCsEFUSNdnjFdi6re1dDOZzJ8cSgBBn1pwYzeDLYi4W3T9tmv14t3lH6EG-wdZmMwleFhc/s1600/slider_item.png) no-repeat center; width:10px; height:10px; display:inline-block;margin:3px; border:none; outline:none; }
.paging a.active { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimbALbxhAf0QDCjPZOVj1kFGtooutqvdyxiEUOBfcvKoeaXh1Ft0glXVAOQRAaNiyT292NkC51qG7_RMXPV5yAPIRRWqFDSTE-Uw-GgtQT1vWbGzjRgRz0KKqQv3ZjWkXgv4e8pvvcZpI/s1600/slider_item_active.png) no-repeat center; border:none; outline:none;}
.paging a:hover {font-weight: bold; border:none; outline:none;}
.crott { width:280px; display: none; position:absolute;bottom: 0; left: 0; z-index: 101; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyNyZq7vLTRUWRLSbPEBO0ykycma0hgx47ib0nvHAMD3xmiuoNwKbxU_jdQy39r8tXwimpE2P4hwPi1c1FISliWDP4w4w580BOCIyYCfk0gI1FBLtHkGnhaJQaZyWkLPRR4TsbOES-QmrU/s1600/uj-opacity-40.png);padding:5px 10px;  }
.crott a{color: #fff;font: 16px Oswald }
.crott p{color: #fff;font: 12px Arial;}

Kode warna merah diatas adalah ukuran slider, untuk lebar 300px dan tinggi 400px. Perhatikan semua dan Anda harus sesuaikan dengan ukuran sidebar pada template yang Anda gunakan.

5. Masih di Edit HTML, masukkan kode script berikut ini diatas </head> :

<script src='http://code.jquery.com/jquery-1.8.3.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function() {

//Set Default State of each portfolio piece
$(".paging").show();
$(".paging a:first").addClass("active");

//Get size of images, how many there are, then determin the size of the image reel.
var imageWidth = $(".sompret").width();
var imageSum = $(".image_reel img").size();
var imageReelWidth = imageWidth * imageSum;

//Adjust the image reel to its new size
$(".image_reel").css({'width' : imageReelWidth});

//Paging + Slider Function
rotate = function(){
   var triggerID = $active.attr("rel") - 1; //Get number of times to slide
   var image_reelPosition = triggerID * imageWidth; //Determines the distance the image reel needs to slide

   $(".paging a").removeClass('active'); //Remove all active class
   $active.addClass('active'); //Add active class (the $active is declared in the rotateSwitch function)
 
$(".crott").stop(true,true).slideUp('slow');

$(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");

   //Slider Animation
   $(".image_reel").animate({
       left: -image_reelPosition
   }, 500 );


};

//Rotation + Timing Event
rotateSwitch = function(){
$(".crott").eq( $('.paging a.active').attr("rel") - 1 ).slideDown("slow");
   play = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
       $active = $('.paging a.active').next();
       if ( $active.length === 0) { //If paging reaches the end...
           $active = $('.paging a:first'); //go back to first
       }
       rotate(); //Trigger the paging and slider function
   }, 10000); //Timer speed in milliseconds (3 seconds)

};

rotateSwitch(); //Run function on launch

 //On Click
    $(".paging a").click(function() {  
        $active = $(this); //Activate the clicked paging
        //Reset Timer
        clearInterval(play); //Stop the rotation
        rotate(); //Trigger rotation immediately
        rotateSwitch(); // Resume rotation
        return false; //Prevent browser jump to link anchor
    });  

});

//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyxnkDBUcLmMLS2P8C8FV8tiTSuwZ60swRXed3hVc534YToAD-x5ljsRrbdhsNw5TCwBHQRYDNn2wAeRsTA8lrV7jHdWsLmfGQfM2guIfL9PXyiAy_ovzVTEMJsgeDuJsKn_So7bxawsY/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost1 = 80;
summaryTitle = 20;
numposts1 = 6;

function removeHtmlTag(strx,chop){
    var s = strx.split("<");
    for(var i=0;i<s.length;i++){
        if(s[i].indexOf(">")!=-1){
            s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
        }
    }
    s =  s.join("");
    s = s.substring(0,chop-1);
    return s;
}

function showrecentposts1(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img  = new Array();
   
  for (var i = 0; i < numposts1; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
var pcm;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }

for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
        pcm = entry.link[k].title.split(" ")[0];
        break;
      }
    }

    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
   
    postdate = entry.published.$t;

if(j>imgr.length-1) j=0;
img[i] = imgr[j];

s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["January","February","March","April","May","June","July","August","September","October","November","December"];

var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];

for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = m+ ' ' + day + ' ' + y ;

var trtd = '<div class="crott"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'... </p></div>';
document.write(trtd);    

 j++;
}

}

function showrecentposts2(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img  = new Array();
 
  for (var i = 0; i < numposts1 ; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
var pcm;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        posturl = entry.link[k].href;
        break;
      }
    }

for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
        pcm = entry.link[k].title.split(" ")[0];
        break;
      }
    }

    if ("content" in entry) {
      var postcontent = entry.content.$t;}
    else
    if ("summary" in entry) {
      var postcontent = entry.summary.$t;}
    else var postcontent = "";
   
    postdate = entry.published.$t;

if(j>imgr.length-1) j=0;
img[i] = imgr[j];

s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);

if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;

//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';


var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];

for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = day+ ' ' + m + ' ' + y ;

var trtd = '<a href="'+posturl+'"><img src="'+img[i]+'"/></a>';
document.write(trtd);    

 j++;
}

}
 //]]>
</script>

Perhatikan kode script warna merah paling atas, jika pada template Anda sudah terpasang script itu seri berapapun, kode script itu tidak usah diikutkan, hanya satu jquery yang ada pada sebuah template jika ada dua atau lebih akan bentrok dan salah satu fungsinya tidak jalan.. numposts:6; adalah jumlah post yang tampil pada slider.

6. Sekarang sobat tinggal mau meletakkan slider itu dimana, jika ingin diletakkan di sidebar sebelah kanan paling atas seperti terlihat pada demo. Cari kode <div id='sidebar-wrapper'> atau kode pembungkus sidebar yang ada pada template Anda, kemudian letakkan kode berikut ini sebelum atau diatas <div id='sidebar-wrapper'> :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sompret-wrapper'>
<div class='sompret'>
<div class='image_reel'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);
</script></div>
<div class='description'>
<script>    
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</div>
<div class='paging'>
<a href='#' rel='1'/>
<a href='#' rel='2'/>
<a href='#' rel='3'/>
<a href='#' rel='4'/>
<a href='#' rel='5'/>
<a href='#' rel='6'/>
</div>
</div></b:if>

Slider diatas bisa sobat modifikasi sendiri, sobat juga bisa gunakan slider ini untuk gambar horisontal (tidak harus vertikal) berusahalah untuk lebih kreatif dengan merubah ukuran panjang dan lebarnya.

Source : www.maskolis.com

Cara membuat Slide Accordion Dengan CSS3

Cara membuat Slide Accordion Dengan CSS3 - Menu slide yang satu ini dijamin super keren sob, selain untuk menampilkan menu blog sobat, slide ini juga bisa untuk menampilkan produk-produk yang sedang sobat promokan.

Slider ini tidak memiliki masalah kompatibilitas jika kita mengesampingkan IE. Widget ini bekerja sempurna dihampir semua browser lainnya.

Berikut daftar browser yang mendukung:
1. Chrome: v4 dan diatasx
2. Firefox: v4 dan diatasx
3. Safari: v3 dan diatasx
4. Opera v10.5 dan diatasx
5. IE: v10 dan diatasx

Baiklah cukup untuk penjelasan, sekarang melangkah pada tutorial menambahkan Slide Accordion Dengan CSS3 ke blog sobat

1. Seperti biasa login ke akun blogger  >> Template >> Edit HTML >> Proceed
2. Cari kode <div id='main-wrapper'>
3. Setelah dapat tambahkan kode HTML berikut diatas kode no 2 tadi

<!-- Accordion Featured Post Slider @TipsTrikBlogging.com -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<div id="tbi_slider">
<ul>
<li>
<div id="tbi_title">
<a href="POST LINK">TITLE</a>
</div>
<a href="POST LINK">
<img src="IMAGE LINK "/>
</a>
</li>
<li>
<div id="tbi_title">
<a href="POST LINK">TITLE</a>
</div>
<a href="POST LINK">
<img src="IMAGE LINK "/>
</a>
</li>
<li>
<div id="tbi_title">
<a href="POST LINK">TITLE</a>
</div>
<a href="POST LINK">
<img src="IMAGE LINK "/>
</a>
</li>
<li>
<div id="tbi_title">
<a href="POST LINK">TITLE</a>
</div>
<a href="POST LINK">
<img src="IMAGE LINK "/>
</a>
</li>
<li>
<div id="tbi_title">
<a href="POST LINK">TITLE</a>
</div>
<a href="POST LINK">
<img src="IMAGE LINK "/>
</a>
</li>
</ul>
</div>
</b:if>
<!-- Accordion Featured Post Slider @TipsTrikBlogging.com -->

Catatan:

• Ganti TITLE dengan judul posts (Buat Pendek Saja)
• Ganti POST LINK dengan link postingan anda
• Ganti IMAGE LINK dengan link gambar anda. 

4. Setelah menambahkan Kode HTML sekarang tambahkan kode CSS berikut diatas kode ]]></b:skin>

/* Accordion Featured Post Slider @ TipsTrikBlogging.com */
#tbi_slider {
    overflow: hidden;
    margin: 20px auto;
    padding: 0;
    width: 805px;
    height: 320px;
-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}
#tbi_slider ul {
    margin: 0;
    padding: 0;
    width: 2000px;
}
#tbi_slider li {
    position: relative;
    display: block;
float: left;
    width: 160px;
    border-left: 1px solid #888;
-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
    transition: all 0.5s;
}
#tbi_slider ul:hover li {
    width: 40px;
}
#tbi_slider ul li:hover {
    width: 640px;
}
#tbi_slider li img {
    display: block;
    width: 640px;
}
#tbi_title {
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px;
    width: 640px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font: bold 16px 'trebuchet MS', sans-serif;
}
#tbi_title a {
    display: block;
    color: #fff;
    text-decoration: none;
}
/* Accordion Featured Post Slider @ TipsTrikBlogging.com */

Tidak ada yang perlu diganti pada bagian ini.

5. Silahkan simpan template dan lihat hasilnya .

Source

Cara Membuat Slideshow Jquery New Version

Cara Membuat Slideshow Jquery New Version - Selain dapat membuat tampilan blog lebih cantik, slide show juga berfungsi untuk menampilkan postingan terbaru, promosi dari suatu produk, atau berupa informasi penting lainnya dari blog yang anda kelola mupun blog lain yang memang patut ditampilan pada slide show.
Tips membuat Slide Show ini menggunakan dua file java script serta kode-kode lainnya.
Sebagai contoh coba sobat amati gambar dibawah ini :

DEMO

Cara Membuatnya :

    Masuk ke Blogger
    Pilih Rancangan bagian Edit HTML

Langkah Pertama :

Copy kode dibawah, kemudian paste dibawah kode : <body>

<script type="" text="" javascript="">
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"judul image 1","desc":"Keterangan image 1"},{"id":"slide-img-2","client":"judul image 2","desc":"Keterangan image 2"},{"id":"slide-img-3","client":"jjudul image 3","desc":"Keterangan image 3"},{"id":"slide-img-4","client":"judul image 4","desc":"Keterangan image 4"},{"id":"slide-img-5","client":"judul image 5","desc":"Keterangan image 5"},{"id":"slide-img-6","client":"judul image 6","desc":"Keterangan image 6"},{"id":"slide-img-7","client":"judul image 7","desc":"Keterangan image 7"}];
</script>

Ganti tulisan Judul image dan keterangan image dengan tulisan yamg ingin ditampilkan

Langkah Kedua :

Copy kode dibawah ini kemudian paste tepat diatas kode ]]></b:skin>

*{
margin:0;
padding:0;
}
html{
height:100%;
}
body{
height:100%;
color:#a4a4a4;
cursor:default;
font-size:20px;
line-height:16px;
text-align:center;
background-color:#000;
background-position:50% 0;
background-repeat:no-repeat;
font-family:Tahoma,sans-serif;
}
a:link,a:visited{
color:#fff;
text-decoration:none;
}
a img{
border:0;
}
div.wrap{
width:550px;
margin:0 auto;
text-align:left;
}
div#top div#nav{
float:left;
clear:both;
width:550px;
height:52px;
margin:22px 0 0;
}
div#top div#nav ul{
float:left;
width:550px;
height:52px;
list-style-type:none;
}
div#nav ul li{
float:left;
height:52px;
}
div#nav ul li a{
border:0;
height:52px;
display:block;
line-height:52px;
text-indent:-9999px;
}
div#header{
margin:-1px 0 0;
}
div#video-header{
height:550px;
margin:-1px 0 0;
}
div#header div.wrap{
height:299px;
}
div#header div#slide-holder{
z-index:40;
width:550px;
height:299px;
position:absolute;
}
div#header div#slide-holder div#slide-runner{
top:9px;
left:9px;
width:550px;
height:278px;
overflow:hidden;
position:absolute;
}
div#header div#slide-holder img{
margin:0;
display:none;
position:absolute;
}
div#header div#slide-holder div#slide-controls{
left:0;
bottom:228px;
width:550px;
height:46px;
display:none;
position:absolute;
background:url(https://lh4.googleusercontent.com/_1j80TgNqd_8/TZax8SMwKoI/AAAAAAAACQU/jKYyP3pkefo/s128/slide-bg.png) 0 0;
}
div#header div#slide-holder div#slide-controls p.text{
float:left;
color:#fff;
display:inline;
font-size:10px;
line-height:16px;
margin:15px 0 0 20px;
text-transform:uppercase;
}
div#header div#slide-holder div#slide-controls p#slide-nav{
float:right;
height:24px;
display:inline;
margin:11px 15px 0 0;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{
float:left;
width:24px;
height:24px;
display:inline;
font-size:11px;
margin:0 5px 0 0;
line-height:24px;
font-weight:bold;
text-align:center;
text-decoration:none;
background-position:0 0;
background-repeat:no-repeat;
}
div#header div#slide-holder div#slide-controls p#slide-nav a.on{
background-position:0 -24px;
}
div#header div#slide-holder div#slide-controls p#slide-nav a{background-image:url(https://lh4.googleusercontent.com/_1j80TgNqd_8/TZatkNZ9vdI/AAAAAAAACQE/XnxeOeqYwF8/silde-nav.png);}
div#nav ul li a{background:url(https://lh5.googleusercontent.com/_1j80TgNqd_8/TZax-eNRtRI/AAAAAAAACQY/ci4_hxU0QgM/s912/header-bg.png) no-repeat;}

Ganti seluruh ukuran width yang berwarna kuning yang disesuaikan dengan lebar tempat meletakan slide show

Langkah Ketiga

Copy kode dibawah ini kemudian paste tepat diatas kode </head>

<script src='https://sites.google.com/site/epgstudiosite/javascript/jquery.js' type='text/javascript'/><script src='https://sites.google.com/site/epgstudiosite/javascript/scripts.js' type='text/javascript'/>

Klik Tombol Simpan Template

Langkah Keempat

•     Masuk ke Dasbor
•     Pilih Rancangan Bagian Elemen Halaman.
•     Klik Tambah Gadget.
•     Pilih HTML/Javascrpt
•     Copy kode dibawah ini kemudian paste pada kolom yang tersedia

<div id="header">
<div class="wrap">
<div id="slide-holder">
<div id="slide-runner">
<a href=""><img id="slide-img-1" src="https://lh5.googleusercontent.com/_1j80TgNqd_8/TZayimDclcI/AAAAAAAACQ0/K75d647i9Bs/s912/nature-photo6.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-2" src="https://lh3.googleusercontent.com/_1j80TgNqd_8/TZayfqs2MiI/AAAAAAAACQw/WJQfcd1EK-g/s912/nature-photo5.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-3" src="https://lh5.googleusercontent.com/_1j80TgNqd_8/TZaycXbtn7I/AAAAAAAACQs/eFOr4ZS0EZo/s912/nature-photo4.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-4" src="https://lh3.googleusercontent.com/_1j80TgNqd_8/TZaya8bZTwI/AAAAAAAACQo/PmJHp4a1-BY/s912/nature-photo3.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-5" src="https://lh4.googleusercontent.com/_1j80TgNqd_8/TZayQFzxRqI/AAAAAAAACQk/-ZHpEai9IG8/s912/nature-photo2.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-6" src="https://lh5.googleusercontent.com/_1j80TgNqd_8/TZayM8T_5eI/AAAAAAAACQg/5Ld-3JKMqyM/s912/nature-photo1.png" class="slide" alt="" /></a>
<a href=""><img id="slide-img-7" src="https://lh3.googleusercontent.com/_1j80TgNqd_8/TZayJcVzcEI/AAAAAAAACQc/nykm8K_RVZY/s912/nature-photo.png" class="slide" alt="" /></a>
<div id="slide-controls">
<p id="slide-client" class="text"></p>
<p id="slide-desc" class="text"></p>
<p id="slide-nav"></p>
</div>
</div>
</div>
</div>
</div>

Terakhir klik save dan lihat hasilnya.

Source : epg-studio.blogspot.com/2011/04/jquery-slide-show-1.html