Trik Komputer: Juli 2010

Sabtu, 31 Juli 2010

75+ Shoutbox for Promotion Your Blog

Fenomena shoutbox yang pernah terjadi sempat menjadi issue yg lumayan hangat :D Awal dari sebatas nongkrong dari shoutbox berbayar malah jadi tercetus membuat shoutbox bersama ;)) Itu lalu lintas linknya kemana tuh kalau satu account dipasang rame-rame :-? Be smart don't be a fool b-) Bagaimana kalau ada blog isinya ternyata kumpulan-kumpulan dari beraneka shoutmix/box :-/ Capeknya paling cari² shoutbox/mix yg harus dipasangnya :)) Modalnya cuman satu doang kok bagi yg memang punya niat walking-walking kayak begini inih. Speed internet harus cepet \m/ Satu lagi yaaa ketik2 ke shoutboxnya :p Look here's Its work if finished loading of my blog.

http://cbox-chat-0003.blogspot.com

http://cbox-chat-0004.blogspot.com

=))

Floating Menu Gelap

Sebenarnya sudah mulai jenuh juga nih memosting tutorial tentang blog :-s Males cari inspirasinya :)) senior blogger dah pada menghilang :D Satu yang menjadi pertanyaan dibenak, yang blogger mana yang weber (panggilan komunitas web) mana :-/ Kalau dibilang blogger ya blogger, weber ya weber ;;) Tak ayal sekarang banyak blog tutorial malah mosting jauh dari topik ;)) Ya bebas bebas saja lah¡ Seutas pembukaan dari bloglang yg BT (bau tukul) :P

Trik kali ini berkaitan dengan CSS atribut fixed. Hampir mirip nih si fixed ini dengan absolute :D Untuk demonya sobat bisa melihat di http://inimu.com Lihat pada bagian kanan bawah pojok :-bd
Bumbu-bumbunya:

Kode CSS

]]></b:skin>

/* ========== ImFloatMenu-Gelap CSS ========== */
#imfloatdiv {
font-family:Tahoma;
position:fixed; bottom:5px; right:5px; z-index:100;
background:url(http://inimu.com/0-img/trans-hitam-1x1.png) repeat;
padding:1px 3px;
margin:0;
border:1px solid #333333;
-moz-border-radius: 8px;
-khtml-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
#imfloatul {
font-size:11px;
line-height:15px;
padding:0; margin:0;
list-style-type:none;
}
#imfloatul li {
padding:0; margin:0;
display:inline;
text-align:center;
}
#imfloatul li a {
/* font-size:11px; */
line-height:13px;
font-weight:normal;
text-decoration:none;
color:#ffffff;
padding:0 3px;
}
#imfloatul li a:hover {
background-color:#cccccc;
color:#000000;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
#imfloatul li img, #imfloatul li a img {
margin:0;
padding:0;
vertical-align:bottom !important;
}
a.imfmcp { color:#333333 !important; }
a.imfmdn, a.imfmup { font-size:15px !important; padding:0 !important; margin:0 !important; }
/* ========== ImFloatMenu-Gelap CSS ========== */

Kode HTML

<body>...</body>

<div id='imfloatdiv'>
<ul id='imfloatul'>
<li><a href='http://your-link.com'>Title</a></li>
<li><a href='http://your-link.com'>Title</a></li>
<li><a href='http://your-link.com'>Title</a></li>
<li><a href='http://your-link.com'>Title</a></li>
<li><a class='imfmcp' href='#' id='imfmcp' onclick='this.blur();' target='_blank' title='Get this widget'>♥</a></li>
<li><a class='imfmdn' href='#your UniqueID' id='imfmdn' onclick='this.blur();' title='Go to bottom'>▼</a></li>
<li><a class='imfmup' href='#your UniqueID' id='imfmup' onclick='this.blur();' title='Go to top'>▲</a></li>
</ul>
</div>

Save.

N B: Untuk kode yg diwarnai berbeda itu bisa tergantung dari bawaan template. Pada point ke 1 ada gambar, upload dan hosting. Pada point ke 2 ada UniqueID, itu disesuaikan dengan ID bagian top dan bottom template sobat.
:-h

Jumat, 30 Juli 2010

Fun With HTML Area

Postingan kali ini mirip-mirip dengan teknik . Dimana kita akan menggunakan satu gambar yang bisa merekrut semua link yg ada :D (gitu kali yak keterangan yg cucok) ;)) Biasanya kan satu gambar dengan satu link :-/ nah sekarang bagaimana beberapa link hanya satu gambar 8->> Hal yg perlu diketahui bila ingin menggunakan trik ini, sobat harus sudah yakin dengan gambar dan link yg akan di buatkan menjadi map.

Dengan kata lain map ini kita sebut saja area atau daerah. Cara ini sebenarnya sudah ada sih di webnya si W3 (*) Contoh...
share Gimana, itu gambarnya satu tapi ada 3 buah link yg dimana sudah sesuai dengan design gambar b-) :-bd

Hal yg perlu diperhatikan dalam menggunakannya yaitu:

UNIQUE-ID
Shape
Coords

Disini Beben si bloglang hanya mau berbagi keterangan 2 atributnya saja yah :D ;)) :">

