Created (c) by Princexells Seyka (Princelling Saki)

Minggu, 28 April 2013

Auto Read More Dengan Thumbnail No Image Di Blogger





1. Masuk ke Account Blog sobat
2. Lalu Go to Template --> EDIT HTML
3. Kemudian Cari Kode </head>, Tekan CTRL + F untuk mempermudah Pencarian
4. Copy kode di bawah ini sebelum kode </head>


 <script type='text/javascript'>
 // ganti angka dibawah untuk mengatur jumlah karakter
 summary_noimg = 350;
 summary_img = 280;

 // ganti angka dibawah untuk merubah ukuran thumbnail
 img_thumb_height = 200;
 img_thumb_width = 200;

 // ganti dengan gambar sesuai selera anda
 img_thumb_nosrc = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8PGsT7-puSAkHKSfXs_M2PJMmCtOctQkopU33Gi-rncz3YeEexArlR2TxQNJDM30on-3Yj-8TMUNH6iAMT4gdBZ36mTnexW-Kty3YB96ydfGN5jlM_FaKekQ4yil_EJjRi2W3RGqoboXC/s1600/default.png";
</script>

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

 function removeHtmlTag(strx,chop){
  if(strx.indexOf("<")!=-1)
  {
   var s = strx.split("<");
   for(var i=0;i<s.length;i++){
    if(s[i].indexOf(">")!=-1){
     s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
    }
   }
   strx =  s.join("");
  }
  chop = (chop < strx.length-1) ? chop : strx.length-2;
  while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
  strx = strx.substring(0,chop-1);
  return strx+'...';
 }

 function createSummaryAndThumb(pID){
  var div = document.getElementById(pID);
  var imgtag = "";
  var img = div.getElementsByTagName("img");
  var summ = summary_noimg;

  // this block of code is used to add default thumbnail to post without images
  if(img.length<=1) {
   imgtag = '<div style="clear:both; margin:0 10px 10px 0px;float:left;"><img src="'+img_thumb_nosrc+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';
   summ = summary_noimg;
  }

  if(img.length>=1) {
   imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
   summ = summary_img;
  }

  var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
  div.innerHTML = summary;
 }

 //]]>
</script> 

5. Klik Simpan Template

Dan lihat hasilnya...
semoga bermanfaat untuk Sobat...
Read More ->>

PERINTAH JOIN MENGGUNAKAN SYNTAX JOIN ANSI / SQL



1. Equi Joi
     merupakan Join yang menggunakan tanda equal (=) untuk membandingkan Operatornya.

Contoh :
     Select employee_id, department_id, department_name
      From employees
      JOIN departments ON      
      employees.department_id=departments.department_id;

2. Non Equi Join
    Join antara dua tabel menggunakan tanda selain = seperti <,>,between dan tanda
    penghubung lain.

Contoh :
    Select first_name, salary, jobs.jobs_title, jobs.min_salary,
    jobs.max_salary
    From employees
    JOIN ON jobs ON employees.salary between jobs.min_salary
    and  jobs.max_salary
    Order by employees.first_name;

Kondisi join dan jenis join Berdasarkan Data yang dihasilkan :

1.  INNER JOIN
Penggabungan tabel dalam perintah SQL menggunakan keyword JOIN.Jenis penggabungan tabel yang pertama adalah INNER JOIN. INNER JOIN hanya menampilkan data yang benar-benar terdapat di dalam tabel yang saling dihubungkan.
   Sintax dari SQL INNER JOIN :
   SELECT column_name(s)
   FROM table_name1
   INNER JOIN table_name2
   ON table_name1.column_name=table_name2.column_name
  Catatan : INNER JOIN sama dengan JOIN.

2.LEFT JOIN
Misalkan pada contoh diatas digunakan perintah LEFT JOIN maka apabila tabel name disebutkan terlebih dahulu SQL Server akan menampilkan semua name yang terdapat di table tersebut.
  Sintax dari SQL LEFT JOIN :
  SELECT column_name(s)
  FROM table_name1
  LEFT JOIN table_name2
  ON table_name1.column_name=table_name2.column_name
  Catatan : dalam beberapa database LEFT JOIN disebut juga dengan LEFT OUTER JOIN.

