Hot Todays

Tuesday, September 4

Membuat Gambar Slider Carousel Otomatis Berdasarkan Label


Tutorial kali ini saya akan membahas bagaimana membuat slider Carousel otomatis berdasarkan label. Prinsip kerja dari slider ini sama seperti pada slider otomatis berdasarkan kategori. Anda tinggal mengganti dengan label anda dan slider ini akan bekerja sesuai dengan label yang anda masukkan. Slider Carousel yang saya buat kali ini sangat sederhana dan hanya menggunakan jCarousellite script tanpa menambahkan efek easing dan mousewheel.



Cara pemasangannyapun sangat mudah, jika anda sudah pernah mempraktekkan artikel saya terdahulu yang berjudul membuat slider otomatis berdasarkan kategori tertentu, tutorial kali ini terasa sangat mudah, karena langkah-langkah pembuatannya hampir sama. Langsung saja di bawah ini langkah-langkah untuk membuatnya :
  1. Login ke blogger dengan akun Anda
  2. Setelah itu pilih blog yang ingin anda tambahkan slider ini.
  3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
  4. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
  5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
  6. #carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
    #carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit3cJObC0skqVyxbDfAf4Kl6l2idnezdgSI8nA-ruPIYa69rCtjp6muz-IVAF28dzFx3CizYlbT2-zPinYu_8Wlvf3rBT-acbFnkqcqBXaqKXFpq7NPtO73eJEXQjtUxPL-tNHhNd4zKo/s1600/scroller-bg.png) repeat center}
    #carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-enojqHtECltznm1Ay30U3HWt66aQqJawhvW8fCc-64JHvRMi1vpLXzBwGhFUea2CBGZi66SG8d3g1HVrRJ66f3iBY7KEF-4AD5XbM26E5zasI5bLQq6NjyY5Qol68S5WDD2wDPZGRpc/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
    #carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8IOg0n8jADGFCVQzGQSwBe3FXhOMqz2YgmVLMMD8iDG36xwbTpgl3UtoTR_FtwKyZ-bvh4dykpvyugBMHc7lePooHoGqPuajz2LzFz_7MzGdHZm4jhnbuvYIF_wydoFvWIiitFlCEtmw/s1600/prev.png) center}
    #carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ0fXA9nRSF_cAvh8pl6-c71AkcGs6qhcf77CPmpq3A38pIYnbVtqxn4SfGXW05brGBK_bf6RHh4gPnGuwNfBmL7Z2L2O1C7Q5kAgk-CooVjf_RVzbluoi8cOlj8hkClj5bJGiUO6N9dw/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
    #carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhShyvuGoQbjNdL5oFch3-eZtykSxCV3VedohavmUbmuRrUApQHLlD6XU0AtuNhByIvElejMn5T1BpnwQFnLqRcD1oQ1Rs-7VDR6aAHIvZAZii7Jq1PbDaW1C_kAqKY0twdvaDLsoTH2WA/s1600/next.png) center}
    #carousel ul{width:100000px;position:relative;margin-top:10px}
    #carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd2p9SLlHs0aotFWB4TeHZtEKdqjUAMw2AaEZ3J21Q9c0gfJm6Ex6SqSJ5_7O8ixpTP3EquWk7rFKfA6S0vpRbpwy4041GDW-HuQRnenjBxAl9tFf9AJm1IKW3MJJyhR_wgwFTJNgI0oU/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
    #carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
    #carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
    #carousel ul li a.slider_title:hover{color:#cd1713}
    #carousel a img{display:block;background:#fff;margin-top:0}
    Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.
  7. Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
  8. <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
    <script src='https://masolis-javascript.googlecode.com/svn/trunk/carousellite.js' type='text/javascript'/>

    <script type='text/javascript'>
    //<![CDATA[
    imgr = new Array();
    imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB5UHyZehbtOyNSlGdmcGAzFMlZ5oVpraugjH0yBABoYXWsQp5gxRhBhmgyRctIVbC3nTEqSzb27zW8m18vXP1Ju2qdC8ZjzrbqxdVLlJjx-kO7iIQVkCWWxaQWb2zgZC4R3bDpCU3A4c/s1600/no+image.jpg";
    showRandomImg = true;

    aBold = true;

    summaryPost = 140;
    summaryTitle = 25;

    numposts1 = 15;
    label1 = "news";

    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 showrecentposts(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img = new Array();
    document.write('<ul>');
    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 = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

    document.write(trtd);
    j++;
    }
    document.write('</ul>');
    }
    //]]>
    </script>
    Keterangan :
    Perhatikan URL script warna merah diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
    Sedangkan kode warna biru : 15 adalah jumlah slider yang ditampilkan. Dan news adalah label yang ditampilkan pada slider nantinya (Ingat besar kecil huruf harus sama dengan label yang sudah Anda buat).
  9. Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini diatasnya :
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div id='carousel'>
    <div id='previous_button'/>
    <div class='container'>
    <script>

    document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
    </script>   
    <div class='clear'/>
    </div>
    <div id='next_button'/>
    </div>
    <script type='text/javascript'>
    (function($) {     $(document).ready(function(){
    $(&quot;#carousel .container&quot;).jCarouselLite({
        auto:4000,
        scroll: 1,
        speed: 800,   
        visible: 5,
        start: 0,
        circular: true,
        btnPrev: &quot;#previous_button&quot;,
        btnNext: &quot;#next_button&quot;
        });
        })})(jQuery)   
    </script>
    </b:if>
     Kode diatas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan diatas footer. 
  10. Langkah terakhir, save templates dan lihat hasilnya. Jika Anda ikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.
