Emoticon, Avatar, Background ETC

Walau harga cabai meroket, tapi sekarang mencari ide postingan yang gaya punya ternyata cukup sulit sob #:-S BW juga masih itu-itu blogger yg diketemuinnya :D Sudah memang akan beralih kali nih blogger basis blogspot ke yg lainnya kali yak :P Web kecil kelihatannya, belom tentu kecil dengan konten? Seperti web satu ini, walau kelihatan depannya sekilas tampak kecil, namun tidak dengan konten yg disajikan ikutan kecil ;) Sobat sudah tauk dengan emoticon, generator text, emoticon maker, text maker, background maker, dll Bagaimana jika ada 1 web yg memfasilitasi itu semua? Sobat tidak hanya akan mendapatkan berbagai macam emotikon (berbagai jenis), text generator (aneka macam), background maker (kreatif sendiri) dll tetapi dapat mendownload softwarenya juga :-/

Jadi singkat kata begini sob, mau cari avatar, emoticon, text, background, program, news, skin, gifs, display, fonts, game, dll baik itu yg sudah jadi, bikin secara online, sikat sofwarenya, disini mungkin tempatnya nih ;;)

Silahkan kunjungi dan cari-cari juga link partnernya yah :D MsnParadiso, Www.PortalMes.com. Silahkan diacak-acak dan semoga ada manfaatnya >:P :))

Base64 Image

Postingan ini hanya keisengan Beben si bloglang anu ganteng kalem tea yang suka ingin tauk, walau sebetulnya malah kebelinger :D Mungkin diantara sobat sudah pada kenal dengan image berformat base64? Gambar dimana rentetan kode panjang banget, walau sebenarnya gambar tersebut kecil resolusinya ;)) Karena blogspot memakai !DOCTYPE yg tidak memungkinkan menampilkan format image tersebut pada sisi postingan, maka tidak nampak hasilnya...hehe. Tapi jika sobat penasaran dengan bagaimana, apa, dan hasil bentuk gambar base64 sobat bisa melakukan tes Add a Gadget ► HTML/Javascript :)) Coba ini masukin, tester broo

<img src="data:image/jpeg,%FF%D8%FF%E0%10JFIF%01%01%01%01%FF%FE%3BCREATOR%3A%20gd-jpeg%20v1.0%20(using%20IJG%20JPEG%20v62)%2C%20quality%20%3D%2090%0A%FF%DBC%03%02%02%03%02%02%03%03%03%03%04%03%03%04%05%08%05%05%04%04%05%0A%07%07%06%08%0C%0A%0C%0C%0B%0A%0B%0B%0D%0E%12%10%0D%0E%11%0E%0B%0B%10%16%10%11%13%14%15%15%15%0C%0F%17%18%16%14%18%12%14%15%14%FF%DBC%01%03%04%04%05%04%05%09%05%05%09%14%0D%0B%0D%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%14%FF%C0%11%08%10%10%03%01%22%02%11%01%03%11%01%FF%C4%1F%01%05%01%01%01%01%01%01%01%02%03%04%05%06%07%08%09%0A%0B%FF%C4%B5%10%02%01%03%03%02%04%03%05%05%04%04%01%7D%01%02%03%04%11%05%12!1A%06%13Qa%07%22q%142%81%91%A1%08%23B%B1%C1%15R%D1%F0%243br%82%09%0A%16%17%18%19%1A%25%26'()*456789%3ACDEFGHIJSTUVWXYZcdefghijstuvwxyz%83%84%85%86%87%88%89%8A%92%93%94%95%96%97%98%99%9A%A2%A3%A4%A5%A6%A7%A8%A9%AA%B2%B3%B4%B5%B6%B7%B8%B9%BA%C2%C3%C4%C5%C6%C7%C8%C9%CA%D2%D3%D4%D5%D6%D7%D8%D9%DA%E1%E2%E3%E4%E5%E6%E7%E8%E9%EA%F1%F2%F3%F4%F5%F6%F7%F8%F9%FA%FF%C4%1F%01%03%01%01%01%01%01%01%01%01%01%01%02%03%04%05%06%07%08%09%0A%0B%FF%C4%B5%11%02%01%02%04%04%03%04%07%05%04%04%01%02w%01%02%03%11%04%05!1%06%12AQ%07aq%13%222%81%08%14B%91%A1%B1%C1%09%233R%F0%15br%D1%0A%16%244%E1%25%F1%17%18%19%1A%26'()*56789%3ACDEFGHIJSTUVWXYZcdefghijstuvwxyz%82%83%84%85%86%87%88%89%8A%92%93%94%95%96%97%98%99%9A%A2%A3%A4%A5%A6%A7%A8%A9%AA%B2%B3%B4%B5%B6%B7%B8%B9%BA%C2%C3%C4%C5%C6%C7%C8%C9%CA%D2%D3%D4%D5%D6%D7%D8%D9%DA%E2%E3%E4%E5%E6%E7%E8%E9%EA%F2%F3%F4%F5%F6%F7%F8%F9%FA%FF%DA%0C%03%01%02%11%03%11%3F%A3u%A1%F8SV%F8%95%E2%E8%FCI%A0%EA7%93%EA%3A%97%97%A5%AE%9E%EC%9EXv%94%92%B8%0A%ACA%D8%A7%23%03oNFh%5B%E9%FA%3F%87~%2C%E8%0B%E1%7D%3EM%3Ak%7DB(nloeg%7C%02%0By%80%BBpz%02%A4uo%F8%0FEs%F1.o%05%FCFO%0F%C1%60%D7ozV%5B%B9%20%B9S%BC%F9N%17%05N%18%E0%F3%96%E7h%18%C8Z%EAf%BB%D2%BCS-%B6%BDn%A6%1DauQ%A6%3D%B4%D2*%88B%DB4%C8Y%99%89%1B%82d%1C%8EI%5Cek%E6%A9%E6%9C%D0%FE%D0pq%8E%FC%B7%D6%DF%F0%C7%D3U%CA%94j%FFf%AA%8AR%DB%9A%DA_%E7%E7%D0%FF%D9"/>

