Main Game Super Go

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>

Ganti blog ID warna merah diatas dengan ID blog anda yang terletak pada browser jika anda masuk ke dashbord, seperti gambar di bawah ini :

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.

Demo | Download

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

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 :

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>

Ganti blog ID warna merah diatas dengan ID blog anda yang terletak pada browser jika anda masuk ke dashbord, seperti gambar di bawah ini :

Demo | Download

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;
}

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

Cari kode di template anda yang paling mendekati dengan kode diatas

5. Kalau sudah ketemu, letakkan kode berikut dibawahnya.

6. Sehingga susunannya menjadi seperti ini:

<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>

<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'>

<b:if cond='data:title'/>

<ul>

<b:loop values='data:links' var='link'>

</b:loop>

</ul>

</div>

</b:includable>

</b:widget>

<b:widget id='HTML30' locked='true' title='Search' type='HTML'>

<b:includable id='main'>

</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.

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>

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

Cari kode di template anda yang paling mendekati dengan kode diatas

5. Kalau sudah ketemu, letakkan kode berikut dibawahnya.

6. Sehingga susunannya menjadi seperti ini:

<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>

<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'>

<b:if cond='data:title'/>

<ul>

<b:loop values='data:links' var='link'>

</b:loop>

</ul>

</div>

</b:includable>

</b:widget>

<b:widget id='HTML30' locked='true' title='Search' type='HTML'>

<b:includable id='main'>

</form>

</div>

</b:includable>

</b:widget>

</b:section>

</div>

7. Kalau sudah, Save Template lalu lihat hasilnya.

Selamat mencoba. Semoga bermanfaat.

Merubah Warna Link Pada Blogspot

Link untuk sebuah blog sangat diperlukan untuk menautkan antara isi blog satu dengan yang lainnya. Pengunjung blog tentu akan lebih tertarik jika link pada blog yang dikunjungi menarik. Mungkin temen-temen tidak menyukai warna link di blog temen-temen dan ingin mengubahnya. Secara default biasanya link ini menggunakan warna standar template yang dipilih dan memunculkan garis bawah ketika kursor menyentuhnya. Jika tidak puas denga pengaturan default ini, kita bisa merubahnya. Dengan satu kali pengaturan, perubahan yang dilakukan telah berlaku untuk semua link yang ada, termasuk link-link baru yang menyusul kemudian. Nah, berikut langkah-langkah cara mengganti warna link di 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.

Semoga bermanfaat

5 Template Hasil Modifikasi

Belakangan ini saya agak sibuk dengan pekerjaan saya di dunia nyata, jadi hanya punya waktu

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

Demo | Download

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.

Photored Template

Demo | Download

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.

Demo | Download

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

Demo | Download

Pemasangan widget pada template ini sama dengan Johny Kenthir template, silahkan dibuka lagi artikelnya disini Johny Kenthir, Template Ramai Seperti Pasar Tradisional.

Johny Crottmag

Demo | Download

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

Demo | Download

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.

Photored Template

Demo | Download

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

Demo | Download

Johny Kenthir Green

Demo | Download

Pemasangan widget pada template ini sama dengan Johny Kenthir template, silahkan dibuka lagi artikelnya disini Johny Kenthir, Template Ramai Seperti Pasar Tradisional.

Johny Crottmag

Demo | Download

Template ini sama persisi dengan Johny Sompret Banget cuma beda warna saja, untuk pemasangannya silagkan dilihat disini 2 Template Kurang Kerjaan.

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 :

<b:section class='sidebar' id='sidebar' preferred='yes'>

Copy kode di bawah ini kemudian taruh kode tersebut (paste) dibawah kode di atas.

<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>

Kemudian Save Template anda.

Note : Agar tampilan label animasi ini serasi dengan templet blog anda, sesuaikan kode-kode berikut dengan templet yang dipakai. Misal: Merubah lebar, tinggi dan warna background. Variable untuk lebar dan tinggi ada pada baris script berikut,

var so = new SWFObject("http://halotemplates.s3.amazonaws.com/wp-cumulus-example/tagcloud.swf", "tagcloud", "240", "300", "7", "#ffffff");

240 menunjukkan lebar widget. 300 menunjukkan tinggi widget. #ffffff menjukkan warna background. 100 menunjukkan kecepatan putaran. Merubah warna text. Variable untuk lebar dan tinggi ada pada baris script berikut,

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>");

