Headline
Loading...

Slide Show Gambar Terbaik Di Blogger

Hal - Hal Mengenai tampilan slide yang merupakan animasi gambar  secara acak tampil bergantian untuk menunjukan sebuah peristiwa atau keterangan terhadap sesuatu yang ingin di tampilkan dalam sebuah slide, oleh karena itu saya mencoba memberikan sedikit cara untuk membuat slide show yang menarik dengan css, oleh karena langkah - demi langkah akan kita telusuri bersama
  • Pertama-tama masuk ke dasboard blogspot Anda, lalu pilih Template, Edit HTML. Cari kode ]]></b:skin> atau </style>  di bagian head template. Setelah ketemu (gunakan Ctrl F) copy lalu paste script berikut tepat diatasnya.

.easyslider-wrapper { 

    width: auto; 

    float: left; 

    position: relative; 

    padding-right: 2%; 

    padding-top: 10px; 

    }

.easyslider { 

    overflow: hidden; 

    position: relative; 

    width: 100%; 

    height: 350px; 

    background: #eee; 

    }

.image_reel { 

    position: absolute; 

    top: 0; 

    left: 0; 

    }

.image_reel img { 

    float: left; 

    width: 20%; 

    height: 350px;

    }

.paging { 

    background: none; 

    position: absolute; 

    bottom: 15px; 

    right: 20px; 

    padding:4px 0 2px; 

    z-index: 100; 

    display: none; 

    }

.paging a { 

    margin: 3px; 

    background: #fff; 

    width: 10px; 

    height:10px; 

    display: inline-block; 

    border: none; 

    outline: none;

    }

.paging a.active { 

    background: #15E3FF; 

    border: 1px solid #15E3FF; 

    }

.paging a:hover { }

.easytitledes { 

    width:70%; 

    display: none; 

    position: absolute; 

    bottom: 20px; 

    left: 20px; 

    z-index: 101; 

    background: #000A3F;

    background: rgba(2, 0, 51, 0.6); 

    padding: 10px 15px; 

    }

.easytitledes a { 

    color: #15E3FF; 

    font: 14px sans-serif; 

    text-transform: uppercase; 

    font-weight: bold; 

    }

.easytitledes a:hover { 

    color:#29FF00 

    }

.easytitledes p { 

    color: #fff; 

    font: 12px Arial; 

    }
  • Masukan kode Jquery berikut ini tepat diatas </head>. Namun jika template Anda sudah pernah memasang Jquery dalam versi yang lain, baik itu versi lama, Langsung ke langkah selanjutnya
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
  • Masukan kode JavaScript berikut diatas </head>.

<script type="text/javascript">

