Cara Optimalisasi Keyword - Kata Kunci Artikel Agar Top Ten di Google

Penggunanaan dan Penempatan keyword yang tepat, tentu akan membuat artikel yang kita buat akan sangat disukai oleh Search Engine Semacam Google, dan otomatis akan membuat artikel kita menempati posisi yang baik di Search Engine. Berikut ini saya berikan beberapa Trik untuk menembak Kata Kunci yang baik.

• Pastikan Blog atau situs kita sudah terdaftar di webmaster masing-masing Search Engine. Untuk google, bisa langsung masuk ke Webmaster Google, atau untuk yahoo, bisa mendaftar ke Yahoo Site Explorer 
• Artikel sebaiknya Original Content, alias hasil karya sendiri bukan Copy Paste dari blog orang lain. Kalaupun copy paste, usahakan diedit lagi sehingga unik dan beda
• Usahakan artikel minimal berisi lebih dari 250 karakter, dengan tujuan agar Keyword yang kita masukkan lebih maksimal
• Tempatkanlah keyword Utama pada awal paragraf pertama artikel anda, cukup 2 buah saja.
• Biasanya, paragraf sesudah paragraf pertama, penulis gunakan sebagai peletakan atau penempatan keyword cadangan atau alias secondary Keyword. 
• Letakkan keyword utama kembali Pada paragraf terakhir, dengan gaya di tebalkan, dicantumkan link artikel dan sebagainya.
• Jika Artikel mengandung gambar, berikan Caption/Keterangan pada gambar. hal ini juga mendukung naiknya trafict blog kita 
• Pada akhir artikel, letakkan atau tuliskan keyword yang anda niatkan

Membuat Menu Horizontal di Blogspot dengan Mudah

Sebuah website / Blog tidak Lengkap rasanya jika tidak dilengkapi dengan Menu Horizontal. Namun masih banyak orang yang belum tau bagaimana Membuat Menu Horizontal di Blogspot. Sebenarnya, Membuat Menu Horizontal di Blogspot tidaklah sesulit yang dibayangkan. Pada tutorial kali ini saya akan mengantarkan anda untuk bisa membuat menu horizontal di blogspot. Berikut ini Adalah tampilan Menu horizontal yang akan dihasilkan setelah di modifikasi.

LIHAT DEMONYA

Lumayan Bagus bukan?

Simpel saja, Cara untuk membuat menu horizontal seperti diatas, ikuti prosedur berikut:

1. Masuk ke TataLetak 
2. Tambahkan Gadget/Widget sesuai posisi yang anda inginkan
3. Pilih HTML/Java Script
4. Copy Kan Kode berikut ini:

<style>
/*---------------------------------------------------------------------------------*/
/* CATEGORY MENU */
/*---------------------------------------------------------------------------------*/
#cat-menu { background:none; height:35px;}
/* category navigation */
.nav { background:#f5f5f5;width:100%;z-index:99; float:left; margin:5px 0 10px 0; padding:0px; list-style:none; height:35px;}
.nav a { position:relative; color:#555; display:block; z-index:100; text-decoration:none; }
.nav li { float:left; width:auto; border-right:1px solid #d9d9d9; }
.nav li a { font:bold 11px/15px Arial,serif; padding:10px 12px; text-decoration:none; text-transform:uppercase; }
.nav li a:hover{ background:#333; color:#fff; text-decoration:underline;}</style>
<div id='cat-menu'>
<ul class='sf-menu nav' id='cat-nav'>
<li><a href='http://modul-belajar-komputer.blogspot.com'>HALAMAN UTAMA</a></li>
<li><a href='http://modul-belajar-komputer.blogspot.com/2012/06/cara-pemesanan-modul-belajar-komputer.html'> Cara Pemesanan</a>
<li><a href='http://kumpulan-skripsi-lengkap.blogspot.com/' target="blank"> Referensi Skripsi</a></li>
<li><a href='http://modul-belajar-komputer.blogspot.com/search/label/tutorial'> Tutorial</a></li>                    
</li></ul></div>


Simpan dan Lihat Hasilnya.
KETERANGAN:

• Tulisan yang berwarna merah mrupakan tulisan yang akan tampil di bagian menu horizontal. Ganti Sesuai kebutuhan anda
•  Tulisan yang berwarna Hijau, merupakan alamat URL Tujuan, ketika Tulisan di Klik. Ganti sesuai kebutuhan anda

Semoga manfaat

Menghilangkan Tulisan diberdayakan Oleh Blogger

Navigator Bar  di blogspot merupakan tampilan yang muncul dibagian atas blogspot pada saat blog diakses. Sebenarnya tampilan ini merupakan tampilan yang memudahkan pengguna untuk "Log In" ke situs Blogger. Namun bagi sebgain orang, hal ini cukup mengganggu. bagi anda yang ingin menghilangkan tampilan Navigator bar dari tampilan blog anda, ikuti prosedur berikut ini

• Masuk ke Template
• Pilih Edit HTML
• Klik dibagian Kode HTML
• Tekan tombol Ctrl+F
• Ketikkan kode ini: ]]></b:skin> 
• Tekan Enter
• Jika sudah ditemukan, Copykan Kode berikut ini tepat berada diatas kode "]]></b:skin>" tadi.

          #navbar-iframe {
          height:0px;
          visibility:hidden;
          display:none
          }

• Simpan dan Lihat Hasilnya.
• Selamat Mencoba

- See more at: http://kursusgratis4u.blogspot.com/2014/01/menghilangkan-navigator-bar-di-blogspot.html#sthash.p3UhKSyA.dpuf

Tulisan diberdayakan Oleh Blogger biasanya muncul dibagian bawah blogspot pada saat blog diakses. Sebenarnya tampilan ini merupakan Atribut milik Blogger yang secara otomatis pasti ada ketika anda menggunakan template bawaan dari blogspot. Namun bagi sebgain orang, hal ini cukup mengganggu. bagi anda yang ingin Menghilangkan Tulisan diberdayakan Oleh Blogger dari tampilan blog anda, ikuti prosedur berikut ini

• Masuk ke Template
• Pilih Edit HTML
• Klik dibagian Kode HTML
• Tekan tombol Ctrl+F
• Ketikkan kode ini: ]]></b:skin> 
• Tekan Enter
• Jika sudah ditemukan, Copykan Kode berikut ini tepat berada diatas kode "]]></b:skin>" tadi.

         #Attribution1 {height:0px;
         visibility:hidden;
         display:none
         }

