Tutorial Cara Membuat Panel Admin Blogspot

Tutorialku kali ini akan membahas bagaimana cara membuat Panel Admin Blogger di sebelahkan kanan. mungkin dari sobat sudah ada yang tahu atau mungkin juga sobat belum tahu apa yang dimaksut dengan tutorial yang aku share pada kesempatan kali ini. kalau sobat belum tahu apa yang dimaksud dengan panel admin silahkan lihat dulu di blog download free software RazzXP. di situ ada panel disebelah kanan blog silahkan klik pada image plus maka akan terbuka tentang admin blog.

tutorial seperti ini mungkin sobat juga pernah menjumpainya tau juga sobat belum pernah menjumpai, kalau sobat ingin tahu cara membuat panel admin seperti yang sudah aku katakan silahkan ikuti tips-tips cara membuat panel admin dibawah ini.

1. untuk mengawali tutorial ini silahkan sobat login ke blogger.
2. silahkan langsung menuju Edit Tamplate soalnya kita akan menaruh kode CSS di dalam tamplate kita. kalau sudah jangan lupa untuk mencentang expant tamplate. kalau sobat masih ragu silahkan backup dulu tamplate kalian, belum tahu cara backup tamplate? kalau belum tahu silahkan buka halaman Cara Membuat Navbar Dropdown di bawah Header.
3. kalau sudah kalian centang expant widget silahkan cari kode </b:skin>. kalau sudah ketemu silahkan taruh kode CSS dibawah ini tepat diatasnya.

Klik >>

