The complete guide to create a blogger hack

Sesuatu banget yah sob jika menemukan yang fresh, baru, unik dan tentunya full styler :D Mungkin sudah Koben bagi banyak resource dari berbagai blogger, weber, scripter, developer or apapun namanya kepada sobat sekalian. Trik, tips, hack telah terpampang tinggal membaca, praktek kemauan untuk menjadikan apa yang sobat mau. Tutorial berat membingungkan sampai yang mudah juga bisa dipelajari dicinih ;;)
Kepingin serius mendalami satu hal memang harus konsentrasi penuh. Jangan nanggung, soalnya jika ragu yaaa seperti Beben Koben si bloglang anu ganteng kalem tea ini gak bisa berhenti kesana kemari menclok mencari-cari postingan yang ajib prikitiw untuk sobat²ku :) Ketika dapat, langsung di share kedalam goresan artikel, sampai kadang² lupa dapat dari mana itu si-artikel =))

Ringan namun tak jarang banyak blogger melupakan fungsi yang satu ini! Siapa yang tidak tahu fitur Add a Gadget bawaan blogspot :-/ Semisal kita melakukan add a widget Labels/Category

Lalu masuk Design ► Edit/HTML maka kita akan melihat seonggok kode kayak begini<b:widget id='Label1' locked='false' title='Labels' type='Label'/>Perhatikan code yg diberi warna sob! Tahu artinya & berfungsi kemana itu!!! Bila sudah tau Alhamdulillaah Yaa...sesuatu deh :) Bagi yg belom tau, dan Koben jg baru tauk :D perhatikan screenshot berikut (tanda panah)

Metode Add a Gadget opsi HTML/JacaScript secara default akan menghasilkan kode seperti:<b:widget id='HTMLXX' locked='false' title='' type='HTML'/>Perhatikan coded yg diberi warna! Itu merupakan unique ID yg harus berbeda keberadaannya (dalam hal ini angka)<b:widget id='HTML5' locked='false' title='' type='HTML'/>

Tanpa perlu pergi ke halaman Page Elements dan mencentang Expand Widget Templates dengan membuat kode serupa, sobat sudah bisa membuat 1 buah gadget untuk konten HTML/JavaScript.
Bila kita melakukan pencentangan Expand Widget Templates dan belum terisi apa² maka code widget for HTML/JavaScript content akan terlihat

<b:widget id='HTML5' locked='false' title='' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
</b:widget>

Itulah sedikit ilmu bagaimana bila kita mau memulai apa yg dinamakan dengan blogger hack. Coba sekarang sisipkan hack simple expand/collapse brkt ke dalam blog sobat:

<b:widget id='HTML99' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><script type='text/javascript'> /* <![CDATA[ */ if(typeof(rnd) == 'undefined') var rnd = ''; rnd = Math.floor(Math.random()*1000); rnd = 'id-' + rnd;
document.write('<img onclick="document.getElementById(&quot;' + rnd + '&quot; ).style.display = &quot;inline&quot;" src="http://www.spencerberus.com/images/maximize.png" style="float:right;margin-right:0px;cursor: pointer;"/>');
document.write('<img onclick="document.getElementById(&quot;' + rnd + '&quot; ).style.display = &quot;none&quot;" src="http://www.spencerberus.com/images/minimize.png" style="float: left;margin-left:2px;cursor: pointer;"/>');
/* ]]> */ </script><data:title/></h2>
<script type='text/javascript'> /* <![CDATA[ */ document.write('<div id="' + rnd + '" style="display: inline;">'); /* ]]> */ </script>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>

<script type='text/javascript'> /* <![CDATA[ */ document.write('<\/div>'); /* ]]> */ </script>

</b:includable>
</b:widget>

Lebih jauh bicara mengenai What is a Blogger Hack, monggo baca-baca dicinih yah The complete guide Blogger Hack.
Semoga sesuatu ya \m/

OnmouseOver Trick

Sekarang mari kita bermain dengan cursor. Pada CSS kita mengenal dengan istilah hover. Dimana memberikan efek jika cursor didekatkan ke object yang dituju. Pada JavaScript dikenal dengan onmouseover Event. Begitu kira-kira...:D Jelasnya saya juga tidak mengerti, tapi Beben Koben si bloglang anu ganteng kalem tea akan berbagi sedikit trik sederhana menggunakan attribute onmouseover ;)
Perhatikan contoh sederhana berikut ini, arahkan mouse ke gambar!

Terjadi 3 perubahan gambar dalam sekali tagging? Namun itu bisa diutak-atik lagi dengan sedikit membubuhkan bumbu-bumbu CSS agar menghasilkan satu karya unique style :P
Lama tidak berkunjung ke master @dotnetfreak pembuat blogger page views post view hit counter to count views of post/page. Dari sanalah trik onmouseover Koben dapatkan ;)) :"> (tengok disisi kanannya)

<style>
.cicing {
bottom: 10px;
position: fixed;
right: 0;
z-index: 1;
}
</style>

<div class="cicing" id="serelek"><a href="javascript:void(0);" onmouseover="getfungsi();"><img alt="" class="imgfloat" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUMkfdTRx22Y9Yj8liA53XqGDp3ycLJ7VB28rhiq-QLe02SshkuQi-UdgWVWH0qmYcJAxMg5UsFbkDAyYMJgtVlH606wn5zJQxRYgKzdkv9vpmpzXr3NxhUp1vvYuSGF4W70JbBU7dQv_3/"/></a></div><script type="text/javascript">function nyengsol() { if (document.getElementById("serelek") != null ) { getfungsi(); } } YAHOO.util.Event.onContentReady("nyengsol");function closefeed() { if (document.getElementById("serelek") != null) { document.getElementById("serelek").innerHTML = "<a href='javascript:void(0);' onmouseover='getfungsi();'><img alt='' class='imgfloat' src='http://1.bp.blogspot.com/_MvLBi88bM_I/TKBi6-LLyiI/AAAAAAAABgo/mXUIjU7ayaY/engsel.png'/></a>"; }}function getfungsi() { if (document.getElementById("serelek") != null) document.getElementById("serelek").innerHTML = "<iframe src='https://www.facebook.com/plugins/likebox.php?colorscheme=dark&header=true&height=500&href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FTutorial-Blog-for-Stylish-Blogger%2F122292581115426&show_faces=true&stream=true&width=300' scrolling='no' frameborder='0' style='overflow:hidden; width:300px; height:500px;background:#f4f4f4;'></iframe><a href='javascript:void(0)' onmouseover='closefeed();'><span id='closebutton' style='position:absolute;left:0px;top:0px;margin-top:-15px;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNh3T13NHOYREQ3pDrrjXUcmx6AC9BYU7AbkVPjBUTjc307d6uJHCHqIQpLq4A8uKUCMkvlEndH_6r8rtyp1-_baJucUYuKTvavHTq4hG8YPUpyQjPdZ37wlbzbidCVTaz1DwEcNx4wuVA/' /></span></a>";}</script></div>

