Monday, September 3, 2012

Trik Membuat Menu Sign Up, Login Menu Di Navbar Blog

Membuat menu Sign in, Sign Up, Login blog di Navbar menu - Banyak yang bertanya-tanya kepada kang salman soal ini, oleh sebab itu malam ini kang salman sengaja mengulas trik bagaimana membuat login menu blogger yang di pasang di navbar menu, anda bisa melihat contohnya di blog ini waktu dulu tampilannya seperti gambar di atas, kalau sekarang sedit berbeda. silakan lihat sediri tulisan My Official Forum, disana ada member area, register, sign in, sign up lengkap dengan menu loginnya. di atas. bagaimana cara membuatnya?? oke mari kang salman bongkar triknya.


Oiya sebelumnya, menu login ini merupakan pengembangan dari Membuat Menu Login di Blogger  dan setelah di modifokasi jadilah seperti yang kang salman gunakan 


HOT UPDATE tulisan, kode dan posting artikel ini terlah di perbarui dan di perbaiki tanggal 29 Mei 2011. Kode sudah kami uji coba di blog baru dan berhasil.  


Langkah pertama :
Login ke blogger » Pilih Rancangan » Edit HTML


Langkah kedua
1.  Copy kode di bawah ini :

/* Top Horisontal
---------------------------------------------*/
.toppic{background:#000000;width:100%;margin:0 auto;border-bottom:0px solid #666;filter:alpha(opacity=70);opacity:0.7;}
.topnav{width: 100px;height:32px;overflow: hidden;margin:0 auto;  padding:0px 10px 0px 10px; }

2.  Cari kode ]]></b:skin>
3.  Simpan kode yang tadi di copy tadi di atas ]]></b:skin>
4.  Simpan berikut di tepat bawah <body>

<div class='toppic'>
    <div class='topnav'>
<div style='font:normal 11px Trebuchet Ms;float:left;padding-top:8px;letter-spacing:.01em;color:#f9f9f9;'>
My Official Forum  |  <a href='http://4jvohexlvs.tal.ki/members/' title='Members Area'>Members area</a>  :  <a href='http://4jvohexlvs.embed.tal.ki/_rpx/' title='Sign up to forum'>Register</a>  |  <a href='http://4jvohexlvs.embed.tal.ki/_rpx/' title='log in to forum'>Sign in</a>
</div>
<div style='float:right;font:normal 11px Trebuchet Ms; text-decoration:none; color: #f9f9f9;padding-top:4px;'>
<form action='https://www.google.com/accounts/ServiceLoginBoxAuth' id='start-login' method='post' name='login' onsubmit='onlogin()'>
<input name='continue' type='hidden' value='http://www.blogger.com/loginz?d=%2Fhome&amp;p=http%3A%2F%2Fwww.blogger.com%2F'/>
<input name='service' type='hidden' value='blogger'/>
<input name='nui' type='hidden' value='8'/>
<input name='naui' type='hidden' value='8'/>
<input name='fpui' type='hidden' value='2'/>
<input name='uilel' type='hidden' value='3'/>
<input name='skipvpage' type='hidden' value='true'/>
<input name='rm' type='hidden' value='false'/>
<input name='alwf' type='hidden' value='true'/>
<input name='roeu' type='hidden' value='http://www.blogger.com/login.g'/>
<input name='alinsu' type='hidden' value='0'/>
<input name='GA3T' type='hidden' value='WbQ8QiJfUvA'/>
<div>
<label for='Email'> Username : <input id='Email' name='Email' size='15' tabindex='1' type='text' value=''/></label><label for='Passwd'>  Password : <a href='https://www.blogger.com/forgot.g' target='_top' title='Forgot your password?'/> </label><input autocomplete='off' id='Passwd' name='Passwd' size='15' tabindex='2' type='password'/>
<input class='ubtn ubtn-block' id='signin-btn-ns' name='submit' tabindex='0' type='submit' value='Sign in'/></div>
</form>
</div>
</div>
</div>

