Cara Menghapus Css Reset Stylesheet Blogger 0

Mungkin Sebagian besar para blogger Khususnya blogger pemula belum mengetahui Blogger Css Reset Stylesheet ini,Tapi bagi anda para blogger atau Website designer yang mengerti banyak tentang Kode blogger pasti telah mengetahui kekurangan dari Blogger Css Reset Stylesheet, dimana kode tersebut menyebabkan error dan tidak valid pada W3C CSS Validator.Tutorial ini akan sangat berguna bagi anda yang ingin menghilangkan kode Blogger Css Reset Stylesheet dari templete blogger anda dan mengurangi error kode css serta mempercepat loading halaman.Tutorial ini sebenarnya tidak benar-benar menghapus kode Blogger Css Reset Stylesheet dari templete blogger anda melainkan membuat kode tersebut diabaikan oleh browser.Pada tutorial ini kita akan mencoba mengkonversi kode tersebut ke HTML Comments dan HTML Comments lah yang menyebabkan kode tersebut di abaikan oleh browser.

PERINGATAN !
Menghilangkan Kode Ini Dapat Menyebabkan Templete Anda Rusak,Jika Anda Tidak mengerti Tentang kode Ini Anda Di sarankan Untuk Tidak Melakukanya.Tutorial ini Hanya Untuk Blogger Yang benar-benar mengerti Tentang Kode Bukan Untuk Blogger Pemula.

Adapun Langkah-Langkahnya Adalah:

1. Buka Blogger Dasbor >>Pilih Opsi Lainya >> Pilih/Klik Templete >> Back Up Templete Anda .

2. Selanjutnya Klik Edit HTMl >> Centang Kotak Kecil Expand Template Widget.

3. Cari Kode <b:skin><![CDATA[ Gunakan Ctrl + F untuk memudahkan Pencarian.

4. Jika anda telah menemukanya Copy Kode Css Diantara Kode <b:skin><![CDATA[ dan Kode    ]]></b:skin> dan pastekan pada notpad anda.( lihat kode di bawah)

<b:skin><![CDATA[

Kode kode Anda ( copy dan paste ke notpad)

   ]]></b:skin>

5. Selanjutnya hapus seluruh kode dibawah ini.

<b:skin><![CDATA[

Kode kode Anda

   ]]></b:skin>

Dan ganti dengan kode dibawah ini:

&lt;style type=&quot;text/css&quot;&gt;
&lt;!-- /*<b:skin><![CDATA[*/]]></b:skin>

6. Copy dan pastekan kode dibawah ini tepat dibawah kode warna orange diatas pada templete anda.

<style type='text/css'>

Kode CSS Dari NOTEPAD

</style>

7. Copy dan pastekan kode css pada notpad anda diantara kode <style type='text/css'>
dan kode </style> ( lihat kode no 6 diatas ).

8. Simpan Templete anda.

9. Setelah anda menghapus Blogger Css Reset Stlylesheet (Widget Bundle )tadi, Kemudian periksa apakah kode terssebut berhasil dihapus atau tidak.

* Buka halaman home blog (Halaman Utama )anda kemudian tekan Ctrl + U maka akan muncul Sumber Halaman ( Page Source ).

<style type='text/css'>
<style type="text/css">
<!-- /*<link type='text/css' rel='stylesheet' href='//www.blogger.com/static/v1/widgets/1937454905-widget_css_bundle.css' />
<style id='page-skin-1' type='text/css'><!--
*/
--></style>

* Jika anda mendapati kode diatas pada Halaman Sumber ( Page Source ) berwarna hitam maka anda berhasil dan kode tersebut akan diabaikan oleh browser.

Selesai dan semoga bermanfaat .

Cara Membuat Css Spotlight Menu Di Blogger 0

Seperti halnya Css circle menu ,Css spotlight menu ini juga di buat menggunakan css dan css3 border radius property dan transisi membentuk background lingkaran,pada menu ini ketika anda menujukan mouse anda ke menu maka menu tersedbut akan bersinar membentuk lingkaran pada backgroud menu.Background akan bekerja pada semua browser pada umumnya termasuk IE9,yang mendukunng Css3 termasuk FF3.5+, Safari 3.1+, Google Chrome, and Opera 11.6+.

Lihat Demo

Adapun cara pembuatanya adalah :

1. login ke blogger dengan ID sobat.

2. Pilih More options --->pilih Templete.

4. Backup/Restore Templete anda.

