Trik Komputer: Mei 2010

Senin, 31 Mei 2010

BloggerTube

Hihihi :D template keren lagi nih sob :-bd Template khusus untuk yang blognya suka mendownload film. Template Video dengan nama BloggerTube. Dengan sentuhan script dari Master , pencipta menjadikan template perpaduan antara blogger dan YouTube ini penuh GAYA b-)

Pic By : Dantearaujo.net

Instruksi pemakaian BloggerTube Instr, dan fix untuk slidernya Fix for Bloggertube Slider. Dont forget for look new template from Master Abu Farhan . Bagi sobat muslim ada koleksi yg patut dilihat nih .

Minggu, 30 Mei 2010

Widget Finding Similar Content In Wikipedia

Artikel terkait atau postingan yang bertemakan sama berdasarkan label pasti sobat sudah pada tahu :) Kalau konten web/blog dikaitkan dengan artikel yg ada di wikipedia gimana ceritanya hayooo :-" Jadi konten yg ada diblog sobat, khususnya pada postingan akan dikaitkan dengan artikel yg ada di webnya wikipedia. Inggris sih, tapi kan lumayan untuk cari² referensi ;)) Dengan lebih dari 1,8 artikel berbahasa inggris feature yg berbentuk widget ini akan menampilkan artikel dengan query relevan yg kita buat. Letakkan script widget yg telah sobat buat di akhir kode postingan, akhir kode label ataupun akhir kode artikel terkait didalam template sobat.

Similpedia merupakan proyek dari www.similario.com. Konten Internet berkembang dengan kecepatan yang luar biasa - jutaan blog, ribuan kantor berita melakukan apa yang mereka lakukan yang terbaik - penghasil konten. Sebuah tantangan yang masih ada adalah menemukan konten yang relevan terbaik yang cocok dengan apa yang pengguna cari, cepat dan akurat sementara menaruh kesegaran konten dan pengalaman pengguna yang menguntungkan. Similario berkomitmen untuk mengambil tantangan itu dan memberikan solusinya. Semoga berjalan scriptnya jika aku simpan dipostingan ini, sekalian contoh :D
Klik dan buatlah widget konten terkait sobat sendiri Website Widget.

Jumat, 28 Mei 2010

Link to a Page Using Google AJAX Search

Sudah membaca postingan Beben si bloglang ganteng kalem tea mengenai bookmark pilihan :-? Disana aku berbagi mengenai link bookmark yg berguna untuk kreatifitas :D Coba lihat nih Saturday, March 24, 2007 pada moment tersebut postingan yg beben buat sudah ada, dan aku baru ngeuhnya sekarang =)) :-s Here's dude .

Kalau sudah baca versi løndønë ¢σмє тσ fαfαн guna mendapatkan versi ѕι-вloglang™ :"> Inti dari ßøøkmå®k ini tercipta tidak lain untuk memudahkan pencarian kata (textareas) yg relevan ketika kita melakukan grab pada kata yg dicari :-" Bookmark ini ternyata hanya berfungsi pada blog berbasis blogspot, tatkala kita sedang memosting (waktu membuat satu buah postingan di editor post / pas ngedit post mau update) b-) Maka akan muncul disisi kanan beberapa link rujukan apa kata yg dicari tadi (yang digrab katanya)

How to do that...:D Tinggal drag link berikut di address bar/bookmark toolbar sobat ;)

Linkify

Ini contohnya ketika Beben nge-drag pada kata pilihan di postingan ini :-bd

Sampai jumpa lagi diartikel pilihan selanjutnya :D :-h

Kamis, 27 Mei 2010

Cloud Zoom on Blog

Sebenarnya postingan ini, dulunya tentang penerapan jQuery Image Zoom Plug-In sob :D Terus dapat trik zoom yang lebih gaya aku ganti deh sob ;)) Biasalah si Beben bloglang ganteng kalem tea full stylish. Jadi dah ada komentarnya =)) Gak apa-apa ya sob, soalnya triknya sama maka aku pake yg ini saja deh :D :x Ini contohnya (kalau berhasil tunggu sampe beres loading bro)

Cloud Zoom adalah sebuah plugin jQuery sebanding dengan gambar zoom produk komersial seperti Magic Zoom. Nah kalau mau lebih sempurna contohnya silahkan klik duyu tombol read morenya, terus tunggu sampe beres lagi...:))

Blogger Mastering

Hehehe dapat lagi sobat blogger yang datang dari Africa Mr. Rodney SANKINKA. Kita harap sobat kita ini bisa memberikan berita piala dunia yak :D Tenang sob, blognya bukan mengenai berita, seperti biasa Beben si bloglang ganteng kalem tea memberi tutorial kok :-" Waktu memasuki blognya ada artikel mengenai template, tapi sedikit unik dengan penampilannya.

Introduce sob Blogger Mastering please visit there b-) good blog.

Rabu, 26 Mei 2010

Get Free Backlinks

Backlinks yang memang banyak dicari oleh para blogger untuk mempercepat terindeks oleh sebuah mesin search ini banyak ragamnya :D Ada yg berupa widget , menggunakan jasa backlinks generator dll. Makin banyak mungkin bagus juga kan sob :D Backlinks generator dari ini mungkin bisa digunakan nih ;)) Selain mudah, dan lumayan banyak juga mengadd/ping ke 100+ web (Auto Generated Content) b-) Masukan URL link sobat beserta anchor (judul) seperti...
http://beben-koben.blogspot.com|Prodigy of Head

Kalau blog baru boleh juga nih trik seperti ini ;) Selain mudah dan tentunya cepat terindeks deh :p Untuk bonusnya, ini Beben kasih yg butuh cari-cari MP3 :P Susah cari artikel yg gaya lagi :(

Artist/Title:

Selasa, 25 Mei 2010

Interesting in Rich Snippets and How Do It

Google rich snippets tips and tricks??? Hayo apa yang terbayang kalo membaca itu ;)) Mungkin salah satu kekuatan keyword bila disearch/dicari ya trik ini sob :-" Dengan menggunakan teknik yg disebut microformat, microdata, atau RDFa ini, bisa mengkuatkan keyword yg ada pada postingan kita. Kita tidak akan tahu secara pasti, soalnya kinerja dari trik ini tidak akan terlihat kasat mata dan akan terlihat apabila kita melakukan klik kanan pada mouse dan open source :P

Dengan menggunakan snippet (potongan) kecil yg kita anggap tak berguna ini, ternyata google menaruh perhatian yg khusus untuk satu hal ini. Microformats ini tidak sama keberadaannya dengan semantic web Cubicgarden. Apalagi dengan adanya microblogging atau web via phone, patut nih kita perhatikan untuk satu hal ini ;)) Yang mengejutkan ternyata trik ini saling berkaitan dg google custome search sob :) Mau menerangkan aku jg tidak paham, ya sudah pahami dan renungkan saja hasil ngebloglang kali ini ya sob :-"

Ada baiknya coba sobat perhatikan URL salah satu postingan yg belum disnippets dan masukan Webmaster Tools. Ini contoh yg Beben lakukan pada blognya master Doyok ;)) pada link postnya yg berjudul Cara Mendaftar Google Analytics Untuk Evaluasi Blog.

Ini postingan aku yg sebelumnya...:D walau masih ada warning sih :-s

Silahkan memasuki halaman berikut untuk mengetahui apa, bagaimana dan fungsi dari hNews itu Tech and Law. Perhatikan pada point...

How to add basic hNews to a Blogger blog - tutorial.

Bagaimana :-? Tertarik menggunakan Rich Snippets, sign up on . Coba sobat yg benar² mau berseo ria ada baiknya membaca dasar perintah google dalam melakukan search , dan lanjutkan membaca mengenai dasar dari trik snippets ini ini salah satu contoh dari hasil dan struktur snippets dan uji hasil trik ini dan ini hasil Beben si bloglang ganteng kalem dalam memasang trik ini cek gi dot. Untuk mengaplikasikan hAtom pada blogger . Cawww...:-h

Make Your URL Shortener

Memperpendek link yang panjang menjadi pendek dan gampang diingat tujuan tools ini dibuat :D Yang tidak asing yaitu Tiny URL. Sekedar berbagi nih sob, ada banyak sih diluaran sana yg menawarkan jasa memperpendek link ;) Dengan kemampuan memperpendek menjadi 2000 karakter sesuai link terpanjang yg ada :P web berikut juga menawarkan beberapa kelebihan .

Semua link yg sudah diphrase akan diawali dengan http://is.gd/... Support dan mendukung pada firefox plugin, Mac OS X, webOS. Satu yg bikin gaya dari layanan web ini, kita dapat menyimpan link dalam bentuk script dan kita dapat langsung mendapatkan URL Shortener :-bd

Make Short This Post Link

