Trik Komputer

Sabtu, 15 Januari 2011

Add with Custome Translate Ajax API to Your Website

Dapet lagi artikel tutorial mengenai translator. Jika mau ngacak-ngacak postingan trik/tutorial di Blog Beben si bloglang anu ganteng kalem tea yang serupa, silahkan ketikan keyword berkaitan pada kotak search yg tersedia :D Datang dari web langganan mencari ide² dapet deh "Add Language Translation To Your Website Using Google Translate AJAX API" Kelebihan dari trik ini kita bisa mengcustome tampilan translator dari embah google ini sob. Jadi kelihatan full stylish, dinamis, praktis dan melankolis :P Kalau cara lama untuk mengambil kode translate dari mbah google ini silahkan pregi ke halaman dan lakukan edit seperlunya. Cuman kalau menggunakan kode default cara lama tersebut maka akan tampak tulisan widget by google!!! seperti ini

Sekarang bisa kita hilangkan, malah dirubah sesuai dengan kemauan dengan sedikit kode CSS :D Karena kode dan script diambil langsung dari Google Analytics yg kita miliki, memberi warna tersendiri pada karya ini ;)) Mari ikuti langkah-langkahnya, awas jangan lupa kopi ama cemilannya [..]

Login terlebih dahulu ke account Google Analytics sobat dan klik tulisan View Report, pada blog/web yg akan dipasangkan nanti. Lalu perhatikan panel sebelah kiri cari tulisan Visitors, lalu diklik cari kembali tulisan Languages, klik kembali. Maka akan terlihat berapa macam bahasa yg ternyata sering digunakan oleh pelancong ke blog kita :)
Kopi pastekan script berikut sebelum tag </body>

merah

biru

Daftar kode bahasa terjemahan.

Daftar berikut ini menyediakan semua bahasa terjemahan dan kode bahasa yang didukung oleh API.

Language	Code	Language	Code
AFRIKAANS	af	ITALIAN	it
ALBANIAN	sq	JAPANESE	ja
ARABIC	ar	KOREAN	ko
BELARUSIAN	be	LATVIAN	lv
BULGARIAN	bg	LITHUANIAN	lt
CATALAN	ca	MACEDONIAN	mk
CHINESE	zh	MALAY	ms
CHINESE_SIMPLIFIED	zh-CN	MALTESE	mt
CHINESE_TRADITIONAL	zh-TW	NORWEGIAN	no
CROATIAN	hr	PERSIAN	fa
CZECH	cs	POLISH	pl
DANISH	da	PORTUGUESE	pt
DUTCH	nl	PORTUGUESE_PORTUGAL	pt-PT
ENGLISH	en	ROMANIAN	ro
ESTONIAN	et	RUSSIAN	ru
FILIPINO	tl	SERBIAN	sr
FINNISH	fi	SLOVAK	sk
FRENCH	fr	SLOVENIAN	sl
GALICIAN	gl	SPANISH	es
GERMAN	de	SWAHILI	sw
GREEK	el	SWEDISH	sv
HAITIAN_CREOLE	ht	TAGALOG	tl
HEBREW	iw	THAI	th
HINDI	hi	TURKISH	tr
HUNGARIAN	hu	UKRAINIAN	uk
ICELANDIC	is	VIETNAMESE	vi
INDONESIAN	id	WELSH	cy
IRISH	ga	YIDDISH	yi

Sisipkan kode HTML ini sebagai pemanggil script diatas kedalam tag <body> template sobat. Jika sobat bisa berkreasi sendiri dimana mau diletakannya bisa juga kok. Tinggal sebisa-bisanya sobat saja.

<div id="google_translate_element"></div>

Untuk merubah dan menghilangkan Powered/Widget by Google, sobat masukin CSS berikut diatas tag ]]></b:skin>

.goog-te-gadget-simple {
background-color:#F5F5F5;
border:none;
font-size:13px;
}
//hides the image in the widget
.goog-te-gadget-simple img {
display:none;
}

Save dan lihat hasilnya \m/

Kalau membingungkan apa-apa yg Beben paparkan diatas, sobat dapat melakukan cara instant via Add a Gadget ► HTML/Javascript masukin deh ini semua...Click Here for Get All Coded

Bye :-h

Install Olark on Blogger

