BLOG CANIAGO: Widget

Tampilkan postingan dengan label Widget. Tampilkan semua postingan

Selasa, 26 Oktober 2010

Pasang Link di New Blogger Template

Pasang Link di New Blogger Template
Menilik beberapa pertanyaan yang di ajukan beberapa sobat, rupanya masih ada yang berkeinginan lebih dalam hal membuat link walaupun sudah saya posting sampai dua artikel, terutama bagi yang memakai template baru alias new blogger template. Untuk memenuhi hasrat beliau-beliau ini, sengaja saya posting kembali mengenai membuat link dan mudah-mudahan dengan adanya postingan ini dapat menjawab beberapa keinginan yang belum terjawabkan.

Ok, saya mulai dengan membuat link yang bisa memunculkan window baru. saya ambil contoh blog yang ingin saya link sebanyak lima buah, yaitu :

   1. http://rubrik-elektronik.blogspot.com

   2. http://www.rohman24.co.nr

   3. http://jaya-example.blogspot.com

   4. http://user-online.blogspot.com

   5. http://amen24.googlepages.com/koded%27treemenu

Untuk membuat kode link yang arah vertikal seperti ini :

<a href="http://rubrik-elektronik.blogspot.com" target="_blank">Rubrik Elektronik</a>
<br/>
<a href="http://www.rohman24.co.nr" target="_blank">Free blog template</a>
<br/>
<a href="http://jaya-example.blogspot.com" target="_blank">Rotating banner blog</a>
<br/>
<a href="http://user-online.blogspot.com" target="_blank">User Online status</a>
<br/>
<a href="http://amen24.googlepages.com/koded%27treemenu" target="_blank">Kode menu d tree</a>

Hasilnya akan seperti ini :

Rubrik Elektronik
Free blog template
Rotating banner blog
User Online status
Kode menu d tree

kode <br/> yang saya tuliskan di atas merupakan kode atau tag untuk memindahkan link ataupun tulisan berpindah satu line break kebawah. Jika sobat tidak memasang kode/tag tersebut, walaupun di tulis berjauhan ke bawah hasilnya akan berdempetan kepinggir. satu kode/tag <br/> adalah satu kali link berpindah kebawah, jika sobat ingin jaraknya lebih lebar, maka tambahkan tag tersebut beberapa kali, misal <br/><br/>, atau <br/><br/><br/>, dan bila ingin lebih jauh lagi ya tambahkan yang banyak.

Untuk membuat kode link yang arah horizontal seperti ini :

<a href="http://rubrik-elektronik.blogspot.com" target="_blank">Rubrik Elektronik</a>
 
<a href="http://www.rohman24.co.nr" target="_blank">Free blog template</a>
 
<a href="http://jaya-example.blogspot.com" target="_blank">Rotating banner blog</a>
 
<a href="http://user-online.blogspot.com" target="_blank">User Online status</a>
 
<a href="http://amen24.googlepages.com/koded%27treemenu" target="_blank">Kode menu d tree</a>

Maka hasilnya akan seperti ini :

Rubrik Elektronik   Free blog template   Rotating banner blog   User Online status   Kode menu d tree

kode   yang saya tuliskan di atas merupakan kode untuk memindahkan link ataupun tulisan berpindah satu spasi ke samping. Jika sobat tidak memasang kode tersebut, walaupun di tulis berjauhan ke samping, hasilnya akan tetap berdempetan. satu kode   adalah satu kali link berpindah ke samping, jika sobat ingin jaraknya lebih lebar, maka tambahkan kode tersebut beberapa kali, misal    , atau     , dan bila ingin lebih jauh lagi ya tambahkan yang banyak.

Mudah-mudahan agak sedikit jelas. Ok, kita lanjut. Sempat ada yang menanyakan juga tentang yang memakai variasi abjad supaya terlihat lebih menarik. Kira-kira jawabannya melalui contoh saja.

Ambil contoh blog yang ingin di link adalah seperti berikut ini :

   1. http://sncepuspiritualsciencequantum.blogspot.com --> Abu Amin

   2. http://adry-fx.blogspot.com --> Adryy-fx

   3. http://belati.blogspot.com --> Belati

   4. http://benhardleroy.blogspot.com --> Benhard Journey

   5. http://melileagroup.blogspot.com --> Capunk

   6. http://catatanpojok.blogspot.com --> Catatan pojok

Untuk membuat link yang arah vertikal seperti ini :

<b>:::A:::</b>
<br/>
<a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>
<br/>
<a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>
<br/><br/>

<b>:::B:::</b>
<br/>
<a href="http://belati.blogspot.com" target="_blank">Belati</a>
<br/>
<a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>
<br/><br/>

<b>:::C:::</b>
<br/>
<a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>
<br/>
<a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>

Maka hasilnya akan seperti ini :

:::A:::
Abu Amin
Adryy-fx

:::B:::
Belati
Benhard Journey

:::C:::
Capunk
Catatan pojok

Untuk membuat link yang arah horizontal seperti ini :

<b>:::A:::</b>
  
<a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>
  
<a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>
  

<b>:::B:::</b>
  
<a href="http://belati.blogspot.com" target="_blank">Belati</a>
  
<a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>
  

<b>:::C:::</b>
  
<a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>
  
<a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>

maka hasilnya akan seperti ini :

:::A:::    Abu Amin    Adryy-fx    :::B:::    Belati    Benhard Journey    :::C:::    Capunk    Catatan pojok

Pemakaian tag <b>...</b> adalah agar karakter yang ada diantara tag tersebut menjadi tebal. Pemakaian tulisan :::A::: adalah karakter biasa yang ada di keyboard, jika ingin berbeda tinggal cari karakter lain yang menurut sobat lebih menarik.

Ada juga variasi lain agar tampak lebih menarik yaitu menambahkan bulatan.

contoh untuk arah vertikal :

<b><< A >></b>
<br/>
• <a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>
<br/>
• <a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>
<br/><br/>

<b><< B >></b>
<br/>
• <a href="http://belati.blogspot.com" target="_blank">Belati</a>
<br/>
• <a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>
<br/><br/>

<b><< C >></b>
<br/>
• <a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>
<br/>
• <a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>

Maka hasilnya akan seperti ini :

<< A >>
• Abu Amin
• Adryy-fx

<< B >>
• Belati
• Benhard Journey

<< C >>
• Capunk
• Catatan pojok

Untuk arah horizontal :

<b><< A >></b>
 
• <a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>
  
• <a href="http://adry-fx.blogspot.com" target="_blank">Adryy-fx</a>
  

<b><< B >></b>
 
• <a href="http://belati.blogspot.com" target="_blank">Belati</a>
  
• <a href="http://benhardleroy.blogspot.com" target="_blank">Benhard Journey</a>
  

<b><< C >></b>
 
• <a href="http://melileagroup.blogspot.com" target="_blank">Capunk</a>
  
• <a href="http://catatanpojok.blogspot.com" target="_blank">Catatan pojok</a>

Hasilnya akan seperti ini :

<< A >>   • Abu Amin    • Adryy-fx    << B >>   • Belati    • Benhard Journey    << C >>   • Capunk    • Catatan pojok

Bagaimana lebih menarik bukan?

Jika sobat mempunyai icon yang berukuran kecil dan ingin di tambahkan di depan link, ini bisa di lakukan dengan hanya mengganti kode &ampbull; diatas dengan kode gambar yang sobat miliki. Sebagai contoh saya memiliki gambar dalam bentuk bulatan dan mempunyai alamat gambar sebagai berikut :

http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif

Untuk menampilkan gambar ini tentu dengan kode untuk menampilkan gambar, yaitu :

<img src="http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif">

hasilnya akan seperti ini :

Jika melihat dari bentuknya, sepertinya terlalu besar maka saya akan mengakalinya dengan menambahkan kode untuk lebar dan tinggi gambar, maka kodenya misalkan jadi seperti ini :

<img src="http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif" width="12" hight="12" border="0">

hasilnya akan seperti ini :

Nah, tugas sobat hanya mengganti kode &ampbull; diatas dengan kode ini :

misalkan :

<img src="http://i162.photobucket.com/albums/t253/rohman24/Changing_colors.gif" width="10" hight="10" border="0"> <a href="http://sncepuspiritualsciencequantum.blogspot.com" target="_blank">Abu Amin</a>

Maka hasilnya akan seperti ini :

Abu Amin

Untuk membuat gambar serta cara upload sudah saya terangkan pada postingan terdahulu, silahkan baca saja ya.

Ada juga pertanyaan dari mba Ati mengenai cara pembuatan link gambar yang arah horizontal, jawaban saya, mba tinggal buat link untuk gambar dan menaruh kode   di antara gambar link tadi. misal saya punya alamat gambar butto seperti ini :

http://i162.photobucket.com/albums/t253/rohman24/RubrikElektronik.gif

http://i162.photobucket.com/albums/t253/rohman24/FreeBlogTemplate.gif

Nah mba tinggal buat agar link gambar, bisa link ketulisan yang ada di blog mba atau mau link ke blog lain juga bisa, tinggal menuliskan alamat URL yang du ju oleh link tersebut, contoh jika saya ingin menghubungkan gambar button dengan blog milik saya yang lain :

<a href="http://rubrik-elektronik.blogspot.com" target="_blank"><img src="http://i162.photobucket.com/albums/t253/rohman24/RubrikElektronik.gif" border="0"></a>
  
<a href="http://www.rohman24.co.nr" target="_blank"><img src="http://i162.photobucket.com/albums/t253/rohman24/FreeBlogTemplate.gif" border="0"></a>

Hasilnya akan seperti ini :

jika ingin gambar buttonnya banyak, tinggal tambahkan saja dan jangan lupa sisipkam kode   agar ada jarak antara buttonnya.

Bagaimana sobat, sudah cape bacanya? pasti cape karena panjang banget, apalagi saya yang waktu ngetik postingan ini ampe lima jam depan komputer dan lebih sedihnya lagi kita belum sampe ke topik bahasan utama yakni memasukan kode link-link yang telah saya contohkan diatas ke dalam blog.

Yoi...sobat!!! Sekarang tiba waktunya kita memasukan kode-kode link yang telah kita buat kedalam blog. Dan tentunya seperti judul artikel diatas, langkah-langkah berikut berlaku bagi yang memakai template baru alias new blogger template :

   1. Sig in di blogger dengan id sobat

   2. Klik menu Layout

   3. Klik menu Elemen Halaman

   4. Klik tulisan Tambahkan sebuah Elemen Halaman

   5. Klik tombol TAMBAHKAN KE BLOG di bawah tulisan HTML/javaScript, ingat jangan menggunakan yang untuk membuat daftar link

   6. Beri judul link yang sobat kehendaki. contoh : link temanku :

   7. Copy kode-kode link yang telah sobat buat lalu paste pada kotak yang tersedia

   8. Klik tombol SIMPAN PERUBAHAN

   9. Pindahkan elemen yang baru saja pada tempat yang sobat kehendaki

10. Klik tombol SIMPAN

11. Selesai.

Akhirnya selesai juga postingan ini. Mudah-mudahan penjelasan diatas mudah untuk di mengerti.

Selamat mencoba !

»» READMORE...

Kamis, 21 Oktober 2010

Membuat Simple Drop Down Menu dengan CSS

simple dropdown menu dengan CSS Alhamdulillah bisa kembali online dan berbagi tips dan trik blogging lagi kepada teman-teman setelah beberapa pekan fakum. Tentu kefakuman ini bukan karena banyaknya kesibukan offline yang menyita waktu tapi tidak lebih karena keterbatasan dan sedikit problem pada sarana yang selama ini setia membantu aktifitas online saya.

Melalui kesempatan ini pula saya memohon maaf kepada teman-teman blogger dan pengunjung setia blog ini atas segala hak yang tidak bisa saya penuhi selama masa offline, seperti saling kunjung atau blogwalking ke 'rumah maya' teman-teman.

Untuk postingan perdana setelah masa fakum kemarin, insyaAllah kali ini saya hanya ingin mengetengahkan tutorial blogger yang mudah, kalau sebelumnya saya pernah posting tutorial cara membuat multi level drop down menu dengan JQuery maka postingan kali ini bagaimana membuat simple drop down menu dengan CSS.

Langsung pada tutorial

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

