Trik Membuat Menu Sign Up, Login Menu Di Navbar Blog

Rabu, 02 Februari 2011
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...


Jangan asal copy paste, baca aturanya di sini !
Post By Kang Salman
http://www.kucoba.com


Ingin mendapat penghasilan tambahan di internet? Cara kerja mudah hanya dengan melakukan survey dan mengisi angket lalu anda akan di bayar. Itulah pekerjaan anda disini <= klik untuk daftar dan memanen uang $ seperti saya. Gratis
Dapatkan update artikel  terbaru kami langsung ke email anda.  
Artikel Terbaru

58 Responses to "Trik Membuat Menu Sign Up, Login Menu Di Navbar Blog"

Alam Yuda mengatakan...

nah ini yang mau saya tanyakan, eh malah sudah di posting, hehe terima kasih atas triknya.. mau tak coba dulu :)

Deafile mengatakan...

Hmmmm ane dahhh coba gan,,, tapi ko harus 2 kali log in yahh..???
ane kira langsung masuk dasbor...

randy oktaran mengatakan...

mas saya mau tanya itu berfungsi nya kalau orang loggin yang sudah follow kita atau bagaimana?mohon pencerahannya

Kang Salman mengatakan...

@Dea: ia memang seperti itu. hehe

@Randy: Semua orang yang mempunyai akun blogger dapat login :)

safana(ano) mengatakan...

sudah saya coba tapi knapa g bisa brooo....
We were unable to save your template
Please correct the error below, and submit your template again.
More than one widget was found with id: HTML8. Widget IDs should be unique.
malah ada peringatan seperti itu...tolong solusinya.....

safana(ano) mengatakan...

knapa g bisa bro dipasang di blog ane...

Kang Salman mengatakan...

Bisa mas silakan coba lagi, klo ga bisa di simpen di bawah body simpan aja di atas body.

safana(ano) mengatakan...

ga ada tag body nya bro...

Kang Salman mengatakan...

wew masa sih..
klo gitu simpan di bawah /head

Anonymous mengatakan...

gak jelas banget cara nya om.......

Kang Salman mengatakan...

Dibagian mananya tidak jelas??

ukifahlevy mengatakan...

aku gk pcya sama yg satu ni,, krn udh brulang x ku coba tp gk bsa, yg kluar cma ni>>>> Kami tidak dapat menyimpan template Anda.

Harap perbaiki kesalahan di bawah, dan kirimkan template Anda lagi.
Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
Pesan error XML: The element type "form" must be terminated by the matching end-tag "". jd tlong d prjelas..

Kang Salman mengatakan...

Mohon maaf atas kelalaian saya dalam mengawasi kode yang rusak sebelumnya.
Postingan ini telah saya perbaiki dan update pertanggal 29 Mei 2011
Insya Allah tidak akan eror lagi.
Terima kasih untuk pemberi tahuan akang-akang semuanya

Salam hormat

Co-Admin www.kucoba.com

Kabela mengatakan...

SAYA CARI MY OFFICIAL FORUM YANG DI BILANG KOK GAK ADA YACH

Kang Salman mengatakan...

@Kabela: Tulisan My Official Forum tersebut sudah di hapus, dan di ganti dengan tulisan baru "Halo Sob!"

Cartz_Cathra mengatakan...

aku sudah cari ]]> ketemu, tp yg satunya gx ketemu.. dimana sehh? pleace bantu.!!! aku lagi btuh....

sp yg taw.. tolong bantu...
aku ksih alamat blog gw yaw datadaricathra.blogspot.com

Kang Salman mengatakan...

Di Edit Template tempat edit-edit kode gitu. silakang Akang tekan F3 masukan kode ini ]]></b:skin kedalam kolom tersebut lalu tekan enter.
semoga dapat membantu.

kevin mengatakan...

punyaku sih bisa tapi kok dibawah dan ketutup ama chat box gua

Kang Salman mengatakan...

Permasalahan setiap template berbeda-beda, untuk admin blog seharusnya mengenali template dan karakter nya masing-masing.

Alexander Kevin Daniel Samara mengatakan...

jadi aku mau minta templatnya kang salman boleh gak? tapi yg beda2 dikit

kevin mengatakan...

punyaku sdh bisa diatas tapi kok tulisan nya malah menurun? gak mendatar???

Kang Salman mengatakan...

Jangan menggunakan kode <li> tulis saja manual dan pisahkan dengan |
kalau ditambhankan kode <li> atau <ul> tulisannya akan menurun kebawah.

marketing kucoba.com mengatakan...