Fenomena buku tamu, cbox, shoutmix, dll yang bisa sobat liat contoh ragamnya disini , memang sudah menjadi tradisi dikalangan blogger Indonesia khususnya. Mungkin timbal baliknya yaitu, chat box yg kita pasang didalam blog kita maka akan memperoleh lalu lintas (traffic analytics) dimana kita hanya mendapatkan jejak dari pesan-pesan tertulis saja pada chat box tersebut :-/ (mungkin itu juga) :D Lebih jauh Beben si bloglang anu ganteng kalem tea akan membeberkan sedikit keuntungan dan kelebihan dari memasang chat box ini sob.

Tujuan:

Meninggalkan jejak, link, pesan dll.
Free, praktis, mudah penerapan.
Banyak lagi...:D

Kekurangan/Kerugian

Kita sebagai pemakai menaikan traffic chat box yg kita pakai.
Hanya mendapatkan jejak dari si pelancong ke blog kita.
Yang lain-lain...:P

Jika memang sobat² memperhatikan dan mendalami search engine, maka tidak akan didapatkan bekas jejak link web/blog kita di search engine ketika kita meninggalkan jejak kita pada chat box yg terpasang di web/blog (karena yg gratis kali yak) =)) Begitu juga dengan exchange link, search engine tidak memberikan toleransi kita mendapatkan bekas jejak kita pd search engines (mungkin ini yg disebut dg backlink) Sekarang coba praktekan ketikkan nama/link blog sobat pada address bar [blog/web yg masih jelek SEOnya pd search engine, mirip blog Beben ini] dan lihat hasilnya.

Pada blog Prodigy of Head ini, jika diketikan keyword beben-koben yg muncul itu adalah:

Pasti terdapat cache jika memang tidak dinonaktifkan pada meta tag.
Backlink dari situs jejaring top markotop macam twitter, facebook dsb.
KOMENTAR!!!
Etc...

Kalau web/blog dg posisi di search engine yg sudah mantap, diketikan alamat/nama blog/web bahkan nama empunya sekalipun akan langsung tertuju pada web/blog tersebut. Coba ketikan keyword kolom tutorial, kang rohman. Apa yg terjadi? Beben pakai browse mozilla. Sudah lah sob, itu hanya segelintir celotehan tak ada guna, bagi yg minat merenungkan silahkan renungkan, bagi yg enggak juga tidak apa-apa :) Sekarang pertanyaannya, adakah diluaran sana fasilitas semodel chat box ini tapi memberikan back traffic pada web/blog kita jika memang memasangnya :-/

Widget satu ini patut kita perhitungkan, selain tersedia versi gratis ternyata dapat dikombinasikan. Kombinasi dengan account IM, G-Talk, Google Analytics (itu saja yg beben tauk) :D Secara detail dan lengkapnya silahkan baca pada web bersangkutan ;)) Walau gratis tetap registrasi, dan disini tidak tampak apa-apa saja batasan dari fasilitas chat secara gratisnya sob! Setelah melakukan registrasi, silahkan lakukan Customize untuk mendapatkan tampilan sesuai selera. Jika yg mau ditanamkan secara langsung didalam template berupa script, sobat tuju bagian Dashboard lalu klik bertuliskan Get your code. Sikat dan pasang deh itu si script diatas tag </body>

Bagi sobat yg kurang suka dengan pemakaian javascript, Olark memberikan Customize berupa HTML code dalam pemanggilan widget chatnya ini. Loncat saja kemari biar lebih jelas Help and Tutorials. Disini Beben hanya mau melakukan modifikasi letak gambar & link pada mode HTML code Olark ini sob. Gambar secara default sudah tersedia pada halaman 5 image style. Add a Gadget ► HTML/Javascript masukin kode berikut

<style>
.olrk-fixed-bottom {
position:fixed;
left:0;
top:115px;
}
</style>

<div class="olrk-fixed-bottom">
<a href="http://static.olark.com/js/html/url_handler.html?url=http://nama-blog-sobat.blogspot.com&siteid=ANGKA-ID" target="_top">
<img src="http://image-async.olark.com/status/ANGKA-ID/3.gif" />
</a>
</div>

Gantilah ANGKA-ID tersebut dengan punya sobat, dan rubah juga link blog dengan link blog sobat. Untuk modifikasi kode CSS, Beben percaya sobat sudah pada jago, silahkan berkreasi. Setelah melakukan test chat dengan melibatkan bukan member Olark, ternyata tidak bisa sob, nah jadi harus sesama member. Maka jika memang berminat memasang Chat Widget dari Olark ini, harus sudah ramai seperti pemakai chat box dikalangan blogger kita :))
Sekian dan terima kasih, postingan ini akan diupdate jika menemukan tema serupa ;)