Masukan semua ramuan via Add a Gadget ► HTML/JavaScript

Karena pemanggilan menggunakan variabel iframe jadi harus berupa anchor links yah. Contoh diatas Koben memasukan link anchor FB stream. Jika mau masukin shoutmix/cbox yaaa link anchornya saja ambil :D
Demonya ^{kalau blon dihapus} ada di Embah Google (lihat kanan bawah)
Good luck \m/

Seven New Dynamic Views Ways to Share your Blog with The World

Seperti yang kita ketahui sebelumnya bahwa pihak blogger telah berjanji akan memodernisasi beberapa bagian dalam blog editornya. Bila ingin mencoba dashboard teranyar silahkan masuk Blogger Dashboard modern :D Itu bagian dashboard sob. Final sudah alias resmi kini fitur yang ditunggu-tunggu fresh new look sudah bisa kita gunakan :)) Dari lima menjadi tujuh opsi dynamic views yang bisa kita pilih :)) Source here Dynamic Views seven new ways to share your blog with the world!
Dibangun dengan teknologi terbaru web (AJAX, HTML5 dan CSS3), Views Dynamic adalah pengalaman browsing yang unik yang akan menginspirasi pembaca untuk menjelajahi blog dengan cara baru. Layout interaktif memudahkan bagi pembaca untuk menikmati dan menemukan posting kita, memuat 40 persen lebih cepat dari template tradisional dan membawa entri yang lebih tua ke permukaan sehingga mereka tampak segar kembali.

Enter the name of your favorite Blogger blog below and click Preview to check it out with Dynamic Views.

.blogspot.com

Its my screenshot blog on that feature :D

Bagaimana!!!
Happy blogging \m/

Informasi Blog By FuzionPro

Selalu saja ada yang baru jika membaca artikel dari sobat blogger. Khususnya tutorial, trik, dan tips buat blogspot. Dibaca, diacak-acak sampai beres pasti nemuin jurus baru yang fresh. Mungkin berasal dari negara India, soalnya bernama Rajesh :D
Masih ingat artikel Koben mengenai Jquery Selected text Search and Share and Drag and Search and Share!!! Sekarang sobat tidak usah ambil pusing lagi, karena ada jasa web yang menyediakannya. Quiqee web penyedia jasa tersebut dengan teknik Double Click or Highlight Text for Search ;)

Serupa namun tak sama web berikut menyediakan juga fasilitas serupa namun dengan teknik berbeda dalam pemakaiannya. Web dengan nama PodiPodi, memungkinkan kita bereksplore ria dari blog kita :P Letakkan script berikut diatas tag </body><script src="http://www.podipodi.com/get/PODI-PODI/" type="text/javascript"></script>Pemakaiannya sobat hanya tinggal menekan tombol keyboard Shift+Space Try here ;)

Satu lagi informasi yang menarik dari Rajesh yaitu tentang how to add ajax page loading effect to blogger! Memberikan efek sebelum memasuki web/blog sebelum beres loading 100%. Mirip ini mungkin yak Making Splash Screen Effect for Blogspot.
Silahkan sobat baca-baca saja yang ada disana, mantep bin menarik tutorialnya ;))
Happy blogging \m/

Learn of CSS3, is Still Amazing

Sudah dibaca dan dipelajari belom postingan sebelumnya yang ada di web Flep Studio? CSS is still amazing sob ;) Biar lebih menyulut kemauan dalam belajar CSS para pelancong setia Beben Koben si bloglang anu ganteng kalem tea, maka ditambah lagi deh web penyedia konten full style b-)
Perbandingan dalam hias menghiasi kateogri menggunakan CSS3 Make Post Category for Blogger and Better CSS3 ticket-like tags!
Master @leaverou selaku pemilik leaverou.me membuat terobosan-terobosan baru didunia per-CSS-an. Trik karyanya menyuguhkan beberapa hal yang dahulu harus menggunkan pemakaian script, ternyata bisa dengan CSS saja. Memang pemakaian murni CSS sedikit ribet ;)) Namun ini membuktikan kemajuan dunia browse in the world :))

Jika saja ada waktu dan kemauan, pingin juga berbagi web-web keren kepada kalian. Tapi males Beben-nya =)) Toh kreatifitas itu lahir harus dari kemauan sendiri ;)
Look trick Pure CSS3 typing animation with steps()...

Tutorial Blog for Stylish Blogger.

Penulisan kode menggunakan tagging <pre><code> menjadi terlihat indah menawan

Kode CSS

pre {
position: relative;
padding: .5em;
margin: 10px 5px;
background-color: #433;
background-color: rgba(25,0,0,.7);
border-radius: .5em;
box-shadow: 1px 2px 8px -2px black;
overflow: hidden;
color: white;
}
pre > code {
display: block;
position: relative;
z-index: 0;
padding: .6em .8em;
border: 1px dashed rgba(255, 255, 255, .5);
}
pre > code:after {
content: '';
position: absolute;
top: 0;
right: -2px;
bottom: -2px;
left: 0;
z-index: -1;
border: 1px dashed black;
}

Pemakaian<pre><code>

YOUR CODED ADD HERE

</code></pre>

CSS reflections

Ini adalah salah satu teknik menampilkan efek bayangan menggunakan CSS3!

CSS reflections for Firefox, with -moz-element() and SVG masks