Hanya dengan menanamkan link seperti itu kita sudah dapat membuat link yg panjang menjadi pendek sob ;))
<a href="javascript:void(location.href='http://is.gd/create.php?longurl='+encodeURIComponent(location.href))">Your Title Here</a>
Simpan syntax link tadi ditemplate sobat sesuai dengan keinginan dan pantas :D Happy blogging with Beben bloglang ganteng kalem :P

Senin, 24 Mei 2010

Feature CSS3 Transitions, Transforms, Animation

Seru juga main-main dengan CSS3 ;)) Tadi bermain dengan efek-efek yang bisa dipakai pada link disorot dan diklik. Bisa menjadi besar, terbalik, hilang, rolling ah pokoknya seru-seru :-bd Gaya nih sob CSS3 ;)) Diklik gambar jadi rubah, disorot juga bisa rubah sampai-sampai slider juga bisa sob b-) Para developer web menyebut semua itu CSS3 Transitions, Transforms and Animation :D Ini contohnya sob :

Hover
Active
All in one

Perlu diingat efek CSS ini belum support pada semua browsingan. Kalau mau melihat efek yang tidak kalah gaya silahkan meluncur sob . Berbagi ya sob kalau ada referensi ;)

Minggu, 23 Mei 2010

LK Magazine V2 Premium

Template keren dan gaya lagi nih keluar dari sobat kita Mr Lasantha :-bd Versi keduanya ;))

4 Kolom | 3 sidebars | sidebar kanan | kiri sidebar
Auto Read More Feature with Thumbnails.
468*60 Header Ads banner
468 * 60 Header Logo dengan file PSD dan Font.
1 CSS Search Box
Footer 3 Kolom bagian
Tombol Bookmarking Sosial / badge instal
SEO friendly blogger hack judul
Default Blogger Tag Pos SEO friendly
Meta tag diinstal
Top Bar dengan tombol Feed dan Tampilan Hari, Bulan, Tahun
Gratis
Favicon support sehingga sobat dapat menambahkan ikon url sobat sendiri
CSS Compressed untuk mempercepat load halaman
Embedded JavaScript menampilkan kode tanggal hari saat ini
Built-in Related Posts Widget untuk menampilkan posting Terkai
Navigasi bernomor Page Hack installed
Navigasi Breadcrumbs Hack installed
Older Posts, Home, New Posts Teks Navigasi dengan Gambar
Komentar Dimodifikasi Bagian Aktifkan Avatar di Komentar Blogger
Many more ...

Sabtu, 22 Mei 2010

Brainy Bookmarklet Links

Bookmarklet adalah suatu applet, aplikasi komputer kecil, disimpan sebagai URL dari bookmark di web browser atau sebagai hyperlink pada halaman web. Satu kalimat yang mengelink kemana-mana =)) Pasti sobat sudah pada kenal dengan istilah bookmark ini :) Secara manual dan tercepat ya pencet secara bersama pada keyboard Ctrl + D :D

Setelah BW ternyata bookmark ini banyak fungsinya sob dalam perjalanan perkembangannya. Tidak sekedar sebagai menyimpan link atau apapun tapi bisa berfungsi gaya :)) b-) Seperti biasa Beben si bloglang ganteng kalem tea :P kembali membawa informasi pilihan mengenai bookmark ini. Untuk membaca dari sebuah web biar lebih full stylish, mengeprint, memberikan info dll nih Beben dapet ;)

Better, Stronger, Safer jQuerify Bookmarklet

Learning jQuery

jQuerify « drag to your bookmarks bar

Readable

<a id="bookmarklet" href="javascript: (function(){if(document.getElementsByTagName('html').length>0);else{return;}if(document.getElementsByTagName('body').length>0);else{return;}if(window.$readable);else{window.$readable={};window.$readable.path='http://readable-app.appspot.com/';}window.$readable.options={};window.$readable.options.base='blueprint';window.$readable.options.font_family='wide_sans_serif';window.$readable.options.font_size='12';window.$readable.options.text_line_height='2';window.$readable.options.text_align='normal';window.$readable.options.text_image_align='center';window.$readable.options.text_box_width='80_percent';window.$readable.options.text_box_align='center';window.$readable.options.text_box_outer_margin='1';window.$readable.options.text_box_inner_margin='1';window.$readable.options.color_theme='light_grey_off_black';window.$readable.options.background_transparency='70';window.$readable.options.background_transparency_color='from_theme';window.$readable.options.video='strip';if(window.$readable.callScript){window.$readable.callScript();return;}if(document.getElementsByTagName('head').length>0);else{document.getElementsByTagName('html')[0].insertBefore(document.createElement('head'),document.getElementsByTagName('body')[0]);}document.getElementsByTagName('head')[0].appendChild(document.createElement('script')).setAttribute('src',window.$readable.path+'target.js?rand='+encodeURIComponent(Math.random()));})()">Readable</a>

The Printliminator

Printliminator

ClipR

Google Dictionary Drag the link to your browser bookmark toolbar.

Fast Tweet Drag the link to your browser bookmark toolbar.

Auto Translate Drag the link to your browser bookmark toolbar.

RedDIV Drag the link to your browser bookmark toolbar.

NoFollow Drag the link to your browser bookmark toolbar.

Latent Motion

<a href="javascript: (function(){var head=document.getElementsByTagName('head')[0],script=document.createElement('script');script.type='text/javascript';script.src='http://www.my.com/your-javascript.js?' + Math.floor(Math.random()*99999);head.appendChild(script);})(); void 0">Your Bookmarklet Name</a>

Squarefree
Drag this script on your browser bookmark toolbar.

javascript: (function(){function getSel() {var txt = '';if (window.getSelection) {txt = window.getSelection();} else if (document.getSelection) {txt = document.getSelection();} else if (document.selection) {txt = document.selection.createRange().text;} else return;var s = txt.toString();return s;}var u = 'http://www.similpedia.org/engine';var sel = getSel();if (sel.length == 0) { sel = location.href; }  nD = window.open().document;    nD.writeln('<HTML><HEAD></HEAD><BODY>');  nD.writeln('<FORM NAME=form ACTION=' + u + ' METHOD=POST>'); nD.writeln('<TEXTAREA name=q>' + sel + '</TEXTAREA>'); nD.writeln('<INPUT TYPE=SUBMIT NAME=Submit VALUE=Submit></INPUT>'); nD.writeln('</FORM>'); nD.writeln('<SCRIPT>document.form.submit();</SCRIPT>'); nD.writeln('</BODY></HTML>'); nD.close();})()"

Citebite

Cite Bite

SpriteMe

Try it on this page:

Subsimple
Ini bookmarklet tombol like yg ada pada facebook

javascript: (function(){try{var url=encodeURIComponent(location.href);var ifr=document.createElement('iframe');ifr.style.position='absolute';ifr.style.top=10+'px';ifr.style.left=10+'px';ifr.style.width=450+'px';ifr.style.height=100+'px';ifr.style.border='none';ifr.src='http://www.facebook.com/plugins/like.php?href='+url+'&show_faces=true&width=450&action=like&colorscheme=light';ifr.scrolling='no';ifr.frameborder=0;document.getElementsByTagName('body')[0].appendChild(ifr);var ifr=document.createElement('iframe');ifr.style.position='absolute';ifr.style.top=125+'px';ifr.style.left=10+'px';ifr.style.width=450+'px';ifr.style.height=100+'px';ifr.style.border='none';ifr.src='http://likeomatic.heroku.com/i';ifr.scrolling='no';ifr.frameborder=0;document.getElementsByTagName('body')[0].appendChild(ifr);}catch(e){}})();

CategoryTagBlogThis!
XRAY

XRAY

MRIHeres bro MRI

Drag this Microformats script

javascript: (function(){function%20l(u,i,t,b){var%20d=document;if(!d.getElementById(i)){var s=d.createElement('script');s.src=u;s.id=i;d.body.appendChild(s)}s=setInterval(function(){u=0;try{u=t.call()}catch(i){}if(u){clearInterval(s);b.call()}},200)}l('http://leftlogic.com/js/microformats.js','MF_loader',function(){return!!(typeof MicroformatsBookmarklet=='function')}, function(){MicroformatsBookmarklet()})})();

Readability
Nah masuk kemari guna mendapatkan bookmarklets yg berguna

subsimple
Untuk melihat daleman web/blog.javascript: (function(){var%20s=document.createElement('script');var%20t=new%20Date().getTime();s.setAttribute('type','text/javascript');s.setAttribute('class','ydebug');s.setAttribute('src','http://debug.yaml.de/debugger.js?d='+String(t));document.getElementsByTagName('head')[0].appendChild(s);})();
Slayeroffice
Favelets
Copy the link to your browser bookmark toolbar, use F5(refresh) to clear the grid.