3.RIGHT JOIN
 Menampilkan data dengan mengacu pada tabel yang ada disebelah kanan.
   Sintax dari SQL RIGHT JOIN :
   SELECT column_name(s)
   FROM table_name1
   RIGHT JOIN table_name2
   ON table_name1.column_name=table_name2.column_name
   Catatan : dalam beberapa database RIGHT JOIN disebut juga dengan RIGHT OUTER JOIN.

4.FULL JOIN
Jenis join terakhir adalah FULL JOIN yang menampilkan semua data dari dua tabel yang dihubungkan meskipun terdapat perintah berikut :
  Sintax dari SQL FULL JOIN :
  SELECT column_name(s)
  FROM table_name1
  FULL JOIN table_name2
  ON table_name1.column_name=table_name2.column_name

5.SELF JOIN
Join yang dilakukan antar kolom dalam satu tabel.
 Syntax dari SELF JOIN :
 Select pegawai.first_name as pegawai, manager.first_name as manager
 From employees pegawai
 INNER JOIN  employees manager ON pegawai.manager_id=manager.employee.id;

6.CROSS JOIN
 CROSS JOIN identik dengan INNER JOIN pada MySQL 5.0. Pembahasannya sama dengan INNER JOIN sehingga tidak diulangi lagi disini.
 Sintax dari SQL CROSS JOIN :
 SELECT ms_cabang.nama_cabang,
  ms_kota.nama_kota,
  ms_propinsi.nama_propinsi
   FROM
     ms_cabang
   CROSS JOIN
     ms_kota ON ms_cabang.kode_kota = ms_kota.kode_kota
   CROSS JOIN
     ms_propinsi ON ms_kota.kode_propinsi = ms_propinsi.kode_propinsi

7.EQUI JOIN
 EQUI JOIN adalah jenis tertentu dari komparator berbasis join, yang hanya menggunakan perbandingan kesetaraan dalam predikat join. Menggunakan operator perbandingan lainnya (seperti <) mendiskualifikasi bergabung sebagai equi-join.
 Permintaan yang ditampilkan di atas telah memberikan contoh dari EQUI JOIN :
  SELECT *
  FROM employee
  JOIN department ON employee.DepartmentID = department.DepartmentID;
  EQUI JOIN bisa ditulis sebagai berikut :
  SELECT * FROM employee, department WHERE employee.DepartmentID = department.DepartmentID;

8. OUTER JOIN
- Left Outer Join : Menampilkan semua data yang ada di tabel kiri dan hanya data yangbersesuaian di tabel kanan, jika tabel kiri tidak mempunyai lawan di tabel kanan maka tab el kanan akan diisi dengan null.
Contoh :
 Select first_name, department_name
From employees
LEFT OUTER JOIN departments ON employees.department_id=departments.department_id;
- Right Outer Join : Menampilkan semua data yang ada di tabel kanan dan hanya data yang bersesuaian di tabel kiri, jika tabel kanan tidak mempunyai lawan di tabel kiri maka tabel kiri akan diisi dengan null.
 Contoh :
 Select first_name, department_name
 From employees
 RIGHT OUTER JOIN departments ON employees.department_id=departments.department_id;

9.NATURAL JOIN
membandingkan semua kolom di kedua tabel yang memiliki kolom yang sama-nama dalam tabel bergabung. Tabel bergabung dihasilkan hanya berisi satu kolom untuk setiap pasangan kolom sama bernama.
 Permintaan contoh di atas untuk inner joins dapat dinyatakan sebagai natural join dengan cara berikut:
SELECT *
FROM employee
NATURAL JOIN department;
Read More ->>

Jumat, 19 April 2013

CSS3 Animasi Button


button 




Tampilan terbaik dapat dirasakan dengan browser Goggle chrome karena 100%
mendukung css3 animasi.sedangkan untuk Mozilla firefox tidak.akibat'a kalau
dibuka dengan Mozilla,mungkin akan terasa berat dan animasinya agak ngadet",
jadi pikir" dahulu untuk menggunakan trik ini.so,yang mau coba" belajar css3 keyframe,silakan
dicoba"~xD

Penerapannya letakkan CSS diatas ]]></b:skin>
HTML merupakan kode pemanggilnya

 Style 1 CSS

