IMAGE BUBBLE EFFECT

Image bubbles effect. Image Bubble Effect merupakan trik pilihan informasi pilihan BeBeN si bloglang anu ganteng kalem tea hari ini :P Trik plug-in ini membuat gambar menjadi sedikit besar apabila kita menyorotnya. Trik ini cocok bagi para sobat blogger yang menyukai gaya sih :)) Screenshot :

Bagusnya...betul3x :p Ada 2 referensi mengenai trik Image Bubbles Effect ini. Silahkan sobat mau memakai yang mana ;))

1. Dynamic Drive DHTML Scripts- Image Bubbles Effect.
2. BubbleUp jQuery Plugin to Spice Up Your Menu.

Samapi jumpa dan selamat bergaya-gaya b-) ;)

MAKE YOUR FREE POLICY

Protect your blog with the policy way. Mungkin para sobat sudah pada tahu mengenai informasi mengenai dari web www.copyscape.com ~:> Web yang memberikan layanan untuk mengetahui siapa-siapa saja yang mengkopi paste dari artikel kita :D Ketauan linknya tetep saja kopi paste jalan terus ~X( =)) Mungkin akan lebih komplit layanan web yang tadi, disatukan dengan layanan web yang memberikan Policy pada blog kita tercinta ini :x ;)) Ya minimal ada kekuatan walaupun tidak sekuat tarzan :p Sebuah situs yang bergerak dalam bidang policy dan didanai IZEA.Inc, memberikan kita kepada para blogger untuk membuat aturan policy kita sesuai dengan ketentuan yang telah dibuat oleh si pemilik web. Free dan mudah untuk mendapatkannya. Ada 6 langkah untuk mengisi ini itunya :)

Klik link Disclosure Policy Generator. Setelah masuk tinggal diisi dengan mengklik saja kok, sesuai dengan blog sobat. Terus next dan next dan next sampai finish deh **== Oke sampai disini dulu, semoga dengan adanya fasilitas ini kita semakin kokoh dan kuat berlapis baja seperti Gatot Koco...:)) Happy blogging :-bd :-h

FOOTNOTE USING CSS3 FOR BLOGGER

Footnotes is catatan kaki...wekekekkk. Footnote atau catatan kecil yang berupa angka-angka atau lambang-lambang kecil disatu kalimat yang berfungsi memberikan keterangan serta diletakan dibagian footer (bawah/akhir) dari sebuah postingan (artikel). Panjang bener penjelasannya =)). Mungkin trik ini akan kita jumpai pada web² yang sudah memiliki library directory yang sudah menggunung :D Contoh yang jelas dan gampang mungkin tatkala kita memasuki web Wikipedia. Pasti kita akan menemui itu si Footnote. Trik ini juga mungkin cucok :"> pada weblog yang memang suka menulis panjang lebar dan tentunya ingin menambah gaya b-) pada tulisannya :-" This is demo for it DEMO.

Screenshot...

Syarat memakai trik ini, sobat harus sudah memiliki script berikut didalam templatenya :)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js?ver=1.4.0"></script>
Kalau sudah punya tinggal memanggilnya saja deh ;) Masukan script berikut sebelum/diatas tag </body>

<!--[if gte IE 6]>
<script type="text/javascript">
$(document).ready(function() {

 $("li").removeClass("customTarget");
 var myLocation = document.location.hash.replace("#","");
 if (myLocation) {
  document.getElementById(myLocation).className = "customTarget";
 }

 $("a").click(function () {
  $("li").removeClass("customTarget");
  var clickedLink = this.href.split("#");
  if (clickedLink.length > 1) {
   document.getElementById(clickedLink[1]).className = "customTarget";
  }
 });

});
</script>
<![endif]-->

Itu dia script pemanggilnya sobat. Sekarang tinggal memasukan beberapa kode CSS kedalam template blog kita. Letakan seperti biasa diatas/sebelum tag ]]></b:skin> Ini contoh sumber dan link download kodenya!