Heres others tool for that ben tools. Aneh kode panjang begitu bisa jadi sebuah syntax image yak sob :D

The data: URI Image

Type: base64

Alternatively, give an HTTP URI to use as input:

If you use the URI option, the MIME type will be taken from the remote site, not the type field above.

Alternatively, upload a file: Trust UA-provided MIME type, if any.

If you don't trust the UA-provided type, then the type you provide in the text field at the top will be used instead.

See RFC 2387. Privacy policy: All activity is logged, but only serious abuse will be publicised.

HTML4.0 DOCTYPE: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> XHTML1 namespace: http://www.w3.org/1999/xhtmlHappy code base64 \m/

Show Hide or Appear Lost

Artikel kali ini akan membahas tidak jauh mengenai show/hide dengan menggunakan javascript dan HTML sob :D Jadi disini Beben si bloglang anu ganteng kalem tea hanya memberikan serentetan kode dan script show/hide, dalam penggunaannya silahkan tinggal kreasi sobat masing-masing :P Jika kode HTML mirip trik hover, ketika disorot maka akan muncul apa yg tersembunyi ;) Pada javascript ketika diklik maka akan timbul juga yg nyumput itu :-" Karena berupa kode dan script mentah maka disini kita memerlukan alat bantu online. Kita ambil saja yg ini Tryit Editor, buka dan nanti akan ada script<html>
<body>

<script type="text/javascript">
document.write("<h1>Hello World!</h1>");
</script>

</body>
</html>Hapuslah terlebih dahulu script tersebut yah ;) Setelah dihapus, baru deh ini sobat praktekan kode-kodenya :D

Javascript show/hide

<script>
//<![CDATA[
function showHide() {
if (document.getElementById('openOff').style.display == 'block') {
document.getElementById('openOff').style.display = 'none';
} else {
document.getElementById('openOff').style.display = 'block';
}
}
//]]>
</script>

<style>
#openOff { }
</style>

<a href="javascript:showHide();">Open/Off</a>

<div id="openOff" style="display:none">
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=en&w=160&h=60&title=&border=&output=js"></script>
</div>

Keterangan warna tulisan pada script:

1. Script warna merah.
Letakan diatas tag </head>
2. Script warna kuning.
Kode CSS yg biasanya diletakin sebelum kode ]]></b:skin> Silahkan kreasi sendiri, Beben percaya kalau masalah CSS pasti sudah pada mahir b-)
3. Script warna biru.
Kode HTML yg mana dimasukan didalam tag <body> ... </body> template.

HTML hover

<style>
#ekstramenu .current a, #ekstramenu li:hover > a {
background: red;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#ekstramenu li:hover > ul {
display: block;
}
#ekstramenu ul {
list-style-type:none;
color:#000000;
text-align:left;
display: none;
margin: 0;
padding: 5px;
width: 235px;
left: 0;
background: #999999;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
</style>