.circlewrapper {
    width: 98px;
    height: 98px;
    float: right;
    font-size: 14px;
    text-align: center;
    text-shadow: 0 1px 1px black;
    }


    .circle {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(255,0,0,0.9);
    opacity:.9;
    border-right:5px solid rgba(0,0,0,0);
    border-left:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 35px #ff0000;
    width:70px;
    height:70px;
    margin:0 auto;
    -moz-animation:spin1Pulse 1s infinite ease-in-out;
    -webkit-animation:spin1Pulse 1s infinite linear;
    }
    .circle1 {
    background-color: rgba(0,0,0,0);
    border:5px solid rgba(255,0,0,0.9);
    opacity:.9;
    border-left:5px solid rgba(0,0,0,0);
    border-right:5px solid rgba(0,0,0,0);
    border-radius:50px;
    box-shadow: 0 0 15px #ff0000;
    width:50px;
    height:50px;
    margin:0 auto;
    position:relative;
    top:-70px;
    -moz-animation:spin2Pulse 1s infinite linear;
    -webkit-animation:spin2Pulse 1s infinite linear;
    }


    .circle2 {
    background-color: transparent;
    border: 5px solid rgba(255, 0, 0, 0.9);
    opacity: .9;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-radius: 50px;
    box-shadow: 0 0 15px #ff0000;
    width: 90px;
    height: 90px;
    margin: 0 auto;
    position: relative;
    top: -150px;
    text-align: center;
    line-height: 90px;
    }


    @-moz-keyframes spin1Pulse {
    0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
    50% { -moz-transform:rotate(145deg); opacity:1;}
    100% { -moz-transform:rotate(-320deg); opacity:0;}
    }
    @-moz-keyframes spin2Pulse {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(360deg);}
    }
    @-webkit-keyframes spin1Pulse {
    0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;}
    50% { -webkit-transform:rotate(145deg); opacity:1;}
    100% { -webkit-transform:rotate(-320deg); opacity:0;}
    }
    @-webkit-keyframes spin2Pulse {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(360deg);}
    }


HTML

<div class="circlewrapper">
    <div class="circle"></div>
    <div class="circle1"></div>
    <div class="circle2">
    <a expr:href='#'>DEMO</a>
    </div></div>


Style 2
CSS

.circlebg {
width: 53px;
height: 53px;
position: relative;
border-radius: 50px;
-moz-animation: spin3Pulse 3s infinite ease-in-out;
-webkit-animation: spin3Pulse 3s infinite linear;
}


.circlewrapper2 {
width: 53px;
height: 53px;
text-align: center;
border-radius: 50px;
border: 3px solid rgba(0, 0, 0, 0.9);
padding: 8px;
background: -webkit-radial-gradient(center, ellipse cover, #D41B00 5%,#570401 74%);
background: -moz-radial-gradient(center, ellipse cover, #D41B00 5%,#570401 74%);
}


.circlewrapper3 {float:right;}


.circlewrapper3 a {
width: 78px;
height: 78px;
float: right;
font-size: 14px;
text-align: center;
border-radius: 50px;
text-shadow: 0 1px 1px black;
margin-top: -50px;
position: absolute;
line-height: 20px;
}


.circle4 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
}




.circle5 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: -51.5px;
-webkit-transform: rotate(225deg);
-moz-transform: rotate(225deg);
}


.circle6 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: -103.5px;
}


.circle7 {
background-color: transparent;
border: 1px solid rgba(0, 0, 0, 1);
opacity: .9;
border-top-right-radius: 50px;
border-bottom-left-radius: 50px;
width: 50px;
height: 50px;
margin: 0 auto;
position: relative;
top: -155px;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
}




@-moz-keyframes spin3Pulse {
0% { -moz-transform:rotate(360deg); }
100% { -moz-transform:rotate(0deg);}
}
@-webkit-keyframes spin3Pulse {
0% { -webkit-transform:rotate(360deg);}
100% { -webkit-transform:rotate(0deg); }
}


HTML

<div class="circlewrapper3">
<div class="circlewrapper2">
<div class="circlebg">
<div class="circle4"></div>
<div class="circle5"></div>
<div class="circle6"></div>
<div class="circle7"></div>
</div></div>
<a expr:href='#'>DEMO</a>
</div>


Style 3
CSS

.menureadmore1 {
clear: both;
margin:auto;
background: black;
font-size: 15px;
color: #32BDE8;
height: 80px;
width: 80px;
line-height: 80px;
text-align: center;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
border: 8px solid 
rgba(255, 255, 255, 0.8 );
-webkit-box-shadow: 0 1px 4px 
rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;}