Live Demo Download Code

Secara default nanti sobat akan diberi kode CSS seperti berikut...

img {
border: none;
}
h1 {
line-height: 1em;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
font-family: Arial, Helvetica, sans-serif;
margin: 0 0 8px 0;
}
h3 {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
p {
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
line-height: 1.5em;
margin: 0 0 14px 0;;
}
ul, ol {
font-family: Arial, Helvetica, sans-serif;
font-size: .9em;
}
ul li, ol li {
padding: 5px;
}
:target {
background: #ccc;
border: solid 1px #aaa;
}
.customTarget {
background: #ccc;
border: solid 1px #aaa;
}

Biasanya di dalam template bawaan blogger ini sudah ada beberapa kode CSS yang tertera seperti diatas. Jadi kita tidak memerlukannya lagi. Kita tinggal memasukan kode CSS yang diperlukan saja. Baiknya kalau sobat mengerti CSS, tinggal menghiasnya menurut selera ^:)^ Kalau mau masukan saja kode CSSnya menjadi...

p {
font-family: Arial, Helvetica, sans-serif;
font-size: .8em;
line-height: 1.5em;
margin: 0 0 14px 0;;
}
ul, ol {
font-family: Arial, Helvetica, sans-serif;
font-size: .9em;
}
ul li, ol li {
padding: 5px;
}
:target {
background: #ccc;
border: solid 1px #aaa;
}
.customTarget {
background: #ccc;
border: solid 1px #aaa;
}

Paham sampai sini kan ;)) Sekarang penulisan didalam postingannya. Seperti ini BeBeN^[1]...sobat tinggal menuliskan kode syntax <sup><a href="#one">[1]</a> lanjutkan tulisan #one dengan jumlah footnote yang akan dipanggilnya nanti. Kalau mau sampai sepuluh ya ada sepuluh syntaxnya :D Nah sekarang buat Footnote yang berfungsi untuk menjelaskan angka² yang kecil tadi. Pada akhir setelah sobat beres memosting sebuah artikel buatlah penulisan macam begini (ingat akhir postingan).

<ol>
<li id="one">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</li>
<li id="two">Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.</li>
<li id="three">Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam.</li>
</ol>

Disini BeBeN si bloglang ganteng kalem tea membuat 3 buah Footnote. Gantilah tulisan yang gak jelas itu dengan kata-kata terserah sobat (baiknya penjelasan/penekanan apa yang dimaksud). Setiap kita mengklik syntax yang kita buat tadi akan menuju ke tulisan yang gak jelas itu. Good luck and happy blogging. Source and Pic by : www.impressivewebs.com

NEWSLETTER FOR BLOGGER BLOG

Bring news unik-unik and gaya. Subscribe / berlangganan yang sudah kita kenal mungkin via Feedburner. Ternyata ada layanan berlangganan ini yang sudah disediakan oleh si embah loh sobat-sobat BeBeN yang ganteng dan cantik :-" Dari sumber artikel ini yang berjudul "Create Newsletter for your Blogger Blog" menyebutkan...

Newsletter adalah pilihan yang baik bila kita ingin mengirim mail kustom untuk pembaca blog kita. Ini memungkinkan kita mengirim konten HTML email seperti untuk readers (pembaca). Ini tidak seperti berlangganan via Email Feedburner (yang hanya mengirimkan update posting via email pada interval biasa). Kita akan dapat menyusun dan mengirim newsletter setiap saat.

Enggak tau juga apa masudnya ini BeBeN si bloglang anu ganteng kalem tea juga bingung :D Tapi kayaknya yaa berlangganan² gitooo. Cekidot langkah-langkah untuk membuatnya sobat² b-)

1. Login bagi yang sudah punya account http://google.com/friendconnect
2. Klik/pilih blog sobat pada bagian kiri setelah login. Kalau belum ada tambahkan atau Add.

3. Klik pada opsi Send a Newsletter.