javascript: (function(){body=document.getElementsByTagName('body').item(0);newElement=document.createElement('canvas');newElement.id='grid';body.appendChild(newElement);var a=document.getElementById('grid');a.style.cssText='left:0;top:'+document.documentElement.scrollTop+'px; z-index:100000; position:absolute;';a.width=window.innerWidth;a.height=window.innerHeight;var b=a.getContext('2d'),c=window.innerWidth,d=window.window.innerHeight;b.font='bold 15px sans-serif';b.strokeStyle='rgba(245, 197, 196, 0.8)';b.beginPath(); for(var e=0;e<c;e+=10){b.moveTo(e,0);b.lineTo(e,c)}for(e=0;e<c;e+=100){b.moveTo(e,0);b.lineTo(e,c);b.fillText(e,e+4,15)}for(var f=0;f<d;f+=100){b.moveTo(0,f);b.lineTo(c,f);b.fillText(f,10,f-4)}for(f=0;f<d;f+=10){b.moveTo(0,f);b.lineTo(c,f)}b.stroke();})()

Ini untuk membuat highlight jenis huruf yg kita cari.
javascript:var%20items=new%20Array();if(document.referrer.indexOf('google')!=-1%20&&document.referrer.indexOf('q=')!=-1){var%20queryTermsRegExp=new%20RegExp('q=([^&]+)');if(queryTermsRegExp.test(document.referrer)){items=RegExp.$1.split('+');}}if(items.length%20==%200){var%20searchWords=prompt('Enter%20one%20or%20more%20words%20to%20highlight:','');items=searchWords.split('%20');}var%20colors=new%20Array('#ffff66','#a0ffff','#99ff99','#ff9999','#ff66ff','#880000','#00aa00','#886800','#004699','#990099');b=document.body.innerHTML;for(var%20i=0;%20i<items.length;%20i++){var%20replacementRegEx=new%20RegExp('('+items[i]+')','gi');b=b.replace(replacementRegEx,'<span%20style=\'background-color:'+colors[i%20%%20colors.length]+';\'>$1</span>');}var%20scrollToRegEx=new%20RegExp('('+items[0]+')','i');b=b.replace(scrollToRegEx,'<span%20id=\'scrollToHilight\'>$1</span>');void(document.body.innerHTML=b);window.scrollTo(0,document.getElementById('scrollToHilight').offsetTop);
Decode Encode Bookmark

javascript: (function(src,w,h,i,s){if(this.WebReflectionEncode)return%20this.WebReflectionEncode();function%20p(){s.top=(document.documentElement.scrollTop||(document.body&&document.body.scrollTop)||0)+'px'};try{i=document.createElement('<iframe%20frameborder="0"%20src="'+src+'"></iframe>')}catch(e){i=document.createElement('iframe');i.src=src};s=i.style;s.border='1px%20solid%20black';s.width=w+'px';s.height=h+'px';s.position='absolute';s.right=0;s.zIndex=99999;p();w=setInterval(p,250);(document.body||document.documentElement).appendChild(i);this.WebReflectionEncode=function(){clearInterval(w);i.parentNode.removeChild(i);w=h=s=i=null;this.WebReflectionEncode=null;}})('http://www.3site.eu/encode/',280,320);

Looking for image and host via imageshack.us

javascript:t='';for(var%20n=0;n<document.images.length;n++){t+='<a%20href=/%20onclick=\'document.f.url.value=document.images['+n+'].src;document.f.submit();return%20false;\'><img%20border=0%20src='+document.images[n].src+'></a>%20'};if(t!=''){document.write('<html><head><title>ImageShack%C2%AE</title><link%20rel=stylesheet%20href=http://imageshack.us/img/style-def.css%20type=text/css></head><body%20bgcolor=#F7F7F7><table%20border=1%20cellpadding=5%20cellspacing=0%20class=table_decoration%20align=center%20width=760><tr><td><iframe%20src=http://imageshack.us/adsframe2.php%20scrolling=no%20allowtransparency=true%20frameborder=0%20width=700%20height=300><a%20href=http://www.getfirefox.com>Get%20FireFox!</a></iframe><p>ImageShack%20has%20found%20the%20following%20images%20on%20this%20page.</p><p>Click%20on%20any%20image%20to%20host%20it%20on%20ImageShack,%20or%20press%20the%20back%20button%20to%20return%20to%20the%20previous%20page.</p><form%20name=f%20action=http://imageshack.us/transload.php%20method=post><input%20type=hidden%20name=url></form>'+t+'</td></tr></table></body></html>');void(document.close())}else{alert('There%20are%20no%20images%20to%20host%20on%20this%20page.')}

Untuk melihat gambar pada satu halaman.

javascript:Ai7Mg6P='';for%20(i7M1bQz=0;i7M1bQz<document.images.length;i7M1bQz++){Ai7Mg6P+='<img%20src='+document.images[i7M1bQz].src+'><br>'};if(Ai7Mg6P!=''){document.write('<center>'+Ai7Mg6P+'</center>');void(document.close())}else{alert('No%20images!')}

Drag this bookmarklet to your bookmarks bar or a tab and start having some fun on other pages too!
Untuk melihat ada tidaknya link del.icio.us

javascript:var res = null; var ok_title = new RegExp('^del\.?icio\.?us links'); var ok_type  = 'text/html';varres_css = 'padding-bottom:15px;'; var content_txt = 'This person\'s del.icio.us links can be seen at ';var content_css = 'margin-bottom:10px;border:1px solid #ccc;padding:5px;background-color:beige;';var doc  = document;var list = doc.getElementsByTagName('link');var body = doc.getElementsByTagName('body')[0];for (var i = 0; i < list.length; i++) {var link = list[i]; if ((link.type == ok_type) &amp;&amp;(ok_title.test(link.title))) {var regexp_del = new RegExp('^(http:\/\/del\.icio\.us)\/(.*)$');var url_rss = link.href.replace(regexp_del,'$1/rss/$2');var html = doc.createElement('a');html.setAttribute('href',link.href);html.appendChild(doc.createTextNode(link.href)); rss = doc.createElement('a');rss.setAttribute('href',url_rss); res = doc.createElement('div'); res.setAttribute('style',res_css); var content = doc.createElement('div');content.setAttribute('style',content_css);rss.appendChild(doc.createTextNode('rss'));content.appendChild(doc.createTextNode(content_txt));content.appendChild(html);content.appendChild(doc.createTextNode(' ('));content.appendChild(rss);content.appendChild(doc.createTextNode(')')); res.appendChild(content); break;}} if (res) { void(doc.body.insertBefore(res,doc.body.firstChild)); } else {alert('no del.icio.us links'); }

Trunk.ly
CoffeeTable, v0.1.1

CoffeeTable

Flexible Nav

FlexibleNav bookmarklet

WhatFont
X-Ray Goggles.
FontFriend
See you :-h

LOOK IN MODE MOBILE OKAY!!!
Be a creatif, build your blog with your style GAYA \m/

Jumat, 21 Mei 2010

Google Blow Up

Ternyata google benar-benar berbenah diri dalam persaingan di dunia internet ini :) Banyak feature yang sekarang dalam garapan, open source yg sudah berjalan dan terus dikembangkan :-/ Hmmm...[-( Bagi sobat yg mau menggunakan font dari si embah, . Masuk kemari untuk mendapatkan tip cepat penggunaannya . Disini nih sob proyek font si embahnya :-bd Beberapa interview mengenai font API google . Satu lagi deh . Nah, selamat berpraktek ria dengan google fonts API ini Google Font Directory.

Sudah membuka open source font, eh keluar informasi lagi google berencana untuk memperkenalkan Google TV :x Bagaimana om YouTube menerangkan dalam versinya YouTube. Dari Official Google Blog loncat ke Google Code Blog takut kurang penjelasannya TechCrunch. Kayaknya bakal terealisasikan nih TV Google ini sob (*) Kalau sudah capek-capek loncat kesana kemarinya saatnya membaca sejarah dari Google TV ini Android Developers Blog.

Rabu, 19 Mei 2010

Creating Multicolumn Lists using CSS

Makin banyak nih pengembangan trik CSS sob :-bd Master Doyok pernah memosting tentang . Yang menjadikan hasil menjadi 2 bagian ;)

Artikel di bagian kiri. Ini blog aku Prodigy of Head.

Artikel di bagian kanan. Ini blog aku Ben Tools.

Sekarang bagaimana trik CSS ini kita aplikasikan pada kode list :-/ Pasti sudah pada kenal dengan rumusan list ini dong :) Here's and here . Itu list tuh sob ;))...kemon kita bikin list ini menjadi Multicolumn Lists using CSS.

Pada default kode list, kalau kita menggunakannya akan menghasilkan baris yg terus kebawah toh :D Adapun tag list ini seperti berikut...

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

Kalau kita menulis <ul>bla...bla</ul> atau <ol>bla...bla</ol> pasti akan kebawah dan terus kebawah ;)) Ini . Bagaimana supaya list ini tidak menjulur kebawah dan bisa seperti postingan master Doyok, menjadi 2 bagian :-bd Silahkan kawan mengunjungi ke . Buka halaman tersebut guna mendapatkan tutorialnya.