<ul id="ekstramenu">
<li class="current"><a href="#">Shout Box</a>
<ul>
<li>
<!-- YOUR CONTENT HERE -->
PUTT YOUR CODED CONTENT HERE YOOO!!!
<!-- END CONTENT -->
</li>
</ul>
</li>
</ul>

Happy creaty \m/

About YouTube on Blogspot

Tidak tahu ada penomena apa nih! Salah satu master blogger membanting setir tiba-tiba blognya ke artikel video :D Sekarang buat blog baru sob http://hoctroyoutube2010.blogspot.com/ koleksi dia kali yak ;)) Mungkin pembuatannya mirip dengan artikel berikut Embedding Youtube music links in your blog. Kalau mau yg lebih ekstreme lagi mengenai YouTube, blog masih punya master hoctro tapi versi indonesianya ;) tengok kemari Bikin Video Search di Blogger. Dengan teknik itu kita hanya tinggal memasukan keyword video apa saja nanti dengan hanya mengklik akan muncul deh jika memang ada videonya via YouTube b-) Mungkin rancu bahasa indonesianya sob :D tapi gokil :))

Masukin seleuruh kode berikut sebelum tag </head>

<script src='http://www.google.com/uds/api?file=uds.js&amp;v=1.0&amp;key=ABQIAAAA...' type='text/javascript'/>
<link href='http://www.google.com/uds/css/gsearch.css' rel='stylesheet' type='text/css'/>
<script src='http://www.google.com/uds/solutions/videobar/gsvideobar.js' type='text/javascript'/>
<link href='http://www.google.com/uds/solutions/videobar/gsvideobar.css' rel='stylesheet' type='text/css'/>

Ganti key (script berwarna merah) dengan kepunyaan sobat, jika blon punya baca ini Google Ajax Feed API! Nah ini mungkin yg rada jelibet, cari bagian sidebar-wrapper template sobat memang jika ingin tampil di sidebar template sobat, biasanya kode seperti <div id='sidebar-wrapper'> Lalu perhatikan kode berikut<b:section class='sidebar' id='sidebar' preferred='yes'>Jika sudah ketemu, lakukan Expand Widget Templates Scroll kebawah sampai menemukan tag penutup dari kode <b:section class='sidebar' id='sidebar' preferred='yes'> yaitu kayak ginih </b:section>

Kalau sudah ketemu sisipkan kode-kode berikut tepat diatas tag penutup tadi </b:section>

<b:widget id='TextList1' locked='false' title='Interesting Video Search' type='TextList'>
<b:includable id='main'>

<!-- Video Mod/Hack by Hoctro. Free for use
in Blogger Beta. Please do not remove this
line & refer others to my original hacks
stored at http://hoctro.blogspot.com for proper
installation and latest updates - 10/18/06 -->

<h2><data:title/></h2>
<div id='videoPlayer'>Loading...</div>
<div class='widget-content'>
<center>
<div class='video-tags'>
<b:loop values='data:items' var='item'>
<a expr:href='"javascript:vbm.execute(\"" + data:item + "\")"'><data:item/></a>
<span class='tag-sep'>|</span>
</b:loop>
</div>

<div class='horizontalVideobar' id='videoBarMiddle'>Loading...</div>
</center>

<script type='text/javascript'>
var vbm;
var options = {
 largeResultSet : true,
 horizontal : true,
 thumbnailSize : GSvideoBar.THUMBNAILS_SMALL
}
// set up the right bar as the master
vbm = new GSvideoBar(
           document.getElementById("videoBarMiddle"),
           document.getElementById("videoPlayer"),
           options
           );

vbm.execute("koeaing");
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

SAVE. Lari ke halaman Page Elements cari yg bertitelkan Interesting Video Search dan klik Edit, lalu isikan deh dengan keyword video mana yg mau dimasukinnya :) Click Here for Look Screenshot

Bagaimana!!! sip toh, mantap toh, yahuuuddd!!!

Jika itu terlalu pusing mari kita tengok versi sobat blogger lain mengenai Turn your youtube into a blog. Buka web YouTube lakukan search video apa yg mau diambil dan disave. Secara default link pada YouTube video ini akan berbentuk:http://www.youtube.com/watch?v=BnploFsS_tY Mau apapun videonya perhatikan saja kode link paling belakang. Ambil kode tersebut dan rangkaikan dengan link blog sobat, nantinya akan menjadi sbb:http://beben-koben.blogspot.com?v=BnploFsS_tY