.menureadmore1::before {
content: "";
position: absolute;
width: 125px;
margin: auto;
height: 125px;
border: 8px solid 
rgba(255, 255, 255, 0.8 );
-webkit-box-shadow: 0 1px 4px 
rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-webkit-border-radius: 12px;
-moz-border-radius: 120px;
border-radius: 120px;
display: block;
margin-top: -30px;
margin-left: -30px;
}


.animasimenureadmore1 {
position: absolute;
width: 105px;
margin: auto;
height: 105px;
border: 8px dotted rgba(50, 189, 232, 0.8 );
-webkit-box-shadow: 0 1px 4px 
rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-webkit-border-radius: 12px;
-moz-border-radius: 120px;
border-radius: 120px;
display: block;
margin-top: -100px;
margin-left: -20px;
-moz-animation:spin5Pulse 2s infinite linear;
-webkit-animation:spin5Pulse 2s infinite linear;
}


@-moz-keyframes spin5Pulse {
0% { -moz-transform:rotate(0deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% {opacity:1;}
100% { -moz-transform:rotate(-360deg); opacity:0;}
}
@-webkit-keyframes spin5Pulse {
0% { -webkit-transform:rotate(0deg); opacity:0; box-shadow:0 0 1px #ff0000;}
50% {opacity:1;}
100% { -webkit-transform:rotate(-360deg); opacity:0;}
}


HTML

<div class='menureadmore1'>
    <a expr:href='#'>DEMO</a>
    <div class='animasimenureadmore1'/>
    </div>
Read More ->>

Kamis, 18 April 2013

Menu Navigasi CSS3 + Icon

Menu+Navigasi+CSS3+++Icon 



Membuat Menu Navigasi CSS3 + Icon

Langkah 1
  • Login ke Blogger
  • Masuk ke "Rancangan - Edit HTML"
  • Back Up template Anda untuk berjaga-jaga apabila terjadi kesalahan
  • Kemudian Cheklist "Expand Template Widget"
Langkah 2
  • Gunakan ctrl F untuk mencari kode ]]></b:skin>
  • setelah ketemu lalu letakkan kode dibawah ini diatasnya

/* universal rules for content inside topnav */
.topnav{width:100%;float:left;margin:2em auto;}
ul#css3menu1,ul#css3menu1 ul{margin:0;list-style:none;}
ul#css3menu1,ul#css3menu1 .submenu{ background-color:#444;border-width:1px;border-style:solid;border-color:#454545;-moz-border-radius:9px;-webkit-border-radius:9px;border-radius:9px;}
ul#css3menu1 .submenu{ display:none;position:absolute;left:0;top:100%;float:left;background-color:#fff;border-width:4px;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px;border-color:#cecece;padding:0 6px 6px;}
ul#css3menu1 li:hover>*{display:block;}
ul#css3menu1 li:hover{position:relative;}
ul#css3menu1 ul .submenu{position:absolute;left:100%;top:0;}
ul#css3menu1{padding:5px 5px 5px 0;display:block;font-size:0;float:left;}
ul#css3menu1 ul{padding:0 5px 5px;}
ul#css3menu1 .column{float:left;}
ul#css3menu1 li{display:block;white-space:nowrap;font-size:0;float:left;}
ul#css3menu1>li,ul#css3menu1 li{margin:0 0 0 5px;}
ul#css3menu1 ul>li{margin:5px 0 0;}
ul#css3menu1 a:active, ul#css3menu1 a:focus{outline-style:none;}
ul#css3menu1 a{display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 13px Trebuchet MS,sans-serif;color:#181818;text-shadow:#FFF 0 1px 1px;cursor:pointer;padding:8px 18px;background-color:;background-repeat:repeat;border-width:0px;border-style:none;border-color:;}
ul#css3menu1 ul li{float:none;margin:6px 0 0;}
ul#css3menu1 ul a{text-align:left;padding:4px;background-color:#fff;background-image:none;border-width:0 0 1px 0;border-style:solid;border-color:#EFEFEF;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:11px Trebuchet MS,sans-serif;color:#000;text-decoration:none;text-shadow:#FFF 0 0 0;}
ul#css3menu1 li:hover>a{border-style:none;font:bold 13px Trebuchet MS,sans-serif;color:#FFF;text-decoration:none;text-shadow:#181818 0 1px 1px;}
ul#css3menu1 img{border:none;vertical-align:middle;margin-right:8px;}
ul#css3menu1 img.over{display:none;}
ul#css3menu1 li:hover > a img.def{display:none;}
ul#css3menu1 li:hover > a img.over{display:inline;}
ul#css3menu1 span{display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;}
ul#css3menu1 ul span{background-image:url(http://css3menu.com/images/modern_files/css3menu1/arrowsub.png);padding-right:20px;}
ul#css3menu1 ul li:hover>a{background-color:#fff;background-image:none;border-style:solid;border-color:#EFEFEF;font:11px Trebuchet MS,sans-serif;color:#444;text-decoration:none;text-shadow:#FFF 0 0 0;}
ul#css3menu1.topmenu{background-image:url(http://css3menu.com/images/modern_files/css3menu1/mainbk.png);}
ul#css3menu1 li.topmenu>a{height:25px;line-height:25px;background-color:transpa;border-radius:11px;-moz-border-radius:11px;-webkit-border-radius:11px;}
ul#css3menu1 li.topmenu:hover>a{line-height:25px;background-color:#313638;}
 /* ======================end topnav=============================   */

Langkah 3
Setelah itu letakkan kode dibawah ini pada Header Blog atau pada <body> dan jika di template anda ada kode <div id='outer-wrapper'> maka letakkan pada bagian itu

<div class="topnav"><!--menu navigation-->
      <div class="menu_templ" style="width: 612px;background-color:#5797BB;margin:0 auto;">    
<ul id="css3menu1" class="topmenu" style="position: relative;top: -30px">
 <li class="topmenu"><a href="#" title="HOME"><img src="http://css3menu.com/images/modern_files/css3menu1/1031.png" alt="HOME"/>HOME</a></li>
 <li class="topmenu"><a href="#" title="PRODUCT INFO"><span><img src="http://css3menu.com/images/modern_files/css3menu1/005.png" alt="PRODUCT INFO"/>PRODUCT INFO</span></a>
 <div class="submenu" style="width:420px;">
 <div class="column" style="width:50%"><ul>
  <li><a href="#" title="2.1 Features"><img src="http://css3menu.com/images/modern_files/css3menu1/138.png" alt="2.1 Features"/>2.1 Features</a></li>
  <li><a href="#" title="2.2 Installation"><span><img src="http://css3menu.com/images/modern_files/css3menu1/076.png" alt="2.2 Installation"/>2.2 Installation</span></a>
  <div class="submenu">
  <div class="column"><ul>
   <li><a href="/rq/" title="2.2.1 FAQ">2.2.1 FAQ</a></li>
   <li><a href="#" title="2.2How to Setup">2.2How to Setup</a></li>
  </ul></div></div>

  </li>
  <li><a href="#" title="2.3 Parameters Info"><img src="http://css3menu.com/images/modern_files/css3menu1/120.png" alt="2.3 Parameters Info"/>2.3 Parameters Info</a></li>
 </ul></div>
 <div class="column" style="width:50%"><ul>
  <li><a href="#" title="2.4 Dynamic Functions"><img src="http://css3menu.com/images/modern_files/css3menu1/157.png" alt="2.4 Dynamic Functions"/>2.4 Dynamic Functions</a></li>
  <li><a href="#" title="2.5 Supported Browsers"><span><img src="http://css3menu.com/images/modern_files/css3menu1/102.png" alt="2.5 Supported Browsers"/>2.5 Supported Browsers</span></a>
  <div class="submenu" style="width:332px;">
  <div class="column" style="width:50%"><ul>
   <li><a href="#" title="Firefox"><img src="http://css3menu.com/images/modern_files/css3menu1/125.png" alt="Firefox"/>Firefox</a></li>
   <li><a href="#" title="Internet Explorer"><img src="http://css3menu.com/images/modern_files/css3menu1/122.png" alt="Internet Explorer"/>Internet Explorer</a></li>
   <li><a href="#" title="Opera"><img src="http://css3menu.com/images/modern_files/css3menu1/124.png" alt="Opera"/>Opera</a></li>
  </ul></div>
  <div class="column" style="width:50%"><ul>
   <li><a href="#" title="Safari"><img src="http://css3menu.com/images/modern_files/css3menu1/1221.png" alt="Safari"/>Safari</a></li>
   <li><a href="#" title="Google Chrome"><img src="http://css3menu.com/images/modern_files/css3menu1/123.png" alt="Google Chrome"/>Google Chrome</a></li>
   <li><a href="#" title="Konqueror"><img src="http://css3menu.com/images/modern_files/css3menu1/1241.png" alt="Konqueror"/>Konqueror</a></li>
  </ul></div></div>
  </li>
  <li><a href="#" title="CSS3 Info"><img src="http://css3menu.com/images/modern_files/css3menu1/044.png" alt="CSS3 Info"/>CSS3 Info</a></li>
 </ul></div></div>
 </li>
 <li class="topmenu"><a href="#" title="SAMPLES"><span><img src="http://css3menu.com/images/modern_files/css3menu1/133.png" alt="SAMPLES"/>SAMPLES</span></a>
 <div class="submenu" style="width:344px;">
 <div class="column" style="width:50%"><ul>
  <li><a href="#" title="Android Template"><img src="http://css3menu.com/images/modern_files/css3menu1/047.png" alt="Android Template"/>Android Template</a></li>
  <li><a href="#" title="Blocks Template"><span><img src="http://css3menu.com/images/modern_files/css3menu1/045.png" alt="Blocks Template"/>Blocks Template</span></a>
  <div class="submenu" style="width:374px;">
  <div class="column" style="width:50%"><ul>
   <li><a href="#" title="Blue Theme">Blue Theme</a></li>
   <li><a href="#" title="Green Fodder Theme">Green Fodder Theme</a></li>
   <li><a href="#" title="Grey Theme">Grey Theme</a></li>
  </ul></div>
  <div class="column" style="width:50%"><ul>
   <li><a href="#" title="Light Theme">Light Theme</a></li>
   <li><a href="#" title="Orange Theme">Orange Theme</a></li>
   <li><a href="#" title="Purple Theme">Purple Theme</a></li>
  </ul></div></div>
  </li>
  <li><a href="#" title="Elegant Template"><img src="http://css3menu.com/images/modern_files/css3menu1/043.png" alt="Elegant Template"/>Elegant Template</a></li>
  <li><a href="#" title="Frame  Template"><img src="http://css3menu.com/images/modern_files/css3menu1/046.png" alt="Frame  Template"/>Frame  Template</a></li>
 </ul></div>
 <div class="column" style="width:50%"><ul>
  <li><a href="#" title="Fresh Template"><img src="http://css3menu.com/images/modern_files/css3menu1/0471.png" alt="Fresh Template"/>Fresh Template</a></li>
  <li><a href="#" title="Mac Template"><img src="http://css3menu.com/images/modern_files/css3menu1/0451.png" alt="Mac Template"/>Mac Template</a></li>
  <li><a href="#" title="Neon Template"><span><img src="http://css3menu.com/images/modern_files/css3menu1/0461.png" alt="Neon Template"/>Neon Template</span></a>
  <div class="submenu" style="width:290px;">
  <div class="column" style="width:50%"><ul>
   <li><a href="#" title="Green Theme">Green Theme</a></li>
   <li><a href="#" title="Liliac Theme">Liliac Theme</a></li>
   <li><a href="#" title="Blue Theme">Blue Theme</a></li>
  </ul></div>
  <div class="column" style="width:50%"><ul>
   <li><a href="#" title="Neon Theme">Neon Theme</a></li>
   <li><a href="#" title="Orange Theme">Orange Theme</a></li>
  </ul></div></div>
  </li>
  <li><a href="#" title="New Templates"><img src="http://css3menu.com/images/modern_files/css3menu1/0441.png" alt="New Templates"/>New Templates</a></li>
 </ul></div></div>
 </li>
 <li class="topmenu"><a href="#" title="DOWNLOAD"><img src="http://css3menu.com/images/modern_files/css3menu1/017.png" alt="DOWNLOAD"/>DOWNLOAD</a></li>
</ul>
       </div>
     </div>
 <!--end of menu navigation-->


Jangan lupa untuk edit pada bagian <a href="#" karakter # gantilah dengan link yang akan anda
ditujukan. Langkah Terakhir Klik Simpan Template. semoga bermanfaat
selamat mencoba..
Read More ->>
Lagi Perbaikan Blog
Back to Top