Saturday, May 26, 2012

HTML5 & CSS3 Toggle SlideUp and SlideDown | TANPA JAVASCRIPT


HTML5 & CSS3 Toggle SlideUp and SlideDown | TANPA JAVASCRIPT


Script :

<!DOCTYPE html>
<!--[if lt IE 7 ]> <html class="ie ie6 no-js" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie ie7 no-js" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie ie8 no-js" lang="en"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie ie9 no-js" lang="en"> <![endif]-->
<!--[if gt IE 9]><!--><html class="no-js" lang="en"><!--<![endif]-->
<head>
<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>HTML5 & CSS3 Toggle SlideUp and SlideDown | TANPA JAVASCRIPT</title>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
 
    </head>
    <body>
        <div class="container">
<section>
                <div id="container_buttons">
<h1>
HTML5 & CSS3 Toggle SlideUp and SlideDown | TANPA JAVASCRIPT
</h1>
<div style="clear:both"></div>
<ul>
<li class="toggle">
<a href="#One">Cara Membuat Auto Readmore Dengan Style CSS Animasi Versi 2</a>
<p id="One">
Assalammu'alaikum Wr.Wb | Tidak Bosan Kami Kali ini TB4all Akan Memberitahu Bagaimana Cara Membuat Auto Readmore Dengan Style CSS Animasi Versi 2, Karena Sebelumnya Kami Sudah Memberitahu Cara Membuat Auto Readmore Dengan Style CSS Animasi,Tanpa Banyak Basa-Basi TB4all Akan Langsung Memberitahu Cara Membuat Auto Readmore Dengan Style CSS Animasi Versi 2.<a href="http://tb4all.blogspot.com/2012/05/cara-membuat-auto-readmore-dengan-style_24.html">Read more...</a>
</p>
</li>
<li class="toggle">
<a href="#Two">Triangle Breadcrumbs Dengan CSS</a>
<p id="Two">
Triangle Breadcrumbs Dengan CSS | Tidak Akan Membuat Berat Blog Karena Semua Ini Menggunakan CSS Bukan Gambar Atau Foto Apapun !  <a href="http://tb4all.blogspot.com/2012/05/triangle-breadcrumbs-dengan-css.html">Read more...</a>
</p>
</li>
<li class="toggle">
<a href="#Three">Simple and Nice Blockquote Dengan CSS</a>
<p id="Three">
 blockquote menampilkan dalam standar-compliant browser dengan "tanda kutip besar sebelum" efek, dan di IE dengan batas kiri tebal dan latar belakang abu-abu terang.
Tidak seperti teknik blockquote lain, gaya ini tidak memerlukan elemen blok-level element (seperti p). <a href="http://tb4all.blogspot.com/2012/05/simple-and-nice-blockquote-dengan-css.html">Read more...</a>
</p>
</li>
<li class="toggle">
<a href="#Four">Tabel Zebra Striping Dengan CSS</a>
<p id="Four">
Assalamu'alaikum | Kali ini Kami Akan Memberi Tahu Script Tabel Zebra Striping Dengan CSS <a href="http://tb4all.blogspot.com/2012/05/tabel-zebra-striping-dengan-css.html">Read more...</a>
</p>
</li>
<li class="toggle">
<a href="#Five">Transparan Inside Border Dengan CSS</a>
<p id="Five">
Assalamu'alaikum | Kali ini Kami Akan Memberi Tahu Script Border Transparan Dengan Menggunakan CSS <a href="http://tb4all.blogspot.com/2012/05/transparan-inside-border-dengan-css.html">Read more...</a>
</p>
</li>
</ul>
<em style="float: right;margin:10px 0;">Credits: <a href="tb4all.blogspot.com">Tutorial Blog For All</a></em>
                </div>
</section>
        </div>
    </body>
</html>


Selamat Mencoba ^_^, Jika Ada Yang Ingin Ditanyakan anda Bisa Komen Di Artikel Ini Dijamin 100000000% Kami Akan Membantu :D . 

Thursday, May 24, 2012