2. Tambahkan kode CSS berikut diatas tag ]]></b:skin>:

    #pad {height:100px;}
    #menuPositioner {width:100%; position:relative; float:left; top:-40px; margin-bottom:-40px; }

    #menuHolder {position:relative; float:left; left:50%;}

    #menu,
    #menu ul {padding:0; margin:0; list-style:none; font: 12px arial, verdana, sans-serif; background:url(http://sites.google.com/site/amatullah83/background/trans.gif); position:relative; z-index:100;}
    #menu {height:40px; float:left; padding:0; background:#4b4d3f; position:relative; right:50%;}
    #menu ul {position:absolute; left:-9999px; top:-9999px;}

    #menu table {border-collapse:collapse; margin:-1px; padding:0; width:0; height:0;}
    #menu li {float:left;}

    #menu li a {display:block; float:left; color:#fff; height:40px; padding:0 20px 0 0; line-height:38px; text-decoration:none; background:url(http://sites.google.com/site/amatullah83/background/button1a.gif) no-repeat right top;}
    #menu li a.sub {background:url(http://sites.google.com/site/amatullah83/background/button3a.gif) no-repeat right top;}
    #menu li a b {display:block; float:left; height:40px; background:url(http://sites.google.com/site/amatullah83/background/button1.gif) left top; padding:0 0 0 20px; cursor:pointer;}

    #menu li:hover {position:relative; z-index:100;}
    #menu a:hover {position:relative; z-index:100; color:#fc0;}
    #menu a.sub:hover {background:url(http://sites.google.com/site/amatullah83/background/button3a.gif) no-repeat right top;}

    #menu li:hover > a {color:#fc0;}
    #menu li:hover > a.sub {background:url(http://sites.google.com/site/amatullah83/background/button3.gif) no-repeat right top;}

    #menu :hover ul {left:0; top:40px; z-index:300; width:130px; padding-top:4px; background:url(http://sites.google.com/site/amatullah83/background/trans.gif);}
    #menu :hover ul li a {height:25px; width:120px; padding:0 0 0 10px; line-height:25px; background:#546775; color:#fff; border-bottom:1px solid #a3b6c4; font-size:11px;}
    #menu :hover ul li a.fly {background:#546775 url(http://sites.google.com/site/amatullah83/background/fly.gif) no-repeat right center;}

    #menu :hover ul li a:hover {color:#fc0;}
    #menu :hover ul li a:hover.fly {background:#546775 url(http://sites.google.com/site/amatullah83/background/fly-over.gif) no-repeat right center;}
    #menu :hover ul li:hover > a {color:#fc0;}
    #menu :hover ul li:hover > a.fly {background:#546775 url(http://sites.google.com/site/amatullah83/background/fly-over.gif) no-repeat right center;}

    #menu :hover ul ul {position:absolute; left:-9999px; top:-9999px;}

    #menu :hover ul :hover ul {left:117px; top:0; padding:0;}
    #menu :hover ul :hover ul li a {background:#a3b6c4; color:#000; border-bottom:1px solid #546775; font-size:11px;}
    #menu :hover ul :hover ul li a:hover {color:#fff;}

3. Tambahkan kode HTML berikut dibawah atau diatas <div id='header-wrapper'> atau bisa juga sobat tambahkan pada bagian elemen halaman sebagai widget

    <div id="menuPositioner">
    <div id="menuHolder">
    <ul id="menu">
        <li><a href="index.html"><b>Home</b></a></li>
        <li><a href="single.html"><b>Single Level</b></a></li>
        <li class="current"><a class="sub" href="dropdown.html"><b>Dropdown</b></a>
        
            <ul class="sub1">
                <li><a class="fly" href="#url">Dropdown one</a>
                
                    <ul class="fly1">
                        <li><a href="#url">Dropdown 1.1</a></li>
                        <li><a href="#url">Dropdown 1.2</a></li>
                        <li><a href="#url">Dropdown 1.3</a></li>
                        <li><a href="#url">Dropdown 1.4</a></li>
                        <li><a href="#url">Dropdown 1.5</a></li>
                        <li><a href="#url">Dropdown 1.6</a></li>
                    </ul>
                
                </li>
                <li class="currentsub"><a class="fly" href="#url">Dropdown two</a>
                
                    <ul class="fly2">
                        <li><a href="#url">Dropdown 2.1</a></li>
                        <li><a href="#url">Dropdown 2.2</a></li>
                        <li class="currentfly"><a href="#url">Dropdown 2.3</a></li>
                        <li><a href="#url">Dropdown 2.4</a></li>
                        <li><a href="#url">Dropdown 2.5</a></li>
                    </ul>
                
                </li>
                <li><a href="#url">Dropdown three</a></li>
                <li><a href="#url">Dropdown four</a></li>
                <li><a class="fly" href="#url">Dropdown five</a>
                
                    <ul class="fly3">
                        <li><a href="#url">Dropdown 5.1</a></li>
                        <li><a href="#url">Dropdown 2.2</a></li>
                        <li><a href=http://amatullah83.blogspot.com>Dropdown 3.3</a></li>
                    </ul>
                
                </li>
            </ul>
        
        </li>
        <li><a class="sub" href="dropline.html"><b>Dropline</b></a>
        
            <ul class="sub2">
                <li><a href=http://amatullah83.blogspot.com>Dropline one</a></li>
                <li><a href="#url">Dropline two</a></li>
                <li><a href="#url">Dropline three</a></li>
                <li><a href="#url">Dropline four</a></li>
                <li><a href="#url">Dropline five</a></li>
                <li><a href="#url">Dropline six</a></li>
            </ul>
        
        </li>
        <li><a class="sub" href="flyout.html"><b>Flyout</b></a>
        
            <ul class="sub3">
                <li><a href="#url">Flyout one</a></li>
                <li><a href="#url">Flyout two</a></li>
                <li><a href="#url">Flyout three</a></li>
                <li><a href="#url">Flyout four</a></li>
            </ul>
        
        </li>
        <li id="support"><a href="support.html"><b>Support</b></a></li>
        <li id="contact"><a href="contact.html"><b>Contact</b></a></li>
    </ul>
    </div>
    </div>

4. Simpan template. Hasil dari tutorial membuat simple drop down menu dengan CSS ini seperti screnshot diatas atau lihat live demo disini.

Mudah bukan? Semoga bermanfaat.

Source from CSSMenu.co.uk

»» READMORE...

Glossy Horizontal Menu

menu tab navigasi horizontal

View Demo

Banyak trik yang bisa kita gunakan untuk memodifikasi tampilan tab menu navigator horizontal pada template blogger. Kalau tidak salah sudah ada tiga pembahasan dengan category tersebeut pada blog ini, yang pertama cara membuat menu tab navigator horizontal sederhana, selanjutnya 30 widget tab navigator horizontal, dan sebelum postingan ini multi level drop down menu using JQuery.

InsyaAllah pada postingan kali ini, tutorial yang ingin saya ketengahkan cara membuat glossy horizontal menu seperti screenshot diatas atau livedemo lihat pada blog saya yang lain disini

Berikut tutorial membuat glossy horizontal menu

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

