Kumpulan Tutorial Blogspot

Home → Semua Post Berkategori Kode HTML

Tampilkan postingan dengan label Kode HTML. Tampilkan semua postingan

Cara Membuat Efek Zoom Pada Gambar

Pada dasarnya membuat efek zoom pada gambar cukup banyak manfaatnya, selain menghemat tempat, sekaligus mempercantik tampilan blog kita. Ada kalanya dimana kita mempunyai gambar yang sangat besar dan harus di tampilkan dalam ukuran yang besar, wah tempatnya ga cukup nih mas, itu bisa menjadi kendala dalam optimasi gambar yang hendak ditampilkan. Sementara sobat tidak ingin gambar tersebut berlalu begitu saja tanpa sentuhan pengunjung sedikitpun.

Tutorial membuat efek zoom pada gambar ini sangat mudah, cukup menambahkan kode css pada template dan sedikit mengedit kode gambar yang sobat miliki. Ga usah panjang lebar ya, langsung praktek aja. Sip, sekarang silahkan siapkan komputer sobat dulu, plus kopi dan rokok sebagai pelengkap.. Hot

Silahkan login ke Blogger terlebih dahulu.
Kemudian klik Tata Letak.
Tuju halaman Edit HTML.
Letakkan kode css berikut ini, tepat diatas / sebelum kode ]]></b:skin>

/* Zoom Efek */

.thumbnail{position:relative;z-index:0}

.thumbnail:hover{background-color:transparent;z-index:50}

.thumbnail span{position:absolute;left:-1000px;visibility:hidden;color: black;text-decoration: none}

.thumbnail span img{border-width:0;padding:2px}

.thumbnail:hover span {visibility: visible;top: 0;left: 60px}
Jangan lupa Simpan Template.

## Untuk membuat gambarnya zoom-nya, berikut contoh gambar yang saya punya :

<a href="http://s643.photobucket.com/albums/uu155/miskahiper/?action=view&current=vaio-zoom-1.jpg" target="_blank"><img src="http://i643.photobucket.com/albums/uu155/miskahiper/vaio-zoom-1.jpg" border="0" alt="Photobucket"></a>

Kemudian hapus tulisan yang berwarna hijau, tambahkan dengan tulisan yang berwarna merah, sehingga menjadi seperti berikut :

<a class="thumbnail" href="#thumb"><img src="http://i643.photobucket.com/albums/uu155/miskahiper/vaio-zoom-1.jpg" border="0" alt="Photobucket"><span><img src="http://i643.photobucket.com/albums/uu155/miskahiper/vaio-zoom-1.jpg" width="380px" height="300px";/></span></a>

coba sekarang sobat sorot gambar dibawah ini

Sedangkan kode HTMl untuk text adalah sebagai berikut :

<a class="thumbnail" href="#thumb">Contoh Gambar<span><img src=http://i643.photobucket.com/albums/uu155/miskahiper/vaio-zoom-1.jpg /></span></a>

coba di sorot tulisan berwarna hijau dibawah ini :

Contoh Gambar

Ukuran besarnya gambar yang akan di zoom silahkan sobat atur sesuai keinginan, silahkan ganti angka yang berkelip yang berwarna merah dengan ukuran yang sobat inginkan saat di zoom, sesuaikan juga dengan ukuran asli gambar agar gambar yang di zoom tidak pecah atau kabur. Oke sob, selamat mencoba ya, semoga berhasil ! Thumbs-up

Cara Membuat Efek Blur Pada Gambar

Tutorial sederhana ini sebenarnya hanya membutuhkan sedikit kode css pada template. Cara membuat efek blur pada gambar, ya begitulah kira-kira pembahasan kali ini. Efek blur ini akan terjadi jika cursor melintas pada gambar, jadi gambar akan terlihat menjadi tampak samar apabila cursor melintas diatas gambar, nah terus bagaimana kalau ga punya mouse mas dody? wah mending ke laut aja sob.. Laughing

Dan nanti akan saya jelaskan sekalian bagaimana caranya agar gambar yang di klik tidak pindah halaman atau menuju alamat url yang ada (tidak ngelink kemana-mana).

Caranya gampang aja kok, silahkan ikuti langkah-langkahnya berikut ini :