Trik ini akan berfungsi jika sobat memasukan serangkaian kode dan script berikut pada postingan (ketika mau mosting)

<script type="text/javascript">
xx="\&"+location.search.slice(1,100)
if(xx.indexOf("\&v=")>=0){
utube= xx.slice(xx.indexOf("\&v=")+3,999999)
document.write('<embed style=\"width:100%\; height:350px\;\" id=\"VideoPlayback\" type=\"application\/x-shockwave-flash\" src=\"http:\/\/www.youtube.com\/v\/' + utube + '\&autoplay=1\"> <\/embed>');
} else {
document.write('<embed style=\"width:100%\; height:350px\;\" id=\"VideoPlayback\" type=\"application\/x-shockwave-flash\" src=\"http:\/\/www.youtube.com\/v\/okHAmAxztNk\&autoplay=1\"> <\/embed>');
}
</script>

<a href="http://nama-blog.blogspot.com?v=BnploFsS_tY" title=" How to create a blog with Blogger">Title1</a>
<a href="http://nama-blog.blogspot.com?v=s40_tuZh2YQ" title="How to add YOUTUBE Video to BLOGGER">Title2</a>
<a href="http://nama-blog.blogspot.com?v=GmY_JTHFBXg" title="How to Build a Blog on Blogger">Title3</a>
<a href="http://nama-blog.blogspot.com?v=UWvdfpIZSXU" title="Basic Tarian">Title4</a>
<a href="http://nama-blog.blogspot.com?v=GGouq17XoiY" title="List Movies">Title5</a>

<script src="http://youtube.go-here.nl/1.js" type="text/javascript"></script>

Dengan memasukan semua kode diatas, kita dapat mengumpulkan embed video via YouTube dan menyaksikannya tanpa harus meninggalkan blog kita. Perhatikan script berwarna merah itu, hostingkan pada host sobat² Download script. Kalau sudah didownload buka dan perhatikan width dan height, rubahlah width menjadi nominal 100% dan height sesuai selera masing² :) baru deh dihostingkan yah...

xx="\&"+location.search.slice(1,100)
if(xx.indexOf("\&v=")>=0){
utube= xx.slice(xx.indexOf("\&v=")+3,999999)
document.write('<embed style=\"width:100%\; height:350px\;\" id=\"VideoPlayback\" type=\"application\/x-shockwave-flash\" src=\"http:\/\/www.youtube.com\/v\/' + utube + '\&autoplay=1\"> <\/embed>');
}
if(xx.indexOf("\&docId=")>=0){
utube= xx.slice(xx.indexOf("\&docId=")+7,999999)
document.write('<embed FlashVars=\"autoPlay=true\" style=\"width:100%\; height:350px\;\" id=\"VideoPlayback\" type=\"application\/x-shockwave-flash\" src=\"http:\/\/video.google.com/googleplayer.swf?docId=' + utube + '\"><\/embed>');
}

Setelah melakukan praktek dan ujicoba, agar nanti disetiap kita mengumpulkan koleksi embed video, Beben si bloglang anu ganteng kalem tea mencoba menyimpan script yg tadi disuruh hostingkan, disimpan via HTML/Javascript dan melakukan penulisan link seperti kode berwarna ungu diatas! Ternyata bisa juga, dan nantinya kita akan kembali ke home dengan link video yg ditonton (tetap di blog juga) ;;) Silahkan lihat demonya di blog dummie aku Heres (jika masih terpasang triknya, soalnya blog praktek jd suka aku tak hapus lagi trik yg sudah dimasukin itu) hihihi :D

Happy YouTube in The Blog \m/

Blog Warung Bebas

Blog sobat satu ini mungkin bisa menjadi tempat untuk menjadi inspirasi. Karena artikelnya yang beragam dan Beben lihat kayaknya yg empunya jagoan script juga ;) Sangkin beragamnya susah mau baca yg mana, tapi ya karena si Beben si bloglang anu ganteng kalem tea tertarik yg berbau tutorial blogspot, eh pas nengok, aje gileee >-) Nah silahkan akses kemari guna melirik Widget Blog. Gak nahan lihat tooltipnya sob, hihi :D maknyus punya dah :-bd Mau menanamkan tv online indonesia di blog ada...pokoknya mah banyak yg bisa dipelajari disana :) Nah basa-basinya gak tauk harus apa lagi, males rangkai kata-kata, cek gidot ajah deh ke site mapnya. Sitemap kayak di blog itu juga bisa dimiliki oleh sobat loh :x jika mau yg kayak gitoh b-) Introduce we are friend Warung Bebas.

