Tutorial Blog for Stylish Blogger: September 2011

Bagi sobat blogger yang membutuhkan tools dan aplikasi buat memperindah blognya BEN_TOOLS

Buat kawan yang mau pasang iklan Silahkan hubungi pada halaman kontak yah...xixixi.

Tempatnya free download mp3 terlengkap Fortysix Mp3 dan bisa pesan pula. Pokok`e top margot top

Your ads here!!!

Assalamu'alaikum Wr Wb - Selamat datang di Blog berat dan aneh ♥ Semoga tidak mengurangi sobat untuk menjamahnya. Sssttt...MOZILLA pakainya yah...! Eit!!! Mampir lagi ya huehuehue. This is blog looks better in FIREFOX. Get MOZILLA™ Happy blogging - Wassalamu'alaikum Wr Wb ☺

▼ ▲

The complete guide to create a blogger hack

4 Komentar

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 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 .
Semoga sesuatu ya \m/

▼ ▲

OnmouseOver Trick

8 Komentar

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 . Dari sanalah trik onmouseover Koben dapatkan ;)) :"> (tengok disisi kanannya)

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/

▼ ▲

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

Happy blogging \m/

▼ ▲

Css Tutorial still Amazing

0 Komentar

▼ ▲

View Image Blogger with jQuery

2 Komentar

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

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

4 Komentar

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:

Muncul dengan banyak pilihan untuk mengkustomisasi penampilan dan kinerja.
Slide bawah posting umum sobat di Google dan setiap gambar yang dilampirkan. Kita juga dapat menonaktifkan animasi dan menampilkan daftar tetap sebagai gantinya.
Widget datang dengan 2 file CSS, skema warna terang dan gelap. Selain itu, dapat membuat gaya kustom mulai dari file-file CSS.
Widget menggunakan respon parsial dari Google API untuk percepatan waktu loading.
Dapat menyesuaikan widget dengan menempatkan pilihan dalam HTML5 data atribut atau komentar HTML sehingga tidak akan menghancurkan validasi halaman HTML.
Karena ini adalah solusi Javascript - satunya, kita dapat menambahkan tombol di mana saja kita dapat menanamkan Javascript seperti Google Blogger, Wordpress,...
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

4 Komentar

▼ ▲

Adding More Formats To The Comments Area

17 Komentar

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 , 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]
[ma]...[/ma]
[si="10"]...[/si]
[co="blue"]...[/co]
[hi="red"]...[/hi]
[youtube]...[/youtube]

[img]http://3.bp.blogspot.com/_-EN6_RPvgck/TFUnprXBWZI/AAAAAAAAEak/g3SOF8cQ86Y/sashagrey2.jpg[/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

2 Komentar

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 .
Cara mendisablekan feature lighbox image blogger bisa dibaca di .
Semoga bermanfaat :)

▼ ▲

Going to The France Blogger

8 Komentar

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 and .

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 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

0 Komentar

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:

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

8 Komentar

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!

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(http://3.bp.blogspot.com/-Ot2ZsSqnE24/Tmt4Lh908fI/AAAAAAAAK7g/kHZ5qJzInXw/pensil.jpg) 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 :)

Tutorial blog for full stylish blogger - Freedom of expressions and system of brains.

RESOURCE

GRAPHICS STATUS

Testimonials

Tutorial Blog for Stylish Blogger.

Kode CSS

CSS reflections

CSS Horizontal Accordion

Css menu 13

CSS News Accordion

CSS NEWS ACCORDION

Struktur Images jQuery Plugin for Blogger

Feature:

DEMO

Postingan Terbaru Vertical

Postingan Terbaru Horizontal

Slideshow Picasa Album

Download Full Template

SAVE.

Snippet CSS Lightbox Image Blogspot

Manipulasi Image using CSS

Bonus

Start Make Column with CSS 3 !!!

End Make Column with CSS 3 !!!

Kode CSS

Kode HTML

Kode CSS

Kode HTML

Laman

My ETC

TRANSLATE

KATEGORI

JOINT WITH ME ON g+ PAGE

ARSIP

RECENTLY

FACEBOOK PAGE