Keterangan :
  • Tulsan yang berwana merah di atas bisa anda ubah dengan alamat situs lain, atau facebook anda sendiri.
  • Jika saya menghubungkannya ke sebuah forum. jika ingin mempuyai forum seperti saya silakan baca tutorialnya disini
  • kemudian salin link-link nya dan pindahkan ke tulisan warna merah di atas. maka hasilnya akan seperti milik saya.
Selamat mencoba dan semoga bermanfaat :)
Assalamualaikum...
Posted by at No comments:

Membuat Navbar Sendiri / Penutup Navbar

Nah Sekarang aku mau posting tentang cara membuat navbar yang berbeda... seperti contoh gambar dibawah ini... navbar merah yang dilingkarin hitam...

hehehe... sebenere itu bukan navbar ce tp itu cuman buat nutupin navbar biar tampilan blok kita lebih bervareasi... :)... ya udah kita langsung aja bagaimana membuatnya... okey... :)

1. Masuklah ke halaman Dasbor blog anda lalu klik Rancangan.
2. Kemudian klik pada Edit HTML.
3. Untuk berjaga-jaga jika terjadi kesalahan sebaiknya backup dulu template anda dengan mengklik Download Template Lengkap.
4. Kemudian centanglah Expand Template Widget.
5. Kemudian carilah kode ]]></b:skin> untuk mempermudah tekan tombol ctrl + F.
6. selah anda menemukan kode tersebut, letak Kode Dibawah ini tepat diatasnya..

