Auto Post Thumbnail - Auto Readmore with CSS3 Effects

Auto read more pastinya akan sangan bermanfaat bagi semuanya. Dengan auto readmore yang berfungsi secara otomatis menciptakan read more berdasarkan jumlah karakter ini, maka tak perlu lagi ada kata, Aduh ...., read more-nya kelupaan!" Kata yang paling sering terdengar saat posting selesai dan diterbitkan.

Readmore otomatis ini juga tak sekedar read more biasa karena mengikut sertakan javascript yang berfungsi secara otomatis akan menampilkan thumbnail (image berukuran kecil) di setiap box posting dimana read more berada. Anda dapat mengatur ukuran thumbnail dengan merubah nilai width pada javascript. Jika anda menghendaki pengaturan ini sebaiknya lakukan pada desain yang pertama (standart). O,...ya,.. perlu diketahui bahwa kita akan buat 3 macam tampilan thumbnail yang berbeda.

Pilihan tampilan auto post thumbnail:

1. Tampilan thumbnail standar:
   Tanpa menggunakan efek css3. Thumbnail dilengkapi dengan border, background, border-radius dan box-shadow.
2. Tampilan thumbnail dg effek css3:
   Thumbnail sudah dilengkapi dengan efek css3, dimana ketika mouse beada di atasnya thumbnail akan bertambah besar 1,5 kali lipat.
3. Tampilan thumbnail dengan efek css3 plus :
   Dilengkapi pacity effect dan background rgba serta css3 transform dengan efek rotate serta zoom image 2x.

Ketiga pilihan tampilan auto post thumbnail yang dilengkapi dengan readmore otomatis ini memungkinkan anda mempunyai cukup pilihan. Silahkan gunakan yang cocok dihati. Yah ..., karena beberapa sobat blogger ada yang suka tampilan simple namun ada pula yang pilih tampilan atraktif.

Tampilan Standar:

Kode CSS :

.MBread{
        font-size:16px;
        font-family:Arial;
        display:inline-block;
        float:right;
        margin:0 0 0 20px;
        padding:3px;
}
.MBread a{
        padding:2px 6px 3px;
        text-decoration:none;
        background:#ccc;
        color:red;
        text-shadow:2px 2px 2px #888;
        border:1px solid #444;
        border-left-color:#888;
        border-bottom-color:#888;
}
.MBread a:hover{
        background:red;
        color:#eee;
        text-decoration:underline;
}

Javascript :

<script type='text/javascript'>
summary_noimg = 530; /* jumlah teks tanpa thumbnail */
summary_img = 440; /* Jumlah teks dengan auto thumbnail */
img_thumb_height ='auto';
img_thumb_width = 100; /* width thumbnail * Semakin besar akan semakin lebar dan tinggi */
</script>
<script src='https://shannenpio-template.googlecode.com/svn/MITRABARAYAautoreadmore.js' type='text/javascript'/>

xHTML Baru:

<div class='post-header'>
    <div class='post-header-line-1'/>
    </div>

    <div class='post-body entry-content' expr:id='"post-body-" + data:post.id' style='text-align:justify;'>
       <b:if cond='data:blog.pageType == "item"'>
          <data:post.body/>
          <b:else/>
          <b:if cond='data:blog.pageType == "static_page"'>
             <data:post.body/>
             <b:else/>
             <div expr:id='"summary" + data:post.id'>
                <data:post.body/>
             </div>
<script type='text/javascript'>
createSummaryAndThumb("summary<data:post.id/>");
</script>
<span class='MBread'><a expr:href='data:post.url' expr:title='data:post.title'>Read More</a></span>
           </b:if>
        </b:if>
              <div style='clear: both;'/> <!-- clear for photos floats -->
   </div>

Cara Menggunakan :

1. Login ke Blogger. Gunakan user name (jika mengunakan gmail) dan password kemudian klik "Sign in".
   Bagi yang menggunakan yahoo atau lainnya tuliskan alamat email lengkap.
2. Setekah klik "Sign in", beberapa saat kemudian anda akan melihat halaman dasboard (Dasbor).
   Klik Design (Rancangan)"