Cara Membuat Auto Readmore Dengan Style CSS Animasi Versi 2



Assalammu'alaikum Wr.Wb | Tidak Bosan Kami Kali ini TB4all Akan Memberitahu Bagaimana Cara Membuat Auto Readmore Dengan Style CSS Animasi Versi 2, Karena Sebelumnya Kami Sudah Memberitahu Cara Membuat Auto Readmore Dengan Style CSS Animasi,Tanpa Banyak Basa-Basi TB4all Akan Langsung Memberitahu Cara Membuat Auto Readmore Dengan Style CSS Animasi Versi 2.
Caranya :

1. Login Ke Akun Blogger Sobat
2. Masuk Ke Bagian Edit HTML
3. Lalu Pastekan Kode Dibawah ini Diatas kode ]]></b:skin>
span[class*="l-"] {height: 4px; width: 4px;background: #fff;display: inline-block;margin: 2px 2px;border-radius: 100%;-webkit-border-radius: 100%;-moz-border-radius: 100%;-webkit-animation: loader 4s infinite;-webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);-webkit-animation-fill-mode: both;-moz-animation: loader 4s infinite;-moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);-moz-animation-fill-mode: both;animation: loader 4s infinite;animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);animation-fill-mode: both;}span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;}span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}span.l-6 {-webkit-animation-delay: 0;animation-delay: 0;-ms-animation-delay: 0;-moz-animation-delay: 0;}@-webkit-keyframes loader {0% {-webkit-transform: translateX(-30px); opacity: 0;}25% {opacity: 1;}50% {-webkit-transform: translateX(30px); opacity: 0;}100% {opacity: 0;}}@-moz-keyframes loader {0% {-moz-transform: translateX(-30px); opacity: 0;}25% {opacity: 1;}50% {-moz-transform: translateX(30px); opacity: 0;}100% {opacity: 0;}}@-keyframes loader {0% {-transform: translateX(-30px); opacity: 0;}25% {opacity: 1;}50% {-transform: translateX(30px); opacity: 0;}100% {opacity: 0;}.tombol-readmore {clear:both;font-size: 14px;text-shadow: -0px 1px 1px black;}.loading:hover {-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 1);-moz-box-shadow: 0 1px 5px rgba(0,0,0,1);}.loading {line-height: 7px;margin: auto;text-align:center;width: 110px;color:#fff;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.6);border-bottom: 1px solid #333;border-left: 1px solid black;border-right: 1px solid #333;border-top: 1px solid black;background: -moz-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 12%, rgba(102, 102, 102, 1) 25%, rgba(71, 71, 71, 1) 39%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(17, 17, 17, 1) 60%, rgba(43, 43, 43, 1) 76%, rgba(28, 28, 28, 1) 91%, rgba(19, 19, 19, 1) 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76, 76, 76, 1)), color-stop(12%,rgba(89, 89, 89, 1)), color-stop(25%,rgba(102, 102, 102, 1)), color-stop(39%,rgba(71, 71, 71, 1)), color-stop(50%,rgba(44, 44, 44, 1)), color-stop(
51%,rgba(0, 0, 0, 1)), color-stop(60%,rgba(17, 17, 17, 1)), color-stop(76%,rgba(43, 43, 43, 1)), color-stop(91%,rgba(28, 28, 28, 1)), color-stop(100%,rgba(19, 19, 19, 1)));border-radius: 14px;-webkit-border-radius: 14px;-moz-border-radius: 14px;}
 4. Jika Sudah Lalu Cari Script Dibawah (yang mirip/sama) :
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Read More....</a></span>
5. Lalu Ganti Semua Script Diatas Dengan Script Pemanggil Dibawah Ini :
<div class='loading'><p class='tombol-readmore'><a expr:href='data:post.url'>Readmore</a></p><span class='l-1'/><span class='l-2'/><span class='l-3'/><span class='l-4'/><span class='l-5'/><span class='l-6'/></div>
6. Jika Sudah Save Template Dan Liat Readmorenya :D 