/*-- (mta bar) --*/
#mta_bar{background:#444 url('http://s1180.photobucket.com/albums/x406/sismawan/Nav.jpg')
repeat-x; border-bottom:1px solid #111; z-index:100; top:0; left:0; width:100%; overflow:auto; position:fixed; margin-left:0; margin-right:0; margin-top:0; margin-bottom:4px; padding-left:0; padding-right:0; padding-top:8px; padding-bottom:6px}
* html #mta_bar{position:absolute; /*IE6 hack*/width:expression(document.compatMode=="CSS1Compat"? document.documentElement.clientWidth+"px":body.clientWidth+"px")}
#mta_bar .center{float:left; text-align:center; font-family:Verdana,Arial; font-size:13px; font-weight:bold; font-style:normal; color:#FFFFFF; width:65%}
#mta_bar .left{float:left; text-align:left; font-family:Verdana,Arial; font-size:13px; font-weight:normal; font-style:normal; color:#FFFFFF; width:20%}
#mta_bar .right{font-family:verdana,Arial,Helvetica,sans-serif; float:right; text-align:center; font-weight:normal; font-size:10px; letter-spacing:0; width:30px; white-space:nowrap}
#mta_bar .right a{font-size:10px; color:#FFFFFF; text-decoration:underline}
#mta_bar .right a:hover{font-size:10px; color:#80FF00; text-decoration:none}
#left_bar a{background:url('http://i1105.photobucket.com/albums/h356/Ozyw42/check-c.png') no-repeat; text-decoration:none; color:#FFFFFF; padding-left:23px; padding-right:0; padding-top:0; padding-bottom:0}
#left_bar a:hover{text-decoration:underline; color:#80FF00}
#left_bar2 a{background: url(http://i1180.photobucket.com/albums/x406/sismawan/facebook.png)
<script>
<!--http://infokanca.blogspot.com/-->
document.write(unescape('%6E%6F%2D%72%65%70%65%61%74%20%32%70%78%3B%20%74%65%78%74%2D%64%65%63%6F%72%61%74%69%6F%6E%3A%6E%6F%6E%65%3B%20%63%6F%6C%6F%72%3A%23%46%46%46%46%46%46%3B%20%70%61%64%64%69%6E%67%2D%6C%65%66%74%3A%32%31%70%78%3B%20%70%61%64%64%69%6E%67%2D%72%69%67%68%74%3A%30%3B%20%70%61%64%64%69%6E%67%2D%74%6F%70%3A%30%3B%20%70%61%64%64%69%6E%67%2D%62%6F%74%74%6F%6D%3A%30%7D%0A%23%6C%65%66%74%5F%62%61%72%32%20%61%3A%68%6F%76%65%72%7B%74%65%78%74%2D%64%65%63%6F%72%61%74%69%6F%6E%3A%75%6E%64%65%72%6C%69%6E%65%3B%20%63%6F%6C%6F%72%3A%23%38%30%46%46%30%30%7D%0A%23%6C%65%66%74%5F%62%61%72%33%20%61%7B%62%61%63%6B%72%6F%75%6E%64%3A%74%72%61%6E%73%70%61%72%65%6E%74%29%20%6E%6F%2D%72%65%70%65%61%74%3B%20%74%65%78%74%2D%64%65%63%6F%72%61%74%69%6F%6E%3A%6E%6F%6E%65%3B%20%63%6F%6C%6F%72%3A%23%46%46%46%46%46%46%3B%20%70%61%64%64%69%6E%67%2D%72%69%67%68%74%3A%32%33%70%78%3B%20%70%61%64%64%69%6E%67%2D%6C%65%66%74%3A%30%3B%20%70%61%64%64%69%6E%67%2D%74%6F%70%3A%30%3B%20%70%61%64%64%69%6E%67%2D%62%6F%74%74%6F%6D%3A%30%7D%7D%0A%23%6C%65%66%74%5F%62%61%72%33%20%61%3A%68%6F%76%65%72%7B%74%65%78%74%2D%64%65%63%6F%72%61%74%69%6F%6E%3A%75%6E%64%65%72%6C%69%6E%65%3B%20%63%6F%6C%6F%72%3A%23%38%30%46%46%30%30%7D%0A%23%74%6F%5F%74%6F%70%7B%62%61%63%6B%67%72%6F%75%6E%64%3A%74%72%61%6E%73%70%61%72%65%6E%74%20%75%72%6C%28%68%74%74%70%3A%2F%2F%69%31%31%30%35%2E%70%68%6F%74%6F%62%75%63%6B%65%74%2E%63%6F%6D%2F%61%6C%62%75%6D%73%2F%68%33%35%36%2F%4F%7A%79%77%34%32%2F%64%65%6C%65%74%65%2E%70%6E%67%29%20%6E%6F%2D%72%65%70%65%61%74%20%73%63%72%6F%6C%6C%20%30%25%3B%20%70%6F%73%69%74%69%6F%6E%3A%61%62%73%6F%6C%75%74%65%3B%20%2F%2A%74%68%69%73%20%72%65%70%6C%61%63%65%73%20%66%6C%6F%61%74%20%2D%20%66%69%78%65%73%20%74%68%61%6E%6B%73%20%74%6F%20%4C%61%72%72%79%20%6F%66%68%74%74%70%3A%2F%2F%62%6C%6F%67%2E%6C%72%6F%6F%74%2E%63%6F%6D%2A%2F%68%65%69%67%68%74%3A%31%38%70%78%3B%20%77%69%64%74%68%3A%31%39%70%78%3B%20%6D%61%72%67%69%6E%3A%30%20%30%20%30%20%39%30%30%70%78%3B%20%2F%2A%74%68%69%73%20%77%61%73%20%75%70%64%61%74%65%64%2A%2F%70%61%64%64%69%6E%67%3A%39%70%78%20%35%70%78%7D%0A%23%74%6F%5F%74%6F%70%20%61%7B%70%61%64%64%69%6E%67%3A%38%70%78%7D'));
<!-- visit http://infokanca.blogspot.com/ -->
</script>

7. Untuk url berwarna biru bisa anda ganti sesuka anda dengan url gambar anda sendiri. Setelah itu Cari Kode </head>, Setelah anda meemukannya letakkan kode dibawah ini tepat diatasnya..