.panel{position:fixed;top:20px;left:0;background:#000;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;border:1px solid #444;width:330px;height:auto;filter:alpha(opacity=85);-moz-opacity:0.85;opacity:0.85;display:none;padding:30px 30px 30px 100px}
.panel p{color:#ccc;margin:0 0 15px;padding:0}
.panel a,.panel a:visited{color:#9FC54E;text-decoration:none;border-bottom:1px solid #9FC54E;margin:0;padding:0}
.panel a:hover,.panel a:visited:hover{color:#fff;text-decoration:none;border-bottom:1px solid #fff;margin:0;padding:0}
a.trigger{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#333 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.trigger:hover{position:fixed;text-decoration:none;top:50px;left:0;font-size:16px;letter-spacing:-1px;font-family:verdana, helvetica, arial, sans-serif;color:#fff;font-weight:700;background:#222 url(http://lh6.ggpht.com/_xcD4JK_dIjU/S4QDwX8gRPI/AAAAAAAAD2U/TdhwLYRRzzA/d/plus.png) 85% 55% no-repeat;border:1px solid #444;-moz-border-radius-topright:10px;-webkit-border-top-right-radius:10px;-moz-border-radius-bottomright:10px;-webkit-border-bottom-right-radius:10px;-moz-border-radius-bottomleft:0;-webkit-border-bottom-left-radius:0;display:block;padding:15px 40px 15px 15px}
a.active.trigger{background:#222 url(http://lh3.ggpht.com/_xcD4JK_dIjU/S4QDvxbreOI/AAAAAAAAD2M/Cz3Q2r5pdTM/d/minus.png) 85% 55% no-repeat}
.columns{clear:both;width:330px;line-height:22px;padding:0 0 20px}
.colleft{float:left;width:130px;line-height:22px}
.colright{float:right;width:130px;line-height:22px}
a:focus{outline:none}
.panel img{background-color:#262626;border:1px solid #333;float:right;margin:3px 3px 6px 8px;padding:5px}
.panel h3{border-bottom:1px solid silver;margin-bottom:5px;padding-bottom:3px;text-align:left;clear:both;color:#FFF;font-size:12px;font-weight:700}
.columns ul,.columns ul li{list-style-type:none;margin:0;padding:0}

4. kalau sobat sudah menempatkan kode CSSnya silahkan taruh kode Javascript di bawah ini dibawah kode </b:skin>.

<script src='http://coderazz-xp.googlecode.com/files/panel.js' type='text/javascript'/>

5. kalau sudah kalian taruh semua kodenya silahkan cari lagi kode </body>. dan taruh kode dibawah ini tepat diatasnya.

Klik >>

<div class='panel'>
<h3>Selamat Datang Alias Welcome</h3>
<p style='text-align:justify'>
Selamat datang di blog
<font color='#FF0000'>
<strong>RazzXP</strong></font>
, saya harap anda senang berada diblog sederhana ini. Blog ini saya tulis dengan komputer yang sederhana dan koneksi internet yang juga sederhana. Saya berharap Anda sering datang ke blog ini. Silahkan anda mencari hal-hal yang baru di blog saya ini untuk mendapatkan update terbaru mungkin yang anda cari ada di bloh ini.</p>
<h3>Sekilas tentang Admin</h3>
<img height='73px' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguP08sfoFq4kxZDw_XlqIwi5ZnvI6EbcvWe_V0yd-ZGqplXFrH2d9KWtXJFRR0lfKQPkOdnxoAw4cSck99MWqq9ZzJ9rXsATwhBnRmRcMXZkLeRpo-zIhtL6-_wyG-d_SzxIirx3nKyHI/s1600/huil.png' width='73px'/>
<p style='text-align:justify'>Photo di samping adalah logo dari blog
<font color='#FF0000'><strong>RazzXP</strong></font>
dan sebagai sumber inspirasi blog ini. Nama saya
<font color='#00FF00'><strong>Nur Huda Ahmad</strong></font> saya seorang yang sederhana yang ingin belajar blogger. Saya mulai belajar blogger sejak bulan februari 2011, dan blog ini saya buat pada bulan Juni 2012. sampai sekarang masih aktif. semoga blog yang saya bangun bisa bermanfaat buat yang mencarinya...</p>
<div style='clear:both;'></div>
<div class='columns'>
<div class='colleft'>
<h3>My Blog</h3>
<ul>
<li><a href='http://gemakreasisantri.blogspot.com/' rel='nofollow' title='My Blog Gema Santri'>GEMA SANTRI</a></li>
<li><a href='http://razz-xp.blogspot.com/' rel='nofollow' title='My Blog RazzXP'>RAZZ-XP</a></li>
<li><a href='http://pro-gamexp.blogspot.com/' rel='nofollow' title='download game PC'>PRO GAME-XP</a></li>
<li><a href='http://giga-watt.blogspot.com/' rel='nofollow' title='Tutorial Blogger'>GIGA WATT</a></li>
</ul>
</div>
<div class='colright'>
<h3>Social Stuff</h3>
<ul>
<li><a href='#' rel='nofollow' title='send my email'>Gmail</a></li>
<li><a href='#' rel='nofollow' title='Twitter'>Twitter</a></li>
<li><a href='#' rel='nofollow' title='Facebook'>Facebook</a></li>
<li><a href='#' rel='nofollow' title='About Me'>Google Plus</a></li>
</ul>
</div>
</div>
<div style='clear:both;'></div>
</div>
<a class='trigger' href='#'>Info</a>
</div></div>

Nb. silahkan kalian ganti semua URL atau links yang sudah aku beri tanda merah dan semua info mengenai sobat baik itu info dari kepribadian sobat sendiri atau juga social media seperti Facebook, Twitter, Google plus atau juga Email.

kalau sudah sobat ikuti langkah-langkahnya dengan benar sekarang silahkan sobat simpan tamplate sobat. kalau belum berhasil dengan tutorial cara membuat panel Admin ini silahkan sobat komentar dibawah atau sobat ulangi dari awal tutorial diatas, saya kira cukup sekian tutorial yang bisa aku share pada kesempatan kali ini semoga bisa membawa kesuksesan di blog kalian. Happy blogging dari Giga Watt.