Selamat Mencoba ^_^ 

Wednesday, May 23, 2012

Triangle Breadcrumbs Dengan CSS



Triangle Breadcrumbs Dengan CSS


Example / Contoh :
CSS Triangle Breadcrumbs

Script :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Triangle Breadcrumbs</title>
<link rel="stylesheet" href="css/style.css">

<style>

.breadcrumb {
list-style: none;
overflow: hidden;
font: 18px Helvetica, Arial, Sans-Serif;
}
.breadcrumb li {
float: left;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 0 10px 55px;
background: brown; /* fallback color */
background: hsla(34,85%,35%,1);
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(34,85%,35%,1);
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
.breadcrumb li:first-child a {
padding-left: 10px;
}
.breadcrumb li:nth-child(2) a { background: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(2) a:after { border-left-color: hsla(34,85%,45%,1); }
.breadcrumb li:nth-child(3) a { background: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(3) a:after { border-left-color: hsla(34,85%,55%,1); }
.breadcrumb li:nth-child(4) a { background: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(4) a:after { border-left-color: hsla(34,85%,65%,1); }
.breadcrumb li:nth-child(5) a { background: hsla(34,85%,75%,1); }
.breadcrumb li:nth-child(5) a:after { border-left-color: hsla(34,85%,75%,1); }
.breadcrumb li:last-child a {
background: transparent !important;
color: black;
pointer-events: none;
cursor: default;
}
.breadcrumb li:last-child a:after { border: 0; }
.breadcrumb li a:hover { background: hsla(34,85%,25%,1); }
.breadcrumb li a:hover:after { border-left-color: hsla(34,85%,25%,1) !important; }

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script><script type="text/javascript" async="" src="//s3.buysellads.com/ac/bsa.js"></script><script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script type="text/javascript" id="_bsap_js_3469a2a501a9e18091036aa0c89f9dcb" src="http://s3.buysellads.com/r/s_3469a2a501a9e18091036aa0c89f9dcb.js?v=1337526000000" async="async"></script><style type="text/css" id="bsa_css">.one{position:relative}.one .bsa_it_ad{display:block;padding:15px;border:1px solid #e1e1e1;background:#f9f9f9;font-family:helvetica,arial,sans-serif;line-height:100%;position:relative}.one .bsa_it_ad a{text-decoration:none}.one .bsa_it_ad a:hover{text-decoration:none}.one .bsa_it_ad .bsa_it_t{display:block;font-size:12px;font-weight:bold;color:#212121;line-height:125%;padding:0 0 5px 0}.one .bsa_it_ad .bsa_it_d{display:block;font-size:11px;color:#434343;font-size:12px;line-height:135%}.one .bsa_it_ad .bsa_it_i{float:left;margin:0 15px 10px 0}.one .bsa_it_p{display:block;text-align:right;position:absolute;bottom:10px;right:15px}.one .bsa_it_p a{font-size:10px;color:#666;text-decoration:none}.one .bsa_it_ad .bsa_it_p a:hover{font-style:italic}</style></head>

<body>

<div id="demo-top-bar"><div id="demo-bar-inside"><h2 id="demo-bar-badge">CSS-Tricks Example</h2><div id="demo-bar-buttons"><a class="header-button" href="http://css-tricks.com">Back Home</a> <a class="header-button" href="http://css-tricks.com/downloads/">More Demos</a></div><div id="demo-bar-ad"><div id="bsap_1255488" class="bsap_1255488 bsap"><div class="bsa_it one"><div class="bsa_it_ad ad1 odd" id="bsa_2191829"><a href="http://stats.buysellads.com/click.go?z=1255488&b=2191829&g=&s=&sw=1024&sh=768&br=chrome,16,win&r=0.7188130607828498&link=http://www.slidedeck.com/?utm_source=adpacks&utm_medium=banner&utm_campaign=BSA" onmouseover="window.status = 'http://www.slidedeck.com/?utm_source=adpacks&utm_medium=banner&utm_campaign=BSA'; return true;" onmouseout="window.status=''; return true;" target="_blank"><span class="bsa_it_i"><img src="http://s3.buysellads.com/1255475/101692-1334103345.jpeg" width="130" height="100" alt="SlideDeck 2 is Here."></span></a><a href="http://stats.buysellads.com/click.go?z=1255488&b=2191829&g=&s=&sw=1024&sh=768&br=chrome,16,win&r=0.8269720473326743&link=http://www.slidedeck.com/?utm_source=adpacks&utm_medium=banner&utm_campaign=BSA" onmouseover="window.status = 'http://www.slidedeck.com/?utm_source=adpacks&utm_medium=banner&utm_campaign=BSA'; return true;" onmouseout="window.status=''; return true;" target="_blank"><span class="bsa_it_t">SlideDeck 2 is Here.</span><span class="bsa_it_d">29 million slider configurations, 12 dynamic content sources & 7 custom themes!</span></a><div style="clear:both"></div></div><span class="bsa_it_p"><a href="http://buysellads.com/buy/detail/1098/zone/1255488?utm_source=site_1098&utm_medium=website&utm_campaign=imagetext&utm_content=zone_1255488">ads by BSA</a></span></div></div><a href="http://adpacks.com" id="bsap_aplink">via Ad Packs</a></div></div></div>

<div id="page-wrap">

<h1>CSS Triangle Breadcrumbs</h1>

<ul class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Vehicles</a></li>
<li><a href="#">Vans</a></li>
<li><a href="#">Camper Vans</a></li>
<li><a href="#">1989 VW Westfalia Vanagon</a></li>
</ul>

</div>


</body>

</html>
Selamat Mencoba ^_^ , Jika ada Yang Ingin Ditanyakan Silahkan Komen Dibawah Postingan Ini / Di dalam Kotak Komentar :D

Tuesday, May 22, 2012

Simple and Nice Blockquote Dengan CSS



blockquote menampilkan dalam standar-compliant browser dengan "tanda kutip besar sebelum" efek, dan di IE dengan batas kiri tebal dan latar belakang abu-abu terang.
Tidak seperti teknik blockquote lain, gaya ini tidak memerlukan elemen blok-level element (seperti p).



blockquote {
background
:#f9f9f9;
border
-left:10px solid #ccc;
margin
:1.5em 10px;
padding
:.5em 10px;
quotes
:"\201C""\201D""\2018""\2019";
}
blockquote
:before {
color
:#ccc;
content
:open-quote;
font
-size:4em;
line
-height:.1em;
margin
-right:.25em;
vertical
-align:-.4em;
}
blockquote p
{
display
:inline;
}

Saturday, May 19, 2012

Tabel Zebra Striping Dengan CSS




Assalamu'alaikum | Kali ini Kami Akan Memberi Tahu Script Tabel Zebra Striping Dengan CSS





Tabel Zebra Striping Dengan CSS


Cara Membuat Tabel Zebra Striping Dengan CSS , Tidak Ribet Tinggal Kopas Script Doang ^_^. 


Selamat Mencoba dan Good Luck ^_^

Example / Contoh :
No :     
Posting Sebelumnya
1.
Transparant Inside Border Dengan CSS
2.
    Cara Membuat Logo SearchBox dan Lencana Profile Bersatu Dengan CSS          


HTML :
<table>
<tr valign="top" class="odd">
<td>No .</td>
<td>Posting Sebelumnya</td>
</tr>
<tr valign="top">
<td>1.</td>
<td>Transparant Inside Border Dengan CSS</td>
</tr>
<tr valign="top" class="odd">
<td>2.</td>
<td>Cara Membuat Logo SearchBox dan Lencana Profile Bersatu Dengan CSS</td>
</tr>
</table>
CSS :
tr.odd {
background-color: #99ff99;
}

Transparan Inside Border Dengan CSS



Assalamu'alaikum | Kali ini Kami Akan Memberi Tahu Script Border Transparan Dengan Menggunakan CSS





Transparan Inside Border Dengan CSS


Cara Membuat Transparan Inside Border Dengan CSS , Tidak Ribet Tinggal Kopas Script Doang ^_^. 


Selamat Mencoba dan Good Luck ^_^

Contoh :
Example / Contoh Border Transparan Dengan CSS
 ​HTML : (Bisa Di Bilang Kode Pemanggilnya)

<div class="inner-border">
    Transparent Inside Border
</div>
CSS : (Bisa Di Bilang Kode Stylenya)


.inner-border {
    background: #000;
    color: #fff;
    margin: 50px;
    padding: 15px;
    position: relative;
}
.inner-border:before {
    border: 5px solid #000;
    content: "";
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
}



Sekial Dan Terima Kasih Wassalamu'alaikum

Friday, May 18, 2012

Cara Membuat Logo SearchBox dan Lencana Profile Bersatu Dengan CSS






Assalammu'alaikum Wr.Wb | Tidak Bosan Kami Kali ini TB4all Akan Memberitahu Bagaimana Cara Membuat Tombol Like Facebook Mengikuti Kursor,Tanpa Banyak Basa-Basi TB4all Akan Langsung Memberitahu Cara Membuat Tombol Like Facebook Mengikuti Kursor.
Caranya :
1. Login Ke Akun Blogger Sobat
2. Pergi Ke Bagian Edit HTML
3. Pasang Script CSS Dibawah :

#menu {
background-color: #212121;
height: 61px;
width: auto;
}
#logo {
float: left;
margin-left: 0;
width: 461px;
}
#searchbox {
float: right;
height: 61px;
width: 374px;
margin-right: 60px;
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNT205aG1IYGuR_tJrPDL3hq7uJdZALPl8Ocz0k4AsQU8p6wTL8Y9qFYn6xDtY3lHkT1xD6rGo-_OC_u1L851BiFQmmmn6Njcmtw4rsIxlUCxeUas53YeEtE0lh9rv2vzZaJ0w9VaQI1c/s1600/searchbg.png");
background-repeat: no-repeat;
}
#huruf {
background: none repeat scroll 0 0 transparent;
border: medium none;
color: #CCCCCC;
height: 21px;
left: 20px;
position: relative;
top: 18px;
width: 331px;
}
#penulis {
background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje0PbyagfftjzFXOdYuWFOx8gBTpcQVykWlFmF5BYVr6kyNKRmrN4EilG9V_bH-98HBvlqNu5mKvVw-h2lH1ZE2gyWeDQgzYIrc1cQUjoG9b-5HuiUNf1JTKRd6L-TZ_33zr-EMQSnLkg/s1600/penulis+(1).png");
background-repeat: no-repeat;
float: right;
height: 96px;
position: relative;
right: 65px;
width: 372px;
}
Tepat Dibawah Script :