3. Lanjutkan dengan Klik "Edit HTMl". Tunggu hingga halaman "Backup / Restore Template (Edit HTML)" terbuka. Di halaman ini anda bisa melihat kode penyusun template dalam box "Edit Template".
4. Ini penting untuk dilakukan! Segera "Backup Template Terlebih dahulu sebelum proses penambahan kode baru dimulai.
5. Cari kode ]]></b:skin> kemudian letakkan kode CSS di atasnya, sedangkan javascript di bawahnya. Panduan untuk backup template dan cara mencari kode html di template maupun berbagai cara menyimpan kode bisa dibuka di Special Tutorials yang ada di menu sebelah kiri halaman blog.
   
   Contoh cara peletakkan kode CSS dan javascript:
   

   .MBread{
           font-size:16px;
           ..... etc
   }
   .MBread a{
           padding:2px 6px 3px;
           .... etc
   }
   .MBread a:hover{
           background:red;
           color:#eee;
           text-decoration:underline;
   }
   
   ]]></b:skin>
   
   <script type='text/javascript'>
   summary_noimg = 530; /* jumlah teks tanpa thumbnail */
   summary_img = 440; /* Jumlah teks dengan auto thumbnail */
   img_thumb_height ='auto';
   img_thumb_width = 100; /* width thumbnail * Semakin besar akan semakin lebar dan tinggi */
   </script>
   <script src='https://shannenpio-template.googlecode.com/svn/MITRABARAYAautoreadmore.js' type='text/javascript'/>

6. Klik "Simpan Template (Save Template).
7. Lanjutkan dengan pemasangan xHTML.
8. Klik Expand Widget Template.
9. Cari kode :
   

   <b:includable id='post' var='post'>

   Di bawah kode tersebut, sekitar 19 deret kode di bawahnya terdapat kode seperti ini:
   
   

   <div class='post-header'>
       <div class='post-header-line-1'/>
       </div>
   
       <div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>
         <data:post.body/>
         <div style='clear: both;'/> <!-- clear for photos floats -->
       </div>
   
       <b:if cond='data:post.hasJumpLink'>
          <div class='jump-link'>
             <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
          </div>
       </b:if>

10. Ganti seluruh kode di atas dengan xHTML Baru.
11. Klik Simpan Template (Save Template).
12. Lihat hasilnya dengan membuat posting atau jika menggunakan blog yang sudah ada postingnya maka bisa langsung dicek di halaman utama atau melalui label posting

Catatan/Keterangan :

1. Selain model standart ini anda dapat membuat yang sudah dilengkapi dengan efek css3. Anda bisa ikuti tutorial beserta kode yang digunakan sekaligus di halaman demo.
2. Untuk merubah tinggi dan lebar thumbnail lakukan perubahan nilai pada javascript. Semakin besar nilai maka ukuran thumbnail semakin besar.
3. Tampilan dg css3 Effects:
   Klik link berikut melihat demoberikut kodenya (javascript, kode css dan xHTML).
   Demo berikut kode : Auto Read More - Tampilan dg css3 Effects.
4. Tampilan dg css3 Effects-plus:
   Silahkan tunggu demo selesai terlebih dahulu!

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Posting » Selasa    WAGE, Maret, 06, 2012

» Happy Blogging - mitrabaraya «

Cursor Circling Text Trail Teks Berputar

Cursor ini sebenarnya sangat menarik karena animasinya yang cantik serta mudahnya pengguna melakukan beberapa pengaturan ulang agar circling text trail dapat ditampilkan sesuai keinginan. Hanya satu hal yang terasa amat mengganggu, bahwa circling text trail yang berputar mengitari cursor terlalu sering jadi pengganggu ketika pengunjung mecoba melakukan aktivitas penting seperti copy atau membuka link.

Dalam posting ini kita telah lakukan sedikit perubahan pada javascript agar animasi yang tercipta tidak terlalu berlebihan sekaligus kita juga telah rubah posisi teks terhadap cursor agar sekalipun teks berputar ini selalu setia mengikuti cursor namun tidak lagi menjadi pengganggu yang merugikan. Anda bisa melihat dalam demo dimana terlihat animasi teks berputar sudah berpindah di bawah cursor.

D E M O-MITRABARAYA

Kode CSS :

