Tips Dan Trik Cara Membuat Control Panel Admin Di Blogger - Toturial Ini untuk memberikan fasilitas administrator blog untuk membuat perubahan di blog mereka dengan kemudahan dan kecepatan. Panel Admin ini hanya akan terlihat ke blog administrator atau penulis, bukan untuk pembaca biasa. Yang berarti hanya akan muncul, jika administrator blog login ke akun blogger-nya. Untuk memberikan Anda lebih banyak gambaran panel admin, saya tampilkan
screenshot di bawah ini yang menunjukkan bagaimana dan di mana ia akan muncul. Dengan menggunakan panel admin ini, Anda dapat dengan cepat mengakses pesan baru, mengedit posting, edit html, komentar, tata letak dan lain-lain.
 |
Tips Dan Trik Cara Membuat Control Panel Admin Di Blogger
Cara Membuat Control Panel Admin di Blogger Cara Buat Panel Admin Kontrol di Blogger:
Hal pertama yang perlu Anda lakukan adalah login ke account blogger Anda. Pada blogger dashboard, pilih salah satu blog di mana Anda ingin menginstal control panel Admin. Setelah memilih, masuk ke Template >> Edit HTML >> dan cari tag ]]></ b:skin> dan paste kode dibawah ini tepat di atas kode tersebut : |
Spoiler:
.admin-controll,.admin-controll * { margin: 0; padding: 0; list-style: none; list-style-type: none; line-height: 1.0; } .admin-controll ul { position: absolute; top: -999em; width: 100%; } .admin-controll ul li { width: 100%; background: 333333; } .admin-controll li:hover { visibility: inherit; } .admin-controll li { float: left; position: relative; } .admin-controll a { display: block; position: relative; } .admin-controll li:hover ul,.admin-controll li.sfHover ul { left: 0; top: 100%; z-index: 99; } .admin-controll li:hover li ul,.admin-controll li.sfHover li ul { top: -999em; } .admin-controll li li:hover ul,.admin-controll li li.sfHover ul { left: 100%; top: 0; } .admin-controll li li:hover li ul,.admin-controll li li.sfHover li ul { top: -999em; } .admin-controll li li li:hover ul,.admin-controll li li li.sfHover ul { left: 100%; top: 0; } .mbl-admin-bar { margin: 0px; direction: ltr; color: #ccc; font: 400 13px/32px "Open Sans",sans-serif; height: 32px; position: fixed; top: 0; left: 0; width: 100%; min-width: 600px; z-index: 99999; background: #222; float: left; } .mbl-admin-bar li a { display: block; color: #fff; padding: 7px 15px; font-weight: 400; text-decoration: none; font-size: 14px; } .mbl-admin-bar li li a { font-size: 15px; color: #fff; float: none; padding: 0px; width: 0; } ul.children { color: #fff; background: #333333; font-size: 18px; min-width: 230px; padding: 10px; float: right; margin-left: -98px; } .mbl-admin-bar li a:hover,.mbl-admin-bar li a:active,.mbl-admin-bar li a:focus,.mbl-admin-bar li:hover > a,.mbl-admin-bar li.current-cat > a,.mbl-admin-bar li.current_page_item > a,.mbl-admin-bar li.current-menu-item > a { color: #38b8f0; background: #333333; } .fa { font-size: 18px; color: #999; margin-right: 5px; } .fa.fa-user { font-size: 50px; float: left; padding: 20px; border: 1px solid #212121; background: #575757; } ul.children img { width: 80px; height: auto; float: left; margin-right: 10px; } ul.children a { margin-top: 10px; } li.mright { float: right; } li.mblogo a { padding: 3px 15px 3px 15px!important; } ul.child1 { min-width: 180px; color: #fff; background: #333333; } ul.child1 li a { padding: 10px; width: 100%; background: #333333; }
Sekarang masih dalam template, cari pembuka tag <body> . Paste Kode dibawah ini tepat di bawah kode berikut body tersebut:
<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/><link href='http://fonts.googleapis.com/css?family=Open Sans:400' rel='stylesheet' type='text/css'/> <span class='item-control blog-admin'><div class='span-24'><div class='mbl-cpanel'><ul class='admin-controll mbl-admin-bar'> <li class='mblogo'><a href="http://www.masterr-seo.blogspot.com"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4nFPiK22Rs6bOi3dKfQEja5eCkyeMtKkpLmz9KuBieC9XXLnbddVyOH0IGYcqo_9KR1Eqn6ivAjkubu68VVluAR_o9BmE0xF6ipH_eACCXPGFMDUvy8-bbWGkhffn76J6YIBbarb8Fo8/s1600/v.pn'/></a></li> <li class='blog-title'><a expr:href='data:blog.homepageUrl'><i class='fa fa-tachometer'/> <data:blog.title/></a></li><li><a href='http://www.blogger.com/home'><i class='fa fa-puzzle-piece'/> Dashboard</a></li>
<li><a href="#"><i class="fa fa-pencil"></i> Posting</a><ul class='child1'> <li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/src=sidebar"'><i class='fa fa-pencil'/> New Post</a></li><li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/target=page"'><i class='fa fa-file'/> New Page</a></li><li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#posts"'><i class='fa fa-th-list'/> All Posts</a></li><li><a expr:href='"https://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/target=post;postID=" + data:blog.postId + ""'><i class="fa fa-pencil-square"/>Edit Post</a></li> </ul></li> <li><a href="#"><i class="fa fa-cogs"></i> Customize</a><ul class='child1'><li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#pageelements"'><i class='fa fa-wrench'/> Layout</a></li><li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#templatehtml"'><i class='fa fa-pencil-square-o'/> Edit Template</a></li> </ul></li><li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#comments"'><i class='fa fa-comment'/> Comments</a><ul class='child1'><li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#pendingcomments"'><i class="fa fa-bullhorn"></i> Pending Comments</a></li><li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#spamcomments"'><i class="fa fa-ban"></i> Spam Comments</a></li> </ul></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#basicsettings"'><i class='fa fa-cog'/> Settings</a><ul class='child1'><li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#basicsettings"'><i class="fa fa-heart-o"></i> Basics</a></li><li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#postandcommentsettings"'><i class="fa fa-comments"></i> Post & Comments</a></li><li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#emailandmobilesettings"'><i class="fa fa-mobile"></i> Mobile & Email</a></li><li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#languageandformattingsettings"'><i class="fa fa-calendar-o"></i> Language</a></li><li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#searchsettings"'><i class="fa fa-search-plus"></i> Search Preference</a></li><li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#othersettings"'><i class="fa fa-code"></i> Other</a></li><li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#overviewstats"'><i class='fa fa-signal'/>Stats</a></li> </ul></li>
<li class='mright'><a href='#'><i class='fa fa-signal'/> Howdy, Admin</a><ul class='children'><li><img src='URL GAMBAR PHOTO ANDA'/><div class='mauthor'><br/>Aulia Aprifky</div><a href='http://www.blogger.com/logout.g'> Logout</a></li></ul></li></ul></div></div></span>
Sesuka atau Terserah Anda jika Anda ingin menyesuaikan panel admin sesuai dengan kebutuhan Anda maka edit CSS dan HTML Kode tersebut. Setelah semuanya selesai, simpan template dengan menekan "Simpan Template". Selamat, Anda telah berhasil menambahkan Control Panel Admin di Blogger. Saya berharap tutorial ini akan berguna bagi semua pengguna blogger. Terima Kasih Salam