/* Header
-----------------------------------------------
*/

4. Terus Cari Kode <head> Lalu Pasang Script Dibawah Tepat Dibawah Kode <head>
<div id='menu'>
<div id='logo'><a href='http://tb4all.blogspot.com/' title='TB4all Community | All About Tutorial'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3KbgSfr0yTQhTgd_xhigU5WNGR3xRn6juM7zQv2ILxwW9gIJcUtk9DwxKsCE6gnDVSAGXkWwMBZkWuy5Ll-RgYh_fZj2yZdcQhyicJ7ZzSeY_n1HSs7MxG_gYRHDzWLjs2FPqP29VVz4/s1600/Logo.jpg' height="57"/></a></div>
<div id='searchbox'>
<form action='http://tb4all.blogspot.com/search' method='get'><input id='huruf' name='text' type='text' value='Search Here.....'/>
</form>
</div>
</div>
<div id='penulis'></div>

5. Jika Sudah Save Template Dan Lihat Apa Yang Tejadi ... Blog Sobat Memiliki Lencana ^_^
Keterangan : ==> Ganti Link Logo https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3KbgSfr0yTQhTgd_xhigU5WNGR3xRn6juM7zQv2ILxwW9gIJcUtk9DwxKsCE6gnDVSAGXkWwMBZkWuy5Ll-RgYh_fZj2yZdcQhyicJ7ZzSeY_n1HSs7MxG_gYRHDzWLjs2FPqP29VVz4/s1600/Logo.jpg Dengan Link Logo Sobat Ingat Ukuran Harus Sama Klo Gk Meleber Nanti !==> Ganti Link Seacrhbox http://tb4all.blogspot.com/search Dengan Link Search Sobat ! Contoh www.URL-BLOGSOBAT.blogspot.com/search==> Ganti Link Lencana https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEje0PbyagfftjzFXOdYuWFOx8gBTpcQVykWlFmF5BYVr6kyNKRmrN4EilG9V_bH-98HBvlqNu5mKvVw-h2lH1ZE2gyWeDQgzYIrc1cQUjoG9b-5HuiUNf1JTKRd6L-TZ_33zr-EMQSnLkg/s1600/penulis+(1).png Dengan Link Lencana Sobat Ingat Ukuran Harus Sama !
Jika Ada Yang Tidak Di Mengerti Sama Sobat Monggo Silahkan Comment Di Bawah Dan Kami Akan Membantu Sobat-Sobat Sekalian !^_^ dan Selamat Mencoba !
Contoh :