Attribute	Nilai	Keterangan
coords	coordinates	Menentukan koordinat suatu area.
href	URL	Menentukan URL tujuan link di suatu area.
nohref	nohref	Menentukan bahwa suatu area tidak memiliki link terkait.
shape	default rect circle poly	Menentukan bentuk suatu area.
target	_blank _parent _self _top	Menentukan mana untuk membuka halaman yang terhubung ditetapkan dalam atribut href.

Nilai coords	Keterangan
x1, y1, x2, y2	Jika bentuk atribut diatur ke "rect", itu menentukan koordinat sudut kiri atas dan sudut kanan bawah persegi panjang.
x,y,radius	Jika bentuk atribut diatur ke "lingkaran", itu menentukan koordinat pusat lingkaran dan jari-jari.
x1, y1, x2, y2, .., xn, yn	Jika bentuk atribut diatur ke "poli", itu menentukan koordinat tepi poligon. Jika koordinat pertama dan terakhir pasangan tidak sama, browser harus menambahkan koordinat terakhir pasangan untuk menutup poligon.

Selamat berkreatifitas, sok sekarang buat tombol button share, save, atau bookmark dengan metode itu :) atau sobat malah bisa lebih briliant dalam hal kreatifitas b-) See you :-h
Source: .

Kamis, 29 Juli 2010

Ajax Label Reloaded

Hack satu ini mungkin sudah terbilang lawas sob. Tapi gak tau nih, Beben si bloglang baru ngeuhnya sekarang :"> Pertama sih kendala bahasa ;)) dan yang kedua memang blon ada niat ngulik-nguliknya :D Pertama-tama sobat harus sudah ada Label pada template (kategori) Karena bagian ini yg akan dihacknya :p Jika mau label yg keren dan gaya sobat bisa mendatangi blog master satu ini . Kalau mau label cara cepat sobat bisa masuk ke Design ► Page Elements ► Add a Gadget ► Pilihlah yg bertitle Label

Sudah punya label baru masuk deh kesesi hacknya :)) Jika yg berkenan dan mengerti bahasa inggris, silahkan langsung ke sumber caranya Blogger Hacked. Lakukanlah langkah demi langkah pada halaman tersebut, dan perhatikan pada point...

<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='data:label.url'><data:label.name/></a>
</b:if>

Jika ada dua kode tersebut di template sobat, gantilah kedua-duanya :) dengan kode yg diberikan.

<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a href='#sres' expr:onclick='"javascript:getCat(\"" + data:label.name + "\",null)"'><data:label.name/></a>
</b:if>

Langkah terakhir guna menjalankan hack ini yaitu ada pada point...
Click on the button below:
Apabila semua langkah telah benar dilakukan, maka hasil dari hack ini akan terlihat seperti [..]

Langkah terakhir itulah nanti tempat terbukanya label hack ini b-) Sempurna...:D Sobat tauk tidak, aku ngeuh trik ini dari sobat kita setelah membaca postingannya :)) . Bay bay :-h

Rabu, 28 Juli 2010

N E O

Sobat mungkin sudah sering mendengar keberadaan Neo Template :-/ Template yang diclaim memiliki kecepatan tiada tara dalam hal loading ;)) :D dan tidak perlu lonca ke tab-tab berikutnya :-? Itulah si neo yg unik dan penuh gaya b-) Disini Beben si bloglang ganteng kalem tea cuman ingin berbagi saja link-link blog yg menggunakan template tersebut :P Penemunya menurut aku sich ini nih yah :-bd

Stay up to date :-bd

Selasa, 27 Juli 2010

Yahoo Emoticon for Blogger

Sudah searching dengan keyword "emoticom" diblog ini :D Pasti sobat menemukan ada beberapa gaya penerapan emoticon pada blog b-) Untuk mempercantik dalam postingan kan sob :x Bisa meriah dan rame gitcyuh ;)) Setelah BW ternyata banyak juga cara-cara yang dilakukan. Selain manual dengan menghafal kode-kode yg sudah ada lalu dimasukan secara sederhana dibagian postingan sobat. Pada blogger secara default ada beberapa kode yg sudah ada nich, seperti ini...
ngedip

Bagaimana kalau kode emoticonnya si yahoo! yg diadaptasinya nich ;)) Kayak di blog aku ini, tapi dengan metode yg cukup simpel. Sobat bisa memasukan sebanyak 85 lebih emoticon dan . Di tes dan berhasil loh :P

Letakan script berikut dibawah tag <head>

<script type='text/javascript' src='http://toekang.googlepages.com/DeepaSmiley.js'></script>

Click expand here to look the script

Letakan CSS berikut sebelum kode ]]></b:skin>

.post-body img#new {
margin:0px;
padding:0px;
border:none;
vertical-align:middle;
}

Save.

Semoga berhasil :) See you :-h
Source by: http://maid3n.blogspot.com and http://beta-templatetesting.blogspot.com

Senin, 26 Juli 2010

Wara Wiri Bookmark