• Simpan dan Lihat Hasilnya.
• Selamat Mencoba

blogspot pada saat blog diakses. Sebenarnya tampilan ini merupakan tampilan yang memudahkan pengguna untuk "Log In" ke situs Blogger. Namun bagi sebgain orang, hal ini cukup mengganggu. bagi anda yang ingin menghilangkan tampilan Navigator bar dari tampilan blog anda, ikuti prosedur berikut ini

• Masu

- See more at: http://kursusgratis4u.blogspot.com/2014/01/menghilangkan-navigator-bar-di-blogspot.html#sthash.p3UhKSyA.dpuf

Navigator Bar  di blogspot merupakan tampilan yang muncul dibagian atas blogspot pada saat blog diakses. Sebenarnya tampilan ini merupakan tampilan yang memudahkan pengguna untuk "Log In" ke situs Blogger. Namun bagi sebgain orang, hal ini cukup mengganggu. bagi anda yang ingin menghilangkan tampilan Navigator bar dari tampilan blog anda, ikuti prosedur berikut ini

• Masuk ke Template
• Pilih Edit HTML
• Klik dibagian Kode HTML
• Tekan tombol Ctrl+F
• Ketikkan kode ini: ]]></b:skin> 
• Tekan Enter
• Jika sudah ditemukan, Copykan Kode berikut ini tepat berada diatas kode "]]></b:skin>" tadi.

          #navbar-iframe {
          height:0px;
          visibility:hidden;
          display:none
          }

• Simpan dan Lihat Hasilnya.
• Selamat Mencoba

- See more at: http://kursusgratis4u.blogspot.com/2014/01/menghilangkan-navigator-bar-di-blogspot.html#sthash.p3UhKSyA.dpuf

Menghilangkan Navigator bar di Blogspot

Navigator Bar  di blogspot merupakan tampilan yang muncul dibagian atas blogspot pada saat blog diakses. Sebenarnya tampilan ini merupakan tampilan yang memudahkan pengguna untuk "Log In" ke situs Blogger. Namun bagi sebgain orang, hal ini cukup mengganggu. bagi anda yang ingin menghilangkan tampilan Navigator bar dari tampilan blog anda, ikuti prosedur berikut ini

• Masuk ke Template
• Pilih Edit HTML
• Klik dibagian Kode HTML
• Tekan tombol Ctrl+F
• Ketikkan kode ini: ]]></b:skin> 
• Tekan Enter
• Jika sudah ditemukan, Copykan Kode berikut ini tepat berada diatas kode "]]></b:skin>" tadi.

          #navbar-iframe {
          height:0px;
          visibility:hidden;
          display:none
          }

• Simpan dan Lihat Hasilnya.
• Selamat Mencoba

Membuat Menu Vertikal di SideBar Blogspot

Cara Buat Menu Vertikal Keren di Blog.  Anda  pasti sudah tahu apa yang saya maksud. Pada tutorial kali ini Saya Akan berbagi tentang cara membuat menu navigasi vertikal. Kenapa saya bilang keren?? Jawabanya adalah karena saat cusor mouse diarahkan ke menu akan berubah warna secara perlahan-lahan, di bawah ini adalah screenshotnya:

Untuk Demonya : Kilik Disini
Oke Berikut caranya: 
Untuk membuatnya silahkan ikuti langkah-langkahnya :

1. Login ke akun Blogger anda

 

2. Sekarang Klik Template

3. Klik EDIT HTML

4. Sekarang Cari Kode ]]></b:skin> agar mudah dalam pencarian tekan Ctrl+f

 
5. Letakan kode di bawah tepat di atas kode ]]></b:skin>