Login ke Blogger dulu ya.
Silahkan sobat tuju halaman Edit HTML.
Kemudian cari kode ]]></b:skin>
Letakkan kode berikut ini diatas / sebelum kode ]]></b:skin>

.linkopacity img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}
.linkopacity:hover img {filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;border:0;}
Simpan Template.

## Kemudian untuk membuat efek blur pada gambar yang akan di upload, contoh alamat url gambar yang ada :

maka tampilan normalnya seperti dibawah ini :

Untuk menambahkan efek blur kedalam gambar, maka kode yang harus sobat tambahkan adalah class="linkopacity" dan hasilnya seperti dibawah ini :

Jika disorot maka gambar akan tampak samar atau ngeblur dan jika di klik maka akan menuju link terkait.

Agar gambar yang di klik tidak ngelink kemana-mana atau tidak pindah ke halaman link yang ada, maka sobat tinggal mengganti linknya menjadi "#nogo" dan hasilnya seperti berikut :

Silahkan di sorot dan di klik, maka gambar tidak akan lari kemana-mana

Untuk merubah tingkat keburaman pada gambar, sobat tinggal atur angka pada kode css yang sudah disimpan pada template tadi. Ubah saja angka �30� menjadi angka yang lebih rendah untuk mendapatkan tingkat blur yang lebih gelap, contoh jika saya ubah angkanya menjadi �10� maka kodenya menjadi seperti berikut :

.linkopacity img {filter:alpha(opacity=100); -moz-opacity:1.0; opacity:1.0; border:0;}
.linkopacity:hover img {filter:alpha(opacity=10); -moz-opacity:0.3; opacity:0.3;border:0;}

Selamat mencoba ya.. Happy

Menu Navigasi Horizontal

Sebelum ini pernah saya bahas tentang tutorial horizontal menu dropdown, kurang lebih sama dengan menu navigasi horizontal. Hanya saja dalam menu navigasi ini, sobat tidak perlu lagi masuk ke kode HTML template jika ingin menambahkan link baru. Namun kekurangan menu navigasi horizontal ini adalah tidak bisanya menambah link baru kebawah (vertikal) atau sub menu seperti pada horizontal menu dropdown.

langsung saja pada pembuatannya ya. Sip, sekarang silahkan sobat Login ke blogger dulu, kemudian tuju Elemen Halaman, lalu klik button Edit HTML, klik Expand Template Widgets.

Letakkan kode css berikut ini diatas kode ]]></b:skin>

/*-- (Menu/Nav) --*/
#nav{background:#000; height:30px; padding:5px 0 0; margin-bottom:0px; -moz-border-radius-bottomright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-topleft:5px}
#nav-left{float:left; display:inline; width:700px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:13pt comic sans ms,arial,sans-serif}
#nav ul li{float:left; list-style:none}
#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px; padding:5px 4px; text-decoration:none}
#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px; padding:5px 4px}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#fff; color:#fff; padding:5px 7px}

Kamudian letakkan kode berikut ini tepat dibawah kode <div id='outer-wrapper'><div id='wrap2'> kode ini biasanya letaknya dibawah <body>

<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

Jangan lupa Simpan Template. Coba lihat hasilnya !

Keterangan :

-moz-border-radius-bottomright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-topleft:5px

adalah garis melengkung pada ujung kotak navigasi, semakin besar angkanya maka akan semakin besar garis lengkungnya. Jika ingin membuat kotak lancip, silahkan hapus saja semua kode tersebut.
height:30px adalah tinggi kotak navigasi.
Background:#000 adalah warna kotak navigasi, untuk merubah dengan warna lain silahkan klik disini. Dan jika ingin mengganti warna dengan gambar yang sobat punya, ubah kodenya sehingga menjadi seperti berikut :

#nav{background:#000 url('http://lh6.ggpht.com/_7Y9pl24WpQY/StGMv1nlCvI/AAAAAAAAB4U/RmIZGEvqvHA/gradient.php_thumb%5B2%5D.jpg?imgmax=800') repeat-x; height:30px; padding:5px 0 0; margin-bottom:0px; -moz-border-radius-bottomright:5px; -moz-border-radius-bottomleft:5px; -moz-border-radius-topright:5px; -moz-border-radius-topleft:5px}��.��.. dst..