SOBAT YANG MEMASANG SCRIPT TELEVISI ONLINE DARI WARUNG BEBAS HARAP DIHAPUS! KARENA LAYANAN SHARING TELAH DIHENTIKAN OLEH WEB YANG BERSANGKUTAN :)

Drop Shadow for CSS3

Berita ringan mengenai drop shadow with CSS yaitu membuat efek bayangan dengan menggunakan attribute CSS3. Mungkin sudah pada tauk kodenya apaan saja sobat-sobat :D Tapi kabar terbaru, kode drop shadow ini sudah dapat support Firefox 3.5+, Safari 3+, Google Chrome, Opera 10.50, Internet Explorer 5.5. Oke untuk lebih jelasnya silahkan sobat tour dulu yah ;))

• CSS3 box-shadow Property
Try it Yourself
• CSS3 text-shadow Property
Try it Yourself

Nah, dua buah contoh diatas diclaim tidak support terhadap IE. Sekarang sudah ada kodenya buat IE agar tampil itu si kode CSS bayangan (shadow) :P Heres bro code for Drop Shadow...

.shadow {
-moz-box-shadow: 3px 3px 4px #000;
-webkit-box-shadow: 3px 3px 4px #000;
box-shadow: 3px 3px 4px #000;
/* For IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
/* For IE 5.5 - 7 */
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}

Contoh Drop Shadow

Dengan menggunakan atribut kode diatas, sobat bisa menghasilkan sebuah bayangan yang yahud punya b-) Selamat berkreasi biar indah yah ;)

Google AJAX Feed API Feed Reader

Artikel kali ini akan bercerita mengenai bagaimana cara mendapatkan sebuah bahkan beberapa link FEED. Sobat harus sudah memiliki Google AJAX Feed API key jika belum punya silahkan daftar dulu http://code.google.com/apis/ajaxfeeds/signup.html Keterangan web berikut mungkin dapat lebih membuka kelebihan yg dimiliki Google AJAX Feed API TheEdiFier cara-cara, fungsi, dan script ada disana ;) Salah satu blogger yg suka bermain dengan key API adalah master hoctro ;)) Secara default jika pada blogspot sendiri link ini akan berbentukhttp://your-name-blog.blogspot.com/feeds/posts/defaultJadi tidak jauh akan bermain dengan FeedBurner sebuah web/blog.

Pusing kali yak penjelasannya! Simpelnya gini deh, dengan memiliki KEY API kita dapat melakukan beberapa aksi yg memang dikembangkan dengan metode pemanggilan key api yg kita miliki. Contoh simpel begini...

<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIA..."></script>

<script type="text/javascript">
google.load("feeds", "1");
function OnLoad() {
   var feedControl = new google.feeds.FeedControl();
   feedControl.addFeed("http://beben-koben.blogspot.com/feeds/posts/default", "Prodigy of Head");
   feedControl.addFeed("http://feeds.feedburner.com/Techcrunch", "TechCrunch");
   feedControl.draw(document.getElementById("feedControl"));
}
google.setOnLoadCallback(OnLoad);
</script>
<div id="feedControl">Loading...</div>

Keterangan:

1. Script berwarna merah.
Script inti dari key api, yg memang harus register (sign up) dalam mendapatkannya.
2. Script berwarna biru.
Script pemanggil link RSS dari web/blog manapun. Dengan melakukan Add a Gadget ► HTML/Javascript kita dapat melihat perkembangan (update) dari web/blog yg kita masukan.

Mirip dengan metode Add a Gadget ► Link List pada blogspot :D

Kembali ke inti artikel, bagaimana cara mendapatkan link FEED dengan metode diatas. Kita tinggal memasukan nama web, nama judul, atau apapun yg memang ada link feednya nanti akan keluar. Untuk lebih jelas silahkan download Google AJAX Feed API. Pada bagian atas cari dan ganti key api dengan yg dimiliki sobat!<script type="text/javascript" src="http://www.google.com/jsapi?key=ISI DENGAN KEY GOOGLE API SOBAT-SOBAT"></script>Mau masukin link FEED favorite, tapi tidak tauk alamat link feednya susah juga toh :)) Hepi nyu yerrr \m/