^SMK_PESAT^_*Bogor*

 

Kali ini saya ingin membuat posting mengenai Cara Membuat Menu CSS3 di Blogger, yang hasilnya akan terlihat seperti gambar disamping, sebelumnya saya pernah membuat postingan mengenai 30+ Menu Navigasi Horizontal dengan CSS dan kode HTML dimana dalam postingan tersebut, kita bisa langsung membuat Navigasi Horizontal dengan bermacam-macam jenis.

Akan tetapi yang patut diingat, tidak semua browser support Menu CSS3 ini, untuk melihat tabel browser mana saja yang support CSS3, bisa dilihat di www.findmebyip.com.

Apabila browser anda support dengan CSS3, maka cobalah bermain dengan Animasi Menu CSS3 di bawah ini.

<style type="text/css">
.menuqu ul li{list-style: none; display: inline;}
.menuqu1 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #4FCF26; border: 2px solid #fff;
-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(-25deg);-moz-transform:rotate(-25deg);-o-transform:rotate(-25deg);
}
.menuqu2 { padding: 2px 0.5em; text-decoration: none; float: left; color: black; background: #BFDCFF; border: 2px solid #fff;
-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(25deg);-moz-transform:rotate(25deg);-o-transform:rotate(25deg);
}
.menuqu1:hover, .menuqu2:hover{ background: #F0BFFF; color:#ccc;
-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg)
}
</style>

<div class="menuqu">
<ul>
<li class="menuqu1"><a href='http://www.karsono.co.cc'>Home</a></li>
<li class="menuqu2"><a href='URL 1'>Menu1</a></li>
<li class="menuqu1"><a href='URL 2'>Menu2</a></li>
<li class="menuqu1"><a href='URL 3'>Menu3</a></li>
<li class="menuqu2"><a href='URL 4'>Menu4</a></li>
<li class="menuqu1"><a href='URL 5'>Menu5</a></li>
</ul>
</div>


Langsung saja copy kode di atas di add widget blogger sobat.



Setelah semua langkah-langkah di atas terlaksanakan dengan baik. Sekarang sobat tinggal Simpan dan lihat hasilnya.

Selamat mencoba semoga bermanfaat.

Sumber: http://www.kangfatur.com/2011/02/membuat-animasi-menu-css3.html

 

Pada postingan blog kali ini saya akan membahas tentang cara memasang dinamik meta tags di blogspot secara otomatis. Teknik ini sangat-sangat berguna untuk optimasi onpage karena setiap postingan kita akan memiliki meta deskripsi yang berbeda antara satu postingan dengan postingan lainnya tanpa perlu repot-repot nambahin satu-satu pada setiap postingan secara manual. Dengan kata lain, meta deskripsi dan keyword pada setiap posting akan ter-generate secara otomatis. Hal ini tentu menjadi solusi bagi sobat yang mengalami duplikasi meta deskripsi.
Cara memasang meta tag deskripsi dan keyword setiap postingan secara otomatis ini saya bagi kedalam 2 bagian, sobat-sobat ikutin aja salah satu dari kedua cara dibawah ini :

Bagi yang BELUM PERNAH memasang meta tag deskripsi sebelumnya, ikutin cara ini :

1. Pertama-tama login dulu dong ke blogger.com terus Rancangan --> edit html.
2. Tunggu sampe terload secara maksimal dan cari kode berikut (gunakan ctrl + f di firefox untuk mencari) :
   
   

   <title><data:blog.pageTitle/></title>

3. Setelah dapat kode diatas hapus lalu ganti dengan kode berikut :
   
   

   <b:if cond='data:blog.url == &quot;http://ALAMATBLOGSOBAT.blogspot.com/&quot;'>
   <title><data:blog.pageTitle/></title>
   <meta name='DESCRIPTION' content='ISI DENGAN DESKRIPSI UNTUK HOMEPAGE BLOG SOBAT'/>
   <meta name='KEYWORDS' content='ISI DENGAN KATA KUNCI UNTUK HOMEPAGE'/> </b:if>
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <title><data:blog.pageName/> - <data:blog.title/></title>
   <meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Description'/>
   <meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Keywords'/>
   </b:if>

4. Selesai dan save template sobat.

Bagi yang SUDAH PERNAH memasang meta tag deskripsi sbelumnya, ikutin cara berikut ini :

1. Udah login ke blogger kan ? langsung menuju Rancangan --> edit html.
2. Di halaman edit html, cari kode ini :
   
   

   <b:if cond='data:blog.pageType == "item"'>
   <title><data:blog.pageName/> | <data:blog.title/></title>

   
   
   
   Intinya tuh sobat cari kode deskripsi yang lama ( yang udah pernah sobat pasang sebelumnya), kemudian dihapus aja semua kode deskripsi yang lama itu.
3. Setelah kode meta tag deskripsi dan keyword yang lama dihapus diganti dengan kode berikut yang tentunya lebih canggih lagi,hhe :
   
   

   <b:if cond='data:blog.url == &quot;http://ALAMATBLOGSOBAT.blogspot.com/&quot;'>
   <title><data:blog.pageTitle/></title>
   <meta name='DESCRIPTION' content='ISI DENGAN DESKRIPSI UNTUK HOMEPAGE BLOG SOBAT'/>
   <meta name='KEYWORDS' content='ISI DENGAN KATA KUNCI UNTUK HOMEPAGE'/> </b:if>
   <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <title><data:blog.pageName/> - <data:blog.title/></title>
   <meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Description'/>
   <meta expr:content='data:blog.pageName + ", " + data:blog.title + ", " + data:blog.pageName' name='Keywords'/>
   </b:if>

4. Udah digantikan ? kalo udah selesai langsung aja di save template.

Nah, demikianlah cara bikin meta tag di setiap postingan secara otomatis. Semoga setelah ikutin cara diatas sobat-sobat semuanya gak direpotkan lagi dengan harus memasang meta tag deskripsi di setiap postingan secara manual lagi.

Selamat mencoba semoga bermanfaat.

Sumber: http://www.kangfatur.com/2011/02/cara-pasang-meta-tag-di-setiap.html