Postingan kali ini diilhami dari sobat yang bertanya, bagaimana cara membuat tombol bookmark :d Sebenarnya banyak cara dan trik untuk yg satu ini ;) Kurang lebih diblog aku , dan mungkin sobat sudah empet juga membaca artikel mengenai ini :"> Orang tua dulu bilang "Satu perguruan lain ilmu" :)) Mungkin postingan si bloglang jg lain yah sob ;))

Satu alternatif yg bisa jadi pilihan Simpy Chichimichi. Mau melihat contoh-contoh beserta PR dari web penyedia jasa ini 3spots. Kalau mau jadi bloglang harus mau ngacak-ngacak web berikut eConsultant. Bagi yg suka dengan drop down style mungkin ini bisa menjadi alternatif DropDown Bookmark. See you :-h

Sabtu, 24 Juli 2010

Post Rank Widget for Blogger

Perusahaan yang didirikan pada tahun 2007 dan berbasis di Waterloo, Ontario. Perusahaan yang memantau dan mengumpulkan peristiwa-peristiwa keterlibatan sosial berkorelasi dengan konten online secara real-time di seluruh web. Post-Rank mengumpulkan mana dan kapan cerita menghasilkan komentar, bookmark, tweets, dan bentuk-bentuk interaksi dari serangkaian hub sosial. Secara garis besar memberikan layanan secara sistematik pada:

Data Services.
Analytics.
Consumer.

Jadi kita akan mengetahui post kita yg terdeteksi lebih favorite sob (secara online), mudeng gak nih :-? Disisi kirinya nanti ada nilainya gituh ;) :-bd

Caranya juga cukup gampang kok sob, selain ada pilihan 9 theme yg ada tinggal add gadget caranya tuh ;)) Silahkan kunjungi bro :D .

Quick Way To Read The Blog Heavily

Cara cepat membaca sebuah artikel pada blog yang berat seperti blog aku ;)) :D :"> Tidak ada bahan postingan, ya sudah mosting macam patut beginian =)) Mau bermanfaat sukur, tidak juga ini mah cuma saran saja. Sudah aku bilang kreatif itu tidak harus punya ilmu tinggi-tinggi :) Cobalah dengan yg ringan-ringan dulu yg ada disekitar kita. Trik ini berpedoman pada algorithm dalamnya si blogspot :D Tidak perlu menunggu beres satu halaman secara 100% beres sob :))

Lihat pada tab browsingan sobat, jika sudah muncul title dari web/blog yang dituju lekaslah tekan tombol stop diujung kiri atas browsingan :p

Jika sudah paham dilanjutkan dengan menekan tombol read morenya yah :D Disanalah ramuan untuk trik Quick Way To Read The Blog Heavily. Kopi link berikut, lalu taruh di address browsingan...

https://www.blogger.com/comment.g?blogID=XXXXXXXXXXXXXXXXXXX&postID=XXXXXXXXXXXXXXXXXXX

Isikan XXXXXXXXXXXXXXXXXXX dengan cara menekan CTRL + U pada keyboard, lalu tekan kembali CTRL + F ketikan postID/blogID :D Setelah itu enter deh, bagaimana hasilnya!!! This final result .

Jumat, 23 Juli 2010

Bloggercode

Dikalangan blogger kita mungkin belum pada familiar dengan bloggercode :-? Kalau dengan barcode mungkin sobat sudah ada yang dengar deh :D Kalau mau bermain-main dengan barcode bisa baca postinganku . Ini nih sob barcode itu ;)) barcode

Lucu tapi mumet yak :)) Nah bagaimana dgn bloggercode? Prinsip kerjanya sama kok sob menyembunyikan keterangan dalam bentuk kode-kode. Kalau tidak ada plusnya dan hanya berbentuk gambar kode gak gaya. Bloggercode ini memberikan keterangan dengan beberapa opsi pertanyaan yg sudah tersedia. Nanti dijawab oleh kita, dan ada hasilnya itulah nanti yg keluar sebagai kodenya.

Yah sudah tanpa banyak bicara coba saja yg punya si bloglang Beben ganteng kalem ini :p

My blogger code: B6 d- t k s u-- f i- o- x-- e l+ c (decode it!)

Keren toh, mau yg lebih keren lagih???

B6 D- T- K S F I- O- X-- E L+ C Y1 R+ W- P++++ M1 N H

Kalau kurang silahkan Resources for Bears dan disini keterangan umum semua mengenai blogger-code Geekcode. Salam bloglang \m/ b-)

Simple Pretty Tooltip

Tooltips memang mempercantik penampilan title pada link yak sob :p Sebelumnya Beben si bloglang pernah memosting . Disana ada variabel penulisan sebuah link dalam menggunakannya. Nah, sekarang bagaimana tooltip ini bisa muncul hanya dengan penulisan biasa pada sebuah link tanpa embel-embel variabel :-/ Tooltip yang muncul nanti akan memberikan keterangan atas yaitu title sobat, dan yang bawah address linknya.

Pake script sob :D dan sedikit CSS yah kalau mau ;)) Aturan script harus disimpan pada bagian bawah, maka waktu aku praktekan menyimpan script tersebut persis sebelum tag </body> bisa jalan tuh :D Kalau tidak jalan sobat bisa menyimpan scriptnya dibawah tag <head> Dan letakan CSS berikut sebelum tag ]]></b:skin>

