Search

Cara Pasang Slidshow di Blog

Posted by Kimberly on Tuesday, November 23, 2010

Kali ini saya akan berikan tutorial cara pasang slidshow di blog. Saya mengambil kode yang paling sederhana dengan menu slidshow yang juga sangat sederhana. Slidshow sendiri fungsinya sebagai navigasi link yang biasanya diletakkan dibawah header, dan selalu menampilkan gambar sebagai pemanis agar pengunjung tertarik untuk mengklik isi yang dimaksud. Untuk demo saya gunakan template gris-amarillo dan meletakkannya di dalam main post, silahkan cek disini.

 

image Kode css yang akan saya berikan tidak mutlak harus sama, karena setiap template pasti berbeda terutama dalam tutorial ini adalah lebar kolom postingan. Untuk demo saya gunakan template yang lebar postingannya kurang lebih 540px. Buat sobat yang memiliki lebar kolom post lebih atau kurang dari 540px silahkan disesuaikan saja.

 

  1. Masuk ke Edit HTML.
  2. Jangan klik Expand Template Widget karena akan membuat sobat jadi pusing dengan kode yang panjang.
  3. Copas kode berikut diatas kode ]]></b:skin>

     

    /* SLIDESHOW */
    #slider-holder{width:540px;height:300px;overflow:hidden;margin-left:-15px;padding:0}
    #s3slider{width:540px;height:300px;position:relative;overflow:hidden}
    #s3sliderContent{width:540px;position:absolute;top:0;margin-left:0}
    .s3sliderImage{float:left;position:relative;display:none}
    .s3sliderImage span{position:absolute;left:0;font-weight:700;font-size:12px;color:#fff;height:70px;width:540px;background-color:#4e4d3c;filter:alpha(opacity=70);-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;display:none;bottom:0;padding:10px}
    .s3sliderImage span a.featured-title:link,.s3sliderImage span a.featured-title:visited{color:#FFF;font-size:14px;padding:0 0 2px}
    .s3sliderImage span a.featured-title:hover{color:#999}
    .s3sliderImage span a:link,.s3sliderImage span a:visited{color:#888}
    .s3sliderImage span a:hover{color:#555}

  4. Kemudian copas kode berikut diatas kode </head>

     

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js' type='text/javascript'/>
    <script type='text/javascript'>
    <!--//--><![CDATA[//><!--

    (function($){ 

        $.fn.s3Slider = function(vars) {      
            var element     = this;
            var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
            var current     = null;
            var timeOutFn   = null;
            var faderStat   = true;
            var mOver       = false;
            var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
            var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
            items.each(function(i) {
                $(items[i]).mouseover(function() {
                   mOver = true;
                });
                $(items[i]).mouseout(function() {
                    mOver   = false;
                    fadeElement(true);
                });
            });
            var fadeElement = function(isMouseOut) {
                var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
                thisTimeOut = (faderStat) ? 10 : thisTimeOut;
                if(items.length > 0) {
                    timeOutFn = setTimeout(makeSlider, thisTimeOut);
                } else {
                    console.log("Poof..");
                }
            }
            var makeSlider = function() {
                current = (current != null) ? current : items[(items.length-1)];
                var currNo      = jQuery.inArray(current, items) + 1
                currNo = (currNo == items.length) ? 0 : (currNo - 1);
                var newMargin   = $(element).width() * currNo;
                if(faderStat == true) {
                    if(!mOver) {
                        $(items[currNo]).fadeIn((timeOut/6), function() {
                            if($(itemsSpan[currNo]).css('bottom') == 0) {
                                $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                                    faderStat = false;
                                    current = items[currNo];
                                    if(!mOver) {
                                        fadeElement(false);
                                    }
                                });
                            } else {
                                $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                                    faderStat = false;
                                    current = items[currNo];
                                    if(!mOver) {
                                        fadeElement(false);
                                    }
                                });
                            }
                        });
                    }
                } else {
                    if(!mOver) {
                        if($(itemsSpan[currNo]).css('bottom') == 0) {
                            $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                                $(items[currNo]).fadeOut((timeOut/6), function() {
                                    faderStat = true;
                                    current = items[(currNo+1)];
                                    if(!mOver) {
                                        fadeElement(false);
                                    }
                                });
                            });
                        } else {
                            $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                            $(items[currNo]).fadeOut((timeOut/6), function() {
                                    faderStat = true;
                                    current = items[(currNo+1)];
                                    if(!mOver) {
                                        fadeElement(false);
                                    }
                                });
                            });
                        }
                    }
                }
            }
            makeSlider();

        }; 

    })(jQuery); 
    //--><!]]></script>

    <script type='text/javascript'>
    $(document).ready(function() {
    $(&#39;#s3slider&#39;).s3Slider({
    timeOut: 4000
    });
    });
    </script>

  5. Setelah itu siapkan gambar dan url yang akan ditampilkan dalam menu slideshow, jika sudah ada gambar dan url-nya, silahkan sobat copas kode berikut setelah kode <div id='main-wrapper'>

     

    <div id='slider-holder'>
    <div id='s3slider'>
    <ul id='s3sliderContent'>


    <li class='s3sliderImage' style='display: list-item;'>
    <a href='LETAK LINK DISINI 1'><img src='http://4.bp.blogspot.com/_-oSBOVNdtsg/TNQ5f7zGN2I/AAAAAAAAAI8/0EtNG4JD8gI/s1600/2.jpg' style='width: 540px; height: 300px;'/></a>
    <span style='display: block;'>
    <a class='featured-title block' href='LETAK LINK DISINI 1'>JUDUL POST 1</a><br/>
    Isi diskripsi tentang gambar diatas
    </span>

    </li>


    <li class='s3sliderImage' style='display: none;'>
    <a href='LETAK LINK DISINI 2'><img src='http://4.bp.blogspot.com/_-oSBOVNdtsg/TNQ5gKhdH1I/AAAAAAAAAJM/vQon_Uu0Ntg/s1600/4.jpg' style='width: 540px; height: 300px;'/></a>
    <span style='display: none;'>
    <a class='featured-title block' href='LETAK LINK DISINI 2'>JUDUL POST 2</a><br/>
    Isi diskripsi tentang gambar diatas
    </span>
    </li>


    <li class='s3sliderImage' style='display: none;'>
    <a href='LETAK LINK DISINI 3'><img src='http://4.bp.blogspot.com/__Ue-P3hoW1M/TM2c9Ye_X_I/AAAAAAAABNo/jpQh0WlWzvs/s1600/2.jpg' style='width: 540px; height: 300px;'/></a>
    <span style='display: none;'>
    <a class='featured-title block' href='LETAK LINK DISINI 3'>JUDUL POST 3</a><br/>
    Isi diskripsi tentang gambar diatas
    </span>
    </li>

     

    <li class='s3sliderImage' style='display: none;'>
    <a href='LETAK LINK DISINI 4'><img src='http://3.bp.blogspot.com/__Ue-P3hoW1M/TM2c9ujd4EI/AAAAAAAABNw/dE2qWy2YxMw/s1600/3.jpg' style='width: 540px; height: 300px;'/></a>
    <span style='display: none;'>
    <a class='featured-title block' href='LETAK LINK DISINI 4'>JUDUL POST 4</a><br/>
    Isi diskripsi tentang gambar diatas
    </span>
    </li>


    <li class='s3sliderImage' style='display: none;'>
    <a href='LETAK LINK DISINI 5'><img src='http://3.bp.blogspot.com/__Ue-P3hoW1M/TM2c9waMz1I/AAAAAAAABN4/SwlhrFC60t8/s1600/4.jpg' style='width: 540px; height: 300px;'/></a>
    <span style='display: none;'>
    <a class='featured-title block' href='LETAK LINK DISINI 5'>JUDUL POST 5</a><br/>
    Isi diskripsi tentang gambar diatas
    </span>
    </li>


    <li class='clear s3sliderImage'/>

    </ul>
    </div>
    </div>

  6. Simpan Template

 

 

