Kamis, 18 Oktober 2012

Cara Mudah membuat Logo Blog Yang Keren

Tampilan logo blog pada header yang khas dan memiliki desain yang bagus pasti menjadi dambaan setiap blogger. Logo blog biasanya ditampilkan sebagai bagian dari header yang berupa paduan gambar dan gambar teks yang berisi nama atau ciri dari suatu blog.

Umumnya, logo blog digunakan untuk menggantikan teks pada bagian title dan deskripsi header. Tentu saja, membuat logo blog, meskipun hanya berupa logo text, bukanlah perkara mudah bagi setiap orang. Keahlian setidaknya dibutuhkan untuk membuat teks logo dengan menggunakan software image editing semacam Correl Draw maupun Photoshop.

Kabar baiknya, saat ini ada banyak layanan situs online logo creator and generator yang dapat memudahkan pekerjaan membuat logo blog. Siapa saja dapat dengan mudah membuat teks logo blog maupun logo blog untuk header dengan hasil yang lumayan baik dan tidak mengecewakan. Telah saya pilihkan 6 online logo generator/creator yang mudah untuk digunakan sebagai berikut:


Memiliki berbagai jenis text generator sesuai dengan bentuk design-nya, misalnya patterned text generator, glitter text generator, LCD text generator, marquee text generator, dan masih banyak lagi yang lainnya. Memiliki interface yang bersih dan waktu muat halaman yang cepat sehingga membuat kita semakin mudah dan cepat dalam membuat logo.


FLaming text memiliki banyak sekali koleksi design yang bermacam-macam dengan berbagai pilihan dari yang paling sederhana dan paling animatif. Membuat anda harus lebih jeli dan benar-benar fokus untuk membuat pilihan karena banyaknya design yang harus dipilih. Interface generator yang lengkap disertai live preview dari hasil teks yang diedit sehingga tidak perlu lagi berpindah halaman untuk kembali mengedit.


Sama halnya dengan flamingtext, cooltext memiliki banyak koleksi design dan memiliki interface editor yang mudah dan handy, sehingga siapapun dapat dengan mudah menggunakannya. Terdapat dua jenis design, yaitu logo dan button. Dilengkapi pula dengan puluhan jenis font menarik yang dapat dipilih dan disesuaikan dengan design blog.


Ketika membuka halaman web situs ini, anda akan masuk ke halaman text logo editor yang sederhana. Kostumisasi keseluruhan teks diserahkan kepada user, sehingga dapat membuat logo sesuai dengan kehendak. Pilhan style-nya tidak begitu banyak, namun masih cukup berharga mengingat hasil gambar dari online logo creator ini memiliki kualitas yang cukup baik.

Design-design pada situs ini lebih menekankan pada koleksi design font yang menawan. Design yang dihasilkan dengan generator dapat dikostumisasi lebih, namun warna gambar hitam dan putih menurut saya adalah yang terbaik karena kesan vector-nya sangat kuat dan memukau.


Cukup sederhana, atau bisa dibilang sangat sederhana, selain karena situs ini hanya memiliki satu halaman, design-nya pun sangat terbatas. Namun, bagi anda yang sedang belajar dan dalam proses awal blogging dan design gambar, situs ini bisa menjadi awalan bagi anda untuk belajar membuat design logo.

Setelah mendapatkan logo blog, pasang logo tersebut untuk menggantikan title dan description pada header blog. Simak Cara Mengubah/Memasang Gambar Background Headerdi Blog


Read More ===>

Cara Mengubah / Memasang Gambar Background Header di Blog

memasang header blog
Cara ini digunakan untuk mengubah/menambahkan gambar header secara keseluruhan sebagai background/latar. Jika hanya ingin mengganti/memasang gambar header pada judul dan deskripsi, cukup masuk ke Page Elements dan klik edit pada widget judul dan deskripsi pada bagian header. Upload gambar anda melalui fitur upload yang telah disediakan.
click to enlarge
Namun untuk mengganti seluruh bagian backround/latar wrapper header di blog anda, gunakan cara berikut:

1. Masuk ke Edit HTML.
2. Cari  (Ctrl+F) #header-wrapper atau yang sejenisnya (masing-masing template tidak sama tergantung basic template tersebut). Declarator ini selalu di bagian pengaturan header dan posisinya paling atas.
Contoh:
#header-wrapper{background-color:#00000;width:975px;margin:0 auto 0;height:125px;)
3. Tambahkan atribut ini sebelum background-color (atau anda dapat menghapus bagian background color jika header anda akan dipenuhi dengan gambar):
background image: url(http://alamat-url-gambar/gambar.jpg);
background-repeat: no-repeat; 
contoh jadinya:
#header-wrapper{ 
background image: url(http://alamat-url-gambar/gambar.jpg);
background-repeat: no-repeat;
background-color: #00000;
width:975px;margin:0 auto 0;height:125px;)

Atau aturan shorthand untuk background juga dapat digunakan:
background:url(http://alamat-url-gambar/gambar.jpg) no-repeat #000000;
contoh:
#header-wrapper{background:url(http://alamat-url-gambar/gambar.jpg) no-repeat #00000; width:975px;margin:0 auto 0;height:125px;)
Ganti http://alamat-url-gambar/gambar.jpg dengan direct url dimana anda mengupload gambar  header blog. Sebelum mengupload & memasang gambar header, edit atau pastikan ukuran gambar sama dengan width dan height header blog.
4. Save template.
 
 
Read More ===>

Rabu, 17 Oktober 2012

Cara merubah Mouse Pointer Cursor


Untuk Mendapatkan  pointer cursor pada berbagai bentuk pointer cursor
boleh didapati di www.cursors-4u.com dan banyak lagi laman web yang menyediakan pointer cursor

  1. Masuk pada web yang menyediakan pointer cursor atau :  

       Klik Disini 
 2. Klik pada categories pointer yang kamu inginkan :
   Animated
   Anime
   Cartoons
   Celebrity
   Comics
   Cursors/Pointers
   dan seterusnya...
3. Klik pada icon/gambar pointer yg kamu inginkan
   copy kode Universal CSS/HTML yang ada dibawah icon tersebut

   Contoh Kode  Universal CSS/HTML :


<style type="text/css">body, a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1031.cur), progress !important;}</style><a href="http://www.cursors-4u.com/cursor/2012/01/22/x-steel-pointer-2.html" target="_blank" title="X-Steel Pointer"><img src="http://cur.cursors-4u.net/cursor.png" border="0" alt="X-Steel Pointer" style="position:absolute; top: 0px; right: 0px;" /></a>

Untuk Memasang Mouse Pointer Cursor pada Blog Kamu
Caranya :
1. Login keblog kamu
2. Klik Design > Add Gadget
   pilih HTML/JavaScript
3. Masukan kode pointer yang kamu copy tadi
   kedalam kotak konten HTML/JavaScript
4. Klik Save dan lihat hasilnya
Read More ===>

Agar Loading Blog Lebih Cepat



Kecepatan loading sangat berpengaruh pada Traffik Blog kita,
percuma blog yg kita buat cantik2 tapi loading'nya berat.
so pasti pengunujung mengurungkan niat'nya untuk masuk pada blog kita.
Sebenarnya ada banyak hal yang mempengaruhi loading blog kita menjadi berat,
namun saya tidak akan menguraikanya panjang lebar...disini
takutnya bukan loading blog yg berat eh malah sobat semua males baca ketikan saya yg jelek ini hehe...:D

Untuk Membuat Loding Blog Menjadi Cepat
Cara-nya
Ikuti Langkah-Langkah Dibawah ini :

1. Klik Design > Page elements > Add Gadget
2. Pilih HTML/JavaScript
3. Copy kode dibawah ini
dan paste kan kedalam konten HTML/JavaScript

<script type="text/javascript" src="http://ajak.googleapis.com/ajak/libs/jquery/1.4/jquery.min.js"></script> <script type='text/javascript' src='https://sites.google.com/site/jeritanblog/javascript/jquery.lazyload.mini.js? ver=1.5.0.'></script> <script type="text/javascript"> jQuery(document).ready(function($){ if(navigator.platform == "iPad") return; jQuery("img").lazyload({ effect."fadeln", placeholder: "http://sadpanda.us/images/397069-NWUFVFU.jpg" }); }); </script>

4. Save dan lihat hasilnya

Demikian Cara Mudah Membuat Agar Loading Blog Menjadi Cepat
Read More ===>

Cara Membuat LINK Berkedip Bintang

Yang Saya Maksud Link Berkedip Bintang Adalah
Saat Mouse pointer diarahkan pada Link,maka Link tersebut akan mengeluarkan pancaran bintang yang berkelip.


Contohnya Seperti Pada Blog Saya,Coba Aja Sobat Arahkan Anak Panah Mouse Pada Link Yang Ada
Taraaaaaa......Munculkan Bintang'nya