alamat gambar diatas hanya contoh yang saya punya, jika ingin melihat gambarnya silahkan sobat block url gambar diatas kemudian masukkan ke address pada browser sobat dan enter, jreeng keliatan kan gambarnya. Silahkan jika ingin menggunakan gambar diatas atau jika punya gambar sendiri, monggo !

Jika berhasil maka menu navigasinya terletak di bagian paling atas header. Jika ingin meletakkan menu navigasi dibawah header maka yang harus sobat lakukan adalah merubah letak posisi <div id='outer-wrapper'><div id='wrap2'>, cut dan paste setelah kode header atau jika bingung maka letakkan saja tepat diatas kode

Maka hasilnya akan seperti yang ada di blog ini, cuih om dody pamer nih.. Hot

Selamat mencoba ya..have a nice day !

Cara Membuat Spoiler

Lama juga saya tidak membuat postingan di blog ini, gatal juga rasanya tangan pengen mencet � mencet keyboard. Tutorial kali ini, saya akan membahas tentang membuat spoiler pada blog.

Spoiler sendiri fungsinya adalah untuk memperkecil postingan, kode script atau tulisan agar tidak makan tempat. Sebenarnya sobat juga bisa menggunakan menu dengan fungsi scroll atau bisa juga dengan menggunakan text area untuk menghemat tempat dalam penulisan kode script atau gambar.

Spoiler ini bisa sobat letakkan di postingan, mungkin sobat gunakan untuk meletakkan kode script yang panjang. Atau bisa juga meletakkan di sidebar, header atau footer blog.

Contoh Spoiler:

Untuk membuat spoiler, silahkan sobat copy kode script nya dibawah ini :

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Spoiler</b>: <input value="Open" style="margin: 0px; padding: 0px; width: 55px; font-size: 11px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Letakkan kode script, HTML dan teks anda disini

Keterangan :

Untuk tulisan Open dan Close bisa sobat ganti sesuai keinginan.
Width : 55px untuk lebar spoiler.
Font-size: 11px untuk besar tulisan pada kotak spoiler.
Tulisan Spoiler adalah judul, silahkan ganti sesuai keinginan sobat.

Selamat mencoba ! Happy

Cara Membuat Tab View Menu

Untuk menghemat tempat, tab view menu sangat efisien. Ukuran yang relatif kecil tapi bisa memuat banyak space. Hal ini pernah ditanyakan oleh sobat blogger pada kolom shout box beberapa minggu yang lalu tentang bagaimana cara membuat menu yang bisa memuat banyak judul, mungkin menu tab view ini yang dimaksud ya.

Membuat menu dengan tab view memerlukan kode HTML yang lumayan panjang dan agak ribet, jadi sebaiknya simak baik � baik tutorial ini dan yang paling penting jangan lupa untuk backup template sobat terlebih dahulu.

Jika setelah jadi nanti lebar atau tinggi menu tidak sesuai, silahkan sobat sesuaikan sendiri dengan isi dari menu yang sobat gunakan. Karena jika tidak mengerti akan jadi berantakan atau terlihat jelek. Oke sob, sudah mengerti toh�mantaabbbbb kita langsung ke TKP.

Silahkan login ke blogger dengan ID sobat tentunya.
Tuju Tata Letak.
Klik Edit HTML.
Jangan lupa backup template sobat terlebih dahulu dengan mengklik Download Template Lengkap.
Kemudian letakkan kode javascript berikut sebelum kode </head>

<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i   = 0;

do
{
    if (Tab.tagName == "A")
    {
      i++;
      Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
      Tab.className = (i == id) ? "Active" : "";
      Tab.blur();
    }
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i    = 0;

do
{
    if (Page.className == 'Page')
    {
      i++;
      if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display = (i == id) ? 'block' : 'none';
    }
}
while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>
Setelah itu letakkan kode berikut di atas kode ]]></b:skin>

div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Lebar Menu Utama Atas */

text-align: center;
height: 30px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #000; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #E6E6E6; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
Kemudian Simpan Template.
Langkah selanjutnya, silahkan sobat klik Tata Letak.
Klik Elemen Halaman dan tambahkan Gadget.
Pilih yang HTML / Javascript, dan tambahkan kode berikut kedalamnya.

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>
Kemudian Simpan.