$(document).ready(function() {

    $(".paging").show(); 

    $(".paging a:first").addClass("active");



var imageWidth = $(".easyslider").width(); 

var imageSum = $(".image_reel img").size(); 

var imageReelWidth = imageWidth * imageSum;



    $(".image_reel").css({'width' : imageReelWidth});



rotate = function(){ var triggerID = $active.attr("rel") - 1; 



var image_reelPosition = triggerID * imageWidth;



    $(".paging a").removeClass('active');

        $active.addClass('active');



    $(".easytitledes").stop(true,true).slideUp('slow');

    $(".easytitledes").eq( 

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

    $(".image_reel").animate({left: -image_reelPosition}, 400 );

    };



rotateSwitch = function(){

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



play = setInterval(function(){

    $active = $('.paging a.active').next();



if ( $active.length === 0) {

    $active = $('.paging a:first'); } rotate(); }, 4000); };



rotateSwitch(); $(".image_reel a, .easytitledes a").hover(function() {

    clearInterval(play); }, function() { rotateSwitch();

    });

    $(".paging a").click(function() { $active = $(this);

    clearInterval(play); rotate(); rotateSwitch();  return false;

    });

});

</script>
Ada Dua Cara untuk memasukan Slider  yaitu Secara manual atau otomatis
  •  Menggunakan Slider Manual
Masukan kode berikut di bagian dalam HTML body blog Anda, dibawah kode <div class="main-wrapper" > atau <div id="main-wrapper" > atau baris kode yang sejenis atau mirip, karena struktur setiap Blog memiliki nama yang berbeda-beda.

Karena saya menggunakan template standar dari blogspot yang terbaru, kode itu saya tempatkan dibawah kode <div class='blog-posts hfeed'>. Itu karena saya ingin slider tersebut sejajar dengan kolom postingan. Jika Anda tertarik melakukan hal yang sama, letakkan kode berikut dibawah  <div class='blog-posts hfeed'> yang pertama.


<b:if cond='data:blog.url == data:blog.homepageUrl'>

<div class='easyslider'>

   <div class='image_reel'>

<a href="#"><img src="...image1.jpg" /></a>

<a href="#"><img src="...image2.jpg" /></a>

<a href="#"><img src="...image3.jpg" /></a>

<a href="#"><img src="...image4.jpg" /></a>

<a href="#"><img src="...image5.jpg" /></a>

   </div>

   <div class='descriptionslider'>

<div class="easytitledes"><a href='...post-link1.html'>Post-Title 1</a><p>Description / Caption 1</p></div>

<div class="easytitledes"><a href='...post-link2.html'>Post-Title 2</a><p>Description / Caption 2</p></div>

<div class="easytitledes"><a href='...post-link3.html'>Post-Title 3</a><p>Description / Caption 3</p></div>

<div class="easytitledes"><a href='...post-link4.html'>Post-Title 4</a><p>Description / Caption 4</p></div>

<div class="easytitledes"><a href='...post-link5.html'>Post-Title 5</a><p>Description / Caption 5</p></div>

   </div>

   <div class='paging'>

<a class='' href='#' rel='1'/>

<a class='' href='#' rel='2'/>

<a class='' href='#' rel='3'/>

<a class='' href='#' rel='4'/>

<a class='' href='#' rel='5'/>

   </div>

</div>

</b:if>

Catatan: 
Kode berwarna merah adalah untuk link image atau gambar, Biru untuk link Url posting atau artikel, Wanah hijau untuk Title atau Judul, dan Orange untuk deskripsi. Semuanya dimasukan satu persatu ke dalam baris kode HTML.
  • Menggunakan Slider dengan Otomatis Publish Artikel Terbaru
Pertama-tama, tambahan kode JavaScript berikut ini sebelum atau diatas kode </head> , kode inilah yang akan untuk menampilkan artikel terbaru secara otomatis.


<script type='text/javascript'>//<![CDATA[

imgr = new Array();imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";showRandomImg = true;aBold = true;summaryPost1 = 150;summaryTitle = 20;numposts1 = 5;

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 = ""; var trtd = 
'<div class="easytitledes"><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;}; 
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; var trtd = '<a href="'+posturl+'"><img 
src="'+img[i]+'"/></a>'; document.write(trtd); j++;}}

//]]></script>

Catatan: 
Kode warna Merah adalah link image/gambar yang tampil jika dalam suatu artikel tidak ada gambarnya, sebaiknya anda mengganti link ini dengan link image anda sendiri, supaya pemakaian tidak terbagi-bagi dengan orang lain.

Masukan kode berikut disuatu bagian dalam body template, dibawah <div class="main-wrapper" > atau yang sejenis. Seperti diatas, saya memasang kode ini dibawah kode <div class='blog-posts hfeed'> yang pertama agar slider sejajar dengan postingan.



<b:if cond='data:blog.url == data:blog.homepageUrl'>

<div class='easyslider'>

   <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='descriptionslider'>

<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 class='paging'>

<a class='' href='#' rel='1'/>

<a class='' href='#' rel='2'/>

<a class='' href='#' rel='3'/>

<a class='' href='#' rel='4'/>

<a class='' href='#' rel='5'/>

   </div>

</div>

</b:if>

Kode yang diberi warna merah adalah baris kode pembuka dan penutup untuk menampilkan slider hanya di homepage saja. Jadi slider tidak akan tampil disemua halaman blog. Hanya ketika seseorang melihat homepage atau beranda, slider ini tampil

Setelah yakin dengan hasilnya (preview terlebih dahulu) selanjutnya, Simpan Template.
Jika semua berjalan baik dan lancar maka, saat ini blog Anda sudah memiliki slider sederhana nan elegan. Mudah bukan!. Jika masih ada yang perlu ditanyakan, silahkan mengisi kolom komentar dibawah ini. Terima kasih, semoga bermanfaat.
di 13.47

2 komentar

Mantap

Ingin Dipraktekan

1. Berikan Komentar Anda Sesuai dengan Judul Artikel.
2. Komentar yang menyertakan link aktif, iklan, atau titip link, akan dimasukan ke folder SPAM.
3. Untuk pertanyaan Out Of Topic ( OOT ) silahkan klik Forum

Konversi KodeEmotionForum

Back to Top