Keterangan :

  • Perhatikan lebar 540px, silahkan sesuaikan saja dengan lebar post template sobat.
  • Lihat tulisan yang berwarna ungu pada kode css-nya, saya gunakan margin-left:-15px karena menyesuaikan dengan demo template yang saya gunakan.
  • Kode yang berwarna pink adalah kode url untuk gambar yang sudah sobat upload sebelumnya.
  • dan kode dengan tulisan tebal pastinya bisa dimengerti dan jelas saya tulis disitu.

 

Cukup panjang, semoga berhasil ya !

More aboutCara Pasang Slidshow di Blog

Alakadarnya Blogger Template

Posted by Kimberly on Sunday, November 21, 2010

image Alakadarnya blogger template adalah sebuah template yang memang alakadarnya dan seadanya. Itulah sebabnya mengapa saya beri nama template ini dengan nama alakadarnya. Mengusung tema yang sama dengan sebelumnya, saya coba berikan template blogger sederhana namun tampak menarik dengan sedikit sentuhan garis lengkung pada setiap sisi. Saya berikan juga tambahan padding sebesar 20px pada garis tepi sehingga tampak seperti border.

 

Template ini memiliki 2 kolom, 1 kolom postingan dan 1 kolom sidebar yang terletak di sebelah kanan. Dan tambahan 3 kolom footer membuat alakadarnya memiliki banyak tempat untuk meletakan widget atau link. Selain itu saya tambahkan warna kontras merah pada menu horizontal, dan hover gelap selaras dengan bagian utama template. Kemudian tambahan banner ukuran 468 x 60 pada bagian header yang merupakan kebutuhan kebanyakan blogger untuk memasang banner mereka. Saya rasa itu saja penjelasan tentang Alakadarnya blogger template, semoga tertarik.