#outerCircleText {
       font-weight:500;
       color:red;
       text-shadow:1px 1px 1px #000;
       font-family: "MS Serif", "New York", serif;
       position:absolute;
       top:0;
       left:0;
       z-index:3000;
       cursor:default;
}
#outerCircleText div{position:relative;}
#outerCircleText div div{position:absolute;top:0;left:0;text-align: center;}

Javascript :

<script type="text/javascript">
//<![CDATA[
/* by Tim Tilton * http://www.tempermedia.com/ * http://www.dynamicdrive.com/ * modif by: mitrabarayaonline */ 
;
(function () {
        var msg = "mitrabaraya online * Tutorial * "; /* teks cursor */
        var size = 22; /* font size */
        var circleY = 0.75; /* lebar diameter arah vertikal (y) */
        var circleX = 2;  /* lebar diameter arah horizontal (x) */
        var letter_spacing = 4; /* spasi texs semakin besar semakin rapat */
        var diameter = 18; /* diameter lingkaran standart max 20 */
        var rotation = 0.1; /* kecepatan putaran --> gunakan 0.1 s/d 0.2 */
        var speed = 0.8; /* kecepatan text mengikuti cursor semakin kecil semakin lambat */
        if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
        msg = msg.split('');
        var n = msg.length - 1,
        a = Math.round(size * diameter * 0.208333),
        currStep = 20,
        ymouse = a * circleY + 20,
        xmouse = a * circleX + 20,
        y = [],
        x = [],
        Y = [],
        X = [],
        o = document.createElement('div'),
        oi = document.createElement('div'),
        b = document.compatMode && document.compatMode != "BackCompat" ? document.documentElement: document.body,
        mouse = function (e) {
                e = e || window.event;
                ymouse = !isNaN(e.pageY) ? e.pageY: e.clientY;
                xmouse = !isNaN(e.pageX) ? e.pageX: e.clientX;
        },

        makecircle = function () {
                if (init.nopy) {
                        o.style.top = (b || document.body).scrollTop + 'px';
                        o.style.left = (b || document.body).scrollLeft + 'px';
                };
                currStep -= rotation;
                for (var d, i = n; i > -1; --i) { // makes the circle
                        d = document.getElementById('iemsg' + i).style;
                        d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY + 85) + 'px';
                        d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
                };
        },

        drag = function () {
                y[0] = Y[0] += (ymouse - Y[0]) * speed;
                x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
  for (var i = n; i > 0; --i) {
                        y[i] = Y[i] += (y[i - 1] - Y[i]) * speed;
                        x[i] = X[i] += (x[i - 1] - X[i]) * speed;
                };
                makecircle();
        },

        init = function () { 
                if (!isNaN(window.pageYOffset)) {
                        ymouse += window.pageYOffset;
                        xmouse += window.pageXOffset;
                } else init.nopy = true;
                for (var d, i = n; i > -1; --i) {
                        d = document.createElement('div');
                        d.id = 'iemsg' + i;
                        d.style.height = d.style.width = a + 'px';
                        d.appendChild(document.createTextNode(msg[i]));
                        oi.appendChild(d);
                        y[i] = x[i] = Y[i] = X[i] = 0;
                };
                o.appendChild(oi);
                document.body.appendChild(o);
                setInterval(drag, 25);
        },

        ascroll = function () {
                ymouse += window.pageYOffset;
                xmouse += window.pageXOffset;
                window.removeEventListener('scroll', ascroll, false);
        };

        o.id = 'outerCircleText';
        o.style.fontSize = size + 'px';

        if (window.addEventListener) {
                window.addEventListener('load', init, false);
                document.addEventListener('mouseover', mouse, false);
                document.addEventListener('mousemove', mouse, false);
                if (/Apple/.test(navigator.vendor)) window.addEventListener('scroll', ascroll, false);
        }
        else if (window.attachEvent) {
                window.attachEvent('onload', init);
                document.attachEvent('onmousemove', mouse);
        };

})();
//]]>
</script>

Cara Menggunakan :