Pada Kesempatan kali ini saya akan berbagi Cara Membuat Link Berkelipan Bintang.
Oke langsung saja...caranya


ikuti langkah-langkah dibawah ini :
1. Login ke blog sobat
2. Klik Design > Edit HTML > Centang pada Expand widget templates
3. Cari kode </head>
    Gunakan Ctrl+F untuk memudahkan pencarian
4. Copy kode dibawah ini, dan paste/letakan diatas kode </head>


<style> a:hover { text-decoration:blink; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVZT4jrMjxRiqyNDJP3RfnEdp54EWlzaV9l_cWMj5cu-UUw0vFM5l9e5m6rKrjWqNFnT0za-udPdPoz9dKBn7vyytfHNeQTyTm3TR9EQPaupKpeaR7-OdGa3Ms9kGTTNsbQ6jWwmJsgzw/s1600/str4.gif); } </style>

Cara Membuat Link Berkelipan Bintang

Note :
Pada text Merah boleh juga diganti dg url dibawah ini :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEdujg8BBYWIPa-M9tpywCJfEZHwMSXcU80xZNtLUg2r6_HFPMzrbVdCQ-k8JxUFj2yvYuzaAZxzC3G_RciH_VWrXkeY9yUzoHdNJ7sNOwfhDK60inhhsnmLJTiD7GbeaTgo2WWkhAFs8/s1600/blink.gif


Cara Membuat Link Berkelipan Bintang

5. Klik Save/Simpan dan lihat hasilnya

Selamat Mencoba...
Semoga Cara Membuat Link Berkelipan Bintang ini bermanfaat
Read More ===>

Sabtu, 13 Oktober 2012

Menampilkan Judul Postingan Saja di Blog

standard Perhatikan gambar disamping, terlihat jelas blog hanya menampilkan judul postingan saja setelah kita melakukan pencarian / search di blog. Jika sobat bingung maksud saya, silahkan sobat ketik keyword “blogspot” pada kotak search milik saya, terlihat blog hanya menampilkan judul – judul dari postingan saja. Secara default atau bawaan dari template standard, jika kita melakukan pencarian, maka yang akan kita temukan adalah judul postingan berserta urainnya yang panjang lebar, sehingga hasilnya kurang efisien dan memakan tempat. Dan biasanya pengunjung menjadi jenuh dan enggan mengklik halaman selanjutnya untuk mencari kata kunci yang di maksud.

Sekarang sobat sudah paham maksud dan tujuan untuk melakukan hasil pencarian dalam bentuk judul postingan. Jika tertarik, silahkan ikuti langkah – langkahnya berikut ini :

  1. Login ke blogger dengan ID sobat.
  2. Klik Tata Letak.
  3. Pilih Edit HTML.
  4. Silahkan klik Download Template Lengkap, untuk jaga – jaga jika gagal dan template jadi rusak..Laughing just kidding sob.
  5. Kemudian klik Expand Template Widget.
  6. Cari kode <b:include data='post' name='post'/>
  7. Hapus kode diatas dan ganti dengan kode berikut ini :
    <b:if cond='data:blog.homepageUrl !=
    data:blog.url'>
    <b:if cond='data:blog.pageType != "item"'>
    <a expr:href='data:post.url'>
    <data:post.title/></a><br/><br/>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>

  8. Kemudian Simpan Template.
Silahkan lihat hasilnya, jika berhasil maka akan tampak seperti gambar diatas. Untuk variasi judul postingannya, saya punya 2 variasi yang mungkin bisa sobat terapkan :

  1. Bentuk hasil pencarian dengan garis putus – putus dibawah setiap judul postingan.
    hr
    Jika sobat tertarik dengan variasi yang seperti ini, sobat tinggal menyisipkan kode <hr align='left' color='#CCCCCC' size='1' style='border-style: dotted; border-width=1'/> diantara </br>……..</br>, sehingga hasilnya menjadi seperti berikut ini :
    <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <a expr:href='data:post.url'>
    <data:post.title/></a><br/><hr align='left' color='#CCCCCC' size='1' style='border-style: dotted; border-width=1'/><br/>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>

    Kode warna #CCCCCC adalah warna abu - abu, untuk mengubah warna garis dengan warna lain sobat bisa lihat disini.
  2. Bentuk hasil pencarian dengan judul didalam kotak - kotak (seperti di blog saya Blushing).
    outset
    Untuk hasil yang seperti ini, silahkan sobat ubah kode diatas menjadi seperti berikut :
    <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div style="border: 2px outset #CCCCCC; width: 500px; padding: 10px; background-color: #FBF5EF; text-align: left;">
    <a expr:href='data:post.url'>
    <data:post.title/></a></div><br/>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>
    <b:else/>
    <b:include data='post' name='post'/>
    </b:if>

    Untuk kode width:500px, sobat sesuaikan dengan lebar main menu atau lebar kolom postingan sobat. Jika lebar kolom post 500px maka sebaiknya buatlah sebesar 400px saja agar terlihat lebih bagus. Dan untuk kode #FBF5EF adalah background judul post, atur sesuai dengan keinginan.
    Selamat Mencoba.....