Monggo diacak-acak saja webnya :D
CSSPLUS
Happy blogging \m/

Css Tutorial still Amazing

Semua hal tidak terjadi dengan tring bakal langsung jadi. Sang kreator lah yang membuat sesuatu itu menjadi ada. Begitu pula jika kita ingin membuat satu kreasi, harus mempunyai ilmu, teori, praktek dan tidak kalah pentingnya yaitu sumber berharga :)
Mungkin sudah beberapa kali Beben Koben si bloglang anu ganteng kalem tea ini memberikan kepada kalian resource web/blog edan gila keren punya untuk tentunya dipelajari dan dipraktekan :D Kalau saja sobat memiliki kiat² and strategi, pasti bahasa WEB ini enjoy untuk diikuti. Jangan meributkan sesuatu yang belum tentu ada hasil, apalagi sedikit merengek-rengek memohon suatu hal itu ini :))
Hasil tentu bakal sesuai dengan usaha! Lebih kritis ke pribadi jangan terlalu berlebihan dalam menginginkan one thing :D

Curcolnya segitu saja, now look is this for training your skill :-" Gali...gali...dan gali, latih...latih...dan LATIH terus ilmu sampai akhir hayat!!!

CSS Horizontal Accordion

Css menu 13

CSS News Accordion

CSS NEWS ACCORDION

Beben KobenFu ma'n Noper bléit rem, méngem ugedon mir hu. De Monn grouss d'Kàchen den, d'Beem sëtzen do mir, bei d'Wise klinzecht op. Nei geet eise kréien et, ké stét d'Hiezer däischter dan. Sin Fielse d'wäiss grousse vu, Hämmel meescht d'Blumme hu zum. Rem am Monn riede, op och Stret méngem iweral, ma'n iw'rem d'Margréitchen do gin. Ech ké ma'n d'Land, sech fort si gei. Blo an eise dann däischter. Wa wéi durch néierens. Am Bass Duerf heemlech net. Zum ké Noper éiweg, gutt rout d'Musek no rëm, d'Natur d'Liewen Gesträich vu sin. Den ménger Keppchen rëschten wa, dé gei MierSi BloglangLorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has. Ne quo justo docendi. Cum ea quando placerat, eirmod latine erroribus mei ei, quo mazim appetere et. Munere aliquid vis ea. Te congue ullamcorper per. Dicat dolores eu duo. Quas labitur volumus te duo, at per sonet detraxit evertitur. No nonumy percipit voluptatum vel, alii erant mediocritatem sed at. Brute aeque deseruisse mei ex, invidunt constituto usu te, sea te delectus urbanitas interpretaris. Eu ullum ubique eum, id aliquid mediocrem quo. Nam ne eius debitis. Vis porro labitur laboramus an. Utamur electram voluptatumAnu GantengFu ma'n Noper bléit rem, méngem ugedon mir hu. De Monn grouss d'Kàchen den, d'Beem sëtzen do mir, bei d'Wise klinzecht op. Nei geet eise kréien et, ké stét d'Hiezer däischter dan. Sin Fielse d'wäiss grousse vu, Hämmel meescht d'Blumme hu zum. Rem am Monn riede, op och Stret méngemKalem teaLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.Prikitiw!!!Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.

Kreasi diatas menggunakan CSS biasa, bukan CSS3 sob. Nah silahkan kunjungi webnya guna melihat-lihat sesuatu yang menggairahkan hasrat belajar HTML :)) Buanyak karya full stylish :-bd

Semoga bermanfaat :)

View Image Blogger with jQuery

Berkunjung terus ke para master blogger agar bertambah selalu ilmu dan skill kita bos. Masih ingat dengan J.S. Blog Stop, salah satu blog yang mungkin agak sedikit berkurang eksistensinya dalam memosting dikarenakan kesibukan di dunia nyata :d Kunjung punya silaturahmi ternyata ada satu artikel menarik menggunakan trick jQuery plugin guna memanggil photo/image/gambar/ yang pernah kita upload waktu memosting!
View Your Blog as Images membuat kita akan melakukan sedikit kesenangan dengan images yang ada di blog kita. Singkat ceritanya menampilkan photo dari album picasa menggunakan teknik JSON, dipanggil memakai jQuery maka tampilah itu si photonya ;)) (Koben juga tidak mengerti soal script mah) =))

Struktur Images jQuery Plugin for Blogger

<script type='text/javascript'>
//<![CDATA[
var jsBloggerCollage = function(){
   var $collages = [],
   init = function(){
       var $tempCollages = jQuery(".blogger-collage");

       $tempCollages.each( function() { //spawn off a collage for each item
       $collages.push(new Collage($(this) ) )
       });     
   };
   function Collage(parent) {
   var $parent = parent,
   config = {
   "blogUrl": "",
   "maxResults": "1000",
   "showMax": 10,
   },
   init = function() {
   //load config options and clean if needed
   jQuery.extend(config, jQuery.parseJSON( $parent.attr("data-config") ) )
   if(config.blogUrl > "") { //only request if valid url
   //clean blogUrl
               config.blogUrl = config.blogUrl.replace(/\/$/, ""); //remove trailing backslash
               var index = config.blogUrl.search(/(?: (http\:\/\/|https\:\/\/))/i);
   if(config.blogUrl.search(/(?: (http\:\/\/|https\:\/\/))/i) === -1) { //prepend http:// if not found
   config.blogUrl = config.blogUrl.replace(/[\/:]/, ""); //remove backslashes and : just in case
   config.blogUrl = "http://" + config.blogUrl;
   }
               var qs = {
                   alt : "json",
                   "max-results": config.maxResults
               },
               url = config.blogUrl + "/feeds/posts/summary?callback=?";
               jQuery.getJSON(url, qs, process);
   }
   else {
   $parent.append("<h3>Invalid blogUrl Provided</h3>");
   }
   },
   process = function(data, status, xhr) {
   var i = 0,
   nShown = 0,
           entries = data.feed.entry,
           //$picTemplate = $("<span><img></img></span>"),
           $pic;
   
           for (i; i < entries.length; i++) {
               if(entries[i].media$thumbnail){
                   $pic = jQuery("<span class='js-collage-entry'></span>");
                   $pic.append("<a target='fullsize' href='" + entries[i].media$thumbnail.url.replace("/s72-c/", "/s1600/") + "'><img src='" + entries[i].media$thumbnail.url + "'></a>");
                   $parent.append($pic);
                   nShown++
                   if(nShown >= config.showMax) {
                   break;
                   }
               }
           }
   };
   init();
   }
   jQuery(document).ready(init);
}();
//]]>
</script>