Keterangan :

Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan sobat sesuaikan dengan isi.
Kode yang berwarna biru silahkan sobat isi dengan judul - judul dari menu.
Dan yang berwarna ungu, adalah isi dari menu. Sobat bisa menambahkan link, gambar, banner, dll.

Oke sobat, selamat mencoba. smile_teeth

Modifikasi Label Cloud Dari Blogger

Beberapa waktu yang lalu, Blogger telah menambahkan fitur baru yaitu label cloud. Saya sendiri tidak tahu pasti kapan Blogger menambahkan fitur ini, setelah minggu lalu saya secara tidak sengaja ingin menampilkan label pada blog saya yang lain, saya melihat ada yang baru tapi lama.

Baru tapi lama ? iya dong, kan label cloud sudah sering kita jumpai tutorialnya di berbagai blog.

Setelah mencoba, rasanya fasilitas label cloud ini kurang menarik tampilannya. Saya mencoba untuk menambahkan beberapa kode pada HTML blog untuk merubah warna dan besarnya huruf pada label cloud ini.

Karena memang label cloud asli dari blogger ini warna dan hurufnya sangat standard atau terlihat biasa � biasa saja. Saya menambahkan beberapa warna kedalamnya, untuk mengetahuinya silahkan sobat ikuti langkahnya berikut ini.

Seperti biasa, sobat login ke blogger.
Klik Tata Letak.
Kemudian klik Edit HTML.
Backup dulu template sobat dengan mengklik Download Template Lengkap.
Kemudian letakkan kode berikut tepat diatas kode ]]></b:skin>

.label-size-1 a {
font-size: 13px;
text-decoration: none;
color:#4B8A08;
}
.label-size-2 a {
font-size: 15px;
text-decoration: none;
color:#DF0101;
}
.label-size-3 a {
font-size: 16px;font-family: Arial, Trebuchet MS, Verdana;text-decoration: none;
color:#045FB4;
}
.label-size-4 a {
font-size: 18px;
text-decoration: none;
color:#DF7401;
}
.label-size-5 a {
font-size: 23px;
text-decoration: none;
color:#045FB4;
}

.label-size-1 a:hover,
.label-size-2 a:hover,
.label-size-3 a:hover,
.label-size-4 a:hover,
.label-size-5 a:hover { text-decoration:underline;}
Kemudian Simpan Template.

Sekarang sobat bisa lihat hasilnya, ada beberapa warna yang saya tambahkan ke dalam label cloud tersebut. Untuk kode yang saya tandai dengan warna merah, sobat bisa ubah sendiri sesuai keinginan sobat. Kode warna bisa sobat lihat disini.

Selamat mencoba !! Wink

Pasang HTML Encode di Blogger

Barangkali sudah banyak diantara sobat blogger yang sudah tahu tentang cara memasang HTML Enconde pada Blogger. Tidak ada salahnya saya kupas kembali tentang tentang cara parse HTML yang mudah dan praktis tanpa harus menggunakan fasilitas Parse HTML Online dari situs Parse HTML.

Seperti situs http://www.blogcrowds.com/resources/parse_html.php termasuk yang paling saya suka karena sudah banyak membantu saya dalam memparse kode HTML dalam setiap postingan yang akan saya buat.

Bagaimana jika fasilitas tersebut ada dalam blogger? tentunya akan sangat memudahkan kita dalam menulis kode HTML di setiap postingan. Untuk memasang HTML Encode Selection pada Blogger sangat mudah, berikut langkah - langkahnya :

Download dahulu Greasemonkey 0.8.20090123.1 yang ada pada https://addons.mozilla.org/en-US/firefox/addon/748 atau sobat bisa klik disini. Kemudian setelah selesai menginstall, sobat restart browser milik sobat.
Kemudian install JavaScript berikut ini :
http://userscripts.org/scripts/source/42696.user.js

atau klik saja disini
Selesai sudah, sobat tinggal menggunakannya. Untuk menggunakan HTML Encode Selection, sobat blok kode HTML yang ingin di parse kemudian klik tombol HTML Encode Selection.

Tuing..muncullah kode HTML yang sudah di parse dan bisa sobat masukkan dalam postingan.

Sangat mudah dan praktis. Oke sob, selamat mencoba !