1. Simpan kode CSS di atas ]]></b:skin>
2. Simpan javascript di atas </head> atau di atas </body>
3. Ganti teks mitrabaraya online * Tutorial * (di javascript) dengan teks yang ingin anda tampikan di cursor.
4. Beberapa pengaturan telah ada petunjuknya di javascript.
5. Warna font dapat dirubah melalui kode CSS (color).
6. Agar cara pasang dan cari kode lebih jelas anda bisa baca Cara Backup Template dan Cara Cepat Cari Kode di Special Tutorials pada menu sebelah kiri!

Sumber :

http://www.dynamicdrive.com/

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Posting » Ngahad PAHING, Maret, 04, 2012

» Happy Blogging - mitrabaraya «

Jozz.. Buat Cursor Animasi ndul Gondal Gandul

He... masih blom puas dengan persediaan cursor yang sudah terposting? Cihu... Don't worry! Nih satu lagi cursor "antik-cantik" bisa kalian pakai di blogger ato yang lain. Ho.... kompatible lhoh buat semua browser. He... nggak percaya. Buih ... udah cakep, kompabilitasnya bagus, animasi, javascript nggak banyak n..... bisa gondal-gandul seperti "punya sampeyan". Ha .... ha .... ha ... clguk ... glegh .... glegh...

Jika image cursor nggak cocock atau sesuai selera, silahkan ganti imagenya dengan mengganti URL image yang ada di javascript (lihat javascript di bawah!). Beberapa variabel juga bisa diatur untuk memperoleh bentuk paling ideal. Ya,... selera orang khan macam-macam. Ada yang suka kurus kecil hitam, ada yang suka kurus tinggi rambut warna pink dan ada pula yang suka badan tinggi besar plus suka kasih pukulan! He ... he ... iya, nggak?!

Pengaturan dapat dilakukan pada ukuran cursor (image), jarak setiap image cursor, jumlah image cursor, efek pantul cursor serta beberapa yang lain. He ... lengkap banget, ya?!

DEMO : Cursor Animasi

Kode CSS :

.tit{
       position:fixed;
       padding:0;
       margin:0;
       border:0 solid;
       border-radius:6px;
       box-shadow:0 0 0 #fff;
       z-index:10;
}
#tit0{visibility: hidden;}

Kode CSS :