3. Pilih Edit HTML.

5. Centang tulisan "expand template widget".

6. Lalu cari kode (untuk mempermudah pencarian tekan F3 atau ( Ctrl+ F )) ]]></b:skin> .

7. Letakan (copy&paste) CSS code di bawah ini diatas kode ]]></b:skin>

.spotlightmenu{
width: 100%;
overflow:hidden;
}

.spotlightmenu ul{
margin: 0;
padding: 0;
font: bold 14px Verdana; /* font style and size */
list-style-type: none;
text-align: center; /* "left", "center", or "right" align menu */
}

.spotlightmenu li{
display: inline-block;
position:relative;
padding: 5px;
margin: 0;
margin-right: 5px; /* right margin between menu items */
}
.spotlightmenu li a{
display:inline-block;
padding: 5px;
min-width:50px; /* horizontal diameter of spotlight */
height:50px; /* vertical diameter of spotlight */
text-decoration: none;
color: black;
margin: 0 auto;
overflow:hidden;
-moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

.spotlightmenu li:hover a{
color: white;
background: #a71b15; /* background color of spotlight */
-webkit-border-radius: 50%; /* large radius to create circular borders */
-moz-border-radius: 50%;
border-radius: 50%;
}

.spotlightmenu li a span{
position:relative;
top:35%; /* move text down so it appears centered within menu item */
}

2.Kode Html copy kode di bawah ini dan pastekan diantara kode <body> dan kode </body> di mana anda ingin menampilkan menu tersebut.

<div class="spotlightmenu">
<ul>
<li><a href="http://bambangpage.blogspot.com/"><span>Home</span></a></li>
<li><a href="http://gudangmenu.blogspot.com/"><span>Gudang Menu</span></a></li>
<li><a href="http://cilimoes.blogspot.com/"><span>Cilimoes</span></a></li>
<li><a href=""><span>Forums</span></a></li>
<li><a href=""><span>JavaScript</span></a></li>
</ul>
</div>

8.Klik save templete button

9.selesai....



Selamat Mencoba dan semoga bermanfaat......

Cara Membuat Css Circle Menu Di Blogger 0

Menu ini di buat menggunakan css,dan css3 ,lingkaran terbentuk oleh Css3 border-radius property.Ketika kamu membuat menu ini border pada keempat sudut bergabung menjadi sebuah lingkaran.Teknik ini bekerja pada semua browser yang mendukung CSS3's border-radius property,seperti IE9+, FF3+, Safari, Chrome, and Opera 9+.

Lihat Demo

Adapun cara pembuatanya adalah :


1. login ke blogger dengan ID sobat.

2. Pilih More options --->pilih Templete.

4. Backup/Restore Templete anda.

3. Pilih Edit HTML.

5. Centang tulisan "expand template widget".

6. Lalu cari kode (untuk mempermudah pencarian tekan F3 atau ( Ctrl+ F )) ]]></b:skin> .

7. Letakan (copy&paste) CSS code di bawah ini diatas kode ]]></b:skin>

.circlemenu{width: 100%;overflow:hidden;}.circlemenu ul{margin: 0;padding: 0;font: bold 14px Verdana;list-style-type: none;text-align: center; /* "left", "center", or "right" align menu */}.circlemenu li{display: inline;margin: 0;}.circlemenu li a{display:inline-block;text-align:center;text-decoration:none;color:white;background:#b72d23;margin: 0;margin-right:5px; /*right spacing between each link */width:100px;height:100px;border-radius: 400px; /*really large border radius to create round borders*/-moz-border-radius: 400px;-webkit-border-radius: 400px;}.circlemenu a span{position:relative;top:40%;}.circlemenu li a:visited{color: white;}.circlemenu a:hover{background: #a71b15;}

8. Kode Html copy kode di bawah ini dan pastekan diantara kode <body> dan kode </body> di mana anda ingin menampilkan menu tersebut.

<div class="circlemenu"><ul><li><a href="http://bambangpage.blogspot.com/"><span>Home</span></a></li> <li><a href="http://gudangmenu.blogspot.com/2010/01/cara-membuat-horizontal-plang-menu.html#.UGGiZVHAHYU"><span>DHTML</span></a></li> <li><a href=""><span>CSS</span></a></li> <li><a href=""><span>Forums</span></a></li> <li><a href=""><span>JavaScript</span></a></li> </ul></div>

9.Klik save templete button

10.selesai....


Selamat mencoba dan semoga bermanfaat.....