div.nicetitle {
position: absolute;
padding: 4px;
top: 0px;
left: 0px;
color: white;
font-size: 13px;
font-family: Verdana, Helvetica, Arial, sans-serif;
width: 25em;
font-weight: bold;
background: url(NTBG.PNG);

/* Mozilla proprietary */
-moz-border-radius: 10px;
}
div.nicetitle p {
margin: 0; padding: 0 3px;
}
div.nicetitle p.destination {
font-size: 9px;
text-align: left;
padding-top: 3px;
}

Ganti tulisan warna merah itu dengan sebuah gambar yak sob. Ini dari tadi nerangin kesana kemari, scriptnya mana gambarnya mana :)) =)) Ya sudah untuk mendapatkan demo, script dan gambarnya sobat bisa klik tombol readmorenya yah :"> :D Silahkan kesini , you want more . bai bai :-h

Rabu, 21 Juli 2010

Blogging Mark-Up Software

Software ini tidak begitu besar, tapi mungkin berguna sob :) Software tentang jalan pintas dalam mengetik. Gimana neranginnya yak :D Ginih sob, kalau kita mau mengetikan sebuah tag dalam memosting harus diawal dan diakhir. Dengan adanya sopwer :p ini kita hanya tinggal mengetikan shortcut yang telah tersedia dan secara otomatis akan terbuat satu tag penuh. Sebagai contoh kalau sobat akan membuat satu paragraf dalam postingan. Penulisan secara manual sobat pasti akan mengetag dengan <p> diawal kalimat, yg akan diakhiri dengan tag penutup </p> diakhir kalimat.

Artikel ini didapat Beben si bloglang ganteng kalem tea dari Hack Attack. Sobat bisa masuk kehalaman tersebut guna melihat penjelasan dalam bentuk video :p Secara default tag yg ada diblogger dan di sopwer, sebagai berikut...

Keyboard shortcut	Replacement text
p	<p></p>
br	<br/>
ul	<ul></ul>
ol	<ol></ol>
em	<em></em>
h1	<h1></h1>
etc...	etc...

Cara kerjanya seperti ini sob. Ketikan salah satu tag, misal tag p lalu sobat enter. Nanti akan terbuat secara otomatis satu tag <p></p> dan cursor akan berada otomatis juga ditengah-tengah tag :-/ :D Bagaimana dengan tag HTML yg seperti <a href="Your Pasted Text"></a> ternyata bisa juga kok sob ;)) Secara default tag HTML yg ada sbb...

Keyboard shortcut	Replacement text
hre	<a href="Your Pasted Text"></a>
bk	<blockquote>Your Pasted Text</blockquote>
img	<img src="Your Pasted Text"></img>
etc...	etc...

Download terlebih dahulu Blogging mark-up.Exe dan Script blogging mark-up. Ada dua buah file: 1.exenya, 2.scriptnya. Simpanlah scriptnya dikomputer sobat, di sistem (C) atau dimana saja yg penting aman. Kalau mau menambahkan variasinya, tinggal buka script dan editlah di notepad :)
Happy blogging \m/ :-h

Selasa, 20 Juli 2010

Dipilih Dipilih Dipilih

Gile mek, dapet web tukang ngumpulin template-template gaya punya b-) Koleksinya cing, mantap dan maknyus buat sobat perimbangkan dalam memilih template. Mau template bergaya apa, kayaknya sudah tersedia disana sob. Minimal mewakili lah ;)) gile gile...aje gile. Ternyata berawal dari tidak kesengajaan melirik play blogger, eh malah dapet informasi :)) Ginilah sebagai bloglang ganteng kalem Beben full stylish :-" No gaya no review, no unique no share, and nono others :D

Ini webnya nih, eh addressnya deng BloggerTheme.Net. Dan ini template yg aku lihat pas aku nemuin web tersebut :p

Nah bagaimana :-/ Ternyata pas masuk lebih dalem dan dalam, aku nemuin seorang blogger dari indonesia membuat template tak kalah gayanya sob :-O Namanya master ireng :D Ini salah satu karyanya.

Kalau menurut Beben mah yg ini sob yg gaya punya mah :D 3:-O

Dipilih...dipilih...dipilih, pret ah :-B :-h

Senin, 19 Juli 2010

jQuery Social Share Toolbar for Blogger

Ketik share pada kotak search blog aku ini, dan lihat apa yang ada disana ;)) Share atau berbagi mungkin merupakan fasilitas yg harus dimiliki bagi pemilik web/blog. Dengan adanya feature tersebut kita dapat berbagi antara sesama :) Jangan curi-curi, gak betul itu dan dilarang sama agama ;)) Masa mau nambah ilmu dosa juga ikut nambah :)) APA KATA DUNIA!!! Dunia menjawab "capek deh" :p Capek lah wong orang yg punya usaha kok malah diembat =)) Be grow up man :-bd

Sudah dilakuin belon tadi disuruh search kata share :-/ Nah kali ini beben si bloglang ganteng kalem mau berbagi trik gaya tombol berbagi (share button) kreasi dari CSS Creator. Bisa buka web tersebut dan lihat dipojok kanan bawahnya ;) For the original posted you can visit Original posted. Disana sudah ada penjelasan bagaimana trik ini berkerja :D Kalau mau diblog sobat memakai yg begituan, maka ada syarat-syarat kecil berlaku disini, syaratnya yaitu klik tombol read more pada artikel ini :">

