Main Game Super Go
Credit BY : Rifki Abidin
Credit BY : Rifki Abidin
Johny Crottube, Template Iseng Sambil Nunggu Jerman Vs Yunani
Daripada
bengong sambil nunggu pertandingan bola nanti malam dan mumpung besok
libur, mending ini saya bagi lagi satu template gratis buat Anda yang
suka mengkoleksi video dari Youtube. Template ini serial dari template Johny Crott, kali ini saya buat untuk versi konten video dan hanya dari Youtube. Template ini berbeda dengan template video Youtube saya sebelumnya Johny Jazzytube, karena disini saya hanya memanipulasi gambar dari iframe youtube untuk dijadikan thumbnail di homepage, dan masih menggunakan ytimg.com tapi untuk template ini diletakkan di dalam postingan bukan di Edit HTML template. Untuk lebih jelasnya perhatikan gambar untuk membuat postingan video di bawah ini :
- Masuk ke Youtube dan pilih video favorit anda.
- Kemudian klik share seperti langkah nomer 1, lalu klik embed tunggu hingga kodenya muncul.
- Perhatikan kotak yang saya centang pada nomer 3 diatas, disini Anda hanya mencentang pilihan atau opsi yang paling atas (Show suggested videos when the video finishes) biarkan yang lain kosong.
- Setelah itu ambil kode iframe Youtube seperti pada nomer 4 diatas, paste ke dalam postingan pada posisi Edit HTML bukan compose. Untuk ukuran panjang dan lebar video terserah silahkan Anda pilih sendiri.
- Video dari Youtube sudah nampak di postingan jika Anda preview, tapi thumbnailnya belum akan kelihatan di Homepage. Untuk menampilkan thumbnail di halaman depan (homepage) anda harus menambahkan kode ini setelah kode iframe dari Youtube :<iframe width="640" height="360" src="http://www.youtube.com/embed/8Pjh0visgJI" frameborder="0" allowfullscreen></iframe><img border="0" height="0" width="0" src="http://i2.ytimg.com/vi/kode seri video/0.jpg" />
- Kode yang saya cetak tebal diatas adalah kode yang harus Anda tambahkan setelah kode Iframe Youtube. Perhatikan tulisan kode seri video (warna merah), anda isi dengan kode seri warna merah diatasnya (8Pjh0visgJI). Kode seri video dari Youtube ini berbeda-beda untuk tiap video, jadi jika Anda memasukkan video jangan lupa untuk mengganti juga kode seri-nya harus sama dengan kode diatasnya. Dan postingan untuk video itu akan nampak seperti gambar di bawah ini :
Perhatikan kedua kode pada gambar dengan background biru diatas.
Pada template ini saya tambahkan fitur untuk tampilan Grid dan List style, dibawah ini adalah screenshot untuk tampilan grid dan list syle :
Sekarang untuk menampilkan widget Video Category yang ada pada template ini. Yang Anda harus lakukan hanya membuka widget Video Category 1 dan 2 kemudian masukkan/ketik label di dalam kotak HTML/Javascript seperti gambar di bawah ini :
Dari gambar diatas jazz adalah label yang saya tampilkan pada video category 1, Anda ganti dengan label yang diinginkan, demikian juga dengan widget Video Category 2.
Untuk mengaktifkan reply pada kotak komentar, masuk ke Edit HTML jangan lupa untuk mencentang kotak Expand Widgets Templates kemudian cari kode berikut :
<a expr:href='"https://www.blogger.com/comment.g?blogID=1128587339572285487&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>
Template ini juga dilengkapi fitur related video di
setiap postingan dan slider otomatis yang menampilkan postingan terbaru
Anda. Template ini bisa digunakan juga untuk konten gallery gambar
biasa, dan untuk video hanya khusus dari Youtube, tapi jika anda ingin
menambahkan video selain Youtube harus membuat thumbnail manual dulu
kemudian baru di upload saat buat postingan. Segitu dulu tutorial cara
instalasi untuk template Johny Crottube kali ini. Jika ada yang
mau ditanyakan silahkan tinggalkan pesan pada kotak komentar di bawah.
Selamat mencoba dan semoga bermanfaat.
Update Templates
My Google Code was banned, there's so many script that I put in there can't be opened. But I already fixed it with the updates ones, you can re-download this template or you can change some script below
Click this link and read subtitle "Update Template" in that post for the latest updates of Javascript
Daripada
bengong sambil nunggu pertandingan bola nanti malam dan mumpung besok
libur, mending ini saya bagi lagi satu template gratis buat Anda yang
suka mengkoleksi video dari Youtube. Template ini serial dari template Johny Crott, kali ini saya buat untuk versi konten video dan hanya dari Youtube. Template ini berbeda dengan template video Youtube saya sebelumnya Johny Jazzytube, karena disini saya hanya memanipulasi gambar dari iframe youtube untuk dijadikan thumbnail di homepage, dan masih menggunakan ytimg.com tapi untuk template ini diletakkan di dalam postingan bukan di Edit HTML template. Untuk lebih jelasnya perhatikan gambar untuk membuat postingan video di bawah ini :
- Masuk ke Youtube dan pilih video favorit anda.
- Kemudian klik share seperti langkah nomer 1, lalu klik embed tunggu hingga kodenya muncul.
- Perhatikan kotak yang saya centang pada nomer 3 diatas, disini Anda hanya mencentang pilihan atau opsi yang paling atas (Show suggested videos when the video finishes) biarkan yang lain kosong.
- Setelah itu ambil kode iframe Youtube seperti pada nomer 4 diatas, paste ke dalam postingan pada posisi Edit HTML bukan compose. Untuk ukuran panjang dan lebar video terserah silahkan Anda pilih sendiri.
- Video dari Youtube sudah nampak di postingan jika Anda preview, tapi thumbnailnya belum akan kelihatan di Homepage. Untuk menampilkan thumbnail di halaman depan (homepage) anda harus menambahkan kode ini setelah kode iframe dari Youtube :<iframe width="640" height="360" src="http://www.youtube.com/embed/8Pjh0visgJI" frameborder="0" allowfullscreen></iframe><img border="0" height="0" width="0" src="http://i2.ytimg.com/vi/kode seri video/0.jpg" />
- Kode yang saya cetak tebal diatas adalah kode yang harus Anda tambahkan setelah kode Iframe Youtube. Perhatikan tulisan kode seri video (warna merah), anda isi dengan kode seri warna merah diatasnya (8Pjh0visgJI). Kode seri video dari Youtube ini berbeda-beda untuk tiap video, jadi jika Anda memasukkan video jangan lupa untuk mengganti juga kode seri-nya harus sama dengan kode diatasnya. Dan postingan untuk video itu akan nampak seperti gambar di bawah ini :
Perhatikan kedua kode pada gambar dengan background biru diatas.
Pada template ini saya tambahkan fitur untuk tampilan Grid dan List style, dibawah ini adalah screenshot untuk tampilan grid dan list syle :
Sekarang untuk menampilkan widget Video Category yang ada pada template ini. Yang Anda harus lakukan hanya membuka widget Video Category 1 dan 2 kemudian masukkan/ketik label di dalam kotak HTML/Javascript seperti gambar di bawah ini :
Dari gambar diatas jazz adalah label yang saya tampilkan pada video category 1, Anda ganti dengan label yang diinginkan, demikian juga dengan widget Video Category 2.
Untuk mengaktifkan reply pada kotak komentar, masuk ke Edit HTML jangan lupa untuk mencentang kotak Expand Widgets Templates kemudian cari kode berikut :
<a expr:href='"https://www.blogger.com/comment.g?blogID=1128587339572285487&postID=" + data:post.id + "&isPopup=true&postBody=%40%3C%61%20%68%72%65%66%3D%22%23" + data:comment.anchorName + "%22%3E" + data:comment.author + "%3C%2F%61%3E#form"' onclick='javascript:window.open(this.href, "bloggerPopup", "toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=600,height=500"); return false;'>Reply</a>
Template ini juga dilengkapi fitur related video di
setiap postingan dan slider otomatis yang menampilkan postingan terbaru
Anda. Template ini bisa digunakan juga untuk konten gallery gambar
biasa, dan untuk video hanya khusus dari Youtube, tapi jika anda ingin
menambahkan video selain Youtube harus membuat thumbnail manual dulu
kemudian baru di upload saat buat postingan. Segitu dulu tutorial cara
instalasi untuk template Johny Crottube kali ini. Jika ada yang
mau ditanyakan silahkan tinggalkan pesan pada kotak komentar di bawah.
Selamat mencoba dan semoga bermanfaat.
Update Templates
My Google Code was banned, there's so many script that I put in there can't be opened. But I already fixed it with the updates ones, you can re-download this template or you can change some script below
Click this link and read subtitle "Update Template" in that post for the latest updates of Javascript
Membuat Menu Navigasi Horisontal dan Kotak Pencari di Blog
Menu
Navigasi pada blog merupakan elemen yang perlu diperhatikan di dalam
sebuah blog yang mementingkan penampilan dan style untuk setiap
detilnya. Ada bermacam-macam bentuk menu navigasi di dalam sebuah blog
itu, ada menu navigasi horizontal, menu navigasi vertikal atau yang
lainya. Selain menggunakan menu horisontal drop down menu,
kita juga bisa membuat menu horisontal sederhana (tanpa cabang)
ataupun membuat menu horisotal bercabang dengan script css. Seperti
yang telah saya buat dalam postingan sebelumnya tentang menu horisontal versi dynamic drive, maka kali ini akan dibuat versi css menu maker. Tampilan menunya bisa dilihat pada gambar di bawah ini.
Untuk membuatnya bisa lakukan posedur berikut:
1. Login ke menu blogger. Klik Design -> Edit HTML
2. Backup template anda
3. Setelah itu, letakkan kode dibawah ini diatas ]]></b:skin>
/*-- (Nav & Search Box) --*/
#nav{
background: #1c426d; /* Warna backgroud Kotak Navigasi */
height:31px; /* Tinggi Kotak Navigasi */
padding:0px;
margin-bottom:5px
}
#nav-left{
float:left;
display:inline;
width:580px
}
#nav-right{
float:right;
display:inline;
width:275px;
padding:1px 0px 0px 0px;
}
#nav ul{
position:relative;
overflow:hidden;
padding-left:5px;
padding-top:1px;
margin:0;
font:1.1em /* Ukuran font tab navigasi */
Arial,Helvetica,sans-serif;
font-weight: bold;
}
#nav ul li{
float:left;
list-style:none
}
#nav ul li a, #nav ul li a:visited{
display:block;
color:#ffffff; /* Warna teks pada kotak navigasi */
margin:0 8px;
padding:5px 7px
}
#nav ul li a:hover{
color:#ffffff;
background-color:#C4C5B8; /* Warna kotak ketika kursor melintasi teks navigasi */
margin:0 8px;
padding:5px 7px
}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#A6A994; color:#ffffff; padding:5px 7px}
#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
background: #EEE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis2Fqq3j03dxR6Tiel8BLuqc-E-RfD2sY5-9GSXf1Tu3qZj7J5s_BCQbhuLdGhmV7pOYTVqKy5lkcTxjREOJBiQ4br5O59hD-Li5DUb0hABqhqrN1ILQfmmYVk4Riul2e6HVpGGFUTtQkn/) no-repeat left top;
width: 180px;
height: 16px;
color: #202020;
font-size: 12px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-weight: normal;
margin: 2px 0px 0px 15px;
padding: 4px 0px 3px 25px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
display: inline;
#searchbutton {
background: #1c426d; /* Warna background tombol pencari */
color: #FFF; /* Warna teks tombol pencari */
font-size: 11px;
font-family:Verdana,Arial,Helvetica,sans-serif;
margin: 0px;
padding: 3px 0px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}
#nav{
background: #1c426d; /* Warna backgroud Kotak Navigasi */
height:31px; /* Tinggi Kotak Navigasi */
padding:0px;
margin-bottom:5px
}
#nav-left{
float:left;
display:inline;
width:580px
}
#nav-right{
float:right;
display:inline;
width:275px;
padding:1px 0px 0px 0px;
}
#nav ul{
position:relative;
overflow:hidden;
padding-left:5px;
padding-top:1px;
margin:0;
font:1.1em /* Ukuran font tab navigasi */
Arial,Helvetica,sans-serif;
font-weight: bold;
}
#nav ul li{
float:left;
list-style:none
}
#nav ul li a, #nav ul li a:visited{
display:block;
color:#ffffff; /* Warna teks pada kotak navigasi */
margin:0 8px;
padding:5px 7px
}
#nav ul li a:hover{
color:#ffffff;
background-color:#C4C5B8; /* Warna kotak ketika kursor melintasi teks navigasi */
margin:0 8px;
padding:5px 7px
}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#A6A994; color:#ffffff; padding:5px 7px}
#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
background: #EEE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis2Fqq3j03dxR6Tiel8BLuqc-E-RfD2sY5-9GSXf1Tu3qZj7J5s_BCQbhuLdGhmV7pOYTVqKy5lkcTxjREOJBiQ4br5O59hD-Li5DUb0hABqhqrN1ILQfmmYVk4Riul2e6HVpGGFUTtQkn/) no-repeat left top;
width: 180px;
height: 16px;
color: #202020;
font-size: 12px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-weight: normal;
margin: 2px 0px 0px 15px;
padding: 4px 0px 3px 25px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
display: inline;
#searchbutton {
background: #1c426d; /* Warna background tombol pencari */
color: #FFF; /* Warna teks tombol pencari */
font-size: 11px;
font-family:Verdana,Arial,Helvetica,sans-serif;
margin: 0px;
padding: 3px 0px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}
Keterangan:
Tulisan berwarna merah diatas merupakan keterangan dari masing-masing kode. Silahkan ganti sesuai dengan template anda.
Jika anda ingin mengganti background menu navigasi dengan gambar, maka tambahkan kode url(alamat gambar anda) dibelakang kode "warna background kotak navigasi". Contohnya:
background: #1c426d url(http://url-gambar);4. Setelah itu cari kode seperti dibawah ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Creating Website (Header)' type='Header'/>
</b:section>
<div style='clear: both'/>
</div>
Cari kode di template anda yang paling mendekati dengan kode diatas<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Creating Website (Header)' type='Header'/>
</b:section>
<div style='clear: both'/>
</div>
5. Kalau sudah ketemu, letakkan kode berikut dibawahnya.
<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:widget id='HTML30' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='250' name='q' onblur='if (this.value == "") {this.value = "cari artikel disini...";}' onfocus='if (this.value == "cari artikel disini...") {this.value = ""}' type='text' value='cari artikel disini...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<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:widget id='HTML30' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='250' name='q' onblur='if (this.value == "") {this.value = "cari artikel disini...";}' onfocus='if (this.value == "cari artikel disini...") {this.value = ""}' type='text' value='cari artikel disini...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
6. Sehingga susunannya menjadi seperti ini:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Creating Website (Header)' type='Header'/>
</b:section>
<div style='clear: both'/>
</div>
<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:widget id='HTML30' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input
id='searchbox' maxlength='250' name='q' onblur='if (this.value ==
"") {this.value = "cari artikel
disini...";}' onfocus='if (this.value == "cari
artikel disini...") {this.value = ""}'
type='text' value='cari artikel disini...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
7. Kalau sudah, Save Template lalu lihat hasilnya.
Jika anda tidak mau menggunakan kotak
pencari tinggal hapus kode yang dicetak tebal. Beres. Untuk menambah
link pada menu navigasi. Buka menu Page Element lalu klik Edit pada "Top Tabs". Tambahkan link yang ingin anda tampilkan disana.
Selamat mencoba. Semoga bermanfaat.
Menu
Navigasi pada blog merupakan elemen yang perlu diperhatikan di dalam
sebuah blog yang mementingkan penampilan dan style untuk setiap
detilnya. Ada bermacam-macam bentuk menu navigasi di dalam sebuah blog
itu, ada menu navigasi horizontal, menu navigasi vertikal atau yang
lainya. Selain menggunakan menu horisontal drop down menu,
kita juga bisa membuat menu horisontal sederhana (tanpa cabang)
ataupun membuat menu horisotal bercabang dengan script css. Seperti
yang telah saya buat dalam postingan sebelumnya tentang menu horisontal versi dynamic drive, maka kali ini akan dibuat versi css menu maker. Tampilan menunya bisa dilihat pada gambar di bawah ini.
Untuk membuatnya bisa lakukan posedur berikut:
1. Login ke menu blogger. Klik Design -> Edit HTML
2. Backup template anda
3. Setelah itu, letakkan kode dibawah ini diatas ]]></b:skin>
/*-- (Nav & Search Box) --*/
#nav{
background: #1c426d; /* Warna backgroud Kotak Navigasi */
height:31px; /* Tinggi Kotak Navigasi */
padding:0px;
margin-bottom:5px
}
#nav-left{
float:left;
display:inline;
width:580px
}
#nav-right{
float:right;
display:inline;
width:275px;
padding:1px 0px 0px 0px;
}
#nav ul{
position:relative;
overflow:hidden;
padding-left:5px;
padding-top:1px;
margin:0;
font:1.1em /* Ukuran font tab navigasi */
Arial,Helvetica,sans-serif;
font-weight: bold;
}
#nav ul li{
float:left;
list-style:none
}
#nav ul li a, #nav ul li a:visited{
display:block;
color:#ffffff; /* Warna teks pada kotak navigasi */
margin:0 8px;
padding:5px 7px
}
#nav ul li a:hover{
color:#ffffff;
background-color:#C4C5B8; /* Warna kotak ketika kursor melintasi teks navigasi */
margin:0 8px;
padding:5px 7px
}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#A6A994; color:#ffffff; padding:5px 7px}
#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
background: #EEE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis2Fqq3j03dxR6Tiel8BLuqc-E-RfD2sY5-9GSXf1Tu3qZj7J5s_BCQbhuLdGhmV7pOYTVqKy5lkcTxjREOJBiQ4br5O59hD-Li5DUb0hABqhqrN1ILQfmmYVk4Riul2e6HVpGGFUTtQkn/) no-repeat left top;
width: 180px;
height: 16px;
color: #202020;
font-size: 12px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-weight: normal;
margin: 2px 0px 0px 15px;
padding: 4px 0px 3px 25px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
display: inline;
#searchbutton {
background: #1c426d; /* Warna background tombol pencari */
color: #FFF; /* Warna teks tombol pencari */
font-size: 11px;
font-family:Verdana,Arial,Helvetica,sans-serif;
margin: 0px;
padding: 3px 0px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}
#nav{
background: #1c426d; /* Warna backgroud Kotak Navigasi */
height:31px; /* Tinggi Kotak Navigasi */
padding:0px;
margin-bottom:5px
}
#nav-left{
float:left;
display:inline;
width:580px
}
#nav-right{
float:right;
display:inline;
width:275px;
padding:1px 0px 0px 0px;
}
#nav ul{
position:relative;
overflow:hidden;
padding-left:5px;
padding-top:1px;
margin:0;
font:1.1em /* Ukuran font tab navigasi */
Arial,Helvetica,sans-serif;
font-weight: bold;
}
#nav ul li{
float:left;
list-style:none
}
#nav ul li a, #nav ul li a:visited{
display:block;
color:#ffffff; /* Warna teks pada kotak navigasi */
margin:0 8px;
padding:5px 7px
}
#nav ul li a:hover{
color:#ffffff;
background-color:#C4C5B8; /* Warna kotak ketika kursor melintasi teks navigasi */
margin:0 8px;
padding:5px 7px
}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#A6A994; color:#ffffff; padding:5px 7px}
#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
background: #EEE url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEis2Fqq3j03dxR6Tiel8BLuqc-E-RfD2sY5-9GSXf1Tu3qZj7J5s_BCQbhuLdGhmV7pOYTVqKy5lkcTxjREOJBiQ4br5O59hD-Li5DUb0hABqhqrN1ILQfmmYVk4Riul2e6HVpGGFUTtQkn/) no-repeat left top;
width: 180px;
height: 16px;
color: #202020;
font-size: 12px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-weight: normal;
margin: 2px 0px 0px 15px;
padding: 4px 0px 3px 25px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
display: inline;
#searchbutton {
background: #1c426d; /* Warna background tombol pencari */
color: #FFF; /* Warna teks tombol pencari */
font-size: 11px;
font-family:Verdana,Arial,Helvetica,sans-serif;
margin: 0px;
padding: 3px 0px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}
Keterangan:
Tulisan berwarna merah diatas merupakan keterangan dari masing-masing kode. Silahkan ganti sesuai dengan template anda.
Jika anda ingin mengganti background menu navigasi dengan gambar, maka tambahkan kode url(alamat gambar anda) dibelakang kode "warna background kotak navigasi". Contohnya:
background: #1c426d url(http://url-gambar);4. Setelah itu cari kode seperti dibawah ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Creating Website (Header)' type='Header'/>
</b:section>
<div style='clear: both'/>
</div>
Cari kode di template anda yang paling mendekati dengan kode diatas<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Creating Website (Header)' type='Header'/>
</b:section>
<div style='clear: both'/>
</div>
5. Kalau sudah ketemu, letakkan kode berikut dibawahnya.
<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:widget id='HTML30' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='250' name='q' onblur='if (this.value == "") {this.value = "cari artikel disini...";}' onfocus='if (this.value == "cari artikel disini...") {this.value = ""}' type='text' value='cari artikel disini...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
<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:widget id='HTML30' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='250' name='q' onblur='if (this.value == "") {this.value = "cari artikel disini...";}' onfocus='if (this.value == "cari artikel disini...") {this.value = ""}' type='text' value='cari artikel disini...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
6. Sehingga susunannya menjadi seperti ini:
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Creating Website (Header)' type='Header'/>
</b:section>
<div style='clear: both'/>
</div>
<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:widget id='HTML30' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input
id='searchbox' maxlength='250' name='q' onblur='if (this.value ==
"") {this.value = "cari artikel
disini...";}' onfocus='if (this.value == "cari
artikel disini...") {this.value = ""}'
type='text' value='cari artikel disini...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
7. Kalau sudah, Save Template lalu lihat hasilnya.
Jika anda tidak mau menggunakan kotak
pencari tinggal hapus kode yang dicetak tebal. Beres. Untuk menambah
link pada menu navigasi. Buka menu Page Element lalu klik Edit pada "Top Tabs". Tambahkan link yang ingin anda tampilkan disana.
Selamat mencoba. Semoga bermanfaat.
Merubah Warna Link Pada Blogspot
- Login ke Blogger => Rancangan => Edit HTML, kasih centang pada Expand Template Widget;
- Cari kode ini a:link { contoh struktur kode yang ada di template blog ini:
a:link {
color: #0AF251;
color:#04B33A;
text-decoration:none;
} - Gantilah kode color (warna) sesuai selera Anda;
- Save Template, lalu perhatikan apa yang terjadi? selesai.
Itu tadi adalah penjelasan tentang mengganti warna
link dari saya, gampang kan? Oh ya sering-sering aja nanya biar saya
nggak pusing-pusing cari materi buat posting blog ini, tapi yang
ditanyakan sebaiknya seputar blog ini, kalau diluar itu berarti saya
harus googling dulu atau menjawab dengan jawaban "saya tidak tahu",
maklum masih belajar juga.
Semoga bermanfaat
- Login ke Blogger => Rancangan => Edit HTML, kasih centang pada Expand Template Widget;
- Cari kode ini a:link { contoh struktur kode yang ada di template blog ini:
a:link {
color: #0AF251;
color:#04B33A;
text-decoration:none;
} - Gantilah kode color (warna) sesuai selera Anda;
- Save Template, lalu perhatikan apa yang terjadi? selesai.
Itu tadi adalah penjelasan tentang mengganti warna
link dari saya, gampang kan? Oh ya sering-sering aja nanya biar saya
nggak pusing-pusing cari materi buat posting blog ini, tapi yang
ditanyakan sebaiknya seputar blog ini, kalau diluar itu berarti saya
harus googling dulu atau menjawab dengan jawaban "saya tidak tahu",
maklum masih belajar juga.
Semoga bermanfaat
5 Template Hasil Modifikasi
Belakangan ini saya agak sibuk dengan pekerjaan saya di dunia nyata, jadi hanya punya waktu
Cara Gampang Template
Johny Ganteng Store With Cart
Johny Kenthir Green
Johny Crottmag
sedikit
untuk aktivitas blogging, saya minta maaf jika banyak komentar yang
masuk belum terjawab. Pada postingan kali ini saya hanya akan berbagi 5
template hasil modifikasi dari template saya sebelumnya, 2 dari teman
blogger yaitu dari AA Sholah dan Panjz Online dan 3 lagi
dari adik saya. Karena dari beberapa template yang sudah saya buat
mungkin ada kekurangcocokan dalam hal warna atau fitur yang kurang.
Berikut ini 5 template hasil modifikasi dari template saya sebelumnya :
Cara Gampang Template
- Cara pemasangan widget pada template ini hampir sama dengan Black Beauty Template, untuk lebih jelasnya silahkan buka lagi artikel 3 template paling sompret di dunia
- Untuk mengaktifkan fungsi Reply pada komentar tinggal ganti ID ini (3553200374686839922)
- Untuk mengganti FansPage Facebook yang ada di bawah postingan, tinggal ganti ID ini (175220759192447) dengan ID FansPage masing-masing.
Template ini buatan Panjz Online, untuk pemasangan templatenya langsung saja ke blog si pembuat disini http://panjz-online.blogspot.com/
Johny Ganteng Store With Cart
Dari beberapa komentar yang masuk pada artikel 2 Template Toko Online Semrawut,
banyak yang mengingkan template Johny Ganteng Store menggunakan cart
dan slider carousel. Ini sudah saya modifikasi, tapi nggak tahu cocok
apa nggak.
Cara pasang widget sama dengan template Johny Ganteng Store, silahkan buka lagi artikel 2 Template Toko Online Tanpa Cart. Dan untuk cartnya sendiri untuk memodifikasinya saya pakai dari Johny Blackstore template.
Johny Kenthir Green
Pemasangan widget pada template ini sama dengan Johny Kenthir template, silahkan dibuka lagi artikelnya disini Johny Kenthir, Template Ramai Seperti Pasar Tradisional.
Johny Crottmag
Template ini sama persisi dengan Johny Sompret Banget cuma beda warna saja, untuk pemasangannya silagkan dilihat disini 2 Template Kurang Kerjaan.
So jika ada di antara teman-teman blogger yang berkeinginan untuk
membagikan template hasil karya sendiri ataupun modifikasi template yang
sudah ada, silahkan kirim ke email saya disini ncmajid@gmail.com. Jika
template itu sudah bebas dari bug dan layak untuk dikonsumsi, akan saya publish disini. Demikian tadi artikel singkat tentang 5 template modifikasi,
bagi yang berminat silahkan dipakai. Jika ada yang kurang jelas bisa
langsung ditanyakan lewat kotak komenta. Semoga bermanfaat.........
Oya saya mau tanya bagi teman-teman yang tahu, saya sering jumpai kata ini cmiiw biasanya ada pada akhir komentar, itu artinya apa ya?
NB : Untuk mas Sholah dan Panjz Online diharap untuk menjawab pertanyaan seputar template yang Anda buat ya.
Belakangan ini saya agak sibuk dengan pekerjaan saya di dunia nyata, jadi hanya punya waktu
Cara Gampang Template
Johny Ganteng Store With Cart
Johny Kenthir Green
Johny Crottmag
sedikit
untuk aktivitas blogging, saya minta maaf jika banyak komentar yang
masuk belum terjawab. Pada postingan kali ini saya hanya akan berbagi 5
template hasil modifikasi dari template saya sebelumnya, 2 dari teman
blogger yaitu dari AA Sholah dan Panjz Online dan 3 lagi
dari adik saya. Karena dari beberapa template yang sudah saya buat
mungkin ada kekurangcocokan dalam hal warna atau fitur yang kurang.
Berikut ini 5 template hasil modifikasi dari template saya sebelumnya :
Cara Gampang Template
- Cara pemasangan widget pada template ini hampir sama dengan Black Beauty Template, untuk lebih jelasnya silahkan buka lagi artikel 3 template paling sompret di dunia
- Untuk mengaktifkan fungsi Reply pada komentar tinggal ganti ID ini (3553200374686839922)
- Untuk mengganti FansPage Facebook yang ada di bawah postingan, tinggal ganti ID ini (175220759192447) dengan ID FansPage masing-masing.
Template ini buatan Panjz Online, untuk pemasangan templatenya langsung saja ke blog si pembuat disini http://panjz-online.blogspot.com/
Johny Ganteng Store With Cart
Dari beberapa komentar yang masuk pada artikel 2 Template Toko Online Semrawut,
banyak yang mengingkan template Johny Ganteng Store menggunakan cart
dan slider carousel. Ini sudah saya modifikasi, tapi nggak tahu cocok
apa nggak.
Cara pasang widget sama dengan template Johny Ganteng Store, silahkan buka lagi artikel 2 Template Toko Online Tanpa Cart. Dan untuk cartnya sendiri untuk memodifikasinya saya pakai dari Johny Blackstore template.
Johny Kenthir Green
Pemasangan widget pada template ini sama dengan Johny Kenthir template, silahkan dibuka lagi artikelnya disini Johny Kenthir, Template Ramai Seperti Pasar Tradisional.
Johny Crottmag
Template ini sama persisi dengan Johny Sompret Banget cuma beda warna saja, untuk pemasangannya silagkan dilihat disini 2 Template Kurang Kerjaan.
So jika ada di antara teman-teman blogger yang berkeinginan untuk
membagikan template hasil karya sendiri ataupun modifikasi template yang
sudah ada, silahkan kirim ke email saya disini ncmajid@gmail.com. Jika
template itu sudah bebas dari bug dan layak untuk dikonsumsi, akan saya publish disini. Demikian tadi artikel singkat tentang 5 template modifikasi,
bagi yang berminat silahkan dipakai. Jika ada yang kurang jelas bisa
langsung ditanyakan lewat kotak komenta. Semoga bermanfaat.........
Oya saya mau tanya bagi teman-teman yang tahu, saya sering jumpai kata ini cmiiw biasanya ada pada akhir komentar, itu artinya apa ya?
NB : Untuk mas Sholah dan Panjz Online diharap untuk menjawab pertanyaan seputar template yang Anda buat ya.
Membuat Label Bergerak (Blogumulus) di Blogspot
Tahukah
temen-temen apa itu blogumulus? Blogumulus itu adalah label widget yang
dibuat dengan basis flash animation. Widget ini akanb eraksi kalo
pointer mouse dideketin ke widget ini. Pertama kali Blogumulus
diciptakan oleh Roy Tankc tapi cuma terbatas untuk kaum pengguna
Wordpress dan ngga mungkin untuk di pakai didalam Blogger. Tapi
sekarang Amanda Fazani udah menyempurnakan widget ini sehingga bisa
dipake di dalam blogger.
Ok..! langsung saja sebelum kita mengenal label itu saya ingin mengucapkan terima kasih kepada Roy Tanck karena hasil karyanyalah label ini tercipta. Bagi yang belum mengetahui nama label tersebut saya akan memberitahukan label itu bernama Blogumulus atau sebagian orang mengucapkannya Blogumus itu..? Blogumulus itu awalnya diciptakan untuk pengguna Wordpress yang bernama Tag-Cumulus widget ini yang berbasis flash sehingga bisa dianimasikan. dan karena untuk saat ini sudah bisa dipakai di BLOGGER berkat kreatifitas Amanda Fazani, sebagai pengguna mesin blogger kita bisa memasang widget tersebut di blog kita. Thank's to Amanda Fazani atas kreatifitasnya. maka dirubahlah namanya menjadi Blogumulus Untuk melihat seperti apa label animasi ini,
Oke, bagi anda yang tertarik untuk memasang label animasi atau label
flash ini, kita langsung menuju pada langkah-langkahnya.
- Login ke blogger dengan ID anda.
- Klik Tata Letak.
- KLik tab Edit HTML.
- Klik tulisan Download Template Lengkap (ini untuk memback-up bila terjadi kesalahan). agar templatenya aman.
- Cari kode yang mirip dengan kode di bawah ini :
- Copy kode di bawah ini kemudian taruh kode tersebut (paste) dibawah kode di atas.
- Kemudian Save Template anda.
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label99' 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'> <script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/> <div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a> Posted by <a href='http://adesyams.blogspot.com/'>Ade'S Tricks</a></div> <script type='text/javascript'> var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff"); // uncomment next line to enable transparency //so.addParam("wmode", "transparent"); so.addVariable("tcolor", "0x333333"); so.addVariable("mode", "tags"); so.addVariable("distr", "true"); so.addVariable("tspeed", "100"); so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>"); so.addParam("allowScriptAccess", "always"); so.write("flashcontent"); </script> <b:include name='quickedit'/> </div> </b:includable> </b:widget>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
so.addVariable("tcolor", "0x333333");"tcolor" adalah flash variable, jadi pastikan hanya mengganti angkanya saja. Merubah ukuran font. Variable untuk lebar dan tinggi ada pada baris script berikut,
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
//so.addParam("wmode", "transparent");Nah, silahkan anda ganti kode-kode pada variabel di atas sesuai dengan kebutuhan template anda.
Semoga Berhasil.
Tahukah
temen-temen apa itu blogumulus? Blogumulus itu adalah label widget yang
dibuat dengan basis flash animation. Widget ini akanb eraksi kalo
pointer mouse dideketin ke widget ini. Pertama kali Blogumulus
diciptakan oleh Roy Tankc tapi cuma terbatas untuk kaum pengguna
Wordpress dan ngga mungkin untuk di pakai didalam Blogger. Tapi
sekarang Amanda Fazani udah menyempurnakan widget ini sehingga bisa
dipake di dalam blogger.
Ok..! langsung saja sebelum kita mengenal label itu saya ingin mengucapkan terima kasih kepada Roy Tanck karena hasil karyanyalah label ini tercipta. Bagi yang belum mengetahui nama label tersebut saya akan memberitahukan label itu bernama Blogumulus atau sebagian orang mengucapkannya Blogumus itu..? Blogumulus itu awalnya diciptakan untuk pengguna Wordpress yang bernama Tag-Cumulus widget ini yang berbasis flash sehingga bisa dianimasikan. dan karena untuk saat ini sudah bisa dipakai di BLOGGER berkat kreatifitas Amanda Fazani, sebagai pengguna mesin blogger kita bisa memasang widget tersebut di blog kita. Thank's to Amanda Fazani atas kreatifitasnya. maka dirubahlah namanya menjadi Blogumulus Untuk melihat seperti apa label animasi ini,
Oke, bagi anda yang tertarik untuk memasang label animasi atau label
flash ini, kita langsung menuju pada langkah-langkahnya.
- Login ke blogger dengan ID anda.
- Klik Tata Letak.
- KLik tab Edit HTML.
- Klik tulisan Download Template Lengkap (ini untuk memback-up bila terjadi kesalahan). agar templatenya aman.
- Cari kode yang mirip dengan kode di bawah ini :
- Copy kode di bawah ini kemudian taruh kode tersebut (paste) dibawah kode di atas.
- Kemudian Save Template anda.
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Label99' 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'> <script src='http://halotemplates.s3.amazonaws.com/wp-cumulus-example/swfobject.js' type='text/javascript'/> <div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a> Posted by <a href='http://adesyams.blogspot.com/'>Ade'S Tricks</a></div> <script type='text/javascript'> var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff"); // uncomment next line to enable transparency //so.addParam("wmode", "transparent"); so.addVariable("tcolor", "0x333333"); so.addVariable("mode", "tags"); so.addVariable("distr", "true"); so.addVariable("tspeed", "100"); so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>"); so.addParam("allowScriptAccess", "always"); so.write("flashcontent"); </script> <b:include name='quickedit'/> </div> </b:includable> </b:widget>
var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");
so.addVariable("tcolor", "0x333333");"tcolor" adalah flash variable, jadi pastikan hanya mengganti angkanya saja. Merubah ukuran font. Variable untuk lebar dan tinggi ada pada baris script berikut,
so.addVariable("tagcloud", "<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>");
//so.addParam("wmode", "transparent");Nah, silahkan anda ganti kode-kode pada variabel di atas sesuai dengan kebutuhan template anda.
Semoga Berhasil.
Membuat Menu Drop Down di Blogspot
Kemarin saya
ditanya oleh seorang temen, apa itu menu drop down dan bagaimana cara
membuatnya. Perlu teman-teman semua ketahui menu drop down adalah menu
horisontal yang terdapat di bawah header blog. Dan apabila mouse kita
letakkan ke salah satu menu tersebut akan muncul sub menu yang
susunannya ke bawah. yang tentunya menu yang berkaitan Ah... pokoknya
gitulah menurut pengertian saya. Untuk lebih jelasnya temen-temen semua
dapat lihat disini. Bagaimana menarik kan?
Untuk cara membuatnya, saya akan jelaskan satu persatu, perhatikan baik-baik ya..........
1. Cari kode berikut ]]></b:skin>2. Lalu letakkan kode berikut ini.
#navdropdownmenu{background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqQxmOqnl9npmPpLwVLTjY47OhNTBkVJ8lyn5g3vBgXTiloKMchZsDGgVRw3Q9Ov7YU9yuuB2OZvFHFRnrc39WyHXQED6sY32bl3zDxVJ-A56oTBjXOcTGsupYyottT7-EtzUmXh1O6U4b/s800/navbar.gif) repeat-x top;width:700px;height:auto;margin:0;padding:0;border-top: 1px solid #AFAFAF;border-bottom: 1px solid #FFFFFF;}#navdropdownmenu ul{float:left;list-style:none;margin:0;padding:0;}#navdropdownmenu li{list-style:none;float:left;}#navdropdownmenu li a, #navdropdownmenu li a:link, #navdropdownmenu li a:visited{color:#000000;font-weight:bold;display:block;text-shadow: 0px 1px 1px #fff;padding:9px 10px 9px 10px;font-size: 12px;font-family: verdana;text-decoration:none;}#navdropdownmenu li a:hover{background:#9f9f9f;color:#ffffff;}#navdropdownmenu li ul{z-index:10;position:absolute;height:auto;width:200px;visibility:hidden;}#navdropdownmenu li ul li a, #navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{float:none;background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqQxmOqnl9npmPpLwVLTjY47OhNTBkVJ8lyn5g3vBgXTiloKMchZsDGgVRw3Q9Ov7YU9yuuB2OZvFHFRnrc39WyHXQED6sY32bl3zDxVJ-A56oTBjXOcTGsupYyottT7-EtzUmXh1O6U4b/s800/navbar.gif) repeat-x top;width:200px;border-width:1px;border-style:solid;border-color:#575757;}#navdropdownmenu li ul li a:hover{background:#000000;color:#ffffff;}#navdropdownmenu li:hover ul{left:auto;visibility:visible;
}
Oya,. jika anda telah menggunakan navigasi menu yang biasa, hapuslah semua kode CSS dari navigasi menu tersebut.
3. Cari kode yang mirip dengan kode dibawah.
<div id='header-wrapper'>4. Dibawahnya, ketikkan kode berikut.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='It's a Hardlife' type='Header'/></b:section></div>
<div id='navdropdownmenu'><ul id='navdropdownmenu'><li><a href='http://wongsuruh.blogspot.com/search?max-results=1000'>Daftar Isi</a></li><li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Norah Jones</a><ul><li><a href='#'>Don't Know Why</a></li><li><a href='#'>Feelin The Same Way</a></li><li><a href='#'>Come Away With Me</a></li></ul></li><li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Sting</a><ul><li><a href='#'>Englishman In Newyork</a></li><li><a href='#'>Shape Of My Heart</a></li><li><a href='#'>Fields Of Gold</a></li><li><a href='#'>If I Ever Lose My Faith In You</a></li><li><a href='#'>Fragile</a></li><li><a href='#'>Desert Rose</a></li></ul></li><li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Sade</a><ul><li><a href='#'>Smooth Operator</a></li><li><a href='#'>Kiss Of Life</a></li><li><a href='#'>Your Love Is King</a></li></ul></li><li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Alanis</a><ul><li><a href='#'>That I Would Be Good</a></li><li><a href='#'>Front Row</a></li><li><a href='#'>One</a></li></ul></li><li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Meja</a><ul><li><a href='#'>Dindi</a></li><li><a href='#'>Venus</a></li><li><a href='#'>Red Light</a></li><li><a href='#'>The One</a></li><li><a href='#'>Circle Game</a></li><li><a href='#'>Aqua de Beber</a></li></ul></li>
</ul>
</div>
Gantilah tulisan http://wongsuruh.blogspot.com dengan link yang anda inginkan dengan url yang anda inginkan. Anda bisa menambah atau mengurangi jumlah kode tersebut.
5. Klik Simpan Template.
Gampang bukan, jika ada yang mau ditanyakan isi aja kotak komentar yang ada di bawah, saya akan berusaha menjawabnya.
Semoga bermanfaat......
Kemarin saya
ditanya oleh seorang temen, apa itu menu drop down dan bagaimana cara
membuatnya. Perlu teman-teman semua ketahui menu drop down adalah menu
horisontal yang terdapat di bawah header blog. Dan apabila mouse kita
letakkan ke salah satu menu tersebut akan muncul sub menu yang
susunannya ke bawah. yang tentunya menu yang berkaitan Ah... pokoknya
gitulah menurut pengertian saya. Untuk lebih jelasnya temen-temen semua
dapat lihat disini. Bagaimana menarik kan?
Untuk cara membuatnya, saya akan jelaskan satu persatu, perhatikan baik-baik ya..........
1. Cari kode berikut ]]></b:skin>2. Lalu letakkan kode berikut ini.
#navdropdownmenu{background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqQxmOqnl9npmPpLwVLTjY47OhNTBkVJ8lyn5g3vBgXTiloKMchZsDGgVRw3Q9Ov7YU9yuuB2OZvFHFRnrc39WyHXQED6sY32bl3zDxVJ-A56oTBjXOcTGsupYyottT7-EtzUmXh1O6U4b/s800/navbar.gif) repeat-x top;width:700px;height:auto;margin:0;padding:0;border-top: 1px solid #AFAFAF;border-bottom: 1px solid #FFFFFF;}#navdropdownmenu ul{float:left;list-style:none;margin:0;padding:0;}#navdropdownmenu li{list-style:none;float:left;}#navdropdownmenu li a, #navdropdownmenu li a:link, #navdropdownmenu li a:visited{color:#000000;font-weight:bold;display:block;text-shadow: 0px 1px 1px #fff;padding:9px 10px 9px 10px;font-size: 12px;font-family: verdana;text-decoration:none;}#navdropdownmenu li a:hover{background:#9f9f9f;color:#ffffff;}#navdropdownmenu li ul{z-index:10;position:absolute;height:auto;width:200px;visibility:hidden;}#navdropdownmenu li ul li a, #navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{float:none;background:#99C9FF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqQxmOqnl9npmPpLwVLTjY47OhNTBkVJ8lyn5g3vBgXTiloKMchZsDGgVRw3Q9Ov7YU9yuuB2OZvFHFRnrc39WyHXQED6sY32bl3zDxVJ-A56oTBjXOcTGsupYyottT7-EtzUmXh1O6U4b/s800/navbar.gif) repeat-x top;width:200px;border-width:1px;border-style:solid;border-color:#575757;}#navdropdownmenu li ul li a:hover{background:#000000;color:#ffffff;}#navdropdownmenu li:hover ul{left:auto;visibility:visible;
}
Oya,. jika anda telah menggunakan navigasi menu yang biasa, hapuslah semua kode CSS dari navigasi menu tersebut.
3. Cari kode yang mirip dengan kode dibawah.
<div id='header-wrapper'>4. Dibawahnya, ketikkan kode berikut.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='It's a Hardlife' type='Header'/></b:section></div>
<div id='navdropdownmenu'><ul id='navdropdownmenu'><li><a href='http://wongsuruh.blogspot.com/search?max-results=1000'>Daftar Isi</a></li><li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Norah Jones</a><ul><li><a href='#'>Don't Know Why</a></li><li><a href='#'>Feelin The Same Way</a></li><li><a href='#'>Come Away With Me</a></li></ul></li><li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Sting</a><ul><li><a href='#'>Englishman In Newyork</a></li><li><a href='#'>Shape Of My Heart</a></li><li><a href='#'>Fields Of Gold</a></li><li><a href='#'>If I Ever Lose My Faith In You</a></li><li><a href='#'>Fragile</a></li><li><a href='#'>Desert Rose</a></li></ul></li><li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Sade</a><ul><li><a href='#'>Smooth Operator</a></li><li><a href='#'>Kiss Of Life</a></li><li><a href='#'>Your Love Is King</a></li></ul></li><li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Alanis</a><ul><li><a href='#'>That I Would Be Good</a></li><li><a href='#'>Front Row</a></li><li><a href='#'>One</a></li></ul></li><li><a href='http://en.wikipedia.org/wiki/Norah_Jones'>Meja</a><ul><li><a href='#'>Dindi</a></li><li><a href='#'>Venus</a></li><li><a href='#'>Red Light</a></li><li><a href='#'>The One</a></li><li><a href='#'>Circle Game</a></li><li><a href='#'>Aqua de Beber</a></li></ul></li>
</ul>
</div>
Gantilah tulisan http://wongsuruh.blogspot.com dengan link yang anda inginkan dengan url yang anda inginkan. Anda bisa menambah atau mengurangi jumlah kode tersebut.
5. Klik Simpan Template.
Gampang bukan, jika ada yang mau ditanyakan isi aja kotak komentar yang ada di bawah, saya akan berusaha menjawabnya.
Semoga bermanfaat......
Tutorial Membuat Text Area
Apa itu Text Area ? text area adalah area tempat untuk menyimpan text atau tulisan baru, atau bisa dikatakan sebuah komponen HTML
yang digunakan untuk menampilkan text atau kode script dalam bentuk dan
format text. Biasanya text area dipakai untuk menyimpan kode HTML
yang tidak bisa di tulis langsung ke dalam postingan di blog. Jadi
fungsi dari text area ini kurang lebih untuk memudahkan pengunjung
mengcopy seluruh isi text. I. Text Area standard
Untuk membuat text area, silahkan copy code di bawah ini :
<p align="center"><textarea name="code" rows="2" cols="15"> Selamat datang di creating website </textarea></p>
berikut hasilnya :
Keterangan :
- Untuk "rows"=3 adalah tinggi dari text area, jadi jika sobat menginginkan text area yang lebih tinggi silahkan sobat ganti dengan angka yang lebih tinggi.
- Untuk cols="15" adalah lebar dari text area, jadi jika sobat menginginkan text area yang lebih lebar silahkan sobat ganti dengan angka yang lebih tinggi.
Cuku jelas bukan? Okey kita lanjutkan lagi dengan menggunakan Highlight
II.Text Area dengan menggunakan Highlight
Variasi lainnya dari text area yaitu dengan menggunakan tombol Highlight, jadi dimaksudkan agar lebih memudahkan untuk mengcopy seluruh isi text area hanya dengan menekan tombol Highlight.
Hanya
dengan menekan tombol highlight maka seluruh isi dari text area akan di
highlight dan tinggal di copy saja. Fungsi tombol highlight ini sangat
berguna untuk mencegah tertinggalnya satu atau beberapa isi dari text
area.
Silahkan copy kode HTML di bawah ini :
dan seperti ini hasilnya: Silahkan copy kode HTML di bawah ini :
<div><form name="copy"><div align="center"><span><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" value="Highlight All" type="button"> </span></div><p align="center"><textarea style="width: 150px; height: 80px;" name="txt" rows="5" wrap="VIRTUAL" cols="20">Tulis sesuatu tentang blog teman-teman disini, maka tulisan yang teman-teman semua tulis akan muncul di sini dan siap di copy oleh para pengunjung</textarea></p></form></div>
Agar dapat memahami kode diatas, saya akan berikan uraian tentang kode-kode text area diatas.
- <div align="center">
--> kata center menunjukan bahwa posisi tombol akan berada di
tengah, jadi jika sobat ingin posisi tombol berada di tepi sebelah kiri,
tinggal ganti dengan kata left. Dan jika ingin berada di tepi sebelah
kanan, tinggal ganti dengan kata right.
- <input onclick="javascript:this.form.txt.focus();this.form.txt.selec()">
--> kode ini artinya ketika tombol highlight di klik, maka seluruh
text yang ada di dalamnya akan di highligt (di tandai atau di blok),
jadi sobat jangan merubah tulisan ini.
- Value="Highlight All" -->
kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi
jika sobat ingin merubah tulisan ini silahkan ganti dengan kata yang
sobat inginkan.
- <p align="center">
--> ini menunjukan bahwa text area akan berada di tengah, nah jika
sobat ingin text area sobat berada di tepi kiri, ganti kata center
dengan kata left, bila ingin di tepi kanan, ganti dengan kata right.
- <text style="WIDTH: 150px">-->kata
"WIDTH:150px" menunjukan lebar dari text area tersebut sebanyak 150
pixel, jadi jika sobat ingin memperpendek atau memperpanjang lebar text
area, sobat tinggal menggantinya dengan angka yang sobat inginkan.
misal: "WIDTH:500px;"
- HEIGHT: 80px --> angka "80px" menunjukan bahwa text area akan mempunyai tinggi sebesar 80 px, jadi jika sobat ingin merubahnya tinggal ganti angka tersebut dengan angka yang sobat inginkan. Misal : HEIGHT:160px.
Nah itu dia sedikit penjelasan tentang Text Area. Selamat mencoba dan semoga bermanfaat
Apa itu Text Area ? text area adalah area tempat untuk menyimpan text atau tulisan baru, atau bisa dikatakan sebuah komponen HTML
yang digunakan untuk menampilkan text atau kode script dalam bentuk dan
format text. Biasanya text area dipakai untuk menyimpan kode HTML
yang tidak bisa di tulis langsung ke dalam postingan di blog. Jadi
fungsi dari text area ini kurang lebih untuk memudahkan pengunjung
mengcopy seluruh isi text. I. Text Area standard
Untuk membuat text area, silahkan copy code di bawah ini :
<p align="center"><textarea name="code" rows="2" cols="15"> Selamat datang di creating website </textarea></p>
berikut hasilnya :
Keterangan :
- Untuk "rows"=3 adalah tinggi dari text area, jadi jika sobat menginginkan text area yang lebih tinggi silahkan sobat ganti dengan angka yang lebih tinggi.
- Untuk cols="15" adalah lebar dari text area, jadi jika sobat menginginkan text area yang lebih lebar silahkan sobat ganti dengan angka yang lebih tinggi.
Cuku jelas bukan? Okey kita lanjutkan lagi dengan menggunakan Highlight
II.Text Area dengan menggunakan Highlight
Variasi lainnya dari text area yaitu dengan menggunakan tombol Highlight, jadi dimaksudkan agar lebih memudahkan untuk mengcopy seluruh isi text area hanya dengan menekan tombol Highlight.
Hanya
dengan menekan tombol highlight maka seluruh isi dari text area akan di
highlight dan tinggal di copy saja. Fungsi tombol highlight ini sangat
berguna untuk mencegah tertinggalnya satu atau beberapa isi dari text
area.
Silahkan copy kode HTML di bawah ini :
dan seperti ini hasilnya: Silahkan copy kode HTML di bawah ini :
<div><form name="copy"><div align="center"><span><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" value="Highlight All" type="button"> </span></div><p align="center"><textarea style="width: 150px; height: 80px;" name="txt" rows="5" wrap="VIRTUAL" cols="20">Tulis sesuatu tentang blog teman-teman disini, maka tulisan yang teman-teman semua tulis akan muncul di sini dan siap di copy oleh para pengunjung</textarea></p></form></div>
Agar dapat memahami kode diatas, saya akan berikan uraian tentang kode-kode text area diatas.
- <div align="center">
--> kata center menunjukan bahwa posisi tombol akan berada di
tengah, jadi jika sobat ingin posisi tombol berada di tepi sebelah kiri,
tinggal ganti dengan kata left. Dan jika ingin berada di tepi sebelah
kanan, tinggal ganti dengan kata right.
- <input onclick="javascript:this.form.txt.focus();this.form.txt.selec()">
--> kode ini artinya ketika tombol highlight di klik, maka seluruh
text yang ada di dalamnya akan di highligt (di tandai atau di blok),
jadi sobat jangan merubah tulisan ini.
- Value="Highlight All" -->
kata Highlight All adalah kata yang akan muncul di dalam tombol, jadi
jika sobat ingin merubah tulisan ini silahkan ganti dengan kata yang
sobat inginkan.
- <p align="center">
--> ini menunjukan bahwa text area akan berada di tengah, nah jika
sobat ingin text area sobat berada di tepi kiri, ganti kata center
dengan kata left, bila ingin di tepi kanan, ganti dengan kata right.
- <text style="WIDTH: 150px">-->kata
"WIDTH:150px" menunjukan lebar dari text area tersebut sebanyak 150
pixel, jadi jika sobat ingin memperpendek atau memperpanjang lebar text
area, sobat tinggal menggantinya dengan angka yang sobat inginkan.
misal: "WIDTH:500px;"
- HEIGHT: 80px --> angka "80px" menunjukan bahwa text area akan mempunyai tinggi sebesar 80 px, jadi jika sobat ingin merubahnya tinggal ganti angka tersebut dengan angka yang sobat inginkan. Misal : HEIGHT:160px.
Nah itu dia sedikit penjelasan tentang Text Area. Selamat mencoba dan semoga bermanfaat
Membuat Form Login ke Draft Blogger
Membuat Form Login ke Draft Blogger
Tak seperti pada wordpress yang mempunyai halaman login di sidebar,
login pada blogger hanya tertera pada navigationbar yaitu pada bar yang
terpampang di ujung atas halaman blogger. Bagaimana kalau kita ingin
membuat form login blogger di sidebar? Berarti kita harus membuat form
yang bisa ditanamkan pada gadget blogger. Duh...padahal penguasaan
bahasa html javascript penulis sangat minim dan hanya berbekal
pengamatan saja, akhirnya ada ide juga yaitu kenapa tak copy paste saja
dari halaman login yang sudah ada misalnya pada http://draft.blogger.com
tentunya memakai akun di google. Akhirnya setelah tercopy, maka kodenya
dapat dilihat dan diambil untuk kode formnya saja, beberapa kode yang
tidak perlu disingkirkan, dan didapat tampilan form seperti gambar
berikut ini, dan setelah ujicoba untuk login ternyata berhasil!, ya udah
saya posting saja, siapa tahu ada blogger yang berminat. Oh ya, contoh
formnya juga sudah ada di sidebar blog ini pada form blogger account,
<form id="gaia_loginform"
action="https://www.google.com/accounts/ServiceLoginAuth?service=blogger"
method="post" onsubmit=
"return(gaia_onLoginSubmit());" >
<div id="gaia_loginbox">
<table class="form-noindent" cellspacing="0" cellpadding="5" width="100%" border="0">
<tr> <td valign="top" style="text-align:center" nowrap="nowrap" bgcolor="#e8eefa">
<input type="hidden" name="ltmpl" value="draft">
<div class="loginBox">
<table id="gaia_table" align="center" border="0" cellpadding="1" cellspacing="0">
<tr><td colspan="2" align="center">
<table> <tr> <td valign="top">
<img src="http://kodehexa.googlepages.com/google_transparent.gif" alt="Google">
</img>
</td>
<td valign="middle">
<font size="+0">
<b>Akun</b>
</font>
</td>
</tr>
</table>
<font size="-1">
</font></td>
</tr>
<script type="text/javascript">
<!-- function
onPreCreateAccount() { return true; } function
onPreLogin() { if (window["onlogin"] != null) {
return onlogin(); } else { return true; } }
-->
</script>
<tr>
<td colspan="2" align="center">
</td>
</tr>
<tr>
<td nowrap="nowrap">
<div align="right">
<span class="gaia le lbl">
Email:
</span>
</div>
</td>
<td>
<input type="hidden"
name="continue" id="continue"
value="https://draft.blogger.com/loginz?d=%2Fhome&a=ADD_SERVICE_FLAG"
/>
<input type="hidden" name="service" id="service" value="blogger" />
<input type="hidden" name="naui" id="naui" value="8" />
<input type="hidden" name="fpui" id="fpui" value="2" />
<input type="hidden" name="skipvpage" id="skipvpage" value="true" />
<input type="hidden" name="rm" id="rm" value="false" />
<input type="hidden" name="ltmpl" id="ltmpl" value="draft" />
<input type="hidden" name="hl" id="hl" value="in" />
<input type="hidden" name="alwf" id="alwf" value="true" />
<input type="hidden" name="alinsu" id="alinsu" value="0" />
<input type="hidden" name="ltmpl" id="ltmpl" value="draft" />
<input type="hidden" name="GALX" value="Ie2nThzvHSI" />
<input type="text" name="Email" id="Email" size="18" value="" class='gaia le val' />
</td>
</tr>
<tr>
<td>
</td>
<td align="left">
</td>
</tr>
<tr>
<td align="right">
<span class="gaia le lbl">
Sandi:
</span>
</td>
<td>
<input type="password" name="Passwd" id="Passwd" size="18" class="gaia le val" />
</td>
</tr>
<tr>
<td>
</td>
<td align="left">
</td>
</tr>
<tr>
<td align="right" valign="top">
<input type="checkbox" name="PersistentCookie" id="PersistentCookie" value="yes" />
<input type="hidden" name='rmShown' value="1" />
</td>
<td>
<label for="PersistentCookie" class="gaia le rem">
Ingat saya di komputer ini
</label>
</td>
</tr>
<tr>
<td>
</td>
<td align="left">
<input type="submit" class="gaia le button" name="signIn" value="Masuk" />
</td>
</tr>
<tr id="ga-fprow">
<td colspan="2" height="33.0" class="gaia le fpwd" align="center" valign="bottom">
<a href="https://www.blogger.com/forgot.g" target=_top>
Anda lupa sandi?
<br/>Modif by:
<a href="http://yoyokr.purworejo.asia" target=_top>
Blogger Modif
</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<input type="hidden" name="asts" id="asts" value="">
</form>
<form id="gaia_universallogin"
action="https://www.google.com/accounts/ServiceLoginAuth?service=blogger"
method="post" onsubmit="return(gaia_onLoginSubmit());">
<input type="hidden"
name="continue" id="continue"
value="https://draft.blogger.com/loginz?d=%2Fhome&a=ADD_SERVICE_FLAG"
/>
<input type="hidden" name="service" id="service" value="blogger" />
<input type="hidden" name="naui" id="naui" value="8" />
<input type="hidden" name="fpui" id="fpui" value="2" />
<input type="hidden" name="skipvpage" id="skipvpage" value="true" />
<input type="hidden" name="rm" id="rm" value="false" />
<input type="hidden" name="ltmpl" id="ltmpl" value="draft" />
<input type="hidden" name="hl" id="hl" value="in" />
<input type="hidden" name="alwf" id="alwf" value="true" />
<input type="hidden" name="alinsu" id="alinsu" value="0" />
<input type="hidden" name="ltmpl" id="ltmpl" value="draft" />
<input type="hidden" name="ltmpl" id="ltmpl" value="draft" />
</form>
Selamat
Membuat Form Login ke Draft Blogger
Tak seperti pada wordpress yang mempunyai halaman login di sidebar,
login pada blogger hanya tertera pada navigationbar yaitu pada bar yang
terpampang di ujung atas halaman blogger. Bagaimana kalau kita ingin
membuat form login blogger di sidebar? Berarti kita harus membuat form
yang bisa ditanamkan pada gadget blogger. Duh...padahal penguasaan
bahasa html javascript penulis sangat minim dan hanya berbekal
pengamatan saja, akhirnya ada ide juga yaitu kenapa tak copy paste saja
dari halaman login yang sudah ada misalnya pada http://draft.blogger.com
tentunya memakai akun di google. Akhirnya setelah tercopy, maka kodenya
dapat dilihat dan diambil untuk kode formnya saja, beberapa kode yang
tidak perlu disingkirkan, dan didapat tampilan form seperti gambar
berikut ini, dan setelah ujicoba untuk login ternyata berhasil!, ya udah
saya posting saja, siapa tahu ada blogger yang berminat. Oh ya, contoh
formnya juga sudah ada di sidebar blog ini pada form blogger account,
<form id="gaia_loginform"
action="https://www.google.com/accounts/ServiceLoginAuth?service=blogger"
method="post" onsubmit=
"return(gaia_onLoginSubmit());" >
<div id="gaia_loginbox">
<table class="form-noindent" cellspacing="0" cellpadding="5" width="100%" border="0">
<tr> <td valign="top" style="text-align:center" nowrap="nowrap" bgcolor="#e8eefa">
<input type="hidden" name="ltmpl" value="draft">
<div class="loginBox">
<table id="gaia_table" align="center" border="0" cellpadding="1" cellspacing="0">
<tr><td colspan="2" align="center">
<table> <tr> <td valign="top">
<img src="http://kodehexa.googlepages.com/google_transparent.gif" alt="Google">
</img>
</td>
<td valign="middle">
<font size="+0">
<b>Akun</b>
</font>
</td>
</tr>
</table>
<font size="-1">
</font></td>
</tr>
<script type="text/javascript">
<!-- function
onPreCreateAccount() { return true; } function
onPreLogin() { if (window["onlogin"] != null) {
return onlogin(); } else { return true; } }
-->
</script>
<tr>
<td colspan="2" align="center">
</td>
</tr>
<tr>
<td nowrap="nowrap">
<div align="right">
<span class="gaia le lbl">
Email:
</span>
</div>
</td>
<td>
<input type="hidden"
name="continue" id="continue"
value="https://draft.blogger.com/loginz?d=%2Fhome&a=ADD_SERVICE_FLAG"
/>
<input type="hidden" name="service" id="service" value="blogger" />
<input type="hidden" name="naui" id="naui" value="8" />
<input type="hidden" name="fpui" id="fpui" value="2" />
<input type="hidden" name="skipvpage" id="skipvpage" value="true" />
<input type="hidden" name="rm" id="rm" value="false" />
<input type="hidden" name="ltmpl" id="ltmpl" value="draft" />
<input type="hidden" name="hl" id="hl" value="in" />
<input type="hidden" name="alwf" id="alwf" value="true" />
<input type="hidden" name="alinsu" id="alinsu" value="0" />
<input type="hidden" name="ltmpl" id="ltmpl" value="draft" />
<input type="hidden" name="GALX" value="Ie2nThzvHSI" />
<input type="text" name="Email" id="Email" size="18" value="" class='gaia le val' />
</td>
</tr>
<tr>
<td>
</td>
<td align="left">
</td>
</tr>
<tr>
<td align="right">
<span class="gaia le lbl">
Sandi:
</span>
</td>
<td>
<input type="password" name="Passwd" id="Passwd" size="18" class="gaia le val" />
</td>
</tr>
<tr>
<td>
</td>
<td align="left">
</td>
</tr>
<tr>
<td align="right" valign="top">
<input type="checkbox" name="PersistentCookie" id="PersistentCookie" value="yes" />
<input type="hidden" name='rmShown' value="1" />
</td>
<td>
<label for="PersistentCookie" class="gaia le rem">
Ingat saya di komputer ini
</label>
</td>
</tr>
<tr>
<td>
</td>
<td align="left">
<input type="submit" class="gaia le button" name="signIn" value="Masuk" />
</td>
</tr>
<tr id="ga-fprow">
<td colspan="2" height="33.0" class="gaia le fpwd" align="center" valign="bottom">
<a href="https://www.blogger.com/forgot.g" target=_top>
Anda lupa sandi?
<br/>Modif by:
<a href="http://yoyokr.purworejo.asia" target=_top>
Blogger Modif
</a>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<input type="hidden" name="asts" id="asts" value="">
</form>
<form id="gaia_universallogin"
action="https://www.google.com/accounts/ServiceLoginAuth?service=blogger"
method="post" onsubmit="return(gaia_onLoginSubmit());">
<input type="hidden"
name="continue" id="continue"
value="https://draft.blogger.com/loginz?d=%2Fhome&a=ADD_SERVICE_FLAG"
/>
<input type="hidden" name="service" id="service" value="blogger" />
<input type="hidden" name="naui" id="naui" value="8" />
<input type="hidden" name="fpui" id="fpui" value="2" />
<input type="hidden" name="skipvpage" id="skipvpage" value="true" />
<input type="hidden" name="rm" id="rm" value="false" />
<input type="hidden" name="ltmpl" id="ltmpl" value="draft" />
<input type="hidden" name="hl" id="hl" value="in" />
<input type="hidden" name="alwf" id="alwf" value="true" />
<input type="hidden" name="alinsu" id="alinsu" value="0" />
<input type="hidden" name="ltmpl" id="ltmpl" value="draft" />
<input type="hidden" name="ltmpl" id="ltmpl" value="draft" />
</form>
Selamat
Mengatasi Loading Blog dengan Google Code
Kali ini
saya akan memberikan sebuah solusi atau pemecahan bagi Anda yang
memiliki masalah dengan loading blog yang cukup berat. Loading atau
proses membuka pada sebuah program menjadi salah satu faktor penting
bagi bekerjanya sebuah sistem. Begitu juga dengan loading sebuah blog,
jika terlalu berat maka akan membuat kinerja blog yang kita kelola
menjadi sulit untuk berkembang karena pengunjung pasti akan berkurang.
Seorang pengunjung tidak mau lama-lama menunggu untuk melihat isi atau
artikel yang ingin dibacanya. Mereka lebih memilih mengunjungi sebuah
blog yang cepat proses membukanya, disamping lebih efisien waktu,
mungkin juga biaya yang dikeluarkan lebih kecil jika mereka mesti bayar
koneksi internet.
Blog yang saya bahas disini adalah
blogspot, kecepatan loading blog platfrom blogger ini hanya tergantung
pada seberapa banyak kode script yang kita masukkan ke dalam template
tapi dengan asumsi kecepatan koneksi internet yang digunakan sama. Beda
dengan Wordpress atau platform blog lain yang menggunakan hosting
sendiri, kecepatan blog tergantung juga dengan jenis dan kapasitas
hosting yang dipakainya. Umumnya blog yang loadingnya berat biasanya
memakai template jenis magazine seperti yang sering saya buat, karena
banyak sekali fitur yang dipasang pada homepage. Sebenarnya dari Google
sendiri juga menyarankan agar loading blog lebih cepat, paling tidak
hanya 9 post yang ada di homepage. Tapi karena semakin berkembangnya
blogger, platform blog ini sekarang bisa lebih dikembangkan sehingga
menyerupai bentuk blog-blog profesional seperti platform lainnya dengan
konsekuensi loading blog yang semakin lambat.
Bagi Anda pengguna blogger, saya akan
memberikan solusi logis untuk meningkatkan performa kecepatan loading
blog, khususnya bagi anda pemakai template style magazine. Jika anda
memakai sebuah template dengan menggunakan banyak fitur, seperti slider,
label per categori atau lainnya. Pasti pernah menemukan sebuah script
yang panjang (biasanya diletakkan diatas kode </head>) atau script yang sudah disimpan di tempat penyimpanan Google Code oleh si pembuat template.
Javascript yang belum disimpan di Google Code
Saya akan berikan contoh sebuah script
dan cara menyimpannya di Google code anda sendiri. Perhatikan contoh
script di bawah ini saya ambil yang sederhana :
<script language='javascript'>
function Barva(koda)
{
document.getElementById("vzorec").bgColor=koda;
document.hcc.barva.value=koda.toUpperCase();
document.hcc.barva.select();
}
function BarvaDruga(koda)
{
document.getElementById("vzorec2").bgColor=koda;
document.hcc.Barva2.value=koda.toUpperCase();
document.hcc.Barva2.select();
}
</script>
Perhatikan kode warna biru diatas, buka notepad kemudian copy kode warna biru ke notepad. (hanya warna biru). Setelah itu klik save as, pada File name beri nama file itu dengan diakhiri .js (misalnya : contoh.js). Dan pada Save as type pilih All files, Encoding biarkan pada ANSI, seperti pada gambar di bawah :
Setelah proses penyimpanan file di
komputer sekarang kita simpan di Google Code agar bisa dipasang pada
template. Buka Google Code Anda, kalau belum pernah menggunakan Google
Code sebelumnya, Anda harus membuatnya terlebih dahulu berikut caranya :
- Login ke akun Google anda, kemudian kunjungi http://code.google.com/hosting/
- Setelah itu klik Create a new project seperti gambar diatas, setelah muncul jendela baru isi kotak kosong seperti contoh gambar di bawah.
Yang perlu anda perhatikan adalah dalam mengisi Version control system dan source code lisence, Anda harus isi seperti contoh gambar diatas. Untuk kolom lain bisa diisi terserah anda. Setelah itu klik Create project. - Anda sekarang sudah mempunyai akun di
Google Code, langkah selanjutnya adalah menyimpan kode javascript yang
sudah dibuat diatas di Google Code. Menuju ke tab 'Download' dan klik New download. Kemudian klik Browse dan pilih file javascript yang ingin diupload. Isi informasi yang berhubungan dengan file javascript tersebut kemudian klik Submit file.
- File javascript anda sudah diupload ke Google code. Sekarang tinggal memanggilnya dan meletakkanya di template Anda. Klik file yang tadi sudah diupload, setelah itu akan terbuka jendela baru. Untuk mendapatkan direct link dari file yang anda upload. Klik kanan pada nama file tersebut kemudian pilih copy link location (firefox) atau salin alamat tautan (Chrome) seperti gambar dibawah.
- Sekarang bagaimana menempatkan direct link tersebut ke dalam template? Perhatikan dua gambar di bawah ini :
Sebelum disimpan di Google code
Sesudah disimpan di Google code
Perhatikan kode block biru pada kedua gambar diatas, gambar atas belum diringkas dan pada gambar bawah kode sudah diringkas dan disimpan di tempat penyimpanan Google Code menjadi seperti ini :<script src="http://kauman.googlecode.com/files/contoh.js" type="text/javascript"/>
Kode script diatas adalah kode ringkasan dari contoh kode script panjang paling atas dan warna merah adalah direct link file yang kita upload di Google Code pada langkah nomer 4 diatas.
Nah sekarang bagaimana jika file
javascript itu sudah disimpan di Google Code milik akun lain? Saya akan
berikan contohnya dibawah :
<script src='http://jamu-martin.googlecode.com/files/related-martin.js' type='text/javascript'/>
URL Javascript warna merah
diatas yang harus diganti dengan URL script dari Google Code anda.
Caranya copy URL tersebut ke browser Anda seperti gambar dibawah :
Kemudian tekan Enter pada keyboard.
Jika muncul pilihan save, Anda tinggal save file tersebut kemudian
upload ke Google Code Anda seperti langkah nomer 3 diatas. Tetapi jika
setelah tekan enter muncul kode javascript yang berderet-deret banyak
sekali deh pokoknya, copy kan kode itu ke notepad kemudian simpan
seperti pada gambar paling atas pada artikel ini. Setelah itu upload ke
Google Code seperti langkah-langkah diatas. Setelah itu masukkan atau
ganti URL warna merah pada javascript diatas dengan URL atau direct link dari google code yang sudah Anda upload.
Kok bisa ya dengan menyimpan javascript di tempat penyimpanan Google Code sendiri bisa meringankan loading blog?
Penjelasannya seperti ini, jika Anda memakai sebuah template dengan
menggunakan banyak script yang disimpan di Google Code oleh si pembuat
template, pastinya tidak hanya Anda yang memakai template tersebut,
pasti ada pengguna lain yang memakai template yang sama. Jika kedua blog
dengan menggunakan template yang sama loading pada saat bersamaan pasti
akan terasa semakin berat, kalau cuma dua atau tiga sih nggak terlalu
terasa kalau yang memakai template itu banyak apa tidak semakin berat
loadingnya? Disamping itu juga untuk berjaga-jaga jika sewaktu-waktu
script si pembuat template rusak atau overload.
Itu tadi satu tips untuk mempercepat
loading blog Anda dengan menyimpan file Javascript di Google Code Anda
sendiri, silahkan dipahami dan semoga bermanfaat.
Kali ini
saya akan memberikan sebuah solusi atau pemecahan bagi Anda yang
memiliki masalah dengan loading blog yang cukup berat. Loading atau
proses membuka pada sebuah program menjadi salah satu faktor penting
bagi bekerjanya sebuah sistem. Begitu juga dengan loading sebuah blog,
jika terlalu berat maka akan membuat kinerja blog yang kita kelola
menjadi sulit untuk berkembang karena pengunjung pasti akan berkurang.
Seorang pengunjung tidak mau lama-lama menunggu untuk melihat isi atau
artikel yang ingin dibacanya. Mereka lebih memilih mengunjungi sebuah
blog yang cepat proses membukanya, disamping lebih efisien waktu,
mungkin juga biaya yang dikeluarkan lebih kecil jika mereka mesti bayar
koneksi internet.
Blog yang saya bahas disini adalah
blogspot, kecepatan loading blog platfrom blogger ini hanya tergantung
pada seberapa banyak kode script yang kita masukkan ke dalam template
tapi dengan asumsi kecepatan koneksi internet yang digunakan sama. Beda
dengan Wordpress atau platform blog lain yang menggunakan hosting
sendiri, kecepatan blog tergantung juga dengan jenis dan kapasitas
hosting yang dipakainya. Umumnya blog yang loadingnya berat biasanya
memakai template jenis magazine seperti yang sering saya buat, karena
banyak sekali fitur yang dipasang pada homepage. Sebenarnya dari Google
sendiri juga menyarankan agar loading blog lebih cepat, paling tidak
hanya 9 post yang ada di homepage. Tapi karena semakin berkembangnya
blogger, platform blog ini sekarang bisa lebih dikembangkan sehingga
menyerupai bentuk blog-blog profesional seperti platform lainnya dengan
konsekuensi loading blog yang semakin lambat.
Bagi Anda pengguna blogger, saya akan
memberikan solusi logis untuk meningkatkan performa kecepatan loading
blog, khususnya bagi anda pemakai template style magazine. Jika anda
memakai sebuah template dengan menggunakan banyak fitur, seperti slider,
label per categori atau lainnya. Pasti pernah menemukan sebuah script
yang panjang (biasanya diletakkan diatas kode </head>) atau script yang sudah disimpan di tempat penyimpanan Google Code oleh si pembuat template.
Javascript yang belum disimpan di Google Code
Saya akan berikan contoh sebuah script
dan cara menyimpannya di Google code anda sendiri. Perhatikan contoh
script di bawah ini saya ambil yang sederhana :
<script language='javascript'>
function Barva(koda)
{
document.getElementById("vzorec").bgColor=koda;
document.hcc.barva.value=koda.toUpperCase();
document.hcc.barva.select();
}
function BarvaDruga(koda)
{
document.getElementById("vzorec2").bgColor=koda;
document.hcc.Barva2.value=koda.toUpperCase();
document.hcc.Barva2.select();
}
</script>
Perhatikan kode warna biru diatas, buka notepad kemudian copy kode warna biru ke notepad. (hanya warna biru). Setelah itu klik save as, pada File name beri nama file itu dengan diakhiri .js (misalnya : contoh.js). Dan pada Save as type pilih All files, Encoding biarkan pada ANSI, seperti pada gambar di bawah :
Setelah proses penyimpanan file di
komputer sekarang kita simpan di Google Code agar bisa dipasang pada
template. Buka Google Code Anda, kalau belum pernah menggunakan Google
Code sebelumnya, Anda harus membuatnya terlebih dahulu berikut caranya :
- Login ke akun Google anda, kemudian kunjungi http://code.google.com/hosting/
- Setelah itu klik Create a new project seperti gambar diatas, setelah muncul jendela baru isi kotak kosong seperti contoh gambar di bawah.
Yang perlu anda perhatikan adalah dalam mengisi Version control system dan source code lisence, Anda harus isi seperti contoh gambar diatas. Untuk kolom lain bisa diisi terserah anda. Setelah itu klik Create project. - Anda sekarang sudah mempunyai akun di
Google Code, langkah selanjutnya adalah menyimpan kode javascript yang
sudah dibuat diatas di Google Code. Menuju ke tab 'Download' dan klik New download. Kemudian klik Browse dan pilih file javascript yang ingin diupload. Isi informasi yang berhubungan dengan file javascript tersebut kemudian klik Submit file.
- File javascript anda sudah diupload ke Google code. Sekarang tinggal memanggilnya dan meletakkanya di template Anda. Klik file yang tadi sudah diupload, setelah itu akan terbuka jendela baru. Untuk mendapatkan direct link dari file yang anda upload. Klik kanan pada nama file tersebut kemudian pilih copy link location (firefox) atau salin alamat tautan (Chrome) seperti gambar dibawah.
- Sekarang bagaimana menempatkan direct link tersebut ke dalam template? Perhatikan dua gambar di bawah ini :
Sebelum disimpan di Google code
Sesudah disimpan di Google code
Perhatikan kode block biru pada kedua gambar diatas, gambar atas belum diringkas dan pada gambar bawah kode sudah diringkas dan disimpan di tempat penyimpanan Google Code menjadi seperti ini :<script src="http://kauman.googlecode.com/files/contoh.js" type="text/javascript"/>
Kode script diatas adalah kode ringkasan dari contoh kode script panjang paling atas dan warna merah adalah direct link file yang kita upload di Google Code pada langkah nomer 4 diatas.
Nah sekarang bagaimana jika file
javascript itu sudah disimpan di Google Code milik akun lain? Saya akan
berikan contohnya dibawah :
<script src='http://jamu-martin.googlecode.com/files/related-martin.js' type='text/javascript'/>
URL Javascript warna merah
diatas yang harus diganti dengan URL script dari Google Code anda.
Caranya copy URL tersebut ke browser Anda seperti gambar dibawah :
Kemudian tekan Enter pada keyboard.
Jika muncul pilihan save, Anda tinggal save file tersebut kemudian
upload ke Google Code Anda seperti langkah nomer 3 diatas. Tetapi jika
setelah tekan enter muncul kode javascript yang berderet-deret banyak
sekali deh pokoknya, copy kan kode itu ke notepad kemudian simpan
seperti pada gambar paling atas pada artikel ini. Setelah itu upload ke
Google Code seperti langkah-langkah diatas. Setelah itu masukkan atau
ganti URL warna merah pada javascript diatas dengan URL atau direct link dari google code yang sudah Anda upload.
Kok bisa ya dengan menyimpan javascript di tempat penyimpanan Google Code sendiri bisa meringankan loading blog?
Penjelasannya seperti ini, jika Anda memakai sebuah template dengan
menggunakan banyak script yang disimpan di Google Code oleh si pembuat
template, pastinya tidak hanya Anda yang memakai template tersebut,
pasti ada pengguna lain yang memakai template yang sama. Jika kedua blog
dengan menggunakan template yang sama loading pada saat bersamaan pasti
akan terasa semakin berat, kalau cuma dua atau tiga sih nggak terlalu
terasa kalau yang memakai template itu banyak apa tidak semakin berat
loadingnya? Disamping itu juga untuk berjaga-jaga jika sewaktu-waktu
script si pembuat template rusak atau overload.
Itu tadi satu tips untuk mempercepat
loading blog Anda dengan menyimpan file Javascript di Google Code Anda
sendiri, silahkan dipahami dan semoga bermanfaat.
Membuat Sliding Login/Register Form Panel di Blog
Counter Strike Extreme atau biasa disebut CS Extreme adalah
perpaduan Antara CS (Counter Strike), CF (Crossfire),PB (Point Blank).
Dan di versi terbarunya ini ada hal-hal yang baru.
Apa saja yang baru? - Terdapat 19 Karakter yang berbeda-beda
- Terdapat 20 Riffles (Primary Weapon) yang keren
- Terdapat Dual Kriss di Machine Gun (Primary Weapon)
Di Game ini ada 6 Mod,yaitu :
- Normal Mode
- Team Match (Death Match)
- Ghost Mode
- Zombie Mode 3
- Zombie Scenario (Survival)
- Zombie Unite
Minimum System Requirements :
- Operating System : Windows XP / 7
- Processor : P4 , 2,4 Ghz or Better- RAM : 1 GB
- Hardrive : 2 GB
- Graphic Card : Gforce FX Series or Better
Screenshot :
Download Game Counter Strike Extreme V6 Full : [MediaFire]
Download : >> Part nya di bawah ini <<
Cara Instal :
1. Extrack ke 4 part yg didownload tadi Jadikan dalam bentuk satu folder
2. lalu extrack
2. lalu extrack
3. tunggu sampai selesai
4. kalu udah selesai tinggal di instal deh CS Xtreme V6 Setup
5. instalnya sama seperti instalan software biasa
5. instalnya sama seperti instalan software biasa
Password :
Counter Strike Extreme atau biasa disebut CS Extreme adalah
perpaduan Antara CS (Counter Strike), CF (Crossfire),PB (Point Blank).
Dan di versi terbarunya ini ada hal-hal yang baru.
Apa saja yang baru? - Terdapat 19 Karakter yang berbeda-beda
- Terdapat 20 Riffles (Primary Weapon) yang keren
- Terdapat Dual Kriss di Machine Gun (Primary Weapon)
Di Game ini ada 6 Mod,yaitu :
- Normal Mode
- Team Match (Death Match)
- Ghost Mode
- Zombie Mode 3
- Zombie Scenario (Survival)
- Zombie Unite
Minimum System Requirements :
- Operating System : Windows XP / 7
- Processor : P4 , 2,4 Ghz or Better- RAM : 1 GB
- Hardrive : 2 GB
- Graphic Card : Gforce FX Series or Better
Screenshot :
Download Game Counter Strike Extreme V6 Full : [MediaFire]
Download : >> Part nya di bawah ini <<
Cara Instal :
1. Extrack ke 4 part yg didownload tadi Jadikan dalam bentuk satu folder
2. lalu extrack
2. lalu extrack
3. tunggu sampai selesai
4. kalu udah selesai tinggal di instal deh CS Xtreme V6 Setup
5. instalnya sama seperti instalan software biasa
5. instalnya sama seperti instalan software biasa
Password :
Subscribe to:
Posts (Atom)