<script type="text/javascript">
//<![CDATA[
function elastic_trail() {
 var f = 8;  /* atur jumlah cursor image */
 var g = "https://shanennpio-img-template.googlecode.com/svn/mitrabaraya_globe-36x36.gif"; /* cursor image */
 var h = 0.01;
 var k = 35; /* jarak tiap cursor image */
 var l = 10;
 var m = 1;
 var o = 0;
 var p = 50;
 var q = 10;
 var r = 0.1;
 var s = 0.1;
 var t = 12; /* ukuran cursor image */
 var u = 0.75;
 var v = 0; /* setting yang lain silahkan lakukan percobaan sendiri, he ... he .... */
 var w = 0;
 for (var i = f - 1; i > -1; --i) {
  with(document) {
   write('<div class="tit" id="tit' + i + '">\n');
   write('<img src="' + g + '" height="' + t + '" width="' + t + '" alt="">\n');
   write("</div>\n")
  }
 }
 /*@cc_on@*/
 /*@if(@_jscript_version>=5)if(navigator.appVersion.replace(/^.*MSIE (\d+).*$/,'$1')<=6){var x=function(a,n){var b='scroll'+a,d=document,c='compatMode';return d[c]&&d[c]=='CSS1Compat'?d.documentElement[b]+n+'px':d.body[b]+n+'px'};document.write('<style type="text/css">.tit {position: absolute;}body {background: url(foo) fixed;}<\/style>')};@end@*/
 var y = function () {
  return (document.compatMode && document.compatMode.indexOf("CSS") != -1) ? document.documentElement: document.body
 };
 var z = document.layers ? "": "px";
 elastic_trail.prototype.tit = function (i) {
  this.X = v;
  this.Y = w;
  this.dx = 0;
  this.dy = 0;
  if (document.layers) {
   this.obj = document["tit" + i]
  } else {
   if (document.all) {
    this.obj = document.all["tit" + i].style
   } else {
    if (document.getElementById) {
     this.obj = document.getElementById("tit" + i).style
    } else {
     return
    }
   }
  }
 };
 var A = new Array();
 for (var i = 0; i < f; i++) {
  A[i] = new this.tit(i)
 }
 for (i = 0; i < f; i++) {
  A[i].obj.left = typeof x == "function" ? x("Left", A[i].X) : Math.round(A[i].X) + z;
  A[i].obj.top = typeof x == "function" ? x("Top", A[i].Y) : A[i].Y + z
 }
 var B = this;
 setInterval(function () {
  B.animate()
 },
 20);
 function MoveHandler(e) {
  v = e.pageX - pageXOffset;
  w = e.pageY - pageYOffset;
  return true
 }
 function MoveHandlerIE() {
  v = window.event.x;
  w = window.event.y
 }
 if (document.addEventListener) {
  document.addEventListener("mousemove", MoveHandler, false)
 } else {
  if (document.attachEvent) {
   document.attachEvent("onmousemove", MoveHandlerIE)
  } else {
   if (document.captureEvents) {
    document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove = MoveHandler
   }
  }
 }
 elastic_trail.prototype.vec = function (X, Y) {
  this.X = X;
  this.Y = Y
 };
 elastic_trail.prototype.springForce = function (i, j, a) {
  var b = (A[i].X - A[j].X);
  var c = (A[i].Y - A[j].Y);
  var d = Math.sqrt(b * b + c * c);
  if (d > k) {
   var e = l * (d - k);
   a.X += (b / d) * e;
   a.Y += (c / d) * e
  }
 };
 elastic_trail.prototype.animate = function () {
  var a = 0;
  A[0].X = v;
  A[0].Y = w;
  a = 1;
  for (var i = a; i < f; i++) {
   var b = new this.vec(0, 0);
   if (i > 0) {
    this.springForce(i - 1, i, b)
   }
   if (i < (f - 1)) {
    this.springForce(i + 1, i, b)
   }
   var c = new this.vec( - A[i].dx * q, -A[i].dy * q);
   var d = new this.vec((b.X + c.X) / m + o, (b.Y + c.Y) / m + p);
   A[i].dx += (h * d.X);
   A[i].dy += (h * d.Y);
   if (Math.abs(A[i].dx) < r && Math.abs(A[i].dy) < r && Math.abs(d.X) < s && Math.abs(d.Y) < s) {
    A[i].dx = 0;
    A[i].dy = 0
   }
   A[i].X += A[i].dx;
   A[i].Y += A[i].dy;
   var e, width;
   if (window.innerWidth) {
    e = window.innerHeight;
    width = y().clientWidth && window.innerWidth - y().clientWidth == 17 || window.innerWidth - y().clientWidth == 15 ? y().clientWidth: window.innerWidth
   } else {
    e = y().clientHeight - Math.ceil(t / 2);
    width = y().clientWidth
   }
   if (A[i].Y >= e - t - 1) {
    if (A[i].dy > 0) {
     A[i].dy = u * -A[i].dy
    }
    A[i].Y = e - t - 1
   }
   if (A[i].X >= width - t) {
    if (A[i].dx > 0) {
     A[i].dx = u * -A[i].dx
    }
    A[i].X = width - t - 1
   }
   if (A[i].X < 0) {
    if (A[i].dx < 0) {
     A[i].dx = u * -A[i].dx
    }
    A[i].X = 0
   }
   A[i].obj.left = typeof x == "function" ? x("Left", A[i].X) : Math.round(A[i].X) + z;
   A[i].obj.top = typeof x == "function" ? x("Top", A[i].Y) : A[i].Y + z
  }
 }
}
new elastic_trail();
//]]>
</script>

Cara Membuat :

1. Login ke Blogger.
2. Halaman Dasbor (Dasboard) » Klik "Rancangan (Design)".
3. Klik "Edit HTML".
4. Halaman Edit HTML :
   • Lakukan Backup template.
   • Cari kode ]]></b:skin>
   • Simpan kode CSS tepat di atas kode tersebut.
   • Cari kode <body>.
   • Simpan Javascript di bawah kode <body>.
5. Klik "Simpan Template (Save Template)".
6. Selesai!!!
7. Ndul gondal-gandul mulur mungkret! Hayo punya siapa, tuh?

Catatan/Keterangan:

1. Anda dapat menyimpan javascriptnya dalam bentuk link dengan upload di:
   
   • http://sites.google.com
   • http://code.google.com
   • http://yourjavascript.com
2. Panduan untuk Backup tenmplate dan menyimpan kode css tau javascript dapat dibuka di Special Tutorials yang ada di menu sebelah kiri.
3. Anda bisa mengatur z-index agar cursor dapat terlihat di keseluruhan bagian blog. Semakin besar z-index maka akan semakin kuat daya tembusnya. Biasanya beberapa widget menggunakan z-index. Agar cursor tidak tertutup maka z-index cursor harus dibuat lebih besar.

Sumber:

Dynamicdrive : Elastic Trail Script

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Posting » Ngahad Pahing, Maret, 04, 2012

» Happy Blogging - mitrabaraya «

Trik Percantik Image Posting dg CSS3 Border Radius Property

Ini benar-benar trik sungguhan. He... Sungguh, lhoh! Tak banyak blogger yang tahu cara ini. Yah ...mungkin saja baru di mitrabaraya saja yang ada (uhuiii...Sombong dikit boleh, khan?!). Bener! Sungguh! Hui ... katanya suruh banyak posting yang original! Yang jelas aku sudah coba browsing dan tak ketemukan satupun yang sama dengan "teknik & trik" yang coba aku gunakan. Tapi .., ya .. itu, nggak tahu klo browsingnya ada nyang kelewat. Oi ... namanya juga manusia, broer..., mas... mbak , bu..., mbah, kek..., ... mbuh sopo maneh... sik rung tak sebut!

Dengan cara baru ini semua menjadi terasa gampang, cepat dan bisa dilakukan siapa saja. Sebenarnya,sih, ada cara lain yang sangat-sangat simpel kode html-nya, tapi sayang di opera nggak support seperti di Safari, Crhome atau mozilla ... Yah ...tak apalah, sementara kita gunakan cara yang ini dulu. Yang penting sampeyan semua jadi lebih bisa berimprovisasi dengan gambar-gambar di blog (gambar posting dan yg lain).

D E M O

Gambar di atas dan yang di bawah ini salah satu contoh image yang dibuat menggunakan css3 border radius (rounded corners) dengan memainkan border radius dalam nilai persen (%). Dalam tutorial ini juga tak disertakan xHTMLnya karena semua kode tersedia di halaman demo.



Silahkan lihat contoh gambar lainnya melalui link demo di bawah ini:

DEMO: Klik untuk lihat demo lain beserta xHTML-nya!

Kode CSS

.PHpmitrabarayaL,.PHpmitrabarayaR,.PHpmitrabaraya{
      padding:1%; /* code by: mitrabaraya */
      background:#eee;
      box-shadow:0 0 10px #555;
}
.PHpmitrabarayaL{
      float:left;
      margin:5px 15px 5px 0;
}
.PHpmitrabarayaR{
      float:right;
      margin:5px 0 5px 15px;
}
.PHpmitrabaraya{
      margin:15px auto;
      display:block;
      text-align:center;
}

Cara menggunakan:

1. Simpan kode css di atas kode ]]></b:skin>
2. Untuk menampilkan image/gambar di blog gunakan kode html seperti yang terlihat di demo.
3. Untuk gambar di sebelah kiri (float:left;} gunakan class="PHpmitrabarayaL"
4. Untuk gambar di sebelah kanan (float:right;} gunakan class="PHpmitrabarayaR"
5. Untuk gambar di tengah gunakan class="PHpmitrabaraya"
6. Untuk merubah berbagai bentuk lengkungan image beserta sudut lengkungnya, rubah nilai border-radius dengan memperbesar atau memperkecil (dalam %).
7. Nilai persen (%) harus dengan kelipatan 10 karena diluar nilai tersebut tak akan bekerja (10%, 20%, 30% ... s/d 100%).
8. Jika background berwarna gelap, lakukan beberapa perubahan warna pada box-shadow, background dan border.
9. Panduan menyimpan kode css dapat anda buka di deret menu sebelah kiri blog (Special Tutorials).

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Update » Kemis WAGE, February, 29, 2012

» Happy Blogging - mitrabaraya «