CIREBON X-PRESS || PROGRAMMING NEWBIE | DISCUSSION | E-LEARNING

Tampilkan postingan dengan label Widget Blogger. Tampilkan semua postingan

Cara Membuat Spoiler Di Posting Blog / Forum

Written By V - Net Kudukeras on Selasa, 16 Februari 2010 | 22.52

Sebelumnya saya akan menjelaskan bagaimana cara membuat spoiler pada posting blog yang ditanya oleh Yoga Adhi Pratama.

Spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari konten blog kita. Spoiler juga bermanfaat agar konten yang berat seperti gambar dalam ukuran besar dan video tidak diload sebelum menekan tombol show. Dengan kata lain spoiler membantu kita mengurangi waktu load konten blog dan memberikan pilih kepada pembaca blog untuk membuka atau tidak isi spoiler. (berlaku juga untuk web)

Berikut adalah kode javascipt yang harus ditambahkan dalam posting:

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"><b>JUDUL></b> : <input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"> </div><br /><div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset;"><div style="display:none;">[ISI SPOILER]</div></div></div>

Keterangan:

* Warna merah yang ada dapat diganti sesuai dengan keinginan
* "isi spoiler" dapat di ganti dengan text, gambar, musik, atau video
* Untuk musik dan video yang dimasukan adalah embed kode
* Apa bila spoiler berupa gambar maka di upload terlebih dahulu lalu di ambil linknya di "edit HTML" atau mengambil link upload seperti di photobucket, bannerbreak dll seperti ini:

* dan hasilnya seperti ini:

Show :

22.52 | 0 komentar | Read More

Cara Menyembunyikan Buku Tamu / Shoutbox

Written By V - Net Kudukeras on Sabtu, 13 Februari 2010 | 01.29

Per-Tama Kali-nya ini saya mempostinkan tampilan buku tamu yang amat mudah. Yaitu Buku Tamu yang bisa sembunyi dari tampilan Firefox kamu, yang animasinya berbeda dengan lain-nya. Pada post ini, tampilan buku tamu seperti pada animasi power point kamu (keren-kan???). Pertama kamu klik tulisan buku tamu, sesudah itu muncul ShoutMix dengan samar-samar, terus menjadi jelas. Langsung saja tanpa panjang lebar, Baca selengkapnya untuk CARA-NYA !!!

CARANYA:
1. Langsung saja masuk Java Script/Edit HTML..
2. Masukkan script di bawah ini

3. Ganti teks yang Di-BOLD, dengan kode ShoutMix, atau semancamnya dengan milik anda!

Gampang kan??? Anda juga bisa mendapatkan
Buku Tamu Keren dari www.yuli-mylovely.blogspot.com!!
Selamat Mencoba!!

4. Oh iya, buat kamu yang mau ganti bullet Buku Tamunya (icon yang di-klik utk memunculkan Buku Tamu itu-loh, yang bertuliskan Buku Tamu, Ngerti-kan ???) bisa ganti alamat icon-nya yang ditebalin (adakan alamat yg bawah tu na!!!) ganti aja dengan alamat icon kamu,,,Bisa kok. . .

01.29 | 0 komentar | Read More

Membuat Tab View Bag 2

Tab View merupakan sebuah Widget yang dapat meletakkan link atau gambar atau apapun juga kedalamnya, yang tentu akan memakan Sidebar jika ditampilkan semuanya sampai kebawah, dengan Tab View ini kita dapat menghemat pemakaian Sidebar. Dan banyak sekali cara pembuatan Tab View begitupun Bentuknya, caranya berikut ini :

Berikut langkah-langkahnya

1. Login ke blogger dengan ID anda

2. Lalu Klik Menu Templates

3. Klik Sub Menu Edit HTML

4. Pada Kotak Edit HTML cari Kode ]]></b:skin>

5. Lalu Copy Kode berikut dan Pastekan diatas kode ]]></b:skin>