/* Menu vertikal
-----------------------------------------------
*/
.side-nav {
margin-left:0;
display: block;
}
.side-nav a {
display: block;
margin: 0 0 4px;
padding: 6px 20px 9px;
color: #fff;
font-size: 17px;
-webkit-transition: color, background-color 0.3s linear;
-moz-transition: color, background-color 0.3s linear;
-o-transition: color, background-color 0.3s linear;
transition: color, background-color 0.3s linear;
}
.side-nav a:hover {
background-color: #222;
text-decoration:none;
}
.side-nav a:hover {
color: #fff;
}
/* Warna Menu
-----------------------------------------------
*/
.pale1 { background-color: #01a279}
.pale2 { background-color: #789CB6; }
.pale3 { background-color: #48CF89; }
.pale4 { background-color: #FAB36B; }
.pale5 { background-color: #48CFB6; }
.pale6 { background-color: #F47B55; }
.pale7 { background-color: #5E839D; }
.pale8 { background-color: #3F6682; }

Catatan:
Anda Boleh Ganti tulisan Berwarna Merah dengan yang anda inginkan(fungsinya untuk Warna Background Menu)

7. Sekarang kita menuju ke layout

 

8. Klik Tambahkan Gadget dan pilih 'HTML/Javascript

9. Letakan script html di bawah ini di kolom yang disediakan. (Ingat, untuk kolom judul gadget tidak perlu diisi)

<div class='clear'/>
<div class='widget-content'>
<div class='side-nav'>
  <a class='pale3' href='#'>Menu 1</a>
  <a class='pale4' href='#'>Menu 2</a>
  <a class='pale1' href='#'>Menu 3</a>
  <a class='pale2' href='#'>Menu 4</a>
  <a class='pale5' href='#'>Menu 5</a>
  <a class='pale6' href='#'>Menu 6</a>
</div></div></div>

10. Klik Simpan

catatan: 
ganti tanda # dengan alamat URL
ganti tulisan menu 1-6 dengan nama menu yang anda inginkan,
oke mungkin cukup sekian, Semoga Bermanfaat..!

Cara Membuat Widget Recent Post Animasi Bergambar

Recent Post Animasi Bergambar adalah widget yang dibuat dengan tujuan memperlihatkan postingan terakhir di suatu blog atau website, apabila sebuah artikel yang di posting memuat suatu gambar maka widget ini pun akan menunjukan gambar yang telah di muat artikel tersebut dengan ukuran yg kecil tentunya, tidak sama dengan ukuran gambar aslinya di dalam posting. Dengan adanya Recent Post membuat tampilan blog kita menjadi menarik dan membuat pengunjung ingin melihat artikel postingan kita yang lainnya. sebagai referensi agan bisa lihat di sidebar blog milik saya ini. Kelebihan dari recent post ini selain dapat bergerak atau animasi yaitu, dilengkapi dengan gambar, judul post dan cuplikan isi post. Untuk Membuat Recent Post Animasi Bergambar Agan bisa melihat caranya dibawah.

 Silahkan Ikuti Langkah-langkah berikut :
1. Silahkan login akun Blog Anda
2. Pilih menu Rancangan dan Pilih Elemen Laman
3. Setelah itu pilih Tambah Gadget
4. Kemudian Tambahkan HTML/JavaScript
5. Dan Copy dan kode di bawah ini :
=========================================================================
<div style="margin-bottom: 15px;">
<style type="text/css">
#rp_plus_img{height:287px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#3366ff;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://wisnunugraha.googlecode.com/files/Slide%20Down%20Recent%20Post.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 10;
var numchars = 60;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul></div> 

========================================================================

6. Setelah dicopy silahkan klik simpan dan lihat hasilnya.

Keterangan :
width:60px;height:65px diatas adalah ukuran untuk gambar di Recent Post.
var speed = 400; var pause = 3500; diatas adalah kecepatan Slide gambar Recent Post
var numposts = 10; var numchars = 60; diatas adalah 10 Jumlah posting yang akan di tampilkan di Recent Post dan 60 adalah Huruf atau deskripsi postingan yang ditampilkan di Recent Post.

Anda bisa merubah parameter lainnya, seperti besarnya font, warna font, background, lebar dan tinggi kolom atau lainnya sesuai dengan bentuk atau format blog Anda.

Cara Menambah Widget Artikel Terbaru berdasarkan Label

Pada kesempatan ini kita akan membahas cara membuat widget artikel terbaru berdasarkan label.

Bagi Anda yang ingin memasang widget tersebut pada blog, silahkan simak dan ikuti langkah-langkahnya berikut ini :

1. Login akun blogger Anda.
2. Pilih Tata Letak ---> Tambah Gadget ---> HTML/JavaScript.
3. Copy kode berikut ini pada HTML/JavaScript. 

<script style="text/javascript">
var numposts = 9;
var standardstyling = true;
</script>
<script type='text/javascript'>function showrecentposts(json) {
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}}
posttitle = posttitle.link(posturl);
if (standardstyling) document.write('<li>');
document.write(posttitle);}
if (standardstyling) document.write('</li>');}</script>
<script src="http://NAMABLOG.blogspot.com/feeds/posts/default/-/NAMALABEL?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=500"></script>

Keterangan:
NAMABLOG : Ganti dengan URL blog Anda.
NAMALABEL : Ganti dengan nama label yang akan ditampilkan.
var numposts = 9 : Jumlah posting yang akan ditampilkan pada widget.
 
4. Kemudian klik 'Simpan'.

Nah, sekarang Anda sudah bisa memasang widget label sesuka hati pada blog, semoga bermanfaat.

Membuat Banner Animasi di Blogspot

Terkadang banner animasi lebih menarik dibandingkan dengan banner yang hanya diam. Bagi anda yang menguasai berbagai software design graphic saya rasa tidak jadi masalah dalam hal ini, tapi berbeda dengan pemula seperti saya.

Namun jangan khawatir, kita masih bisa membuat animasi banner menggunakan beberapa layanan online, seperti : picasion.com, loogix.com, gickr.com, dll.

Berikut akan saya berikan contoh pembuatan banner menggunakan picasion.com

1. Sebelumnya kita harus membuat 2 atau lebih banner dulu
   
   
   
2. Silahkan kunjungi website picasion.com 
3. Klik Browser untuk memasukkan file banner 
   
4. Pilih ukuran banner pada Size dan kecepatan animasi pada Speed 
5. Kalau sudah klik Create animation dan lihat hasilnya 
   
   
   
6. Kita dapat menyimpan banner dan mengambil link bannernya dengan cara meng-copy link di bagian Direct link.

Misalnya:
http://i.picasion.com/pic70/ba00a996f6af8647844e2e3f4e13c2a7.gif

Untuk menempatkannya kedalam blog, ikuti langkah berikut: 
1. Silakan anda pergi ke halaman layout/Tataletak.
2. Pilih Widget HTML/Java Script
3. Masukkan Kode Berikut ini

<center>
<a href="http://servislaptopyogya.blogspot.com/" target='blank'><img src="http://i.picasion.com/pic70/ba00a996f6af8647844e2e3f4e13c2a7.gif" width="170" height="200" border="0" /></a>
</center>

Simpan dan Lihat Hasilnya.

Keterangan:
Warna Hijau: Isi dengan Link Tujuan
Warna Merah :Isikan sesuai dengan ukuran banner yang anda harapkan
Warna orange: Isi dengan Kode Link Gambar Animasi anda

Membuat Link agar terbuka di Halaman Baru (New Tab)

Jika kamu seorang blogger pasti akan merasa khawatir bila pengunjung blog atau websitenya begitu cepat pergi dikarenakan membuka link keluar pada halaman yang sama atau halaman terbuka tidak pada halaman baru dan akhirnya pergi begitu saja, sebagai seorang blogger hal ini jangan sampai terjadi, nah untuk mengatasinya caranya dibawah ini agar Link-link yang kita pasang bisa keluar pada halaman baru.
Dengan menambahkan tag target='new' atau target='blank' pada link yang kita tautkan, maka saat link tersebut di klik, maka link rujukan tadi akan terbuka pada new tab atau halaman baru pada browser kita. Artinya blog kita tetap dapat di lihat, dan link rujukan kita dapat kita lihat juga.

Sebagai contoh langsung silahkan klik link dibawah ini!
- Link terbuka pada halaman yang sama Klik disini
- Link terbuka pada halaman yang baru Klik disini

Maka untuk membuat link yang bisa terbuka pada halaman yang baru dibawah ini :

<a href="http://kursusgratis4u.blogspot.com" target='blank'>Kursus Gratis</a>

Maka yang nampak adalah Kursus Gratis
Perhatikan baik baik letak tag tambahan yang dicetak merah yaitu target='blank'

Cara Membuat Artile Terkait dengan Tumbnail Gambar di Blogspot

pada kesempatan kali ini, saya akan membahas tentang blog, soalnya saya baru sedikit bikin posting tentang blogging, yasudah saya tambah lagi deh tips blognya, oke langsung saja ke tutorialnya.
Cara Membuat Artikel Terkait dengan Gambar di Blog
Cara Membuat Artikel Terkait dengan Gambar di Blog

    1. Masuk Ke Blogger
    2. Pergi ke Template → Edit HTML
    3. Cari kode </head>
    4. Kemudian copy code dibawah ini tepat diatas kode </head>

    <!--Start Related Posts-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
    #related-posts {
    float:center;
    text-transform:none;
    height:90%;
    min-height:90%;
    padding-top:0px;
    padding-left:8px;
    }
    #related-posts h2{
    font-size: 1.0em;
    font-weight: bold;
    color: white;
    font-family: Rockwell,Georgia,Serif;
    margin-bottom: 0.8em;
    margin-top:0em;
    padding-bottom:0em;
    }
    #related-posts a{
    color:white;
    }
    #related-posts a:hover{
    color:white;
    }
    #related-posts a:hover {
    background-color:#080;
    }
    </style>
    <script type='text/javascript'>
    var defaultnoimage=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3dzFSVaBv16tTiuuxuChQUJWzKg2kxdBh8wlevfDENnJCTni8LQG60dDS2qHEbFS7_kvcHzU_sL6mmHuTU5LIfHnex1tSAPKDgZ4NMNcfDwXSeN2M7ghIdurGUcBR_pV8bm1qNLn41cj8/s1600/No+Image.jpg&quot;;
    var maxresults=6;
    var splittercolor=&quot;#000000&quot;;
    var relatedpoststitle=&quot;Silahkan Baca Ini Juga:&quot;;
    </script>
    <script src='http://yourjavascript.com/22811210832/RelatedPoststhumb3.txt.js' type='text/javascript'/>
    </b:if>
    <!--End Related Post-->

    5. Kemudian cari kembali kode <data:post.body/>
    6. Bila sudah ditemukan, copy kode dibawah ini tepat dibawah kode <data:post.body/>

    <!-- Start Related Posts-->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div id='related-posts'>
    <b:loop values='data:post.labels' var='label'>
    <b:if cond='data:label.isLast != &quot;true&quot;'>
    </b:if>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=7&quot;' type='text/javascript'/></b:loop>
    <script type='text/javascript'>
    removeRelatedDuplicates_thumbs();
    printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
    </script>
    </div><div style='clear:both'/>
    </b:if>
    <!-- End Related Posts-->

     7. Simpan template, dan lihat hasilnya


Catatan : Berikut adalah kode yang anda bisa ganti sesuai keinginan anda

    Menampilkan jumlah artikel terkait yang muncul max-results=7
    Judul artikel terkait var relatedpoststitle=&quot;Silahkan Baca Ini Juga:&quot;;
    Warna Tulisan var splittercolor=&quot;#000000&quot;;

Membuat Menu Horizontal Keren di Blogspot

Langkah-langkah  Cara Membuat Menu Horizontal Keren di Blog :

1. Log in ke akun Blog Sobat
2. Kemudian anda klik tata letak -> Tambah gadget/widget -> Pilih HTML/JavaScript
3. Copy kode dibawah ini dan paste pada kotak HTML/JavaScript dan letakkan diatas header (atur di tataletak Bloger):

<style type="text/css">
/* Menu horizontal untuk Blogger http://kursusgratis4u.blogspot.com/ */
div.topbar {
height: 16px;
background: #e16031;
}
ul.claybricks {
font-weight: bold;
width: 100%;
background: #e3e490;
padding: 6px 0 6px 0;
margin: 0;
text-align: left;
font-family: calibri;
}
ul.claybricks li {
display: inline;
}
ul.claybricks li a {
color: black;
padding: 6px 8px 4px 8px;
margin-right: 20px;
text-decoration: none;
}
ul.claybricks li a:hover, ul.claybricks li a.selected {
color: white;
background: #5d4137;
background: -moz-linear-gradient(top, #5d4137 0%, #41251b 12%, #2c0f05 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#5d4137), color-stop(12%,#41251b), color-stop(100%,#2c0f05));
background: -webkit-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: -o-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: -ms-linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
background: linear-gradient(top, #5d4137 0%,#41251b 12%,#2c0f05 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d4137', endColorstr='#2c0f05',GradientType=0 );
-moz-box-shadow: 0 0 5px #595959;
-webkit-box-shadow: 0 0 5px #595959;
box-shadow: 0 0 5px #595959;
padding-top: 17px;
padding-bottom: 6px;
}
/* http://softwaremaniapc.blogspot.com/ */
</style>
<div class="topbar">
</div>
<ul class="claybricks">
<li><a href="#">Home</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Privacy</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Disclaimer</a></li>
<li><a href="#">tgkboy</a></li>
</ul>

Keterangan :

# :  silahkan anda ganti dengan URL yang diinginkan.

4. Jangan lupa save
5. Lihat tampilan menu horizontal anda.

6. Semoga bermanfaat

7. Jangan lupa tinggalkan pesan.

Membuat Slider Carousel Otomatis di Blog

Tips kali ini saya akan sharing tentang Cara Membuat Slider Carousel Otomatis pada blog,  Slider Carousel disini adalah sebuah widget yang menampilkan dari keseluruhan postingan dan juga bisa untuk menampilkan berdasarkan kategori atau label posting yang ada pada web/blog. Nah, untuk anda yang ingin menambahkan widget ini pada blog maka blog anda akan lebih kelihatan profesional. Ikuti caranya di bawah ini, tapi sebelumnya anda bisa lihat demonya disini
Cara Membuat Slider Carousel Otomatis ini sebenarnya cukup mudah, anda hanya memsukan code pada template dan ganti nama label yang akan ditampilkan didalam Slide Carouser tersebut. Oke langsung saja perhatikan cara membuatnya di bawah ini

1. Seperti biasa masuk ke blog anda

2. Selanjutnya pilih Template

3. Untuk menghindari terjadinya kesalahan, Download full terlebih dahulu template anda

4. Kemudian pilih EDIT HTML

5. Cari code ]]></b:skin> (gunakan CTRL+F atau F3 untuk pencarian lebih cepat)

6. Letakkan code di bawah ini, tepat diatas code ]]></b:skin>

#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjTmte2PtBinDldpvLmnctlVH125SPbGI_AyUuNLLoox571SXkgxe_tmZHVh3oZ-7bD72Z9If6KNqMq31ZbxYGm3AS1xPIyKcP_44oYFoyg2-eGiGCTjS0djh_5iNovkQqWuglbKJTkAA/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFy_EbKfbX_uFnF8hErGe7aRaPY5zW4nfoS1xWS6yfziS-qFpERfd7FbR7hJTMP0s3kf9HVJMsFZHJ8JcHz7NZWqyfpBBZoFhmbQAJocdzR5d5nowJD20Hh7GE9eIjrCJaslKyM-2QfVI/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5xzhBy9PTWCXXRi38ADWo7kCANySGSeJVSE1qTc_n4tefindFpNiMFbcP0PXriRtsR1QXsIUBZpK0hlejQ6lNTkoamAqO2mfM-hubI_k8bDAdSQreI8wG7IAYHP1K3hVN4t2hXpk4YU4/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjhmOsRb8Fz9rdPxiAvscnZ2CQJz8kIdiXumO7AP3CMIOdtBF0gD7dkZ-yFJARbDpKgkalvFVJ35i-S7fnY-7ttxfcA4-MOHRR7SdJ6yUdht08eaC9OxYzSK1MQzrsXn6LKACc3orD7u4/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVLTJvpt1D65Hew0LKSczf-BamVs4_3_M3XJcy0GIHtDbbRNfR130k39Mm5fbBdFHEhzTZPOaUf8Yqf07FhgCnMrQdLNLpTnrM6kvofYOuQbpFzlyK2vpuuRKN0aIrQs1wQBPsR2_kmv4/s1600/next.png) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgELD14_jsjRuOaQK3kggCYcBDm1dY73lMhn5M01OWAFQe7V5p0OMG_QDIg_l805mjBeT6Ge7Yt3saTq_oC2Ah6IF-WDMdtz2VFhmW30sZEBdhq8vLALXT_R5lcqSzGDUaTsFrj8v4V-N4/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#cd1713}
#carousel a img{display:block;background:#fff;margin-top:0}

Keterangan:
Untuk code yang berwarna merah adalah tinggi dan lebar pada slider ini, jadi sesuaikan dengan template yang anda gunakan.

7. Langkah selanjutnya cari code </head> dan letakkan code di bawah ini, tepat diatas code </head>

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

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

aBold = true;

summaryPost = 140;
summaryTitle = 25;

numposts1 = 10;
label1 = "Sport";

function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}

s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
for (var i = 0; i < numposts1; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}

if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}

var daystr = day+ ' ' + m + ' ' + y ;
var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>

Keterangan :
Perhatikan code diatas yang berawarna merah, itu adalah kode script jQuery.min.js jika pada template sudah terdapat kode tersebut tidak perlu anda masukan lagi code script jQuery.min.js tersebut. Dan untuk code berwarna biru 10 adalah jumlah yang di tampilkan pada Slider sedangkan Sport adalah label yang akan ditampilkan pada Slider jadi bisa anda ganti sesuai selerah anda (besar kecil huruf harus disesuaikan).

8. Selanjutnya untuk memunculkan Slider, cari code <div id='main-wrapper'> dan letakkan code di bawah ini tepat diatas code <div id='main-wrapper'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script> 
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) {     $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
    auto:4000,
    scroll: 1,
    speed: 800, 
    visible: 5,
    start: 0,
    circular: true,
    btnPrev: &quot;#previous_button&quot;,
    btnNext: &quot;#next_button&quot;
    });
    })})(jQuery) 
</script>
</b:if>

Catatan :
Code di atas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga  diatas footer

9. Terakhir Save, dan lihat hasilnya

Cara Membuat Tulisan Berjalan di Blog dengan Marquee

Salah satu bentuk modifikasi tulisan di blog adalah dengan membuat efek teks yang bisa bergerak. Bisa dari kanan ke kiri, atau dari atas ke bawah dan sebaliknya. Teks efek ini disebut marquee, untuk lebih jelasnya pengertian dari Marquee adalah bahasa HTML untuk memberikan efek sebuah kata atau kalimat menjadi berjalan atau bergerak. Marquee ini mempunyai daya tarik tersendiri karena animasi berjalan/bergeraknya tersebut, selain itu penggunaan marquee ini bisa menghemat tempat pada blog anda.

Cara membuat tulisan berjalan di blog, cara membuat teks berjalan di blog atau cara membuat tulisan dan teks berjalan pada blog atau cara membuat tulisan berjalan mondar-mandir di blog.

Apapun Judulnya, Akhirnya ke Marquee Juga

1. Cara membuat Tulisan Berjalan di Blog dengan mencantumkan Link. (tulisan berjalan dan mempunyai link)

Ini Kodenya :

<div style="background: #FFFFFF; border: 2px solid #ADFF2F; color: black; font-size: 15px; font-weight: bold; letter-spacing: 0.2em; padding: 15px;">
<marquee direction="left" scrollamount="6" align="center"><a href="http://kursusgratis4u.blogspot.com/2013/05/kode-marquee-html.html"/>Cara membuat Tulisan Berjalan di Blog</a></marquee>
</div>

Kode perintah diatas hasilnya sepeti ini:

Cara membuat Tulisan Berjalan di Blog

Keterangan :
URL yang berwarna merah silahkan diganti dengan URL yang anda inginkan.
background: #FFFFFF : kode tersebut adalah untuk merubah baground
solid #ADFF2F            : untuk merubah warna garis
size: 15px                    ; merubah ukuran tulisan atau font.

2. Cara membuat Tulisan Berjalan di Blog dengan baground

Ini Kodenya :

<div style="background: #000000; border: 2px solid #ADFF2F; color: blue; font-size: 15px; font-weight: bold; letter-spacing: 0.5em; padding: 15px;">
<marquee direction="left" scrollamount="6" align="center">Cara membuat Tulisan Berjalan di Blog</marquee>
</div>

 Maka hasilnya dibawah ini :

Cara membuat Tulisan Berjalan di Blog

Keterangan :
tulisan yang berwarna merah silahkan sobat ganti sesuai dengan keinginan anda.

Atau dengan kode ini :

<div style="background: #000000; border: 2px solid #FF0000; color: white; font-size: 15px; font-weight: bold; letter-spacing: 0.5em; padding: 15px;">
<marquee direction="left" scrollamount="6" align="center">Cara membuat Tulisan Berjalan di Blog</marquee>
</div>

Hasilnya :

Cara membuat Tulisan Berjalan di Blog

Keterangan :
Tulisan yang berwarna merah silahkan sobat ganti sesuai dengan keinginan anda.


3. Cara membuat tulisan berjalan di blog menggunakan warna
 <font color="blue"><marquee>Selamat Datang RJ-COMP JOGJA</marquee></font>

Hasilnya :Selamat Datang RJ-COMP JOGJA


Keterangan :

Tulisan yang berwarna biru silahkan sobat ganti sesuai dengan keinginan sobat untuk mengganti warna tulisan.
Tulisan yang berwarna merah silahkan sobat ganti sesuai dengan keinginan Tulisan atau teks anda. 


4. Cara membuat Tulisan Berjalan di Blog dari bawah ke atas

Kode :

<marquee direction="up" scrollamount="3" align="center"> Cara membuat Tulisan Berjalan di Blog </marquee>

Hasinya : Cara membuat Tulisan Berjalan di Blog  Cara membuat Tulisan Berjalan di Blog


5. Cara membuat Tulisan Berjalan di Blog dari atas ke bawah

Kode:

<marquee direction="down" scrollamount="3" align="center"> Contoh Tulisan Berjalan </marquee>

Hasinya : Contoh Tulisan Berjalan

Kode:

<marquee direction="right" scrollamount="3" align="center" behavior="alternate"> Cara membuat Tulisan Berjalan di Blog </marquee>

Hasilnya: Cara membuat Tulisan Berjalan di Blog

7. Cara membuat Tulisan Berjalan di Blog ( mondar - mandir ) dari kiri ke kanan

Kode:

<marquee direction="left" scrollamount="3" align="center" behavior="alternate"> Cara membuat Tulisan Berjalan di Blog </marquee>

Hasilnya:
  Cara membuat Tulisan Berjalan di Blog

8. Cara membuat Tulisan Berjalan di Blog dari kiri ke kanan

Kode :

<marquee direction="right" scrollamount="3" align="center"> Cara membuat Tulisan Berjalan di Blog </marquee>

Hasilnya:
Cara membuat Tulisan Berjalan di Blog
9. Cara membuat Tulisan Berjalan di Blog dari kanan ke kiri

Kode :

<marquee direction="left" scrollamount="3" align="center">Cara membuat Tulisan Berjalan di Blog</marquee>

Haasilnya:

Cara membuat Tulisan Berjalan di Blog

Membuat Slider Carousel Otomatis berdasarkan Kategori

Tutorial kali ini saya akan membahas bagaimana membuat slider Carousel otomatis berdasarkan label.  Anda tinggal mengganti dengan label anda dan slider ini akan bekerja sesuai dengan label yang anda masukkan. Slider Carousel yang saya buat kali ini sangat sederhana dan hanya menggunakan jCarousellite script tanpa menambahkan efek easing dan mousewheel.

DEMO

Cara pemasangannyapun sangat mudah, jika anda sudah pernah mempraktekkan artikel saya terdahulu yang berjudul membuat slider otomatis berdasarkan kategori tertentu, tutorial kali ini terasa sangat mudah, karena langkah-langkah pembuatannya hampir sama. Langsung saja di bawah ini langkah-langkah untuk membuatnya :