4. Setelah kebuka centang kotak kecil yang ada disana, diikuti dengan klik tab Gadget Newsletter.

5. Lakukan pengeditan warna dan tetek bengeknya sesuai tampilan weblog sobat, lalu tekan tombol Generate Codenya deh.
6. Pergi yang jauh, eh ke Layout ► Page Elements ► Add a Gadget ► HTML/Javascript.
7. Beres.

Bila sobat memiliki pelanggan yang cukup, sobat dapat menulis Newsletter dari tab Compose newsletters, ketika kita selesai dengan membuat newsletter, klik pada Preview and send newsletter button dan klik pada tombol Send newsletter dari jendela pratinjau popup. Sobat dapat melihat berapa banyak penerima akan menerima newsletter. Screenshot...

Source by : www.bloggerplugins.org

HTML CODES AND ENTITIES

Text pilihan beben... Character entity untuk penulisan karakter yang khusus² memerlukan kode tertentu. Kalau abjad biasa ya cetek itu mah ;)) nah kalau yang seperti ini ¬, ¼, ÿ, dan lain-lain :D Mungkin daftar yang akan BeBeN si bloglang ganteng kalem mau paparkan ini tidak 100% komplit sih :"> Tapi pilihan yang memang sering kita cari-cari kalau mau menulisnya :))

Symbol	Entity	Example
nonbreaking space	 
less than	&lt;	<
greater than	&gt;	>
ampersand	&amp;	&
quotation mark	&quot;	"
apostrophe	&#39;	'
Euro currency	&#8364;	€
hor. ellipse	&hellip;	…
em dash	&#8212;	—
Copyright sign	&copy;	Copyright © BeBeN
Registered trademark	&reg;	Ben's ®
Trademark	&trade;	BeBeN™

	 	 	¸	¸	¸	Ð	Ð	Ð	è	è	è
¡	¡	¡	¹	¹	¹	Ñ	Ñ	Ñ	é	é	é
¢	¢	¢	º	º	º	Ò	Ò	Ò	ê	ê	ê
£	£	£	»	»	»	Ó	Ó	Ó	ë	ë	ë
¤	¤	¤	¼	¼	¼	Ô	Ô	Ô	ì	ì	ì
¥	¥	¥	½	½	½	Õ	Õ	Õ	í	í	í
¦	¦	¦	¾	¾	¾	Ö	Ö	Ö	î	î	î
§	§	§	¿	¿	¿	×	×	×	ï	ï	ï
¨	¨	¨	À	À	À	Ø	Ø	Ø	ð	ð	ð
©	©	©	Á	Á	Á	Ù	Ù	Ù	ñ	ñ	ñ
ª	ª	ª	Â	Â	Â	Ú	Ú	Ú	ò	ò	ò
«	«	«	Ã	Ã	Ã	Û	Û	Û	ó	ó	ó
¬	¬	¬	Ä	Ä	Ä	Ü	Ü	Ü	ô	ô	ô
­	­	­	Å	Å	Å	Ý	Ý	Ý	õ	õ	õ
®	®	®	Æ	Æ	Æ	Þ	Þ	Þ	ö	ö	ö
	¯	¯	Ç	Ç	Ç	ß	ß	ß	÷	÷	÷
°	°	°	È	È	È	à	à	à	ø	ø	ø
±	±	±	É	É	É	á	á	á	ù	ù	ù
²	²	²	Ê	Ê	Ê	â	â	â	ú	ú	ú
³	³	³	Ë	Ë	Ë	ã	ã	ã	û	û	û
´	´	´	Ì	Ì	Ì	ä	ä	ä	ü	ü	ü
µ	µ	µ	Í	Í	Í	ä	ä	ä	ý	ý	ý
¶	¶	¶	Î	Î	Î	æ	æ	æ	þ	þ	þ
·	·	·	Ï	Ï	Ï	ç	ç	ç	ÿ	ÿ	ÿ