Letakan kode CSS sebelum/diatas kode ]]></b:skin>

#socializethis{
background:#CCC;
border:solid 1px #666;
border-width: 1px 0 0 1px;
height:15px;
width:260px;
position:fixed;
bottom:0;
right:0;
padding:2px 5px;
overflow:hidden;
/* CSS3 */
-webkit-border-top-left-radius: 12px;
-moz-border-radius-topleft: 12px;
border-top-left-radius: 12px;
-moz-box-shadow: -3px -3px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: -3px -3px 3px rgba(0,0,0,0.5);
box-shadow: -3px -3px 3px rgba(0,0,0,0.5);
}
#socializethis a{
float:left;
width:32px;
margin:3px 2px 2px 2px;
padding:0;
}
#socializethis span{
float:left;
margin:2px 3px;
text-shadow: 1px 1px 1px #FFF;
color:#444;
font-size:12px;
}

Harus memiliki script jQuery

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

</body>

Save.

Screenshot for blogger after i'm do practice...

PERHATIAN!!!

Dikarenakan semua script plugin ini nantinya dihosting, maka hostingan gambar harap diperhatikan dan juga link share yg akan sobat mau tambahkan/dipakai.

Pada artikel aslinya ada script cookies, dan beben tidak memasukannya. Jika sobat mau memakainya dapat diambil script tersebut di Cookie.Js TXT. Pas praktek jg tidak dipakai kok, tapi jalan sob :D bay bay :-h

Look for Slideshow

Melihat slideshow disalah satu web, timbul dibenak WOW keren b-) Gambar yang bergerak-gerak secara otomatis dan teratur, itulah yg dinamakan slideshow :D Banyak keterangan mengenai trik ini sob, tapi selama menemukan dan membaca artikelnya mungkin ini salah satu yg simpel ;) Dengan kode default pada CSS yg simpel, dan script yg tidak begitu panjang dapat menghasilkan slideshow dinamis dan menawan :X

Pertama kali artikel ini dibaca oleh sipenemu dapat sobat lihat Slayeroffice. Sebelum dirombak trik tersebut ternyata sipenemu jg sudah pernah merekomendasikan slideshow with jQuery plug-in.

Bagaimana dengan slideshow rombakan dari siempunya :-/ ;)) :D

Selamat memasang slideshow sobat :-bd :)

Sabtu, 17 Juli 2010

45+ CSS Trick Must be Known

Mas kalo ngeblog itu susah gak sih? Begitu pertanyaan yang terlontar dari salah satu temen aku di mIRC :D Aku enteng jawab saja kayak gini "pertanyaan kamu tuh sama dengan, susah gak sih bahasa jepang itu" Seperti itulah, web juga memiliki bahasanya tersendiri. Bahasa yg diatur dengan aturan yg berlaku :)) Kesimpulannya yak, susah kalo dibilang susah, gampang yak kalo dibilang gampang =)) bingung bingung dah :">

Kreatifitas kadang tak harus memiliki dasar yg belum kita kuasai. Pertanyaannya bagaimana membangkitkan kratifitas kita dengan ilmu yg sudah ada ;) Dengan bahasa CSS yg dasar kalo dengan sentuhan creativity bisa juga sob :D Like this for example...simple button :D

◄Blah►

Feed button pure with CSS!

FEED

Button link for us like this...

CSSONLY!!!

Css Blogger

Nah bagaimana, segalanya mudah asal tauk bahasanya toh ;)) :-bd Yang susahnya itu cari sumber yg menerangkannya :)) Maka dari itu Beben si bloglang ganteng kalem berperan BW kesana kemari :)) Dasar-dasar yg sobat perlu ketahui nih ;)) :-bd

Selamat berkreatifitas :-bd :-h

Jumat, 16 Juli 2010

Large Drop Down Menu

Tadinya mau meng-convert template yang masih pakai kode klasik ke kode blogspot sekarang, eh malah puyeung kepalanya ~X( gak jadi deh :D Banting setir BW ke web-web developer menemukan kembali menu yg gaya punya nih sob b-) Oh iyah sekedar ngasih tau aja nih, kalo mau search tentang artikel yg dicari diblog aku ini tinggal masukkan kata yg bersangkutan dengan artikel yg dicarinya ya sob ;) Pasti gak ada deh =)) kidding... :D Seperti keyword menu, maka akan terbuka deh kata-kata yg ada kata menunya sob :)

Artikel gaya hasil BW juga mengenai menu nih. Tidak tanggung-tanggung menu yg diciptakan ini diberi nama Large Drop Down Menu :-bd Cek ge dot brooo...

Bagaimana setelah melihat live demonya :-? ah pasti pada mau kan dg menu yg kayak itu :x Sikaaat mang...ayeh

Kode CSS letakkan diatas/sebelum kode ]]></b:skin>

