Kamis, 06 Desember 2012

Membuat Popup dengan Ukuran Tertentu

Tunggu dulu,pelajaran ini tidak ada kaitannya dengan Membuat Popup Iklan yang sering membuat orang jengkel dan bahkan tak jarang visitor enggan untuk berkunjung kembali.

Tapi,kali ini kita mencoba iseng belajar menghias blog dengan tampilan jendela baru dengan ukuran sesuai yang kita inginkan.

Jika Iklan popup kebanyakan memaksa visitor untuk melihat suatu pesan dari author,tapi disini kita hanya menawarkan visitor untuk melihatnya.

**Ukh! beberapa hari terakhir,aku lagi nggak semangat memposting artikel tentang blog (lg ga enak badan dan ga ada bahan,he..)so,..#%#$!

OK! Langsung ke topik,popup dengan ukuran yang kita tentukan sendiri,meskipun sekali lagi,ini berfungsi di Mozilla Firefox dan Opera :D.

Saya ambil contoh dari blog saya yang lain, seperti di bawah ini (jika ada,bukalah di Mozilla):

Siapkan mental untuk melihat photo orang ini..




Gimana,tertarik untuk membuatnya? (sekedar untuk fun aja..)tapi,efisien juga jika popup di atas untuk menampilkan preview suatu situs bahkan iklan.

So,yang minat untuk membuat jendela munculan dengan ukuran yang kita inginkan,coba ikuti langkah berikut:

Pertama,tentukan alamat URL yang ingin di tampilkan,selanjutnya anda bisa meletakkan kode ini pada halaman HTML anda maupun saat anda hendak mempublikasikan pada suatu artikel.

Saya ambil contoh dengan menambahkan Element Baru pada blog,seperti biasa,Dashboard,lalu pilih Tata Letak, selanjutnya Tambah Element Baru/Add New Widget.

Pilih HTML/Javascript,dan letakkan kode berikut:

<center><form onsubmit="window.open('http://URLYANGDITAMPILKAN/','popupwindow','scrollbars=no, width=250,height=250');return true"><input type="submit" value="TEXT YANG TAMPIL PADA BUTTON"></form></center>

Tulisan kapital dan angka yang berwarna merah,pada kode diatas,ganti sesuai perintah yang dituliskan dan rubah sesuai ukuran pilihan anda.
Setelah kode di letakkan Simpan,dan Selesai.

Membuat Pop UP Facebook Like Dan Twitter Di Blog

Panduan Blogspot kali ini kita akan membahas tentang cara membuat pop up facebook like dan twitter di blogspot.Pada panduan sebelumnya saya pernah menulis tentang cara memasang like box facebook di blog,tapi kali ini kita akan memasang tombol like box facebook dan follow twitter di blog.Dengan memasang widget ini di blog kita,kita dapat menarik para pengunjung di jejaring sosial.Dengan begitu trafik blog kita bisa meningkat.Tanpa panjang lebar,langsung saja kita mulai memasang tombol pop up like box facebook dan follow twitter di blogspot.



Silahkan sobat ikuti beberapa langkah berikut
1.Login ke akun blogger
2.Klik menu Tata Letak/Rancangan
3.Klik Tambah Gadget
4.Klik/pilih HTML/Javascript
5.Masukan kode di bawah ini
 <script src="http://andreykusanagi.googlecode.com/files/pop-up.js" type="text/javascript"></script>
<div id="fbslidebox" style="position: fixed; width: 310px; overflow: hidden; bottom: 5px; right: 5px; background: url(&quot;http://www.scri8e.com/white.gif&quot;) repeat scroll 0% 0% transparent;-moz-border-radius: 15px 15px 15px 15px; border: 3px solid rgb(255, 51, 0); display: block;"><div style="width: 295px; padding: 10px; margin: 0pt auto; overflow: hidden;"><a id="fbcloseslidebox" style="float: right; color: rgb(153, 153, 153); padding: 0pt 2px; border: 1px solid rgb(204, 204, 204); text-decoration: none; font-size: 9px; font-family: Verdana,Geneva,sans-serif;" href="#">Keluar</a><strong style="color: rgb(0, 0, 0);">Jangan Lupa Klik Like Dan Follow ya!</strong><br/>
<a href="https://twitter.com/Nama Twitter Sobat" title="alibloggers" class="twitter-follow-button" data-button="grey" data-text-color="#000000" data-link-color="#ffffff">Follow @Nama Twitter Sobat</a><script src="//platform.twitter.com/widgets.js" type="text/javascript"></script>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fid-id.facebook.com%2Fpages%2FAndreyKusanagiCom%2F239190232795087amp;width=292&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true&amp;height=212&amp;appId=128536653899046" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:212px;" allowtransparency="true"></iframe></div></div>

Keterangan : Ganti tulisan yang bercetak tebal sesuai dengan keinginan sobat

6.Klik Simpan
7.Selesai

Semoga postingan saya tentang Cara Membuat Tombol Pop Up like Box Facebook Dan Follow Twitter Di Blog dapat bermanfaat.Sampai jumpa di Panduan Blogspot berikutnya.

Membuat Pop UP Facebook Like Dan Twitter Di Blog 5.0
Andrey Kusanagi
Membuat Pop UP Facebook Like Dan Twitter Di Blog

Cara Membuat Pop Up di Blog

Pop UP merupakan suatu halaman yang muncul di belakang maupun di depan halaman utama yang muncul begitu saja dengan tiba-tiba walau tanpa kita klik sekalipun,bisa berjumlah 1 pop up,2 pop up,3 pop up bahkan bisa sebanyak mungkin yang di kehendaki.



Halaman pop-up Biasanya di gunakan untuk beriklan dari suatu produk maupun jasa yang di tawarkan. Contoh konkrik iklan pop-up yang sering di pakai adalah situs ziddu, dimana setiap kali kita mendownload file yang ada di situs tersebut pasti akan keluar halaman window pop-up, betul tidak?