Kode pemanggil<div class='blogger-collage' data-config='{"blogUrl": "URL-YOUR-BLOG.blogspot.com", "showMax": 10}'></div>

Apabila sobat mau membuat variasi CSS dengan gambar yang sudah terpanggil, perhatikan kode berikut .blogger-collage

Misalkan kepengen lebarnya 100px, tingginya 75px dan lain-lain tinggal bikin saja :D Contoh:.blogger-collage {
width: 100px;
height: 75px;
padding: 5px;

dan blab-bla disini tempatnya
}Penulisan dengan teknik Add a Gadget ► HTML/Javascript akan terlihat seperti

<script type='text/javascript'>

ISI SCRIPT JQUERY PLUGIN-NYA

</script>

<style>

ISI CSS BUAT GAYA-GAYANYA

</style>

<div class='blogger-image' data-config='{"blogUrl": "URL-YOUR-BLOG.blogspot.com", "showMax": 10}'></div>

Semuanya langsung dimasukin saja tanpa harus edit² dalaman template ;))
Contoh koben praktek coba tengok deh yah ;)

demo View Image Blogger with jQuery
Happy blogging \m/

Activity Google+ With jQuery Plugin

Lama tidak berkunjung ke salah satu blog suhu yang selalu mengeluarkan trik and hack full stylish bagi blogger in the house! Sekali berkunjung langsung mengeluarkan artikel edan eling cap maknyusss punya.
mOrE TecH TiPs yaitu salah satu web developer dimana hasil karyanya diakui di seantero jagat raya :-" @mike_more selaku owner dari www.moretechtips.net kembali merealese satu widget Google+ Activity Widget jQuery Plugin :-bd Gadget yang berfungsi menampilkan segala aktifitas dari google +1. Berikut tiga buah demonya yang bisa dipilih:

Light Theme | Dark Theme | Light Theme II with Custome Width and Height

Feature:

1. Muncul dengan banyak pilihan untuk mengkustomisasi penampilan dan kinerja.
2. Slide bawah posting umum sobat di Google dan setiap gambar yang dilampirkan. Kita juga dapat menonaktifkan animasi dan menampilkan daftar tetap sebagai gantinya.
Secara default, akan menampilkan gambar profil dan link ke profil Google kita. Namun, kita juga dapat menonaktifkan itu.
3. Widget datang dengan 2 file CSS, skema warna terang dan gelap. Selain itu, dapat membuat gaya kustom mulai dari file-file CSS.
4. Widget menggunakan respon parsial dari Google API untuk percepatan waktu loading.
5. Dapat menyesuaikan widget dengan menempatkan pilihan dalam HTML5 data atribut atau komentar HTML sehingga tidak akan menghancurkan validasi halaman HTML.
6. Karena ini adalah solusi Javascript - satunya, kita dapat menambahkan tombol di mana saja kita dapat menanamkan Javascript seperti Google Blogger, Wordpress,...
7. Menggunakan plugin jQuery panggilan khas atau auto.

Begitu kira-kira menurut translator :)) Cara sudah jelas dipaparkan disana, sobat hanya perlu memperhatikan script jQUery intinya saja. Jika sudah ada tidak usah memakainya lagi ;)<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

DEMO

Google+ Activity Widget

Semoga bermanfaat :)

Goes to The France Blogger II

Sempat terkecot dengan 2 postingan Koben kembali akan melanjutkan petualangan goes to the france. Sebelumnya Beben pernah bilang bahwa blogger perancis banyak yang bermain menggunakan .XML Mempermudah kita guna mendapatkan Add Your Own Gadget ;) Jika masih belum kurang paham cara memasukan link .xml ke gadget blogspot, silahkan baca terlebih dahulu ke The Making of Widget.
Soal hostingan yang ada, tidak perlu khawatir sobat² sekalian karena memakai yang kepunyaan si embah google juga :D TInggal klik Add ► seting seperlunya ► muncul deh di blog sobat tersayang :x Biar gereget and makin menggemaskan, this is example my gadget selection from there :P

Postingan Terbaru Vertical

Postingan Terbaru Horizontal

Slideshow Picasa Album

Sobat bisa sikat dimari gadget from google web elements Les Outils Google. Banyak deh pokoknya mah, acak-acak sendiri saja mana yang kepakainya :D
Please welcome...Viti-Vino

Adding More Formats To The Comments Area

Setelah bergelut dengan praktek-praktek tiada henti, sekarang saatnya berbagi lagi dengan sobat blogger tercinta. Sebelumnya salah satu master blog membuat Threaded Comments System for Blogspot, lalu dia buat lagi hack yang sama kerennya sob :D
Adding images and more text formats to the comments area yang berarti memasukan images, text berwarna, text marquee,...dll. Disana sudah dimodifikasi lagi agar bisa memasukan embed video YouTube.

Verifikasi, ternyata ide hack tutorial ini datang Duy Pham Blog.
Chèn ảnh, video, nhạc vào comment Blogger.
Makanya bila menyadur salah satu postingan itu harus disertakan sumber artikel. Sedikit juga kalau bukan hasil sendiri namanya meniru ;)) Apa sih susahnya menaruh link sumber!!! Malu ya, takut kesaingin :))

Dulu Koben juga pernah memosting Embed Video and image in Blogspot Comments Side, namun prosesnya ribet pakai acara klik terlebih dahulu! Silahkan kunjungi Artistutorial karena versinya tidak ribet.

<script type='text/javascript'>
        //<![CDATA[