2. Tambahkan kode CSS berikut diatas tag ]]></b:skin>

    /*Credits: By Santosh Setty (http://webdesigninfo.wordpress.com) */
    /*Modified : IB (http://www.amatullah83.blogspot.com/) */

    .glossymenu{
        position: relative;
        padding: 0 0 0 34px;
        margin: 0 auto 0 auto;
        background: url(http://sites.google.com/site/amatullah83/background/menub_bg.gif) repeat-x; /*tab background image path*/
        height: 46px;
        list-style: none;
    }

    .glossymenu li{
        float:left;
    }

    .glossymenu li a{
        float: left;
        display: block;
        color:#000;
        text-decoration: none;
        font-family: sans-serif;
        font-size: 13px;
        font-weight: bold;
        padding:0 0 0 16px; /*Padding to accomodate left tab image. Do not change*/
        height: 46px;
        line-height: 46px;
        text-align: center;
        cursor: pointer;
    }

    .glossymenu li a b{
        float: left;
        display: block;
        padding: 0 24px 0 8px; /*Padding of menu items*/
    }

    .glossymenu li.current a, .glossymenu li a:hover{
        color: #fff;
        background: url(http://sites.google.com/site/amatullah83/background/menub_hover_left.gif) no-repeat; /*left tab image path*/
        background-position: left;
    }

    .glossymenu li.current a b, .glossymenu li a:hover b{
        color: #fff;
        background: url(http://sites.google.com/site/amatullah83/background/menub_hover_right.gif) no-repeat right top; /*right tab image path*/
    }

Untuk image bisa sobat ganti sesuaikan dengan template blogger sobat, contoh image lainnya yang bisa sobat gunakan:

image

Silahkan upload dulu ya image diatas ketempat hosting masing-masing. Oke lanjut...

3. Terakhir tambahkan kode HTML berikut diatas <div id='header-wrapper'>

    <ul class="glossymenu">
        <li class="current"><a href="http://www.amatullah83.blogspot.com/"><b>Home</b></a></li>
        <li><a href="http://amatullah83.blogspot.com/search/label/Artikel%20Islam/"><b>Agama</b></a></li>
        <li><a href="http://amatullah83.blogspot.com/search/label/Teknologi/"><b>Teknologi</b></a></li>
        <li><a href="http://amatullah83.blogspot.com/search/label/Kesehatan"><b>Kesehatan</b></a></li>
        <li><a href="http://amatullah83.blogspot.com/search/label/Tutorial%20Blogger/"><b>Tutorial Bogger</b></a></li>
        <li><a href="http://amatullah83.blogspot.com/search/label/Widget"><b>Blogger Widgets</b></a></li>
    </ul>

Silahkan sobat edit link dan anchor teks kode HTML diatas

4. Simpan tempalate.

Mudah bukan? Selamat mencoba, semoga bermanfaat! Jangan lupa komentar!!!

Thanks to Dinamic Drive

»» READMORE...

Cara Membuat Menu Tab Navigator Horizontal

Get update here 30 tab menu navigasi horizontal

Melanjutkan postingan sebelumnya sebagai jawaban pertanyaan seorang teman yang ingin mengetahui cara membuat menu tab navigator horizontal.

Sebenarnya pada banyak template baru, tab navigator horizontal ini sudah tersedia dan sobat dengan mudah bisa mendownloadnya dengan gratis dan tidak perlu susah membuatnya. Tapi bagi sobat yang tidak ingin untuk mengganti template baru lagi dan belum memiliki tab navigator horizontal pada headernya, berikut cara membuatnya:

1.Langkah Pertama

    *

      Loggin ke blogger
    *

      Pada dasbor klik tata letak
    *

      klik edit HTML kemudian cari kode ]]></b:skin>
    *

      kemudian letakkan kode berikut diatas ]]></b:skin>

    menuhorisontal{width:100%; overflow:hidden; border-bottom:0px solid #DF0101;}
    .menuhorisontal ul{margin:1; padding:0; padding-left:0px; font:20px Arial; list-style-type:none}
    .menuhorisontal li{display:inline; margin:0}
    .menuhorisontal li a{float:left; display:block; text-decoration:none; margin-right:9px; padding:4px 4px 4px 4px; color:#DF0101; background:#F8E0EC;}
    .menuhorisontal li a:hover{color:#8A0808; background:#FBEFF5}

hasilnya seperti ini:

tab menu navigator horizontal

atau kode berikut:

    .menuhorisontal{width:100%; overflow:hidden; border-bottom:0px solid #DF0101;}
    .menuhorisontal ul{margin:1; padding:0; padding-left:0px; font:20px Arial; list-style-type:none}
    .menuhorisontal li{display:inline; margin:0}
    .menuhorisontal li a{float:left; display:block; text-decoration:none; margin-right:9px; padding:4px 4px 4px 4px; color:#DF0101; background:#F8E0EC;-moz-border-radius-topleft:15px;
    -moz-border-radius-topright:15px;
    -moz-border-radius-bottomleft:15px;
    -moz-border-radius-bottomright:15px}
    .menuhorisontal li a:hover{color:#8A0808; background:#FBEFF5}

Untuk hasil seperti ini

tab menu navigator horizontal

keterangan untuk angka margin, padding, font dan huruf bisa anda sesuaikan selera begitu pula dengan warna huruf dan backgroundnya. Untuk kode warna bisa lihat disini

    * Simpan template.

2. Langkah Ke Dua

Klik tata letak=> elemen halaman=> tambah gadget pada bagian atas header atau bagian bawahnya=> HTML/JavaScrip

Copy dan paste kode berikut warna merah berikut pada content:

<div style="overflow:no; width:100%px; height:100%px; padding:0px; border:0px solid #FFFFFF; background:#FFFFFF;">

<div class="menuhorisontal">
<li>

<a href="http://amatullah83.blogspot.com">HOME</a>

<a href="http://amatullah83.blogspot.com/search/label/Artikel%20Islam" target="_blank">Agama</a>

<a href="http://amatullah83.blogspot.com/search/label/Teknologi" target="_blank">Tecnology</a>

<a href="http://amatullah83.blogspot.com/search/label/Kesehatan" target="_blank">Kesehatan</a>

<a href="http://amatullah83.blogspot.com/search/label/Islamic%20Animation" target="_blank">Islamic Animation</a>

<a href="http://amatullah83.blogspot.com/search/label/Glitter%20Text" target="_blank">Glitter Teks</a>

<a href="http://www.blogger.com/" target="_blank">Loggin Blogger</a>

</li>
</div>
</div>

Keterangan: untuk URL silahkan sobat ganti, begitu pula warna backgroundnya silahkan sesuaikan dengan selera. Bisa lihat kode warnanya disini

    * Simpan. simpan lagi... lihat blog anda!

Semoga berhasil dan bermanfaat!

*Contoh menu tab horizontal diatas header seperti diblog ini, sedang yang berada dibawah header seperti gambar dibawah ini.
blog uji coba

»» READMORE...

Cara Menambahkan Icons Social Bookmark Pada Postingan

image

View Demo

Beberapa kali blogwalking ke blog teman-teman tidak jarang saya menemukan kenyataan bahwa masih banyak blog yang belum memasang tombol share atau icons sosial bookmark pada blog atau postingan. Entah karena belum mengerti manfaat dari widget sosialbookmark ini atau justru karena tidak mengetahui cara memasang widget ini pada template blogger. Padahal banyak keuntungan yang dapat kita peroleh dari widget share ini, diantaranya jika pengunjung mensubmit artikel atau blog kita pada salah satu situs sosial bookmark tentu hal ini akan menjadi sarana promosi blog yang baik, meningkatkan traffic visitors, juga perolehan backlink. yang tentunya akan mendongkrak page rank google dan alexa blog or web sobat.

Nah tutorial kali ini, saya ingin berbagi trik cara menambahkan sosial bookmark pada postingan. Karena trik ini saya terapkan pada blog saya Jejak-Jejak Hati jadi saya memilih icons sosial bookmark khusus seperti screenshoot diatas:

Bagi teman-teman yang ingin mengganti icons sosial bookmark diatas silahkan saja kembangkan kreatifitas sobat, berikut ini beberapa icon lainnya yang bisa sobat gunakan

icon sosial bookmark

Oke, berikut langkah-langkah cara menembahkan sosial bookmark pada postingan

    * Dalam keadaan log in pada account blogger sobat>>> Klik Tata Letak>>> Edit HTML>>> Expand Template Widget>>> Cari kode ]]></b:skin>
    * Sekarang letakkan kode berikut diatas ]]></b:skin>

/* Social Bookmark
----------------------------------------------- */
div.sociable { margin: 16px 0 0 0; text-align: center; }

span.sociable_tagline { position: relative; }
span.sociable_tagline span { display: none; width: 14em; }
span.sociable_tagline:hover span {
position: absolute;
display: block;
top: -5em;
background: #ffe;
border: 1px solid #ccc;
color: black;
line-height: 1.25em;
}
.sociable span {
display: block;
}
.sociable ul {
display: inline;
margin: 0 !important;
padding: 0 !important;
}
.sociable li {
background: none;
display: inline;
list-style-type: none;
margin: 0;
padding: 1px;
}
.sociable ul li:before { content: ""; }
.sociable img {
float: none;
width: 35px;
height: 35px;
border: 0;
margin: 5px 5px; /*jarak antar icons*/
padding: 0;
}

    * Letakkan kode berikut dibawah kode <data:post.body/>

<div class='sociable'>
<span class='sociable_tagline'>
</span>
<li><a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Digg'><img alt='Digg' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwwtTbGZKSIGPHNU7D-59rpOUz-mQwsJpYExHlkx9G8HpmIYhWL_PJx0nzlw0ZWhBnkq_eSaIqWjxGgtTOOziKHOCYY2lLiOdVlqzk2ulDQY-e0kIE6t1aP5XR5TAErrclsHjUFKSVwe4/s320/digg.png' title='Digg'/></a></li>
<li><a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Delicious'><img alt='Delicious' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCj0KCVs7j1vZolSsCis4k-rmaawb7bsHAlYg1BZGtj7lBY20JT6xpdGUzDg9FSI5aRbWw8PCf2grsdoE2U227KC4PUP-ND48ASpSEDPa56AYe2lhKJrY9aNNov3sNTIY0y2959_jYsIE/s320/delicious.png' title='Delicious'/></a></li>
<li><a expr:href='"http://www.facebook.com/share.php?u=" + data:post.url + "&t=" + data:post.title' target='_blank' title='Facebook'><img alt='Facebook' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZfAOEPHgq9wtLKjphgvOJutVCX1XwpkejtbSRN1gPPHZJmB1x-X4d4i8qr5Nw3NCaxuAN8qWSqSkX4GHFl_i52OAS4J8NOI5vbo5anoCsqLFken5ppr6DCyQ75j3cyjEdgsDHlcKKSm8/s320/facebook.png' title='Facebook'/></a></li>
<li><a expr:href='"http://www.mixx.com/submit?page_url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Mixx'><img alt='Mixx' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHzxQoV25JGBRc4d-UYhfoPCNCWxmrBRTv_F1ZjgIkzLtd8_sH3V2sawly8sF25SO-gS8CBd2m7J09wWsT91KrSdcgCrB7LorSBvG1Uwpcm5MtirWXtCDN2yrKawdTCI-oP7uQUjcLFJ8/s320/mixx.png' title='Mixx'/></a></li>
<li><a expr:href='"http://google.com/bookmarks/mark?op=edit&bkmk=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Google'><img alt='Google' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj61jaXY6y-nxJ7SGJDAoLwusSaeoFrCY65PGGwg12s4gSNp-S8DEM3GVTwG2iT9W2cUs5yj6eF8xpYyejegtl1XQyZVWeF9xaunMvD65s6p4Ic7GppGKdBiNyBimIdnuCQSLOapfxALWI/s320/google.png' title='Google'/></a></li>
<li><a expr:href='"http://www.furl.net/storeIt.jsp?t=" + data:post.title + "&u=" + data:post.url' target='_blank' title='Furl'><img alt='Furl' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKVg3pfm5zIyHnL0dyE4hq2O2xpw0Fnu3X-Ry78-iCUbjjaXlpgPX-9rjCELEzqEyr8HPzR3GGGBFL7KPFzMjmzLxtRLaNKBDDwJubJbQmlO7_qQOH9XbL9wx9kGuqyF9GmzE3guIuXBs/s320/furl.png' title='Furl'/></a></li>
<li><a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='Reddit'><img alt='Reddit' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBb4i_Rx-FFRlsRGZf2ZgfwpnVVtwF4owr-SDofLkFN1m_xVRPj87l6rxigoqSwubXUQgzINBF7D-w6dA8prm2jmVgCglAFQCzSK3h7rdke7YmWiyu2JKztgka7_DVOQmxa8tGWlBgTGM/s320/reddit.png' title='Reddit'/></a></li>
<li><a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank' title='StumbleUpon'><img alt='StumbleUpon' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi974GF4dzLnU7R1BTLrYwAUsdE-J5xjpyKliiXl9BI5WlOj9hS7XozhtFUK9vISBQTxNFJKoA4GbbOX7FJu0vqsoemOKzPivGfm6iRJpTjirj2TznhBrOz3pT2vkRV54eHyZNHF4k33Ak/s320/stumble.png' title='StumbleUpon'/></a></li>
<li><a expr:href='"http://technorati.com/faves?add=" + data:post.url' target='_blank' title='Technorati'><img alt='Technorati' class='sociable-hovers' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoOSW1oXoQcLe6F62A3ZwwaoeWyVvYDdxOC0P83JSvWA9Air6FxDlw4r0SuJRJfyjrJJAtdVQmmEYf8tpzxqsXnCclNrq2l8pOmkELCq61joQgVVqZY-CwjOuiEb7OfrckcGI5wnwZfrE/s320/technorati.png' title='Technorati'/></a></li>
</div> 

    * Simpan template. Selesai

I hope you enjoyed this tutorial comments are welcome see my result

»» READMORE...

Membuat Text Area

Apa itu text area? Text area adalah area atau tempat untuk menyimpan text atau tulisan dengan membentuk area baru. Biasanya text area ini di gunakan untuk menyimpan kode-kode HTML ataupun text lainnya agar bisa di copy oleh para pengunjung. Untuk lebih memahamkan lagi contohnya lihat disini atau image dibawah ini:

                                 image

Sudah lihat? Nah untuk membuat text area, silahkan sobat Copy kode di bawah ini :

    <p align="center"><textarea name="code" rows="6" cols="20"> Letakkan code HTML atau text yang anda inginkan berada dalam kotak areanya disini</textarea></p>

Sedikit penjelasan tambahan: rows= menunjukkan tinggi text area, cols menunjukkan lebar dari text area. Silahkan sesuaikan sendiri angka-angka tersebut dengan keinginan anda!

Selain cara diatas ada cara lain lagi untuk membuat text area, yaitu text area dengan memakai hightlight Maksudnya text area yang kita buat dilengkapi tombol highlight, yang sekali klik semua text area terblok jadi memudahkan pengunjung untuk mengcopynya. Cara membuat text area dengan hightlight?

                                        image

Copy code berikut:

    <div><form name="copy"><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Hightlight All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">Letakkan code HTML atau text yang anda inginkan berada dalam kotak areanya disin</textarea></p></div></form>

Keterangan:

<div align="center"> : kata center menunjukan bahwa posisi tombol akan berada di tengah, jadi jika anda ingin posisi tombol berada di tepi sebelah kiri, tinggal ganti dengan kata left. Dan jika ingin berada di tepi sebelah kanan, tinggal ganti dengan kata right.

<input onclick="javascript:this.form.txt.focus();this.form.txt.selec()"> : kode ini artinya ketika tombol highlight di klik, maka seluruh text yang ada di dalamnya akan di highligt (di tandai atau di blok), jadi anda jangan merubah tulisan ini.

Value="Highlight All" : kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi jika anda ingin merubah tulisan ini silahkan ganti dengan kata yang anda inginkan.

<p align="center"> : ini menunjukan bahwa text area akan berada di tengah, nah jika anda ingin text area anda berada di tepi kiri, ganti kata center dengan kata left, bila ingin di tepi kanan, ganti dengan kata right.

<text style="WIDTH: 300px">: kata "WIDTH:300px" menunjukan lebar dari text area tersebut sebanyak 300 pixel, jadi jika anda ingin memperpendek atau memperpanjang lebar text area, anda tinggal menggantinya dengan angka yang anda inginkan. misal: "WIDTH:700px;"

HEIGHT: 144px : angka "144px" menunjukan bahwa text area akan mempunyai tinggi sebesar 144 px, jadi jika anda ingin merubahnya tinggal ganti angka tersebut dengan angka yang anda inginkan. Misal : HEIGHT:160px.

Selesai!

»» READMORE...

Membuat BlogRool

Blogroll adalah tempat menyimpan link address milik orang lain pada blog atau website kita.

BlogRool ini gunanya untuk menghemat tempat pada blog pada saat daftar link kita sudah banyak dan menyesakkan body template blog. Ada beberapa cara yang saya tahu untuk membuat blogrool.

Yang pertama seperti ini: Blogroll dengan menu dropdown:

Contoh code HTML/JavaScriptnya sebagai berikut:

<form>

<select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option> - Blogroll - </option>

<option value="http://amatullah83.blogspot.com/">Amatullah's Page</option>

<option value="http://amatullah83.blogspot.com/search/label/Islamic%20Animation">Islamic Animation</option>

<option value="http://amatullah83.blogspot.com/search/label/Blogger%20Template">Free Blogger Templates</option>

<option value="http://amatullah83.blogspot.com/search/label/Tutorial%20Blogger">Tutorial Blogger</option>

</select>

</form>

Alamat URL dan titelnya tinggal anda sesuaikan sendiri!

Yang kedua: Membuat blogroll dengan perintah marquee :

Contohnya seperti ini:

<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="2" direction="up" width="100%" height="200" >

<a href="http://amatullah83.blogspot.com/" target="_blank">Amatullah's Page</a>
<br/><br/>
<a href="http://amatullah83.blogspot.com/search/label/Islamic%20Animation" target="_blank">Islamic Animation</a>
<br/><br/>
<a href="http://amatullah83.blogspot.com/search/label/Blogger%20Template" target="_blank">Free Blog Template</a>
<br/><br/>
<a href="http://amatullah83.blogspot.com/search/label/Tutorial%20Blogger" target="_blank">Tutorial Blogger</a>
<br/><br/>

</marquee>

Maka hasilnya seperti dibawah ini

Amatullah's Page

Islamic Animation

Free Blog Template

Tutorial Blogger

Sedikit penjelasan tambahan:

Scrollamount="2" --> angka "2" adalah menunjukan kecepatan gerakan, jika ingin lebih cepat silahkan ganti nilainya dengan yang lebih tinggi. Misal : scrollamount="3" ,scrollamount="4" , scrollamount="5" dst

Direction="up" --> tulisan "up" menunjukan arah gerakan keatas, kalau ingin di rubah tinggal ganti kata "up" menjadi "down,left,right" . Misal : direction="down" , direction="left" , direction="right" .

Width="50%" --> tulisan "50%" menunjukan lebar dari marquee sebesar "50%" dari tempat dimana perintah ini ditempatkan, jika ingin di rubah tinggal ganti dengan nilai yang di inginkan. contoh : width="30%" , width="70%" dst.

Tulisan "200" menunjukan tinggi dari marquee sebesar 200px, jika ingin di ganti tinggal di rubah nilai angkanya. Misal : height="100" , height="300" dst.

Semoga bermanfaat!

»» READMORE...

Membuat Cursor Bertabur Bintang

Banyak cara yang dibuat oleh setiap blogger untuk membuat tampilan blognya terkesan cantik, unik dan macam-macam deh. Diantaranya dengan modifikasi template yang sudah ada, memasang ragam widget dan ragam aksesoris blog termasuk mengganti tampilan cursor. pernah lihat suatu blog dengan cursor bertabur bintang? Pingin mencobanya? Mudah kok, ikuti langkah-langkah berikut:
Membuat cursor bertabur bintang

1. Login ke blogger.
2.Masuk ke Layout-->Page Element
3.Tambahkan gadget HTML/JavaScript
4.Pilih kode taburan bintang dibawah ini.
Bintang Hijau

    <script src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.hijau.js" type="text/javascript"></script>

Bintang Ungu

    <script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.ungu.js' type="text/javascript"></script>

Bintang Merah

    <script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.merah.js' type="text/javascript"></script>

Bintang Biru

    <script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.biru.js' type="text/javascript"></script>

Bintang Putih

    <script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.putih.js' type="text/javascript"></script>

5.Kopi salah satu kode diatas dan simpan.

6. Jangan lupa save dan save lagi.
Kodenya bisa dicampur-campur, menurut selera sobat. Semoga bermanfaat!
Belum sempat blogwalking, sibuk desain template?

»» READMORE...

Cara Membuat Menu dTree

Kali ini saya ingin berbagi lagi trik membuat menu dtree. Apakah menu dtree itu? Menu dtree yang saya maksud adalah menu yang menyarupai menu Windows explorer seperti pada image berikut:
cara membuat menu dtree
Menu seperti ini bisa juga kita tampilkan pada web atau blog kita seperti yang terlihat pada image berikut atau bisa lihat langsung demonya diblog saya disini
image
Nah ingin membuat menu dtree seperti itu? Caranya mudah saja hanya dalam beberapa langkah:

Langkah pertama:

    * Seperti biasa loggin ke akun blogger sobat=> Lalu klik tata Letak =>> Klik Edit HTML
    * Letakkan kode/ script berikut di atas kode </head>

    <link href='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/dtree.css' rel='StyleSheet' type='text/css'/>
    <script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/createdtree.js' type='text/javascript'/>

    * Klik Simpan template.

Langkah ke dua:
Klik elemen halaman=> Tambah Gadget=> HTML=> Letakkan kode berikut pada kolom konten:

    <div class="dtree">
    <p><a href="javascript: d.openAll();">Buka Semua</a> | <a href="javascript: d.closeAll();">Tutup Semua</a></p>
    <script type="text/javascript">
    
    </script>
    </div>

Maka Preview dari kode di atas adalah seperti berikut ini

image
Kalau belum ngerti berikut contoh mengisi menu dan linknya dari daftar menu blog saya;

    <h2>Arsip</h2>
    <div class="dtree">
    <p><a href="javascript: d.openAll();">Buka Semua</a> | <a href="javascript: d.closeAll();">Tutup Semua</a></p>
    <script type="text/javascript">
    
    </script>
    </div>

Silahkan ganti nama folder dan linknya! Tambahkan yang perlu ditambahkan! Untuk hasilnya bisa lihat blog saya disini
Jangan lupa save kalau dah selesai ya!
Selamat mencoba dan semoga bermanfaat!

»» READMORE...

Membuat Sebuah Thumbnail Dengan Caption (Keterangan) Menggunakan Simple JQuery

Thumbnail galery with heading and caption with jquery

View Demo

Tutorial kali ini kita akan belajar membuat image dengen caption (keterangan) menggunakan script simple JQuery, turorial ini saya pelajari dari Queness. Disini saya ingin berbagi kepada teman-teman cara menerapkan jquery pada template blogger.

Berikut tutorial membuat thumbnail with caption using simple JQuery

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

2. Tambahkan Script JQuery berikut sebelum tag </head>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

catatan: bagi sobat yang sudah pernah menambahkan atau pada templatenya sudah terdapat scrip Jquery maka langkah kedua abaikan saja

3. Tambahkan juga script berikut setelah script JQuery tadi

    <script>$(document).ready(function () {

            // transition effect
            style = 'easeOutQuart';

            // if the mouse hover the image
            $('.photo').hover(
                function() {
                    //display heading and caption
                    $(this).children('div:first').stop(false,true).animate({top:0},{duration:200, easing: style});
                    $(this).children('div:last').stop(false,true).animate({bottom:0},{duration:200, easing: style});
                },

                function() {
                    //hide heading and caption
                    $(this).children('div:first').stop(false,true).animate({top:-50},{duration:200, easing: style});
                    $(this).children('div:last').stop(false,true).animate({bottom:-50},{duration:200, easing: style});
                }
            );

        });</script>

4. Selanjutnya tambahkan kode CSS berikut diatas tag ]]></b:skin>

    .photo {
            /* relative position, so that objects in it can be positioned inside this container */
            position:relative;
            font-family:arial;
            /* hide those extra height that goes beyong the size of this container */
            overflow:hidden;
            border:5px solid #000;
            width:350px;
            height:186px;
        }
            .photo .heading, .photo .caption {
                /* position inside the container */
                position:absolute;
                background:#000;
                height:50px;
                width:350px;
                /* transparency for different browsers */
                /* i have shared this in my CSS tips post too */
                opacity:0.6;
                filter:alpha(opacity=60);
                 -moz-opacity:0.6;
                -khtml-opacity: 0.6;

            }
            .photo .heading {
                /* hide it with negative value */
                /* it's the height of heading class */
                top:-50px;
            }

            .photo .caption {
                /* hide it with negative value */
                /* it's the height of bottom class */
                bottom:-50px;
            }

            /* styling of the classes*/
            .photo .heading span {

                color:#26c3e5;
                top:-50px;
                font-weight:bold;
                display:block;
                padding:5px 0 0 10px;
            }
            .photo .caption span{
                color:#999;
                font-size:12px;
                display:block;
                padding:5px 10px 0 10px;
            }