Jumat, 14 Januari 2011

Sekilas Info

OneTrueFan bukan jaringan sosial dalam arti tradisional, dalam jaringan sosial upaya pelokalan pengalaman dan atau pengguna kunci ke dalam grafik sosial tunggal. OneTrueFan adalah anti-jaringan, membawa cahaya anggota yang sudah ada di situs favorit anda. Memberitahukan update terakhir dari twitter, dan jejaring sosial lainnya. Posisinya yang berada dibawah dan dapat disembunyikan secara permanen :D memberi warna tersendiri. Jika sobat tidak melakukan registrasi, maka masukan saja script berikut tepat sebelum tag </body> atau via Add a Gadget ► HTML/Javascript<script type='text/javascript' src='http://e.onetruefan.com/js/widget.js'></script>Kalau mau melakukan setting, ya registrasi dolo :P Gadget serupa , dan .

Satu berita ringan mengenai facebook nih sobat-sobat Beben. Datang dari web yg memang selalu up-date artikel-artikelnya Labnol. Karyanya ini mirip dengan apa-apa yg terjadi dengan account facebook kita, khususnya siapa-siapa yg telah melakukan like, recommendation, atau lainnya. Cukup memasukan javascript berikut ke dalam widget saja.

<script type="text/javascript">
var fb = Math.random();
if (fb < .5){
document.write('<iframe src="http://www.facebook.com/plugins/recommendations.php?site=beben-koben.blogspot.com&amp;width=300&amp;height=300&amp;header=false&amp;colorscheme=light" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:300px;" allowTransparency="true"></iframe>');
} else {
document.write('<iframe src="http://www.facebook.com/plugins/activity.php?site=beben-koben.blogspot.com&amp;width=300&amp;height=300&amp;header=false&amp;colorscheme=light&amp;recommendations=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:300px;" allowTransparency="true"></iframe>');
}
</script>

Ganti nama blog dg link blog sobat yak. Mungkin artikel ringan ini ada manfaatnya. Habis ide dan ngehang kepala cari-cari artikel unik dan gaya punya nich sob :)) :-h

Drag link javascript berikut ke address bar facebook sobat (dalam keadaan login yah), lihat apa yang terjadi pada gambarnya javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName("img"); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+"px"; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+"px"}R++}setInterval('A()',5); void(0);

Simple Coded by Tommie Hansen

Dimana ada web/blog keren, gaya punya, lugas dalam penyampaian artikelnya, maka disana Beben si bloglang anu ganteng kalem tea akan menclok mengacak-ngacak seluruh postingan mengenai tutorial tentunya... :D Seperti teman kita Tommie Hansen ini! Mencari desain halaman web profesional, profil perusahaan atau cara untuk dagangan produk kita melalui iklan? Saya lebih suka mail di mana anda menentukan lebih mendalam apa yang anda benar-benar ingin dan tidak. Komunikasi adalah, tentu saja, salah satu hal yang paling penting ketika bekerja dengan klien. Namun terlalu banyak bicara jarang baik untuk setiap proyek. Seperti kata, tentukan apa yang anda inginkan dan jangan malu untuk menulis terlalu banyak. Jika anda misalnya telah melihat halaman desain atau web yang Anda sukai dan ingin desain anda atau halaman di baris yang sama gaya kemudian pergi ke depan dan mengirim screenshot, materi atau link ke halaman web di pos. Jangan ragu untuk melampirkan dokumen Adobe PDF atau apapun lainnya dapat anda temukan.

Itulah segelintir kata-kata dari empunya webnya. Sekarang mari kita masuk ke artikel²nya ;)

Simpel CSS Menu

CSS

#exampleMenu {
width:800px;
margin:auto;
position:relative;
}
/* base menu style */
.menu {
height:40px;
background:#999;
padding:0 10px;
margin-bottom:30px;
}
.menu li {
float: left;
list-style:none
}
.menu a {
display:block;
padding:0 10px;
text-decoration:none;
height:40px;
font:bold 11px/40px arial,helvetica,sans-serif; text-transform:uppercase;
}
.menu a { float: left; } /* Needed for IE6/IE7 */
.menu a {
color:#444;
text-shadow:1px 1px #bbb;
}
.menu a:hover {
background:#555;
color:#f00;
text-shadow:1px 1px #666;
}

XHTML

<div id="exampleMenu">
<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Random</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Graphics</a></li>
<li><a href="#">Designs</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>