Cara Membuat Horizontal Menu Dropdown

Lagi-lagi tulisan lama saya angkat kedalam blog saya, sebenarnya saya agak malas menulis postingan ini, karena cukup panjang kode HTML-nya, tapi berhubung ada beberapa pertanyaan dari sobat blogger di kolom shoutbox, yang menanyakan tentang cara membuat menu horizontal seperti yang ada di blog saya, makanya sekalian saja saya tuliskan tentang horizontal menu dropdown buat sobat blogger.

Menu ini cukup panjang dan berhubungan dengan template, jadi saya sarankan untuk membackup template sobat terlebih dahulu sebelum mencoba tutorial ini. Sepertinya saya terlalu panjang lebar ya,

baiklah langsung saja kita menuju TKP.

Login ke Blogger.
Klik Tata Letak.
Klik Edit HTML.
Backup template sobat terlebih dahulu, silahkan klik Download Template Lengkap.
Contreng Expand Widget Template.
Cari kode </b:skin> dan letakkan kode berikut sebelum kode </b:skin>

.jqueryslidemenu{
font: bold 12px Trebuchet MS; 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;}
Kemudian letakkan kode berikut sebelum kode </head>



<script src='http://miscah.googlecode.com/files/jquery.min.js' type='text/javascript'/>
<script src='http://miscah.googlecode.com/files/slidemenu_horizontal.js' type='text/javascript'/>
Cari kode yang mirip seperti ini

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Judul Blog Sobat (Header)' type='Header'/>
</b:section>
</div>

kenapa saya bilang cari yang mirip, karena setiap template mempunyai karakter yang berbeda-beda dan tulisan yang saya tandai dengan warna merah adalah judul blog sobat.
Kemudian letakkan kode berikut tepat setelah kode diatas

<div class='jqueryslidemenu' id='myslidemenu'>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>Daftar Isi</a></li>
<li><a href='#'>Tutorial Blog</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>
</ul>
</li>
<li><a href='#'>Islam</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>
</ul>
</li>
<li><a href='#'>Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='http://kutu-blogspot.blogspot.com'>Link Exchange</a></li>
</ul>
<br style='clear: left'/>
</div>
Setelah itu Simpan Template sobat.

Kira-kira seperti itu kodenya, untuk yang saya tandai dengan tanda '#' sobat ganti sendiri dengan url yang sobat inginkan. Oke sob, selamat mencoba ya !

Tips Membuat Efek Marquee

Apa itu Marquee? mungkin buat blogger baru kata marquee tidak terlalu akrab di telinga, padahal efek marquee ini sering kita lihat pada website atau blog yang sering kita kunjungi. Marquee adalah kode HTML yang bisa membuat teks bisa berjalan, dari kiri, kanan, bawah ataupun atas.

Teks berjalan atau marquee ini banyak diminati oleh para blogger, karena sifatnya yang dinamis, selain untuk menghemat tempat juga bisa menarik pengunjung. Berikut ini ada beberapa contoh marquee yang bisa sobat gunakan untuk blog sobat.

I. Contoh Marquee dari gerakan

<MARQUEE align="center" direction="right" height="50" scrollamount="2" width="80%">

TEXT BERJALAN DARI KIRI KE KANAN

</MARQUEE>

Hasilnya :

TEXT BERJALAN DARI KIRI KE KANAN

Atribut yang biasa digunakan :

Widht = lebar blok teks dalam pixel atau persen
Title = pesan yang akan muncul saat mouse berada di atas teks
Direction = �left / right / up / down� untuk arah gerakan teks
Scrollmount = kecepatan gerakan dalam pixel, semakin besar angka semakin cepat gerakannya.
Bgcolor = warna background teks
Behavior = �scroll / slide / alternate� untuk mengatur perilaku gerakan

II. Contoh Marquee dari prilaku gerakan :

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

TEXT BERJALAN MENURUT PRILAKU

</MARQUEE>

Hasilnya :

TEXT BERJALAN MENURUT PRILAKU

III. Contoh Marquee yang didalamnya terdapat link :

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

<a href="http://kutu-blogspot.blogspot.com/2009/04/cara-pasang-search-engine-di-blog.html">Cara Pasang Search Engine </a>