1. Login ke blogger dengan akun Anda
2. Setelah itu pilih blog yang ingin anda tambahkan slider ini.
3. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
4. Untuk berjaga-jaga agar tidak terjadi kesalahan dalam pengeditan nantinya, backup dulu template anda.
5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
   
   #carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
   #carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjTmte2PtBinDldpvLmnctlVH125SPbGI_AyUuNLLoox571SXkgxe_tmZHVh3oZ-7bD72Z9If6KNqMq31ZbxYGm3AS1xPIyKcP_44oYFoyg2-eGiGCTjS0djh_5iNovkQqWuglbKJTkAA/s1600/scroller-bg.png) repeat center}
   #carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFy_EbKfbX_uFnF8hErGe7aRaPY5zW4nfoS1xWS6yfziS-qFpERfd7FbR7hJTMP0s3kf9HVJMsFZHJ8JcHz7NZWqyfpBBZoFhmbQAJocdzR5d5nowJD20Hh7GE9eIjrCJaslKyM-2QfVI/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
   #carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5xzhBy9PTWCXXRi38ADWo7kCANySGSeJVSE1qTc_n4tefindFpNiMFbcP0PXriRtsR1QXsIUBZpK0hlejQ6lNTkoamAqO2mfM-hubI_k8bDAdSQreI8wG7IAYHP1K3hVN4t2hXpk4YU4/s1600/prev.png) center}
   #carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjhmOsRb8Fz9rdPxiAvscnZ2CQJz8kIdiXumO7AP3CMIOdtBF0gD7dkZ-yFJARbDpKgkalvFVJ35i-S7fnY-7ttxfcA4-MOHRR7SdJ6yUdht08eaC9OxYzSK1MQzrsXn6LKACc3orD7u4/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
   #carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVLTJvpt1D65Hew0LKSczf-BamVs4_3_M3XJcy0GIHtDbbRNfR130k39Mm5fbBdFHEhzTZPOaUf8Yqf07FhgCnMrQdLNLpTnrM6kvofYOuQbpFzlyK2vpuuRKN0aIrQs1wQBPsR2_kmv4/s1600/next.png) center}
   #carousel ul{width:100000px;position:relative;margin-top:10px}
   #carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgELD14_jsjRuOaQK3kggCYcBDm1dY73lMhn5M01OWAFQe7V5p0OMG_QDIg_l805mjBeT6Ge7Yt3saTq_oC2Ah6IF-WDMdtz2VFhmW30sZEBdhq8vLALXT_R5lcqSzGDUaTsFrj8v4V-N4/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
   #carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
   #carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
   #carousel ul li a.slider_title:hover{color:#cd1713}
   #carousel a img{display:block;background:#fff;margin-top:0}
   Perhatikan kode warna biru diatas, itu adalah lebar dan tinggi slider pada demo yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.
6. Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode </head> :
   
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
   <script src='http://yourjavascript.com/265232511102/carousellite.js' type='text/javascript'/>
   
   <script type='text/javascript'>
   //<![CDATA[
   imgr = new Array();
   imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdyR5-2si6yTpyxKdjvbMbSaX1kvY_w3XwTRsVvQOFoBBuB1H2isoMAcL-CZf4Mbs8dz86Qgd8SmaJku0q8UTqurQOExOdnIunxPRNlT9wcbfZwhIGo7Y9trl-XaOYbN6ENM2se5QoG0s/s1600/no+image.jpg";
   showRandomImg = true;
   
   aBold = true;
   
   summaryPost = 140;
   summaryTitle = 25;
   
   numposts1 = 15;
   label1 = "news";
   
   function removeHtmlTag(strx,chop){
   var s = strx.split("<");
   for(var i=0;i<s.length;i++){
   if(s[i].indexOf(">")!=-1){
   s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
   }
   }
   
   s = s.join("");
   s = s.substring(0,chop-1);
   return s;
   }
   function showrecentposts(json) {
   j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
   img = new Array();
   document.write('<ul>');
   for (var i = 0; i < numposts1; i++) {
   var entry = json.feed.entry[i];
   var posttitle = entry.title.$t;
   var pcm;
   var posturl;
   if (i == json.feed.entry.length) break;
   for (var k = 0; k < entry.link.length; k++) {
   if (entry.link[k].rel == 'alternate') {
   posturl = entry.link[k].href;
   break;
   }
   }
   
   for (var k = 0; k < entry.link.length; k++) {
   if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
   pcm = entry.link[k].title.split(" ")[0];
   break;
   }
   }
   
   if ("content" in entry) {
   var postcontent = entry.content.$t;}
   else
   if ("summary" in entry) {
   var postcontent = entry.summary.$t;}
   else var postcontent = "";
   postdate = entry.published.$t;
   if(j>imgr.length-1) j=0;
   img[i] = imgr[j];
   s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
   if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
   //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
   var month = [1,2,3,4,5,6,7,8,9,10,11,12];
   var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
   var day = postdate.split("-")[2].substring(0,2);
   var m = postdate.split("-")[1];
   var y = postdate.split("-")[0];
   for(var u2=0;u2<month.length;u2++){
   if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
   }
   }
   
   var daystr = day+ ' ' + m + ' ' + y ;
   var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

   
   document.write(trtd);
   j++;
   }
   document.write('</ul>');
   }
   //]]>
   </script>
   Keterangan :
   
   Perhatikan URL script warna merah diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna merah diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
   Sedangkan kode warna biru : 15 adalah jumlah slider yang ditampilkan. Dan news adalah label yang ditampilkan pada slider nantinya (Ingat besar kecil huruf harus sama dengan label yang sudah Anda buat).
7. Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode <div id='main-wrapper'>, kemudian letakkan kode berikut ini diatasnya :
   <b:if cond='data:blog.pageType != &quot;item&quot;'>
   <div id='carousel'>
   <div id='previous_button'/>
   <div class='container'>
   <script>
   

   document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);

   </script>   
   <div class='clear'/>
   </div>
   <div id='next_button'/>
   </div>
   <script type='text/javascript'>
   (function($) {     $(document).ready(function(){
   $(&quot;#carousel .container&quot;).jCarouselLite({
       auto:4000,
       scroll: 1,
       speed: 800,   
       visible: 5,
       start: 0,
       circular: true,
       btnPrev: &quot;#previous_button&quot;,
       btnNext: &quot;#next_button&quot;
       });
       })})(jQuery)   
   </script>
   </b:if>
   Kode diatas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan diatas footer. 
8. Langkah terakhir, save templates dan lihat hasilnya. Jika Anda ikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.