Dengan begitu saja kita sudah memiliki sebuah menu simpel pure CSS.

jQuery simple tabs

The jQuery Script Plugin

<script type='text/javascript'>
//<![CDATA[
$(function () {

var alltabs = $('div.tab');         //selector for all the tabs
var tabs = $('#tabs');              //selector for the tab menu
alltabs.first().show();             //show the first tab
tabs.find('li:first').addClass('on');       //add class 'on' to the first li to set the item to active

tabs.find('a').live('click', function() {
alltabs.hide()
tabs.find('li').removeClass('on')
$(this).parent().toggleClass('on')
var tabref = $(this).attr('rel')
$(tabref).fadeIn(500)
this.blur()
return false;
})

}); //end domready
//]]>
</script>

CSS

#tabs {
width:100%;
height:30px;
margin:0;
padding:0
}
#tabs li {
float: left;
margin-right:5px;
list-style: none
}
#tabs li a {
display:block;
padding:3px 5px;
text-decoration:none;
}
/* background for active tab */
#tabs li.on a {
background:#555;color:#fff;
}
/* hide tabs */
.tab {display:none;}
.tab {
border:2px solid #ddd;
padding:10px;
border-bottom:2px solid;
border-top:0
}

XHTML

<ul id="tabs">
<li><a rel="div.tab1" href="#">Tab 1</a></li>
<li><a rel="div.tab2" href="#">Tab 2</a></li>
<li><a rel="div.tab3" href="#">Tab 3</a></li>
<li><a rel="div.tab4" href="#">Tab 4</a></li>
<li><a rel="div.tab5" href="#">Tab 5</a></li>
</ul>
<div class="tab tab1">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div class="tab tab2">
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div class="tab tab3">
Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
</div>
<div class="tab tab4">
At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
</div>
<div class="tab tab5">
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus.
</div>

jQuery show/hide anything

The jQuery Script Plugin

CSS

/* hide tabs */
.hidden {display:none;} 
.hidden {
border:2px solid #ddd;
padding:5px;
border-bottom:2px solid;
margin:0 auto;
}
a.on {color:#777;}

XHTML

<p>Click Show more1</p>
<p><a href="#" class="showhidden">Show more1</a></p>
<div class="hidden">
<p>Lorem ipsum dolor sit amet quae quasi error laudantium totam quia voluptatem natus dolores sit sit, voluptatem dolores sunt aut illo sed explicabo voluptatem aut sit illo aut sunt ut perspiciatis quia quae illo illo, voluptatem voluptas. Voluptasaspernatur ut ab et qui dicta qui ipsam iste</p>
</div>
<p>Click Show other more</p>
<p><a href="#" class="showhidden">Show other more</a></p>
<div class="hidden">
<p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<p>Click Show a lot more</p>
<p><a href="#" class="showhidden">Show a lot more</a></p>
<div class="hidden">
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p>
</div>

Maaf jika disini Beben tidak memaparkan dimana-mananya kode itu diletakkan pada template sobat. Beben rasa sudah pada tauk semua kode CSS dimana dimasukinnya (sebelum kode ]]></b:skin>), kode HTML dimana (didalam tag <body>) dan script itu dimana (baiknya sebelum tag penutup </body>)!!! Kode CSS yg ada dipostingan Beben ini sudah ditambah/dirubah guna kebaikan dalam penerapan dalam template sobat-sobat :) Please visit http://byme.se/
Happy blogging \m/

Selasa, 11 Januari 2011

Message Welcome Like Notification

Kalau membicarakan trik apa saja yang bisa dihasilkan dari jQuery PlugIn ini tidak akan ada habisnya sob. Ada saja yg gaya punya kalau melihat ke web-web developer :D Fungsi dari trik yg akan Beben si bloglang anu ganteng kalem tea paparkan kali ini mungkin fungsinya mirip dengan artikel sebelumnya mengenai . Kalau sekarang menampilkan message welcome, tampil diatas window browse. Sesaat akan muncul tulisan pesan diatas lalu hilang lagi deh ;)) Walau judul aslinya dari web yg Beben baca yaitu "Cool notification bar just like twitter" Ingat trik ini memakai jQuery script yah!!!

jQuery Plugin

Gantilah tulisan pada script yg diberi warna merah, dan letakan diatas/sebelum tag </body>

Kode CSS