/*developed by neechalkaran@gmail.com*/
a=document.getElementById('comments');
if(a){b=a.getElementsByTagName("DD");for(i=0;i<b.length;i++){_str=b.item(i).innerHTML.replace(/\[im\]/gi,"<img src=' ");
_str=_str.replace(/\[im\#\]/gi,"<img width='100%' src='");_str=_str.replace(/\[\/im\]/gi,"' class='image'/>");
_str=_str.replace(/\[ma\]/gi,"<marquee>");_str=_str.replace(/\[\/ma\]/gi,"</marquee>");_str=_str.replace(/\[si\=\"/gi,"<font size='");
_str=_str.replace(/\[\/si\]/gi,"</font>");_str=_str.replace(/\[co=\"/gi,"<font color='");_str=_str.replace(/\[\/co\]/gi,"</font>");
_str=_str.replace(/\"\]/gi,"'>");_str=_str.replace(/\[ce\]/gi,"<center>");_str=_str.replace(/\[\/ce\]/gi,"</center>");
_str=_str.replace(/\[ma\+\]/gi,"<marquee direction='right'>");_str=_str.replace(/\[\/ma\+\]/gi,"</marquee>");_str=_str.replace(/\[box\]/gi,"<table frame='box'><tr><td>");
_str=_str.replace(/\[\/box\]/gi,"</td></tr></table>");_str=_str.replace(/\[mark\]/gi,"<table align='center' frame='vsides' width='70%'><tr align='center'><td>");
_str=_str.replace(/\[\/mark\]/gi,"</td></tr></table>");_str=_str.replace(/\[line\]/gi,"<hr/>");
_str=_str.replace(/\[card\=\"/gi,"<table align='center' border='1' width='75%'><tr><td align='center' bgcolor='");_str=_str.replace(/\[\/card\]/gi,"</td></tr></table>");
_str=_str.replace(/\[hi\=\"/gi,"<span style='background-color:");_str=_str.replace(/\[\/hi\]/gi,"</span>");b.item(i).innerHTML=_str}}
 //]]>
    </script>

/*For adding video in comments body*/
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function replaceText(){if(!document.getElementById){return;}
bodyText = document.getElementById("multimedia");
theText = bodyText.innerHTML;
theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='480' height='390' src='http://www.youtube.com/embed/");
theText = theText.replace(/&amp;feature=/gi, "?rel=0' '");
theText = theText.replace(/\[\/youtube\]/gi, "?rel=0' frameborder='0' allowfullscreen></iframe>");
bodyText.innerHTML = theText;
}replaceText();
//]]>
</script>
</b:if>

Lihat oleh sobat ada 2 buah javascript disana! Yang atas (warna biru) yaitu berfungsi

Untuk menampilkan Images [im].....[/im]
Untuk scrolling effect [ma]....[/ma]
Membuat huruf dengan ukuran [si="2"]...[/si]
Membikin huruf menjadi berwarna [co="red"]...[/co]
Menjadikan di tengah [ce]...[/ce]
Untuk scrolling effect dari kanan [ma+]...[/ma+]
Kotak effect [box]...[/box]
Mark efek [mark]...[/mark]
Memakai background [card="blue"]...[/card]
Menampilkan Images fit dengan kotak komentar (width=100%) [im#]...[/im]
Menyorot kata dengan warna [hi="yellow"]...[/hi]

JavaScript kedua warna (merah tua) untuk menampilkan embed video dari YouTube.
Proses & cara sudah jelas tertulis di narasumber :D Kalau ada masalah silahkan tulis pada kotak komentar yang tersedia ;))

Beben juga berkomentar terus menerus karena tidak berjalan mulus sob. Lalu praktek, dan diberi contoh oleh master ArtisTutor demo jadinya. Koben lalu gabungkan script yang ada, dan hanya menampilkan beberapa fungsi saja :-/
Jika berniat versi koben, silahkan sobat ikuti langkah-langkahnya.

Download Full Template

Lakukan Expand Widget Templates letakkan JavaScript berikut diatas tag </body>

<script type='text/javascript'>
//<![CDATA[

function replaceText() {
   if (!document.getElementById) {
       return;
   }
   bodyText = document.getElementById("multimedia");
   theText = bodyText.innerHTML;
   theText = theText.replace(/\[img\]/gi, "<img style='margin:5px 0;border:1px solid #aaa;width:100%;background:#FFF;padding:5px' src='");
   theText = theText.replace(/\[\/img\]/gi, "'/>");
   theText = theText.replace(/\[ma\]/gi, "<marquee>");
   theText = theText.replace(/\[\/ma\]/gi, "</marquee>");
   theText = theText.replace(/\[si\=\"/gi, "<font size='");
   theText = theText.replace(/\[\/si\]/gi, "</font>");
   theText = theText.replace(/\[co=\"/gi, "<font color='");
   theText = theText.replace(/\[\/co\]/gi, "</font>");
   theText = theText.replace(/\[hi\=\"/gi, "<span style='background-color:");
   theText = theText.replace(/\[\/hi\]/gi, "</span>");
   theText = theText.replace(/\"\]/gi, "'>");
   theText = theText.replace(/\[youtube\]http:\/\/youtu.be/gi, "<iframe width='400' height='300' src='http://www.youtube.com/embed");
   theText = theText.replace(/\[youtube\]http:\/\/www.youtube.com\/watch\?v=/gi, "<iframe width='400' height='300' src='http://www.youtube.com/embed/");
   theText = theText.replace(/&amp;feature=/gi, "?rel=0' '");
   theText = theText.replace(/\[\/youtube\]/gi, "?rel=0' allowfullscreen></iframe>");
   bodyText.innerHTML = theText;
}
replaceText();

//]]>
</script>

Kemudian cari kode<b: loop values='data: post.comments' var='comment'>tepat sebelum kode tersebut (diatas) lakukan tagging dengan kode berikut
<div id='multimedia'>
scroll kebawah temukan penutup tagging </b: loop> dan masukkan tagging penutup
</div>

SAVE.

Ketika akan memberikan komentar, sobat harus melakukan tagging dengan perintah sbb:

• [img]...[/img]
Nampilin gambar.
• [ma]...[/ma]
Efek marquee.
• [si="10"]...[/si]
Huruf dengan ukuran.
• [co="blue"]...[/co]
Huruf berwarna.
• [hi="red"]...[/hi]
Pakai background.
• [youtube]...[/youtube]
Link youtube.

[img]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGZJaUpEAXP5MIUaMmTaqIQ7ou-aMCH7zVhYCcgEIvE6tYmNPzF0p2mjBeabeQHR3JysDxCs-3sdyOXuPLhQTxs3-dOtIU4Rl8_LRMi2DBJgi2TWoQ-Cu1I9j_OPQX5kqaz_uvpknjMIY/[/img]
[ma]This is word with marquee effect[/ma]
[si="10"]Huruf dengan ukuran[/si]
[co="blue"]Huruf pakai warna[/co]
[hi="red"]Huruf dengan latar belakang[/hi]
[youtube]http://www.youtube.com/watch?v=9aaBK4ClQH4[/youtube]

Akan koben tulis diblog ini semua kode diatas untuk melihat demonya.
Good luck and happy blogging \m/

Snippet CSS Feature Image for Blogger

Tunda dulu hasil jalan-jalan ke France Blogger, guna melihat feature teranyar dari blog blogspot platform tercinta :x Sekarang pihak blogspot sudah menanamkan fasilitas lightbox for image. Jadi secara otomatis semua platform blogspot sudah tersedia trik tersebut tanpa harus membuatnya! Bila ada yang tidak berjalan dengan fungsi tersebut, kemungkinan besar sudah menanamkan lightbox with jQuery didalam templatenya?
Secara keseluruhan bila tetap tidak berjalan juga, kemungkinan ada ID unique and script snippet (yang tertanam pada blog) yang bentrok dengan script bawaan blogger. Seperti blog ini, tidak jalan loh :(( Kinerja lightbox blogger akan meng-genarated semua gambar yg ada. Tepatnya Koben juga tidak tauk, apa pada bagian postingan saja bahkan malah bisa keseluruhan :-?? Proyek baru dan masih berjalan kelihatannya dari embah google bagi para pengguna :D

Kali ini Beben Koben si bloglang anu ganteng kalem tea akan mencoba meng-snippet seperti waktu melakukan Snippet CSS Code Widget Plipeo. Tidak bukan agar terlihat lebih full stylish ;)) b-) Gue :p hanya memberikan sentuhan tebal border, garis lengkung (border-radius) dan juga warna to' :))

Snippet CSS Lightbox Image Blogspot

.CSS_LIGHTBOX_FILMSTRIP {
background-color: #000; /* warna latar belakang pada thumbnail yg ada dibawah */
border-top: 1px solid red; /* garis border pada image */
opacity: .3; /* efek transparansi */
-moz-opacity: .3; /* efek transparansi mozilla browse */
}
.CSS_LIGHTBOX_INDEX_INFO {
color: yellow; /* warna tulisan pada jumlah gambar */
font-weight: bold; /* tulisan menjadi tebal */
}
.CSS_LIGHTBOX_BTN_CLOSE_POS {
top: 10px; /* batas tanda tutup dari sisi atas */
right: 10px; /* batas tanda tutup dari sisi kanan */
}
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline:3px solid #fff; /* tebal, gaya dan warna garis pada gambar */
outline-offset: 5px; /* lebar outline dengan gambar */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border:1px solid red;

-webkit-outline-radius: 10px;
-moz-outline-radius: 10px;
outline-radius: 10px;
}
.CSS_LIGHTBOX_FILMSTRIP:hover {
opacity: 1;
-moz-opacity: 1;
}

Simpan semua diatas kode ]]></b:skin> SAVE. Beres sudah terpasang effect snippet for image :)

Untuk melihat variasi gaya outline sobat bisa lihat dimari outline style property by w3school. Kode CSS warna biru, kode coba2 Koben, yang tidak ditemukan di web developer manapun mengenai itu. Tapi berfungsi bos :D dan merupakan kode yg meberikan efek garis lengkung pada outline attribute. Jika tidak dipakai, maka outline:3px solid #fff; akan jadi kotak (no border-radius)

CSS_LIGHTBOX_BTN_CLOSE_POS
Hanya bisa dipindahkan ke kiri atau ke kanan saja.
CSS_LIGHTBOX_FILMSTRIP:hover
Efek agar tranparansi menjadi kembali jelas ketika disorot.

Scroll pada mouse berfungsi sama dengan arah tanda panah pada keyboard yaitu next or previous image.

Jangan pernah menambahkan atribute CSS snippet diatas dengan variabel width, height, padding, margin jika sobat tidak melihat kedalam sourcenya

http://www.blogger.com/static/v1/widgets/3353720152-widget_css_lightbox_bundle.css

. Rubahlah apa yang sudah tertulis disana!!! Waspadalah waspdalah Be carefully ;)

Jika ada blogger yang mengsnippetnya lebih dalam dan banyak lagi!!! boleh sharing² disini juga :-" \:d/
Resource from the blogger buzz Your images never looked so good.
Cara mendisablekan feature lighbox image blogger bisa dibaca di Menonaktifkan Image Lightbox for Blogspot.
Semoga bermanfaat :)

Going to The France Blogger

Menara eiffel yang berkedudukan di negara Perancis ternyata menyimpan sejuta pesona. Begitu juga dengan para bloggernya. Walau masih minim walking² ke blogger sana, namun kendala yang menghadang cukup lumayan belibet. Faktor bahasa yang utama :D
Pertama Koben satroni and acak-acak artikel dari blog Blog d Aide pour Blogger. Kelihatannya sudah jarang update juga sama pemiliknya. Sibuk kali ;)) Sebagian besar konten blog mengeluarkan trik sekitar manipulasi image. Lumayan buat keren-kerenan dengan gambar sob :P Tapi satu hal menarik dari para blogger perancis ini, suka berkreasi dengan gadget ekstension .xml Beben baru liat hal baru tentang penggabungan penggunaan script dengan frame ternyata mungkin dilakukan ya dari sana sob :">

Langsung genjot aja deh :)) Persiapan menterjemahkan bahasa lebih baik pakai versi ini saja Translate Free Software. Tinggal grab saja prosesnya ;)

Manipulasi Image using CSS

Keliatannya cocok dipakai secara inline dalam postingan trick berikut bos. Perhatikan gambar asli berikut sebelum diapa-apakan:

Lalu diberi sentuhan variabel border & opacity menghasilkan efek

The Coded<div style="width: 240px;height: 320px;padding: 0px;border-width: 3px;border-style: solid;border-color: #555;background-image: url(http://YOUR-LINK-IMAGE.jpg); margin: 0 auto;">

<div style="border-right: 10px solid rgb(255, 255, 255);border-width: 10px;border-style: solid;border-color: rgb(255, 255, 255);opacity: 0.5;width: 220px;height: 300px;">

</div>
</div>Dont forget to look Effect Pada Image and Border Flexible Boxes for Image.

Efek image dengan background color memunculkan layak photoshop red effect

<div style="width: 240px;background-color: #ff4500;margin: 0 auto;">

<div style="width: 240px;height: 320px;filter: alpha(opacity=70);opacity: .70;background-image: url(http://YOUR-LINK-IMAGE.jpg)">

</div>
</div>Green effect like photoshop

<div style="width: 240px;background-color: #007700;margin: 0 auto;">

<div style="width: 240px;height: 320px;filter: alpha(opacity=70);opacity: .70;background-image: url(http://YOUR-LINK-IMAGE.jpg)">

</div>
</div>Perhatikan kode background-color, itu warna yg memberikan efek pada gambarnya.
Satu image bisa dikreasikan menjadi macam ngono re' @-)

Satu hal unik lagi yg Koben ambil dari france blogger that is about "Les Vignettes d'un Album Picasa sur son Blog" (Thumbnail from Picasa Album on The Blog) :D
Like this brooo
Perhatikan kodenya baik-baik!!!

<iframe style="width: 300px;height: 132px;margin: 0 auto;display: block" src="http://www.gmodules.com/gadgets/ifr?url=http://hosting.gmodules.com/ig/gadgets/file
/108621208120033273647/picasa-thumbnails.xml
&up_USR=Picasa Account
&up_AID=ID Album
&up_NBC=Jumlah Thumbnail yg akan ditampilkan (1 - 200)
&up_SIZE=Lebar Thumbnail (32 - 160 pixels)
&up_SHA=Efek ShadowBayangan (Yes - No)
&up_CLP=Open link gambar (Yes - No)
&up_URL=URL link pada judul
&up_TITLE=Teks Judul
&up_LCOL=%23Warna huruf pada judul
&up_BCOL=%23Warna border
&up_BKCOL=%23Warna latar belakang
&up_CCOL=%23Warna latar pertama kali muncul"
allowTransparency="true" frameborder="0"
scrolling="no">
</iframe>

Contoh penulisan kode jadi

<iframe style="width: 305px; height: 380px;" src="http://www.gmodules.com/gadgets/ifr?url=http://hosting.gmodules.com/ig/gadgets/file
/108621208120033273647/picasa-thumbnails.xml
&up_USR=philippe.chappuis
&up_AID=5297196325809923457
&up_NBC=20
&up_SIZE=72
&up_SHA=Y
&up_CLP=Y
&up_URL=http://beben-koben.blogspot.com/
&up_TITLE=Tutorial+Blog+for+Stylish+Blogger
&up_LCOL=%23AA0000
&up_BCOL=%23555555
&up_BKCOL=%23debe94
&up_CCOL=%23555555"
allowTransparency="true" frameborder="0"
scrolling="no">
</iframe>

Silahkan dibanding-banding saja. Ingat sob, album picasa berbeda dengan photo² hasil upload yang datang kala kita memosting. Tengok dimari cara membuat album dari picasa service. Bagi pemakai flickr bisa kunjungi blog sumber, ada 3 biji gaya macam ginih. Picasa is google =))

Bonus

<iframe allowtransparency="true" scrolling="no" frameborder="0" width="210" height="205" src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/flash_container.xml&up_File=http://sites.google.com/site/annuairevin/files/GoogleClock.swf&up_FlashWidth=210&up_FlashHeight=200&up_ContainerCol=%23FFFFFF">Inserer une animation Flash http://sites.google.com/site/annuairevin/flash-reader</iframe>
Sambung lagi besok =))
Semoga bermanfaat :)

Make Tabel or Columns Using CSS

Dahulu kala bila ingin membuat sesuatu didalam column lumayan ribet menggunakan variabel tag table. Tapi dengan kemajuan perilmuan CSS sekarang bisa lebih mudah kalau sobat ingin membikin sesuatu didalam column. Jika kepengen buat table tanpa ribet yaaa apalagi selain menggunakan tools tabel generator.
Selidik punya selidik ternyata berbeda antara table dengan columns ini sob ;)) Terlihat dari struktur dan fungsinya :p Pokoknya gitu deh, sama-sama buat mengelompokan beberapa menjadi saturapa :D
Contoh tabel dengan 3 kolom