Pasti pada CSS template sobat sudah pada punya kode ini. Nah kalau sobat sudah membaca artikelnya, carilah kode CSS list ini pada blog sobat. Cari kode ul dan li pada bagian postingan. Bisa .post ul { bisa ul { ajah...pokoknya cari ul dan li yg pd bagian postingan. Kalau sudah ketemu dg kodenya, tambahkan saja kode yg belum ada pada artikel tadi Creating Multicolumn Lists using CSS.
See you again with bloglang ganteng kalem with gaya article anymore :)) :-h

Senin, 17 Mei 2010

Special FeedBurner for Blogger

Hehehe ;) blogspot tambah feature baru lagi nih :-bd . Tombol untuk melihat pratinjau pada hasil postingan kita sob. Walau masih dalam format bloggerindraft, ya tunggu saja sob. Kembali membahas trik yang dikeluarkan oleh salah satu master blog yaitu Hans pemilik http://beautifulbeta.blogspot.com mengenai artikelnya yg berjudul "All Feeds by Feedburner" Sebenarnya hack ini diambil dari kita melakukan klik kanan pada mouse bagi mozilla browse dan pilih "View Page Source"

Sekilas memang tidak ada yg berubah dari hack ini sob :D Soalnya ini berinterkasi langsung dengan engine yg dimiliki antara blogspot sendiri dengan engine feedburner @-) Lah!!! bagaimana kita ~~tahu~~ apa fungsi dari hack ini :-/ Tenang, mana ada master sekonyong-konyong ngeluarin hack kalo tidak ada fungsinya ;) Kalau mau lihat tutorial dalam versi kita silahkan kunjungi blognya kang Jaloe Memindahkan Blog Feed Ke FeedBurner, dan ini versi kerennya All Feeds by Feedburner.

Lah ini loh fungsi dari hack ini. Coba sobat perhatikan baik-baik dari kode-kode yg tidak ada tatkala kita melakukan view source sesuai dengan yg tertera pada artikel 2 master kita itu??? Apa sobat menemukan kode berikut...
<link href='http://feeds.feedburner.com/yourFEEDname' rel='alternate' title='RSS' type='application/atom+xml'/>
Itu kode yg tidak akan sobat temukan dikala sobat belum mengganti kode bawaan dari blog...

<b:include data='blog' name='all-head-content'/>

Tau dong fungsi dr feedburner? Secara kasarnya ini fasilitas yg memberikan jasa untuk web/blog kita dapat dibaca pada versi lain. Nah tidak diragukan keberadaan feedburner sendiri sebagai penyedia format application/rss+xml sudah tersebar kemana-mana. Facebook, digg, technorati, dll selalu menggunakan link feed untuk mengimport salah satu web/blog sebagai syaratnya. Intinya...

Jika kita merubah kode bawaan dari blog dan merubahnya dengan hack ke-2 master kita tuh, maka secara otomatis segala yg berurusan dg feedburner telah 100% dilakukan oleh engine feedburner itu sendiri

Jika mau melihat aksi langsung dari hack ini! Bilamana ada dari sobat yg menggunakan salah satu web jejaring dan otomatis terkirim ke email dalam verifikasinya, maka akan tampak aksi dari hack ini.
Adios amigos permios...semoga bermanfaat walau sedikit bingung, yg penting ngeblog jalan terus. SALAM BLOGGER \m/

Minggu, 16 Mei 2010

Browser Mini Gitu Loh

Rehat sejenak dari artikel trik dan tips 8-X Kepala pusing cari bahan-bahannya ;)) :D bikin mata puter-puter 8-| dan makin cepet mata berputar @-) membuatku ngantuk (:| dan hal ini yg enak dilakuin I-) Kembali dari nge-bloglang, biasa cari informasi unik dan tentunya gaya dan gak dapet-dapet b-( Dengan hati yg remuk tak dapat artikel mengenai tutorial, ya sudah banting setir cari informasi yg gaya dan unik lainnya ;)) Kalau menurut sobat gaya apa enggak ya ;)) :"> :-" ~~Tahu~~ dong mini browser? Yang sering dipake ngebrowsing, tapi cekak ma bandwith jadi nyekek gito sob =)) For that trouble, heres for the solution :-"

Facebook Mobile

Facebook Touch

Twitter

YouTube Mobile

Yahoo!

Yahoo!

Nah bagaimana web mobile yg Beben si bloglang anu ganteng kalem tea temukan. Tidak ada tutorial yg penting mosting sob ;)) :"> Dikarenakan cuaca tidak mendukung dan sering GEMPA lagi :-s nih bonusnya . Sayonara...permios... :-h

Master Abu Farhan is Back

Telah kembali aktif salah satu master blog kita. Siapa yang tidak kenal dengan sobat kita satu ini. Ahli script dan selalu mengeluarkan hack bagi para blogger yg top markotop. Baru 2 hari kemarin baca artikelnya sang master mengenai , tidak lama dikeluarkan lagi jurus yg baru . Eh datang lagi berita mengenai template yg Beben baru lihat sekarang.

Sabtu, 15 Mei 2010

Yao @ Blog from China

Beben kembali membawa sobat blogger dari negeri tirai bambu cina :D Tadinya mau mosting membahas salah satu hack yang dikeluarkan oleh mengenai meta tag ;)) Keingetan ama tim uber yg kalah oleh cina jadi menclok kesana juga...:)) Hack sobat kita ini antara lain menampilkan recent comments, recent posts, add picasa album flash to blog, expand/widget, dan lain-lain :-bd

Tadinya melihat tampilan dari blognya biasa saja sob, pas menjamah lebih dalam memasuki kebagian kategori...e do do e ada yg gaya punya b-) Di bagian sisi kiri judul postingan setelah masuk ke bagian kategori ada expand/widget trick yg notabene Beben ~~tahu~~ dari Annie pemilik BlogU blog :) Ternyata bisa dipakai dijudul juga triknya ;)) :">

Beri sambutan hangat pada sobat kita dari china introduce Yao @ blog. Klik disini guna masuk ke hack-hack yg dimilikinya sob :D Yao @ blog hack. Dadah...:-h

Jumat, 14 Mei 2010

Like it? Tweet it! for Blogger, WordPress, Tumblr

Jalan-jalan ke web developer selalu menemukan yang fresh, baru, informatif dan gaya :D Postingan kali ini tidak jauh-jauh dari postingan BeBeN si bloglang anu ganteng kalem tea mengenai sob ;)) Sebenarnya tombol berbagi via tweeter untuk weblog artikel kali ini :D

Widget jebolan dari pongsocket ini memang bergaya dan good punya :-bd Didasarkan dengan Twitter’s new API menghindari dari auto tweet pada artikel yg akan di retweet :P

Installation

► Fast installation guides for :WordPress | Tumblr | Blogger

Salam and happy blogging \m/ See you :-h

Kamis, 13 Mei 2010

Panoramio Widgets For Blog

Belum lama mosting tentang , eh ada informasi dari mengenai memasukkan album photo-photo kita kedalam blog juga :D Kolaborasi antara Panoramio dan blogger blog menghasilkan kreasi yang gaya punya b-) Untuk membaca artikel dan demonya silahkan sobat . Tuh disamping kiri contohnya juga sob ;)) ;)

Rabu, 12 Mei 2010

Asterpix SearchLight Program Application

Ada kabar gaya nih sob. Sobat mungkin sudah ~~tahu~~ widget related post (artikel terkait), ataupun related post bergaya LinkWithin :-/ Pernah dengar mengenai Asterpix SearchLight? Jika belum maka inilah salah satu web yang memberikan layanan seperti related post :D Dengan menggunakan patent-pending PhraseMatch technology b-) membantu para pengunjung dan pemilik web untuk mencari konten yg benar-benar relevan. Dengan membantu mencarikan konten yg tepat ini maka dapat meningkatkan pengunjung per halaman dari weblog sobat :-bd

Hadir dengan beberapa format dan warna serta dapat memasukkan adsense google yg sobat miliki kedalamnya memberikan nilai lebih dari layanan ini. Impressions served saat ini sebanyak 1,286,140,031 :-O Yang sobat butuhkan adalah sebuah situs weblog dengan konten yang dapat diterima dan URL yang valid :D Free coy free...=P~

Sign-up disini untuk mendapatkan feature web ini :D Kalau mau lihat demonya langsung saja berkunjung ke yg punya informasi.Source by : TipsoTricks

Post Includable Part II

Dua postingan sebelumnya dan yang tidak lain membedah kode-kode yg ada didalam template default blogspot. Lanjutan nih sob :D

The Post Title

The post title atau judul dari postingan. Judul postingan ini biasanya ditampilkan dalam bentuk hyperlink yg apabila diklik akan memasuki ke link yg dituju :D Kalau tidak ada yaa tidak akan masuk kemana-mana alias menjentul :"> Kode pada the title post...