Pop up window terkadang membuat jengkel oleh para pengunjung blog, terkadang iklan pop up yang keluar tidak ada hubungannya dengan apa yang pengunjung cari, malahan kadang membuat loading blog menjadi lambat karena banyaknya iklan pop-up yang keluar, tapi terserah sobat semua, mau memasangnya atau tidak terserah sobat. dan inilah tutorial tentang cara membuat pop up windows pada blog.

  • Login ke akun blogger sobat
  • Pilih Rancangan »» edit HTML
  • Beri tanda checklist pada Expand widget template
  • Cari kode
    <body>
  • Dan letakkan kode berikut dibawah kode :
    <body>


  • <script type='text/javascript'>
    var popurls=new Array()
    popurls[0]='http://ade-tea.blogspot.com/'
    popurls[1]='http://ade-tea.blogspot.com/2012/01/animals-widget-clock.html'
    popurls[2]='http://widgetindex-blogs.blogspot.com/'
    function openpopup(popurl) { var winpops=window.open(popurl,'','width=,height=,toolbar,location,status,scrollbars,menubar,resizable') }
    openpopup(popurls[Math.floor(Math.random()* (popurls.length))])
    </script>

    Jumat, 19 Oktober 2012

    Anti Copy Paste Di Blog

    Membuat Anti Copy Paste Di Blog sebagai berikut:

        Login ke blogger, klik rancangan, Pilih tab Edit HTML, Ingat centang Expand Widget Template
        Cari kode </head> (gunakan ctrl+f)
        Copy paste script berikut tepat di bawah kode</head>


            <SCRIPT type="text/javascript">
            if (typeof document.onselectstart!="undefined") {
            document.onselectstart=new Function ("return false");
            }
            else{
            document.onmousedown=new Function ("return false");
            document.onmouseup=new Function ("return true");
            }
            </SCRIPT>

        Simpan template dan lihatlah hasilnya
    Gunakan script ini jika konten blog sobat memang mengandung hak cipta atau bersifat pribadi yang tidak ingin di copy paste,nah demikian cara Membuat Anti Copy Paste Di Blog, semoga bermanfaat!

    Senin, 01 Oktober 2012

    Membuat Halaman Arsip Postingan Pada Blogspot

    Tidak panjang lebar Sobat, pada kali ini saya akan berbagi sedikit Cara untuk membuat Arsip pada halaman tertentu, yang biasanya pada blog rekan - rekan blogger menggunakan Java Scrift sebagai pendukungnya. Berangkat dari pengalaman para blogger Master, menyediakan sebuah List Postingan pada blogger merupakan sebuah cara untuk memudahkan pengunjung dalam mencari artikel yang ada pada Blog tersebut.

    Oke, Saya tidak akan panjang lebar, jika sobat ingin membuatnya sangat mudah dikarenakan hanya menggunakan sebuah usaha yang cukup menguras pikiran namun tidak akan menguras keringat kok, Alias Sangat mudah Sobat, hehee

    Untuk Contoh / Demo bisa di lihat di sini

    CARA MEMBUAT HALAMAN ARSIP POSTINGAN



    1. Login  » Blogger
    2. Buat Entry / Tulis Artikel, Jika Sobat ingin membuatnya pada Halaman Silakan Langsung Buat Halaman / Page
    3. Kemudian Sobat Klik HTML, Kemudian masukan Kode dan Javascrift Berikut.
    <script src="http://cyberbanua-files.googlecode.com/files/arsip-artikel.js">
    </script>
    <script src="http://Masukan-alamat-blog/feeds/posts/default?max-results=500&amp;alt=json-in-script&amp;callback=loadtoc">
    </script>

         4.   Kemudian Berikan Judul dan Klik Publikasikan.

    Sabtu, 29 September 2012

    Hapus Atribution di Blog

    Caranya cukup simple dan mudah banget, ikuti Saja langkah dibawah ini.

    pertama masuk pada "Design" Lalu "Edit HTML"

    masukkan code css dibawah ini diatas code ]]></b:skin>

    #Attribution1 {height:0px;
    visibility:hidden;

    display:none
    }


    Tinggal SAVE deh.

    Dan jika Anda menggunakan code CSS di postingan ini, tinggal ganti code yang berwarna biru dengan code diatas.

    Youtube Template Johni Sompret

    Artikel ini mungkin terlalu panjang, semoga teman-teman blogger tidak bosan membacanya. Tapi jika Anda memakai salah satu dari ketiga template ini mesti membacanya sampai selesai. Awalnya saya hanya mencoba untuk membuat readmore tanpa menggunakan Javascript, akhirnya jadilah dua template ini. Pada dua template awal di artikel ini saya menggunakan fitur Readmore dengan tidak meletakan kode Javascript di dalamnya, yang tentu saja karakternya jadi terbatas, yang pertama ukuran maksimum pixel untuk thumbnail hanya 72 x 72 px, Anda tentu saja bisa memperbesar ukuran ini dengan merubah width dan height kode CSS .post-thumbnail pada template ini tapi dengan konsekuensi gambarnya menjadi semakin kabur. Yang kedua adalah jumlah huruf untuk summary juga hanya dibatasi sampai 100 karakter dan ini fixed dari platform Blogger tidak bisa lagi untuk ditambah dan dikurangi. Jadi untuk kedua kasus diatas sengaja saya jelaskan dulu disini agar Anda tidak menanyakan lagi kedua hal tersebut.

    Ketiga template ini sebenernya pengembangan dari template sebelumnya, Johny Classicsite. Karena terlalu sederhana dan minim sekali fitur yang saya pasang pada template itu, saya mencoba untuk memodifikasi kembali agar tampak lebih menarik. Untuk judul artikel ini jangan pernah menanyakan kenapa artikel ini saya kasih judul seperti itu, karena dari dulu memang saya tidak pernah perduli dengan judul yang penting isinya bung....!!

    Johny Sompret

    johny sompret


    Template ini adalah paling sompret sedunia, karena bikinnya waktu pusing dan saya sering bilang sompret waktu bikin jadi namanya Johny Sompret (nggak nyambung blasssss....). Fitur yang terdapat pada template ini apa ya..? Bisa dilihat sendiri pada demo, untuk slider yang saya pasang otomatis menampilkan artikel terbaru. Jika anda ingin mengganti dengan tampilan per label Anda bisa baca petunjuknya di artikel Johny Blackstore template, karena slider yang saya pasang sama, cuma beda kode CSS saja.

    Untuk mengaktifkan fungsi reply pada kotak komentar sama dengan template Johny Classicsite, caranya masuk ke Edit HTML jangan lupa untuk mencentang kotak Expand Widgets Templates kemudian cari kode berikut :
    <a expr:href='&quot;https://www.blogger.com/comment.g?blogID=119520779966455589&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500&quot;); return false;'>Reply</a>
    Ganti blog ID warna merah diatas dengan ID blog anda yang terletak pada browser jika anda masuk ke dashbord, seperti gambar di bawah ini :


    Black Beauty Template

    black beauty


    Ini bukan template hitam, dan bukan juga mendekati hitam apalagi beauty. Fiturnya sama dengan template Johny Sompret cuma beda warna saja. Untuk fungsi reply yang harus Anda ganti blog ID warna merah pada template ini 5806754556786281613 (disimpan nomernya siapa tahu besok keluar angka ini), ganti dengan ID blog anda. Caranya sama seperti pada Johny Sompret

    Johny Jazzytube (Only for Youtube)

    johny jazzytube


    Nah, kalau template ini agak serius bikinnya, karena berbeda dengan kedua template diatas. Template ini khusus untuk blog dengan konten video, dan itupun harus video dari Youtube. Template ini permintaan Antonio Rios dari Meksiko pada artikel Dua Template Gratis Untuk Pecinta Music dan Game.

    Untuk menampilkan video Youtube ke dalam postingan, tentunya cari dulu video kesayangan Anda di Youtube. Setelah ketemu copy URL nya yang terletak di browser seperti gambar di bawah :


    Atau anda juga bisa memperoleh URL ini dengan klik share di bagian bawah video, kemudian centang kotak kecil long link disampingnya, lalu copy URL pada kotak diatasnya, seperti gambar dibawah ini :


    Setelah Anda copy URL Youtube tersebut, masuk ke new post posisikan pada Edit HTML (jangan compose), paste kemudian akhiri URL dengan kode endofvid (tanpa spasi). Untuk menambahkan teks pada postingan tersebut, awali dengan menggunakan kode [starttext] dan akhiri dengan kode [endtext]. Contoh akhir postingan seperti ini :
    http://www.youtube.com/watch?v=K4Di2rvigVkendofvid

    [starttext]
    Your description here..........
    [endtext]
    Untuk menampilkan widget video per kategori, masuk ke layout >> add gadget pilih HTML/Javascript kemudian masukkan kode di bawah ini kedalamnya :
    <script style="text/javascript">
        var numposts = 3;
        var showpostthumbnails = true;
        var displaymore = true;
        var displayseparator = true;
        var showcommentnum = true;
        var showpostdate = true;
        var showpostsummary = true;
        var numchars = 70;
    </script>
    <script src="/feeds/posts/default/-/sting?orderby=published&alt=json-in-script&callback=showlabelpostswiththumbs"></script>
    Ganti kode warna merah sting dengan label yang ingin anda tampilkan pada sidebar. Dan untuk mengaktifkan reply pada kotak komentar, masuk ke Edit HTML (centang Expand Widget Templates) cari blog ID 3009056898743314712 ganti dengan blog ID anda.

    Bingung mau nulis apa lagi, udah segitu aja dulu ya. Oya ketiga template diatas ringan loading semua apalagi yang Jazzytube nggak sampe 70kb cuma sekitar 67kb kalau nggak salah. Jika anda berminat silahkan download ketiga template diatas gratis tanpa dipungut biaya, paling cuma biaya koneksi internet aja, selamat mencoba dan semoga bermanfaat.

    Kamis, 27 September 2012

    Like Book Sip

    Pernah ketika itu ada salah satu sobat saya menanyakan, gimana sih caranya membuat kotak penggemar facebook (Like Box Facebook) di blog milik kita...?
    Namun terlebih dahulu saya akan terangkan fungsi dari widged Like Box ini adalah sebagai media sarana untuk menjalin perkenalan atau persahabatan antara Blog tersebut dengan para Facebookers dan meminta para facebookers tersebut bersedia menjadi penggemar blog milik kita, dengan catatan para facebokers itu memang harus betul-betul menyukai isi dari blog tersebut, yang ditandai dengan di kliknya tombol " like/suka " yang ada di dalam widged Like Box itu.
    Seperti gambar dibawah inilah tampilan dari widged Like Box Facebook.


    Gambar di atas adalah contoh Like Box Facebook milik blog saya Catatan Pena, lebih jelasnya anda bisa lihat dihalaman Catatan Pena ini, lalu gimana cara membuatnya...? mudah sekali yang penting syarat utamanya adalah anda harus punya akun di Facebook.

    Ada 2 Tahap yang harus anda lakukan yaitu :

    TAHAP 1.
    Mendaftarkan halaman penggemar/Fans blog kita di Facebook

    Login/masuk ke Facebook anda dan jangan Facebook milik orang lain ya..nanti berbahaya  he..he..he.
    Kemudian anda buka halaman ini http://www.facebook.com/pages/create.php dan pilih/klik " Merk atau Produk "

    Akan keluar beberapa pilihan, di kolom kategori pilihlah yang berkategori " Situs Web " sementara di kolom merek atau produk silahkan tulis nama tampilan halaman penggemar anda dan centang kotak kecil yang menyatakan persetujuan kemudian klik tombol "mulai " dan dihalaman berikutnya anda hanya tinggal mengatur isi dari halaman itu misalnya foto profil dan lain-lain. 


    Sekarang anda sudah memiliki halaman penggemar/fans untuk blog anda, dan catat alamat URL halaman penggemar Facebook anda tersebut.

    TAHAP 2
    Membuat Widged Like Box Facebook untuk ditempatkan di Blog

    Buka halaman http://developers.facebook.com/plugins/?footer=1  dan setelah terbuka pilih " Like Box "


    Akan muncul halaman untuk mendapat kode widgednya, silahkan isi kolom Facebook Page URL dengan alamat URL halaman penggemar Facebook yang telah kita buat sebelumnya, kemudian klik " Get Code " untuk mendapatkan kode scriptnya dan kode script itulah nantinya yang akan kita tempatkan di blog kita.
    Tampilannya seperti gambar di bawah ini.


    Keterangan Gambar :
    Facebook Page URL : alamat URL halaman penggemar facebook kita.
    Width : Lebar widged.
    Height : Tinggi widged.
    Color Scheme : untuk menampilkan warna latar widgednya.
    Show Faces : untuk memunculkan/menyembunyikan Photo para penggemarnya.
    Border Color : untuk membuat warna disisi widgednya.
    Stream : Menampilkan komentar di comunity halaman facebook anda.
    Header : Menampilkan kata " find us on facebook "
    Get Code : kode scriptnya dari widged tersebut

    Selesai deh...dan silahkan anda mencobanya.

    Selasa, 28 Agustus 2012

    Mastempete Semrawut dan Cara Aploud Video

    Template ini ramai banget seperti pasar tradisional yang jualan bermacam-macam dagangan tiap pagi di pinggir jalan. Sebenarnya template ini sekedar memenuhi permintaan teman-teman blogger agar template yang dipakai di blog adik saya dibagi juga secara gratis, awalnya mau saya bagi langsung persis seperti blog adik saya. Tapi yang punya blog mencak-mencak, terpaksa saya mesti modifikasi lagi agar tampilannya sedikit berbeda. Dan template ini juga memenuhi permintaan sebagian blogger yang meminta agar list untuk postingan terbaru jangan hanya judul saja, tetapi juga dikasih thumbnail dan summary.

    johny kenthir maskolis

    Seperti pada template blogger magazine umumnya, template ini termasuk berat di loading. Saya kasih tahu dulu sebelumnya biar nanti tidak ada yang tanya lagi di kotak komentar. Namanya juga template magazine, ya pastilah banyak fitur yang dipasang disitu, otomatis akan menambah beban loading. Oke, langsung saja pada tutorial pemasangan widget yang ada di template ini, sebelum itu perhatikan struktur layout yang ada pada template ini (sengaja saya gunakan old blogger interface layout karena di new blogger interface ada scrollnya jadi nggak bisa sampai ke bawah) :


    Image Slider (Sidebar tengah atas)

    Untuk menampilkan slider, masuk ke layout kemudian klik edit pada kotak HTML/Javascript yang saya beri nama image slider seperti pada gambar diatas. Masukkan kode berikut ini ke dalamnya :
    <div id='featuredContent'>
    <div class='sliderwrapper' id='featured-slider'>
    <script>
    document.write("<script src=\"/feeds/posts/default/-/sport?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");
    </script>
    </div>
    <div id='paginate-featured-slider'>
    <ul>
    <script>
    document.write("<script src=\"/feeds/posts/default/-/sport?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
    </script>
    </ul>
    <div class='clear'></div>
    </div>
    <script type='text/javascript'>
    featuredcontentslider.init({
    id: "featured-slider", //id of main slider DIV
    contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
    toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
    nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
    revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
    enablefade: [true, 0.4], //[true/false, fadedegree]
    autorotate: [true, 5000], //[true/false, pausetime]
    onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
    //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
    //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
    }
    })
    </script>
    </div>
    Keterangan :
    Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti sesuai keinginan. Dan warna merah adalah keterangan slider yang berupa kecepatan slider, efek mouseover dan lain-lain, tidak harus dimasukkan. Untuk lebih jelasnya Anda bisa membaca pada tutorial membuat slider tersebut disini.

    Video Category

    Anda tinggal masukkan atau ketik nama label pada widget Video Category seperti gambar di bawah ini :

    Jazz adalah kategori atau label yang saya tampilkan pada widget video category, silahkan Anda ganti dengan label yang diinginkan. Nah, sekarang cara membuat postingan video (khusus dari Youtube) untuk menampilkan thumbnail di widget tersebut. Caranya sama seperti pada artikel saya Johny Crottube, saya akan ulang lagi disini :

    1. Masuk ke Youtube dan pilih video favorit anda.
    2. Kemudian klik share seperti langkah nomer 1, lalu klik embed tunggu hingga kodenya muncul.
    3. Perhatikan kotak yang saya centang pada nomer 3 diatas, disini Anda hanya mencentang pilihan atau opsi yang paling atas (Show suggested videos when the video finishes) biarkan yang lain kosong.
    4. Setelah itu ambil kode iframe Youtube seperti pada nomer 4 diatas, paste ke dalam postingan pada posisi Edit HTML bukan compose. Untuk ukuran panjang dan lebar video terserah silahkan Anda pilih sendiri.
    5. Video dari Youtube sudah nampak di postingan jika Anda preview, tapi thumbnailnya belum akan kelihatan di Homepage. Untuk menampilkan thumbnail di halaman depan (homepage) anda harus menambahkan kode ini setelah kode iframe dari Youtube :
      <iframe width="640" height="360" src="http://www.youtube.com/embed/8Pjh0visgJI" frameborder="0" allowfullscreen></iframe><img border="0" height="0" width="0" src="http://i2.ytimg.com/vi/kode seri video/0.jpg" />
    6. Kode yang saya cetak tebal diatas adalah kode yang harus Anda tambahkan setelah kode Iframe Youtube. Perhatikan tulisan kode seri video (warna merah), anda isi dengan kode seri warna merah diatasnya (8Pjh0visgJI). Kode seri video dari Youtube ini berbeda-beda untuk tiap video, jadi jika Anda memasukkan video jangan lupa untuk mengganti juga kode seri-nya harus sama dengan kode diatasnya. Dan postingan untuk video itu akan nampak seperti gambar di bawah ini :


      Perhatikan kedua kode pada gambar dengan background biru diatas. Dan untuk video yang bukan dari Youtube sebaiknya Anda buat manual thumbnailnya, dengan membuat gambar dari video terlebih dahulu kemudian diupload ke dalam postingan.
    Widget Label

    Widget label disini adalah Label 3 s/d 15 (label 7 sama 8 hilang dimakan tikus) caranya sama seperti pada widget Video Category diatas, Anda tinggal masukkan/ketik label di kotak HTML/Javascript seperti gambar dibawah :

    Ganti jazz dengan label yang ingin Anda tampilkan, ini berlaku untuk semua widget label pada template ini. Jika Anda memakai template ini dan mendapati pengaturan widgetnya mojok ke kiri dan bagian footer ikut menjorok keatas itu tandanya label yang Anda masukkan masih sedikit, usahakan tiap label (Label 3 s/d label 15) terisi dengan label yang sudah mempunyai post atau artikel minimal 5.

    Bagi Anda yang ingin memakai template ini saya sarankan untuk menyimpan semua url script dan kode javascript yang ada pada template di tempat penyimpanan Google Code Anda sendiri, bagi yang belum tahu caranya menyimpan di Google Code silahkan baca tutorialnya disini. Disamping bisa untuk sedikit mempercepat proses loading bisa juga untuk mengantisipasi URL script yang rusak jika sewaktu-waktu Google Code saya kena banned seperti yang pernah terjadi kemarin. 

    Sekian dulu artikel kali ini, jika ada yang kurang jelas silahkan tinggalkan komentar Anda pada kotak komentar di bawah, selamat mencoba dan semoga bermanfaat.

    Rabu, 15 Agustus 2012

    Membuat Related Post Bergambar Dan Bergerak.

    Bagi sobat yang sudah mencoba related post bergambar Atau Thumbnail tentu akan lebih tertarik lagi menggunakannya, karena tampilannya yang cukup menarik dengan adanya gambar (thumbnail) Sebagai Backroundnya. Kekurangan dari related post bergambar ini adalah related post ini terlalu memakan tempat pada halaman blog sobat. Sehingga kita tidak dapat menampilkan jumlah artikel secara maksimal. Nah ada salah satu cara untuk memaksimalkan related post ini ialah dengan alternatif marquee atau berjalan




    Keuntungan dari trik ini adalah sobat dapat menampilkan artikel blog sobat dengan jumlah banyak tanpa memakan tempat pada halaman blog yaitu dengan marquee atau berjalan.untuk demonya klik tombol demo dibawah ini.


    Untuk membuatnya ikuti saja langkah-langkah berikut ini.

    1.Silakan lihat cara membuat Thumbnail related posts disini (Cukup terapkan code CSSnya saja/ code yang pertama)
    2.Setelah sobat menerapkan kode CSS yang pertama,silahkan cari kode berikut ini:
    <div class='post-footer-line post-footer-line-1'>
    Atau
    <p class='post-footer-line post-footer-line-1'>
    3. Jika sudah ketemu salah satu code diatas, letakkan code dibawah ini setelah salah satu code diatas.
    <!-- Marquee Nobi Related Posts with Thumbnails Code Start-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'>
    </b:if>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=12&quot;' type='text/javascript'/></b:if></b:loop>
    <h3><b>Related Posts</b></h3>
    <marquee align='center' behavior='alternate' direction='left' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' width='100%'>
    <script type='text/javascript'>
    var currentposturl=&quot;<data:post.url/>&quot;;
    var maxresults=10;
    var relatedpoststitle=&quot;&quot;;
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs();
    </script></marquee>
    </div><div style='clear:both'/>
    </b:if>
    <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
    </b:if>
    </b:if>
    <!-- Marquee Nobi Related Posts with Thumbnails Code End-->
    4. Langkah terakhir Simpan Template kemudian lihat hasilnya.

    Keterangan : kode yang berwarna merah dapat diganti sesuai dengan yang sobat inginkan, Angka 10 menunjukkan jumlah artikel yang tampil pada related post, Related Posts (Silahkan ganti judul yang sobat inginkan).

    Semoga artikel kali ini bermanfaat bagi sobat jangan lupa baca juga artikel-artikel menarik lainnya

    Cara Membuat Recent Post Dengan Thumbnail Bergerak

    Panduan Blogspot kali ini kita akan membahas tentang cara membuat recent post-artikel terbaru di blog.Dengan kita memasang recent post atau postingan terbaru di sidebar blog,maka para pengunjung akan lebih mudah mengetahui postingan terbaru sobat.Recent post yang akan kita buat ini adalah recents post thumbnail yang bergerak,jadi selain para pengunjung blog kita mudah dalam mengetahui postingan terbaru kita,blog kita pun akan terlihat cantik.Cara memasangnya pun tidak terlalu sulit,sobat sekalian hanya membutuhkan beberapa menit saja untuk memasang recent post thumbnail bergerak di blog.Gimana? apa sobat mau memasangnya di blog sobat?



    Coba sobat lihat pada sidebar blog saya ini,di sidebar blog saya ini,saya memasang recent post dengan thumbnail yang bergerak.
    Bagi sobat sekalian yang ingin memasang recent post thumbnail bergerak silahkan ikuti beberapa langkah berikut
    1.Login ke akun blogger sobat
    2.Klik menu TATA LETAK (bagi sobat yang menggunakan antarmuka blogger yang lama,klik RANCANGAN)
    3.Klik Tambah Gadget
    4.Klik HTML/Javascript
    5.Masukan kode berikut

    <center><style type="text/css">
    #rp_plus_img{height:300px;overflow:hidden;border:solid 0px #fff;padding:6px 10px 24px 5px;background-color:transparent;}
    #rp_plus_img ul{list-style-type:none;margin:0;padding:0}
    #rp_plus_img li{border:1px; margin:0; padding:0; list-style:none;}
    #rp_plus_img li{height:60px;padding:5px;list-style:none;}
    #rp_plus_img a{color:#F68629;}
    #rp_plus_img .news-title{display:block;font-size:14px;font-weight:bold !important;color:#F68629;text-align:justify;}
    #rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#000000;text-align:justify;}
    #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #F68629;width:95px;height:55px;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
    </script>
    <script src="http://theplick.googlecode.com/files/newsticker-plick.js" type="text/javascript">
    </script>
    <script type="text/javascript">
    var speed = 1000;
    var pause = 2500;
    $(document).ready(function(){
    rpnewsticker();
    interval = setInterval(rpnewsticker, pause);
    });
    </script>
    <ul id="rp_plus_img"><script>
    var numposts = 20;
    var numchars = 0;
    </script> <script src="http://www.andreykusanagi.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
    </script> </ul>
    </center>

    Perhatikan : Ganti tulisan yang saya beri tanda kuning,dengan alamat blog sobat

    6.Klik SIMPAN
    7.Selesai

    Coba sobat Lihat hasilnya.Semoga postingan saya kali ini tentang cara membuat recent post dengan thumbnail bergerak di blog bisa bermanfaat untuk sobat sekalian.Sampai jumpa di Panduan Blogspot berikutnya.

    Cara Membuat Recent Post Dengan Thumbnail Bergerak 5.0
    Andrey Kusanagi
    Cara Membuat Recent Post Dengan Thumbnail Bergerak

    Selasa, 14 Agustus 2012

    menambahkan 2 kolom di bawah header.


    Sudah hampir satu bulan blog ini tidak di update dan sekarang mumpung lagi ada kesempatan jadinya saya duduk sejenak untuk berbagi informasi tetang cara membuat atau menambahkan 2 kolom di bawah header. Seblumnya Dapur Tutorial Blogspot Sudah Pernah Menyampaikan Tetang tutorial Cara Menambahkan Elemen Halaman Baru Dibawah Header Blog dan Cara Menambahkan Elemen Halaman Baru Di Atas Header Blog

    Nah...Untuk menambahkan 2 kolom dibawah header tidak begitu sulit kita hanya memodifikasi sedikit dari kode tersebut.

    Berikut langkah-langkah yang harus anda lakukan :
    1. Login menggunkan akun blog anda
    2. Setelah anda masuk ke Dashboard pilih Menu "Template"


    3. Klik  Tombol Edit HTML


    4. Klik Tombol Proceed atau Tombol Lanjutkan  kemudian akan muncul halaman Edit HTML seperti berikut


    5. Centang Expand Template Widget.


    6. Sebelum melakukan Edit HTML download lengkap template anda terlebih dahulu baca caranya Disini
    7. Sekarang Cari kode ]]></b:skin> (gunakan tombol CTRL + F3 u/ memudahkan pencarian kode) 
    8. Setelah ketemu Copas dan letakan kode berikut diatas kode ]]></b:skin>
    9. #box-kolom-widget { clear:both; } .box-widget { padding:0px 10px 10px 10px; border:1px dotted $bordercolor; }
    10. Sekaran Anda cari Kode <div id='main-wrapper'>   atau <div id="main-outer"> 
    11. Apabila sudah ketemu copas kode dibawah ini dan letakan diatas salah satu kode <div id='main-wrapper'>   atau <div id="main-outer">
    12. </div>
      <div id='box-kolom-widget'>
      <div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
      <b:section class='box-widget' id='col1' preferred='yes' style='float:left;'/>
      </div>

      <div id='box2' style='width: 50%; float: left; margin:0; text-align: left;'>
      <b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/>
      </div>

      <div style='clear:both;'/>
    13. Lankah terakhir klik Tombol Simpan Template


    14. Selesai dan lihat hasilnya
    Untuk melihat hasilnya silahkan anda masuk pada halaman Tata Letak atau Layout  jika ada Elemen tambahan Diatas Header Seperti dibawah ini berarti lankah-langkah diatas sudah anda lakukan dengan benar


    Demikian Tutorial Kali ini tetang Cara Membuat atau Menambahkan 2 Kolom Dibawah Header Semoga bisa bermanfaat

    Minggu, 12 Agustus 2012

    Cara Menambah 3 Kolom Witged di footer bawah

    Membuat halaman blog terlihat cantik dan menarik juga rapi itulah yang kita inginkan. Menambahkan Tiga Kolom Widget Di Footer atau kita sebut elemen widget dapat memberikan gaya baru pada blog anda.Membahas tutorial blog yang berhubungan dengan menambah kolom sebenarnya kang roni sudah pernah share dengan judul Cara super mudah menambahkan elemen di atas postingan dan kali ini kang roni juga akan membahas cara menambahkan kolom/elemen widget akan tetapi letaknya bukan di atas postingan tapi di bagian bawah footer dan kita tahu bahwa footer itu adalah merupakan bagian paling bawah pada halaman blog,yang lebih keren lagi kita akan menambahkan tiga kolom widget sekaligus,jadi bukan hanya satu kolom widget seperti yang kangroni share dulu (menambahkan kolom di atas posting).

    Sebagai contoh,sobat lihat gambar dibawah ini yang akan menjelaskan bagaimana kita akan melakukan/membuat dan menambahkan tiga kolom sidebar ke bagian footer di template blogger.



    Bila sobat sudah mengerti mari kita lanjutkan untuk melihat bagaimana Cara Menambahkan Tiga Kolom Widget Di Footer Untuk Blog.

    1.Pergi ke Rancangan/Desain >Edit HTML.
    2.Download Template Lengkap,Sebelum mengedit template Anda, Anda mungkin ingin menyimpan sebuah salinan dari template tersebut untuk keamanan bila terjadi kesalahan dalam peletakan kode nanti.
    3.Cari kode ]]></b:skin> kemudian tambahkan kode dibawah ini tepat di atasnya.

    #footer-left {
    width: 33%;
    float: left;
    margin:5px;
    text-align: left;
    }
    #footer-center {
    width: 34%;
    float: left;
    margin:5px;
    text-align: center;
    }
    #footer-right {
    width: 33%;
    float: right;
    margin:5px;
    text-align: right;
    }
    #footer-column-container {
    clear:both;
    }
    .footer-column {
    padding:5px;
    }

    4.Selanjutnya sobat cari kode ini

    <div id='footer-wrapper'>
    <b:section class='footer' id='footer'/>
    </div>

    Setelah ketemu sobat ganti kode yang di cetak tebal dengan kode dibawah ini

    <div id='footer-wrapper'>
    <div id='footer-column-container'>
    <div id='footer-left'>
    <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer-center'>
    <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer-right'>
    <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
    </div>
    <div style='clear:both;'/>
    </div>
    </div>

    ---------------------------Save dan lihat hasilnya pada halaman "Rancangan/Desain"

    Perhatikan keterangan lebih lanjut,bila sobat tidak menemukan kode pada langkah nomor 4 seperti dibawah ini

    <div id='footer-wrapper'>
    <b:section class='footer' id='footer'/>
    </div>

    Sobat cari aja kode <div id='footer'> kemudian dibawahnya taruh kode ini

    <div id='footer-wrapper'>
    <div id='footer-column-container'>
    <div id='footer-left'>
    <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer-center'>
    <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer-right'>
    <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
    </div>
    <div style='clear:both;'/>
    </div>
    </div>

    ---------------------------Save dan lihat hasilnya pada halaman "Rancangan/Desain"

    Ket:Bila hasilnya nanti tidak sejajar itu berarti ukuran kolom widgetnya terlalu besar,jadi sobat perlu merubah angka yang di cetak warna merah di atas dengan nilai angka yang lebih rendah.


    Buat blog cantik rapi menarik dengan Menambahkan Tiga Kolom Widget Di Footer.Cara Menambahkan Tiga Kolom Widget Di Footer Untuk Blog.

    Membuat Tab View Menu Tanpa Edit HTML di Blogspot

    Sebelumnya saya sudah pernah membahas tentang cara membuat tab view menu (menu dengan tab), namun dalam pembuatan tab view menunya kita harus mengedit HTML template. Mungkin banyak sobat blogger yang takut gagal sehingga bisa merusak template, padahal tidak mungkin rusak jika sebelum melakukan pengeditan sudah membackup template terlebih dahulu.


    Setelah bereksperimen, akhirnya saya coba dengan meletakkan kode script-nya langsung di gadget, ternyata berhasil. Dengan menyatukan semua kode yang ada, pembuatan menu tab view tidak perlu lagi susah payah mengedit HTML template. Jika sobat sudah pernah membaca postingan saya yang dulu, sobat tinggal menyatukan semua kodenya dan letakkan di gadget, belum tau urutan kodenya?

    Baiklah langsung saja, sekarang anda mesti login dulu ke blogger, kemudian pada Elemen Halaman  klik Tambah Gadget, lalu pilih yang HTML/Javascript. Setelah itu tambahkan kode script menu tab view-nya seperti dibawah ini :
    <style type="text/css">
    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 80px; /* Lebar Kotak Tab */
    height: 22px; /* Tinggi Menu Utama Atas */
    text-align: center; /* Posisi Teks Menu Tab */
    margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
    background-color: #000; /* Warna background Kotak Tab */
    padding-top: 2px; /* Spasi Atas */
    border: 1px solid #ffffff; /* Warna border kotak Tab */
    border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
    font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
    font-weight: 900; /* Ketebalan Teks kotak tab */

    }
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
    {
    background-color: #736F6E; /* Warna background utama kotak tab */ }
    div.TabView div.Pages
    {
    clear: both;
    border: 1px solid #cccccc; /* Warna border Kotak Konten */
    overflow: hidden;
    background-color: #ffffff; /* Warna background Kotak konten */
    }
    div.TabView div.Pages div.Page
    {
    height: 100%;
    padding: 5px; /* Jarak teks dalam kotak content */
    overflow: hidden;
    }
    div.TabView div.Pages div.Page div.Pad
    {
    padding: 3px 5px;
    }
    </style>

    <form action="tabview.html" method="get">
    <div id="TabView" class="TabView">
    <div style="width: 300px;" class="Tabs">
    <a><span style="color: #fff">Tab 1</span></a>
    <a><span style="color: #fff">Tab 2</span></a>
    <a><span style="color: #fff">Tab 3</span></a>
    </div>
    <div style="width: 300px; height: 200px;" class="Pages">

    <div class="Page">
    <div class="Pad">
    konten 1
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
    konten 2
    </div>
    </div>

    <div class="Page">
    <div class="Pad">
    konten 3
    </div>
    </div>
    </div></div></form>

    <script src="http://johnytemplate.googlecode.com/files/tab_view.js">
    </script>
    <script type="text/javascript">
    tabview_initialize('TabView');
    </script></div>
    Keterangan:
    • Tulisan berwarna kuning merupakan keterangan dari masing-masing kode. Silahkan atur nilainya sesuai keinginan
    • Tulisan berwarna orange merupakan warna judul Tab
    • Tulisan berwarna hijau merupakan judul Tab
    • Angka 300 pada 'Width' menunjukkan panjang kotak dan 200 pada 'height' menunjukkan tinggi kota. Silahkan ganti nilainya sesuai ukuran template anda.
    • Tulisan yang dicetak tebal merupakan isi tab view. Silahkan ganti dengan teks, link, banner atau widget anda.
    Jika anda ingin menambah menu tab baru cukup tambahkan kode yang berkedip dibawahnya. Demikian tadi tutorial membuat tab view widget tanpa eit HTML, contoh dari tab view ini bisa anda lihat di blog ini.

    Cara Membuat Menu Horizontal Tabs Sederhana di Blogger


    Tips Trik Blogger: Buka Rahasia Blogspot kembali lagi dengan persembahan Menu Horizontal untuk Blogger/Blogspot. Seperti menu-menu horizontal sebelumnya, menu horizontal ini masih berkutat dengan CSS dan HTML tanpa Javascript/Jquery, bahkan tanpa menggunakan gambar, berbasis tab individual, dan tidak menggunakan list (HTML unordered list). Posting menu horizontal ini juga dibuat untuk memenuhi permintaan pada komentar sobat Klik Menarik di posting Cara Membuat Menu Horizontal CSS 3D Button Blogger/Blogspot untuk dibuatkan menu horizontal yg sama dengan menu horizontal sebuah blog lain. Tentu saja menu ini telah mengalami beberapa modifikasi agar sesuai sebagai widget tambahan. Namun sekiranya ada kemiripan lah. Hope you enjoy and like it!
    menu horizontal blogger
    demo menu horizontal
    Kode CSS:
    /* Navigasi tabs Sederhana buka-rahasia.blogsot.com Starts */
    a.burastabs, a.burastabs:link, a.burastabs:visited {display:block; width:102px; height:30px; background:#444444; border:1px solid #ebebeb; margin-top:2px; text-align:center; text-decoration:none; font-family:arial, sans-serif; font-size:12px; font-weight:bold;color:#FFFFFF; line-height:25px; overflow:hidden; float:left;}
    a.burastabs:hover {color:#FFFFFF; background:#666666;}
    #burasbar {width:auto; margin:0 auto;}
    /* Navigasi tabs Sederhana Ends */
    Kode HTML:
    <!-- Navigasi tabs Sederhana http://buka-rahasia.blogspot.com Starts -->
    <div id='burasbar'>
    <a href="#" class="burastabs">Home</a>
    <a href="#" class="burastabs">About</a>
    <a href="#" class="burastabs">Blog Tips</a>
    <a href="#" class="burastabs">SEO Tips</a>
    <a href="#" class="burastabs">Contact</a>
    <a href="#" class="burastabs">Sitemap</a>
    <a href="#" class="burastabs">Advertise</a>
    </div>
    <!-- Navigasi tabs Sederhana Ends -->
    Sebelumnya copy & edit terlebih dahulu kode HTML di atas. Ganti # dengan URL yg dikehendaki. Ganti juga Home, Blog Tips, SEO Tips, dan seterusnya dengan anchor text yg diinginkan. Untuk menambah atau mengurangi tab, copy/tambahkan atau hapus bagian <a href="#" class="burastabs">Anchor Text</a> di atas </div>.

    Cara Membuat Menu Horizontal Tabs Sederhana di Blogger/Blogspot:

    1. Masuk ke Dashboard > Design/Rancannga > Edit HTML.
    2. Copy kode CSS di atas,
    4. Cari ]]></b:skin> (cari dengan Ctrl + F) & letakkan/paste Kode CSS tepat di atasnya.
    5. Save Template.
    6. Masuk ke Page Elements > Klik Add a Gadget
    7. Setelah pop up window muncul, pilih opsi HTML/Javascript
    8. Masukkan Kode HTML yg telah diedit tadi pada kolom seperti contoh berikut:
    undefined 
    9. Klik save.
    10. Drag/geser widget menu horizontal tersebut ke bawah/atas header (letakkan pada slot gadget) dan save lagi. DOnE!

    Sabtu, 11 Agustus 2012

    Membuat 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> :
      #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/AVvXsEgbtH3EG8zMzo4hkK67AYzJHHrzDFNF0nH-1prTKjc5V9r_0Sgdk_8suChNbPl8W6qEV_sdmaVAECQMSA9NA_OwURBP4k7LFe4hL519PRK6omu4FdkQTElhESdxNGp4bbydqBNg56wbyP4/s1600/scroller-bg.png) repeat center}
      #carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMHorhiOh9_PVzTV_D6oU8jQPtJ9QcJSYoJ6vBdWD-80HosjFNs657RaFsidKrRnxBsLq9vd_ADgzW2zIsrYro2I_W-nxhTfybYEXe28Q3a0wb2eRnrb6yc-JQGgnyeXVtiVBdwNm0qkc/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/AVvXsEjbqZKWbrWaR5cNbEPMB85XCRGjGHVfPIYQ2HvYq4fFp01p3heZRUPJtXfkazql4AbHnJKBbB9vTyc2oUpaq5ioIjRLUR_WXruY7mKS5ahlqr74hr2CEsjnuyNa5uA6z0PTvejegIdZbN8/s1600/prev.png) center}
      #carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVFBDgI1PwMIPmocQrq-uvvSj7NOFBOfaz0fn0fZBAmOcektx1-t4KhAxgfruD3esntkykSwAOrM_UdOoXCHD1WOsbzCEfh0lF-Mi-B1LrwlzBDS7XBXD9lVLJCrCcuMCQlEZHbmJoMwc/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/AVvXsEiGwffzzbngzUISBtNi4u2JMRfoG5yD9unWh4jdOCX2YFg9QUf0F_FU6YEVNQOPzdtQ9v4iOhDSLPF3CG2MJGApF-rhfwTsJKiqRk-3PPwd7qc6MMcKV4zuA5PgWN8602_RlPKd4Kzwp2s/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/AVvXsEiRfEKgURAnplQDgZKe9A-qdxNmNOd0yIX63oKjVSqn0nb4sgxomq3QkW41V3dPIZW6VUOx7FfYX1NLVnRGgesjPxGrbBHpQWwFscRg0nxgVofvdbu1bIW0y4ie6oSY1jBwU7RXHOq3F1k/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.
    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://johny-template.googlecode.com/files/jcarousellite.js' type='text/javascript'/>

      <script type='text/javascript'>
      //<![CDATA[
      imgr = new Array();
      imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHtCFdzhggeLuoaErAFboIzVmc9zptlaTwb2iZBACMKX5bzFIBKZGAn0fKSGwuGiZb79_zf7fHVJCu5NJqmJmzimKclBREgGKZ9ukFky2OmYiqtZsQMUGBSqDc-Okjc3RkVKFZtM-yYPg/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).
    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/-/&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. 
    8. 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, 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.

    Membuat Content Slider Image Otomatis

    Sebelum template pada demo slider ini saya bagikan nantinya, saya akan mengulas satu persatu terlebih dahulu fitur yang ada pada template ini. Dan disini Anda akan mengetahui bagaimana sebuah template akan bekerja bersama dengan beberapa fitur yang ada di dalamnya secara otomatis. Prinsip kerja dari Content Slider ini hampir sama pada artikel saya sebelumnya tentang membuat slider otomatis pada template Sporty Magazine 2, bedanya hanya pada tampilan thumbnail kecil yang saya letakkan di bawah dan efek mouseover yang ditambahkan pada slider ini.

    Banyak sekali tutorial membuat image slider yang sudah beredar di internet, dari beberapa kasus yang saya temui kebanyakan masih memasukkan URL gambar dan keterangan satu persatu, dan itu sangat merepotkan dan membutuhkan ketelitian, meskipun ada beberapa diantaranya yang sudah otomatis, disini saya hanya memberikan alternatif lain untuk memperbanyak koleksi teman-teman semua mengenai prinsip dasar dari kerja sebuah image slider otomatis pada blog platform blogger.  Tampilan image slider seperti gambar dibawah, jika anda perhatikan sebenernya inilah dasar dari pembuatan Yahoo slider sederhana yang saya pasang pada template Johny Simplemag. Anda bisa modifikasi sendiri sesuai selera.

    image slider otomatis


    Di blog demo ada slider image Carousel otomatis, jika Anda tertarik silahkan baca tutorialnya pada Membuat Slider Carousel Otomatis Berdasarkan Label.

    Cara Pembuatan

    Langsung saja pada langkah-langkah pembuatan Content Slider Image otomatis ini :
    1. Langkah pertama, Anda mesti login ke blogger dengan akun Anda
    2. Pilih blog yang ingin anda tambahkan slider image ini.
    3. Setelah itu 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. Langkah berikutnya, letakkan kode berikut ini diatas kode ]]></b:skin> :
      #featuredContent{float:left;width:407px;margin-right:10px;display:inline}
      #featured-slider{position:relative;overflow:hidden;width:407px;height:245px}
      #featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:407px;min-height:30px;height:auto!important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL3Y3t8gtUvCZe7uKy-o9QHdaBi8yOyFpKZxw8ozXJsRGV_VzPQfl58FQHHgV9oa8Vp5VectBouAkHZvZyt3ZVhVItNk82Rl8TTT4kWPEBBeWbCBIIfCFRnRNu6yZC5592Ta0XClYDnnz-/s1600/transparant.png)}
      #featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding:0 5px}
      #featured-slider .sliderPostInfo h2{color:#FFF;font:bold 14px Tahoma;text-transform:none;padding:0 5px}
      #featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1}
      #paginate-featured-slider{display:block;background-color:#f0f0f0;margin-bottom:0;padding:0 0 5px}
      #paginate-featured-slider ul{width:415px;padding-bottom:0;list-style:none}
      #paginate-featured-slider ul li{display:inline;width:75px;float:left;margin-left:0;margin-right:8px;margin-bottom:3px}
      #paginate-featured-slider img{padding-top:5px;background:#f0f0f0}
      #paginate-featured-slider a img{border-top:4px solid #f0f0f0}
      #paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #357798}
      Tulisan warna biru diatas adalah panjang dan lebar slider pada demo, silahkan sesuaikan ukurannya.
    6. 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://johny-template.googlecode.com/files/contentslider.js' type='text/javascript'/>

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

      aBold = true;

      summaryPost = 100;
      summaryTitle = 25;

      numposts3 = 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 showrecentposts3(json) {
          j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
          img  = new Array();

            for (var i = 0; i < numposts3; 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 = '<div class="contentdiv"><a href="'+posturl+'"><img width="407" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
          document.write(trtd);


          j++;
      }

      }

      function showrecentposts4(json) {
          j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
          img  = new Array();

            for (var i = 0; i < numposts3; 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><a class="toc" href="#"><img width="75" height="50" class="alignnone" src="'+img[i]+'"/></a></li>';
          document.write(trtd);

          j++;
      }

      }

      //]]>
      </script>
      Keterangan :
      Kode script warna merah (paling atas) 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.
      Warna biru : Jumlah post yang ditampilkan dalam slider
      Warna hijau : Panjang dan lebar image besar
      Warna merah tua : Panjang dan lebar image kecil
    7. Setelah langkah diatas, save templates terlebih dahulu. Setelah itu menuju ke layout >> add gadget masukkan kode ini pada kotak HTML/Javascript :

      <div id='featuredContent'>
      <div class='sliderwrapper' id='featured-slider'>
      <script>
      document.write("<script src=\"/feeds/posts/default/-/sport?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>");
      </script>
      </div>
      <div id='paginate-featured-slider'>
      <ul>
      <script>
      document.write("<script src=\"/feeds/posts/default/-/sport?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>");
      </script>
      </ul>
      <div class='clear'></div>
      </div>
      <script type='text/javascript'>
      featuredcontentslider.init({
      id: "featured-slider", //id of main slider DIV
      contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
      toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
      nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide.
      revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
      enablefade: [true, 0.4], //[true/false, fadedegree]
      autorotate: [true, 5000], //[true/false, pausetime]
      onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
      //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
      //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
      }
      })
      </script>
      </div>
      Keterangan :
      Perhatikan tulisan warna biru diatas, itu adalah label yang saya masukkan pada slider. Silahkan anda ganti sesuai keinginan. Dan warna merah adalah keterangan slider yang berupa kecepatan, slider efek mouseover dan lain-lain, tidak harus dimasukkan.
      Jika Anda ingin menggantinya dengan recent post atau artikel terbaru ganti kode (ada dua ganti semua) :
      script src=\"/feeds/posts/default/-/sport?max-results
      dengan kode berikut :
      script src=\"/feeds/posts/default?max-results
    8. Jika anda ingin meletakkannya langsung pada template, anda bisa letakkan kode nomer 7 dibawah kode <div id='main-wrapper'>, bagi yang ingin meletakkannya pada kotak HMTL/Javascript bisa dibuat dulu satu kolom kosong diatas blog post. Cara membuatnya, letakkan kode berikut diatas ]]></b:skin>
      1. /* Slide Content 
      2. ----------------------------------------------- */  
      3. .slide-wrapper {padding:0 auto;margin:0 auto;width:auto;floatleft;  
      4. word-wrap: break-word; overflowhidden;}   
      5. .slide {color#666666;line-height1.3em;}  
      6. .slide ul {list-style:none;margin:0 0 0;padding:0 0 0;}  
      7. .slide li {margin:0;padding-top:0;  
      8. padding-right:0;padding-bottom:.25em;  
      9. padding-left:0px;text-indent:0px;line-height:1.3em;}  
      10. .slide .widget {margin:0px 0px 6px 0px;}  
    9. Kemudian untuk memunculkannya pada layout (diatas blog post), anda harus memanggilnya. Cari kode <div id='main-wrapper'> kemudian letakkan kode berikut dibawahnya :
      1. <b:if cond='data:blog.url == data:blog.homepageUrl'>  
      2.       <div id='slide-wrapper'>  
      3. <b:section class='slide' id='slide' preferred='yes'/>  
      4.       </div>  
      5. </b:if>   
      G3RTAQDV75WT
    Jika diperhatikan kode script yang ada diatas memang terlalu banyak, dan tentunya akan semakin memperlambat loading sebuah blog. Untuk mengatasinya Anda bisa menyimpan kode-kode yang terlalu panjang tersebut di tempat penyimpanan Google Code. Nah, itu tadi salah satu fitur slider image yang saya ulas kali ini. Saya berharap dengan mengulas satu persatu fitur dalam sebuah template, nantinya teman-teman semua bisa membuat sebuah tampilan template sendiri dengan memodifikasi dari dasar tampilan yang sudah saya berikan diatas.Selamat mencoba dan semoga bermanfaat