EMBAH	BEBEN	KOBEN
Si Bloglang	anu Ganteng	Kalem tea

Berikut contoh columns dengan 3 count ;)

Start Make Column with CSS 3 !!!

Lorem ipsum vix id kasd adhuc dignissim, eum ad dico audire mediocritatem, te iisque tritani efficiendi has. Ne quo justo docendi. Cum ea quando placerat, eirmod latine erroribus mei ei, quo mazim appetere et. Munere aliquid vis.

Sed da sine vocabulario, il magazines interlinguistica web. Al duo tote synonymo finalmente. Ma ille toto del, ha durante synonymo uso. Le peano vices non, duo libere technic articulo in. Sine paternoster simplificate su non,

Fu ma'n Noper bléit rem, méngem ugedon mir hu. De Monn grouss d'Kàchen den, d'Beem sëtzen do mir, bei d'Wise klinzecht op. Nei geet eise kréien et, ké stét d'Hiezer däischter dan. Sin Fielse d'wäiss

Cxtir sonis li kak, on mne maks zvestis profesor. Gda polakju blagodarim vo. Troh zxiznuf mai te. Kupit pervju jazikas na sos, kak iz edat podpor. Pisajut hrvatzem dev mi, jazika partner rodzinuf zxe ne,

End Make Column with CSS 3 !!!