<b:if cond='data:_post.title'>
<h1 class='post-title'>
<b:if cond='data:_post.link'>
<a expr:href='data:_post.link'><data:_post.title/></a> 
<b:else/>
<b:if cond='data:_post.url'>
<a expr:href='data:_post.url'><data:_post.title/></a> 
<b:else/>
<data:_post.title/> 
</b:if>
</b:if>
</h1>
</b:if>

Itu struktur kode untuk sebuah judul post ;)

Post Body

Badan post kali yak :P Pada bagian ini dikemas dengan sebuah elemen "P"

Post Footer Line 1

Struktur dari baris post footer ini sbb :

<p class='post-footer-line post-footer-line-1'>
<span class='post-author'>Authorname</span>
<span class='post-timestamp'>Timestamp</span>
<span class='post-comment-link'>Commentlink</span>
<span class='post-icons'>Email Icon and QuickEdit Pencil</span>
</p>

Authorname

Widget blog yg dikonfigurasikan untuk menampilkan nama dari si penulis. Label default pada kode ini biasanya bertuliskan "Posted by"

Jadi bagi sobat yg mau ganti tulisan Posted by ya cari kode itu, yihaaa :-"

Timestamp

Widget blog yg dikonfigurasi untuk menampilkan waktu. Disertai permalink yg menuju hanya pada halaman tertentu.

Kode diatas menampilkan teks/label pada permalink. Default teksnya biasanya "at" atau "di" :D

Commentlink

Segala yg berbau komentar ya diatur oleh perintah ini sob :)

Default teks/label dari komentar ini "comments" Pusing neranginnya ah ;)) Pokoknya yg bersangkut paut dg komentar ada pada kode itu.

Email Icon and QuickEdit Pencil

Post icon ini ada dua, email dan pensil :P Biasanya link pada post yg berupa gambar email kecil serta quick edit yg digambarkan oleh icon pensil.

Post Footer Line 2

Garis post ini tak lain yg menampilkan label pada postingan. Secara default biasanya bertuliskan "labels"

Post Footer Line 3

Pada baris ini kosong, dan biasanya untuk mempermudah kita mengedit pada icludable.

Styling classes

Macam gaya classes yg sering digunakan dalam includable.

Class
post
post-title
post-header-line-1
post-body
post-footer
post-footer-line
post-footer-line-1
post-author
post-timestamp
timestamp-link
post-comment-link
comment-link
post-icons
item-action
email-post-icon
post-footer-line-2
post-labels
post-footer-line-3
Prodigy of Head

Blogger Data Tags

Daftar tag data yg sering dipakai dalam includable ini.

Data Tag	Description
data:top.showAuthor	'true' if the Blog Widget is configured to show the author name
data:top.authorLabel	the phrase preceding the author name (default value: 'Posted by')
data:top.showTimestamp	'true' if the Blog Widget is configured to show the timestamp
data:top.timestampLabel	the phrase preceding the timestamp (default value: 'at')
data:top.commentLabel	the phrase showing the number of comments, single (default value:'comment')
data:top.commentLabelPlural	the phrase showing the numer of comments, plural (default value:'comments')
data:blog.pageType	the type of the current page
data:_post.id	the unique id-number of the post
data:_post.title	the post title
data:_post.link	the url of the (external) webpage the post is pointing to
data:_post.url	the post permanent lnk
data:_post.body	the post body
data:_post.timestamp	the post timestamp
data:_post.allowComments	'true' if making comments is allowed for this post
data:_post.addCommentUrl	the url of the comments form
data:_post.addCommentOnclick	-
data:_post.numComments	the number of comments on this post
data:_post.emailPostUrl	the url of the email form
data:_post.emailPostMsg	the tooltip message of the email icon link
data:_post.labels	the list of labels assigned to the post
data:_postLabelsLabel	the phrase preceding the list of labels (default value: 'Labels:')
data:_label.url	the url of the page listing all posts with this label
data:_label.name	the name of this label
data:_label.isLast	'true' if this label is the last one of the list

Thanks a lot for http://beautifulbeta.wikidot.com Download disini untuk mendapatkan blogger cheat sheet Blogger Cheat Sheet (PDF, english).

Selasa, 11 Mei 2010

Post Includable Part I

Lanjutan tulisan kemarin mengenai dalaman template . Tulisan yg itu kan membahas 4 bagian utama yg ada pada daleman template bawaan blogspot. Sekarang kita bedah sesi Includable pada template. Adapun syntax includable pada template blogspot ini biasanya berbentuk...

<b:includable id="name" var="data">
...
...
</b:includable>

id = unik/nama id
var = optional dari id, mungkin variabel ya ;))

Untuk contohnya :

<b:includable id='backlinks' var='post'>
<b:includable id='post' var='post'>
<b:includable id='comment-form' var='post'>
...

Itulah syntax includable beserta variabelnya. Untuk lebih mudahnya mari tengok daftar tabel berikut ini.

Widget Type	Includable id	Includable var
Blog	backlinkDeleteIcon	backlink
...	backlinks	post
...	commentDeleteIcon	comment
...	comments	post
...	feedLinks	---
...	feedLinksBody	links
...	main	top
...	nextprev	---
...	post	post
...	postQuickEdit	post
...	status-message	---
BlogArchive	flat	data
...	interval	intervalData
...	main	---
...	menu	data
...	posts	posts
...	toggle	interval
Header	main	---
Label	main	---
Profile	main	---

Hehehe...:D Kita memasuki pada fase yg lebih dalam (bagian yg lumayan puyeung sob) :p Kalau sudah terbayang dengan apa yg dipaparkan diatas tadi, maka pada fase ini akan lebih terlukiskan deh ;) (lukisan???) [-( Langsung yuk kita bedah :p

Struktur includable pada main post.

Pada umumnya struktur pada bagian utama postingan ini memiliki bentuk...

<div class='post'>
<a name='post-id'/>
<h1 class='post-title'>Post Title</h1>
<div class='post-header-line-1'/>
<div class='post-body'>
<p>Post Body</p>
</div>
<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>Author Timestamp Comments Email Edit</p>
<p class='post-footer-line post-footer-line-2'>Labels</p>
<p class='post-footer-line post-footer-line-3'/>
</div>
</div>

Jangan bingung sob, mungkin kode-kode diatas tidak akan sama dg yg ada di template kalian. Secara umumnya begitu sih ;)) Tips :

Kalau ada kode dg menggunakan "ID" maka ini berlaku untuk ID itu saja, kalau untuk kode dg menggunakan "CLASS" ini bisa dipanggil berkali-kali

