Membuat menu Sign in, Sign Up, Login blog di Navbar menu

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 salmanbongkar 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...

Cara Menambah Gambar Saat Loading Blog

Tampilan tertentu pada saat loading blog mungkin merupakan daya tarik tertentu dalam sebuah blog. Hal ini memungkinkan anda menyimpan semua ketidak teraturan bentuk tampilan pada saat loading, sehingga pengunjung hanya melihat animasi tampilan loading. Posting kali ini saya akan share bagaimana membuat tampilan loading halaman dengan menggunakan jquery dan css. Tampilan animasi pada loading page ini menggunakan Query Loader, yaitu tampilan layar kosong hitam (bisa diubah) yang meliputi blog anda sampai semua konten dimuat. Artinya pengunjung tidak akan melihat apa yang diloading blog Anda. Pada tampilan ini pengunjung hanya melihat halaman loading dengan bar dan persentase loading secara keseluruhan dengan berwarna gelap. Coba anda refress blog ini? apa yang terlihat.....lumayan menarik bukan??? ok mari kita bahas cara pembuatannya. Ikuti langkah berikut ini. 

Log in ke blog anda 
Klik Rancangan 
Klik Edit HTML 
Masukkan kode berikut di atas kode </head> 

<script src='http://code.jquery.com/jquery-1.5.min.js' type='text/javascript'/>
<script src='http://blogger-loader.googlecode.com/files/queryLoaderpre.js'
type='text/javascript'/> 

Selanjutnya masukkan kode berikut di atas kode </body>

<script>
QueryLoader.selectorPreload = &quot;body&quot;;
QueryLoader.init();
</script> 

Selanjutnya masukkan kode berikut di atas kode ]]></b:skin>

.QOverlay {
background-color: #000000; /* warna background saat blog anda di loading */
z-index: 9999;
}

.QLoader {
background-color: #CCCCCC; /* warna bar loading */
height: 1px;
}

.QAmt {
color:#FF530D; /* warna angka persentase saat loading */
font-size:50px;
font-weight:bold;
line-height:50px;
height:50px;
width:100px;
margin:-60px 0 0 -50px;
}

Klik Simpan Template
Selesai dan lihat hasilnya
Selamat mencoba dan sukses selalu