<script>
<!--http://infokanca.blogspot.com/-->
document.write(unescape('%3C%73%63%72%69%70%74%20%73%72%63%3D%27%68%74%74%70%3A%2F%2F%73%69%74%65%73%2E%67%6F%6F%67%6C%65%2E%63%6F%6D%2F%73%69%74%65%2F%61%73%72%69%7A%61%6C%6F%66%66%69%63%69%61%6C%77%65%62%2F%6A%61%76%61%73%63%72%69%70%74%2F%53%74%72%69%70%74%2D%61%64%2E%6A%73%27%20%74%79%70%65%3D%27%74%65%78%74%2F%6A%61%76%61%73%63%72%69%70%74%27%2F%3E'));
<!-- visit http://infokanca.blogspot.com/ -->
</script>

8. Setelah itu cari kode <body>, terus letakkan kode dibawah ini tepat dibawahnya..

<script>
<!--http://infokanca.blogspot.com/-->
document.write(unescape('%3C%64%69%76%20%69%64%3D%27%6D%74%61%5F%62%61%72%27%3E%0A%3C%64%69%76%20%69%64%3D%27%6C%65%66%74%5F%62%61%72%33%27%3E%0A%3C%73%70%61%6E%20%63%6C%61%73%73%3D%27%63%65%6E%74%65%72%27%2F%3E%3C%2F%64%69%76%3E%0A%3C%64%69%76%20%69%64%3D%27%6C%65%66%74%5F%62%61%72%32%27%3E%0A%3C%73%70%61%6E%20%63%6C%61%73%73%3D%27%6C%65%66%74%27%3E%0A'));
<!-- visit http://infokanca.blogspot.com/ -->
</script>

<a href='URL FACEBOOK ANDA/FACEBOOK GROUP'>NAMA FACEBOOK ANDA/FACEBOOK GROUP</a>

<script>
<!--http://infokanca.blogspot.com/-->
document.write(unescape('%3C%2F%73%70%61%6E%3E%3C%2F%64%69%76%3E%0A%3C%64%69%76%20%69%64%3D%27%6C%65%66%74%5F%62%61%72%27%3E%0A%3C%73%70%61%6E%20%63%6C%61%73%73%3D%27%63%65%6E%74%65%72%27%3E%0A'));
<!-- visit http://infokanca.blogspot.com/ -->
</script>

<a href='URL BLOG ANDA/'>NAMA BLOG ANDA</a>

<script>
<!--http://infokanca.blogspot.com/-->
document.write(unescape('%3C%2F%73%70%61%6E%3E%3C%2F%64%69%76%3E'));
<!-- visit http://infokanca.blogspot.com/ -->
</script>



<script>
<!--http://infokanca.blogspot.com/-->
document.write(unescape('%0A%3C%73%70%61%6E%20%63%6C%61%73%73%3D%27%72%69%67%68%74%27%20%6F%6E%6D%6F%75%73%65%6F%75%74%3D%27%73%65%6C%66%2E%73%74%61%74%75%73%3D%26%61%70%6F%73%3B%26%61%70%6F%73%3B%27%20%6F%6E%6D%6F%75%73%65%6F%76%65%72%3D%27%73%65%6C%66%2E%73%74%61%74%75%73%3D%26%61%70%6F%73%3B%61%73%72%69%7A%61%6C%77%61%68%64%61%6E%77%69%6C%73%61%26%61%70%6F%73%3B%3B%72%65%74%75%72%6E%20%74%72%75%65%3B%27%3E%20%3C%69%6D%67%20%61%6C%69%67%6E%3D%27%61%62%73%6D%69%64%64%6C%65%27%20%62%6F%72%64%65%72%3D%27%30%27%20%6F%6E%43%6C%69%63%6B%3D%27%63%6C%6F%73%65%54%6F%70%41%64%73%28%29%3B%72%65%74%75%72%6E%20%66%61%6C%73%65%3B%27%20%73%72%63%3D%27%68%74%74%70%3A%2F%2F%69%31%31%30%35%2E%70%68%6F%74%6F%62%75%63%6B%65%74%2E%63%6F%6D%2F%61%6C%62%75%6D%73%2F%68%33%35%36%2F%4F%7A%79%77%34%32%2F%64%65%6C%65%74%65%2E%70%6E%67%27%20%73%74%79%6C%65%3D%27%63%75%72%73%6F%72%3A%68%61%6E%64%3B%63%75%72%73%6F%72%3A%70%6F%69%6E%74%65%72%3B%27%2F%3E%3C%2F%73%70%61%6E%3E%3C%2F%64%69%76%3E'));
<!-- visit http://infokanca.blogspot.com/ -->
</script>
Posted by at No comments:

Cara Memasang Header gambar di Blog

Memodifikasi header blog menjadi sangat penting guna menunjang penampilan blog yang lebih menarik dan sebagai pembeda antara blog satu dengan yang lain. Terkadang dengan gambar header blog kita mempunyai ciri khas yang kental akan mempermudah visitor atau pengunjung mengenali blog kita. Lalu bagaimana usaha kita untuk mencapai hal itu? salah satu caranya adalah membuat sendiri header yang kita inginkan. untuk cara nya sobat bisa masuk ke link ini ( baca : Cara Buat Header Blog dengan Sentuhan Photoshop ).

Tapi disini saya tidak akan membahas tentang cara pembuatan header blog, karena sudah saya bahas di postingan sebelumnya. Yang akan saya bahas disini adalah cara pasang header gambar di blog. Perlu sobat ingat disini sebelum memulai pemasangan header gambar di blog, terlebih dahulu sobat harus perhatikan ukuran lebar blog sobat. Tapi tidak usah khawatir untuk caranya sobat bisa lihat di cara buat header blog dengan sentuhan photoshop.

Uke untuk mempersingkat waktu alangkah baiknya kita langsung menuju ke tutorial.
1. Login / Masuk ke Blogger => Rancangan
2. Klik Edit pada header
klik untuk memperbesar gambar



3. Klik Choose file / pilihan pertama apa bila sobat akan mengambil gambar di komputer sobat , klik pelihan kedua apabila sobat ingin mengambil gambar dari wap. Disini saya akan mengambil gambar dari komputer saya, atau saya memilih pilihan yang pertama. Choose file => cara dimana gambar di siman di komputer sobat => Open
klik untuk memperbesar gambar 

4. Tunggu sampai proses upload selesai => lalu pilih Instead of title and description => Save
klik untuk memperbesar gambar 

5. Selesai silahkan refresh atau tekan F5

Cukup sekian postingan saya tentang Cara pasang Header Gambar di Blog, silahkan mencoba, semoga bermanfaat.
Description: Cara pasang Header Gambar di Blog Rating: 3.5 Reviewer: pattah pattah ItemReviewed: Cara pasang Header Gambar di Blog
Posted by at No comments:

Cara Membuat Benner Keren di Blog

Banner blog merupakan gambar, ciri khas, atau identitas dari suatu blog. Rata-rata banner yang ada di blog cuma berupa gambar statis. Benar gak...? Akan lebih enak di lihat apabila banner itu mempunyai gambar yang bergerak atau ada animasinya. Untuk membuat ini banyak software yang bisa digunakan contohnya macromedia flash, photoshop, dan lain-lain. Tetapi bagi anda yang tidak mempunyai software pembuat animasi, kurang mempunyai kemampuan di dalam membuat banner, atau anda kurang ide untuk membuat banner lebih baik anda mencoba ini. Membuat banner flash secara online. Waw... pastinya anda sangat tertarik kan. Bagaimana caranya??? Yuk kita lihat cara membuat banner flash dengan flashvortex.