12 menujukan ukuran font yang digunakan. ~> bila anda menginginkan background yang transparan, maka anda tinggal menghapus tanda // dari script di atas

//so.addParam("wmode", "transparent");

Nah, silahkan anda ganti kode-kode pada variabel di atas sesuai dengan kebutuhan template anda.

Semoga Berhasil.

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 :

<b:section class='sidebar' id='sidebar' preferred='yes'>

Copy kode di bawah ini kemudian taruh kode tersebut (paste) dibawah kode di atas.

<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>

Kemudian Save Template anda.

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>");

12 menujukan ukuran font yang digunakan. ~> bila anda menginginkan background yang transparan, maka anda tinggal menghapus tanda // dari script di atas

//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'>

<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>

4. Dibawahnya, ketikkan kode berikut.

<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.

6. Lihat hasilnya.

Gampang bukan, jika ada yang mau ditanyakan isi aja kotak komentar yang ada di bawah, saya akan berusaha menjawabnya.

Semoga bermanfaat......

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'>

<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>

4. Dibawahnya, ketikkan kode berikut.

<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.

6. Lihat hasilnya.

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 :

<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>

dan seperti ini hasilnya:

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

<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.

<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>

dan seperti ini hasilnya:

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

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,

Di bawah ini kodenya (teks warna biru) yang hasil dari cutpas tadi, bisa anda copas deh, silahkan...

</img>

</td>

</font>

</td>

</tr>

</table>

</font></td>

</tr>

</script>

<tr>

</td>

</tr>

<tr>

Email:

</span>

</div>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

</td>

</tr>

<tr>

Sandi:

</span>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

</td>

</tr>

<tr>

</td>

<td>

Ingat saya di komputer ini

</label>

</td>

</tr>

<tr>

<td>

</td>

</td>

</tr>

Anda lupa sandi?

<br/>Modif by:

Blogger Modif

</a>

</td>

</tr>

</table>

</div>

</td>

</tr>

</table>

</div>

</form>

</form>

Selamat ~~menikmati~~ mencoba...

Membuat Form Login ke Draft Blogger

Di bawah ini kodenya (teks warna biru) yang hasil dari cutpas tadi, bisa anda copas deh, silahkan...

</img>

</td>

</font>

</td>

</tr>

</table>

</font></td>

</tr>

</script>

<tr>

</td>

</tr>

<tr>

Email:

</span>

</div>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

</td>

</tr>

<tr>

Sandi:

</span>

</td>

<td>

</td>

</tr>

<tr>

<td>

</td>

</td>

</tr>

<tr>

</td>

<td>

Ingat saya di komputer ini

</label>

</td>

</tr>

<tr>

<td>

</td>

</td>

</tr>

Anda lupa sandi?

<br/>Modif by:

Blogger Modif

</a>

</td>

</tr>

</table>

</div>

</td>

</tr>

</table>

</div>

</form>

</form>

Selamat ~~menikmati~~ mencoba...

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.

Javascript yang sudah disimpan di Google Code

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.

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>

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.

Javascript yang sudah disimpan di Google Code

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 :

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 <<

Size : 740 MB

Download Winrar Untuk MengExtrack Part nya Di Bawah Ini

>> Click Here <<

Cara Instal :

1. Extrack ke 4 part yg didownload tadi Jadikan dalam bentuk satu folder
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

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.

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 <<

Size : 740 MB

Download Winrar Untuk MengExtrack Part nya Di Bawah Ini

>> Click Here <<

Cara Instal :

1. Extrack ke 4 part yg didownload tadi Jadikan dalam bentuk satu folder
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

Password :

Rifki Tekno

Main Game Super Go

Johny Crottube, Template Iseng Sambil Nunggu Jerman Vs Yunani

Membuat Menu Navigasi Horisontal dan Kotak Pencari di Blog

Merubah Warna Link Pada Blogspot

5 Template Hasil Modifikasi

Membuat Label Bergerak (Blogumulus) di Blogspot

Membuat Menu Drop Down di Blogspot

Tutorial Membuat Text Area

Membuat Form Login ke Draft Blogger

Membuat Form Login ke Draft Blogger

Membuat Form Login ke Draft Blogger

Mengatasi Loading Blog dengan Google Code

Membuat Sliding Login/Register Form Panel di Blog

Shopping Cart

Labels

Blog Archive

Labels

Labels

Labels

Labels

Welcome In Kode Blogger

Contoh Sliding Login Dengan JQuery

Tutorial Blog

Member Login

Not a member yet? Sign Up!