Sangat mudah ya walau ada sedikit banyak sriptnya, anda tinggal ikuti langkah-langkah diatas dan baca dengan teliti jangan terburu-buru, Jika masih ada yang kurang jelas silahkan tinggalkan pesan pada kotak komentar yang ada di bawah. Itu tadi tutorial singkat tentang bagaimana cara membuat slider Carousel otomatis berdasarkan kategori atau label kali ini, selamat mencoba dan semoga bermanfaat.
9 out of 10 based on 10 ratings. 9 user reviews.

Manfaat Tersenyum


Berikut manfaat senyum yang mungkin tidak kita sadari selama ini:
 
1. Senyum membuat kita lebih menarik
Orang yang mudah tersenyum mempunyai daya tarik tersendiri. Bandingkan dengan wajah seseorang yang cemberut, membuatnya dijauhi oleh rekan sekitarnya.

2. Senyum mengubah mood kita
Saat anda sedang merasa jatuh cobalah untuk tersenyum dan berkaca, bisa jadi mood kita akan berubah menjadi lebih baik.

3. Senyum dapat memancing orang dihadapan kita membalas senyum
Saat anda tersenyum maka senyum tersebut akan membuat suasana menjadi lebih cerah, mengubah mood orang lain yang ada disekitarnya dan membuat semua orang menjadi senang. Bila anda mudah tersenyum, maka orang sekitar anda akan ikut merasa bahagia. Bila anda mudah tersenyum tersenyum maka anda akan disukai oleh banyak orang.

4. Senyum dapat mengurangi stres
Salah satu tanda stress nampak pada wajah. Bilamana anda merasa bahwa wajah anda sangat tidak enak untuk dipandang, sesegera mungkin untuk tersenyum karena senyum membantu mencegah kesan bahwa kita sebenarnya sedang stres, lelah atau merasa “down”.

5. Senyum meningkatkan sistem imun (kekebalan) tubuh
Senyum akan membuat anda rilek, sehingga bisa membantu kerja imun tubuh agar dapat bekerja dengan baik. 

6. Senyum mengeluarkan endorphins (pereda rasa sakit secara alami) dan serotonin 
Beberapa studi telah menunjukkan bahwa senyum dapat merangsang pengeluaran endorphin, pereda rasa sakit yang alami, serta serotonin. Senyum memang obat yang alami.

7. Senyum dapat melenturkan kulit wajah dan membuat Kamu terlihat lebih muda
Otot-otot yang digunakan untuk tersenyum ikut membuat Kamu terlihat lebih muda. Jika Kamu ingin sesuatu yang beda, maka berikan senyummu sepanjang hari, maka Kamu akan terlihat lebih muda dan merasa lebih baik. Karena itu dapat Menghilangkan Jerawat juga.

8. Senyum membuat Kamu tampak sukses
Orang yang tersenyum terlihat lebih percaya diri dalam menjalani hidupnya. Cobalah tersenyum saat Kamu melakukan pertemuan dan saat ada janji. Rekan-rekan kerja, sahabat, orang-orang terdekat Kamu akan merasakan sesuatu yang berbeda dan sukses.

9. Senyum membuat Kamu tetap positif
Senyumlah! Lalu sekarang cobalah berpikir sesuatu yang negatif tanpa berhenti tersenyum. Sulitkan? Karena ketika Kamu tersenyum maka senyum tersebut akan mengirimkan sinyal ke tubuh Kamu bahwa “hidup Kamu saat ini baik-baik saja”. 

9 out of 10 based on 10 ratings. 9 user reviews.

Advertisements