.hidden {
display:none;
}
.flash {
border-bottom: 3px solid #000;
border-left: 3px solid #000;
border-right: 3px solid #000;
-moz-border-radius-bottomright:15px;
-webkit-border-bottom-right-radius:15px;
-moz-border-radius-bottomleft:15px;
-webkit-border-bottom-left-radius:15px;
font-size:25px;
text-align:center;
position:fixed;
top:0;
left:15%;
color:#000000;
background:#FF0000;
width:800px;
padding:10px;
text-shadow:#555 0px 1px 1px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#FFFFFF');
background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#FFFFFF));
background: -moz-linear-gradient(top, #FF0000, #FFFFFF);
-moz-box-shadow:-1px -1px 1px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.2);
}
.flashs {
width:100%;
margin:0 auto;
}

Letakin diatas/sebelum kode ]]></b:skin> Setelah itu masukin juga kode HTML berikut didalam tag <body> template sobat.

<div class="flashs">
<div id="flash" class="flash hidden">
</div>
</div>

Save

Lihat hasilnya berhasil apa tidak :)

DEMO

Resource by: http://dailytricks.tumblr.com/

Senin, 10 Januari 2011

Show/Hide or Slide-In

Mirip dengan trik artikel kali ini yang akan Beben si bloglang anu ganteng kalem tea beberkan. Pokoknya ada artikel bisa sembunyi lalu muncul lagi, akan dipostingkanlah :D Ingat!!! konten yg bisa ditanamkan dengan trick ini tidak hanya terbatas pada saja yak sob ;) Mungkin kotak komentar, , dll. Oke secara singkat menurut weblog yg Beben temukan ini, begini cara membuat show/hide secara sederhana dengan menggunakan ! Kalau disimak hide/show, toggle/display kayaknya sama saja yah :P

<script type='text/javascript'>
function toggleDisplay(id) {
var obj = document.getElementById(id);
if(obj.style.display == 'none') {
  obj.style.display = 'block';
} else {
  obj.style.display = 'none';
}
}
</script>

<div id="UNIQUE-ID">Konten yang akan dihilangkan dan dimunculkan kembali !!!</div>
<a href="#" onClick="toggleDisplay('UNIQUE-ID'); return false;">Show/Hide</a>

Begitulah kira-kira jika sobat ingin membuat culang (muncul ilang) :D Sekarang mari kita lanjutkan membuat slide-in panel effect with jQuery. Singkat penjelasan mengenai .slideToggle() dari web resmi Jquery bisa menuju halaman berikut . Ingat pada template sobat sudah harus memiliki script inti jika akan memakai tutorial berikut :)

Ramuan Ajaib

Kalau mau cara instant, masukan seluruh kode diatas pada Add a Gadget ► HTML/Javascript Kalau mau step by step perhatikan kode yg dibedakan warna tulisannya yah!

Warna merah

</body>

Warna biru

]]></b:skin>

Warna ungu

Save

Resource by: http://www.ultramegatech.com/blog/
Good luck \m/ :-h

Blog Walking to Malaysia

Sobat blogger satu ini masih serumpun dengan kita nih. Blogger dari negara malaysia, negara terkenal dengan film animasi Ipin & Upin betul...3x Cocok bagi blogger yang memang membutuhkan artikel tutorial, trik, hack dll mengenai menghiasi blog supaya gaya punya, dari dasar sampai yg asoy punya :"> Motto SyamZone™ yaitu "Bukan untuk mengajar tetapi sekadar ingin berkongsi..." ;)) Apaan yak kongsi itu :D Setiap kali mengunjungi sobat-sobat blogger diluaran sana dapat ilmu baru :) Dipadukan dengan yg dimiliki kita bakal jadi deh satu karya indah :P Seperti postingan teranyarnya mengenai Floating SlideOut Social Bookmark. Menu dengan sentuhan jQuery PlugIn, posisi fixed diatas dan nongol ketika kita sorot b-)

Trik ini akan kelihatan cocok bagi yg mempunyai menunya dibawah header! Kalau menu sudah berada pada posisi fixed (diam) diatas mungkin akan terlihat bentrok :D Penerapan tinggal biasa saja sob Add a Gadget ► HTML/Javascript Jadi kalau terpakai silahkan pasang, kalau tidak sreg tinggal hapus lagi Add a Gadgetnya :))

Kode Bumbu

NB:

Script tulisan warna merah

jquery-1.3.2

Script tulisan warna biru

Silahkan acak-acak sanaaa ke blog http://syamzone.blogspot.com/ cari ilmu walau ke ujung malaysia :P