Catatan: sobat masih bisa mengedit CSSdiatas, misalnya jika sobat ingin mengganti lebar dan tinggi dari image dll

5. Terakhir tambahkan kode HTML berikut dibawah <div id='sidebar-wrapper'> atau sobat bisa menambahkan kode berikut pada bagian elemen halaman>> tambah gadget.

    <div class="photo">
        <div class="heading"><span>Dzikrullah</span></div>
        <img src="http://i47.tinypic.com/25h3maf.jpg" width="350px" height="186" alt="" />
        <div class="caption"><span>Ingatlah bahwa hanya dengan dzikrullah hati menjadi tenang</span></div>
    </div>

Catatan: Yang berwarna merah adalah URL image sy, silahkan sobat ganti dgn url image sobat!

Selesai. Simpan template!

Semoga bermanfaat. jangan lupa komentar!!!

View Demo

»» READMORE...

How To Add Featured Auto Posts Slider Using JQuery To Blogger

menu slider/ featured auto posts slider

Sebagaimana janji saya sebelumnya untuk segera berbagi setiap ilmu penerapan JQuery untuk template blogger yang baru saya dapatkan, maka postingan ini masih akan mengetengahkan tutorial JQuery dengan tema yang serupa dengan tutorial sebelumnya pula, yaitu modifikasi featured posts atau content slider (menu slider). Agar teman-teman juga memiliki banyak pilihan, bahkan bagi teman yang sudah bisa mengedit CSS bisa juga memodifikasi kembali tampilan featured post ini sesuai kreatifitas masing-masing.

Berikut tutorial membuat featured posts slider part 6 (karena sebelumnya sudah ada 5 tutorial membuat featured posts/ content slider yang pernah saya posting)

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

2. Tambahkan Script JQuery berikut sebelum tag atau kode </head>

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

catatan: Bagi sobat yang pernah menambahkan atau ditemplate sobat sudah terdapat script JQuery maka langkah kedua abaikan saja,

3. Kemudian tambahkan pula script berikut dibawah script JQuery tadi

<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/stepcarousel.js'/>
<script type='text/javascript'>
stepcarousel.setup({
    galleryid: 'board_carusel', //id of carousel DIV
    beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
    panelclass: 'board_item', //class of panel DIVs each holding content
    autostep: {enable:true, moveby:1, pause:5000},
    panelbehavior: {speed:500, wraparound:false, persist:false},
    defaultbuttons: {enable: false, moveby: 1, leftnav: ['http://i34.tinypic.com/317e0s5.gif', -5, 80], rightnav: ['http://i38.tinypic.com/33o7di8.gif', -20, 80]},
    statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
    contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
})
</script>

4. Selanjutnya tambahkan kode CSS berikut diatas tag atau kode ]]></b:skin>

/*board*/
#board{
    width:977px;
    height:276px;
    overflow:hidden;
    margin:0 0 0 0px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHPd4m3kC3rRtqaGHhMIol3N89DVY3Y9GxFfOX5fRN2M1xBm2yK6MCHoC8mPYTbtWMZUr0UWrfdhlHGhSE0s9VvNmISCN5vWAOxuPuV1RIowM7OSyFMrsUjEZ9to1u6puMxm60QIIB4Drk/s1600/bgr_board.png) no-repeat;
}
#board_left{
    float:left;
    padding:22px 0 0 27px;
}

#header_rss{
    float:right;
    padding:78px 80px 0 0;
}
#board_items{
    width:679px;
    padding:5px 0 0 0;
}
#board_body{
    width:647px;
    margin:0 0 0 15px;
}
#board_carusel{
    width:647px;
    height:131px;
    position:relative;
}
#board_carusel .belt{
    position: absolute; /*leave this value alone*/
    left: 0;
    top: 0;
}
.board_item{
    width:647px;
    height:173px;
    overflow:hidden;
}
#board_body h2{
    color:#000;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:23px;
    font-weight:normal;
    margin:0 0 28px 0;
}
#board_body strong{
    font-size:12px;
    color:#000;
    line-height:18px;
    display:block;
}
#board_body p{
    font-size:12px;
    color:#000;
    line-height:18px;
    padding:0 0 10px 0;
}
#board_body p img{
    float:left;
    border:1px solid #83b2c4;
    margin:0 10px 0 0;
    width:161px;
    height:107px;
}
#board_body p a{
    color:#000;
}
#board_body p.more a{
    text-decoration:underline;
}
#board_body p.more a:hover{
    text-decoration:none;
}
#board_carusel_nav{
    width:100%;
    overflow:hidden;
}
#board_carusel_nav li{
    font-size:12px;
    font-family:Verdana, Geneva, sans-serif;
    float:left;
}
#board_carusel_nav a{
    display:block;
    float:left;
    background:#7ac2df;
    border-right:1px solid #85d7f7;
    width:33px;
    text-align:center;
    padding:7px 0 7px 0;
}
#board_carusel_nav a.selected, #board_carusel_nav a:hover{
    text-decoration:underline;
    font-weight:bold;
    background:#a7e2f9;
    border-right:1px solid #a7e2f9;
}

5. Tambahkan kode HTML berikut diatas <div id='content-wrapper'> atau bisa juga sobat tambahkan pada bagian elemen halaman sebagai widget