/* tab model 2 ateonsoft.com */
div.Tabateonsoft div.TFs
{height: 30px; overflow: hidden;}
div.Tabateonsoft div.TFs a
{float: left; display: block; text-align: center; text-decoration: none; font: normal 12px arial; padding:3px 5px 3px 3px; margin:0 5px 0 0;letter-spacing:-0.07em;
background:#f0f0f0;
color: #333;
border-top:1px solid #CCCCCC;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
border-left:1px solid #cccccc;
-moz-border-radius-bottomright: 10px; -moz-border-radius-topright: 10px;
}
div.Tabateonsoft div.TFs a:hover
{ background: #E8E8E8;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999;}
div.Tabateonsoft div.TFs a.Active
{ background: #E8E8E8;
color: #000000;
border-top:1px solid #999999;
border-right:1px solid #cccccc;
border-bottom:1px solid #cccccc;
border-left:1px solid #999999; font-weight:bold;}
div.Tabateonsoft div.Pages
{ clear: both; overflow: hidden; height:240px; border:1px solid #EFF0F1; padding:0;background: #ffffff; -moz-border-radius:5px;}
div.Tabateonsoft div.Pages div.Page
{height: 100%;padding: 0px; overflow: hidden; }
div.Tabateonsoft div.Pages div.Page div.floor
{ font-size:11px;padding: 3px 5px; text-align:left;}

6. Lalu letakkan kode berikut dibawah kode <head>

7. Save Template

8. Pergi ke halaman Element Halaman

9. Klik Add Widget Element

10. Pilih Menu HTML/Java Script

11.Lalu Copy kode berikut

<form action="tabateonsoft.html" method="get">
<div class="Tabateonsoft" id="Tabateonsoft">
<div class="TFs">
<a>tab1</a>
<a>tab2</a>
<a>tab3</a>
<a>tab4</a>
</div>
<div class="Pages">
<div class="Page">
<div class="floor">
Disini letakkan kode untuk tab 1 anda
</div>
</div>
<div class="Page">
Disini letakkan kode untuk tab 2 anda
</div>
<div class="Page">
<div class="floor">
Disini letakkan kode untuk tab 3 anda
</div>
</div>
<div class="Page">
<div class="floor">
Disini letakkan kode untuk tab 4 anda
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>

12. Klik Save. (selesai sudah)

-------------------------------------------------------------------------------------
Untuk Lebih paham ini saya kasih script tab view punya saya, anda/ kamu/ saudara/ saudari bisa mengotak - atik script berikut ini !!!!

<form action="tabateonsoft.html" method="get">
<div id="Tabateonsoft" class="Tabateonsoft">
<div class="TFs">
<a>Recent Post</a>
<a>Recent Comment</a>
<a>About Visitor</a>
<a>Top Post</a>
</div>
<div class="Pages">
<div class="Page">
<div class="floor">
<script style="text/javascript" src="http://sites.google.com/site/ruangsc/enes/rc-posts.js"></script>
<script style="text/javascript">
var numposts = 15;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="httphttp://v-netkdk.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>
</div>
</div>
<div class="Page">
<script style="text/javascript" src="http://sites.google.com/site/hostingfreesite/javascript/Recent_Comments.js"></script><script style="text/javascript">var numcomments = 7;var showcommentdate = true;var showposttitle = true;var numchars = 75;var standardstyling = true;</script><script src="http://symoi.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>
</div>
<div class="Page">
<div class="floor">
<script src="http://www.e-referrer.com/link.js" type="text/javascript">
</script>
<script type="text/javascript">
write_ref(53583);
</script>
<div style="border:0px;padding:0px;border-collapse:collapse;text-align:center;margin-left:auto;margin-right:auto;font-size:xx-small">
<a href="http://www.e-referrer.com/" target="new" title="Visit eReferrer and get your own FREE referrer list!">v-netkdk.blogspot.com</a>
</div>

<center>

<script src="http://s26.sitemeter.com/js/counter.js?site=s26symoi" type="text/javascript">
</script>
<noscript>
<a href="http://s26.sitemeter.com/stats.asp?site=s26v-netkdk" target="_top">
<img border="0" alt="Site Meter" src="http://s26.sitemeter.com/meter.asp?site=s26symoi"/></a>
</noscript>
</center>

<center>
<a href="http://whos.amung.us/stats/ido4jz1bs8hr/"><img border="0" width="81" src="http://whos.amung.us/widget/ido4jz1bs8hr.png" height="29" title="Click to see how many people are online"/></a></center>


<div align="center">
<a href="http://www.shinystat.com" target="_top">
<img border="0" alt="Free hit counter" src="http://www.shinystat.com/cgi-bin/shinystat.cgi?USER=symoi"/></a>
</div>


<center>
<script language="JavaScript" src="http://xslt.alexa.com/site_stats/js/s/a?url=symoi.blogspot.com" type="text/javascript"></script></center>

<center>
<a href="http://www.ipnow.org"><img border="0" src="http://www.ipnow.org/images/1/00FF00/000000/newmyinfo.jpg"/></a></center>
</div>
</div>
<div class="Page">
<div class="floor">
<script type="text/javascript">
function pipeCallback(obj) {
document.write('<ol style="text-transform: capitalize;">');
var i;
for (i = 0; i < obj.count ; i++)
{
var href = "'" + obj.value.items[i].link + "'";
var item = "<li>" + "<a href=" + href + ">" + obj.value.items[i].title + "</a> </li>";
document.write(item);
}
document.write('</ol>');
}
</script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?_render=json&_callback=pipeCallback&_id=1db0519c1a1484330328c8c455a513c7&url=http%3A%2F%2Fsymoi.blogspot.com&num=10" type="text/javascript"></script>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">tabateonsoft_name('Tabateonsoft');</script>

00.42 | 0 komentar | Read More

Kumpulan Script JQuery Lightbox Terpopuler

Written By V - Net Kudukeras on Selasa, 09 Februari 2010 | 07.55

Sebenarnya, halaman kecil yang mirip jendela popup yang seringkali muncul di web WordPress ( atau Ligthbox ) bukan hal yang baru bagi kita. Selain sangat berguna untuk menampilkan slide show, flash, inframe content atau video, Lightbox juga bisa menampilkan sebuah halaman web. Yang membuatnya unik adalah desain Lightbox itu sendiri daripada jendela popoup pada umumnya.

Dibawah ini 4 diantara sekian banyak penyedia Lightbox javascript yang ada. Saya karena desainnya yang unik serta tingkat kesukaran untuk mengimplementasikannya kedalam web. Implementasi antara javascript dan CSS yang rapih, membuat desain lightbox terlihat manis dan berkelas, dan ringan sesuai namanya. Sehingga tak membuat loading page semaki

1. Faceboox

Tak heran, lightbox sangat mirip dengan desain lightbox mirip yang dimiliki Facebook. Selain tampilan yang minimalis, faceboox juga optimal dan hanya bisa untuk menampilkan gambar dan inline content. Dan tanpa tombol navigasi, hanya tombol close disudut kanan bawah.

2. piroBox

Berbeda dari yang lain, piroBox dapat menyematkan link pada gambar yang sedang ditampilkan, piroBox juga memberikan pilihan tayangan slide otomatis. Walau hanya mendukung satu kelompok dan gambar dengan 3 built-in yang berbeda tema, tidak mengurangi popularitas sebuah Lightbox seperti piroBox.

3. Fancy Zoom

Fancy Zoom versi JQuery ini adalah hasil buah tangan asli Cabel Sasser's FancyZoom telah dikonvert ke versi Jquery dan menjadi salah satu Lightbox populer pada tahun 2008. Fancy Zoom dapat menampilkan gambar tunggal, flash dan konten inline. Paduan rounded corner serta desain minimalis menjadi nilai plus baginya.

4. Fancy Box

Bisa dibilang, ini sebagai pembaruan dari Fancy Zoom karean desainnya yang mirip, namun berbeda author. Yang membuatnya berbeda adalah efek transisi yang mengagumkan dan juga dapat menampung banyak galeri, mungkin lebih banyak dari ke-4 rivalnya. Sayangnya belum dapat menampilkan file flash atau video. Namun jika khusus untuk galeri gambar, Fancy Box merupakan pilihan yang tepat.

07.55 | 0 komentar | Read More

Kategori

Cara Membuat Spoiler Di Posting Blog / Forum

Written By V - Net Kudukeras on Selasa, 16 Februari 2010 | 22.52

Cara Menyembunyikan Buku Tamu / Shoutbox

Written By V - Net Kudukeras on Sabtu, 13 Februari 2010 | 01.29

Membuat Tab View Bag 2

Kumpulan Script JQuery Lightbox Terpopuler

Written By V - Net Kudukeras on Selasa, 09 Februari 2010 | 07.55

1. Faceboox

2. piroBox

3. Fancy Zoom

4. Fancy Box

Popular Posts Today

Kategori

Written By V - Net Kudukeras on Selasa, 16 Februari 2010 | 22.52

Written By V - Net Kudukeras on Sabtu, 13 Februari 2010 | 01.29

Written By V - Net Kudukeras on Selasa, 09 Februari 2010 | 07.55

Popular Posts Today

Mau Update Lowongan Kerja Cirebon