Semoga halaman ini dapat dimanfaatkan bagi para sobat blogger ;) Character entity references in HTML 4, HTML Tables - HTML Codes and entities. Dadah :-h

TRIK PENCARIAN VIA GOOGLE

Trick URL for google search engine. Postingan informasi mengenai trik dan tips pencarian di dalam mesin google ini mungkin agak sedikit memakan halaman postingan BeBeN si bloglang berikut ini :-s Tanpa panjang lebar, mau ngerti sukur gak ngerti juga siapa tau bermanfaat ;)) Pada dasarnya postingan kali ini memaparkan bagaimana mendapatkan informasi yang tersembunyi dan sangat penting. Yang dimana pencarian informasi ini tidak terindeks dengan metode pencarian biasa. Pencarian yang cepat, tepat dan akurat kembali lagi pada motif dan tujuan si pemakai. Semoga pemaparan kali ini digunakan untuk tujuan yang benar dan bertanggungjawab...hehehe O:-) Mari kita mulai perintah khusus apa saja yang bisa kita gunakan dalam pencarian via google search ini. Ada beberapa saja sih ;)) Yaaa sapa tahu bermanfaat gitoh :">

• "intitle:"
Syntax ini bertujuan memberikan perintah untuk memberikan batasan pada pencarian yang hanya menghasilkan judul dan topik yang dimaksud. Ex : "admin password" Ini berarti pencarian akan mencari halaman yang mengandung kata "admin" sebagai judul dan prioritas utamanya yaitu "password" Kalau pada pencarian kita terdapat 2 query utama, maka kita menggunakan syntax allintitle. Ex : "allintitle:tutorial blogspot" Ini berarti kita melakukan pencarian pada dua subyek utama "tutorial" dan "blogspot"
• "inurl:"
Syntax yang memberikan perintah membatasi pencarian URL hanya pada informasi kata kunci yang dimaksud. Contoh pencarian model ini "inurl:tutorial blog". Pencarian ini akan menghasilkan informasi yang mengandung kata "tutorial blog" saja. Dalam hal ini sama berlaku "allinurl:" dalam mencari 2 query pencarian utama. Contoh "allinurl: passwd/etc". Pencarian ini akan menghasilkan URL yang mengandung informasi tentang "passwd" dan "etc". Di dalam contoh ini terdapat "/" (garis miring), dimana di search engine google ini akan diabaikan.
• "site:"
Syntax ini berfungsi membatasi pencarian suatu query informasi pada domain/situs tertentu saja. Untuk contohnya "waveguide site:itb.co.id" (tanpa tanda kutip). Pencarian model ini akan menghasilkan waveguide pada semua halaman pada domain itb.co.id.
• "intext:"
Syntax ini bertujuan untuk mencari kata-kata tertentu pada satu website tertentu (tujuan). Perintah ini juga akan mengabaikan semua judul dan URL/link yang ada pada web tujuan kita. Contoh "intext:admin" (tanpa tanda petik), pencarian akan menghasilkan link pada web page yang memiliki keyword admin.
• "related:"
Berfungsi memberikan daftar halaman web yang serupa dengan web yang diindikasikan ~x( Contoh syntax ini : "related:www.NAMAWEB.com", pencarian akan memberi daftar web page yang serupa dengan homepage NAMAWEB.
• "link:"
Mungkin syntax ini yang sering kita gunakan nih ;)). Fungsinya yaitu perintah yang akan menunjukkan daftar list webpages yang memiliki link pada webpage special. For example : "link:www.WEBTUJUAN.com" akan menunjuukan daftar webpage yang memiliki point link pada page WEBTUJUAN.
• "filetype:"
Syntax perintah pada Google untuk pencarian data pada internet dengan ekstensi tertentu (i.e. doc, pdf or ppt etc). Contoh syntax ini : "filetype: doc site:go.id confidental". Pencarian akan menghasilkan file data dengan ekstensi ".doc" pada semua domain go.id yang berisi informasi "confidential".
• "cache:"
Menunjukkan daftar web yang telah masuk kedalam indeks database Google. Sebagai contoh : "cache: deffcon.org", pencarian akan memperlihatkan list yang disimpan pada Google untuk page deffcon.org.

