mas template

Membuat Slider Carousel Otomatis Versi 2

Sebenernya sudah lama sekali saya diminta oleh seorang teman blogger Ronny Dee untuk membuat tutorial slider Carousel seperti pada template Mas Paper 2. Kali ini saya akan membuat tutorialnya tapi hanya memakai slider carousel sederhana yang sudah pernah saya buat pada tutorial sebelumnya, disini saya hanya memodifikasi kode CSS nya saja, sehingga tampilannya mirip dengan slider Carousel yang ada di template Mas Paper 2. Tapi kalau dilihat sepintas, justru slider ini lebih mirip dengan slider Carousel yang ada di bagian atas (bawah navigasi) halaman depan situs detik.com.

slider carousel


Cara membuatnya hampir sama dengan slider Carousel otomatis versi 1, disini saya hanya merubah kode CSS dan menambahkan timestamp diatas judul post. Langsung saja di bawah ini langkah-langkah untuk membuatnya :
  1. Pertama Anda mesti 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 jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
  5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
    #carousel{width:980px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#5599e6;margin-bottom:8px}
    #carousel h5{color:#555;margin:2px}
    #carousel .container{position:absolute;left:24px;width:960px;height:125px;overflow:hidden}
    #carousel .thumb{float:left;margin-right:5px;}
    #carousel #previous_button{position:absolute;width:24px;height:125px;background:url(http://3.bp.blogspot.com/-vxUtQ_S674s/T-8KtEsewAI/AAAAAAAAHGs/cfd8RK0R-vM/s1600/previous.png) center;z-index:100;cursor:pointer;}
    #carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(http://3.bp.blogspot.com/-FaZC4Gr6pS0/T-8KsaJKtHI/AAAAAAAAHGk/GDXOy42rx3Q/s1600/next.png) center;z-index:100;cursor:pointer;}
    #carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7}
    #carousel ul{width:100000px;position:relative;margin-top:10px}
    #carousel ul li{background:#ebebeb;display:inline;float:left;text-align:left;font:bold 11px Arial;border:0px solid #ccc;width:212px;height:90px;margin:0 2px 20px 6px;padding:6px}
    #carousel ul li a.slider_title{color:#222;display:block;margin-top:0;padding-top:0}
    #carousel ul li a.slider_title:hover{color:#1b5d97}
    #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.
  6. Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
    <script src='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>

    <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;

    summaryPost = 140;
    summaryTitle = 25;
    numposts1 = 12;

    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 = ["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 = day+ ' ' + m + ' ' + y ;
    var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="100" height="90" class="alignnone" src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></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.
    Kode warna biru : 12 adalah jumlah slider yang ditampilkan. Sedangkan angka 100 dan 90 adalah panjang dan lebar image yang ada di slider.
  7. 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/-/sport?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>
    Perhatikan kode warna merah diatas, sport adalah label yang ditampilkan pada slider nantinya (Ingat besar kecil huruf harus sama dengan label yang sudah Anda buat). Jika Anda ingin menampilkan postingan atau artikel terbaru pada slider, tinggal hapus kode /-/sport. Kode diatas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan diatas footer. 
  8. Langkah terakhir, save templates dan lihat hasilnya. Jika Anda ikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.
Demikian tadi tutorial membuat slider Carousel otomatis versi 2, seperti biasa jika ada yang kurang jelas silahkan tinggalkan pesan di kotak komentar. Selamat mencoba dan semoga bermanfaat
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

170 comments:

  1. bagus ni mas,,saya tes dulu di blog saya..owh ya kapan maskolis.blogspot.com ganti template mas?perasaan beda dulu

    ReplyDelete
  2. Assalamualaikum. met pagi mas.
    ijin make tutorialnya ya.
    Sukses terus buat maskolis

    ReplyDelete
  3. Sangat bermanfaat sekali mas.. :)
    Salut buat mas kolis.
    Klo ada share tamplate WP dunk mas.. :)

    ReplyDelete
  4. Thanks buat tutorialny maz.. mo belajar buat themes sendiri jg nich :)

    ReplyDelete
  5. assalamualaikum... slam sukses...
    baru lagi ya mas!! keren bgt...dahsyat...
    mau tanya ni mas.. aku pake johny storage blue..
    kira kira bisa ditambah dengan label untuk berita video gak mas seperti pada http://maskolis.blogspot.com/ tapi letaknya di atas label 7 johny storage...

    berikut blog alamat blog saya mas.. tapi maaf belum jadi..
    http://primeoke.blogspot.com/

    terima kasih mas..
    smoga sukses selalu maskholis...

    ReplyDelete
  6. @tips bisnis online:
    Sama-sama mas, semoga bermanfaat

    @unik-aneh.com:
    Iya mas, template yg kemarin nggak seo & susah ke indeks google itu baru kemarin diganti sama adik saya, itu bukan blog saya tapi punya adik. Saya cuma bantu modifikasi aja

    @Juned Junaedi:
    Wa'alaikum salam Silahkan pak guru semoga bermanfaat

    @komud.com:
    Wah mas Andreas udah pindah ke WP ya, pantesan jarang nongol. Saya kapok mas share theme WP berbayar, tapi dibuat gratis byk komplain krn kode scriptnya byk yg beda sama yg asli berbayar.

    Kalo saya sendiri belum berani bikin theme WP, selain susah juga perlu banyak biaya buat bikinnya. Mesti beli hosting dan domain

    @DB Pengky:
    Sama-sama mas, silahkan mencoba membuat theme sendiri kalo udah jadi bisa di share disini

    @Prime Gontor:
    Wa'alaikum salam. Itu susahnya pak, template johny storage ini saya kondisikan utuh menjadi satu kesatuan, maksudnya nggak bisa dipisah satu-satu jadi kalo mau bikin salah satu fitur yg ada di template itu mesti dirubah struktur kode HTML dan javascriptnya semua. Dan template johny storage dengan template yang di pake adik saya di blog demo itu struktur kode HTML dan javascriptnya udah berbeda

    ReplyDelete
  7. Owh begitu ya mas.. :)
    Thk infonya..
    Saya mau coba WP karna prustasi Goole adsense sering ke baned pakek mas.. soalnya acount goole multy login, sehingga ip nya ke tahuan melakukan ini itu.. :D

    Di tunggu post terbarunya mas..

    ReplyDelete
  8. assalamualaikum,.. makasih atas tutorialnya mas,..
    kalau boleh aku mau tanya lagi cara membuat berita video pada blog adik mas di maskolis.blogspot.com kayakna keren tuh mas kalau di pasang di blog aku. zikotube.blogspot.com
    thanks untuk bantuannya.

    ReplyDelete
  9. bagus mass kereeennn

    habis ini bikin slide yang kayak di ganool.com ya mas
    saya tggu
    heheheh

    ReplyDelete
  10. @zikofamily:
    Itu prinsip kerjanya sama kek di template Johny Crottube, coba baca disini http://creatingwebsite-maskolis.blogspot.com/2012/06/johny-crottube-template-iseng-sambil.html

    Asalkan cara membuat post video seperti di tutorial itu thumbnail videonya pasti nampak. Dan coba perhatikan pada template Johny Crottube pada video category 1 dan 2, modelnya sama cuma ini thumbnailnya dikecilin

    @zikofamily:
    Lhah slider carousel versi 1 kan udah, tinggal dihilangkan aja judulnya, trus dipersempit jarak antar gambarnya

    ReplyDelete
  11. salam sukses wat maskolis,,keren slidernya,,lebih lengkap lagi kalau bikin templatenya seperti detik.com..oh ya mas kalau slidernya biar jalan bolak-balik gimana???

    ReplyDelete
  12. Assalamualaikum"
    Mau tanya nih"

    Perasaan tadi pagi saya ajukan Pertanyaan Belum dijawab, atau Mungkin otomatis terhapus lagi, padahal saya tidak Menghidupkan Link.

    Saya ingin bertanya. Cara membuat Label perkatagori, Sebagaimana ada pada Blog, Maskkolis.blogspot.com

    LABEL : RENUNGAN
    BERITA ANEH. dll

    ReplyDelete
  13. @Hanu:
    Wah kalo buat template spt situs2 yg udah jadi saya gak berani mas, melanggar hak cipta kalo belum menta ijin duluan.
    Slider diatas udah bolak-balik coba perhatikan mulai dari awal balik lagi ke awal, nggak ada jeda putusnya

    @Muhammad Zakaria:
    Wa'alaikum salam mas
    Paling gampang pake cara yang saya kasih kemarin mas, untuk membuat label spt di blog demo susah dan mesti di rombak semua kodenya soalnya kode yg mesti dipasang ada hub dgn slider dan fiture lain di template itu, coba baca jawaban komentar saya untuk Prime Gontor diatas

    ReplyDelete
  14. spertinya temen2 gi pada nunggu tutorial template http://maskolis.blogspot.com/
    untuk di share disini mas...

    pkoknya sukses slalu mas..
    terimakasih atas infonya.... !!

    ReplyDelete
  15. Owh Gitu ya?? Sulit...

    Mas Kolis" Kalau ganti domain bisakah tanpa kartu Kredit?

    ReplyDelete
  16. @Muhammad Zakaria:
    Bisa mas pake transfer rekening, hubungi salah satu provider domain dan hosting yg dituju, kmdn tanyakan langsung lewat YM nya gimana cara beli domain dan minta suruh di redirect sekalian dari blogspot ke domain yg dimaksud

    ReplyDelete
  17. Mas, Saya saya pake storage blue, sudah coba pasang di tamplate tapi gambarnya melewati batas pinggirnya ampe kelewat. Gimana cara ngatasinnya, Trus Ada dua lagi, bagaimana cara menghapusnya satu. Tlg mas ya...Ini blog saya supaya mascolis bisa liatin www.tabayyunews.com

    ReplyDelete
  18. Mas Kholisssssssss...Makasih ilmunya...ane dah terapin ke Blog http://terasdn(dot)blogspot(dot)com...cuman ane ngga faham merubah slider otomatis bawaan template-nya...ane mo pake slider otomatis yang antum buat..gmn yach caranya..???? Makasih atas jawaban dan pengajarannya Stadz Kholis ^_^

    ReplyDelete
  19. Itu disitus apa saja yah?

    He..he..he... beda pembahasan nya yah...

    Masalahnya tips ini sudah saya komentari tadi pagi tapi tidak nongol...

    ReplyDelete
  20. @tabayyunews:
    Pake salah satu aja mas, yang bawah atau yang atas kalo dua2nya bisa spt itu memang

    @El-Mahfuthz:
    Itu saya liat di blognya udah kepasang bagus mas, tinggal sesuaikan warna background slidernya aja mas, perhatikan kode css pada langkah nomer 5 diatas, tinggal dirubah aja backgroundnya mas

    ReplyDelete
  21. @Muhammad Zakaria:
    Dulu saya biasa di plasahosting cuma 90 ribu pertahun

    ReplyDelete
  22. Trims pencerahannya dan Maksud saya slider otomatis bawan templatenya mo saya ganti...slide otomatis yg dri antum biar aja backgroundnya warna biru cuz banyak yg suka heee...nih screen shoot slider bawaan templatenya yg mo saya ganti Pak guru : https://fbcdn-sphotos-a.akamaihd.net/hphotos-ak-snc7/391188_492523587440357_842931477_n.jpg

    ane mo pake slider otomatis antum aja ^_^
    Syukron Pak Guru..(alamat ngirim J-co donut kmn nich...?)

    ReplyDelete
  23. @El-Mahfuthz:
    Yee... siapa juga yang pak guru
    Ini slider yang mana lagi nih...? *bingung

    Donutnya kasih ke anak yatim aja...

    ReplyDelete
  24. maksudnya slidernya kaya di johny darkgamer 2 mas

    ReplyDelete
  25. Horeeee..udah bisa dihapus..itu slider bwaan dari templatenya bukan dri tutorial antum,Nah ane mo ganti pake slider antum...(ternyata belajar kode HTML,CSS dll nya mengasikkan juga heeee)...makasih jawabannya..ana inisiatif nyari jawabannya di artikel antum yg lain heee..cuz antum repot kan melayani customer yang lain...heee..kher tak kasih anak yatim di belakang rumah.. ^_^

    ReplyDelete
  26. Hi

    I'm daily visitor of you blog, you posts and templates are really looks great. I really appreciated the great and effort you putting.

    I really liking this post demo blog template, which has video posts and normal text posts.

    If possible can add download link for this blog template.


    Thank YOU once again for the great efforts.

    ReplyDelete
  27. Assalamualaikum...

    Bagaimana kalau saya Request... TEMPLATE SEO Friendly...

    ReplyDelete
  28. mas itu cara buat latest post nya pake thumbnail seperti maskolis.blogspot gmna mas? tolong ajarin mas, kalau gak kasih scripnya..

    ReplyDelete
  29. langsung ke pokok permasalahannya aja maskolis, saya mau buat berita video seperti di blog maskolis.blogspot.com, saya udah baca yang di http://creatingwebsite-maskolis.blogspot.com/2012/06/johny-crottube-template-iseng-sambil.html tapi saya tidak mengerti juga, coba mas kasih tau caranya aja mas, tolong mas kolis. saya udah coba tapi tetap tidak bisa terus. kirim ke email saya aja, zondimcom@gmail.com

    ReplyDelete
  30. @Pandu:
    This demo template belong to my brother and there's so many bug in there. Ok I will share this template later if there's no bug anymore

    ReplyDelete
  31. Situs pertemanan Remaja Indonesia http://www.qtarawaci.com
    Gabung Ya

    ReplyDelete
  32. Assalamulaikum::

    Di templte saya udah ada slider yang tidak berjalan..

    saya memakai ini memang bisa jalan tetapi ada 2 kendala yaitu
    1.Gambar sebelah kanan tidak tertutup oleh Tombol next
    2.Tombol back dan next tidak berfungsi.

    bagaimana kah cara mengatasinya..

    terima kasih..

    http://r-merah.blogspot.com/

    ReplyDelete
  33. assalamuaalaikumm, mas saya mau nanya nih, gimana ya mas caranya itu di slider ada garis, bisa gak mas perbaiki, terimakasih mas,

    ReplyDelete
  34. @Zondim:
    Cari dan hapus kode ini di edit HTML : border-bottom:2px solid #000

    ReplyDelete
  35. mas maaf ni banyak maunya, cuma saran aja, kalau bisa berikan tutorial cara buat berita video kayak di maskolis.blogspot.com

    soalnya keren dan bagus, ya kalau bisa aja mas, kalau gak bisa juga gak apa apa, oh ya makasih mas, masalah slider saya sudah teratasi.

    berbagi ilmu itu adalah cara paling ampuh untuk mendekati surga sang pencipta.

    ReplyDelete
  36. malam mas..

    diem-diem saya ambil slider Carousel punya maskolis buat di pasang di template saya yang lg di garaf..heheh

    kalaw menurut maskolis gmana? (combro-oncom.blogspot.com)

    ReplyDelete
  37. Hi
    Is is possible that I use this template?: http://maskolis.blogspot.co.uk/; if yes, please help me to find download link of this template. It is really excellent. thanks.

    ReplyDelete
  38. @کابل:
    This demo template belong to my brother and there's so many bug in there. Ok I will share this template later if there's no bug anymore

    ReplyDelete
  39. hi, maskolis
    i'm sorry this maybe an off topic question but i don't know where to leave this non-related question. hence, i stop here.

    i have put conditional tag on each widget that sit at the left sidebar so that whenever reader click the 'read more' button and directed to particular post pages, they won't see the left sidebar anymore. the issue is i want to widen the post area to fill up the spaces vacated by the left sidebars. Do you have any idea how to fix this? my blog is healthybeautifulblog.blogspot

    Many many many thanks in advance. gbu

    ReplyDelete
  40. Hi, to put the carousel in the Template, disappear ... (three dots) bad end of the text in posts succinct, you will see on the pad http://www.blocfpr.blogspot.com. What should I do to appear, because if I remove the carousel appear again. Thank you.

    ReplyDelete
  41. @Francesc Puigcarbó:
    You have 2 codes script in Edit HTML, this : <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

    Remove one of them, just used one javascript like that in your template Sir

    ReplyDelete
  42. @Honeybee:
    It's too long to explain here, maybe I will answer your question via email

    ReplyDelete
  43. Selamat Siang, Mas Kolis kalau saya ingin menggabung slider carousel ini dengan template Simplex Newsportal bagaimana caranya ya? Karena ada bentrok dengan penandaan numposts (kalau di carousel ini numposts1 = 12)(Bisa ga diberi nama lain numposts nya ? Udah saya coba ga bisa) Makasih ya Mas. Salam Sukses Selalu dan SALUTTTT atas semua template2 nya.
    Kalau saya mohon mas Kolis buat Portal yang kayak Simplex Newsportal mau ga ya. Karena di Simplex Newsportal susah ke Index di Google.

    ReplyDelete
  44. @Utomo:
    Bisa mas tinggal ganti numposts nya jadi numposts13 trus showrecentposts juga diganti showrecentposts13

    Namanya juga template convert wordprss mas, kode bawaan blogger banyak yg dihapus jadi susah ke indeks, perhatikan susunan kode di edit HTML nya dan bedakan dgn template2 saya atau template blogger lainnya. Kalo biin blog pake platform blogger ya harusnya pake templatenya ya blogger jgn hasil convert dari platform lain

    ReplyDelete
  45. Terima kasih Mas Kolis atas petunjuknya, tapi sekarang tampilan dari web nya berubah total. Karena sekarang di Bagian tiap-tiap label post thumbnail nya keluar semua. (Sebelum ditambah Carousel thumbnailnya muncul di post terakhir) Mohon pencerahannya mas hehehe... Makasihhhhh

    ReplyDelete
  46. @Utomo:
    Itu berarti numpost13 atau showrecentpost13 sudah dipake, coba cari angka yang beda mas

    ReplyDelete
  47. Sudah jalan carouselnya mas. Cuman biasanya (sebelum ditambah carousel), gambar thumbnail HANYA MUNCUL di bagian post terakhir LABEL-LABEL saja, tapi sekarang thumbnail muncul di TIAP POSTING LABEL. Gimana ya mas mengembalikan tampilan web nya seperti semula tapi sekarang cuman ada tambahan carousel aja gitu loh maksud saya mas Kolis. Matur suwunnn sebelumnya.

    ReplyDelete
  48. Duh master ieu tea ;))
    Lamo ndak bersuo-suo :d

    ReplyDelete
  49. Mas Tips nya sdh sya lakukan diblog sya tapi munculnya kok hanya di homepage nya saja sedangkan di postingan tidak muncul,,

    ReplyDelete
  50. OM gambar nya gak muncul di blog saya.. mohon pencerahan..
    http://kodimkudus.blogspot.com/

    ReplyDelete
  51. @Kodim Kudus:
    Masuk ke setting pak, trus pilih other/lainnya di baris atas pada allow blog post posisikan ke full atau until jump break

    ReplyDelete
  52. waah slidenya keeren abis.. yang di cari selama ini

    sanyang di tamplateku ga jalan....

    www.alrezacell.web.id

    ReplyDelete
  53. Keren sekali tetapi kenapa di blog saya malah no image
    ~_~?

    ReplyDelete
  54. @Ravik hayyu Khoirullah:
    Masuk ke setting kemudian pilih other/lainnya di baris atas pada allow blog feeds posisikan ke full atau until jump break

    ReplyDelete
  55. Kenapa tidak bisa di pasang di create wesite seperti template yang mas pake ini yach..

    ReplyDelete
  56. @Muslim Netsince:
    Bisa dipasang di semua template blogger mas, tinggal ikuti petunjuknya diatas

    ReplyDelete
  57. thanks sharenya om , nunggu theme maskolis.blogspot.com di bagikan :)

    ReplyDelete
  58. kenapa ukurannya ga bisa dikecilin yang bagian dalamnya? nih http://cepatan.blogspot.com

    ReplyDelete
  59. mas nanya yang width udah tak ganti jadi auto, untuk menyesuaikan slide gambarnya di dalam agar sesuai sama width auto gmn yah, kelebihan soalnya

    ReplyDelete
  60. slider sperti itu yang dipasang di postingan ada ya??

    ReplyDelete
  61. Terima kasih untuk tutorialnya , telah terpasang sempurna di blog kami : SMP Negeri 1 Rakit Banjarnegara.

    Mantaap!!

    ReplyDelete
  62. mas, bisa gak format tanggalnya seperti ini:
    "Jumat, 3 Agustus 2012 - 6:05 PM"

    ReplyDelete
  63. mas. minta ijin ni tutorialnya mau saya koleksi di blog saya..

    ReplyDelete
  64. seperti yang lain mas... :) kalau bisa template demonya diunggah... :) tertarik sama demonya nih.. :)

    ReplyDelete
  65. Template Ane Gk Ada Main Wrapernya bang ,jadi harus di taro di mana ????

    ReplyDelete
  66. kok munculnya di atas header ya, buat mindah, supaya bisa berada di bawah title dan description, gimana mas ?

    ReplyDelete
  67. Mas, setelah saya pasang alhamdulillah, berjalan baik, cuma posisinya ko menutupi descripsi, sudah tak ubah, hasilnya belum bener, kira-kira yang diubah yang mana, trus untuk yang sisi kanan kok nggak balace dengan sisi kiri, terima kasih petunjuknya.

    ReplyDelete
  68. mas diblog ku tidak ada kode id='main-wrapper'> terus gimana apa masih bisa buat slideshow yang keren itu

    langsung kim ke keemail saya aja zamailzero@gmail.com
    terimakasih

    ReplyDelete
    Replies
    1. Letakkan aja di bawah kode navigasi

      Delete
    2. kode navigasi itu seperti apa mas??

      Delete
  69. Selamat Sore Mas, Maav sebelum nya saya minta izin untuk menggunakan searchbar yang ada di maskolis.blogspot.com dengan sedikit revisi

    dana saya juga menggunakan slider yang pada artikel ini. namun permasalahannya sama dengan yang lain. pada di bagian sebelah kanan, contentnya tidak tertutup bagian next. untuk mengatasinya bagaimana?

    untuk yang java scriptnya script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/ cuma ada satu.

    semua itu saya gunakan di blog saya ini ==>> http://electricjuicerreviews.blogspot.com/

    mohon reviewnya blog saya. untuk masukkan saya agar memperbaiki kekurangan blog saya ini.

    maav jika nubie banyak nanya. :D

    salam blogger

    ReplyDelete
    Replies
    1. Sore juga, silahkan dipake
      Perhatikan pada kode langkah nomer 5, sesuaikan width:212px itu ukuran panjang tiap kotak pada slider

      blognya udah easy loading, pemilihan template yg tepat, mungkin untuk promosi produk agak kurang menarik ya

      Salam blogger juga

      Delete
  70. Maskolis, kalo untuk menyembunyikan slideshownya pada tampilan seluler blogspot gimana. Maksudnya waktu blog diakses pada tampilan penuh widget slideshownya muncul. Tapi kalo diakses pada tampilan seluler menggunakan ponsel widget slideshownya disembunyikan gitu. Tolong bantu caranya ya.....Makasih

    ReplyDelete
    Replies
    1. Nah itulah kekurangan saya mas, selama ini saya ngeblog, bikin template atau aktivitas lain tidak pernah menggunakan ponsel (maklum ponsel saya jadul, belum support buat internetan). Coba dlu di cari solusinya sendiri ya mas...

      Delete
  71. Salam Kenal Mas, Slidenya kok ng' mau jalan kalo di klik next atau prev

    ReplyDelete
  72. agar yang tampil cuma 2 (bukan 4) gimana mas?

    ReplyDelete
  73. Satu lagi artikel maskolis ini berhasil saya pasang diblog saya www.catatan-piper-comex.blogspot.com
    Semua artikel dari maskolis bagus bagus, blog ini sering saya kunjungi buat mencari artikel menarik dan terbaru.
    Saya berharap nanti bisa juga memasang templatenya dari blog maskolis. Sementara ini saya masih pakai template dari mas sugeng.com
    Kalau maskolis juga punya template yg pas buat tampilan mobile, saya akan coba pasang di blog saya.
    Terima kasih.

    ReplyDelete
  74. gan minta yg langsung jadinya aj lah masih binggung nih . (>_<)

    ReplyDelete
  75. Saya pengguna Cara Gampang Template dan ingin menambahkan Slider Carousel Otomatis Versi 2 ini, saat saya terapkan ternyata slider yang bawaan template tida bekerja.

    Bagaimana solusinya? Mohon pencerahan

    ReplyDelete
  76. bagai mana slidercarousel otomatis. 2 ini tidak hanya tampil di home saja .?tapi tampil di tempat lain juga waktu pindah posting

    ReplyDelete
    Replies
    1. Pada langkah nomer 7, kode baris awal dan baris akhir dihapus mas, nggak usah ikut dimasukkan

      Delete
  77. mas buatin slider carousel yang kyak sidomi bisa gak??

    ReplyDelete
  78. Solusi donk Carousel di blog ku kgk jalan ..http://bloggershare-11.blogspot.com/

    ReplyDelete
    Replies
    1. Langkah nomer 6, ganti script :
      https://johny-ember.googlecode.com/svn/trunk/carousellite.js

      dengan ini :
      http://yourjavascript.com/265232511102/carousellite.js

      Delete
    2. cuma mau numpang titip link : http://www.profitclicking.com/?r=tkapeuwx4v
      cara mudah mendapatkan uang..sudah dikasi modal $10
      cara kerja hanya mengklik 3 iklan perhari
      bisa deposit untuk mendapatkan keuntungan lebih besar lagi (81hari = 150%)
      dijamin berhasil....

      saya sudah buktikan...!!!!

      >>> http://www.profitclicking.com/?r=tkapeuwx4v <<<<

      Delete
    3. mas, slide nya kok g jalan yah di blogq. Harap pencerahannya :)

      Delete
  79. Terimakasih sudah saya pasang dan sukses, kalau mau lihat-lihat ini linknya
    http://kawasansaru.blogspot.com

    ReplyDelete
  80. mas bis ga kalau slide ini di pakai slide yang ada di sebelah bawah blog???

    ReplyDelete
  81. MasKolis, Pada Kode Yang kedua, Cara menambahkan Kode Hari dan Jam Bagaimana?
    Soalnya pada Kode (var daystr = day+ ' ' + m + ' ' + y ;) Cuma ada Tanggal Bulan Dan Tahun Saja.
    Mohon Bantuannya. Terimakasih.

    ReplyDelete
  82. mas, slide nya kok g jalan yah di blogq. Harap pencerahannya :)

    ReplyDelete
  83. terimakasih mas kolis. saya juga pake template mas kolis disini. makasih banyak ya.
    bagi pembaca bisa juga kok nulis di website ini.

    http://www.insanwisata.com/

    ReplyDelete
  84. succes mas tutorialnya,,,
    silahkan di lihat di sini.

    http://jejak-harput.blogspot.com/

    ReplyDelete
  85. saya gak ngerti pas di langkah 7 itu...
    kode html div id=main-wrapper gak ada di html blog saya..

    apa kode html yg di langkah 7 itu bisa di tarok langsung di gadget (type html) ya????

    ReplyDelete
  86. da masuk cara ke7 gagal dstu...

    lagian dah gw suntik lewat gadget malah gak keluar gbr layernya...

    pusing

    ReplyDelete
  87. Salam maskolis, pgn tanya Kenapa ya kok gagal teruss dah coba berkali-kali... Slide Corusolnya ga muncul2.. :( .. terus recentpostnya juga ga muncul.. commentnya juga :( ... tolong bantuaannya maskolis
    http://nusantarakatulistiwa.blogspot.com/

    ReplyDelete
  88. mas kolis maaf mau minta tolong nih, ngrepotin. tolong koreksi blog saya 'puji parcel'. knapa kok udh lama tp blm ada yang komentar...:(
    matur suwun

    ReplyDelete
  89. Numpang nanya mas...(Slider Carousel Otomatis Berdasarkan Label)saya kok macet ya mas? padahal kode html nya saya uda coba ganti satu persatu masi tetap tidak jalan. mohon solusinta mas ....

    ReplyDelete
  90. Sorry mas lupa blog saya (http://amatkalima.blogspot.com/)

    ReplyDelete
  91. kalo div id main wrapper ga ada gimana ya mas :-(, trus kode ada 3 di template saya, jadi bingung mo nempelin div id nya, trims ats bantuannya :-)

    ReplyDelete
  92. Assalamualaikum mas maaf menggagu sedikit Ada pertanyaan nih di tutorial Slide sebelumnya saya coba tapi gak nampil gambar nya ya kenapa mas???

    Nih Blog yang mau ditambah Slidnya : (http://nabila-store.blogspot.com/"

    dan yang ini Template Ujicobanya (yang gak muncul gambarnya) :(http://ujicobapost.blogspot.com/)

    Sebelumnya TERIMAKASIH

    ReplyDelete
    Replies
    1. mas Zicikal Zicikal gimna cara mengubah menu bar kaya punya mas itu,boleh mnta script nya ga

      Delete
  93. Mkasih ya mas atas infonya,,, mantab gan ! http://aldofahreza.blogspot.com

    ReplyDelete
  94. gan, itu yang point 7 kurang jelas, maksud src=\"/feeds/posts/default/-/sport?max....itu gimana gan, labelnya yang dimasukan satu apa semua label

    ReplyDelete
  95. terimakasih gan tutorialnya, ini yang dari dulu saya cari.. tapi bisa gak gan artikel yang ditayangin itu diganti sesuai dengan keinginan kita.

    salam kenal buat blog pemula seperti saya

    ReplyDelete
  96. salam sukses maskolis.
    aku udah coba mas tapi di edit HTMl nya,(sudah klik expand) gak ada div id='main-wrapper' jadi bagaimana mas?

    ReplyDelete
  97. Assalamu'alaikum
    mas makasih ilmu yang bermanfa'at bangett,.

    mas mau nanya cara mengurangi kontak slideSwownya gimana?? mohon bantuanya

    ReplyDelete
  98. This comment has been removed by the author.

    ReplyDelete
  99. Coursell ga mau jalan pdhl sudah saya ganti dgn yg baru http://yourjavascript.com/265232511102/carousellite.js tp tetep aja ga jalan. blog saya http://mas-evan.blogspot.com . Kira² np ya mas ? ada solusi ga ? mksh

    ReplyDelete
  100. This comment has been removed by the author.

    ReplyDelete
  101. Não consegui, sabe me informar porque? Ele misturou com o slidshow do topo. Eu sou Brasileiro! Meu site: http://colunistafla.blogspot.com.br/ Obrigado.

    ReplyDelete
  102. Thx Infonya Mas tapi langkah terakhir ko gak ada yach div id='main-wrapper' apa kodennya berbeda di blog saya. Salam kenal..GBU

    ReplyDelete
  103. Hallo mas saya dah berhasil id='main-wrapper ternyata kode penggantinya div class='main-outer' Tapi sudah 2 hari nih utak atik lelah letih lesu, gambar semua ada tapi ga ada Kotak Gambar Slide Garisnya sama panah kiri kanan, udah gitu bablas melebihi layout blog, padahal udah dirubah ukurannya dan warna tapi ga ada hasil begitupun saya coba Fitur Content Slider, hemm. Mohon dibantu. THX, Tuhan Memberkati

    ReplyDelete
  104. kalo image slider untuk popular post ada ga? jika ada template dengan model gitu mohon kasih link referensinya

    ReplyDelete
  105. Coba tanya disini mudah2an dijawab (maklum tanya beberapa kali tidak dijawab he he he), Johny Super Crott aku kasih slider ini ngga tampil gambarnya ya mas apa ada yang kurang? disini mas http://blogtesblogtes.blogspot.com

    ReplyDelete
  106. mohon solusinya mas, kok gambar di blog ku nggak muncul... http://minangsunnah.blogspot.com/

    apa masalahnya....

    ReplyDelete
  107. maskolis bagaimana caranya jika dalam satu blog memiliki carousel lebih dari satu ?

    ReplyDelete
  108. keeereeen abis... ini yg ane tunggu. Ane baru buat blog, and masih utak atik gmn cara yg menarik.. pake slider kayak gini klhtannya wow kereen. tapi masalahnya di html blog sya ga ada ]]> :. terus di taruh di mana yg langkah no. 5.
    ini blog ane: http://www.tazakkagroup.blogspot.com, blog ttg bisnis, kesehatan dan humaniora

    ReplyDelete
  109. maksudnya ga ada "]]> :". solusinya gmna? Lalu diletakkan dimana langkah 5

    ReplyDelete
  110. ]]> :
    Kalau ga ada kode ini']]>:' Lalu diletakkan di mana?

    ReplyDelete
  111. mas aq udah nyoba slide carouselnya tapi ngak jalan..
    masalahnya apa tu??

    ReplyDelete
  112. This comment has been removed by the author.

    ReplyDelete
  113. This comment has been removed by the author.

    ReplyDelete
  114. This comment has been removed by the author.

    ReplyDelete
  115. maaf mas sya pingin membantu yang belum terjawab komennya karena saya mempunyai mslah yang sma dan sya brhsil mengatasinya dan ingin berbagi dsni.

    untuk mengatasi yang "tidak ada gambarnya"
    = pada langkah ke 7 "sport" ganti dengan label web anda

    untuk mengatasi "gambar melewati batas pinggir"
    = pada langkah ke 7 "visible: 5" ganti menjadi 4

    untuk mengatasi "tidak tampil di posting (hanya di home)"
    = pada langkah 7 hapus kode paling atas ( data blog page type ) dan kode paling bawah ( bif )

    untuk mengatasi "tidak berjalan slidenya"
    = ulangi langkah nomor 7, jika tetap tidak berjlan berarti kode jquerynya ada 2 dan hapus salah satu.


    sebelumnya terima kasih mas admin jika sudah mengizinkan saya berbagi disini dan terima kasih pula dengan artikelnya "sangat bermanfaat sekali"
    semoga sukses min by www.adybakom.blogspot.com

    ReplyDelete
  116. Mas saya pake template Johny Tampan, truz saya coba pasang widget facebook Like Box yang melayang/floating, tapi slider templatenya ngetutupin, gimana tuch mas? mohon bantuannya bangt ya mas...

    nich mas screenshotnya lo pertanyaan saya kurang jelas:
    http://3.bp.blogspot.com/-hh5Fk1rFZqI/UZeHX93LK5I/AAAAAAAAAjw/KphhbruOpJc/s1600/Untitled.jpg

    ReplyDelete
  117. Langsung praktek aja nih mas , wkwkwkw XD

    ReplyDelete
  118. terima kasih sob, tutorialnya membantu sekali.

    ReplyDelete
  119. kalo slider untuk blog video youtube gmn caranya gan? saya pengen bikin untuk blog saya ini:
    http://homesforsalevideo.blogspot.com/

    ReplyDelete
  120. mas, label 1, label 2, label 3nya suda saya isi judul n isi labelnya, tapi kok gak keluar postingannya ya???mohon pencerahan

    ReplyDelete
  121. Kalo slide otomatis nya memang sudah ada di blog tapi udah gak mau jalan otomatis lagi dan panah arah nya kalo di ketik gak bisa jalan lagi

    Di mohon pencerahannya , Terima Kasih :D

    ReplyDelete
  122. mas, cara pasangnya kalau mau diatas footer bagaimana ya? --> www.pksdramaga.blogspot.com

    ReplyDelete
  123. mas kode ini div id='main-wrapper'> d blog saya kok gak ada ya???

    ReplyDelete
  124. makasih tutornya ini yang saya cari2 sob.. tapi saya mau tanya kalau untuk menampilkan slider tersebut hanya pada laman artikel tidak pada home page gmn ya???

    ReplyDelete
  125. Produk dijamin asli
    TILLA SHOP : Barang yang Kami Tawarkan Semuanya Barang Asli Original Garansi Resmi Distributor dan Garansi TAM .
    Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
    BERMINAT HUB-SMS:0896-9198-6275 ATAU KLIK WEBSET RESMI KAMI
    BlackBerry>Samsung>Nokia>Apple>Acer>Dell>Nikon>DLL

    Dijual

    Ready Stock !
    BlackBerry 9380 Orlando - Black
    Rp.900.000,-

    Ready Stock !
    BlackBerry Curve 8520 Gemini
    Rp.500.000,-

    Ready Stock !
    BlackBerry Bold 9780 Onyx 2
    Rp.800.000,-

    Ready Stock !
    Blackberry Curve 9320
    Rp.700.000,-

    Ready Stock !
    Samsung Galaxy Tab 2 (7.0)
    Rp. 1.000.000

    Ready Stock !
    Samsung Galaxy Nexus I9250 - Titanium Si
    Rp.1.500.000,-

    Ready Stock !
    Samsung Galaxy Note N7000 - Pink
    Rp.1.700.000

    Ready Stock !
    Samsung Galaxy Y S5360 GSM - Pure White
    Rp.500.000,-

    Ready Stock !
    Nokia Lumia 800 - Matt Black
    Rp.1.700.000,-

    Ready Stock !
    Nokia Lumia-710-white
    Rp. 900.000,-

    Ready Stock !
    Nokia C2-06 Touch & Type - Dual GSM
    Rp.450.000,-

    Ready Stock !
    Nokia Lumia 710 - Black
    Rp. 900.000,-

    Ready Stock !
    Apple iPhone 4S 16GB (dari XL) - Black
    Rp.1.200.000,-

    Ready Stock !
    Apple iPhone 4S 16GB (dari Telkomsel)
    Rp.1.200.000,-

    Ready Stock !
    Apple iPod Touch 4 Gen 8GB
    Rp.700.000

    Ready Stock !
    APPLE iPod Nano 8GB - Pink
    Rp.500.000,-

    Ready Stock !
    Acer Aspire 4752-2332G50Mn Core i3 Win7 Home
    Rp 1.300.000

    Ready Stock !
    Acer Aspire S3-951-2364G34iss
    Rp. 1.200.000,-

    Ready Stock !
    Acer Aspire 5951G Core i7 2630 Win 7
    Rp. 2.500.000,-

    Ready Stock !
    Acer Aspire 4755G Core i5 2430 Win 7 Home Premium Green
    Rp. 2.500.000,-

    Ready Stock !
    Nikon D7000 kit 18-105mm
    Rp.1.700.000

    Ready Stock !
    Nikon D90 Kit 18-105mm Vr
    Rp 1.300.000

    Ready Stock !
    Nikon Coolpix L 120 Red
    Rp. 900.000

    Ready Stock !
    Nikon Coolpix P 500 Black
    Rp 1.000.000

    ReplyDelete
  126. This comment has been removed by the author.

    ReplyDelete
  127. Makasih banyak mas, Berguna banget artikel nya, sebetul nya saya sempat bingung juga karena Widget tidak tampil di halaman posting cuma tampil di home page saja, setelah di cari2 eh ternyata gak pake kode ini toh, , setelah saya hapus baru deh tampil di halaman post,.. hehe
    Semoga sukses dan diberi kesehatan selalu buat Maskolis.

    ReplyDelete
  128. suksssseees... tapi kalo pengen ganti warna gimana mas ???? please please............

    ReplyDelete
  129. mas saya udah coba tapi knp gambarnya gak keluar ya? mohon bantuannya.

    ReplyDelete
  130. mas ada ngak kode selain kode seperti ini " div id='main-wrapper'
    soalnya di blog saya ngak ada kode seperti itu mohon bantuannya

    ReplyDelete
  131. Wuiih, Mas bro emang kampiun blogger, bisa nggak Mas kalo slider carousel ini ukurannya dibikin mini dengan tinggi sekitar90 px dan lebar 475 px dan image disesuaikan. Kalo bisa tolongin yah, makasih banyak Mas.

    ReplyDelete
  132. admin nmpa tanya sya psang slider ini kok tmpilannya aneh ya ?
    Bsa dilihat di blogsegalainfo.blogspot.com

    ReplyDelete
  133. mas < id='main-wrapper'> di template saya kok ndak ada ??? bermacamfakta.blogspot.com

    ReplyDelete
  134. Terima kasih, sukses dipasang di : pendidikan-full.blogspot.com

    ReplyDelete
  135. kalau pasang 2 carousel sekaligus di home page, apa yang harus di bedakan di scripnya? --> irmawatyproperty.blogspot.com

    ReplyDelete
  136. cara menampilkan summary posting nya gimana ya mas kolis?

    ReplyDelete
  137. Ijin untuk Ingsun reblog, ya!

    - http://dipoblogforce1.blogspot.com/2013/11/caramemasangslidercarouselotomatisuntukmenampilkanrecentposts.html -

    ReplyDelete
  138. makasih mas tutorialnya, saya udah coba tapi gagal terus..
    tapi akan saya coba lagi..hehee

    thanks
    www.wartainfo.com

    ReplyDelete
  139. mas kolis minta penecerahannya,
    Bagaiman cara bikin postingan bisa tampil perlabel di MENU ?
    misal kayak web punyanya mas kholis ini :
    MENU => Free Template isinya bisa tentang template semua.
    MENU => Kode Warna isinya tentang kode warna.

    la cara bikinnya kalau di blogspot itu bagaimana ?


    sebelumnya maap soalnya saya masih barumaenan blog.

    ReplyDelete
  140. Ada masalah gan, Untuk Pencarian code ini tidak ketemu/tidak ada.... main-wrapper ....

    Gimana Cara mengatasinya gan????
    Balas....

    ReplyDelete
  141. Mas mau tanya nih. Sudah berhasil terpasang di blog saya. Tetapi submenu saya tidak bisa dropdown. Apakah kehalang dengan carousel itu?, mohon sekali mas. Karena sebentar lagi blog saya akan dinilai.

    ReplyDelete
  142. Mas, Saya saya pake storage blue, sudah coba pasang di tamplate tapi gambarnya melewati batas pinggirnya ampe kelewat. Gimana cara ngatasinnya, Trus Ada dua lagi, bagaimana cara menghapusnya satu. Tlg mas ya...Ini blog saya supaya mascolis bisa liatin http://berita-terbarulagi.blogspot.com/

    ReplyDelete
    Replies
    1. Punya saya juga kelewat batas mas, seharian ngutak ngatik ga tau gimana benerinnya... wkwkwkkw

      Delete
  143. wah keren artikelnya gan.
    Bermanfaat banget daah..
    di tunggu artikel selanjutnya

    ReplyDelete
  144. lkalau tanpa label alias keseluruhan gimana mas ?
    http://adipratama-acan.blogspot.com

    ReplyDelete
  145. punya saya kok gak jalan?? http://sun32len.blogspot.com/
    terus bagaimana cara edit template di bawah slider sepertinya ada widget yang menumpuk,saya pakai template yang sudah di edit oleh adiknya

    ReplyDelete
  146. Mau d praktekan tutornya takut blog saya nya eror lagi,..
    hehee,..
    nice blog gan,..
    visit here :
    www.davaline09.blogspot.com

    ReplyDelete
  147. Mas,bagaimana nak letak gambar di Slide tu? Please Reply Mas....

    ReplyDelete
  148. keren slidenya

    http://www.kurogaze.net

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger