cara merubah posisi sidebar dan main

InsyaAllah kali ini saya ingin berbagi trik mudah bahkan sangat sederhana, yang saya temukan hasil dari otak-atik CSS saat mencoba mendesain template baru. Yaitu cara merubah posisi sidebar dan main (kolom utama tempat postingan) pada template blogger, sebagai contoh tampilan elemen halaman template default minima seperti image berikut:

Dari gambar diatas kita bisa melihat posisi sidebar berada disebelah kanan, sedangkan kolom utama disebelah kiri. Untuk merubah posisi sidebar dan main menjadi sebaliknya seperti gambar dibawah ini, mudah saja silahkan ikuti tutorial berikut:

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Cari kode berikut:

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }
#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

3. Yang perlu diperhatikan hanya tulisan yang berwarna merah, silahkan ganti dengan kode berikut:

#main-wrapper {
  width: 410px;
  float: right;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }
#sidebar-wrapper {
  width: 220px;
  float: left;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

4. Simpan template. Silahkan lihat hasilnya pada bagian elemen halaman.

menambahkan 4 kolom tambah gadget diatas footer

Untuk menepati janji saya pada postingan sebelumnya dengan tema merubah posisi sidebar dan main pada template blogger, saya insyaAllah akan mengetengahkan tutorial menambahkan halaman baru diatas footer.
Sebelumnya saya sudah pernah membahas tutorial serupa tapi tak sama, karena elemen yang ditambahkan pada postingan terdahulu hanya tiga kolom, sekarang kita akan belajar bagaimana menambahkan 4 kolom tambah gadget diatas footer seperti gambar berikut:

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan kode CSS berikut setelah tag atau kode  ]]></b:skin>

/* --- LOWER --- */
/* --- CSS modified by: Amatullah. Sy --- */
#lower {
     border-top:10px solid #F781F3;
     margin:0 0 10px 0;
     -moz-border-radius-bottomleft:10px;
     -moz-border-radius-bottomright:10px;
}
#lower-wrapper {
     margin:auto;
     padding: 0px 0px 20px 0px;
     width: 960px;
     background: #FBEFF5;
     -moz-border-radius-bottomleft:10px;
     -moz-border-radius-bottomright:10px;
     -webkit-border-bottom-left-radius:10px;
     -webkit-border-bottom-right-radius:10px;
}
#lowerbar-wrapper {
     float: left;
     margin: 0px 0px 0px 0px;
     padding: 10px 0px 0px 0px;
     width: 25%;
     text-align: justify;
     font-size:100%;
     color:#333;
     line-height: 1.6em;
     word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
     overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.lowerbar {
     margin: 0;
     padding: 0;
}
.lowerbar .widget {
     margin: 0;
     padding: 10px 20px 0px 20px;
}
.lowerbar h2 {
     background:#F781F3;
     -moz-border-radius-bottomleft:6px;
     -moz-border-radius-bottomright:6px;
     -webkit-border-bottom-left-radius:6px;
     -webkit-border-bottom-right-radius:6px;
     margin: -10px 0px 10px 0px;
     padding: 3px 0px 3px 0px;
     text-align: center;
     color:#fff;
     font-size:16px;
     font-weight:bold;
     text-transform:lowercase;
}
.lowerbar ul {
     margin: 0px 0px 0px 0px;
     padding: 0px 0px 0px 0px;
     list-style-type: none;
}
.lowerbar li {
     margin: 0px 0px 2px 0px;
     padding: 0px 0px 1px 0px;
     border-bottom:1px dotted #DF0101;
}
.lowerbar a {
     color: #FA58F4;
     text-decoration: none;
}
.lowerbar a:hover {
     text-decoration: underline;
     color: #F7BE81;
}
.lowerbar a:visited {
     text-decoration: none;
     color: #5858FA;
}
/* ---Modefied: http://amatullah83.blogspot.com--- */
/* --- End Lower--- */

Catatan: Silahkan edit kode CSS diatas, untuk menyesuaikan tampilan kolom dengan template sobat.
Perhatikan tulisan yang berwarna merah pada lower wrapper, widht (lebar) 960px ganti dengan lebar footer sobat.
Untuk mengganti kode warna silahkan lihat tabel kode warna disini. Sebagai sedikit tambahan pengenalan property CSS diatas, lihat gambar berikut:

3. Tambahkan kode HTML berikut diatas <div id='footer-wrapper'>

<div id='lower'>
<div id='lower-wrapper'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'> 
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'> 
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'> 
</b:section>
</div>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar4' preferred='yes'> 
</b:section>
</div>
<div style='clear: both;'/>
</div> </div><!-- end lower-wrapper -->

4. Simpan template. Lihat hasilnya pada bagian elemen halaman, apakah sudah terdapat 4 kolom diatas footer? Jika ya, silahkan tambahkan gadget atau widget yang sobat inginkan.
Semoga bermanfaat!

menambahkan elemen halaman atau kolom tambah gadget dibawah header

Tutorial kali ini kembali kita akan belajar desain template, sebelumnya saya pernah membahas cara menambahkan elemen halaman atau kolom tambah gadget dibawah header. Nah sekarang kita akan belajar cara menambahkan elemen halaman dibawah header menjadi dua, tiga kolom atau multi kolom, seperti screenshot berikut.


Caranya sangat mudah, ikuti langkah-langkah berikut:

Cara menembahkan dua dan tiga kolom elemen halaman dibawah header:
1. Pada dasbor klik Tata Letak=> Edit HTML=> Cari kode berikut ]]></b:skin> jika sudah dapat, letakkan kode berikut diatasnya:

#box-main-container {
clear:both;
}
.box-column {
padding:0px 10px 10px 10px;
border:1px dotted $bordercolor;
}

Kalau sobat dah bisa ngedit CSS atau sedikit bisa membaca maksud perintahnya silahkan edit exp: padding, margin atau bordernya!
2. Kemudian cari kode <div id='main-wrapper'> setelah dapat letakkan kode beikut diatasnya (untuk dua kolom dibawah header):

<div id='box-main-container'>
<div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 50%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

Jika ingin tiga kolom dibawah header maka kode berikut yang sobat letakkan diatas kode <div id='main-wrapper'>

<div id='box-main-container'>
<div id='box1' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='box2' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='box-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='box3' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='box-column' id='col3' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>

3. Simpan template dan lihat hasilnya dibagian elemen halaman, jika berhasil sobat akan melihat seperti screenshot diatas.
Semoga bermanfaat

cara menambah elemen halaman diatas header

Kali ini saya ingin berbagi trik blog cara menambah elemen halaman diatas header dan cara membuat manu tab navigator horizontal. Berhubung pada postingan cara membuat menu tab view, seorang teman bertanya pada kolom komentarnya seperti ini:

rencanapembelajaran mengatakan...

oh ya, kalau mau buat tab menu di bagian atas header bisa gak. soalnya cuma blog2 tertentu yang ada menu nya di bagian atas, misalnya kayak blog ini ada menu agama islam, teknologi, glitter text, kesehatan dsn. blog saya bisa kah di buat spt itu ? mohon petunjuknya.. silahkan di liat blog saya !
Jawabannya: Alhamdulillah bisa, pertama anda tentu harus mengetahui dulu cara menambah elemen di atas header.

Berikut ikuti langkah langkahnya:

Dalam keadaan login=> pada dasbor klik tata letak/ layout=> edit HTML=> cari kode ]]></b:skin>

• Tambahkan kode berikut diatas kode ]]></b:skin>
  

#gadget_header{
margin:10px 0;
padding:1%;
width:100%;}

• Kemudian cari kode berikut  <div id='header-wrapper'>
  
• Kemudian copy kode berikut diatas <div id='header-wrapper'>
  

<div id="gadget_header">
<b:section class='header' id='gadgetheader' preferred='yes'/>
</div>

• Selanjunya simpan template!

menambahkan elemen halaman atau kolom full widget pada sidebar

Tutorial kali ini kita akan belajar lagi tentang desain template (cieh)? Bagaimana menambahkan elemen halaman atau kolom full widget pada sidebar template blogger dengan menggunakan CSS, XHTML dan JavaScript hanya dalam empat langkah simple, kita juga bisa dengan mudah mengganti warna dan widget langsung pada area dashboard. Berikut sebuah screenshot simple hasil dari tuturial ini:
 
 .   

Tampilannya mirip tab view sederhana yang triknya pembuatannya pernah saya bahas sebelumnya hanya saja selain perbedaan yang sudah saya sebutkan diatas kolom widget ini ketika menu diklik tingginya akan menyesuaikan dengan tinggi widget. Untuk menguji dan meyakinkan sobat JavaScript ini bekerja silahkan lihat demonya dulu pada template yang masih dalam proses desain saya disini dan disini. Sekalian saya minta saran dan kritik teman-teman untuk kedua tampilan terbaik template sederhana itu!!!
O ya saya sarankan untuk mengetes tutorial ini pada minima template atau backup template sobat sebelum bereksperimen dengan template sobat saat ini.
Oke sekarang ikuti langkah-langkah berikut:
Cara menambahkan elemen halaman baru atau kolom full widgets pada sidebar template blogger/ Cara membuat tab view versi dua:

• Loggin ke akun blogger anda, pada dashboard klik layout > edit html dan letakkan script berikut sebelum tag </head>

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

• Selanjutnya cari kode berikut <div id='sidebar-wrapper'> just below there add the following code

 <div class='tabber'>
<b:section class='tabbertab' id='tab1' maxwidgets='1'/>
<b:section class='tabbertab' id='tab2' maxwidgets='1'/>
<b:section class='tabbertab' id='tab3' maxwidgets='1'/>
</div>

 
Kode diatas hanya untuk tiga tab jika ingin lebih tinggal tambah kode serupa, tapi ingat id tab harus unik tudak boleh sama.

• Sekarang tambahkan kode CSS berikut diatas ]]></b:skin>

/* start tab styles */
.tabberlive{
margin:0;
padding:5px;
clear:both;
background:#F2F2F2;
border:1px solid $tbbxbrcolor;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:15px;
-webkit-border-bottom-right-radius:15px;
}
.tabbernav {
margin:0px;
padding: 5px 0;
border-bottom: 1px solid $tbbxbrcolor;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;
}
.tabbernav li {
list-style:none;
margin:0;
display:inline;
}
.tabbernav li a {
padding:7px 0.5em;
margin-right:4px; 
border-bottom:none;
background:$tbbxcolor2;
text-decoration:none;
color:$tbbxcolor1;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
}
.tabbernav li a:hover {
color:$tbbxcolor2;
background:$tbbxcolor1;
border-color:$tbbxbrcolor;
text-decoration:none;
}
.tabbernav li.tabberactive a,
.tabbernav li.tabberactive a:hover {
background:$tbbxcolor1;
color:$tbbxcolor2;
border-bottom: 1px solid $tbbxcolor1;
}
.tabberlive .tabbertab {
padding:7px; 
border-top:0;
background:$tbbxcolor1;
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:15px;
-webkit-border-bottom-left-radius:15px;
-webkit-border-bottom-right-radius:15px;}
.tabberlive .tabbertab h2,
.tabberlive .tabbertabhide {
display:none;
}
.tabbertab .widget-content ul{
list-style:none;
margin:0 0 10px 0;
padding:0;
}
.tabbertab .widget-content li {
border-bottom:1px solid $tbbxbrcolor;
margin:0 5px;
padding:2px 0 5px 0;
}
/* end tab styles */

• Dalam kode CSS diatas terdapat 4 variables named tbbxbgcolor, tbbxbrcolor, tbbxcolor1 and tbbxcolor2 jadi kita akan mudah mengganti warna tab konten langsung pada dashboard. Terakhir kita tambahkan code variable berikut pada bagian atas template variable definitions:

<Variable name="tbbxbgcolor" description="Tab box Background Color" type="color" default="#f8f8f8" value="#f8f8f8">
<Variable name="tbbxbrcolor" description="Tab box Border Color" type="color" default="#dcdcdc" value="#dcdcdc">
<Variable name="tbbxcolor1" description="Tab box Color 1" type="color" default="#ffffff" value="#ffffff">
<Variable name="tbbxcolor2" description="Tab box Color 2" type="color" default="#5588aa" value="#5588aa">

Sekarang simpan template! Klik elemen halaman/ page elemen jika sobat berhasil akan melihat kolom seperti screenshot berikut.
 
Sobat bisa menambahkan sebuah widget setiap klik nomer yang ada, jadi sobat dapat menambahkan sekian widget pada 1 kolom dengan mudah. Jangan lupa setelah melihat preview/ pratinjau blog untuk menyimpan atau save template.
Untuk mengganti warna tab menu, background atau border masuk pada menu layout (tata letak) klik tab font dan warna seperti screenshot berikut.

Related post atau postingan terkait

Related post atau postingan terkait tentu sudak kita ketahui bersama fungsi dan manfaatnya, karena sebelumnya saya pernah mengetengahkan tutorial cara menambahkan related post pada blogger. Widget ini sebagaimana widget lainnya memang memiliki banyak versi, kalau yang sebelmnya hanya dilengkapi judul, widget berikut dilengkapi juga dengan thumbnails (image/gambar) yang dapat mempercantik tampilan related post pada blog anda. Widget ini juga bisa dengan mudah anda atur dan sesuaikan jumlah artikel terkait yang ingin ditampilkan atau merubah jenis huruf dan background hover dari link dll.
Widget berikut mirip pula dengan widget related post yang disediakan oleh link within, nah jika anda tidak ingin menggunakan widget dari pihak ketiga silahkan mencoba tutorial berikut:
1. seperti biasa, silahkan loggin dahulu ke account blogger anda, pada dasbor pilih atau klik rancangan >>> edit HTML >>> jangan lupa untuk mencentang kotak kecil disamping tulisan Expand Template Widget.
2. Tekan control F dan cari kode </head>
3. Selanjutnya letakkan kode berikut diatas kode nomor dua tadi:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script src='http://sites.google.com/site/amatullah83/js-indahnyaberbagi/relatedpostwiththumbnails.js.js' type='text/javascript'/>
</b:if>

4. Kemudian cari kode berikut:

<div class='post-footer-line post-footer-line-1'>

atau

<div class='post-footer-line post-footer-line-3'>

atau

<p class='post-footer-line post-footer-line-1'>

atau

<p class='post-footer-line post-footer-line-3'>

5. Selanjutnya letakkan kode berikut setelah kode atau dibawah kode nomor 4 tadi:

<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>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://amatulla83.blogspot.com' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger widgets</a>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;Related Posts&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>

Kode diatas bisa anada rubah lagi untuk menyesuaikannya dengan blog anda.
6. Selesai, silahkan simpan template dan lihat hasilnya diblog anda.
Hasil tutorial ini bisa anda lihat diblog saya "Jejak-jejak hati"
Terimakasih, semoga bermanfaat.

Tab menu horizontal dengan animasi

Postingan kali ini masih akan mengetengahkan tutorial  modifikasi tab menu pada template blogger. Sebelumnya sudah ada beberapa postingan tutorial cara membuat tab navigator horizontal mulai yang paling sederhana  dan yang dilengkapi dengan 30 macam widget tab menu pilihan sampai drop down dengan css dan drop down dengan JQuery, maka kali ini saya coba mengetengahkan tab menu horizontal dengan animasi. Untuk tab menu animasi juga banyak pilihan, untuk mencoba yang paling sederhana seperti screnshoot dibawah ini, silahkan ikuti tutorial berikut:

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan kode CSS berikut diatas tag  ]]></b:skin>:

.animatedtabs{
border-bottom: 1px solid gray;
overflow: hidden;
width: 100%;
font-size: 14px; /*font of menu text*/
}
.animatedtabs ul{
list-style-type: none;
margin: 0;
margin-left: 10px; /*offset of first tab relative to page left edge*/
padding: 0;
}
.animatedtabs li{
float: left;
margin: 0;
padding: 0;
}
.animatedtabs a{
float: left;
position: relative;
top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCA_wM5MHwVodxEtji7QvmejEMXuyJSHF3yPKCTFPPFCIxIfgv-crl1Pb0CPzsNlkNMc2tdTCeP1OAqR4YzuVi7onoD42kBXqJGr_WoT2m6yDKocJzPV9gQW31usvbju2oSu8DVlkUae4/s320/tab-blue-left.gif) no-repeat left top;
margin: 0;
margin-right: 3px; /*Spacing between each tab*/
padding: 0 0 0 9px;
text-decoration: none;
}
.animatedtabs a span{
float: left;
position: relative;
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPq9dJrokHhuM2d7rVG6vI30IglaIAwl_BnxGJPvK0YtJOJX3MqLQOLUPsqmYQnLTWHQlJvRqUx-9btxZ-BrPUf8NUHfXWhNTZApcH4YSwetjuWTkQuf0j0Lt8Xy3ZzR8s_JfFdTMXS-c/s320/tab-blue-right.gif) no-repeat right top;
padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
font-weight: bold;
color: black;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
.animatedtabs a span {float:none;}
/* End IE5-Mac hack */
.animatedtabs .selected a{
background-position: 0 -125px;
top: 0;
}
.animatedtabs .selected a span{
background-position: 100% -125px;
color: black;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}
.animatedtabs a:hover{
background-position: 0% -125px;
top: 0;
}
.animatedtabs a:hover span{
background-position: 100% -125px;
padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
top: 0;
}

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

<div class='animatedtabs'>
<ul>
<li><a href='http://www.amatullah83.blogspot.com' title='Home'><span>Home</span></a></li>
<li class='selected'><a href='http://amatullah83.blogspot.com/search/label/Widget' title='Blogger Widgets'><span>Widgets</span></a></li>
<li><a href='http://amatullah83.blogspot.com/search/label/Modifikasi%20Tab%20Menu' title='Modifikasi Tab Menu'><span>Modifikasi Tab Menu</span></a></li>
<li><a href='http://amatullah83.blogspot.com/search/label/Variasi%20Icons' title='Variasi Icons'><span>Variasi Icons</span></a></li>
<li><a href='http://amatullah83.blogspot.com/search/label/Background' title='Background'><span>Background</span></a></li>   
<li><a href='http://amatullah83.blogspot.com/search/label/Blogger%20Templates' title='Free Blogger Templates'><span>Blogger Templates </span></a></li>
</ul>
</div>

4. Simpan template dan lihat hasilnya.

Multi level drop-down menu dengan CSS dan JQuery

View Demo
Pada postingan saya sebelumnya yang berjudul 30 tab menu navigasi horizontal, seorang pengunjung bertanya pada kolom komentar cara membut menu drop-down. Alhamdulillah setelah search digoogle, saya temukan tutorial membuat multi level drop-down menu dengan CSS dan JQuery untuk web dari Dinamic Drive. Setelah saya modifikasi tutorial ini bekerja dengan baik pula pada template blogger. Contohnya bisa lihat pada diatas atau free blogger template dalam pengembangan saya disini
Nah berikut langkah-langkah membuat multi level drop-down menu dengan JQuery pada template blogger
1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML
2. Tambahkan script JQuery berikut sebelum tag </head>

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

catatan: bagi sobat yang sudah pernah menambahkan atau pada templatenya sudah terdapat scrip Jquery maka langkah kedua abaikan saja
3. Tambahkan juga script berikut setelah script JQuery yadi

<link rel="stylesheet" type="text/css" href="jqueryslidemenu.css" /> <!--[if lte IE 7]>
<style type="text/css">
html .jqueryslidemenu{height: 1%;} /*Holly Hack for IE7 and below*/
</style>
<![endif]-->
<script type="text/javascript" src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/Dropdownmenuwithjquery.js"></script>

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

.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
width: 100%;
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.jqueryslidemenu ul li{
position: relative;
display: inline;
float: left;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
display: block;
background: #414141; /*background of tabs (default state)*/
color: white;
padding: 8px 10px;
border-right: 1px solid #778;
color: #2d2b2b;
text-decoration: none;
}

* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
color: white;
}

.jqueryslidemenu ul li a:hover{
background: black; /*tab link background during hover state*/
color: white;
}

/*1st sub level menu*/
.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
font: normal 13px Verdana;
width: 160px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
background: #eff9ff;
color: black;
}

/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

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

<div id="myslidemenu" class="jqueryslidemenu">
<ul>
<li><a href="http://amatullah83.blogspot.com/">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
  <ul>
  <li><a href="#">Sub Item 1.1</a></li>
  <li><a href="#">Sub Item 1.2</a></li>
  <li><a href="#">Sub Item 1.3</a></li>
  <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
  <ul>
  <li><a href="#">Sub Item 2.1</a></li>
  <li><a href="#">Folder 2.1</a>
    <ul>
    <li><a href="#">Sub Item 2.1.1</a></li>
    <li><a href="#">Sub Item 2.1.2</a></li>
    <li><a href="#">Folder 3.1.1</a>
        <ul>
            <li><a href="#">Sub Item 3.1.1.1</a></li>
            <li><a href="#">Sub Item 3.1.1.2</a></li>
            <li><a href="#">Sub Item 3.1.1.3</a></li>
            <li><a href="#">Sub Item 3.1.1.4</a></li>
            <li><a href="#">Sub Item 3.1.1.5</a></li>
        </ul>
    </li>
    <li><a href="#">Sub Item 2.1.4</a></li>
    </ul>
  </li>
  </ul>
</li>
<li><a href="http://amatullah83.blogspot.com/">Item 4</a></li>
</ul>
<br style="clear: left" />
</div>

6. Simpan template Hasilnya seperti screenshot berikut atau live demo lihat disini
  
  Semoga bermanfaat!

Cara Membuat Scroll pada Label, Arsip Blog Atau Widgets Lain

Cara Membuat Scroll pada Label, Arsip Blog Atau Widgets Lain

Cara ini saya dapat waktu saya mencari kesana kemari cara membuat Scroll untuk Label Blog saya, karena label di blog saya adalah Widgets bawaanya Blogspot jadi saya bingung cara membuat Scroll untuk Label tersebut dan akhirnya dipertemukan dengan Blognya Arie Aldyno.

Temen-teman pasti sudah pada tahu apa itu Scroll dan langsung saja ke cara membuatnya:


1. Sign in di www.blogger.com

2. Ke Design atau Tata letak terus klik Edit Html

3. Cari Kode:

<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='HTML4' locked='false' title='Blog Stats' type='HTML'>
<b:widget id='HTML11' locked='false' title='Daftar Isi:' type='HTML'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:widget id='Followers1' locked='false' title='Followers' type='Followers'>
<b:widget id='HTML6' locked='false' title='etc.' type='HTML'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>

4. Pokoknya cari nama widgets yang akan anda beri scroll.
Misalnya ingin memberi scroll untuk Label, maka kodenya kira2 seperti ini

<b:widget id='Label1' locked='false' title='Labels' type='Label'>

Nah kode id yang nanti di pakai untuk Label ini adalah Label1

5. Kemudian Pastekan Kode dibawah ini di atas kode ]]></b:skin>

#Label1 .widget-content{
height:200px;
width:auto;
overflow:auto;
}

Kemudian Simpan Templete.
Nah kalau berhasil nggak akan Error, dan Label akan ada Scrollnya.

Cara ini bisa juga untuk membuat scroll pada Arsip Blog atau Widgets lainnya, Seperti contoh script diatas (script point 3) Contoh kita akan memberi Scroll pada Arsip Blog, yang mengambarkan id Arsip Blog yaitu BlogArchive1, maka kita tinggal mengganti kata Label1 pada script point 5 (yang berwarna biru) dengan Kata BlogArchive1. Sedang Untuk tinggi scroll bisa diatur sesuai selera anda (ganti kode yang berwarna merah), yang kalau seperti yang diatas itu tulisan 200px.

Semoga bermanfaat

Cara memasang scoll pada Labels di blog

Labels/Kategori mempunyai peranan yang sangat penting dalam sebuah Blog karena akan memudahkan pengunjung Blog sobat dalam mencari sesuatu yang mereka inginkan dan sebuah Blog semakin lama akan mempunyai Labels/Kategori yang banyak dan panjang sehingga akan memakan tempat yang banyak pula.

Untuk mengatasi hal tersebut sobat bisa menggunakan Fungsi Scroll atau menggulung sehingga bisa menghemat tempat.

Buat sobat Blogger yang ingin memasang Scroll pada Labels

Caranya sebagai berikut :

Seperti biasa sobat harus Login ke Blogger
Klik Rancangan (yang dulunya Tata Letak)
Klik tab Edit HTML
Klik tulisan Download Template Lengkap.
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget ,

lihat gambar di bawah :



Tunggu beberapa saat ketika proses sedang berlangsung
Kemudian cari kode seperti dibawah ini
untuk mempermudah pencarian tekan Ctrl + F atau (F3) di keboard sobat


<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>

Untuk membuat scroll Copy kode berikut :

<div style='overflow: auto; width: 175px; height: 200px; text-align: left;'>

</div>

Letakkan dibawah kode berikut :

<div class='widget-content'>

dan diatas kode ini:

<ul>

Maka hasil akan menjadi seperti di bawah ini :

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow: auto; width: 100%px; height: 300px; text-align: left;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
</div>

Lihat kode yang di cetak tebal, itu adalah kode tambahannya dan sedikit catatan nilai dari Width: 160px; dan Height: 300px; bisa sobat ganti dan sesuaikan dengan lebar dan tinggi sidebar sobat.

kemudian Simpan selesai dan lihat hasilnya.

Cara Memasang Widget SMS Gratis di Blog

Free SMS

Ada berbagi Cara Memasang Widget SMS Gratis di Blog

Contohnya sebagai berikut :

Seperti biasa sobat harus Login ke Blogger
klik Rancangan (Yang dulunya Tata Letak)
klik Elemen Laman → Tambah Gadget → HTML/JavaScript
Kemudian masukkan kode berikut ini kedalamnya.

<iframe name="I2" src="http://sms-online.web.id/widget" height="350" width="225" > not support </iframe>
<a href=" http://www.imtikhan.co.cc/2010/08/cara-memasang-widget-sms-gratis-di-blog.html" rel="nofollow">Click to get</a>

Masukkan judul yang sesuai
Kemudian Simpan dan lihat hasilnya

Cara Membuat Scroll Kembali ke Atas

Postingan kali ini ssaya akan membahas bagaimana Cara Cara Membuat Scroll Kembali ke Atas secara Otomatis.
Untuk melihat contohnya sobat bisa klik gambar yang berada dibawah kanan
Jika ada yang tertarik untuk membuatnya
Silahkan ikuti langkah berikut :

Login ke Blogger
Klik Rancangan → Edit HTML
Klik tulisan Download Template Lengkap
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget
Kemudian cari kode <head>

Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3)
Jika sudah ketemu, Copy kode berikut dan Paste di bawah kode <head>

<script src='http://h1.ripway.com/imtikhan/jquery.min.js' type='text/javascript'/>
<script src='http://h1.ripway.com/imtikhan/Scroll_Kembali_Ke_Atas.js' type='text/javascript'/>

jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya

Selamat mencoba

Cara Pasang Jam di Blog

Tip Trik Blogger kali ini saya akan membahas bagaimana Cara Pasang Jam di Blog
bagi sobat Blogger pemula yang ingin memasangnya
ikuti langkah berikut :

Kunjungi situs http://www.clocklink.com/
Kemudian pilih Gallery
Selanjutnya pilih Gallery sesuai selera , contohnya sobat memilih Analog
Kemudian pilih gambar yang ingin sobat gunakan, lalu klik View HTML Tag dibawah gambar jam yang sobat pilih.
Kemudian akan keluar halaman kotak lisensi pilih tombol Accept
Pada halaman selanjutnya sobat atur sendiri Choose Your Color untuk warna
dan Select by Timezone pilih (GMT + 07:00) untuk Indonesia
lalu kodenya pilih yang atas. Copy atau Simpan kodenya untuk sementara.
Cara memasang di Blog :
Login ke Blogger
Klik Rancangan → Elemen Laman → Tambah Gadget → HTML/JavaScript
Copy Paste kode tersebut kemudian klik SIMPAN dan lihat hasilnya

Selamat mencoba

Cara Menampilkan Tanggal di Blog

Setelah Postingan sebelumnya saya telah membahas bagaimana Cara Pasang Jam di Blog
Postingan kali ini saya akan membahas bagaimana Cara Menampilkan Tanggal di Blog
Jika ada sobat Blogger yang tertarik untuk menampilkannya
Silahkan ikuti langkah-langkah berikut :

Langkah Pertama :

Login ke Blogger
Klik Rancangan → Edit HTML
Kemudian cari kode ]]></b:skin>
Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3)
Jika sudah ketemu Copy kode berikut dan letakkan dibawah kode tersebut

<script type='text/javascript' src='http://imtikhan.googlecode.com/files/tanggal.js'></script>

jika sudah selesai SIMPAN TEMPLATE

Langkah Kedua :

Untuk menempatkan posisi tanggal yang sobat inginkan.
Silahkan letakkan sesuai keingian sobat. 
Bisa di letakan di Header, Footer atau Side Bar.
Kembali ke Rancangan → Elemen Laman → Add Gadget → HTML/Javascript
Copy kode berikut kedalamnya

<script>tanggal();</script>

jika sudah selesai SIMPAN dan lihat hasilnya

Selamat mencoba

Menambah Elemen Diatas Header Blog

masih membahas seputar Menghias Blog.

Kali ini saya membahas mengenai Menambah Elemen

Diatas Dan Bawah Posting Blogger

Nahhh kali ini posting yang akan saya bahas adalah

Menambah Elemen Diatas Header Blog.

Baiklah langsung saja saya berikan langkah-langkahnya.....!!!

halaman adalah seperti di bawah ini:

Dan untuk menambah elemen diatas header kalian tinggal melakukan 

seditik perubahan pada menu Edit html.

Login ke Dashboard >> Rancangan >>  Edit HTML , 

centang pada "Expand widget template"

Cari kode berikut ini:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Dan gantilah kode diatas menjadi seperti kode dibawah ini:

<div id='header-wrapper'>

<b:section class='header' id='header' maxwidgets='4' showaddelement='yes'>

Setelah itu klik Simpan Template dan jika berhasil maka tampilannya akan seperti gambar berikut.

Selamat mencoba dan semoga posting kali ini bisa bermanfaat....!!!

Cara Pasang Efek Kupu-kupu berterbangan di Blog.

Setelah postingan sebelumnya Tip Trik Blogger sudah membahas bagaimana Cara Membuat Burung-burung Berterbangan di Blog.
Kembali Tip Trik Blogger mempostingkan mengenai Aksesoris Blog yaitu Cara Pasang Efek Kupu-kupu berterbangan di Blog.
Bagi sobat Blogger pemula yang ingin mencobanya
Silahkan simak penjelasan berikut :

Login ke Blogger
Klik Rancangan → Elemen Laman → Tambah Gadget → HTML/JavaScript
Kemudian Copy kode script berikut yang sobat sukai dan Paste ke dalamnya :

Contoh gambar Kupu-kupu1



Kode script

<script language="JavaScript1.2" src="http://imtikhan.googlecode.com/files/Kupu-kupu1.js"></script>

Demonya bisa dilihat Disini


Contoh gambar Kupu-kupu2



Kode script

<script language="JavaScript1.2" src="http://imtikhan.googlecode.com/files/Kupu-kupu2.js"></script>

Demonya bisa dilihat Disini


Contoh gambar Kupu-kupu3



Kode script

<script language="JavaScript1.2" src="http://imtikhan.googlecode.com/files/Kupu-kupu3.js"></script>

Demonya bisa dilihat Disini

Contoh gambar Kupu-kupu123



Kode script

<script language="JavaScript1.2" src="http://imtikhan.googlecode.com/files/Kupu-kupu123.js"></script>

Demonya bisa dilihat Disini

jika sudah selesai SIMPAN dan lihat hasilnya

Selamat mencoba

Cara Memberi Background Gambar pada Posting

Tip Trik Blogger kali ini saya akan berbagi trik menarik
yaitu Cara Memberi Background Gambar pada Posting yang berbeda-beda background di setiap postingan, tanpa merubah Template.
Mungkin trik ini sudah banyak yang mengetahui, makanya trik kali ini saya khususkan bagi yang belum mengetahui trik ini dan jiaka ada yang berminat untuk memodifikasi postingan di setiap memposting.
Untuk Dmonya, sobat bisa lihat sendiri backgroundnya pada postingan ini, dan hanya pada postingan ini saja tidak merubah background postingan keseluruhan blog ini
Berikut cara pembuatan nya :

Tambahkan kode dibawah ini pada editor Edit HTML postingan blog sobat.

<div style="background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf0gm1WeItOMMvzA_x-OZdyaSTmnjgtyBXih4gCodTeV2vA5p9P84tJ1WgyUDHHSEKZYvWE3uqApTk1_TaOy1TNHMCHV6NnoMpPj8Vap_ffwZCrRE851lQ5b12cgO5ss2n_GSwn7DGh7l3/s1600/cooltext474767196.png
) no-repeat;
color:#000;
padding:10px 10px 10px 10px;
-moz-border-radius-topright:10px;
-webkit-border-top-right-radius:10px;
-moz-border-radius-bottomright:10px;
-webkit-border-bottom-right-radius:10px;
-moz-border-radius-topleft:10px;
-webkit-border-top-left-radius:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-bottom-left-radius:10px;">

Isi Postingan

</div>

Keterangan :
Ganti URL gambar diatas dengan URL gambar milik sobat.
Kode no-repeat adalah kode untuk tidak menampilkan gambar berulang-ulang, jika memang menghendaki gambar yang ditampilkan berulang sampai ke bawah postingan, maka tinggal dihapus saja kode no- pada kode tersebut
Isi Postingan adalah isi dari artikel/post sobat keseluruhan. jadi integrasinya kode diatas adalah mengapit keseluruhan isi artikel milik sobat.
Sebelum posting tersebut diterbitkan, maka sebelumnya di Pratinjau terlebih dahulu.
Setelah semuanya beres, maka terbitkanlah postingan sobat. dan lihat hasilnya.
Satu postingan sobat memiliki background yang berbeda.

Selamat mencoba

Cara Memberi Efek Lampu Neon pada Tulisan

Effect flashing didalam text adalah murni dari pengaruh JavaScript, tanpa menggunakan kode CSS.
Neon Text Color jQuery ini dapat digunakan di postingan ataupun di sidebar, guna mempercantik tampilan blog/website sobat.
Jika ada yang tertarik langsung saja ke langkah-langkah membuat Neon Text Color jQuery.
Masukan kode JavaScript dibawah ini pada postingan pada mode Edit HTML
atupun di sidebar dengan cara Tambah Gadget → HTML/JavaScript pada widget sidebar sobat.

<script language="JavaScript1.2">
var message="Tulisan Yang diberi Efek"
var neonbasecolor=""
var neontextcolor="#fd3d3a"
var neontextcolor2="#ff8080"
var flashspeed=50 // kecepatan flashing dalam milliseconds
var flashingletters=5 // jumlah huruf yg di flashing dlm neontextcolor
var flashingletters2=1 // jumlah huruf yg di flashing dlm neontextcolor2 (0 to disable)
var flashpause=0 // pause diantara flash-cycles dlm milliseconds
var n=0
if (document.all||document.getElementById){
document.write('<font color="'+neonbasecolor+'">')
for (m=0;m<message.length;m++)
document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')
document.write('</font>')
}
else
document.write(message)
function crossref(number){
var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)
return crossobj
}
function neon(){
//Change all letters to base color
if (n==0){
for (m=0;m<message.length;m++)
crossref(m).style.color=neonbasecolor
}
//cycle through and change individual letters to neon color
crossref(n).style.color=neontextcolor
if (n>flashingletters-1) crossref(n-flashingletters).style.color=neontextcolor2
if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=neonbasecolor
if (n<message.length-1)
n++
else{
n=0
clearInterval(flashing)
setTimeout("beginneon()",flashpause)
return
}
}
function beginneon(){
if (document.all||document.getElementById)
flashing=setInterval("neon()",flashspeed)
}
beginneon()
</script>

Download Script

Keterangan :
ganti kode Tulisan Yang diberi Efek dengan tulisan yang akan diberikan efek.
kode #fd3d3a dan #ff8080, ganti kode warna dengan kode warna yg sobat suka.
angka 50 adalah kecepatan flashing effect neon. lebih besar angkanya maka akan lebih lambat kecepatan flashing nya.
angka 5 adalah merupakan jumlah huruf yang di flashing.
angka 1 adalah jumlah huruf yg di flashing setelah kode pada baris ketujuh.

Neon Text Color jQuery ini tidak berlaku bagi text yg dimodifikasi, seperti di bold, atau di warnai.

Contoh Efek Lampu Neon

Selamat mencoba

Cara Pasang Top Posting di Blog

Jika Blog sobat sudah banyak dengan Postingan, Terkadang pengunjung Blog yang baru berkunjung ingin mengetahui Postingan yang paling banyak di baca dan di berikan komentar.
Untuk memudahkan pengunjung Blog tersebut supaya tidak repot membuka satu persatu Postingan sobat, lebih baik menampilkan Top Posting, dengan Cara Pasang Top Posting di Blog sobat
Caranya sebagai berikut :

Login ke Blogger
Klik Rancangan → Elemen Laman → Tambah Gadget → HTML/JavaScript
Kemudian Copy Paste kode di bawah ini :

<script language='javascript'>
aBold = true;
numposts=200;
maxshowresult=5;
home_page = "http://www.imtikhan.tk/";
</script>
<script src='http://h1.ripway.com/imtikhan/top_posting.js' type='text/javascript'></script>

Keterangan : home_page = "http://www.imtikhan.tk/";ganti Urlnya dengan Url Blog sobat, dan maxshowresult=5; bisa di ganti angkanya terserah sobat mau ditampilkan berapa Postingan

jika sudah selesai SIMPAN dan lihat hasilnya

Cara Memasang Efek Cursor Bintang Berjatuhan.

Masih dalam Label Aksesoris Blog atau Efek Blog.
Postingan sebelumnya saya sudah membahas bagaimana cara untuk mempercantik blog yaitu Cara Memasang Efek Bintang Berjatuhan di Blog.
Dan postingan kali ini saya akan membahas bagaimana Cara Memasang Efek Cursor Bintang Berjatuhan.
Yang perlu di ingat Efek Bintang Berjatuhan dan Efek Cursor Bintang Berjatuhan tidak sama.
Seperti biasa cara ini khusus buat blogger pemula yang sedang asyik mempercantik blognya.
Jika ada yang tertarik
Silahkan ikuti cara pemasangannya :

Seperti biasa sobat harus Login ke Blogger
Klik Rancangan → Elemen Laman → Tambah Gadget → HTML/JavaScript
Kemudian pilih warna salah satu dari kode script berikut :
Jika sudah ada yang cocok Copy script tersebut dan Paste ke dalamnya :

Bintang berwarna merah
Demonya bisa dilihat Disini
Kode script :
<script src="http://imtikhan.googlecode.com/files/red_star.js" type="text/javascript"></script>

Bintang berwarn kuning
Demonya bisa dilihat Disini
Kode script :
<script src="http://imtikhan.googlecode.com/files/yellow_star.js" type="text/javascript"></script>

Bintang berwarn hijau
Demonya bisa dilihat Disini
Kode script :
<script src="http://imtikhan.googlecode.com/files/green_star.js" type="text/javascript"></script>

Bintang berwarn biru
Demonya bisa dilihat Disini
Kode script :
<script src="http://imtikhan.googlecode.com/files/blue_star.js" type="text/javascript"></script>

Bintang berwarn hitam
Demonya bisa dilihat Disini
Kode script :
<script src="http://imtikhan.googlecode.com/files/black_star.js" type="text/javascript"></script>

Bintang berwarn putih
Demonya bisa dilihat Disini
Kode script :
<script src="http://imtikhan.googlecode.com/files/white_star.js" type="text/javascript"></script>

Keterangan : pilih warna sesuai Templat sobat
jika sudah selesai SIMPAN dan lihat hasilnya

Selamat mencoba

Cara Merubah Cursor Pada Link Tertentu.

Masih berhubungan dengan cursor, postingan sebelumnya saya sudah menjelaskan bagaimana Cara Mengganti Cursor di Blog dan Cara Mengganti Cursor Hand pada Link.
Pada postingan kali ini saya akan mencoba menjelaskan bagaimana Cara Merubah Cursor Pada Link Tertentu.
Maksudnya begini, biasanya jika sobat mengarahkan cursor ke sebuah link maka cursornya akan berubah menjadi cursor jenis hand.
Contoh : coba arahkan cursor sobat ke link berikut :
Link cursor default dan contoh link yang sudah dimodifikasi Link cursor berwarna merah atau Link cursor berwarna kuning dan Link cursor berwarna hijau.
dari beberapa contoh link diatas terlihat jelas perbedaannya,
jika ada yang tertarik berikut caranya :

Login ke Blogger
Klik Rancangan → Elemen Laman → Tambah Gadget → HTML/JavaScript
Kemudian Copy Paste kode di bawah ini :

<style type="text/css">
#cursor_tertentu{
cursor:url("http://i1002.photobucket.com/albums/af149/Imtikhan/cursor_biru.gif"),default;}
</style>

Keterangan : ganti url gambar cursor diatas dengan url gambar cursor pilihan sobat.
jika sudah selesai SIMPAN