Saya membuat banner di bawah ini tanpa perlu menggunakan image editor atau program-program rumit, lho ! Instan dan saya lakukan hanya dalam hitungan waktu kira-kira 5 menit saja dan jeng jeng …. banner flash saya pun siap.



Berikut saya contohkan bagaimana membuat banner flash di atas dengan menggunakan generator banner dari FLASHVORTEX. Langsung saja anda ikuti

langkah-langkahnya yang saya lengkapi dengan screen shot sebagai berikut :

1. Silahkan anda buka website http://flashvortex.com/

2. Pada halaman home page situs tersebut, lihat screen shot di bawah, anda pilih atau klik bar navigasi “Banners”. Anda bisa juga membuat menu, text, buttons, dan clock. Tetapi untuk kali ini saya akan menjelaskan cara membuat bannernya. Untuk yang lainnya anda bisa mencobanya sendiri.
homepage flashvortex

3. Selanjutnya akan muncul halaman web yang menampilkan model-model template banner yang anda dapat gunakan secara gratis. Anda tinggal pilih salah satu dengan cara meng-klik tulisan CLICK HERE TO EDIT THIS yang terletak di bawah template banner bersangkutan. Sebagai contoh, untuk penjelasan ini saya memilih generator: Graffitification.
grafiti

4. Setelah dipilih, akan muncul halaman web berikut :
line pertama flashvortex

Halaman ini akan memunculkan 5 kotak teks tempat anda menuliskan pesan atau informasi yang ingin ditampilkan pada banner flash. Anda juga bisa mengatur warna dan ukuran teks yang ingin ditampilkan sesuai keinginan.

5. Untuk contoh banner flash di atas, pada kotak teks baris pertama; tulisan yang ada saya hapus dan ganti dengan tulisan GRATIS DOWNLOAD.
gratis download

Warna teks (font) saya set ke #F45E00 (warna orange). Kode hex dari warna teks ini dapat diedit atau diubah-ubah dengan cara meng-klik kotak “Text Color”, nanti akan muncul window gradasi warna. Geser kursor ke warna yang anda ingini untuk teks anda, kemudian Klik di warna tersebut, nanti kode hex akan berubah dengan sendirinya mewakili warna teks yang barusan anda pilh. Untuk mengatur ukuran teks, silahkan edit angka yang tertera pada kotak “Text Size”. Sebagai contoh, saya memilih “40”.

6. Dengan cara yang sama, lakukan pengeditan teks dan warna pada kolom-kolom selanjutnya.

7. Langkah berikutnya, jika anda merasa perlu untuk melakukan setting lebih lanjut, anda dapat mengisi dan mengedit-nya pada “General Settings”.
general setting flashvortex

Jika banner anda digunakan untuk mengarahkan pengunjung ke suatu link tertentu jika di-klik, isikanlah URL link yang anda maksud. Sebagai contoh saya isikan http://ilmukoniksaputra.blogspot.com. Jika anda member berbayar (premium) dari FlashVortex, anda dapat melakukan pengeditan warna gambar dan background template banner , jenis font yang digunakan, dan kecepatan animasi. Untuk non-member, setting-nya sesuai dengan template yang sudah diberikan apa adanya, jadi settingan baris berikutnya bisa diabaikan.

8. Selanjutnya, langsung saja klik tombol “Generate Animation” untuk membuat kode animasi dari banner kita sesuai setting yang telah dilakukan pada langkah-langkah sebelumnya.
generate animation flashvortex

9. Halaman web yang muncul setelah tombol “generate Animation” di klik adalah :
download flashvortex

Di sini anda diminta untuk memilih jenis instalasi banner flash yang telah dibuat ke website anda, yaitu dengan cara EASY atau ADVANCED. Sebagai contoh, saya pilih cara “Easy”. Jadi saya copy code script yang sudah di “generate” oleh generator banner FLASHVORTEX ini, kemudian saya paste ke blog ilmu konik saputra ......... SELESAI