Diberi sentuhan efek CSS3 dikit ma gue :P biar maknyus gito loh.

Rahasia dibalik pembuatan multiple columns with CSS 3 ada disini:

1. CSS3 Multiple Columns
2. CSS3 column-rule Property
3. CSS3 column-rule-style Property
4. CSS3 column-count Property

Bumbu columns seperti demo diatas bisa sobat sikat juga

Kode CSS

#column {
border: 3px solid #555;
-webkit-column-count: 3;
-webkit-column-rule: 1px solid #eee;
-moz-column-count: 3;
-moz-column-rule: 1px solid #eee;
column-count: 3;
column-rule: 1px solid #eee;
background-color: #999;
padding: 10px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#column p {
padding: 10px;
align: justify;
margin: 20px 0 0 0;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-box-shadow: 3px 5px 3px #333;
-moz-box-shadow: 3px 5px 3px #333;
box-shadow: 3px 5px 3px #333;
background-color: #ddd;
}

Kode HTML

<div id="column">

<p>YOUR CONTENT WITH PARAGRAPH VARIABLE</p>
<p>YOUR CONTENT WITH PARAGRAPH 2 VARIABLE</p>
<p>YOUR CONTENT WITH PARAGRAPH 3 VARIABLE</p>
<p>YOUR CONTENT WITH PARAGRAPH 4 VARIABLE</p>