Effect Jait Dengan CSS



Effect Jait Dengan Menggunakan Style CSS


Selamat Mencoba Dan Terima Kasih Sudah Berkunjung Ke Blog Kami Yang Sederhana Ini ^_^

Example or Contoh :
Example / Contoh !
CSS :
.stitched
     padding: 5px 10px; 
     margin: 10px; 
     background: #ff0030; 
     color: #fff; 
     font-size: 21px; 
     font-weight: bold; 
     line-height: 1.3em; 
     border: 2px dashed #fff; 
     border-top-left-radius: 3px; 
     -moz-border-radius-topleft: 3px; 
     -webkit-border-top-left-radius: 3px
     border-bottom-right-radius: 3px
     -moz-border-radius-bottomright: 3px
     -webkit-border-bottom-right-radius: 3px
     border-top-right-radius: 3px
     -moz-border-radius-topright: 3px
     -webkit-border-top-right-radius: 3px
     -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5); 
     -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5); 
     box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5); 
     text-shadow: -1px -1px #aa3030; 
     font-weight: normal
}

Google Penguin and Google Panda Penalty


Assalamu'alaikum Aahahahah Pake Bahasa Inggriss :D | As we all know, Google is a pioneer, and the world leader in internet search. It owns around 2/3rd (66%) of the shares in the industry at the time of this writing, making it bigger than any other internet company. It has been around for quite some time now, and has been updating its search functionality regularly. Since the past few years though, we have seen some radical changes in its search model. For example, it was only last year that the dreaded Panda update was unleashed onto the world! And these days, everyone is talking about the new Penguin update that rolled out just a few days back. Head of Google's web-spam team, Matt Cutts tweeted a picture of a stuffed penguin along with a stuffed panda. How cute :). Or is it?