Nah, bagaimana menurut anda ? Mudah dan cepat khan ! Hasilnya, lihat banner flash di atas. Selanjutnya, silahkan anda ulangi sendiri langkah-langkah yang sudah saya jelaskan dengan menggunakan pilihan template banner yang lain, selamat mencoba !!
Posted by at No comments:

Menu Horizontal Drop Down

Kali ini saya akan membahas bagaimana cara membuat Menu Horizontal Drop Down Dengan CSS3 menu drop down kali ini tampilan dan warna nya lebih menarik, selain itu menggunakan gaya CSS3 yang bisa memukau siapa saja yang melihat nya. Cara membuatnya tidak ribet cukup satu langkah langsung jadi. Baiklah bagi sobat yang pingin membuat menu CSS3 ini ikuti langkah-langkah di bawah ini:
Cara Membuat 
1. Login ke blog kamu.
2. Pilih Rancangan > Add Gadget > HTML JavaScript.



3. Dan copy kode di bawah ini.

<style>
#css3pic{background: rgb(176,174,38); /* Fallback Background color */
background: url(images/pattern.png), -moz-linear-gradient(top, rgba(176,174,38,1) 0%, #6e6c00 100%);
background:url(images/pattern.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(176,174,38,1)), color-stop(100%,rgba(110,108,0,1)));width:980px;border-top:1px solid #ccc;margin:0 auto;padding:0 auto;border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: solid 1px #251400;}
#css3wrapper{width:980px;height:27px;margin:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#css3bar{width:100%}
#css3bar,#css3bar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#css3bar a{display:block;text-decoration:none;font-size:12px;font-weight:bold;text-transform:uppercase;color:#333;padding:8px 8px 8px}
#css3bar a.trigger{padding:8px 13px 8px 9px}
#css3bar li{float:left;position:static;width:auto}
#css3bar li ul,#css3bar ul li{width:140px}
#css3bar ul li a{text-align:left;color:#fff;font-size:11px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px;}
#css3bar li ul{z-index:100;position:absolute;display:none;background:#333;padding-bottom:5px;border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border: solid 1px #251400;}
#css3bar li:hover a,#css3bar a:active,#css3bar a:focus,#css3bar li.hvr a{;color:#fff;-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out; }
#css3bar li:hover ul,#css3bar li.hvr ul{background: rgb(176,174,38); /* Fallback Background color */
background: url(images/pattern.png), -moz-linear-gradient(top, rgba(176,174,38,1) 0%, #6e6c00 100%);
background:url(images/pattern.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(176,174,38,1)), color-stop(100%,rgba(110,108,0,1)));display:block}
#css3bar li:hover ul a,#css3bar li.hvr ul a{color:#fff;background-color:transparent;text-decoration:none}
#css3bar li ul li.hr{border-top:1px solid #444;display:block;font-size:1px;height:0;line-height:0;margin:2px 0}
#css3bar ul a:hover{background-image: -webkit-linear-gradient(top, #990066, #cc0099, #990066);
background-image: -moz-linear-gradient(top, #990066, #cc0099, #990066);
background-image: -ms-linear-gradient(top, #990066, #cc0099, #990066);
background-image: -o-linear-gradient(top, #990066, #cc0099, #990066);!important;color:#fff!important;text-decoration:none}

</style>
<div id='css3pic'>
<div id='css3wrapper'>
<ul id='css3bar'>
<li><a href='http://dudi085780036281.blogspot.com'>Home</a></li>
<li><a class='trigger' href='http://dudi085780036281.blogspot.com'>Pendidikan</a>
<ul>
<li><a href='http://dudi085780036281.blogspot.com'>Kesehatan</a></li>
<li class='hr'/>
<li><a href='http://dudi085780036281.blogspot.com'>Pramuka</a></li>
<li class='hr'/>
<li><a href='http://dudi085780036281.blogspot.com'>Software</a></li>
<li class='hr'/>
<li><a href='http://dudi085780036281.blogspot.com'>Blog</a></li>
<li class='hr'/>
<li><a href='http://dudi085780036281.blogspot.com'>Nonton TV Onlie</a></li>
</li></li></li></li></ul>
</li>
<li><a class='trigger' href='http://dudi085780036281.blogspot.com'>Lifestyle</a>
<ul>
<li><a href='http://dudi085780036281.blogspot.com'>Health</a></li>
<li class='hr'/>
<li><a href='http://dudi085780036281.blogspot.com'>Travel</a></li>
<li class='hr'/>
<li><a href='http://dudi085780036281.blogspot.com'>Food</a></li>
</li></li></ul>
</li>
<li><a class='trigger' href='http://dudi085780036281.blogspot.com'>Design</a>
<ul>
<li><a href='http://dudi085780036281.blogspot.com'>Art</a></li>
<li class='hr'/>
<li><a href='http://dudi085780036281.blogspot.com'>Web</a></li>
<li class='hr'/>
<li><a href='http://dudi085780036281.blogspot.com'>Blog</a></li>
</li></li></ul>
<li><a class='trigger' href='http://dudi085780036281.blogspot.com'>Technology</a>
<ul>
<li><a href='http://dudi085780036281.blogspot.com'>Handphone</a></li>
<li class='hr'/>
<li><a href='http://dudi085780036281.blogspot.com'>Gadget</a></li>
<li class='hr'/>
<li><a href='http://dudi085780036281.blogspot.com'>Computer</a></li>
</li></li></ul>
<li><a class='trigger' href='http://dudi085780036281.blogspot.com'>Sports</a>
<ul>
<li><a href='http://dudi085780036281.blogspot.com'>Tennis</a></li>
<li class='hr'/>
<li><a href='http://dudi085780036281.blogspot.com'>Moto GP</a></li>
<li class='hr'/>
<li><a href='http://dudi085780036281.blogspot.com'>Bulu Tangkis</a></li>
</li></li></ul>
<li><div id='coom'><a class='trigger' href='http://dudi085780036281.blogspot.com'>Community</a></div></li>
</li></li></li></ul>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div></div>

Ganti kode yang berwarna merah sesuaikan dengan blog anda.
Ganti http://dudi085780036281.blogspot.com dengan URL yang dituju saat di klik. 
Posted by at No comments:

Mengenal Bagian-bagian Blog

Pada dasarnya bagian blog pada blogspot terdiri dari 4 bagian besar:

1. Navbar.
Navbar adalah salah satu bagian blog yang posisinya terletak paling atas pada blog.Di bagian terdiri dari sub bagian yaitu kolom pencarian entri, ikuti, berbagi, laporkan penyalah gunaan, blog berikut, entri baru, rancangan, dan keluar.

2.Header
.
Header adalah salah satu bagian blog yang posisinya terletak di bawah Navbar.Pada bagian ini biasanya berisi Judul blog dan deskripsinya.

3.Blog Post
Blog Post adalah bagian yang terpenting dari blog, yang berisikan artikel, gambar, dan video.

4.Sidebar
Sidebar adalah bagian yang letaknya bersebelahan dengan Blog Post, tergantung dari template yang di pakai.Pada bagian ini terdiri dari tampilan profil blogger dan arsip blog, tetapi masih bisa di tambahkan bagian lain dengan mengedit elemen laman.

Mungkin artikel ini mungkin tidak begitu penting bagi para Master blog, tetapi saya hanya ingin belajar & berbagi ilmu dengan para penggemar blog pemula. Semoga artikel ini bermanfaat buat sobat yang ingin mengenal bagian-bagian blog di blogspot.
Posted by at No comments:
terurs berkarya untuk semua anak bangsa copas boleh marah jangan didunia maya tidak bisa orang melarang-larang copas tapi alangkah baiknya kalo copas alias copi vaste di ubah sedikit kata-katanya agar tidak serupa heheh lanjut gan
Posted by at No comments:
Subscribe to: Posts (Atom)