@Smpk Yohanes Don Bosco: template ini tidak di bagikan secara gratis, kalau ingin memesan sejenis, silakan menghubungi Admin dan berani bayar berapa?

STIE Jambatan Bulan Timika mengatakan...

Ijin kang.....
hehehehe.....

Cartz_Cathra mengatakan...

]]></b:skin yg ga ada sob...
padahal dh aku cari pake F3...

Kang Salman mengatakan...

Kalau begitus simpan saja di atas kode #header {

sahabatbk mengatakan...

izin copy ya kang... :)

anak negeri mengatakan...

masih gan tuisanya gag mendatar,diperjelas lagi tu...

Anonymous mengatakan...

izin copas kang

Kang Salman mengatakan...

@anak negeri sya tidak mengerti pesan Anda.

BIREUEN COMUNITY mengatakan...

Gw gx bisa uga nih

jelasin dolo y' sejelas2 @

Kang Salman mengatakan...

Penjelasan di bagian mana?
Tutorial ini sudah dibuat lengkap.

abqary"s blog mengatakan...

cara nyimpannya gimana??

Kang Salman mengatakan...

Simpan saja di bawah <body>

Acen mengatakan...

knp jdix menurun????

Becenk mengatakan...

tulisan warna merah.a mna gan ??

Kang Salman mengatakan...

Ada di atas, sudah saya perbaiki

Nan Sevenfoldism mengatakan...

Ass. Kang Salman,saya blogger pemula dari Purworejo salam kenal ni..saya mau tanya ni soal tutorial di atas kenapa pas saya pasang kok hasilnya gak seperti Screen shot di atas.posisi MY OFFICAL FORUM kok di center gak di left..itu saja blog saya http://a7xporeper.blogspot.com/

thanks..

Kang Salman mengatakan...

rubah kode text-align: center;
kata center menjadi left untuk header dan nav header

Muhammad Zaid Zuhdi mengatakan...

mas kok kebawah sih

Kang Salman mengatakan...

Kode tidak cocok dengan template. silakan modifikasi dan kostom sendiri :)

Gema Pradana mengatakan...

mancap kang....jln ke blog ane ya kang..

cindy flesilia mengatakan...

gmn sih cara nya dr td susah bgt

Ondeink mengatakan...

ijin copas bang....
hehehehe....
moga jadi amal jariyah....
amin......

Kang Salman mengatakan...

Bagi yang kesulitan, kode template ini akan bekerja di template lama, dan bila Anda menggunakan template baru bawaan blogger kode yang sya buat ini tidak akan berkerja dengan baik. Silakan mendownload template di zoomtemplate.com

Seputar Dunia.co.cc mengatakan...

kang, kok tulisan My Official forum di tengah ya, n kok larinya ke bawah, kok g nyamping kang....
tolong pencerahannya kang?

AboutCom mengatakan...

Keren kang isi blognya..

ichank_cooL mengatakan...

mantab kang :)

bagaz kara mengatakan...

kang template yang kayak gimana men yang bisa di pake??

Kelompok XII mengatakan...

kang kok saat login ga bisa

request invalid...begitu katanya??

Rechker mengatakan...

@aLL: jika anda belum bisa memasangnya,jgn sedih ,saya tau solusinya. coba liat demo'nya & liat artikelnya di http://www.rechkercommunity.co.cc/2011/12/trik-membuat-menu-sign-up-login-menu-di.html

@Kang Salman: silahkan Kang posting nya diganti,posting Kang Salman sbnrnya salah..

Lust & Love mengatakan...

makasi buat tutorialnya ya.. sukses selalu buat blog KUCOBA

fadhilahcikal mengatakan...

tempat login nya di sebelah mana gan

Kang Salman mengatakan...

Saya sudah tidak menggunakan widget ini lg jd tidak bisa dilihat

Tim A mengatakan...

kang punyaku sudah berhasil tampil maksimal tapi sayangnya ketika saya coba login ternayat harus melakukan dua kali. padahal saya dah punya akunnya. pertama, saya login di blog setelah saya enter akan masuk ke google account dan melakukan login lagi.

kira2 bisa tidak kang kita cukup melakukan satu kali saja login dan tentunya cukup melalui blog kita tanpa harus ke google lagi.

thanks kang.

salam

Kang Salman mengatakan...

Tdk bisa..
Kelemahannya saat ini adalah hal tersebut :(

erida sharash mengatakan...

mantaaap..suses terimakasih saya yang pemula ini bisa mengaplikasikannya di blog saya http://www.eridasharash.blogspot.com tapi saya blum tes

Gamal A.N mengatakan...

salam kenal bang ijin copas ya dan praktek.

Poskan Komentar