======>
Read More ===>

Kode Warna

Untuk mengedit template sobat tentu akan selalu berhubungan dengan yang namanya kode warna HTML. Tidak seperti kode warna biasa, kode warna HTML ini menggunakan angka bukan huruf. Contoh untuk kode warna putih adalah #FFFFFF, untuk warna hitam #000000, dan masih banyak lagi kode untuk warna yang lain, jika saya sebutkan satu persatu akan memakan tempat dan waktu yang lama. Untuk itu saya buatkan dalam satu kotak besar beserta gambar warna yang jika di klik akan muncul kode warnanya.

Silahkan sobat kreasikan blog sobat dengan warna - warna di bawah ini :








































































































































































































Kode warna yang terpilih :
Read More ===>

Membuat Navigasi Horizontal 2 Baris

Contohnya bisa sobat lihat pada gambar berikut, dimana saya menggunakan navigasi 2 baris dengan warna yang berbeda dan plus widget search engine sebagai bonus.
imageWidget ini cocok buat blog yang ingin menampilkan banyak link dibagian bawah header. Saya sudah mencobanya dibeberapa template standard dari blogger. Jika berminat, berikut cara memasangnya.

  1. Login ke blogger.
  2. Masuk ke Tata letak.
  3. Klik Edit HTML.
  4. Sebaiknya backup template sobat terlebih dahulu.
  5. Letakkan kode berikut sebelum kode ]]></b:skin>
    /*-- Nav --*/
    #nav {
    width:980px;
    float:left;
    background:#444;
    height:33px;
    border-bottom:1px solid #fff;
    padding:0;
    }

    #nav-left {
    float:left;
    display:inline;
    width:700px;
    }

    #nav-right {
    float:right;
    display:inline;
    width:200px;
    }

    #nav ul {
    position:relative;
    overflow:hidden;
    font:1em verdana,Helvetica,sans-serif;
    font-weight:700;
    font-size:13px;
    margin:0;
    padding:0;
    }

    #nav ul li a,#nav ul li a:visited {
    display:block;
    color:#f9f9f9;
    text-decoration:none;
    margin:0;
    padding:9px 10px;
    }

    #nav ul li a:hover {
    color:#B40404;
    background-color:#fff;
    margin:0;
    padding:9px 10px;
    }

    #search {
    background:#f9f9f9 url(http://lh3.ggpht.com/_7Y9pl24WpQY/SttgbS-ClLI/AAAAAAAAB78/PFI3z4AHOyw/search_thumb%5B1%5D.gif) 6px 0 no-repeat;
    border:1px solid #b3b3b3;
    float:right;
    height:20px;
    width:160px;
    margin-top:5px;
    margin-right:5px;
    padding-top:2px;
    }

    * html #search {
    margin-right:5px;
    }

    #search input {
    font-family:Arial,Helvetica,sans-serif;
    background:transparent;
    border:0;
    color:#000;
    float:left;
    font-size:12px;
    width:120px;
    padding-left:27px;
    margin:0;
    }

    /*-- Nav2 --*/
    #nav2 {
    float:left;
    display:inline;
    width:980px;
    background:#46040C;
    height:30px;
    clear:both;
    margin:0 auto;
    padding:0;
    }

    #nav2 ul {
    position:relative;
    overflow:hidden;
    font:1em Verdana,Arial,Helvetica,sans-serif;
    font-weight:500;
    margin:0;
    padding:0;
    }

    #nav2 ul li a,#nav2 ul li a:visited {
    display:block;
    color:#fff;
    text-decoration:none;
    margin:0;
    padding:8px 10px;
    }

    #nav2 ul li a:hover {
    color:maroon;
    background-color:#fff;
    margin:0;
    padding:8px 10px;
    }

    #nav ul li,#nav2 ul li {
    float:left;
    list-style:none;
    }
  6. Kemudian cari kode yang mirip seperti dibawah ini :
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='uji coba (Header)' type='Header'/>
    </b:section>
    </div>
  7. Letakkan kode berikut tepat setelah kode diatas :

    <div id='nav'>    
    <b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
    <b:widget id='LinkList10' locked='true' title='Top Tabs' type='LinkList'>
    <b:includable id='main'>
    <div class='widget-content'>
    <b:if cond='data:title'/>
    <div id='nav-left'>   
    <ul>
    <li><a href='/'>Home</a></li>
    <b:loop values='data:links' var='link'>
    <li><a expr:href='data:link.target'><data:link.name/></a></li>
    </b:loop>
    </ul>
    </div>  
    </div>
    </b:includable>
    </b:widget>
    <b:widget id='HTML70' locked='true' title='Search' type='HTML'>
    <b:includable id='main'>
    <div id='nav-right'>
    <form action='/search/' id='searchform' method='get' style='display:inline;'>
    <div id='search'>
    <input id='search' maxlength='150' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' type='text' value='Search...'/>
    <data:content/>
    </div>
    </form>
    </div>
    </b:includable>
    </b:widget>
    </b:section>   
    </div>
    <div id='nav2'>
    <b:section class='top-tabs' id='top-tabs' preferred='yes' showaddelement='no'>
    <b:widget id='LinkList11' locked='true' title='link Tabs' type='LinkList'>
    <b:includable id='main'>
    <div class='widget-content'>
    <b:if cond='data:title'/>
    <div id='nav2'>   
    <ul>
    <li><a href='http://www.blog-zone.info'>blogger news</a></li>
    <b:loop values='data:links' var='link'>
    <li><a expr:href='data:link.target'><data:link.name/></a></li>
    </b:loop>
    </ul>
    </div>  
    </div>
    </b:includable>
    </b:widget>
    </b:section>   
    </div>
  8. Ganti tulisan yang berwarna merah dengan link yang sobat ingin tampilkan, karena link ini akan muncul secara automatis ketika link pertama pada baris ke-2 sobat isi.
  9. Simpan Template.