<div id='board'>
    <div id='board_left'>
        <div id='board_items'>
            <div id='board_body'>
                <h2>Featured Posts</h2>
                <div id='board_carusel'>
                    <div class='belt'>
                    <div class='board_item'>
            
            <p><img alt='Shafiyyah Binti Abdul Muththalib' src='http://i41.tinypic.com/63ydtv.jpg'/><strong><a href='#'>Shafiyyah Binti Abdul Muththalib</a></strong>Shafiyyah fasih dalam lisannya dan beliau juga ahli bahasa. Tidak hanya itu saja Shafiyyah sosok ibu yang tangguh, beliau merawat dan membesarkan putranya sendiri semenjak suaminya wafat.....</p>
            <p class='more'><a href='#'>Readmore</a></p>
            
        </div><div class='board_item'>
            
            <p><img alt='Asiyah, Wanita yang Ditampakkan Surga Untuknya' src='http://i41.tinypic.com/24q1e68.jpg'/><strong><a href='#'>Asiyah, Wanita yang Ditampakkan Surga Untuknya</a></strong>Iman yang berangkat dari hati yang tulus, apapun yang menimpanya tidak sebanding dengan harapan atas apa yang dijanjikan di sisi Allah Tabaroka wa Ta’ala. Maka Allah pun tidak menyia-nyiakan keteguhan iman wanita ini. Ketika Fir’aun dan algojonya meninggalkan Asiyah, para malaikat pun datang menaunginya....</p>
            <p class='more'><a href='#'>Readmore</a></p>
            
        </div><div class='board_item'>
            
            <p><img alt='Fathimah binti Al-Yaman' src='http://i43.tinypic.com/34xjbx3.jpg'/><strong><a href='#'>Fathimah binti Al-Yaman</a></strong>Al-Hasan dan Al-Husain dinamakan anak Fathimah-Fathimah, karena ibu keduanya ialah Fathimah Az-Zahra', nenek keduanya adalah Fathimah binti Asad, dan nenek Nabi Shallallahu Alaihi wa Sallam dari jalur ayah beliau ialah Fathimah binti Abdullah bin Amr bin Imran bin Makhzum....</p>
            <p class='more'><a href='#'>Readmore</a></p>
            
        </div><div class='board_item'>
            
            <p><img alt='Ummu Fadhl' src='http://i40.tinypic.com/1qod9d.jpg'/><strong><a href='#'>Ummu Fadhl</a></strong> Fadhl Rodhiallahu 'anha masuk Islam sebelum hijrah, beliau adalah wanita pertama yang masuk Islam setelah Khadijah (Ummul Mukminin Rodhiallahu 'anha) sebagaimana yang dituturkan oleh putra beliau Abdullah bin Abbas Rodhiallahu 'anhu, "Aku dan Ibuku adalah termasuk orang-orang yang tertindas dari wanita dan anak-anak....</p>
            <p class='more'><a href='#'>Readmore</a></p>
            
        </div><div class='board_item'>
            
            <p><img alt='Ummu Haram Binti Malhan' src='http://i39.tinypic.com/313j7kw.jpg'/><strong><a href='#'>Ummu Haram Binti Malhan</a></strong>Ummu Haram berangan-angan untuk dapat menyertai peperangan bersama mujahidin yang menaiki kapal untuk menyebarkan dakwah dan membebaskan manusia dari peribadatan kepada sesama hamba menuju peribadatan kepada Allah saja. Akhirnya Allah mengabulkan angan-angannya dan mewujudkan cita-citanya....</p>
            <p class='more'><a href='#'>Readmore</a></p>
            
        </div>                    </div>
                </div>
            </div>
            <ul id='board_carusel_nav'>
                            <li id='board_carusel_nav_1'><a class='selected' href='javascript:stepcarousel.stepTo('board_carusel', 1)'>1</a></li>
                            <li id='board_carusel_nav_2'><a href='javascript:stepcarousel.stepTo('board_carusel', 2)'>2</a></li>
                            <li id='board_carusel_nav_3'><a href='javascript:stepcarousel.stepTo('board_carusel', 3)'>3</a></li>
                            <li id='board_carusel_nav_4'><a href='javascript:stepcarousel.stepTo('board_carusel', 4)'>4</a></li>
                            <li id='board_carusel_nav_5'><a href='javascript:stepcarousel.stepTo('board_carusel', 5)'>5</a></li>
                        </ul>
        </div>
    </div>
    <div id='header_rss'>
        <a expr:href='data:blog.homepageUrl + "feeds/posts/default"' title='Rss'><img alt='Rss' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi1Z0DFwvlKLJBvYzAm79x8OaluLwYMhDp13SUw-4ll99xHjZj3d14Kwew8EQTRqBKqf5YZ5scVLe4q5yHpOl1BkBH4iSrGbY-VO8nxIzL9XxbIE5jUamvOMZzHh_kwzTq49PV8aSJNaXS0/s1600/button_rss.png'/></a>
    </div>
</div>

6. Selesai. Semoga bermanfaat

Lihat live demo disini ((template yang memberi inspirasi tutorial ini) atau disini (hasil uji coba saya pada template default minima-karena semua tutorial diblog ini tdk saya posting kecuali setelah saya sendiri berhasil mempraktekkannya). Oke, selamat mencoba!!!

»» READMORE...

Membuat Sebuah Simple Featured Content SlideShow Menggunakan JQuery

menu slider simple menggunakan JQuery untuk template blogger
View Demo

InsyaAllah postingan kali ini, kembali saya ingin mengetengahkan tutorial penerapan JQuery pada template blogger. Berbeda dari tutorial-tutorial sebelumnya dimana source saya peroleh dari web-web designer luar, maka tutorial kali ini lahir dari hasil pengamatan pada sebuah free blogger template yang dikenal dengan Elegant Dashboard, tidak jauh berbeda dengan lahirnya tutorial terdahulu dengan judul menu slider versi 2 yang juga saya pelajari dari free blogger template Zinmag Primus. Bagi yang belum pernah mencoba membuat menu slider versi 2 seperti screenshot berikut, silahkan klik disini, atau silahkan lihat dulu demo featured content slider post using JQuery/ menu slider versi 2 menggunakan JQuery disini
menu slider simple menggunakan JQuery untuk template blogger
Nah sekarang langsung pada tutorial, cara membuat simple content slideshow menggunakan JQuery
1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan Script JQuery berikut sebelum tag

4. Selanjutnya tambahkan kode CSS berikut diatas tag ]]>
#contentSlide {
background : #ddd;
height : 228px;
padding : 10px 0;
}
#slideshow {
margin : 0 auto;
width : 945px;
height : 230px;
background : #eeeeee none repeat scroll 0 0;
position : relative;
}
#slideshow #slidesContainer {
margin : 0 auto;
width : 845px;
height : 228px;
overflow : auto;
position : relative;
}
#slideshow #slidesContainer .slide {
margin : 0 auto;
width : 845px;
height : 228px;
}
.control {
display : block;
width : 39px;
height : 228px;
text-indent : -10000px;
position : absolute;
cursor : pointer;
}
#leftControl {
top : 0;
left : 0;
width : 55px;
background : transparent url(http://lh6.ggpht.com/_9b1traaMESE/Sms_Pg_IsqI/AAAAAAAAAXU/tTxdiIsFY4g/previous%20gray.jpg)no-repeat scroll 0 0;
}
#rightControl {
top : 0;
right : 0;
background : transparent url(http://lh6.ggpht.com/_9b1traaMESE/Sms-s5qb9iI/AAAAAAAAAXQ/edpXAZIaxCI/next%20gray.jpg) no-repeat scroll 0 0;
width : 55px;
}
.slide h2, .slide p {
margin : 15px;
}
.slide h2 {
font : italic 24px Georgia, "Times New Roman", Times, serif;
color : #212421;
letter-spacing : -1px;
}
.slide img {
float : right;
margin : 0 15px;
padding : 1px;
}
Catatan: masih memungkinkan bagi sobat untuk mengedit CSS diatas, seperti mengganti labar dan tinggi dari content, fariasi border, atau merubah warna background dan image. Untuk kode warna silahkan lihat disini.
5. Terakhir tambahkan kode HTML berikut diatas

Featured Content Slider Using JQuery!

Featured Content Slider Using JQuery. Both of these examples use the featured Slider pretty much “out of the box”. Sure the design was heavily altered to fit the job, but the actual functionality wasn’t altered in any way. I recently had the calling to build a “featured content area”.
All you need to try it here you wont be sorry ! go try it GUMGUM :) visit my another explained post about this tutorial

Thumbnail With Caption Using Simple JQuery

This tutorial will show how to add heading and caption to your thumbnail and display it with jQuery cool transition effect. It's an elegant way to put content in your website, and only display it when users want to see it. It keeps your website clean!..

How to Create a Thumbnail With Caption Using Simple JQuery? GO HERE AND READ HOW :)

Multi Level Drop-Down Menu Dengan CSS dan JQuery!

This is a multi-level horizontal CSS menu created using a regular nested HTML list, then turned into a fully functional drop down menu using CSS and a touch of jQuery. The sub menus slide in and out into view, which also automatically reposition themselves horizontally if too close to the window's right edge. If you want to create it in your blogger blog, here's what you should do ! (these instructions refer to the "new" Blogger layouts templates) GO GET IT GUMGUM:)

Super Sexy Bookmarks Widget for Blogger !

Thumbnail image that says sleek button using photoshop that links to a Photoshop tutoril.

Looking for professional Social Bookmark Buttons for your blog ! me too :) however, while i was searching the net too, I came across a post by Naeemnur, that had instructions for Blogger (BlogSpot.com) based blogs which was really good.If you have a blog on blogger you can definitely give this a try.
Its very attractive social bookmarking widget ! it can help you to let your visitors bookmark your page effectively .
for instructions about the use of this SEXY Social bookmarking widget ! you can go here and get it GUMGUM:)

Catatan: Silahkan sobat edit Judul dari content, deskripsi dan link content.
>6. Simpan dan simpan lagi. Silahkan lihat hasilnya diblog sobat.
Selamat mencoba, semoga berhasil, semoga bermanfaat.
Salam.

»» READMORE...

Membuat Featured Posts (Menu Slider) Dengan JQuery

featured post/ menu slider Untuk Lihat Live Demo klik disini atau disini

Dalam desain web site atau blog banyak cara untuk membuat tampilan featured content atau post nampak profesional dan cantik dengan bantuan JQuery. Sehingga menambah jumlah ragam fetured content slider atau slide show dalam dunia desain. Sebagai peminat JQuery InsyaAllah saya akan sering mengetengahkan tutorial JQuery yang baru saya dapatkan untuk dibagi kepada teman-teman dan pengunjung blog ini.

Alhamdulillah setelah mempelajari sebuah template gratis dengan nama NewzMag - Blogger Template Demo

Lahirlah tutorial membuat featured post atau menu slider berikut:

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan Script JQuery berikut sebelum tag atau kode </head>

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

catatan: Bagi sobat yang pernah menambahkan atau ditemplate sobat sudah terdapat script JQuery maka langkah kedua abaikan saja,

3. Kemudian tambahkan pula script berikut dibawah script JQuery tadi