ul.ldd_menu{
margin:0px;
padding:0;
display:block;
height:35px;
background-color:#09689F;
list-style:none;
font-family:"Trebuchet MS", sans-serif;
border-top:1px solid #10608E;
border-bottom:1px solid #10608E;
border-left:10px solid #09689F;
-moz-box-shadow:0px 3px 4px #591E12;
-webkit-box-shadow:0px 3px 4px #591E12;
-box-shadow:0px 3px 4px #591E12;
}
ul.ldd_menu a{
text-decoration:none;
}
ul.ldd_menu > li{
float:left;
position:relative;
}
ul.ldd_menu > li > span{
float:left;
color:#fff;
background-color:#09689F;
height:35px;
line-height:35px;
cursor:default;
padding:0px 10px;
text-shadow:0px 0px 1px #fff;
border-right:1px solid #0E5A85;
border-left:1px solid #0E5A85;
}
ul.ldd_menu .ldd_submenu{
position:absolute;
top:35px;
width:550px;
display:none;
opacity:0.95;
left:0px;
font-size:10px;
background: #09689F;
border-top:1px solid #10608E;
-moz-box-shadow:0px 3px 4px #591E12 inset;
-webkit-box-shadow:0px 3px 4px #591E12 inset;
-box-shadow:0px 3px 4px #591E12 inset;
}
a.ldd_subfoot{
background-color:#1C5E7E;
color:#fff;
display:block;
clear:both;
padding:5px 10px;
text-transform:uppercase;
text-align:center;
font-family: Arial, serif;
font-size:12px;
text-shadow:0px 0px 1px #0f0;
-moz-box-shadow:0px 0px 2px #999 inset;
-webkit-box-shadow:0px 0px 2px #999 inset;
-box-shadow:0px 0px 2px #999 inset;
}
ul.ldd_menu ul{
list-style:none;
float:left;
border-left:1px solid #09f;
margin:20px 0px 10px 30px;
padding:10px;
}
li.ldd_heading{
font-family: Georgia, serif;
font-size: 13px;
text-decoration:underline;
color:#F72B25;
text-shadow:0px 0px 1px #B03E23;
padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{
font-family: Arial, serif;
font-size:10px;
line-height:20px;
color:#fff;
padding:1px 3px;
}
ul.ldd_menu ul li a:hover{
-moz-box-shadow:0px 0px 2px #333;
-webkit-box-shadow:0px 0px 2px #333;
-moz-border-radius:10px;
-webkit-border-radius:10px;
box-shadow:0px 0px 2px #333;
background:#4096EE;
}

Kode HTML letakkan didalam tag <body>

<ul id="ldd_menu" class="ldd_menu">
<li>
<span>TITLE1</span>
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">Your-Title</li>
<li><a href="#">Your Title1</a></li>
<li><a href="#">Your Title2</a></li>
<li><a href="#">Your Title3</a></li>
<li><a href="#">Your Title4</a></li>
<li><a href="#">Your Title5</a></li>
</ul>
<ul>
<li class="ldd_heading">Your-Title</li>
<li><a href="#">Your Title1</a></li>
<li><a href="#">Your Title2</a></li>
<li><a href="#">Your Title3</a></li>
<li><a href="#">Your Title4</a></li>
<li><a href="#">Your Title5</a></li>
<li><a href="#">Your Title6</a></li>
</ul>
<ul>
<li class="ldd_heading">Your-Title</li>
<li><a href="#">Your Title1</a></li>
<li><a href="#">Your Title2</a></li>
<li><a href="#">Your Title3</a></li>
<li><a href="#">Your Title4</a></li>
<li><a href="#">Your Title5</a></li>
<li><a href="#">Your Title6</a></li>
</ul>
<a class="ldd_subfoot" href="#"> + New Title</a>
</div>
</li>
<li>
<span>TITLE2</span>
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">Your-Title</li>
<li><a href="#">Your Title1</a></li>
<li><a href="#">Your Title2</a></li>
<li><a href="#">Your Title3</a></li>
<li><a href="#">Your Title4</a></li>
<li><a href="#">Your Title5</a></li>
</ul>
<ul>
<li class="ldd_heading">Your-Title</li>
<li><a href="#">Your Title1</a></li>
<li><a href="#">Your Title2</a></li>
<li><a href="#">Your Title3</a></li>
<li><a href="#">Your Title4</a></li>
<li><a href="#">Your Title5</a></li>
<li><a href="#">Your Title6</a></li>
</ul>
<ul>
<li class="ldd_heading">Your-Title</li>
<li><a href="#">Your Title1</a></li>
<li><a href="#">Your Title2</a></li>
<li><a href="#">Your Title3</a></li>
<li><a href="#">Your Title4</a></li>
<li><a href="#">Your Title5</a></li>
<li><a href="#">Your Title6</a></li>
</ul>
<a class="ldd_subfoot" href="#"> + New Title</a>
</div>
</li>
<li>
<span>TITLE3</span>
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">Your-Title</li>
<li><a href="#">Your Title1</a></li>
<li><a href="#">Your Title2</a></li>
<li><a href="#">Your Title3</a></li>
<li><a href="#">Your Title4</a></li>
<li><a href="#">Your Title5</a></li>
</ul>
<ul>
<li class="ldd_heading">Your-Title</li>
<li><a href="#">Your Title1</a></li>
<li><a href="#">Your Title2</a></li>
<li><a href="#">Your Title3</a></li>
<li><a href="#">Your Title4</a></li>
<li><a href="#">Your Title5</a></li>
<li><a href="#">Your Title6</a></li>
</ul>
<ul>
<li class="ldd_heading">Your-Title</li>
<li><a href="#">Your Title1</a></li>
<li><a href="#">Your Title2</a></li>
<li><a href="#">Your Title3</a></li>
<li><a href="#">Your Title4</a></li>
<li><a href="#">Your Title5</a></li>
<li><a href="#">Your Title6</a></li>
</ul>
<a class="ldd_subfoot" href="#"> + New Title</a>
</div>
</li>
</ul>

Letakkan script berikut!!!

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
/*** the menu  */
 var $menu = $('#ldd_menu');
/**
* for each list element,
* we show the submenu when hovering and
* expand the span element (title) to 510px
*/
 $menu.children('li').each(function(){
 var $this = $(this);
 var $span = $this.children('span');
 $span.data('width',$span.width());
 $this.bind('mouseenter',function(){
      $menu.find('.ldd_submenu').stop(true,true).hide();
      $span.stop().animate({'width':'510px'},300,function(){
       $this.find('.ldd_submenu').slideDown(300);
 });
}).bind('mouseleave',function(){
      $this.find('.ldd_submenu').stop(true,true).hide();
      $span.stop().animate({'width':$span.data('width')+'px'},300);
  });
 });
});
</script>