Some people would agree. But many will say quite the contrary. These animals are supposed to give out a friendly image about the updates. They are monsters in disguise though! Many websites have been punished and penalized by these two. So what actually are they all about? And how do they effect websites?

So why are these updates needed?

If this is about any one thing, it's about Quality Content vs Search Engine Optimization(SEO). The concept of SEO has evolved ever since search engines like Google have come along. SEO is good. It allows you to take your website ranking to a higher level. But that's precisely where the problem lies. You see, it provides a shortcut where you can skip writing quality content, and still be able to take the low quality content to a high ranking. In late 90s and early 2000s, when Google was still newborn, some webmasters started doing just that. They would spare themselves the trouble of writing good quality content, which brought their poor quality content to the top.
Through he years, search engine optimizers kept at it. Google has been constantly improving its search module, but these people learned to duck and dodge everything Google had to throw at them. Fundamentally, this practice defeats the basic goal of Google, which is to provide good quality content to readers, instead of bogus websites that spam the web and gain the high ground in SERPs (Search Engine Results Pages). Hence, the need for an advanced screening mechanism which would let quality through but not spam content.


Although Google has been implementing such a filter throughout the past few years, it only rolls out major algorithm updates once a year. Google Panda was just such an update last year. And may I say, it was the deadliest update yet. The major update for this year is the Google Penguin update, and it looks relatively less harmful than Panda, although it still has effected a lot of websites. So basically, these updates are aimed at promoting quality and filtering out spam.