jika sobat ingin mengaktifkan stylenya tambahkan kode id="cursor_tertentu" setiap sobat membuat link,
Contoh :

<a id="cursor_merah" href="http://www.imtikhan.tk/" target=" title="Cursor berwarna merah">Link cursor berwarna merah</a>

Hasilnya akan seperti berikut :

Link cursor berwarna merah

Selamat mencoba

Cara memasang status online di blog

Anda semuanya mungkin udah banyak yang mengetahui tentang cara memasang status online di blog anda semuanya,kali ini saya akan memberikan sedikit cara memasang dan codenya :).Buat para master blogger pasti udah mengetahui cara ini:

Tapi buat para pemula seperti saya ini :r ,anda mungkin ingin tau berapa orang yang sedang berada di blog anda atau yang sedang online di blog anda.

oke deh langsung aja....
buat status online di blog anda seperti gambar di bawah ini :



silahkan di copy kode di bawah ini :
<a href="http://whosread.com/show/37892l" title="online counter"><img src="http://whosread.com/counter/37892l.gif" alt="online counter" width="80" height="15" border="0" />

buat status online di blog anda seperti gambar di bawah ini :


codenya di bawah ini :

<script type="text/javascript" src="http://widgets.amung.us/classic.js"></script><script type="text/javascript">WAU_classic('7rapqqjvz8wz')</script>

buat status online di blog anda seperti gambar di bawah ini :


codenya di bawah ini :

<script type="text/javascript" src="http://widgets.amung.us/small.js"></script><script type="text/javascript">WAU_small('jdc50yt65uaf')</script>

Untuk cara memasang code satus online silahkan ikutin cara di bawah ini :

* Masuk BLOGGER Anda
* Dashboard/dabor
* Layout/tata letak
* Tambah Gaget
* Pilih HTML/JAVASCRIPT.
* Paste script diatas sesuai pilihan anda yg mana
* kemudian simpan

Mudah bukan :)

*Selamat Mencoba dan Semoga Bermanfaat.

cara-membuat-marquee-text-berjalan

Apa itu marquee ? Marquee adalah suatu program HTML untuk membuat teks bisa bergerak atau berjalan. Program marquee ini banyak diminati dan di pakai oleh para blogger di dalam blognya karena sifat program ini yang dinamis serta menarik untuk di lihat disamping untuk menghemat tempat pada halaman blog.



Marquee ini bisa di buat dengan menggunakan tag <marquee>...</marquee>.


Atribut yang sering di gunakan adalah :



BGCOLOR="warna" --> Untuk mengatur warna background (latar belakang) teks



DIRECTION="left/right/up/down" --> Mengatur arah gerakan teks



BEHAVIOR="scroll/slide/alternate" --> Untuk mengatur perilaku gerakan



Scroll --> teks bergerak berputar


Slide--> teks bergerak sekali lalu berhenti

Alternate --> teks bergerak dari kiri kekanan lalu balik lagi ( bolak-balik bo)



TITLE='pesan" --> Pesan akan muncul saat mouse berada di atas teks



SCROLLMOUNT="angka" --> mengatur kecepatan gerakan dalam pixel, semakin besar angka semajin cepat gerakannya.



SCROLLDELAY="angka" --> Untuk mengatur waktu tunda gerakan dalam mili detik



LOOP="angka|-1|infinite" --> Mengatur jumlah loop


WIDTH="lebar" --> Mengatur lebar blok teks dalam pixel atau persen



Agar lebih jelas akan saya sertakan contohnya :




Contoh marquee dari gerakan :

<MARQUEE align="center" direction="right"
height="200" scrollamount="2" width="30%">



marquee dari kanan ke kiri



</MARQUEE>

hasilnya :





marquee dari kanan ke kiri



ganti kata "left" dengan keinginan anda yaitu bisa : left, up, down .



Contoh marquee dari perilaku gerakan :

<MARQUEE align="center"
direction="left" height="200" scrollamount="3"
width="70%" behavior="alternate">



marquee menurut perilaku



</MARQUEE>

Hasilnya:



marquee menurut perilaku



Contoh marquee dengan variasi hurup dan warna latar belakang :

<div align="left">&ltFONT FACE="georgia" color="White"><B><MARQUEE BGCOLOR="RED" width="70%" scrollamount="3" behavior="alternate">

Marquee dengan variasi huruf

</MARQUEE></b></FONT></div>

hasilnya :

marquee dengan variasi hurup

Ada variasi lain dari marquee ini, yakni ketika mouse sedang berada di area marquee teks akan berhenti dan ketika mouse di geser kembali ketempat lain maka teks akan bergerak kembali, ini hanya di tambahkan sedikit program pada kolom marquee.



Contoh, silahkan arahkan mouse anda ke area marquee di bawah ini :

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


silahkan tunjuk ke sini

</marquee>

hasilnya :




silahkan tunjuk ke sini





Contoh marquee yang di dalam nya terdapat link :

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

<a href="http://rubrik-elektronik.blogspot.com" target="new">Rubrik Elektronik</a><br/>

<a href="http://electronic-rubric.blogspot.com" target="new">Electronic Rubric </a><br/>

<a href="http://kolom-iklan.blogspot.com" target="new">Kolom iklan </a><br/>

</marquee>

hasilnya :





Free Template





Kolom iklan




Kang Rohman




Variasi lainnya adalah spt berikut:

<span style="color: green;"><span style="color: orange; font-family: comic sans ms; font-size: 130%;"><marquee behavior="alternate" bgcolor="blue" direction="up" height="100" scrollamount="2" scrolldelay="10" width="450"><marquee behavior="alternate" direction="left" scrollamount="2" scrolldelay="10">Teks yg mondar mandir kesono sini</marquee></marquee></span></span><br />

Hasilnya spt dibawah ini:
Teks yg mondar mandir kesono sini



Mungkin itu saja beberapa contoh yang bisa di berikan, silahkan anda otak-atik sendiri agar tercipta variasi-variasi dari marquee ini.



Selamat ber eksperimen