</div>Setiap kali membuat paragrap baru, itulah panjang sesuatu yang didalam kolumnya sob :)
Semoga bermanfaat :)

Satu Frame Dua Fungsi

Dengan kreatifitas yang kita miliki, jika memang mau membuat karya full stylish dengan bahasa kode CSS yang pas-pasan ternyata bisa juga. Intinya paham saja itu si kode buat apaan dan bagaimana hasil efek yang dihasilkan. Misalkan mau bermain dengan variabel hover bisa tengok efek yg ditimbulkanya hover effect! ^{Try search with keyword "hover" in this blog}
Kepengen bermain dengan variable position fixed bisa menghasilkan karya seni indah seperti AddThis in Fixed Position? Berawal menclok ke blog sobat Ramlan, melihat ke bagian photonya yang ganteng kalem juga kayak Koben, ada hal menarik buat dibagi :D Bagian gambar kala cursor didekatkan muncul link yang tersembunyi!!!

Digambar link tujuan lain, link yg nongol tujuannya lain juga ;)) Satu frame dua fungsi berbeda :-bd Cocok banget bagi blogger edan eling akan gaya.
Live Demo aja deh biar NGEUH...arahkan (hover) cursor ke daerah image!

Read more...

Link image tujuannya kemana, link Read more... juga kemana kan??? Itu inti dari trik kali ini sob :-"
Cucok maracok banget bagi blogger dengan konten video², cerita², pendidikan, agama dll.

Kode CSS

#kutil {
height: 100px;
width: 305px;
}

#kutil img {
height: 100px;
width: 305px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}

.bisul {
position: relative;
z-index: 50;
}

.bisul span {
display: none;
}

.bisul:hover span.cacar {
right: 0;
top: 0px;
display: block;
position: absolute;
background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYWmLs3UoPhEMYTP8EDbREy27Fnu67cD3NUW3XnrEk-ReI0cZNXSBXw25YtbUxlRVQFcsStIo-XD4bOEFEo3rKnswVM5qvyEnstaG_LbAWYJ4Fj84Lzdy9YIQs1LEi25vmAKOampnWr0V-/) left center no-repeat;
padding: 9px 9px 9px 20px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topright: 15px;
border-top-right-radius: 15px;
}

.bisul a {
color: #fff;
font-weight: bold;
text-decoration: none;
}

Lihat kode yg diberi warna pada kode CSS diatas, Koben beri dgn nama² penyakit. Itulah yg dimaksudkan dengan UNIQUE ID. Jadi kalau dipostingan gue nulis unik id sobat sudah tau :) Belum apal meletakannya dimana, sebelum kode ]]></b:skin>

Kode HTML

<div id="kutil" class="bisul">
<a href="http://link-tujuan-1.com" title="">
<img src="http://link-image.JPG" />
</a>
<span class="cacar">
<a href="http://link-tujuan-2.com" title=""> Read more...</a>
</span>
</div>Kode HTML dipakai kala sesi postingan. Oh iyah, kode CSS jika mau mengatur posisi/float, tinggi & lebar image tinggal menambahkan saja. Contoh kan namanya juga, jadi standarisasi saja. Hias menghiasi tinggal daya kreasi masing² \m/
Semoga bermanfaat :)

Pinceladas and no Lanche Web

Dimana ada api, pasti ada asap! Di mana ada tutorial gaya, dibagi-bagi buat sobat semua. Walau tidak menjelaskan secara terperinci penerapannya ke dalam blog, tapi setiap artikel yang mempunyai bobot, bibit dan bebet pasti sangat diperlukan bagi para newbie seperti kita-kita inih ;)) Seperti halaman khusus yang Koben buat guna mengumpulkan web/blog pencetus ide-ide briliant inspirasi Beben :D
Walau malah lupa mau menambahkannya karena keasyikan anteng walking dan baca-baca :)) Jadi mau nambahin lagi ceritanya kali ini tuh sob. Setiap menemukan web keren-keren pasti akan memecut kreatifitas kita ;)

Jadi jangan pernah melupakan link jawara punya, jika memang tidak berlangganan via RSS-nya :P

Tutorial Blog for Stylish Blogger

Tuh contoh CSS Ribbon Banner sob. Beberapa contoh keren lagi nih yang keliatan dari depan doang :P

• CSS3 3D Box Shadow Screenshot
• CSS3 Polaroid Gallery Screenshot
• Youtube Lightbox Gallery Screenshot

Pokoknya mah kedua web ini itu ibarat sisi mata uang saja! Yang satu menerangkan ini di sisi lain menerangkan itu b-) Modalnya cuma satu saja jika ingin mengeksplore web tersebut... TRANSLATOR. Please welcome my friend...

CSS no Lanche

Pinceladas da Web

Semoga bermanfaat :)