Save.

Pada langkah ke-3 ada script yg Beben beri warna biru. Itu script plug-in sob, jadi jika sobat sudah memiliki script yg tidak Beben birukan tinggal memasukkan saja script plug-innya :-/ Penempatannya bisa sama seperti contoh diatas, kalau tidak berhasil letakkanlah script plugin diatas/sebelum tag </body> Screenshot for my modification coded of CSS and HTML :D

Bye bye...see you, WassaLam :-h :)

Rabu, 14 Juli 2010

Eng Ing Eng

Bloglang si Beben ganteng kalem is back :p Bawa oleh-oleh mantap tentang artikel gaya punya b-) :-" Eng Ing Eng =)) No gaya, no review..no unique, no share and no no no yang lainnya :)) Bagi para pecinta template, khususnya template yang belum banyak diedit-edit dalam penampilan, gambar atau default theme singkat cerita :D mungkin ini bisa menjadi acuan sobat dalam membuat template yg sesuai diinginkan, dg kode-kode berbasis blogspot ;)) Tidak hanya itu, kode yg ada didalam template ini diclaim mengikuti aturan dari . For example from author and .

Bagaimana nih apa sobat tertarik dengan templatenyo :)) Basic sekali tapi kalau dengan sentuhan kreatifitas kalian masing-masing akan menghasilkan template yg gaya punya tuh :) Kreatif itu jurus membuat blog keren kayak aku ini :D :"> Ada tiga buah template yg Beben mau share disini :)

Dari kiri ke kanan nomor 1, 2, 3 nomor urut untuk downloadnya ;))

Satu itu hasil dari BW :D Pecinta gambar yg bisa jalan-jalan macam slider :-/ Dengan gambar transparent yg lembut dan lucu-lucu :-? ada juga :-" Kembali sobat harus memasuki web berikut . Disana ada 2 buah link, link yg kedua itu template dg kode klasik!!! Sebenarnya yg beben mau kasih tauk itu gambar yg berjalan-jalan itu sob, dan ini dia kode source untuk itu :D

<iframe src="http://site.personnel.free.fr/scroller.htm" height="150" width="100%" scrolling="No" marginheight="0" marginwidth="0" frameborder="0"></iframe>

Simpan deh terserah mau dimana enaknya itu frame :-bd Bagi yg suka chat, nih bisa disikat...nah ini bonusnya, bagi sobat yg suka gonta-ganti warna. Untuk background cocok, untuk mempercantik gitoooh. Ada dua nih kalau emang yg berminat!

<form>
<select Size=1 name=clr onChange="document.bgColor=this.options[this.selectedIndex].value">
<option value="#CDAB7D" SELECTED>???
<option value="aquamarine">aquamarine
<option value="blue">blue
<option value="cadetblue ">cadet blue
<option value="chocolate">chocolate
<option value="darkred">dark red
<option value="darkkhaki">dark khaki
<option value="darkgoldenrod">dark goldenrod
<option value="darkslateblue">dark slate
<option value="deeppink">deep pink
<option value="darksalmon">dark salmon
<option value="gold">gold
<option value="hotpink">hotpink
<option value="lime">lime
<option value="red">red
<option value="salmon">salmon
<option value="springgreen">springgreen
<option value="tan">tan
<option value="tomato">tomato
<option value="turquoise">turquoise
<option value="wheat">wheat
<option value="yellow">yellow
</select>
</form>

See you salam bloglang \m/ Wassalam :)

Senin, 12 Juli 2010

Hover Attribute for Comments Box on Blogger