More aboutAlakadarnya Blogger Template

Update Post Ke Twitter Via FeedBurner

Posted by Kimberly on Saturday, November 13, 2010

Untuk meningkatkan pengunjung blog, update postingan ke situs-situs social bookmark merupakan hal yang mutlak dilakukan. Seperti update post di facebook, twitter juga tempat yang wajib kita isi dengan postingan-postingan blog kita. Untuk itu ada cara mudah melakukannya tanpa harus menulis manual di twitter, yaitu dengan menggunakan jasa feedburner.

 

Pertama-tama yang harus sobat lakukan adalah mendaftar di feedburner, kemudian isi dengan url atau feed blog sobat. Jika sudah, sekarang tinggal setting sedikit pada bagian social bookmark.

 

  1. Klik pada link yang sudah sobat daftarkan sebelumnya.

     

    image
  2. Kemudian klik pada tab Publicize.

     

    image
  3. Klik pada Socialize pada bagian samping.

     

    image
  4. Masukkan account twitter sobat dengan mengklik Add a Twitter account.

     

    image
  5. Login dengan account twitter sobat.
  6. Kemudian perhatikan tampilan format yang akan ditampilkan dalam postingan di twitter.

     

    image
  7. Pada bagian Post content ganti dengan Title and Body untuk menampilkan judul dan isi post.
  8. Jika sudah selesai, maka klik Active pada bagian paling bawah.

     

    image

 

Selamat mencoba !

More aboutUpdate Post Ke Twitter Via FeedBurner

Cara Membuat Tulisan Besar Pada Awal Postingan

Posted by Kimberly on Saturday, November 6, 2010

Kemarin saya mendapat email dari sobat johan yang menanyakan perihal membuat huruf yang besar pada awal postingan. Sebenarnya jika ingin tau bisa saja searching di google tentang hal ini karena memang sangat banyak bloggers yang menulis tutorial ini. Saya agak lupa apakah pernah menulis tutorial huruf besar pada awal postingan ini, jadi semalam saya bongkar-bongkar lagi semua judul post dan ternyata memang belum pernah saya tulis mengenai hal ini.

 

Sekedar info buat yang baru, huruf ini akan tampil besar dan berbeda sendiri dengan huruf lain yang ada di blog kita. Biasanya bisa kita lihat di koran atau majalah. Untuk membuatnya sangat mudah, karena hanya butuh satu kode css dan sedikit sentuhan pada saat membuat postingan.

 

  1. Setelah masuk blogger, silahkan klik Edit HTML.
  2. Tambahkan kode berikut sebelum kode ]]>< /b:skin>

    .huruf {
    float:left;
    color:#000;
    line-height:60px; 
    padding-right:5px;
    font-family:trebuchet ms,verdana;
    font-size:60px; 
    }

  3. Simpan Template.

 

 

Cara Posting

 

Tambahkan kode <span class="huruf"> sebelum huruf pertama dan </span> setelahnya. Contohnya seperti ini :

 

<span class="huruf">K</span>emarin saya mendapat email dari sobat johan yang menanyakan perihal membuat huruf yang besar pada awal postingan. Sebenarnya jika ingin tau bisa saja searching di google tentang hal ini karena memang sangat banyak bloggers yang menulis tutorial ini.

 

Sip, semoga bermanfaat ! Nerd

More aboutCara Membuat Tulisan Besar Pada Awal Postingan
Related Posts Plugin for WordPress, Blogger...