Beberapa query sintaks diatas akan sangat membantu dalam pencarian data dan informasi lebih detail. Google dapat menjadi mesin pencari untuk menggali informasi tertentu dan rahasia, informasi yang tidak diperkirakan yang dapat memberitahukan sisi lemah suatu sistem. Hal tersebut yang dimanfaatkan oleh sebagian individu untuk melakukan penetrasi suatu server atau sistem informasi.

Capek ngeutiknya :( deuh... Buat kelanjutannya screenshoot aja dah ;)) :"> screenshoot1, screenshoot2 Kopas gaya baru =)) Artikel ini BeBeN ambil dari salah satu sobat blogger kita. Tanpa mengurangi rasa hormat karena tidak mencantumkan link si-empunya disebabkan ada artikel mengenai tentang hack-hack CC gitoooh (beben jadi atut) Sekian dulu nanti dilanjutkan mengenai hack url via google ini :) URL Hack Google.

Sampai jumpa dan WassaLamu'alaikum Wr Wb.

EXTERNAL LINK WITH IMAGE - JQUERY

External links with image. External links atau links yang menuju keluar dan biasanya diberi variasi (target) "_blank", "new", "top", "_self", "_parent"... Penulisan ext links ini bisa diberi gaya :D dengan memberikan gambar panah kecil biasanya, disamping kanan :p Contoh :
DEMOTuh kan ada gambar panah kecilnya ;)) Sebenarnya master choen sudah membahas trik ini untuk ditanamkan di blogger "External links" dengan menggunakan icon - jQuery. Disini Mstr Choen menggunakan attribut
<div class="extlinks">

isi postingan....

</div>
Nah itu untuk memanggil trik ini versi Mstr Choen :D Sebenarnya ada yang lebih sederhana versi sobat Ishan. Hanya dengan menuliskan HTML sederhana link dengan variasi yang BeBeN si bloglang ganteng kalem tea sebutkan diatas :)) sudah bisa membuat si panah kecil itu tampak :))

Untuk bisa memakai trik ini, di dalam template sobat harus sudah ada script jQuerynya. Kita gunakan saja yang sudah ada di si embah ;))

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2' type='text/javascript'/>

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

Silahkan mau pake yang mana, satu saja jangan kedua-duanya! maruk itu namanya :D Kalau sudah ada scriptnya, tinggal gambar panah kecilnya :)

"http://lh3.ggpht.com/_dfnTVAxeWMI/Sjrhr0wNDaI/AAAAAAAABDw/dIhY1QDCNK4/linkex.gif"

"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPsLb3yybYPlu5nrhKgijrM3uftoeZeHYSFxdVNpTBXwavrOa5R8-_ImTlDnk_XkiqB6QbfJtul5muRKuZhUqOQDq5gKyuTo6AmWqNq9HXzUKUJhjiPRzR_Y7kS0zvIIq64DCchMvktYiY/s320/external.png"
Kalau mau berkreasi sendiri lebih mantap :-bd Yang penting resolusinya sama ;) Masukan kode CSS dibawah berikut diatas/sebelum tag ]]></b:skin>
a.external {
padding-right: 13px;
background: transparent url("LINK-GAMBAR-PANAHNYA") no-repeat scroll right center;
}
Masukan script berikut, bersama/dibawah script yang disuruh pilih salah satu tadi.

<script type="text/javascript">
$(document).ready(function() {
$('a[target="_blank"]').addClass("external"); 
});
</script>

Save deh :) Setiap kawan menuliskan syntax link, dan menggunakan variasi "_blank" akan tampak deh panah asmaranya :"> Pusing mostingnya nih ~x( Good luck deh :-h
Original post : Ishan versi