Keterangan :

  • width:980px  --->> lebar dari navigasi, sesuaikan dengan lebar template sobat.
  • width:700px --->> lebar dari navigasi utama (tidak termasuk widget search engine).
  • Contoh : jika sobat mempunyai template dengan lebar 900px, maka ganti angka 980px menjadi 900px dan ganti angka 700px menjadi 620px.
  • Tulisan uji coba (Header) adalah judul blog, sesuaikan dengan judul blog sobat, sehingga ketika melakukan pencarian tidak bingung karena setiap blog mempunyai judul yang berbeda toh, jadi jangan di telan mentah-mentah kode :
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='uji coba (Header)' type='Header'/>
    </b:section>
    </div>
Semoga berhasil dan bermanfaat tentunya.

======>
Read More ===>

Cara Pasang Slidshow di Blog

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.

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmTz4k4snYT5JDJBtvvh2KE5D2jMVN8_xhJNH4nj5ozN6_fVGz00SGn25iACLwrTjboF43FbUnJ9AywI7CIds5VhSu98WlRPa9KSdhpq87_LdGrEzA9mPIS6ub9NIbuZpKA4hksAFDkw/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz9AtNjNvtrxR62fPf8SP_Zna7Ur4zODXEMfNT7a0vRgSG7Dn1WUf3W_oBouTuaOyzc8D_11yhu4BvOl8owMX3VELIUwxlAZfAeGdQK4wVLRHJrJlAdFOvIU7aTzrWsA59maGku7FdXg/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjg38XFVpaYgoR4HQaYCGLvAPqWXvmDWjOCogfBI-wwHD1IEjaaW9NpYJnTVfKaJ_axS0N2CB1uzIlK8TtiWYPF9LedZvGHE8veh_jhGxBH3sVKeO8bwFAt387Uvab2g0nA8HQg1nMS-o0/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz0jOq2wxicgywKbGqg9AF0nR7zU6PLKK7hkEILq-2iAXBAuNWJLtbD-HTsinucz-20wT46_La4H4XGkKJh9TXncjDE82zstc5kr3yTFbdyi1uppYpPq63QWKYA2U-mXPr-nGNyEWWnlg/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZkMqCwmeZjnt9jDgI1KWAK9WGzeM97VSUAai-jxu2sibq47LR3WCs5WJTFnnU2LzA6XB49H0Rd4C5h5x10bNSvsgYTyCyngrYllSus0MmX3cSOLgQuDjjjoy10Z30X6YcNSUB-v0Uekc/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 !