Google Panda

Google unleashed the Panda on Feb 24 2011. And immediately, it made its mark and hit so many blogs and websites that the entire ranking structure was shaken, with new websites coming at the top while some old established websites dipping down. According to Google, it was aimed at filtering "thin or low quality content". Since its launch, Google have made changes to it 13 times as of 20th April 2012. And a total of 12% websites have been effected by this update.
Google panda

Google Penguin


Google Penguin is another installment in Google's arsenal of weapons to be unloaded onto the online world. This was introduced on 24th April 2012. Again, it aimed at discouraging / punishing spam websites. By far, it has effected about 3% of the websites. Prior to its release, Google said;

In the next few days, we’re launching an important algorithm change targeted at web spam. The change will decrease rankings for sites that we believe are violating Google’s existing quality guidelines. We’ve always targeted web spam in our rankings, and this algorithm represents another improvement in our efforts to reduce webspam and promote high quality content. While we can’t divulge specific signals because we don’t want to give people a way to game our search results and worsen the experience for users, our advice for webmasters is to focus on creating high quality sites that create a good user experience and employ white hat SEO methods instead of engaging in aggressive webspam tactics.
Google Penguin

Panda and Penguin penalty

Once again, these updates are aimed at punishing spam websites, although there could be a lot more reasons for the updates to hit your site. Sites that are hit have seen a demotion in their Google PageRank, and their traffic has dipped, while sites that have benefited from this update have seen a soar in their traffic. The saying "One man's gain is another man's loss" never seemed more appropriate.

Why have you been effected?

There can be many reasons why you got hit. But the exact factors are known only to Google insiders. Google doesn't disclose this information, because if they do, search engine optimizers would grab on to those points and cheat Google once again. So Google does not give out the precise details, thank you very much. Here are, however, some probable causes as to why you took a hit.
  • Over optimization
  •  - This is very important. People who don't have quality content over optimize their websites. So you should do what is necessary, and no more!
  • High keyword density
  •  - This is like calling out loud to search engines; "check me! check me! I have the most keywords!". And they don't like it when you call them. Using excessive keywords is also a form of spamming, since you are seeking for search engines' attention. In the past, pages were ranked according to the number of keywords they had. Not anymore though. Always keep that in mind.
  • Virus and malware
  •  - People simply hate it when they land on a website infected with a virus. And so does Google. Having a virus on your site, or even having too many spam or bot scripts can trigger the alarm bells for Google. Please review your website regularly from now on.
  • Lack of user experience
  •  - Now this is very crucial, and Google has been stressing on this a lot lately. Pleasing the search engine is one thing. Pleasing the visitors is another. Even with adequate SEO, a website that lacks a good user experience might have been hit by Google.
  • Duplicate / copied content
  •  - Yeah you think you are making things easier for yourself when copying content, but actually, you aren't. In fact, quite the contrary, you are axing your own feet. Google hates it when it finds duplicate content on your website. Never copy from another source, and never use redundant content.
  • High Bounce Rate
  •  - Make sure to reduce the number of banners and other heavy graphics as much as possible to make sure your site loads faster. Slow loading blogs are hated by visitors and so by Google. Do not reduce the size of the page so much that it may begin looking dull and grey. Be creative yet smart!
These were some of the tips we had for you. This is the first post in a series that looks into these updates from Google in more detail. We will discuss reasons for failure (in more detail), how to avoid them, and best practices. We also hope to prepare you for the next major Google update. So stay tuned, and give us your feedback in the comment section below. Peace :)

Thank You For Your Visit My Blog ^_^