<a href="http://kutu-blogspot.blogspot.com/2009/04/trik-membuat-read-more.html">Trik Membuat Read More (Template Baru) </a>

<a href="http://kutu-blogspot.blogspot.com/2009/04/membuat-favicon.html">Cara Membuat Favicon </a>

<a href="http://kutu-blogspot.blogspot.com/2009/04/cara-membuat-label-kategori.html">Cara Membuat Label (Kategori) </a>

<a href="http://kutu-blogspot.blogspot.com/2009/04/mengganti-template-blogspot.html">Mengganti Template Blogspot </a>

<a href="http://kutu-blogspot.blogspot.com/2009/04/cara-pasang-banner-di-blog.html">Cara Pasang Banner di Blogspot </a>

<a href="http://kutu-blogspot.blogspot.com/2009/04/tutorial-membuat-text-area.html">Tutorial Membuat Text Area </a>

<a href="http://kutu-blogspot.blogspot.com/2009/04/kode-html-tampil-di-postingan.html">Kode HTML Tampil di Postingan </a>

<a href="http://kutu-blogspot.blogspot.com/2009/04/link-berkelip-warna-warni.html">Link Berkelip Warna-Warni </a>

</marquee>

Hasilnya :
(arahkan mouse kesini)
Cara Pasang Search Engine

Trik Membuat Read More (Template Baru)

Cara Membuat Favicon

Cara Membuat Label (Kategori)

Mengganti Template Blogspot

Cara Pasang Banner di Blogspot

Tutorial Membuat Text Area

Kode HTML Tampil di Postingan

Link Berkelip Warna-Warni

Selamat Mencoba !

Kode HTML Tampil di Postingan

Para Blogger yang ingin menerangkan kepada pengunjung blog yang mengharuskan adanya kode HTML di dalam postingan pasti membutuhkan tips ini. Ada 2 cara membuat kode HTML muncul di dalam postingan blog kita.
Yang pertama dengan mengganti kode - kode HTML yang akan ditampilkan dengan notasi tertentu atau bisa dengan menggunakan cara text area.

Tapi saya tidak akan menggunakan 2 cara diatas, kita akan menggunakan cara yang paling mudah, yaitu dengan menggunakan fasilitas "Parse HTML" online.

Siapkan kode HTML yang ingin sobat tampilkan, kemudian klik disini
Masukkan kode HTML yang tadi sobat copy ke dalam kotak yang tersedia dan klik Parse

Sobat akan melihat kode yang telah di parse dan siap ditampilkan ke dalam postingan, seperti ini hasilnya :

<a href="http://kutu-blogspot.blogspot.com/2009/04/tutorial-membuat-text-area.html">Tutorial Membuat Text Area</a>

Untuk menampilkan di dalam postingan, sobat klik Edit HTML pada kotak post, kemudian masukkan kode yang sudah sobat parse, contoh gambarnya seperti ini :

Maka kode HTML tersebut akan tampil seperti dibawah ini :

<a href="http://kutu-blogspot.blogspot.com/2009/04/tutorial-membuat-text-area.html">Tutorial Membuat Text Area</a>

Untuk memperhalus hasil kode tersebut caranya sangat mudah, sobat tinggal memasukkan kode tersebut diantara kode HTML ini : <code>kode yang telah di parse</code>

Seperti ini hasil yang sudah diperhalus :

<a href="http://kutu-blogspot.blogspot.com/2009/04/tutorial-membuat-text-area.html">Tutorial Membuat Text Area</a>

Selamat Mencoba !

Kumpulan Tutorial Blogspot

Tips Blog | Tutorial Blog | Belajar Blog

Cara Membuat Efek Zoom Pada Gambar

Cara Membuat Efek Blur Pada Gambar

Menu Navigasi Horizontal

Cara Membuat Spoiler

Cara Membuat Tab View Menu

Modifikasi Label Cloud Dari Blogger

Pasang HTML Encode di Blogger

Cara Membuat Horizontal Menu Dropdown

Tips Membuat Efek Marquee

Kode HTML Tampil di Postingan

About Me

Followers

Sample Text

Sample text

Daily Categories

Test Footer 1

Test Footer

Comment

Stay connected

Random Post

Template Information

Test Footer

Ads 468x60px

Entri Populer

Social Icons

Blog Archive

Featured Posts