Kembali pada kode struktur diatas tadi :) Pada struktur diatas disatukan (dikemas) menggunakan html DIV-element. Pada bagian judul post terkemas dalam tag <h1> Kode yg berwarna hijau, baris kosong pada bagian header, dimana pd default blogger tidak ditemukan dan akan ada pada template modifikasi :D Masuk ke bagian footer sobat melihat ada 3 baris pos (post-footer-line) Biar cepet penjelasannya ;) ketiga baris pos yg dimaksudkan diatas itu secara garis besar nama author, label postingan, dan kosong satu guna mempermudah dalam pengeditan template disaat sobat berada pada Editor Template. Kalau sudah mahir kita dapat bermain-main dg ke-3 kode baris pos tsb! Masih ingat dong dg keistimewaan "CLASS"
UPDATE Click to expand here

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head>	The usual html header stuff.
<title><data:blog.pageTitle/></title>	Here's something interesting. New code for the blog title within the standard <title> tags. <data:blog.pageTitle/> inserts the name of the Blog from your template settings.
<b:include data='blog' name='all-head-content'/>	And here's a line that appears to enter any blog template head information. I don't know that there is any right now. Maybe it's a placeholder.
<b:skin><![CDATA[ /* * Blogger Template Style * * Sand Dollar * by Jason Sutter * Updated by Blogger Team */	The <b:skin> tag encloses the template. There's a </b:skin> at the bottom of the template part of the header. ~~I'm not sure what the <![CDATA[ is doing. Perhaps enclosing the skin data?~~ According to an anonymous commenter: On <![CDATA[: That's simply making it so that they don't have to replace every instance of < with the < entity, since there are <Variable> XML-style declarations within the block. CDATA just tells XML not to parse the data within the block until it reaches the closing ]]>, when it resumes normal XML processing. You can <![CDATA[]]> anywhere outside a tag in an XML document. Note that the template has been "Updated by Blogger Team".
/* Variable definitions ==================== <Variable name="textcolor" description="Text Color" type="color" default="#000" value="#000"> <Variable name="bgcolor" description="Page Background Color" type="color" default="#f6f6f6" value="#d2dbff"> <Variable name="pagetitlecolor" description="Blog Title Color" type="color" default="#F5DEB3" value="#cccccc"> <Variable name="pagetitlebgcolor" description="Blog Title Background Color" type="color" default="#DE7008" value="#006699"> <Variable name="descriptionColor" description="Blog Description Color" type="color" default="#9E5205" / value="#e6e6e6"> <Variable name="descbgcolor" description="Description Background Color" type="color" default="#F5E39e" value="#9eb0f5"> <Variable name="titlecolor" description="Post Title Color" type="color" default="#9E5205" value="#006699"> <Variable name="datecolor" description="Date Header Color" type="color" default="#777777" value="#993300"> <Variable name="footercolor" description="Post Footer Color" type="color" default="#444444" value="#444444"> <Variable name="linkcolor" description="Link Color" type="color" default="#DE7008" value="#DE7008"> <Variable name="footerlinkcolor" description="Post Footer Link Color" type="color" default="#968a0a" value="#3a9900"> <Variable name="visitedlinkcolor" description="Visited Link Color" type="color" default="#DE7008" value="#DE7008"> <Variable name="sidebarcolor" description="Sidebar Title Color" type="color" default="#B8A80D" value="#993300"> <Variable name="sidebarlinkcolor" description="Sidebar Link Color" type="color" default="#999999" value="#009949"> <Variable name="bordercolor" description="Border Color" type="color" default="#e0ad12" value="#006699"> <Variable name="bodyfont" description="Text Font" type="font" default="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-Serif" value="normal normal 99% 'Trebuchet MS',Trebuchet,Verdana,Sans-Serif"> <Variable name="headerfont" description="Sidebar Title Font" type="font" default="normal bold 150% Verdana,Sans-serif" value="italic bold 121% Verdana,Sans-serif"> <Variable name="dateHeaderFont" description="Date Header Font" type="font" default="normal bold 105% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal bold 86% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif"> <Variable name="pagetitlefont" description="Blog Title Font" type="font" default="normal bold 300% Verdana,Sans-Serif" value="normal bold 270% Verdana,Sans-Serif"> <Variable name="titlefont" description="Post Title Font" type="font" default="normal bold 160% Verdana,Sans-Serif" value="normal bold 117% Verdana,Sans-Serif"> */	Some of the layout styles are defined here as "variables". Note that they are commented out (/* */), which I assume means that they are only used by Blogger Layouts, not in the actual html coding. Essentially, this is a place to store all of those font and color choices you can make in the Layouts. Some of the template choices don't seem to have all of these options. I picked one with a lot of flexibility, and I get to set a lot of color and font options. Color of post text Page background color Title text color Title background color Heading description btextcolor Heading description background color Post title text color Post date header text color Post footer text color Post links text color Post footer links text color Post visited links text color Sidebar title text color Sidebar links text color The color of any borders The font of all of the text in the body The font of all of the text in the sidebar The font of the date headers The font of the blog title The font of post titles That's a lot of flexibility.
body { margin:0px; padding:0px; background:$bgcolor; color:$textcolor; font-size: small; } #outer-wrapper { font:$bodyfont; } a { color:$linkcolor; } ... Lots o' deletions ... /** Tweaks for layout editor preview */ body#layout #outer-wrapper { margin-top: 0; } body#layout #main, body#layout #sidebar { margin-top: 10px; padding-top: 0; }	I deleted a lot of the styles here, as there's nothing all that special about them. However, it is interesting to see the "variables" defined above showing up here in the styles. For example, the body wrapper is defined with a background of "$bgcolor" and a text color of "$textcolor", both of which are defined above. Then, at the bottom are some "Tweaks for layout editor preview." Setting some padding and margins, but I couldn't tell you why or what for.
]]></b:skin> </head>	Here's the closer for the <![CDATA[, <b:skin>, and <head>.
<body> <div id='outer-wrapper'><div id='wrap2'>	Now we start the body, the stuff that actually shows up in a browser. The wrappers are standard stuff that appears in the old templates (and many other styled web pages).
<!-- skip links for text browsers --> <span id='skiplinks' style='display:none;'> <a href='#main'>skip to main </a> \| <a href='#sidebar'>skip to sidebar</a> </span>	~~It's nice that the folks at Blogger are worried about text browsers, but how many text browsers are still out there and do I really care if they read my blog?~~ Text browsers are valuable and necessary tools for the internet and Blogger are Mensa-level geniuses to include this code snippet in their template. (Please stop the harassment now.)
<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='FTTX News (Header)' type='Header'> <b:includable id='main'> <div class='titlewrapper'>	Here's the first expanded widget - the header widget, encased in a standard set of<div> tags. The <b:> tags are new, and appear to be a way to indicate information to Blogger (see more below). This one includes the ID entered in the layout (Header1) and the title (FTTX News) plus some Blogger-specific information about it being locked and of the type "Header". Items listed as "includable" are called later with "include". That's a very nice idea, and one that took me a while to figure out. Includable items that I found defined were: Main = The title and description, then later the main blog content, then later the sidebar content. And this one never gets called with a "include" statement. Some confusion here will hopefully be sorted out later. Comments = The detailed comments postQuickEdit = The icon and code for quick editing from the main page backlinkDeleteIcon = exactly what it says feedLinksBody backlink feedlinks nextprev commentDeleteIcon post flat menu interval toggle posts Interestingly, I can't find a way to move the "Header" layout widget to anywhere else on the layout page. For example, I wanted to put the header over the main content, but not over the sidebar. No dice. Moving it in the template results in a "invalid template" error.
<h1 class='title'> <b:if cond='data:blog.url == data:blog.homepageUrl'> <data:title/> <b:else/> <a expr:href='data:blog.homepageUrl'><data:title/></a> </b:if> </h1> </div>	Very interesting. An embedded "if-then" statement in the template. Another advantage of the <b:> tags. The "data:" construct appears to be the new way to reference what used to be Blogger tags. There are no definitions available yet from Blogger, but I'm guessing the definition of these data objects blog.url = the currnet URL for the blog page blog.homepageUrl = the URL of the homepage of the blog In this case, if the current URL equals the homepageURL (i.e., you're on the main page), then the title doesn't have an embedded link. If you're on another page (e.g. an archive page), then the title becomes a link back to the main page. Pretty slick.
<div class='descriptionwrapper'> <p class='description'><span><data:description/></span></p> </div> </b:includable> </b:widget> </b:section> </div>	And here's where the Blog description get printed out, safely within its own wrapper. Here's another data field description: The blog description (duh!) The wrapper, of course, uses the variable and styles above as defined in the Layout editor by calling the "descriptionwrapper" class defined in the header.
<div id='content-wrapper'>	This is a big division, with all of the content including the main and sidebar. Other than that, nothing special.
<div id='main-wrapper'>	And the wrapper for the main content (not sidebar). Again, nothing special or new.
<b:section class='main' id='main' showaddelement='no'>	This however, is Blogger specific. It defines the main section that shows up in the Layout editor. It also says that it's not possible to add any elements to this section, something that you can experience for yourself in the Layout editor. The main section is for posts only. Personally, I don't use the main part for anything other than posts, so maybe this limitation isn't too bad.
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>	Another widget expanded - the posts. If you note in the Layout editor, this widget has some components that you can add (they show up below). This line appears to indicate the start of the individual page content, but it's not entirely clear what all is going on here. It looks like this one line puts in all of your post content, including the footer, labels, etc.. That's a lot of work in such a small number of characters. It remains to be seen if that will be a problem.
<b:includable id='comments' var='post'> <div id='comments'> <a name='comments'/> <h4> <b:if cond='data:post.numComments == 1'> 1 Comment: <b:else/> <data:post.numComments/> Comments: </b:if> </h4>	The first includable sub-widget is the comments. This widget only prints when you go to a specific entry and are looking at the comments - it's not on the main page of the blog. That's the magic of the include/includable constuct. Again, a nice if-then statement so that if there is only one comment, the blog prints "1 Comment". If there are more than one comments, it prints "# Comments" where # is the number of comments. Another data object here: post.numComments = the number of comments on a specific post
<dl id='comments-block'> <b:loop values='data:post.comments' var='comment'>	Here are the comments themselves. And another nice construct in the <b> tag - a loop. This one appears to loop through the post comments.
<dt class='comment-author' expr:id='"comment-" + data:comment.id'> <a expr:name='"comment-" + data:comment.id'/>	~~I'm not personally familiar with~~ ~~<dl>, <dt>, and <dd>, but I'm guessing that those are standard html tags.~~ dl and dt are used for making lists of terms and their definitions (as pointed out by a rather superior slashdot commenter). Here's another interesting Blogger code construct, "expr:". "Expr:" appears to be a way to generate content for other use, something that used to be done with Blogger tags. In this case, "expr:name='"comment-" + data:comment.id" generates the name field in the <dt> tag (and later in an <a> tag) that is equal to the text "comment-[really obscure number representing this specific comment]".
<b:if cond='data:comment.authorUrl'> <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <b:else/> <data:comment.author/> </b:if> said... </dt>	Again with the nice "if-then" constuct. This one makes the comment author into a link if they have a profile URL. Otherwise, it just prints their name. Note that the "nofollow" is automatically included so that blog spammers get no love from the Googlebot.
<dd class='comment-body'> <b:if cond='data:comment.isDeleted'> <span class='deleted-comment'><data:comment.body/></span> <b:else/> <p><data:comment.body/></p> </b:if> </dd>	Here's the text of the comment(s), and another "if-then". If the comment has been deleted, then encase the comment in a span of class "deleted-comment". In my stylesheet, that's italics and gray. I imagine this is for temporary deletions or confirmations of deletions. Surely the deleted comments don't just hang around.
<dd class='comment-footer'> <span class='comment-timestamp'> <a expr:href='"#comment-" + data:comment.id' title='comment permalink'> <data:comment.timestamp/> </a> <b:include data='comment' name='commentDeleteIcon'/> </span>	And here's the comment footer. The "expr:" operator is used to generate a permanent link to this comment and assign it to the timestamp. Another <b:> tag is used to tell Blogger to put up the delete icon if the reader is the author (or so I imagine).
</dd> </b:loop> </dl>	Here endeth the comments coding. Some data objects in this section are: post.comments = some way to know if a comment exists (used in the loop statement) comment.id = the long and obscure integer assigned to a comment by Blogger comment.authorUrl = the URL of the commenter's profile comment.author = the name (or nickname) of the commerter comment.isDeleted = is the comment deleted (duh!) comment.body = the text of the comment comment.timestamp = what do you think?
<p class='comment-footer'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>Post a Comment</a> </p>	This prints a little "Post a comment" link at the bottom of the individual post pages. Notice how flexible the "expr" operator is here. It generates a link within a <a> tag poining to a URL and defining a click action. Nice. More data objects: post.addCommentURL = the URL where someone can enter a comment on a specific post post.addCommentOnclick = the "onclick" action for entering a comment on a specific post
<div id='backlinks-container'> <b:include data='post' name='backlinks'/> </div>	Here's where the backlinks counter gets generated. Pretty simple - nothing like the comments.
</div> </b:includable>	And that's the end of the includable sub-widget for comments.
<b:includable id='postQuickEdit' var='post'> <b:if cond='data:post.editUrl'> <span expr:class='"item-control " + data:post.adminClass'> <a expr:href='data:post.editUrl' title='Edit Post'> <span class='quick-edit-icon'> </span> </a> </span> </b:if> </b:includable>	This little includable sub-widget adds the "Quick Edit" icon to a post if the reader is the author. If there is a post editing URL, then generate a span containing the quick edit icon. New data objects here are: post.adminClass = not really sure what this tells Blogger, but it's used in a span definition post.editUrl = the URL to edit a specific post
<b:includable id='main' var='top'>	Another incluable "main". The includable "main" is going to need some more defining by folks smarter than I am.
<!-- posts --> <div id='blog-posts'> <b:loop values='data:posts' var='post'> <b:if cond='data:post.dateHeader'> <h2 class='date-header'><data:post.dateHeader/></h2> </b:if> <b:include data='post' name='post'/> <b:if cond='data:blog.pageType == "item"'> <b:if cond='data:post.allowComments'> <b:include data='post' name='comments'/> </b:if> </b:if> </b:loop> </div>	This is the post section, where the actual posts on the main page are printed out. Or so I believe. There's a loop that goes through the posts, and if-then that prints out the date header it exists, and an if-then that prints out the comments section if comments are allowed. New data objects are: post.dateHeader = the date header, apparently only attached to the last post on a specific day blog.pageType = not really sure, but it's probably a way to determine if you're on the main page or an item page post.allowComments = pretty obvious, isn't it? The line" <b:include data='post' name='post'/>" apparently instructs Blogger to print out the post text. So I suppose there is some flexibility here for hacking. I'm guessing that the "<b:if cond='data:blog.pageType == "item"'>" if-then statement is used to include the comment constucts from above if this in an individual item page.
<!-- navigation --> <b:include name='nextprev'/>	This calls the incluable code for next and previous links. Oddly, that incluable hasn't been defined above. So I suppose the order of the includable/include can be flexible.
<!-- feed links --> <b:include name='feedLinks'/> </b:includable>	This one call the incluable code for feed links. The includable close is for the "main" includable - or at least this particular "main" includable.
<b:includable id='backlinkDeleteIcon' var='backlink'> <span expr:class='"item-control " + data:backlink.adminClass'> <a expr:href='data:backlink.deleteUrl' title='Delete Backlink'> <span class='delete-comment-icon'> </span> </a> </span> </b:includable>	Here the incluable for the back link delete icon is defined. And yet another data object backlink.deleteUrl The data object appears to be nicely object-oriented with the "backlink" object having sub-objects like "deleteURL".
<b:includable id='feedLinksBody' var='links'> <div class='feed-links'> Subscribe to: <b:loop values='data:links' var='f'> <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a> </b:loop> </div> </b:includable>	Here is the code snippet for the feed links body includable. This one loops through all of the called links types (var='links') and prints out a hyperlinked pointer to the link URLs. The hyperlink (<a href ...>) includes a URL and type, both of which are constucted on the fly with expr: operators. The target is set to '_blank' so that the links open in a new window. Always a nice touch.
<b:includable id='backlinks' var='post'> <b:if cond='data:post.numBacklinks != 0'> <a name='links'/><h4><data:post.backlinksLabel/></h4> <dl id='comments-block'> <b:loop values='data:post.backlinks' var='backlink'> <div class='collapsed-backlink backlink-control'> <dt class='comment-title'> <span class='backlink-toggle-zippy'> </span> <a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a> <b:include data='backlink' name='backlinkDeleteIcon'/> </dt> <dd class='comment-body collapseable'> <data:backlink.snippet/> </dd> <dd class='comment-footer collapseable'> <span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span> <span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span> </dd> </div> </b:loop> </dl> <p class='comment-footer'> <a class='comment-link' expr:href='data:post.createLinkUrl' id='b-backlink' target='_blank'><data:post.createLinkLabel/></a> </p> </b:if> </b:includable>	This is the includable for the backlinks. The first if-then statement checks if there are any backlinks (post.numbacklinks != 0). The != must mean "not equal to", because this section only makes sense if there actually are backlinks. This section prints a label ('links'), followed by a label (defined in the layout options), followed by the backlinks themselves formatted as a definition list. Some data objects in this section are: post.numBacklinks = the number of backlinks on a post post.BacklinksLabel = the label for backlinks defined in the options menus in Blogger post.backlinks = the backlinks themselves backlink.url = the url for the backlink backlink.title = the title of the backlink backlink.snippet = the small snippet of text that shows below a backlink backlink.author = the person who wrote the backlink article backlink.timestamp = what it says post.createLinkUrl = the url used to create a link to this post post.createLinkLabel = the label for the create-a-link link
<b:includable id='feedLinks'> <b:if cond='data:blog.pageType != "item"'> <!-- Blog feed links --> <b:if cond='data:feedLinks'> <div id='blog-feeds'> <b:include data='feedLinks' name='feedLinksBody'/> </div> </b:if> <b:else/> <!--Post feed links --> <div id='post-feeds'> <b:loop values='data:posts' var='post'> <b:if cond='data:post.allowComments'> <b:if cond='data:post.feedLinks'> <b:include data='post.feedLinks' name='feedLinksBody'/> </b:if> </b:if> </b:loop> </div> </b:if> </b:includable>	This is the includable for feed links. The main if-then-else statement checks to see if the current page is an item page or not. Again, "!=" must be "not equal to". If the current page is not an item page, then print the Blog feed links. If the current page is an item page, then print the post feed links. For non-item pages, another if-then checks that there actually are some feed links. If they exist, then the feeds are printed out inside a set of <div> tags by calling the feedLinksBody includable, which I assume is somewhere below. The passed data to the includable is feedLinks, as opposed to post.feedLinks, which is used below on the post-specific links. For the item pages, an if-then checks to see if comments are allowed. Apparently, feeds aren't displayed if comments aren't enabled. I'm not sure why that particular restriction exists. If comments are enabled, then a second if-then checks that feed links exist. If so, then the post-specific links are printed out inside a set of <div> tags by calling the feedLinksBody includable with post.feedLinks as passed data.
<b:includable id='nextprev'> <div id='blog-pager'> <b:if cond='data:newerPageUrl'> <a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'><data:newerPageTitle/></a> </b:if> <b:if cond='data:olderPageUrl'> <a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'><data:olderPageTitle/></a> </b:if> <b:if cond='data:blog.homepageUrl != data:blog.url'> <a class='home-link' expr:href='data:blog.homepageUrl'>Home</a> </b:if> </div> <div class='clear'/> </b:includable>	I'm running low on steam for today, so the rest of these are a bit terse. I'll try to fill them in later. The includable for next and previous post links.
<b:includable id='commentDeleteIcon' var='comment'> <span expr:class='"item-control " + data:comment.adminClass'> <a expr:href='data:comment.deleteUrl' title='Delete Comment'> <span class='delete-comment-icon'> </span> </a> </span> </b:includable>	The includable for the comment delete icon.
<b:includable id='post' var='post'> <div class='post'> <a expr:name='data:post.id'/> <b:if cond='data:post.title'> <h3 class='post-title'> <b:if cond='data:post.url'> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </h3> </b:if> <div class='post-header-line-1'/> <div class='post-body'> <p><data:post.body/></p> <div style='clear: both;'/> <!-- clear for photos floats --> </div> <div class='post-footer'> <p class='post-footer-line post-footer-line-1'><span class='post-author'> <b:if cond='data:top.showAuthor'> <data:top.authorLabel/> <data:post.author/> </b:if> </span> <span class='post-timestamp'> <b:if cond='data:top.showTimestamp'> <data:top.timestampLabel/> <b:if cond='data:post.url'> <a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a> </b:if> </b:if> </span> <span class='post-labels'> <b:if cond='data:post.labels'> <data:postLabelsLabel/> <b:loop values='data:post.labels' var='label'> <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if> </b:loop> </b:if> </span> <span class='post-comment-link'> <b:if cond='data:blog.pageType != "item"'> <b:if cond='data:post.allowComments'> <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a> </b:if> </b:if> </span> <span class='post-icons'> <!-- email post links --> <b:if cond='data:post.emailPostUrl'> <span class='item-action'> <a expr:href='data:post.emailPostUrl' title='Email Post'> <span class='email-post-icon'> </span> </a> </span> </b:if> <!-- quickedit pencil --> <b:include data='post' name='postQuickEdit'/> </span> </p> <p class='post-footer-line post-footer-line-2'/> <p class='post-footer-line post-footer-line-3'/> </div> </div> </b:includable>	The includable for the post itself. This one is the master and calls many of the little ones above.
</b:widget> </b:section> </div>	And we have finally reached the end of the main post widget. Phew!
<div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='Image1' locked='false' title='' type='Image'> <b:includable id='main'> <b:if cond='data:title != ""'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/> <br/> <b:if cond='data:caption != ""'> <span class='caption'><data:caption/></span> </b:if> </div> <b:include name='quickedit'/> </b:includable> </b:widget> <b:widget id='Label1' locked='false' title='Labels' type='Label'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <ul> <b:loop values='data:labels' var='label'> <li> <b:if cond='data:blog.url == data:label.url'> <data:label.name/> <b:else/> <a expr:href='data:label.url'><data:label.name/></a> </b:if> (<data:label.count/>) </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget> <b:widget id='HTML1' locked='false' title='' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> <b:widget id='Feed1' locked='false' title='Latest Comments' type='Feed'> <b:includable id='main'> <input id='displayMode' type='hidden' value='true'/> <input expr:value='data:feedUrl' id='feedUrl' type='hidden'/> <input expr:value='data:numItemsShow' id='numItemsShow' type='hidden'/> <input expr:value='data:showItemDate' id='showItemDate' type='hidden'/> <input expr:value='data:showItemAuthor' id='showItemAuthor' type='hidden'/> <input expr:value='data:locale' id='locale' type='hidden'/> <input expr:value='data:timeZone' id='timeZone' type='hidden'/> <input expr:value='data:feedReaderJsonBaseUrl' id='feedReaderJsonBaseUrl' type='hidden'/> <input expr:value='data:feedWidgetRefreshIntervalSec' id='feedWidgetRefreshIntervalSec' type='hidden'/> <h2><data:title/></h2> <div class='widget-content'> <ul id='feedItemListDisplay'> <b:loop values='data:feedData.items' var='i'> <li> <span class='item-title'> <a expr:href='data:i.alternate.href'> <data:i.title/> </a> </span> <b:if cond='data:showItemDate'> <b:if cond='data:i.str_published != ""'> <span class='item-date'> - <data:i.str_published/> </span> </b:if> </b:if> <b:if cond='data:showItemAuthor'> <b:if cond='data:i.author != ""'> <span class='item-author'> - <data:i.author/> </span> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget> <b:widget id='Text1' locked='false' title='Administrative Notes' type='Text'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> <b:widget id='TextList1' locked='false' title='Sources' type='TextList'> <b:includable id='main'> <h2><data:title/></h2> <div class='widget-content'> <ul> <div id='link'> <b:loop values='data:items' var='item'> <li><data:item/></li> </b:loop> </div> </ul> <b:include name='quickedit'/> </div> </b:includable> </b:widget> <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'> <b:includable id='main'> <b:if cond='data:title'> <h2><data:title/></h2> </b:if> <div class='widget-content'> <div id='ArchiveList'> <b:if cond='data:style == "HIERARCHY"'> <b:include data='data' name='interval'/> </b:if> <b:if cond='data:style == "FLAT"'> <b:include data='data' name='flat'/> </b:if> <b:if cond='data:style == "MENU"'> <b:include data='data' name='menu'/> </b:if> </div> <b:include name='quickedit'/> </div> </b:includable> <b:includable id='flat' var='data'> <ul> <b:loop values='data:data' var='i'> <li class='archivedate'> <a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>) </li> </b:loop> </ul> </b:includable> <b:includable id='menu' var='data'> <select id='ArchiveMenu'> <b:loop values='data:data' var='i'> <option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option> </b:loop> </select> </b:includable> <b:includable id='interval' var='intervalData'> <b:loop values='data:intervalData' var='i'> <ul> <li expr:class='"archivedate " + data:i.expclass'> <b:include data='i' name='toggle'/> <a class='post-count-link' expr:href='data:i.url'><data:i.name/></a> (<span class='post-count'><data:i.post-count/></span>) <b:if cond='data:i.data'> <b:include data='i.data' name='interval'/> </b:if> <b:if cond='data:i.posts'> <b:include data='i.posts' name='posts'/> </b:if> </li> </ul> </b:loop> </b:includable> <b:includable id='toggle' var='interval'> <b:if cond='data:interval.toggleId'> <b:if cond='data:interval.expclass == "expanded"'> <a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=close&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'> <span class='zippy toggle-open'>? </span> </a> <b:else/> <a class='toggle' expr:href='data:widget.actionUrl + "&action=toggle" + "&dir=open&toggle=" + data:interval.toggleId + "&toggleopen=" + data:toggleopen'> <span class='zippy'>? </span> </a> </b:if> </b:if> </b:includable> <b:includable id='posts' var='posts'> <ul class='posts'> <b:loop values='data:posts' var='i'> <li><a expr:href='data:i.url'><data:i.title/></a></li> </b:loop> </ul> </b:includable> </b:widget> <b:widget id='HTML2' locked='false' title='' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:includable> </b:widget> </b:section> </div>	All of this code is for the sidebar, and I don't have tome to look through it today. I'll try to get to it later.
<!-- spacer for skins that want sidebar and main to be the same height--> <div class='clear'> </div> </div> <!-- end content-wrapper --> </div></div> <!-- end outer-wrapper --> </body> </html>	And, thus endeth the template. Pretty heady stuff that will take some studying.

and Click to expand here

Cases	Want \ Do	Replace MY FIRST LINE CODE with
1	Bagaimana menampilkan gadget hanya pada home page blogger. (Cara menyembunyikan gadget dari halaman statis dan halaman posting di blogger)	<b:if cond='data:blog.pageType == "index"'>
2	Bagaimana menampilkan gadget hanya pada halaman posting blogger (Cara menyembunyikan gadget dari home page dan static page di blogger).	<b:if cond='data:blog.pageType == "item"'>
3	Bagaimana menampilkan gadget hanya pada halaman statis dari blogger. (Cara menyembunyikan gadget dari halaman rumah dan halaman posting di blogger)	<b:if cond='data:blog.pageType == "static_page"'>
4	Bagaimana menampilkan gadget pada halaman posting dan halaman statis blogger (Cara menyembunyikan gadget dari halaman rumah di blogger)	<b:if cond='data:blog.pageType != "index"'>
5	Bagaimana menampilkan gadget di halaman rumah dan halaman statis dari blogger. (Cara menyembunyikan gadget dari halaman posting di blogger)	<b:if cond='data:blog.pageType != "item"'>
6	Bagaimana menampilkan gadget pada halaman rumah dan halaman posting blogger. (Cara menyembunyikan gadget dari halaman statis di blogger)	<b:if cond='data:blog.pageType != "static_page"'>
7	How to display gadgets only on archive pages of blogger.	<b:if cond='data:blog.pageType == "archive"'>
8	Bagaimana menampilkan gadget hanya pada halaman arsip blogger.	<b:if cond='data:blog.url == "Your_URL_Here"'>
9	Bagaimana menampilkan gadget hanya pada halaman tertentu blogger.	<b:if cond='data:blog.url != "Your_URL_Here"'>

See you...:-h