Masih ingat tidak sobat dengan fungsi dari hover :-? Jika kita bisa kreatif dengan kode CSS, trik hover ini bisa dibikin menarik dan fungsional dalam menyembunyikan sesuatu ;)) (kayak koruptor ada sembunyi-sembunyi yak) :D Adapun hover itu jika kita menyorot satu buah link, dan ada efek yang ditimbulkan!!! That is i mean about the hover...prikitiwww inggrisan euy =)) Dan sekarang Beben si bloglang nuganteng kalem tea :P memadukannya dengan kotak komentar pada blogger.

Dengan menyisipkan sebuah link, yg dapat berupa gambar atau juga tulisan akan menghilangkan kotak komentar pada blog >:) Dengan menyorot link tersebut nanti akan timbul lagi deh itu si kotak komentarnyo B-) Kita tengok pada screenshot yg sudah Beben praktekan diblog uji coba ;)) :)) Perhatikan pada kotak komentar yah :)

Centang Expand Widget Templates
Kode CSS letakkan seperti biasa diatas kode ]]></b:skin>

ul#bbnbox{
float:left;
display:inline;
margin:0;
position:relative;
z-index:10;
}
ul#bbnbox li{
clear:both;
float:left;
display:inline;
}
ul#bbnbox li div{
position:absolute;
top:XXXpx;
padding-top:11px;
left:-5000px;
width:XXXpx;
height:XXXpx;
z-index:10;
}
ul#bbnbox li:hover div,
ul#bbnbox li.sfhover div{
left:0px;
}
ul#bbnbox li div iframe{
width:XXXpx;
height:XXXpx;
}

Cari kode berikut bos!

<b:includable id='comment-form' var='post'>
blah-bleh-bloh
blah-bleh-bloh
blah-bleh-bloh
</b:includable>

Gambar bisa diganti dengan tulisan, be a creative :-bd Jadi secara keseluruhan kodenya nanti akan tampak seperti berikut bos.

<b:includable id='comment-form' var='post'>
<ul id='bbnbox'><li><a href='#'><img src='HTTP://LINK-GAMBAR.JPG'/></a><div>
<div class='comment-form'>
<a name='comment-form'/>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
</script>
</div>
</div></li></ul>
</b:includable>

Save.

85V9C7B2EVYU

Minggu, 11 Juli 2010

Sliding Panel Using jQuery Plugin and CSS3

Sobat masih ingat dengan postingan Beben yang terdahulu enggak :p Slide Out With jQuery Plug-In, atau dengan yg ini nih sob Side Bar Menu. Artikel kali ini juga tidak jauh akan membicarakan mengenai slide menu yg keberadaannya ada di pinggir kiri/kanan ;) sebuah web/blog. Sebenarnya postingan ini sudah pernah dibikin oleh sobat kita http://granoblog.blogspot.com dengan title "Shoutmix Sliding Panel dengan jQuery" Disesi postingan sobat kita entuh, pada bagian tombol slidingnya no-fixed :-?? nah disini Beben si bloglang ganteng kalem mau berbagi bagaimana versi fixed dari sumber yg sama ;)) :">

Setelah membuka sumber tutorialnya nanti akan ada 3 buah demo. Nomor 3 ini yg ingin Beben bagi pada sobat² dan followers tercintaku :x :"> Setelah aku praktekan di blog dummy :D jadinya bisa sobat saksikan di RCTI saluran televisi kejuaraan sepak bola dunia (screenshot dibawah ini) ;))

Bahan-bahan untuk membuatnya...

Letakan CSS3 berikut diatas kode ]]></b:skin>

a.trigger{
position: fixed;
text-decoration: none;
top: 80px; right: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 15px 35px 15px 15px;
font-weight: 700;
background:#333333 url(plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
display: block;
}
a.trigger:hover{
position: fixed;
text-decoration: none;
top: 80px; right: 0;
font-size: 16px;
letter-spacing:-1px;
font-family: verdana, helvetica, arial, sans-serif;
color:#fff;
padding: 20px 40px 20px 20px;
font-weight: 700;
background:#222222 url(plus.png) 85% 55% no-repeat;
border:1px solid #444444;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 0px;
-webkit-border-bottom-right-radius: 0px;
display: block;
}
a.active.trigger {
background:#222222 url(minus.png) 85% 55% no-repeat;
}
.panel {
position: fixed;
top: 80px;
right: 0;
display: none;
background: #aaa;
border:1px solid #111111;
-moz-border-radius-topleft: 20px;
-webkit-border-top-left-radius: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-bottom-left-radius: 20px;
width: 330px;
height: auto;
padding: 30px 30px 30px 130px;
filter: alpha(opacity=85);
opacity: .85;
}
.panel p{
margin: 0 0 15px 0;
padding: 0;
color: #fff;
}
.panel a, .panel a:visited{
margin: 0;
padding: 0;
color: red;
text-decoration: none;
}
.panel a:hover, .panel a:visited:hover{
margin: 0;
padding: 0;
color: #ffffff;
text-decoration: none;
}

Letakan script berikut diatas/sebelum tag </head>

Masukkan kode HTML berikut didalam body sobat, bisa juga diatas tag </body>

<div class="panel">
ISIKAN KONTENNYA DISINI SOOOOBBB!!!
</div>
<a class="trigger" href="#">Your Title</a>

Save.