<script type='text/javascript'>
//<![CDATA[
/*
* jQuery Cycle Plugin (with Transition Definitions)
* Examples and documentation at: http://jquery.malsup.com/cycle/
* Copyright (c) 2007-2009 M. Alsup
* Version: 2.63 (17-MAR-2009)
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
* Requires: jQuery v1.2.6 or later
*
* Originally based on the work of:
*    1) Matt Oakes
*    2) Torsten Baldes (http://medienfreunde.com/lab/innerfade/)
*    3) Benjamin Sterling (http://www.benjaminsterling.com/experiments/jqShuffle/)
*/
;(function($){var ver="2.63";if($.support==undefined){$.support={opacity:!($.browser.msie)};}function log(){if(window.console&&window.console.log){window.console.log("[cycle] "+Array.prototype.join.call(arguments," "));}}$.fn.cycle=function(options,arg2){var o={s:this.selector,c:this.context};if(this.length==0&&options!="stop"){if(!$.isReady&&o.s){log("DOM not ready, queuing slideshow");$(function(){$(o.s,o.c).cycle(options,arg2);});return this;}log("terminating; zero elements found by selector"+($.isReady?"":" (DOM not ready)"));return this;}return this.each(function(){options=handleArguments(this,options,arg2);if(options===false){return;}if(this.cycleTimeout){clearTimeout(this.cycleTimeout);}this.cycleTimeout=this.cyclePause=0;var $cont=$(this);var $slides=options.slideExpr?$(options.slideExpr,this):$cont.children();var els=$slides.get();if(els.length<2){log("terminating; too few slides: "+els.length);return;}var opts=buildOptions($cont,$slides,els,options,o);if(opts===false){return;}if(opts.timeout||opts.continuous){this.cycleTimeout=setTimeout(function(){go(els,opts,0,!opts.rev);},opts.continuous?10:opts.timeout+(opts.delay||0));}});};function handleArguments(cont,options,arg2){if(cont.cycleStop==undefined){cont.cycleStop=0;}if(options===undefined||options===null){options={};}if(options.constructor==String){switch(options){case"stop":cont.cycleStop++;if(cont.cycleTimeout){clearTimeout(cont.cycleTimeout);}cont.cycleTimeout=0;$(cont).removeData("cycle.opts");return false;case"pause":cont.cyclePause=1;return false;case"resume":cont.cyclePause=0;if(arg2===true){options=$(cont).data("cycle.opts");if(!options){log("options not found, can not resume");return false;}if(cont.cycleTimeout){clearTimeout(cont.cycleTimeout);cont.cycleTimeout=0;}go(options.elements,options,1,1);}return false;default:options={fx:options};}}else{if(options.constructor==Number){var num=options;options=$(cont).data("cycle.opts");if(!options){log("options not found, can not advance slide");return false;}if(num<0||num>=options.elements.length){log("invalid slide index: "+num);return false;}options.nextSlide=num;if(cont.cycleTimeout){clearTimeout(this.cycleTimeout);cont.cycleTimeout=0;}if(typeof arg2=="string"){options.oneTimeFx=arg2;}go(options.elements,options,1,num>=options.currSlide);return false;}}return options;}function removeFilter(el,opts){if(!$.support.opacity&&opts.cleartype&&el.style.filter){try{el.style.removeAttribute("filter");}catch(smother){}}}function buildOptions($cont,$slides,els,options,o){var opts=$.extend({},$.fn.cycle.defaults,options||{},$.metadata?$cont.metadata():$.meta?$cont.data():{});if(opts.autostop){opts.countdown=opts.autostopCount||els.length;}var cont=$cont[0];$cont.data("cycle.opts",opts);opts.$cont=$cont;opts.stopCount=cont.cycleStop;opts.elements=els;opts.before=opts.before?[opts.before]:[];opts.after=opts.after?[opts.after]:[];opts.after.unshift(function(){opts.busy=0;});if(!$.support.opacity&&opts.cleartype){opts.after.push(function(){removeFilter(this,opts);});}if(opts.continuous){opts.after.push(function(){go(els,opts,0,!opts.rev);});}saveOriginalOpts(opts);if(!$.support.opacity&&opts.cleartype&&!opts.cleartypeNoBg){clearTypeFix($slides);}if($cont.css("position")=="static"){$cont.css("position","relative");}if(opts.width){$cont.width(opts.width);}if(opts.height&&opts.height!="auto"){$cont.height(opts.height);}if(opts.startingSlide){opts.startingSlide=parseInt(opts.startingSlide);}if(opts.random){opts.randomMap=[];for(var i=0;i<els.length;i++){opts.randomMap.push(i);}opts.randomMap.sort(function(a,b){return Math.random()-0.5;});opts.randomIndex=0;opts.startingSlide=opts.randomMap[0];}else{if(opts.startingSlide>=els.length){opts.startingSlide=0;}}opts.currSlide=opts.startingSlide=opts.startingSlide||0;var first=opts.startingSlide;$slides.css({position:"absolute",top:0,left:0}).hide().each(function(i){var z=first?i>=first?els.length-(i-first):first-i:els.length-i;$(this).css("z-index",z);});$(els[first]).css("opacity",1).show();removeFilter(els[first],opts);if(opts.fit&&opts.width){$slides.width(opts.width);}if(opts.fit&&opts.height&&opts.height!="auto"){$slides.height(opts.height);}var reshape=opts.containerResize&&!$cont.innerHeight();if(reshape){var maxw=0,maxh=0;for(var i=0;i<els.length;i++){var $e=$(els[i]),e=$e[0],w=$e.outerWidth(),h=$e.outerHeight();if(!w){w=e.offsetWidth;}if(!h){h=e.offsetHeight;}maxw=w>maxw?w:maxw;maxh=h>maxh?h:maxh;}if(maxw>0&&maxh>0){$cont.css({width:maxw+"px",height:maxh+"px"});}}if(opts.pause){$cont.hover(function(){this.cyclePause++;},function(){this.cyclePause--;});}if(supportMultiTransitions(opts)===false){return false;}if(!opts.multiFx){var init=$.fn.cycle.transitions[opts.fx];if($.isFunction(init)){init($cont,$slides,opts);}else{if(opts.fx!="custom"&&!opts.multiFx){log("unknown transition: "+opts.fx,"; slideshow terminating");return false;}}}var requeue=false;options.requeueAttempts=options.requeueAttempts||0;$slides.each(function(){var $el=$(this);this.cycleH=(opts.fit&&opts.height)?opts.height:$el.height();this.cycleW=(opts.fit&&opts.width)?opts.width:$el.width();if($el.is("img")){var loadingIE=($.browser.msie&&this.cycleW==28&&this.cycleH==30&&!this.complete);var loadingOp=($.browser.opera&&this.cycleW==42&&this.cycleH==19&&!this.complete);var loadingOther=(this.cycleH==0&&this.cycleW==0&&!this.complete);if(loadingIE||loadingOp||loadingOther){if(o.s&&opts.requeueOnImageNotLoaded&&++options.requeueAttempts<100){log(options.requeueAttempts," - img slide not loaded, requeuing slideshow: ",this.src,this.cycleW,this.cycleH);setTimeout(function(){$(o.s,o.c).cycle(options);},opts.requeueTimeout);requeue=true;return false;}else{log("could not determine size of image: "+this.src,this.cycleW,this.cycleH);}}}return true;});if(requeue){return false;}opts.cssBefore=opts.cssBefore||{};opts.animIn=opts.animIn||{};opts.animOut=opts.animOut||{};$slides.not(":eq("+first+")").css(opts.cssBefore);if(opts.cssFirst){$($slides[first]).css(opts.cssFirst);}if(opts.timeout){opts.timeout=parseInt(opts.timeout);if(opts.speed.constructor==String){opts.speed=$.fx.speeds[opts.speed]||parseInt(opts.speed);}if(!opts.sync){opts.speed=opts.speed/2;}while((opts.timeout-opts.speed)<250){opts.timeout+=opts.speed;}}if(opts.easing){opts.easeIn=opts.easeOut=opts.easing;}if(!opts.speedIn){opts.speedIn=opts.speed;}if(!opts.speedOut){opts.speedOut=opts.speed;}opts.slideCount=els.length;opts.currSlide=opts.lastSlide=first;if(opts.random){opts.nextSlide=opts.currSlide;if(++opts.randomIndex==els.length){opts.randomIndex=0;}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{opts.nextSlide=opts.startingSlide>=(els.length-1)?0:opts.startingSlide+1;}var e0=$slides[first];if(opts.before.length){opts.before[0].apply(e0,[e0,e0,opts,true]);}if(opts.after.length>1){opts.after[1].apply(e0,[e0,e0,opts,true]);}if(opts.next){$(opts.next).click(function(){return advance(opts,opts.rev?-1:1);});}if(opts.prev){$(opts.prev).click(function(){return advance(opts,opts.rev?1:-1);});}if(opts.pager){buildPager(els,opts);}exposeAddSlide(opts,els);return opts;}function saveOriginalOpts(opts){opts.original={before:[],after:[]};opts.original.cssBefore=$.extend({},opts.cssBefore);opts.original.cssAfter=$.extend({},opts.cssAfter);opts.original.animIn=$.extend({},opts.animIn);opts.original.animOut=$.extend({},opts.animOut);$.each(opts.before,function(){opts.original.before.push(this);});$.each(opts.after,function(){opts.original.after.push(this);});}function supportMultiTransitions(opts){var txs=$.fn.cycle.transitions;if(opts.fx.indexOf(",")>0){opts.multiFx=true;opts.fxs=opts.fx.replace(/\s*/g,"").split(",");for(var i=0;i<opts.fxs.length;i++){var fx=opts.fxs[i];var tx=txs[fx];if(!tx||!txs.hasOwnProperty(fx)||!$.isFunction(tx)){log("discarding unknown transition: ",fx);opts.fxs.splice(i,1);i--;}}if(!opts.fxs.length){log("No valid transitions named; slideshow terminating.");return false;}}else{if(opts.fx=="all"){opts.multiFx=true;opts.fxs=[];for(p in txs){var tx=txs[p];if(txs.hasOwnProperty(p)&&$.isFunction(tx)){opts.fxs.push(p);}}}}if(opts.multiFx&&opts.randomizeEffects){var r1=Math.floor(Math.random()*20)+30;for(var i=0;i<r1;i++){var r2=Math.floor(Math.random()*opts.fxs.length);opts.fxs.push(opts.fxs.splice(r2,1)[0]);}log("randomized fx sequence: ",opts.fxs);}return true;}function exposeAddSlide(opts,els){opts.addSlide=function(newSlide,prepend){var $s=$(newSlide),s=$s[0];if(!opts.autostopCount){opts.countdown++;}els[prepend?"unshift":"push"](s);if(opts.els){opts.els[prepend?"unshift":"push"](s);}opts.slideCount=els.length;$s.css("position","absolute");$s[prepend?"prependTo":"appendTo"](opts.$cont);if(prepend){opts.currSlide++;opts.nextSlide++;}if(!$.support.opacity&&opts.cleartype&&!opts.cleartypeNoBg){clearTypeFix($s);}if(opts.fit&&opts.width){$s.width(opts.width);}if(opts.fit&&opts.height&&opts.height!="auto"){$slides.height(opts.height);}s.cycleH=(opts.fit&&opts.height)?opts.height:$s.height();s.cycleW=(opts.fit&&opts.width)?opts.width:$s.width();$s.css(opts.cssBefore);if(opts.pager){$.fn.cycle.createPagerAnchor(els.length-1,s,$(opts.pager),els,opts);}if($.isFunction(opts.onAddSlide)){opts.onAddSlide($s);}else{$s.hide();}};}$.fn.cycle.resetState=function(opts,fx){fx=fx||opts.fx;opts.before=[];opts.after=[];opts.cssBefore=$.extend({},opts.original.cssBefore);opts.cssAfter=$.extend({},opts.original.cssAfter);opts.animIn=$.extend({},opts.original.animIn);opts.animOut=$.extend({},opts.original.animOut);opts.fxFn=null;$.each(opts.original.before,function(){opts.before.push(this);});$.each(opts.original.after,function(){opts.after.push(this);});var init=$.fn.cycle.transitions[fx];if($.isFunction(init)){init(opts.$cont,$(opts.elements),opts);}};function go(els,opts,manual,fwd){if(manual&&opts.busy&&opts.manualTrump){$(els).stop(true,true);opts.busy=false;}if(opts.busy){return;}var p=opts.$cont[0],curr=els[opts.currSlide],next=els[opts.nextSlide];if(p.cycleStop!=opts.stopCount||p.cycleTimeout===0&&!manual){return;}if(!manual&&!p.cyclePause&&((opts.autostop&&(--opts.countdown<=0))||(opts.nowrap&&!opts.random&&opts.nextSlide<opts.currSlide))){if(opts.end){opts.end(opts);}return;}if(manual||!p.cyclePause){var fx=opts.fx;curr.cycleH=curr.cycleH||$(curr).height();curr.cycleW=curr.cycleW||$(curr).width();next.cycleH=next.cycleH||$(next).height();next.cycleW=next.cycleW||$(next).width();if(opts.multiFx){if(opts.lastFx==undefined||++opts.lastFx>=opts.fxs.length){opts.lastFx=0;}fx=opts.fxs[opts.lastFx];opts.currFx=fx;}if(opts.oneTimeFx){fx=opts.oneTimeFx;opts.oneTimeFx=null;}$.fn.cycle.resetState(opts,fx);if(opts.before.length){$.each(opts.before,function(i,o){if(p.cycleStop!=opts.stopCount){return;}o.apply(next,[curr,next,opts,fwd]);});}var after=function(){$.each(opts.after,function(i,o){if(p.cycleStop!=opts.stopCount){return;}o.apply(next,[curr,next,opts,fwd]);});};if(opts.nextSlide!=opts.currSlide){opts.busy=1;if(opts.fxFn){opts.fxFn(curr,next,opts,after,fwd);}else{if($.isFunction($.fn.cycle[opts.fx])){$.fn.cycle[opts.fx](curr,next,opts,after);}else{$.fn.cycle.custom(curr,next,opts,after,manual&&opts.fastOnEvent);}}}opts.lastSlide=opts.currSlide;if(opts.random){opts.currSlide=opts.nextSlide;if(++opts.randomIndex==els.length){opts.randomIndex=0;}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{var roll=(opts.nextSlide+1)==els.length;opts.nextSlide=roll?0:opts.nextSlide+1;opts.currSlide=roll?els.length-1:opts.nextSlide-1;}if(opts.pager){$.fn.cycle.updateActivePagerLink(opts.pager,opts.currSlide);}}var ms=0;if(opts.timeout&&!opts.continuous){ms=getTimeout(curr,next,opts,fwd);}else{if(opts.continuous&&p.cyclePause){ms=10;}}if(ms>0){p.cycleTimeout=setTimeout(function(){go(els,opts,0,!opts.rev);},ms);}}$.fn.cycle.updateActivePagerLink=function(pager,currSlide){$(pager).find("a").removeClass("activeSlide").filter("a:eq("+currSlide+")").addClass("activeSlide");};function getTimeout(curr,next,opts,fwd){if(opts.timeoutFn){var t=opts.timeoutFn(curr,next,opts,fwd);if(t!==false){return t;}}return opts.timeout;}$.fn.cycle.next=function(opts){advance(opts,opts.rev?-1:1);};$.fn.cycle.prev=function(opts){advance(opts,opts.rev?1:-1);};function advance(opts,val){var els=opts.elements;var p=opts.$cont[0],timeout=p.cycleTimeout;if(timeout){clearTimeout(timeout);p.cycleTimeout=0;}if(opts.random&&val<0){opts.randomIndex--;if(--opts.randomIndex==-2){opts.randomIndex=els.length-2;}else{if(opts.randomIndex==-1){opts.randomIndex=els.length-1;}}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{if(opts.random){if(++opts.randomIndex==els.length){opts.randomIndex=0;}opts.nextSlide=opts.randomMap[opts.randomIndex];}else{opts.nextSlide=opts.currSlide+val;if(opts.nextSlide<0){if(opts.nowrap){return false;}opts.nextSlide=els.length-1;}else{if(opts.nextSlide>=els.length){if(opts.nowrap){return false;}opts.nextSlide=0;}}}}if($.isFunction(opts.prevNextClick)){opts.prevNextClick(val>0,opts.nextSlide,els[opts.nextSlide]);}go(els,opts,1,val>=0);return false;}function buildPager(els,opts){var $p=$(opts.pager);$.each(els,function(i,o){$.fn.cycle.createPagerAnchor(i,o,$p,els,opts);});$.fn.cycle.updateActivePagerLink(opts.pager,opts.startingSlide);}$.fn.cycle.createPagerAnchor=function(i,el,$p,els,opts){var a=($.isFunction(opts.pagerAnchorBuilder))?opts.pagerAnchorBuilder(i,el):'<a href="#">'+(i+1)+"</a>";if(!a){return;}var $a=$(a);if($a.parents("body").length==0){$a.appendTo($p);}$a.bind(opts.pagerEvent,function(){opts.nextSlide=i;var p=opts.$cont[0],timeout=p.cycleTimeout;if(timeout){clearTimeout(timeout);p.cycleTimeout=0;}if($.isFunction(opts.pagerClick)){opts.pagerClick(opts.nextSlide,els[opts.nextSlide]);}go(els,opts,1,opts.currSlide<i);return false;});if(opts.pauseOnPagerHover){$a.hover(function(){opts.$cont[0].cyclePause++;},function(){opts.$cont[0].cyclePause--;});}};$.fn.cycle.hopsFromLast=function(opts,fwd){var hops,l=opts.lastSlide,c=opts.currSlide;if(fwd){hops=c>l?c-l:opts.slideCount-l;}else{hops=c<l?l-c:l+opts.slideCount-c;}return hops;};function clearTypeFix($slides){function hex(s){s=parseInt(s).toString(16);return s.length<2?"0"+s:s;}function getBg(e){for(;e&&e.nodeName.toLowerCase()!="html";e=e.parentNode){var v=$.css(e,"background-color");if(v.indexOf("rgb")>=0){var rgb=v.match(/\d+/g);return"#"+hex(rgb[0])+hex(rgb[1])+hex(rgb[2]);}if(v&&v!="transparent"){return v;}}return"#ffffff";}$slides.each(function(){$(this).css("background-color",getBg(this));});}$.fn.cycle.commonReset=function(curr,next,opts,w,h,rev){$(opts.elements).not(curr).hide();opts.cssBefore.opacity=1;opts.cssBefore.display="block";if(w!==false&&next.cycleW>0){opts.cssBefore.width=next.cycleW;}if(h!==false&&next.cycleH>0){opts.cssBefore.height=next.cycleH;}opts.cssAfter=opts.cssAfter||{};opts.cssAfter.display="none";$(curr).css("zIndex",opts.slideCount+(rev===true?1:0));$(next).css("zIndex",opts.slideCount+(rev===true?0:1));};$.fn.cycle.custom=function(curr,next,opts,cb,speedOverride){var $l=$(curr),$n=$(next);var speedIn=opts.speedIn,speedOut=opts.speedOut,easeIn=opts.easeIn,easeOut=opts.easeOut;$n.css(opts.cssBefore);if(speedOverride){if(typeof speedOverride=="number"){speedIn=speedOut=speedOverride;}else{speedIn=speedOut=1;}easeIn=easeOut=null;}var fn=function(){$n.animate(opts.animIn,speedIn,easeIn,cb);};$l.animate(opts.animOut,speedOut,easeOut,function(){if(opts.cssAfter){$l.css(opts.cssAfter);}if(!opts.sync){fn();}});if(opts.sync){fn();}};$.fn.cycle.transitions={fade:function($cont,$slides,opts){$slides.not(":eq("+opts.currSlide+")").css("opacity",0);opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.opacity=0;});opts.animIn={opacity:1};opts.animOut={opacity:0};opts.cssBefore={top:0,left:0};}};$.fn.cycle.ver=function(){return ver;};$.fn.cycle.defaults={fx:"fade",timeout:4000,timeoutFn:null,continuous:0,speed:1000,speedIn:null,speedOut:null,next:null,prev:null,prevNextClick:null,pager:null,pagerClick:null,pagerEvent:"click",pagerAnchorBuilder:null,before:null,after:null,end:null,easing:null,easeIn:null,easeOut:null,shuffle:null,animIn:null,animOut:null,cssBefore:null,cssAfter:null,fxFn:null,height:"auto",startingSlide:0,sync:1,random:0,fit:0,containerResize:1,pause:0,pauseOnPagerHover:0,autostop:0,autostopCount:0,delay:0,slideExpr:null,cleartype:!$.support.opacity,nowrap:0,fastOnEvent:0,randomizeEffects:1,rev:0,manualTrump:true,requeueOnImageNotLoaded:true,requeueTimeout:250};})(jQuery);
/*
* jQuery Cycle Plugin Transition Definitions
* This script is a plugin for the jQuery Cycle Plugin
* Examples and documentation at: http://malsup.com/jquery/cycle/
* Copyright (c) 2007-2008 M. Alsup
* Version:     2.52
* Dual licensed under the MIT and GPL licenses:
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/
;(function($){$.fn.cycle.transitions.scrollUp=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var h=$cont.height();opts.cssBefore={top:h,left:0};opts.cssFirst={top:0};opts.animIn={top:0};opts.animOut={top:-h};};$.fn.cycle.transitions.scrollDown=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var h=$cont.height();opts.cssFirst={top:0};opts.cssBefore={top:-h,left:0};opts.animIn={top:0};opts.animOut={top:h};};$.fn.cycle.transitions.scrollLeft=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var w=$cont.width();opts.cssFirst={left:0};opts.cssBefore={left:w,top:0};opts.animIn={left:0};opts.animOut={left:0-w};};$.fn.cycle.transitions.scrollRight=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push($.fn.cycle.commonReset);var w=$cont.width();opts.cssFirst={left:0};opts.cssBefore={left:-w,top:0};opts.animIn={left:0};opts.animOut={left:w};};$.fn.cycle.transitions.scrollHorz=function($cont,$slides,opts){$cont.css("overflow","hidden").width();opts.before.push(function(curr,next,opts,fwd){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.left=fwd?(next.cycleW-1):(1-next.cycleW);opts.animOut.left=fwd?-curr.cycleW:curr.cycleW;});opts.cssFirst={left:0};opts.cssBefore={top:0};opts.animIn={left:0};opts.animOut={top:0};};$.fn.cycle.transitions.scrollVert=function($cont,$slides,opts){$cont.css("overflow","hidden");opts.before.push(function(curr,next,opts,fwd){$.fn.cycle.commonReset(curr,next,opts);opts.cssBefore.top=fwd?(1-next.cycleH):(next.cycleH-1);opts.animOut.top=fwd?curr.cycleH:-curr.cycleH;});opts.cssFirst={top:0};opts.cssBefore={left:0};opts.animIn={top:0};opts.animOut={left:0};};$.fn.cycle.transitions.slideX=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$(opts.elements).not(curr).hide();$.fn.cycle.commonReset(curr,next,opts,false,true);opts.animIn.width=next.cycleW;});opts.cssBefore={left:0,top:0,width:0};opts.animIn={width:"show"};opts.animOut={width:0};};$.fn.cycle.transitions.slideY=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$(opts.elements).not(curr).hide();$.fn.cycle.commonReset(curr,next,opts,true,false);opts.animIn.height=next.cycleH;});opts.cssBefore={left:0,top:0,height:0};opts.animIn={height:"show"};opts.animOut={height:0};};$.fn.cycle.transitions.shuffle=function($cont,$slides,opts){var w=$cont.css("overflow","visible").width();$slides.css({left:0,top:0});opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,true,true);});opts.speed=opts.speed/2;opts.random=0;opts.shuffle=opts.shuffle||{left:-w,top:15};opts.els=[];for(var i=0;i<$slides.length;i++){opts.els.push($slides[i]);}for(var i=0;i<opts.currSlide;i++){opts.els.push(opts.els.shift());}opts.fxFn=function(curr,next,opts,cb,fwd){var $el=fwd?$(curr):$(next);$(next).css(opts.cssBefore);var count=opts.slideCount;$el.animate(opts.shuffle,opts.speedIn,opts.easeIn,function(){var hops=$.fn.cycle.hopsFromLast(opts,fwd);for(var k=0;k<hops;k++){fwd?opts.els.push(opts.els.shift()):opts.els.unshift(opts.els.pop());}if(fwd){for(var i=0,len=opts.els.length;i<len;i++){$(opts.els[i]).css("z-index",len-i+count);}}else{var z=$(curr).css("z-index");$el.css("z-index",parseInt(z)+1+count);}$el.animate({left:0,top:0},opts.speedOut,opts.easeOut,function(){$(fwd?this:curr).hide();if(cb){cb();}});});};opts.cssBefore={display:"block",opacity:1,top:0,left:0};};$.fn.cycle.transitions.turnUp=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.cssBefore.top=next.cycleH;opts.animIn.height=next.cycleH;});opts.cssFirst={top:0};opts.cssBefore={left:0,height:0};opts.animIn={top:0};opts.animOut={height:0};};$.fn.cycle.transitions.turnDown=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.animIn.height=next.cycleH;opts.animOut.top=curr.cycleH;});opts.cssFirst={top:0};opts.cssBefore={left:0,top:0,height:0};opts.animOut={height:0};};$.fn.cycle.transitions.turnLeft=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.cssBefore.left=next.cycleW;opts.animIn.width=next.cycleW;});opts.cssBefore={top:0,width:0};opts.animIn={left:0};opts.animOut={width:0};};$.fn.cycle.transitions.turnRight=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.animIn.width=next.cycleW;opts.animOut.left=curr.cycleW;});opts.cssBefore={top:0,left:0,width:0};opts.animIn={left:0};opts.animOut={width:0};};$.fn.cycle.transitions.zoom=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,false,true);opts.cssBefore.top=next.cycleH/2;opts.cssBefore.left=next.cycleW/2;opts.animIn={top:0,left:0,width:next.cycleW,height:next.cycleH};opts.animOut={width:0,height:0,top:curr.cycleH/2,left:curr.cycleW/2};});opts.cssFirst={top:0,left:0};opts.cssBefore={width:0,height:0};};$.fn.cycle.transitions.fadeZoom=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,false);opts.cssBefore.left=next.cycleW/2;opts.cssBefore.top=next.cycleH/2;opts.animIn={top:0,left:0,width:next.cycleW,height:next.cycleH};});opts.cssBefore={width:0,height:0};opts.animOut={opacity:0};};$.fn.cycle.transitions.blindX=function($cont,$slides,opts){var w=$cont.css("overflow","hidden").width();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.animIn.width=next.cycleW;opts.animOut.left=curr.cycleW;});opts.cssBefore={left:w,top:0};opts.animIn={left:0};opts.animOut={left:w};};$.fn.cycle.transitions.blindY=function($cont,$slides,opts){var h=$cont.css("overflow","hidden").height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.animIn.height=next.cycleH;opts.animOut.top=curr.cycleH;});opts.cssBefore={top:h,left:0};opts.animIn={top:0};opts.animOut={top:h};};$.fn.cycle.transitions.blindZ=function($cont,$slides,opts){var h=$cont.css("overflow","hidden").height();var w=$cont.width();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);opts.animIn.height=next.cycleH;opts.animOut.top=curr.cycleH;});opts.cssBefore={top:h,left:w};opts.animIn={top:0,left:0};opts.animOut={top:h,left:w};};$.fn.cycle.transitions.growX=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true);opts.cssBefore.left=this.cycleW/2;opts.animIn={left:0,width:this.cycleW};opts.animOut={left:0};});opts.cssBefore={width:0,top:0};};$.fn.cycle.transitions.growY=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false);opts.cssBefore.top=this.cycleH/2;opts.animIn={top:0,height:this.cycleH};opts.animOut={top:0};});opts.cssBefore={height:0,left:0};};$.fn.cycle.transitions.curtainX=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,false,true,true);opts.cssBefore.left=next.cycleW/2;opts.animIn={left:0,width:this.cycleW};opts.animOut={left:curr.cycleW/2,width:0};});opts.cssBefore={top:0,width:0};};$.fn.cycle.transitions.curtainY=function($cont,$slides,opts){opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,false,true);opts.cssBefore.top=next.cycleH/2;opts.animIn={top:0,height:next.cycleH};opts.animOut={top:curr.cycleH/2,height:0};});opts.cssBefore={left:0,height:0};};$.fn.cycle.transitions.cover=function($cont,$slides,opts){var d=opts.direction||"left";var w=$cont.css("overflow","hidden").width();var h=$cont.height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts);if(d=="right"){opts.cssBefore.left=-w;}else{if(d=="up"){opts.cssBefore.top=h;}else{if(d=="down"){opts.cssBefore.top=-h;}else{opts.cssBefore.left=w;}}}});opts.animIn={left:0,top:0};opts.animOut={opacity:1};opts.cssBefore={top:0,left:0};};$.fn.cycle.transitions.uncover=function($cont,$slides,opts){var d=opts.direction||"left";var w=$cont.css("overflow","hidden").width();var h=$cont.height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,true,true);if(d=="right"){opts.animOut.left=w;}else{if(d=="up"){opts.animOut.top=-h;}else{if(d=="down"){opts.animOut.top=h;}else{opts.animOut.left=-w;}}}});opts.animIn={left:0,top:0};opts.animOut={opacity:1};opts.cssBefore={top:0,left:0};};$.fn.cycle.transitions.toss=function($cont,$slides,opts){var w=$cont.css("overflow","visible").width();var h=$cont.height();opts.before.push(function(curr,next,opts){$.fn.cycle.commonReset(curr,next,opts,true,true,true);if(!opts.animOut.left&&!opts.animOut.top){opts.animOut={left:w*2,top:-h/2,opacity:0};}else{opts.animOut.opacity=0;}});opts.cssBefore={left:0,top:0};opts.animIn={left:0};};$.fn.cycle.transitions.wipe=function($cont,$slides,opts){var w=$cont.css("overflow","hidden").width();var h=$cont.height();opts.cssBefore=opts.cssBefore||{};var clip;if(opts.clip){if(/l2r/.test(opts.clip)){clip="rect(0px 0px "+h+"px 0px)";}else{if(/r2l/.test(opts.clip)){clip="rect(0px "+w+"px "+h+"px "+w+"px)";}else{if(/t2b/.test(opts.clip)){clip="rect(0px "+w+"px 0px 0px)";}else{if(/b2t/.test(opts.clip)){clip="rect("+h+"px "+w+"px "+h+"px 0px)";}else{if(/zoom/.test(opts.clip)){var t=parseInt(h/2);var l=parseInt(w/2);clip="rect("+t+"px "+l+"px "+t+"px "+l+"px)";}}}}}}opts.cssBefore.clip=opts.cssBefore.clip||clip||"rect(0px 0px 0px 0px)";var d=opts.cssBefore.clip.match(/(\d+)/g);var t=parseInt(d[0]),r=parseInt(d[1]),b=parseInt(d[2]),l=parseInt(d[3]);opts.before.push(function(curr,next,opts){if(curr==next){return;}var $curr=$(curr),$next=$(next);$.fn.cycle.commonReset(curr,next,opts,true,true,false);opts.cssAfter.display="block";var step=1,count=parseInt((opts.speedIn/13))-1;(function f(){var tt=t?t-parseInt(step*(t/count)):0;var ll=l?l-parseInt(step*(l/count)):0;var bb=b<h?b+parseInt(step*((h-b)/count||1)):h;var rr=r<w?r+parseInt(step*((w-r)/count||1)):w;$next.css({clip:"rect("+tt+"px "+rr+"px "+bb+"px "+ll+"px)"});(step++<=count)?setTimeout(f,13):$curr.css("display","none");})();});opts.cssBefore={display:"block",opacity:1,top:0,left:0};opts.animIn={left:0};opts.animOut={left:0};};})(jQuery);
//]]>
</script>

<script type='text/javascript'>
//<![CDATA[
function showVideo(id) {
    document.write("<object width=\"291\" height=\"225\"><param name=\"movie\" value=\"http://www.youtube.com/v/"+id+">&hl=en&fs=1\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://www.youtube.com/v/"+id+"&hl=en&fs=1\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"291\" height=\"225\"></embed></object>");
}

$(function() {
    $('#featured').cycle({
        fx: 'scrollLeft',
        speed: 700,
        timeout: 5000
    });
});

$(document).ready(function(){
$(".click").click(function(){
    $("#panel").slideToggle("medium");
    $(this).toggleClass("active"); return false;
});
});
//]]>
</script>



4. Selanjutnya tambahkan kode CSS berikut diatas tag atau kode ]]></b:skin>

/* Features */
#featured {height: 290px; overflow: hidden; background: url('http://sites.google.com/site/amatullah83/background/slide0002_background.gif') no-repeat top center; clear: both; font-size: 0.85em; margin-bottom: 5px;}
#featured .post {padding: 20px;}
#featured .post .featured-thumb {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5WM9wBIZt5jOflP7ujxl46iX54PsWBkdPj3ByekPgBEJJXjuNokDnNImsJpXmQPBNTe57I0ope5S2s1awMiLf13IBVmgbGvICbpNQ508AV8uOLy9iKyAkyLNXaXBCTpFWVK-k_r7s8dA/s400/nothumb.gif') no-repeat center; float: left; border: 5px solid #FFFF99; overflow: hidden; height: 120px; width: 200px; margin-right: 15px;}
#featured .post .featured-thumb img {width: 200px;}
#featured .post .featured-text {padding-bottom: 10px;}
#featured .post .featured-title {font: normal 1.1em Georgia, Times, Serif; line-height: 1.1em;}
#featured .post .featured-comment {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFpex6eQPAzbLkwS1AG1qDcLFoh4rygMWgX0GWYXb0SpGjtGit2Wl8uWGjekQs8z7Np2utWguKmLbvfNfcyeMYaAYu-TnTuyN2WAwSwqB1RIzVOmb0Ey7RrT2eUxfAh4KwlAsuXZBux8E/s400/entry-comment.png') no-repeat left center; padding: 5px 0px 5px 20px;margin-right: 20px;}
#featured .post .featured-date {background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihpC4-0rH5laGzEdrIOTekByVzJB2T7WvKCjfO7NmXhyMh8lzJ1org9IHaMEIK1b9yzSWgQ2sMKec24b4BoJAsQYpdp742bW2ExaQY4oH2AqlbolnwU9TNroWB1qI-QogOcHTHDWp3L7g/s400/entry-date.gif') no-repeat left center; padding: 5px 0px 5px 20px;margin-right: 20px;}
#featured .post .featured-meta {color: #999; clear: both; padding: 10px 0px; overflow: hidden; font-size: 0.9em;}
#featured .post .featured-read {display: block; float: right; background: #A9F5F2; width: 80px; color: #fff !important; padding: 5px 0px; text-align: center;-moz-border-radius-topleft:5px;-moz-border-radius-topright:5px;-moz-border-radius-bottomleft:5px;-moz-border-radius-bottomright:5px;-webkit-border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;-webkit-border-top-left-radius:5px;-webkit-border-top-right-radius:5px;}

Catatan: Bagi sobat yang sudah terbiasa ngedit CSS kode diatas bisa sobat modifikasi lagi menurut selera, silahkan kembangkan kreatifitas masing-masing!

5. Tambahkan kode HTML berikut diatas <div id='main-wrapper'> atau bisa juga sobat tambahkan pada bagian elemen halaman sebagai widget


<div id="featured">

<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Cinta Sepanjang masa</a></h1></div>
<div class="featured-thumb"><img src="http://i42.tinypic.com/eld8k0.jpg" /></div>
<p>Ia adalah wanita yang terus hidup dalam hati suaminya sampaipun ia telah meninggal dunia. Tahun-tahun yang terus berganti tidak dapat mengikis kecintaan sang suami padanya. Panjangnya masa tidak dapat menghapus kenangan bersamanya di hati sang suami.....</p>
<div class="featured-meta">
<span class="featured-date">11th October 2009</span>
<span class="featured-comment"><a href="/#comments">1 comment</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Kisah Mahar Paling Mulia</a></h1></div>
<div class="featured-thumb"><img src="http://i43.tinypic.com/2rrmn38.jpg" /></div>
<p>Sejarah telah berbicara tentang berbagai kisah yang bisa kita jadikan pelajaran dalam menapaki kehidupan. Sejarah pun mencatat perjalanan hidup para wanita muslimah yang teguh dan setia di atas keislamannya. ....</p>
<div class="featured-meta">
<span class="featured-date">1st October 2009</span>
<span class="featured-comment"><a href="/#comments">1 comment</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Saudariku Inilah Kemuliaanmu</a></h1></div>
<div class="featured-thumb"><img src="http://i42.tinypic.com/2cnxjk9.jpg" /></div>
<p>Dan kemuliaan (yang sebenarnya) itu hanyalah milik Allah, milik Rasul-Nya dan milik orang-orang yang beriman, akan tetapi orang-orang munafik itu tiada mengetahui." (Qs. al-Munaafiqun: 8).....</p>
<div class="featured-meta">
<span class="featured-date">25th March 2009</span>
<span class="featured-comment"><a href="/#comments">4 comments</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

<div class="post">
<div class="featured-text"><h1><a href="#" class="featured-title">Cinta Sejati Dalam Islam</a></h1></div>
<div class="featured-thumb"><img src="http://i40.tinypic.com/dfkqo5.jpg" /></div>
<p>Makna ‘Cinta Sejati’ terus dicari dan digali. Manusia dari zaman ke zaman seakan tidak pernah bosan membicarakannya. Sebenarnya? apa itu ‘Cinta Sejati’ dan bagaimana pandangan Islam terhadapnya?...</p>
<div class="featured-meta">
<span class="featured-date">18th March 2009</span>
<span class="featured-comment"><a href="/#comments">10 comments</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

<div class="post">
<div class="featured-text"><h1><a href=http://amatullah83.blogspot.com class="featured-title">Luangkanlah Waktumu Membaca Al-Qur'an</a></h1></div>
<div class="featured-thumb"><img src="http://i42.tinypic.com/1z6qzgn.jpg" /></div>
<p>"Ingatlah hanya dengan mengingat Alloh-lah hati menjadi tentram.” (Qs. ar-Ra'd: 28) ...</p>
<div class="featured-meta">
<span class="featured-date">3rd December 2008</span>
<span class="featured-comment"><a href="/#comments" title="Luangkanlah Waktumu Membaca Al-Qur'an">1 comment</a></span>
<a href="#" class="featured-read">Read full</a>
</div>
</div>

</div>




Catatan: Silahkan edit kode HTML diatas sesuaikan dengan postingan pada blog sobat.

# alamat atau url link posting, tulisan berwarna merah judul postingan, tulisan berwarna hijau deskripsi singkat dari postingan sedang tulisan berwarna biru url image/ thumbnail postingan

6. Simpan template dan lihat hasilnya pada blog sobat.

Untuk lihat live demo yang sudah saya buat silahkan klik disini atau disini

»» READMORE...

BLOG CANIAGO

Laman

Carousel

Selasa, 26 Oktober 2010

Pasang Link di New Blogger Template

Kamis, 21 Oktober 2010

Membuat Simple Drop Down Menu dengan CSS

Glossy Horizontal Menu

Cara Membuat Menu Tab Navigator Horizontal

Cara Menambahkan Icons Social Bookmark Pada Postingan

Membuat Text Area

Membuat BlogRool

Membuat Cursor Bertabur Bintang

Cara Membuat Menu dTree

Membuat Sebuah Thumbnail Dengan Caption (Keterangan) Menggunakan Simple JQuery

How To Add Featured Auto Posts Slider Using JQuery To Blogger

Membuat Sebuah Simple Featured Content SlideShow Menggunakan JQuery

Featured Content Slider Using JQuery!

Thumbnail With Caption Using Simple JQuery

How to Create a Thumbnail With Caption Using Simple JQuery? GO HERE AND READ HOW :)

Multi Level Drop-Down Menu Dengan CSS dan JQuery!

Super Sexy Bookmarks Widget for Blogger !

Membuat Featured Posts (Menu Slider) Dengan JQuery