======
>
Read More ===>

Cara Menghapus Angka Pada Label di Blog

Ada postingan pasti ada label, dua hal yang tidak bisa terpisahkan karena setiap kita memposting artikel pasti kita sertakan label di bawahnya. Fungsi label sendiri sebenarnya untuk membedakan kita dalam pengkategorian antara artikel yang satu dengan yang lain, dan secara default label akan memperlihatkan angka dibelakang judulnya, jadi jika sobat menambahkan 100 postingan kedalam satu judul label maka akan nampak angka 100 dibelakang judul labelnya.

Seperti ini contoh gambar dari label atau kategori blog saya sebelum saya hilangkan angka - angkanya :


Tidak suka dengan angka dibelakang judul label dan ingin menghapusnya ? saya punya solusi untuk menghilangkan angkanya.

  1. Login ke Blogger dengan ID sobat.
  2. Klik Tata Letak --> Edit HTML.
  3. Kemudian contreng Expand Template Widget.
  4. Cari kode yang seperti ini :
    (<data:label.count/>)
  5. Hapus kode tersebut tapi ingat letaknya, siapa tau sobat ingin menampilkan kembali dalam label sobat.
  6. Kemudian Save Template.
Lihat hasilnya, angka dibelakang labelnya sudah hilang kan..
Selamat Mencoba ya....

======>
Read More ===>

Cara Membuat label Dengan Fungsi Scroll

Tutorial memasang label dengan fungsi scroll ini sengaja saya tulis semata-mata untuk membantu blogger yang mempunyai banyak label / kategori dalam blognya. Jika di pasang semua tentunya akan makan tempat, dan mungkin bisa membuat blog jadi timpang alias panjang sebelah antara postingan dengan sidebar.

Menu Scroll tentunya sudah banyak yang tau, menu ini dapat ditarik ke bawah dan ke atas. Cara membuatnya sangat mudah, hanya dengan menyisipkan sedikit kode HTML maka jadilah label dengan fungsi scroll.

Label

Untuk membuatnya, silahkan ikuti dengan cermat langkah-langkahnya berikut ini :
  1. Login ke blogger dengan ID sobat tentunya.
  2. Buatlah Label dengan menambah Gadget pada sidebar, jangan lupa beri judul.
  3. Anggap saja sobat telah membuat judul labelnya dengan nama “Kategori”.
  4. Sekarang tuju ke Edit HTML.
  5. Klik Expand Template Widgets.
  6. Cari label yang sudah sobat buat tadi, dengan CTRL+F dan ketikkan “Kategori”, maka akan muncul kode HTML yang ribet, tapi jangan pusing melihat kode HTML tersebut.
  7. Perhatikan saja tulisan yang berwarna merah dibawah ini, kode itulah yang harus disisipkan kedalam label yang sudah sobat buat.
    <b:widget id='Label1' locked='false' title='Kategori' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:title'>
    <h2><data:title/></h2>
    </b:if>
    <div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
    <div style='overflow:auto; width:ancho; height:250px;'>
    <b:if cond='data:display == &quot;list&quot;'>
    <ul>
    <b:loop values='data:labels' var='label'>
    <li>
    <b:if cond='data:blog.url == data:label.url'>
    <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/>
    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    <b:if cond='data:showFreqNumbers'>
    <span dir='ltr'>(<data:label.count/>)</span>
    </b:if>
    </li>
    </b:loop>
    </ul>
    <b:else/>
    <b:loop values='data:labels' var='label'>
    <span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
    <b:if cond='data:blog.url == data:label.url'>
    <span expr:dir='data:blog.languageDirection'><data:label.name/></span>
    <b:else/>
    <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
    </b:if>
    <b:if cond='data:showFreqNumbers'>
    <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
    </b:if>
    </span>
    </b:loop>
    </b:if>
    <b:include name='quickedit'/>
    </div>
    </div> </b:includable>
    </b:widget>

  8. Jangan lupa Simpan Template.
Setiap template mempunyai karakter yang berbeda, mungkin di blog sobat kode yang ada adalah
<div class='widget-content'>
bukan seperti yang ada di blog saya yaitu :
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'> 
yang penting letak kode tambahan yang disisipkan harus benar meletakkannya.

Untuk kode height:250px adalah tinggi label scroll, silahkan sobat ganti dengan angka yang lebih tinggi jika ingin tampilan menu label yang lebih tinggi.

Saya kira itu cukup sekian pelajaran blog kita kali ini, terima kasih. 

======>
Read More ===>