Cara buat menu dengan efek image sliding down

Menu ini sangat cocok digunakan pada web dan blog untuk berbisnis. Sebab dari segi tampilan memang menu ini tampak sangat elegan, sehingga dengan menu ini web atau blog kita akan lebih bagus dan lebih mantab untuk menawarkan sebuah produk.
Tapi tentunya bukan hanya untuk berbisnis saja, blog yang bergerak dibidang yang lain juga tetap lebih menarik jika menggunakan menu ini. Yang jelas intinya menu dengan efek image sliding down ini bisa kita manfaatkan sebagai penunjang yang menggambarkan tentang web ataupun blog kita.

Cara bekerja menu dengan efek image sliding down ini sangat ringan, sebab tidak menggunakan jQuery, melainkan hanya menggunakan fitur CSS, dan beberapa kode HTML.

LIHAT DEMO

Bila anda berminat dengan menu ini, silahkan anda bisa ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

7. Copy kode dibawah ini dan paste sebelum kode </head>:

<style type='text/css'> /*widget by noer cara buat web gratis.com*/ .menu-slide-cbwg{ position:relative; width:900px; height:350px; margin:auto; overflow:hidden; background:#000; background:transparent url(https://lh5.googleusercontent.com/-hKTkCP-qX5I/TjYiC4g7vwI/AAAAAAAAA6k/9OeMLCpbaEM/s900/background-image.jpg) no-repeat bottom right; background-repeat:no-repeat; background-position:50% 50%; -moz-box-shadow:1px 1px 5px #000; -webkit-box-shadow:1px 1px 5px #000; box-shadow:1px 1px 5px #000; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px 4px 4px 4px; } .titel-menu-slide-cbwg{ display: block; position:absolute; width:100%; float: left; margin:30px 360px 10px ; font-size:70px; cursor:pointer; text-shadow:1px 1px 1px #000; text-decoration:none; font-weight:bold; color:#339025; z-index:999999; } .titel-menu-slide-cbwg a:link { color:#339025; text-decoration:none; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; } .titel-menu-slide-cbwg a:visited { color:#339025; text-decoration:none; } .titel-menu-slide-cbwg a:hover { color:#C3E9A4; text-decoration:none; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; } ul#menu-slide-cbwg { display:inline; list-style: none; z-index:999999; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; } ul#menu-slide-cbwg li { width:180px; float:left; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; } ul#menu-slide-cbwg li a:hover{ position:relative; height:350px; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; border:1px solid #bbb; } ul#menu-slide-cbwg a { display: block; position:relative; width:100%; height:40px; background-repeat:no-repeat; background-position:50% 50%; text-decoration:none; text-align:center; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -moz-box-shadow:1px 1px 5px #000; -webkit-box-shadow:1px 1px 5px #000; box-shadow:1px 1px 5px #000; } ul#menu-slide-cbwg a span{ text-align:center; font-size:20px; line-height:40px; margin-top:0px; margin-top:310px; cursor:pointer; text-shadow:0px 0px 1px #000; text-decoration:none; color:#fff; background-color:#488040; border-top:1px solid #fff; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; opacity: 0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); display: block; width: 180px; font-size:14px; font-weight:bold; color:#fff; } ul#menu-slide-cbwg li a span:hover{ font-size:14px; color:#4152A7; background-color:#eee; opacity: 0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; } </style>

8. Copy kode dibawah ini dan paste setelah kode diatas :

<style type='text/css'>

ul#menu-slide-cbwg .item-1 a:hover
{ background-image: url(https://lh4.googleusercontent.com/-65FuwuPXlR8/TjWMjxIvHDI/AAAAAAAAA6Q/ccEML2Z5Veo/s400/RUANG%2BKELURGA%2Ba.jpg);}

ul#menu-slide-cbwg .item-2 a:hover
{ background-image: url(https://lh5.googleusercontent.com/-coYXqAEyvI4/TjWMkeMGtyI/AAAAAAAAA6U/XkzeO3ByU3s/s400/RUANG%2BKELURGA.%2Bb.jpg);}

ul#menu-slide-cbwg .item-3 a:hover
{ background-image: url(https://lh6.googleusercontent.com/-1QWOXKKy1bA/TjWMk7BdNbI/AAAAAAAAA6Y/CKAuXyS9TVs/s400/RUANG%2BKELURGA.%2Bc.jpg);}

ul#menu-slide-cbwg .item-4 a:hover
{ background-image: url(https://lh3.googleusercontent.com/-1wtxbzb0aiM/TjWMlKSl1LI/AAAAAAAAA6c/Z_p258_8h-A/s400/RUANG%2BKELURGA.%2Bd.jpg);}

ul#menu-slide-cbwg .item-5 a:hover
{ background-image: url(https://lh5.googleusercontent.com/-4pY6W_Qpn0Q/TjWMlv19LwI/AAAAAAAAA6g/MNG5ZBN4EOg/s400/RUANG%2BKELURGA.%2Be.jpg);}
</style>

Catatan :

• Teks merah adalah ULR Gambar atau foto yang ada pada setiap menu. Silahkan anda bisa ganti ULR dan Gambar atau foto sesuai dengan menu yang anda buat.

9. SIMPAN TEMPLATE.

Langkah selanjutnya tinggal menaruh Slide Menu vertikal pada sidebar. Ikuti langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

 3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<div id="menu-slide-cbwg" class="menu-slide-cbwg">
<div class="titel-menu-slide-cbwg"><a href="ULR BLOG">NAMA BLOG</a></div>
<ul id="menu-slide-cbwg">
<li class="item-1">
<a href="ULR HALAMAN"><span>JUDUL MENU 1</span></a>
</li>

<li class="item-2">
<a href="ULR HALAMAN"><span>JUDUL MENU 2</span></a>
</li>

<li class="item-3">
<a href="ULR HALAMAN"><span>JUDUL MENU 3</span></a>
</li>

<li class="item-4">
<a href="ULR HALAMAN"><span>JUDUL MENU 4</span></a>
</li>

<li class="item-5">
<a href="ULR HALAMAN"><span>JUDUL MENU 5</span></a>
</li>
</ul>
</div>

Catatam : 

• Teks warna BIRU pada kode ini harus sama dengan teks warna BIRU yang ada pada kode diatas.
• Teks warna MERAH ganti dengan ULR HALAMAN anda.
• Teks warna PINK ganti dengan JUDUL MENU milik anda.

11.SIMPAN TEMPLATE.
Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

---

Cara buat web lebih interaktif

Cara buat web gratis untuk mengembangkan usaha menggunakan blogspot blogger, lebih interaktif dengan pengunjung. Selain pengunjung bisa langsung berkomentar atau bertanya tentang produk yang kita tawarkan, kita juga bisa langsung bisa menjawab komentar ataupun pertanyaan yang diajukan oleh pengunjung tentang produk yang kita tawarkan tadi. Dan pengunjung juga bisa berlangganan update produk terbaru dari setiap produk terbaru yang kita posting.

Lebih dari pada itu tampilan template juga bisa kita sesuaikan dengan kebutuhan usaha kita. Sangat banyak sekali situs yang menyediakan beragam template, baik template yang berbasis profesional bisnis ataupun template yang bisa kita gunakan sekedar untuk blogging. Tapi yang jelas secara fungsi, template - template tersebut memang dirancang untuk sebuah blog.  Bedanya template untuk website bisnis tampil lebih profesional. Dan kesemuanya kita tinggal pilih template sesuka kita serta menggunakannya secara gratis.

Anda bisa lihat web gratis dengan menggunakan blogspot dari blogger yang saya gunakan untuk pengembangan usaha saya yaitu www.rambakjogja.com. Dan tampilan template yang saya gunakan juga tampak lebih profesional. Apalagi saya sudah mengganti domainnya, dari www.rambakjogja.blogspot.com menjadi www.rambakjogja.com.
Bagaimana menurut anda? dari tampilan dan namanya, website saya ini lebih mantab kan?.

Untuk mengganti subdomain blogspot menjadi "dot com", tentu harus berbayar dengan membeli domain "dot com". Dan waktu itu saya beli domain, sudah satu paket kostum domain sekalian dengan harga Rp.95.000,- per tahun. Jadi saya tinggal seting ubah sesuaikan pada blogspot, tanpa harus repot seting DNS.

Tapi bila anda memang menginginkan website yang anda buat betul - betul gratis, anda bisa gunakan domain co.cc. Dan seperti yang sudah kita ketahui, bahwa co.cc adalah top level domain yang bisa kita dapatkan secara gratis.

Intinya untuk membuat sebuah website, kita tidak harus keluar uang. Yang terpenting interaksi kita dengan pengunjung lebih dekat, sehingga secara tidak langsung pengunjung akan lebih percaya dengan produk yang kita tawarkan. OK....!!.

Nah sekarang mari kita mulai langkah - langkahnya, dan cara ini sudah berulang kali saya tulis dan saya posting. Silahkan anda ikuti tahap demi tahap urutan poin dibawah ini :
1. Cara dapat domain gratis
2. Cara dapat hosting gratis
3. Cara seting domain gratis dihosting gratis
4. Cara dapat template gratis
5. Cara Upload Template gratis

Apabila langkah - langkah diatas ada yang masih belum anda pahami, anda bisa gunakan fasilitas chat box yang ada disamping untuk bertanya. Saya akan bantu anda semampu yang saya bisa.... OK !!.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

---

Cara buat Slide Menu vertikal

Dilihat dari tampilan dan efek slidding yang muncul, Slide Menu vertikal ini tidak beda dengan tampilan menu accordion. Efek slidding pada menu vertikal ini menampilkan sebuah ikon sesuai dengan menu yang dituju. Sehingga akan tampak lebih indah bila anda menggunakan Slide Menu vertikal ini pada web ataupun blog anda. Cara pembuatannya sangat mudah, yaitu menggunakan fitur CSS dan beberapa kode HTML. Dan anda tinggal menyisipkan sedikit kode CSS tersebut pada template blog anda, dan sedikit kode HTML pada sidebar blog anda.

LIHAT DEMO

OK..., bila anda berminat memasang Slide Menu vertikal ini pada blog anda, silahkan anda bisa ikuti langkah - langkah berikut :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

7. Copy kode dibawah ini dan paste sebelum kode </head>:

<style type='text/css'> /*widget Slide Menu vertikal by noer cara buat web gratis.com*/ ul#Slide-Menu-vertikal-cbwg { list-style: none; z-index:999999; margin:0; padding:0; } ul#Slide-Menu-vertikal-cbwg li { width: 200px; display:inline; margin:0; padding:0; } ul#Slide-Menu-vertikal-cbwg li a { display: block; position:relative; width: 200px; height: 25px; background-color:#aaa; background-repeat:no-repeat; background-position:50% 10px; border:1px solid #aaa; text-decoration:none; text-align:center; -moz-border-radius: 5px; border-radius: 5px; margin:0; padding:0; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; } ul#Slide-Menu-vertikal-cbwg li a:hover{ background-color:#fff; border:1px solid #bbb; padding-top: 80px; } ul#Slide-Menu-vertikal-cbwg li a span{ background: -moz-linear-gradient(center top, #fff 0%,#bbb 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #bbb),color-stop(1, #fff)); border-top:2px solid #bbb; -moz-border-radius: 5px; border-radius: 5px; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; opacity: 0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); display: block; width: 200px; height: 25px; font-size:14px; font-weight:bold; color:#000; margin:0; padding:0; } ul#Slide-Menu-vertikal-cbwg li a span:hover{ text-decoration:none; text-align:center; font-size:14px; font-weight:bold; color:#40954E; background-color:#eee; opacity: 0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } </style>

8. Copy kode dibawah ini dan paste setelah kode diatas :

<style type='text/css'>

ul#Slide-Menu-vertikal-cbwg .ITEM 1 a:hover     { background-image: url(https://lh5.googleusercontent.com/-TA-K1SJzLj4/TilpBgPlKqI/AAAAAAAAA5E/ivMq4zJFTD8/s104/home%2B2.png);}

ul#Slide-Menu-vertikal-cbwg .ITEM 2 a:hover      { background-image: url(https://lh6.googleusercontent.com/-nuD-DiQQIq4/TiHQPhqCfCI/AAAAAAAAA4M/oDSH5xMZdc4/s104/id_card.png);}

ul#Slide-Menu-vertikal-cbwg .ITEM 3 a:hover      { background-image: url(https://lh6.googleusercontent.com/-Q6LoSSBVVfE/TilpB73tDoI/AAAAAAAAA5I/tGrBFJRUIU4/s104/html_file.png);}

ul#Slide-Menu-vertikal-cbwg .ITEM 4 a:hover  { background-image: url(https://lh4.googleusercontent.com/-manEzJSx6bw/TilpAN5KeLI/AAAAAAAAA48/5HIz_ia7Mqo/s104/css_file.png);}

ul#Slide-Menu-vertikal-cbwg .ITEM 5 a:hover  { background-image: url(https://lh5.googleusercontent.com/-EiPvD8oBRiI/TilpClrdEWI/AAAAAAAAA5Q/5_J6zR0rMVg/s104/js_file.png);}

ul#Slide-Menu-vertikal-cbwg .ITEM 6 a:hover  { background-image: url(https://lh5.googleusercontent.com/-EJRifgUPLVg/TilpBJBjcHI/AAAAAAAAA5A/YYbP9gGT9mo/s104/edit_page.png);}

ul#Slide-Menu-vertikal-cbwg .ITEM 7 a:hover  { background-image: url(https://lh6.googleusercontent.com/-9Bn_oPZp14I/Tilo976B6PI/AAAAAAAAA44/xN_e_paQhjU/s104/book_accept.png);}

ul#Slide-Menu-vertikal-cbwg .ITEM 8 a:hover  { background-image: url(https://lh6.googleusercontent.com/-kAEzDRvNYlY/TiHQP2rBcRI/AAAAAAAAA4Q/GBw4l-UElWQ/s104/mail.png);}
</style>

Catatan :

• Teks merah adalah ULR Icon yang ada pada setiap menu. Silahkan anda bisa ganti ULR dan Iconnya sesuai dengan menu yang anda buat.
• Sebagai refrensi, anda bisa dapatkan macam - macam bentuk icon di http://dryicons.com/free-icons/
• Anda bisa menambah dan mengurangi jumlah item menu, sesuai kebutuhan anda, tapi disesuaikan dengan lebar area yang ada.

9. SIMPAN TEMPLATE.

Langkah selanjutnya tinggal menaruh Slide Menu vertikal pada sidebar. Ikuti langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

 3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<ul id="Slide-Menu-vertikal-cbwg">
<li class="ITEM 1">
<a href="ULR HALAMAN"><span>JUDUL MENU 1</span></a>
</li>

<li class="ITEM 2">
<a href="ULR HALAMAN"><span>JUDUL MENU 2</span></a>
</li>

<li class="ITEM 3">
<a href="ULR HALAMAN"><span>JUDUL MENU 3</span></a>
</li>

<li class="ITEM 4">
<a href="ULR HALAMAN"><span>JUDUL MENU 4</span></a>
</li>

<li class="ITEM 5">
<a href="ULR HALAMAN"><span>JUDUL MENU 5</span></a>
</li>

<li class="ITEM 6">
<a href="ULR HALAMAN"><span>JUDUL MENU 6</span></a>
</li>

<li class="ITEM 7">
<a href="ULR HALAMAN"><span>JUDUL MENU 7</span></a>
</li>

<li class="ITEM 8">
<a href="ULR HALAMAN"><span>JUDUL MENU 8</span></a>
</li>
</ul>

Catatam : 

• Teks warna BIRU pada kode ini harus sama dengan teks warna BIRU yang ada pada kode diatas.
• Teks warna MERAH ganti dengan ULR HALAMAN anda.
• Teks warna PINK ganti dengan JUDUL MENU milik anda.

11.SIMPAN TEMPLATE.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

---

Cara buat slide show Carousel

Menambah lagi koleksi slide show, dan slide ini menggunakan efek Carousel atau berputar seperti komedi putar. selain berfungsi untuk menampilkan gambar, slide show Carousel ini juga dilengkapi description atau cuplikan informasi singkat yang menerangkan tentang gambar yang ditampilkan. Tidak hanya itu, slide show Carousel ini sangat bagus bila dipasang di web atau blog kita untuk menampilkan artikel atau berita terbaru, dengan kata lain slide show Carousel ini kita buat sebagai sarana update web atau blog kita.

LIHAT DEMO

Nah bila anda berminat memasang slide show Carousel ini, silahkan anda bisa ikuti langkah - langkah berikut :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

7. Copy kode di bawah ini dan taruh sebelum kode </head> :

<script src="https://raw.github.com/bkosborne/jQuery-Feature-Carousel/master/js/jquery-1.7.min.js"></script> <script src="https://raw.github.com/bkosborne/jQuery-Feature-Carousel/master/js/jquery.featureCarousel.js"></script> <script src="https://raw.github.com/bkosborne/jQuery-Feature-Carousel/master/js/jquery.featureCarousel.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var carousel = $("#carousel").featureCarousel({ // include options like this: // (use quotes only for string values, and no trailing comma after last option) // option: value, // option: value }); $("#but_prev").click(function () { carousel.prev(); }); $("#but_pause").click(function () { carousel.pause(); }); $("#but_start").click(function () { carousel.start(); }); $("#but_next").click(function () { carousel.next(); }); }); </script> <style type='text/css'> /******************** * FEATURE CAROUSEL * ********************/ #carousel-container { position:relative; padding:7px; background-color:#CCC; } #carousel { border:2px solid #fff; height:300px; background-color:#CCC; position:relative; font-size:12px; font-family: Arial; } #carousel .carousel-image { height:230px; width:400px; box-shadow: 6px 6px 10px #818181; -webkit-box-shadow: 6px 6px 10px #818181; -moz-box-shadow: 6px 6px 10px #818181; border:0; display:block; } #carousel .carousel-feature { position:absolute; top:-1000px; left:-1000px; border:2px solid #5d5d5d; cursor:pointer; } #carousel .carousel-feature .carousel-caption { position:absolute; bottom:0; width:100%; background-color:#000; } #carousel .carousel-feature .carousel-caption p { margin:0; padding:5px; font-weight:bold; font-size:12px; color:white; } #carousel .tracker-summation-container { position:absolute; color:white; right:50px; top:212px; padding:3px; margin:3px; background-color:#000; } #carousel .tracker-individual-container { position:absolute; color:white; right:95px; top:218px; padding:0; margin:0; } #carousel .tracker-individual-container li { list-style:none; } #carousel .tracker-individual-container .tracker-individual-blip { margin:0 3px; padding:0 3px; color:#000; text-align:center; border:1px solid #5d5d5d; background-color:#DDD; } #carousel .tracker-individual-container .tracker-individual-blip-selected { color:#FFC600; font-weight:bold; border:1px solid #fff; background-color:#000; } #carousel-left { position:absolute; bottom:33px; left:200px; cursor:pointer; } #carousel-right { position:absolute; bottom:33px; right:200px; cursor:pointer; } </style>

8. SIMPAN TEMPLATE.

Langkah selanjutnya anda tinggal menampilkan slide show ini pada halaman depan. Silahkan anda ikuti langkah - langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<div id="carousel-container">
   
<div id="carousel">

<div class="carousel-feature">
<a href="ULR ARTIKEL">
<img class="carousel-image" alt="Image Caption" src="ULR GAMBAR"></a>
<div class="carousel-caption">
<p>DESCRIPTION GAMBAR
 </p>
</div>
</div>

<div class="carousel-feature">
<a href="ULR ARTIKEL">
<img class="carousel-image" alt="Image Caption" src="ULR GAMBAR"></a>
<div class="carousel-caption">
<p>DESCRIPTION GAMBAR
</p>
</div>
</div>

<div class="carousel-feature">
<a href="ULR ARTIKEL">
<img class="carousel-image" alt="Image Caption" src="ULR GAMBAR"></a>
<div class="carousel-caption">
<p>DESCRIPTION GAMBAR
</p>
</div>
</div>

<div class="carousel-feature">
<a href="ULR ARTIKEL">
<img class="carousel-image" alt="Image Caption" src="ULR GAMBAR"></a>
<div class="carousel-caption">
<p>DESCRIPTION GAMBAR
</p>
</div>
</div>

<div class="carousel-feature">
 <a href="ULR ARTIKEL">
<img class="carousel-image" alt="Image Caption" src="ULR GAMBAR"></a>
<div class="carousel-caption">
<p>DESCRIPTION GAMBAR
</p>
</div>
</div>
</div>
   
<div id="carousel-left"><img src="https://github.com/bkosborne/jQuery-Feature-Carousel/raw/master/images/arrow-left.png" /></div>
<div id="carousel-right"><img src="https://github.com/bkosborne/jQuery-Feature-Carousel/raw/master/images/arrow-right.png" /></div>
</div>

Catatam :

• Silahkan anda ganti tulisan yang berwarna MERAH, BIRU, dan PINK dengan milik anda.

5. SIMPAN.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

---

Cara pasang tombol share Social Bookmark

Seperti yang sudah kita ketahui bahwa Tombol share Social Bookmarking sangat bermanfaat untuk menarik pengunjung sebanyak - banyaknya ke web atau blog kita. Setiap artikel yang kita publikasikan, bisa langsung di sharing kesetiap Social Bookmarking dengan menggunakan Tombol share yang kita pasang. Dengan demikian tidak menutup kemungkinan ada visitor yang tertarik dengan artikel kita, dan langsung menuju web atau blog kita untuk membaca artikel yang kita sharing.

Bila anda berminat, Berikut ada tiga contoh tombol share Social Bookmark yang bisa anda pilih sesuai selera anda. Silahkan anda bisa ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Selanjutnya copy dan sisipkan kode :

Sexy Social Bookmark :

• Copy kode dibawah ini dan paste sebelum kode </head>

<style type='text/css'> div.sexy-bookmarks { height:54px; background:url('http://3.bp.blogspot.com/_4HKUHirY_2U/SxTyvjcqvPI/AAAAAAAAAcU/lQxqcVMXpoE/sharingsexy.png') no-repeat left bottom; position:relative; width:540px; } div.sexy-bookmarks span.sexy-rightside { width:17px; height:54px; background:url('http://3.bp.blogspot.com/_4HKUHirY_2U/SxTyvjcqvPI/AAAAAAAAAcU/lQxqcVMXpoE/sharingsexy.png') no-repeat right bottom; position:absolute; right:-17px; } div.sexy-bookmarks ul.socials { margin:0 !important; padding:0 !important; position:absolute; bottom:0; left:10px; } div.sexy-bookmarks ul.socials li { display:inline-block !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:48px !important; cursor:pointer !important; padding:0 !important; } div.sexy-bookmarks ul.socials a { display:block !important; width:48px !important; height:29px !important; font-size:0 !important; color:transparent !important; } .sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover { background:url('http://1.bp.blogspot.com/_4HKUHirY_2U/SxTyqWVZBZI/AAAAAAAAAcM/FEdBsycXjkU/Sexysprite.png') no-repeat !important; } .sexy-furl { background-position:-300px top !important; } .sexy-furl:hover { background-position:-300px bottom !important; } .sexy-digg { background-position:-500px top !important; } .sexy-digg:hover { background-position:-500px bottom !important; } .sexy-reddit { background-position:-100px top !important; } .sexy-reddit:hover { background-position:-100px bottom !important; } .sexy-stumble { background-position:-50px top !important; } .sexy-stumble:hover { background-position:-50px bottom !important; } .sexy-delicious { background-position:left top !important; } .sexy-delicious:hover { background-position:left bottom !important; } .sexy-yahoo { background-position:-650px top !important; } .sexy-yahoo:hover { background-position:-650px bottom !important; } .sexy-blinklist { background-position:-600px top !important; } .sexy-blinklist:hover { background-position:-600px bottom !important; } .sexy-technorati { background-position:-700px top !important; } .sexy-technorati:hover { background-position:-700px bottom !important; } .sexy-myspace { background-position:-200px top !important; } .sexy-myspace:hover { background-position:-200px bottom !important; } .sexy-twitter { background-position:-350px top !important; } .sexy-twitter:hover { background-position:-350px bottom !important; } .sexy-facebook { background-position:-450px top !important; } .sexy-facebook:hover { background-position:-450px bottom !important; } .sexy-mixx { background-position:-250px top !important; } .sexy-mixx:hover { background-position:-250px bottom !important; } .sexy-script-style { background-position:-400px top !important; } .sexy-script-style:hover { background-position:-400px bottom !important; } .sexy-designfloat { background-position:-550px top !important; } .sexy-designfloat:hover { background-position:-550px bottom !important; } .sexy-syndicate { background-position:-150px top !important; } .sexy-syndicate:hover { background-position:-150px bottom !important; } .sexy-email { background-position:-753px top !important; } .sexy-email:hover { background-position:-753px bottom !important; } </style>

• Copy kode dibawah ini dan paste setelah kode <data:post.body/> 

<div class='sexy-bookmarks'> <ul class='socials'> <li class='sexy-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li> <li class='sexy-digg'><a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li> <li class='sexy-technorati'><a expr:href='" http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li> <li class='sexy-reddit'><a expr:href='" http://www.reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li> <li class='sexy-stumble'><a expr:href='" http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li> <li class='sexy-designfloat'><a expr:href='"http://www.designfloat.com/submit.php?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li> <li class='sexy-facebook'><a expr:href='" http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li> <li class='sexy-twitter'><a expr:href='" http://twitthis.com/twit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li> <li class='sexy-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li> <li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/ID-FEEDBURNER-ANDA' title='Subscribe to RSS'/></li> <li class='sexy-email'><a expr:href='" mailto:?subject=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li> </ul> <span class='sexy-rightside'/></div>

Catatan : Ganti Tulisan "ID-FEEDBURNER-ANDA" , dengan milik anda.

Social Bookmark Hati :

•  Copy kode dibawah ini dan paste setelah kode <data:post.body/>

<div style='clear:both; '> <div style='width:65px; float:left;'> <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='http://2.bp.blogspot.com/_4HKUHirY_2U/SyCxndGKQoI/AAAAAAAAAfM/zQE4e5oGJLI/stumble.png' style='padding:0;margin:0;border:none;'/></a> </div> <div style='width:65px; float:left;'> <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='http://3.bp.blogspot.com/_4HKUHirY_2U/SyCxR6IdwFI/AAAAAAAAAe0/P-WUkgBTawI/delicious.png' style='padding:0;margin:0;border:none;'/></a> </div> <div style='width:65px; float:left;'> <a expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='http://3.bp.blogspot.com/_4HKUHirY_2U/SyCxqwEFIuI/AAAAAAAAAfU/QRi439zo_Xc/technorati.png' style='padding:0;margin:0;border:none;'/></a> </div> <div style='width:65px; float:left;'> <a expr:href='"http://twitthis.com/twit?url=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='http://2.bp.blogspot.com/_4HKUHirY_2U/SyCxulbFRoI/AAAAAAAAAfc/CKJPLxIwP5M/twitter.png' style='padding:0;margin:0;border:none;'/></a> </div> <div style='width:65px; float:left;'> <a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='http://2.bp.blogspot.com/_4HKUHirY_2U/SyCyGNznjII/AAAAAAAAAf0/ESzv0oL2AEQ/facebook.png' style='padding:0;margin:0;border:none;'/></a> </div> <div style='width:65px; float:left;'> <a expr:href='"http://myweb2.search.yahoo.com/myresults/bookmarklet?u=" + data:post.url + "&=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Yahoo' src='http://1.bp.blogspot.com/_4HKUHirY_2U/SyCxeo18s_I/AAAAAAAAAe8/0gAb9Ya6B78/yahoo.png' style='padding:0;margin:0;border:none;'/></a> </div> <div style='width:65px; float:left;'> <a expr:href='"http://reddit.com/submit?&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Reddit' src='http://2.bp.blogspot.com/_4HKUHirY_2U/SyCx081oRKI/AAAAAAAAAfk/pTxLusQo0Gc/reddit.png' style='padding:0;margin:0;border:none;'/></a> </div> <div style='width:65px; float:left;'> <a expr:href='data:blog.homepageUrl + "feeds/posts/default"' rel='external nofollow' target='_blank'><img alt='Feed' src='http://3.bp.blogspot.com/_4HKUHirY_2U/SyCxioR-4tI/AAAAAAAAAfE/LkLtTqd6wIA/rss.png' style='padding:0;margin:0;border:none;'/></a> </div> </div>

Social Bookmark Daun :

•   Copy kode dibawah ini dan paste setelah kode <data:post.body/>

<div style='clear:both; '> <div style='width:65px; float:left;'> <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Stumble' src='http://4.bp.blogspot.com/_4HKUHirY_2U/SyEC0tRe5AI/AAAAAAAAAhc/ciTNFYbdI6c/StumbleUpon.com.png' style='padding:0;margin:0;border:none;'/></a> </div> <div style='width:65px; float:left;'> <a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Delicious' src='http://4.bp.blogspot.com/_4HKUHirY_2U/SyECZRarefI/AAAAAAAAAgU/e9uAMhzzntI/del.icio.us.png' style='padding:0;margin:0;border:none;'/></a> </div> <div style='width:65px; float:left;'> <a expr:href='"http://technorati.com/faves?add=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Technorati' src='http://3.bp.blogspot.com/_4HKUHirY_2U/SyEC3Z8WPTI/AAAAAAAAAhk/jPoVuoRZkfY/Technorati.com.png' style='padding:0;margin:0;border:none;'/></a> </div> <div style='width:65px; float:left;'> <a expr:href='"http://twitthis.com/twit?url=" + data:post.url' rel='external nofollow' target='_blank'><img alt='Twitter' src='http://2.bp.blogspot.com/_4HKUHirY_2U/SyEC5xCTZzI/AAAAAAAAAhs/mGoEuPNumYY/Twitter.com.png' style='padding:0;margin:0;border:none;'/></a> </div> <div style='width:65px; float:left;'> <a expr:href='"http://digg.com/submit?phase=2&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Digg' src='http://4.bp.blogspot.com/_4HKUHirY_2U/SyECgX6zBRI/AAAAAAAAAgk/h74cmytw61U/Digg.com.png' style='padding:0;margin:0;border:none;'/></a> </div> <div style='width:65px; float:left;'> <a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&t=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Facebook' src='http://4.bp.blogspot.com/_4HKUHirY_2U/SyECjY9DWwI/AAAAAAAAAgs/jfJ840a7a4U/Facebook.com.png' style='padding:0;margin:0;border:none;'/></a> </div> <div style='width:65px; float:left;'> <a expr:href='"http://reddit.com/submit?&url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><img alt='Reddit' src='http://1.bp.blogspot.com/_4HKUHirY_2U/SyECostHsxI/AAAAAAAAAg8/2fuBDMI8_YI/Reddit.com.png' style='padding:0;margin:0;border:none;'/></a> </div> <div style='width:65px; float:left;'> <a expr:href='data:blog.homepageUrl + "feeds/posts/default"' rel='external nofollow' target='_blank'><img alt='Feed' src='http://2.bp.blogspot.com/_4HKUHirY_2U/SyECu07nS9I/AAAAAAAAAhM/Lnd4RvAbcCc/RSS.png' style='padding:0;margin:0;border:none;'/></a> </div> </div>

7. SIMPAN TEMPLATE.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

---

Cara membuat tombol Follow me dibawah posting

Widget "followe me" atau "follow this blog" memang sudah disediakan oleh blogger, kita tinggal add gadget dan meletakkannya pada sidebar blog kita. Tapi tidak ada salahnya kita menambahkan link "followe me" atau "follow this blog" ini dibawah posting artikel kita.  Sebab link  yang berbentuk tombol ini lebih mudah terlihat oleh pengunjung setelah selesai membaca artikel. Apa lagi pengunjung tertarik dengan artikel yang dibaca, tidak menutup kemungkinan pengunjung akan langsung join dan follow blog kita melalui tombol "followe me" atau "follow this blog" yang kita pasang dibawah posting. Jadi tombol rekomendasi ini lebih berfungsi dan bermanfaat.

OK... bila anda berminat memasang tombol ini, silahkan anda bisa ikuti langkah - langkah dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :

<data:post.body/>

7. Copy kode dibawah ini dan paste dibawah kode <data:post.body/>:

<form><input onclick='followblog()' type='button' value='Follow this Blog'/></form><script type='text/javascript'>function followblog(){window.open(&quot;http://www.blogger.com/follow-blog.g?blogID=ID BLOG ANDA&quot;,&quot;_blank&quot;,&quot;toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=550, height=520&quot;);}</script>

Perhatikan seperti contoh berikut :

<form><input onclick='followblog()' type='button' value='Follow this Blog'/></form><script type='text/javascript'>function followblog(){window.open(&quot;http://www.blogger.com/follow-blog.g?blogID=4238251463278702654&quot;,&quot;_blank&quot;,&quot;toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=550, height=520&quot;);}</script>

8. SIMPAN TEMPLATE.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

---

Cara menghilangkan profil dan ULR situs komentator

Ketika pengunjung memberikan atau meninggalkan komentar pada posting artikel kita dengan menggunakan Id, maka web atau blog kita secara otomatis akan terhubung dengan web, blog atau profil milik pengunjung yang memberikan atau meninggalkan komentar tadi. Proses ini biasanya orang menyebutnya Backlink. Sangat banyak para blogger yang masih membiarkan hal ini terjadi, termasuk blog tercinta ini. Tapi banyak juga para blogger yang sudah tidak menginginkan blognya terhubung dengan web atau blog milik pengunjung yang memberikan atau meninggalkan komentarnya. Walaupun demikian kita harus selalu positive thinking, karena mereka juga memiliki alasan tersendiri sehingga tidak menginginkan proses backlink ini terjadi.

Nah... bila sobat juga ingin menghilangkan profil dan ULR situs komentator atau tidak menginginkan proses backlink terjadi, anda bisa ikuti cara dibawah ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :

<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>

7. Ganti kode diatas dengan kode dibawah ini :

<data:comment.author/>

8. SIMPAN TEMPLATE.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

---

Cara membuat fitur slide show

Banyak kegunaan fitur slide show ini, antara lain bisa kita manfaatkan untuk menampilkan produk terbaru yang kita tawarkan. Terutama untuk web atau blog yang banyak menampilkan banyak gambar, desain ataupun foto. Dilihat dari tampilanya, slide show ini sangat menarik. Jadi selain kegunaan diatas slide show ini dapat menjadikan web atau blog kita tambah lebih menarik.

LIHAT DEMO

Bila anda berminat memasang widget ini, silahkan anda ikuti langkah-langkah berikut ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

7. Copy kode di bawah ini dan taruh sebelum kode </head> :

<script type='text/javascript'> //<![CDATA[ //** Featured Content Slider script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com. //** May 2nd, 08'- Script rewritten and updated to 2.0. //** June 12th, 08'- Script updated to v 2.3, which adds the following features: //1) Changed behavior of script to actually collapse the previous content when the active one is shown, instead of just tucking it underneath the later. //2) Added setting to reveal a content either via "click" or "mouseover" of pagination links (default is former). //3) Added public function for jumping to a particular slide within a Featured Content instance using an arbitrary link, for example. //** July 11th, 08'- Script updated to v 2.4: //1) Added ability to select a particular slide when the page first loads using a URL parameter (ie: mypage.htm?myslider=4 to select 4th slide in "myslider") //2) Fixed bug where the first slide disappears when the mouse clicks or mouses over it when page first loads. var featuredcontentslider={ //3 variables below you can customize if desired: ajaxloadingmsg: '<div style="margin: 20px 0 0 20px"><img src="loading.gif" /> Fetching slider Contents. Please wait...</div>', bustajaxcache: true, //bust caching of external ajax page after 1st request? enablepersist: true, //persist to last content viewed when returning to page? settingcaches: {}, //object to cache "setting" object of each script instance jumpTo:function(fcsid, pagenumber){ //public function to go to a slide manually. this.turnpage(this.settingcaches[fcsid], pagenumber) }, ajaxconnect:function(setting){ var page_request = false if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken) try { page_request = new ActiveXObject("Msxml2.XMLHTTP") } catch (e){ try{ page_request = new ActiveXObject("Microsoft.XMLHTTP") } catch (e){} } } else if (window.XMLHttpRequest) // if Mozilla, Safari etc page_request = new XMLHttpRequest() else return false var pageurl=setting.contentsource[1] page_request.onreadystatechange=function(){ featuredcontentslider.ajaxpopulate(page_request, setting) } document.getElementById(setting.id).innerHTML=this.ajaxloadingmsg var bustcache=(!this.bustajaxcache)? "" : (pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime() page_request.open('GET', pageurl+bustcache, true) page_request.send(null) }, ajaxpopulate:function(page_request, setting){ if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){ document.getElementById(setting.id).innerHTML=page_request.responseText this.buildpaginate(setting) } }, buildcontentdivs:function(setting){ var alldivs=document.getElementById(setting.id).getElementsByTagName("div") for (var i=0; i<alldivs.length; i++){ if (this.css(alldivs[i], "contentdiv", "check")){ //check for DIVs with class "contentdiv" setting.contentdivs.push(alldivs[i]) alldivs[i].style.display="none" //collapse all content DIVs to begin with } } }, buildpaginate:function(setting){ this.buildcontentdivs(setting) var sliderdiv=document.getElementById(setting.id) var pdiv=document.getElementById("paginate-"+setting.id) var phtml="" var toc=setting.toc var nextprev=setting.nextprev if (typeof toc=="string" && toc!="markup" || typeof toc=="object"){ for (var i=1; i<=setting.contentdivs.length; i++){ phtml+='<a href="#'+i+'" class="toc">'+(typeof toc=="string"? toc.replace(/#increment/, i) : toc[i-1])+'</a> ' } phtml=(nextprev[0]!=''? '<a href="#prev" class="prev">'+nextprev[0]+'</a> ' : '') + phtml + (nextprev[1]!=''? '<a href="#next" class="next">'+nextprev[1]+'</a>' : '') pdiv.innerHTML=phtml } var pdivlinks=pdiv.getElementsByTagName("a") var toclinkscount=0 //var to keep track of actual # of toc links for (var i=0; i<pdivlinks.length; i++){ if (this.css(pdivlinks[i], "toc", "check")){ if (toclinkscount>setting.contentdivs.length-1){ //if this toc link is out of range (user defined more toc links then there are contents) pdivlinks[i].style.display="none" //hide this toc link continue } pdivlinks[i].setAttribute("rel", ++toclinkscount) //store page number inside toc link pdivlinks[i][setting.revealtype]=function(){ featuredcontentslider.turnpage(setting, this.getAttribute("rel")) return false } setting.toclinks.push(pdivlinks[i]) } else if (this.css(pdivlinks[i], "prev", "check") || this.css(pdivlinks[i], "next", "check")){ //check for links with class "prev" or "next" pdivlinks[i].onclick=function(){ featuredcontentslider.turnpage(setting, this.className) return false } } } this.turnpage(setting, setting.currentpage, true) if (setting.autorotate[0]){ //if auto rotate enabled pdiv[setting.revealtype]=function(){ featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id]) } sliderdiv["onclick"]=function(){ //stop content slider when slides themselves are clicked on featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id]) } setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50) //add time to run fade animation (roughly) to delay between rotation this.autorotate(setting) } }, urlparamselect:function(fcsid){ var result=window.location.search.match(new RegExp(fcsid+"=(\\d+)", "i")) //check for "?featuredcontentsliderid=2" in URL return (result==null)? null : parseInt(RegExp.$1) //returns null or index, where index (int) is the selected tab's index }, turnpage:function(setting, thepage, autocall){ var currentpage=setting.currentpage //current page # before change var totalpages=setting.contentdivs.length var turntopage=(/prev/i.test(thepage))? currentpage-1 : (/next/i.test(thepage))? currentpage+1 : parseInt(thepage) turntopage=(turntopage<1)? totalpages : (turntopage>totalpages)? 1 : turntopage //test for out of bound and adjust if (turntopage==setting.currentpage && typeof autocall=="undefined") //if a pagination link is clicked on repeatedly return setting.currentpage=turntopage setting.contentdivs[turntopage-1].style.zIndex=++setting.topzindex this.cleartimer(setting, window["fcsfade"+setting.id]) setting.cacheprevpage=setting.prevpage if (setting.enablefade[0]==true){ setting.curopacity=0 this.fadeup(setting) } if (setting.enablefade[0]==false){ //if fade is disabled, fire onChange event immediately (verus after fade is complete) setting.contentdivs[setting.prevpage-1].style.display="none" //collapse last content div shown (it was set to "block") setting.onChange(setting.prevpage, setting.currentpage) } setting.contentdivs[turntopage-1].style.visibility="visible" setting.contentdivs[turntopage-1].style.display="block" if (setting.prevpage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted) this.css(setting.toclinks[setting.prevpage-1], "selected", "remove") if (turntopage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted) this.css(setting.toclinks[turntopage-1], "selected", "add") setting.prevpage=turntopage if (this.enablepersist) this.setCookie("fcspersist"+setting.id, turntopage) }, setopacity:function(setting, value){ //Sets the opacity of targetobject based on the passed in value setting (0 to 1 and in between) var targetobject=setting.contentdivs[setting.currentpage-1] if (targetobject.filters && targetobject.filters[0]){ //IE syntax if (typeof targetobject.filters[0].opacity=="number") //IE6 targetobject.filters[0].opacity=value*100 else //IE 5.5 targetobject.style.filter="alpha(opacity="+value*100+")" } else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax targetobject.style.MozOpacity=value else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax targetobject.style.opacity=value setting.curopacity=value }, fadeup:function(setting){ if (setting.curopacity<1){ this.setopacity(setting, setting.curopacity+setting.enablefade[1]) window["fcsfade"+setting.id]=setTimeout(function(){featuredcontentslider.fadeup(setting)}, 50) } else{ //when fade is complete if (setting.cacheprevpage!=setting.currentpage) //if previous content isn't the same as the current shown div (happens the first time the page loads/ script is run) setting.contentdivs[setting.cacheprevpage-1].style.display="none" //collapse last content div shown (it was set to "block") setting.onChange(setting.cacheprevpage, setting.currentpage) } }, cleartimer:function(setting, timervar){ if (typeof timervar!="undefined"){ clearTimeout(timervar) clearInterval(timervar) if (setting.cacheprevpage!=setting.currentpage){ //if previous content isn't the same as the current shown div setting.contentdivs[setting.cacheprevpage-1].style.display="none" } } }, css:function(el, targetclass, action){ var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig") if (action=="check") return needle.test(el.className) else if (action=="remove") el.className=el.className.replace(needle, "") else if (action=="add") el.className+=" "+targetclass }, autorotate:function(setting){ window["fcsautorun"+setting.id]=setInterval(function(){featuredcontentslider.turnpage(setting, "next")}, setting.autorotate[1]) }, getCookie:function(Name){ var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair if (document.cookie.match(re)) //if cookie found return document.cookie.match(re)[0].split("=")[1] //return its value return null }, setCookie:function(name, value){ document.cookie = name+"="+value }, init:function(setting){ var persistedpage=this.getCookie("fcspersist"+setting.id) || 1 var urlselectedpage=this.urlparamselect(setting.id) //returns null or index from: mypage.htm?featuredcontentsliderid=index this.settingcaches[setting.id]=setting //cache "setting" object setting.contentdivs=[] setting.toclinks=[] setting.topzindex=0 setting.currentpage=urlselectedpage || ((this.enablepersist)? persistedpage : 1) setting.prevpage=setting.currentpage setting.revealtype="on"+(setting.revealtype || "click") setting.curopacity=0 setting.onChange=setting.onChange || function(){} if (setting.contentsource[0]=="inline") this.buildpaginate(setting) if (setting.contentsource[0]=="ajax") this.ajaxconnect(setting) } } //]]> </script> <style> #slider4{ border: 2px solid #181818; background: #ffffff; margin-left: 9px; } #paginate-slider4{ border-color: #181818; margin-left: 9px; margin-top: 4px; } #paginate-slider4 a img{ width: 93px; height: 60px; border: 2px solid #181818; margin-top: 5px; } #paginate-slider4 a img:hover, #paginate-slider4 a.selected img{ border: 2px solid #ffc04e; } .sliderwrapper{ position: relative; /*leave as is*/ overflow: hidden; /*leave as is*/ border: 10px solid navy; width: 500px; /*width of featured content slider*/ height: 290px; } .sliderwrapper .contentdiv{ visibility: hidden; /*leave as is*/ position: absolute; /*leave as is*/ left: 0; /*leave as is*/ top: 0; /*leave as is*/ padding: 5px; background: white; width: 500px; /*width of content DIVs within slider. Total width should equal slider's inner width */ height: 100%; filter:progid:DXImageTransform.Microsoft.alpha(opacity=100); -moz-opacity: 1; opacity: 1; } .pagination{ width: 500px; /*Width of pagination DIV. Total width should equal slider's outer width */ text-align: right; background-color: #ffffff; padding: 0px 5px; } .pagination a{ padding: 0 5px; text-decoration: none; color: #181818; background: #ffffff; } .pagination a:hover, .pagination a.selected{ color: #181818; background-color: #ffffff; } .background img{ width: 500px; height: 300px; } </style>

8. SIMPAN TEMPLATE.

Langkah selanjutnya anda tinggal menampilkan slide show ini pada halaman depan. Silahkan anda ikuti langkah - langkah berikut :

1. Klik Rancangan dan pilih Elemen Laman

2. Tambah Gadget

3. Pada jendela baru anda Anda pilih gadget HTML/JavaScript

4. Copy dan paste kode dibawah ini pada gadget tersebut :

<div style="float:left;">

<div id="slider4" class="sliderwrapper">
<div style="background: url('ULR GAMBAR BESAR') center left no-repeat" class="contentdiv"></div>
<div style="background: url('ULR GAMBAR BESAR') center left no-repeat" class="contentdiv"></div>
<div style="background: url('ULR GAMBAR BESAR') center left no-repeat" class="contentdiv"></div>
<div style="background: url('ULR GAMBAR BESAR') center left no-repeat" class="contentdiv"></div>
<div style="background: url('ULR GAMBAR BESAR') center left no-repeat" class="contentdiv"></div>
</div>

<div id="paginate-slider4">
<a href="ULR POST" class="toc"><img alt="IMAGE-1" src="ULR GAMBAR KECIL"/></a>
<a href="ULR POST" class="toc"><img alt="IMAGE-2" src="ULR GAMBAR KECIL"/></a>
<a href="ULR POST" class="toc"><img alt="IMAGE-3" src="ULR GAMBAR KECIL"/></a>
<a href="ULR POST" class="toc"><img alt="IMAGE-4" src="ULR GAMBAR KECIL"/></a>
<a href="ULR POST" class="toc"><img alt="IMAGE-5" src="ULR GAMBAR KECIL"/></a>
</div>

<script type="text/javascript">
featuredcontentslider.init({
id: "slider4", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.1], //[true/false, fadedegree]
autorotate: [true, 5000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})
</script>
</div>

Catatam :

Silahkan anda ganti tulisan yang berwarna MERAH, BIRU, dan PINK dengan milik anda.

5. SIMPAN.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

---

Antarmuka Blogger in Draft Diperbarui

Beberapa hari lalu Blogger telah mengumumkan desain antarmuka baru yang tersedia untuk semua pengguna Blogger in Draft. Bila kita sudah masuk pada akun google, kita bisa langsung kunjungi Blogger in Draft, dan kita akan menemukan antarmuka baru yang sudah dirubah, semua siap untuk eksplorasi seperti yang ada pada dasbor blogger.

Selama beberapa bulan terakhir, Blogger telah membuat perbaikan yang signifikan untuk antarmuka pengguna baru. Pertama dan terpenting, Blogger telah memasukkan umpan balik dan membuat banyak perbaikan berdasarkan umpan balik itu. Juga, Blogger telah memperbarui tampilan dan nuansa desain baru.

OK...., Silahkan kunjungi Blogger in Draft anda untuk melihat perubahan tampilan dan nuansa desain baru Blogger in Draft anda.

Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

---

Cara membuat floating bar berlangganan artikel

Bar ini berada paling bawah pada layar monitor kita dan berfungsi memberikan rekomendasi kepada pengunjung untuk berlangganan artikel terbaru yang kita posting. Bar ini menggunakan fitur float, sehingga posisinya tetap mengambang didepan halaman blog kita tanpa harus menggangu pengunjung yang sedang sibuk membaca atau melihat-lihat blog kita. Selain itu dengan memggunakan fitur float, bar ini berfungsi lebih maksimal karena pengunjung bisa melihat dengan jelas bar ini.

LIHAT DEMO

Bila anda berminat memasang widget ini, silahkan anda ikuti langkah-langkah Cara membuat floating bar berlangganan artikel berikut ini :

1. Login ke blogger dengan ID anda.

2. Klik Rancangan.

3. Dan KLik tab Edit HTML.

4. Seperti biasa alangkah baiknya setiap edit Html, Download dulu Template Lengkap (back-up Template) agar template aman, bila terjadi kesalahan.

5. Jangan lupa Klik tombol "Expand Widget Templates"

6. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

7. Copy kode di bawah ini dan taruh sebelum kode </head> :

<style type="text/css"> #mta_bar {background:#003366;border-top: 3px solid #6699ff;margin: 0;padding: 7px 0;z-index: 100;bottom:0px;right:0px;width: 100%;overflow: auto;position: fixed;} * html #mta_bar{ /*IE6 hack*/ position: absolute;width: expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px" : body.clientWidth+"px"); } #mta_bar .left { float: left; text-align: center; font-family: Arial; font-size: 13px; font-weight: bold; font-style: normal; color: #0000FF; width:92%;} #mta_bar .right {font-family: Arial, Helvetica, sans-serif; float: right; text-align: center; font-weight: normal; font-size: 10px;letter-spacing: 0; width: 30px; white-space: nowrap;} #mta_bar .right a {font-size: 10px; color: #0000FF; text-decoration: underline;} #mta_bar .right a:hover {font-size: 10px; color: #0000FF; text-decoration: none;} #left_bar a {background: url('http://1.bp.blogspot.com/_T46SliM0-PI/TAZk8W53yaI/AAAAAAAAAQM/q_GIpsrwILE/rss.png') no-repeat; text-decoration: none; color: #fff; padding:5px 0px 5px 30px;} #left_bar a:hover { text-decoration: underline; color: #fff; } </style> <script type='text/javascript'> //<![CDATA[ var mta_arr = new Array(); var mta_clear = new Array(); function mtaFloat(mta) { mta_arr[mta_arr.length] = this; var mtapointer = eval(mta_arr.length-1); this.pagetop = 0; this.cmode = (document.compatMode && document.compatMode!="BackCompat") ? document.documentElement : document.body; this.mtasrc = document.all? document.all[mta] : document.getElementById(mta); this.mtasrc.height = this.mtasrc.offsetHeight; this.mtaheight = this.cmode.clientHeight; this.mtaoffset = mtaGetOffsetY(mta_arr[mtapointer]); var mtabar = 'mta_clear['+mtapointer+'] = setInterval("mtaFloatInit(mta_arr['+mtapointer+'])",1);'; mtabar = mtabar; eval(mtabar); } function mtaGetOffsetY(mta) { var mtaTotOffset = parseInt(mta.mtasrc.offsetTop); var parentOffset = mta.mtasrc.offsetParent; while ( parentOffset != null ) { mtaTotOffset += parentOffset.offsetTop; parentOffset = parentOffset.offsetParent; } return mtaTotOffset; } function mtaFloatInit(mta) { mta.pagetop = mta.cmode.scrollTop; mta.mtasrc.style.top = mta.pagetop - mta.mtaoffset + "px"; } function closeTopAds() { document.getElementById("mta_bar").style.visibility = "hidden"; } //]]> </script>

8. Cari lagi kode di bawah ini atau yang mirip dengan kode ini :

</body>

9. Copy kode di bawah ini dan taruh sebelum kode </body> :

<div id='mta_bar'>
<div id='left_bar'><span class='left'><a href='ULR FEEDBURNER BLOG ANDA' target='_blank'>Dapatkan Langganan Artikel Terbaru Sekarang !!!</a></span></div>
<span class='right' onmouseout='self.status=&apos;&apos;' onmouseover='self.status=&apos;carabuatwebgratis.com/.com&apos;;return true;'> <img align='absmiddle' border='0' onClick='closeTopAds();return false;' src='http://3.bp.blogspot.com/_T46SliM0-PI/TAZl6OYG8_I/AAAAAAAAAQU/vbs2QE7nNks/close.png' style='cursor:hand;cursor:pointer;'/></span></div>

Catatan :

• Ganti teks berwarna merah dengan ULR FEEDBURNER BLOG ANDA
• Anda bisa ganti teks berwarna biru sesuka anda
• Bila blog anda belum ada fasilitas subscribe email, anda bisa baca artikelnya DISINI

10. SIMPAN TEMPLATE.

Selamat mencoba dan Semoga bermanfaat....
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda gunakan tombol berlangganan artikel yang ada disebelah kanan halaman ini, atau melalui tombol dibawah ini.

Baca artikel lain :

---