assalamualaikum wr. wb
hay para pengguna blogger and sobat blogger khusu nya yang lagi membaca postingan / artikel ini.
sobat blogger kali ini saya akan membagikan cara membuat wigdet admin panel pada blogger seperti blogger wordpress itu kalian
Bagi sobat nih yang telah menghapus navbar blogger, mungkin merasa canggung untuk pergi semua jalan melalui dashboard untuk membuat, mengedit, mengubah pengaturan atau membuat kustomisasi blog Anda. Oleh karena itu, saya pikir untuk datang dengan sesuatu yang ditingkatkan dan lebih baik daripada default blogger navbar. saya telah mengembangkan sangat profesional Blogger Admin Control Panel yang akan membantu blog administrator untuk melakukan pekerjaan agak cepat. Hari ini dalam artikel ini, saya akan membagikan tutorial bagaimana untuk membuat sebuah wigdet Control panel admin di Blogger.
Apa Itu Admin Control Panel
wigdet admin control panel Ini adalah untuk menyediakan fasilitas yang membuat perubahan di blog mereka dengan kemudahan dan kecepatan blog administrator. Admin Panel ini hanya akan terlihat untuk blog admin blog nya atau penulis, tidak untuk orang yang mengunjungi blog ini ataupun pembaca. Yang berarti hanya akan muncul, jika admin blognya log in ke akun blogger.
Untuk memberikan Anda gambaran lebih dari admin panel, saya telah terpasang screenshot di bawah ini yang menunjukkan bagaimana dan di mana itu akan muncul. Dengan menggunakan panel admin ini, Anda dapat dengan cepat mengakses posting baru, mengedit posting, edit html, komentar, tata letak dan dll.
oke mari kita bahas cara memasang wigdet nya
yang paling pertama sobat harus dalam masuk blogger. silahkan yang belum masuk blogger masuk dahulu pada blogger nya. nah jika sobat sudah di dasboard blogger mari kita loncatin dulu gambar ini lanjutkan ke bawah tutorial nya ya
Yoo mari kita lanjutin artikel di atas tentang cara membuat wigdet admin panel pada blogger
tadi di atas baru nyampe dasboard blogger ya artikel nya.
nah sekarang jika sobat sudah di dasboard blogger coba sobat pilih Menu Navigasi di sidebar kiri Pada Template lalu Klik Edit HTML untuk Lebih jelas lihat gambar di bawah ikutin pada nomer nomer nya
Jika sobat sudah pada from edit HTML
Coba sobat Klik CTRL + F agar pecarian nya gampang nah di kotak atau Kolom Pencarian Tulis Code ]]></b:skin>
jika sudak lalu Klik Enter nah Pastekan Code Css di bawah di atas code ]]></b:skin>
[code type="CSS"].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;
}[/code]
Oke sobat jangan dulu kemana mana ya coba sobat CTRL + F lagi lalu cari code <body>
namun jika tidak ketemu body yang begin <body> coba sobat cari code body yang begini </body>
namun jika sobat masih belum ketemu juga code </body>] yang ini coba sobat scrool di terus ke bawah sampe mentok nah perhatikan kalo code </body> penutup adanya di paling bawah dekan code penutup </HTML>
NAh jika sudah ketemu Code </body> ataupun code <body>
Sobat Patekan Script Di Bawah ini
[code type="HTML"]<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.bls-cyber.tk"><img src='http://www.bls-cyber.tk/favicon.ico'/></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'/> Hello, Admin</a>
<ul class='children'>
<li><img src='https://1.bp.blogspot.com/-hTIobJgFyds/V9tDfPn0ZZI/AAAAAAAAE_k/ZTWiAxV-AKYUIoVS4yzBe70D5MQ2oKA1wCLcB/s1600/BLSCYBER.png'/>
<div class='mauthor'><br/>BLSCYBER</div>
<a href='http://www.blogger.com/logout.g'> Keluar</a></li>
</ul>
</li>
</ul>
</div>
</div>
</span>[/code]
1. Untuk Code <body> pembuka sobat harus pastekan nya di bawah code
2. Untuk Code Penutup Sobat Pastekan nya di atas code body Penutup
Jika langkah Di atas sudah sopbat ikutin tutorial nya
sekarang sobat Simpat Template nya jika sudah di simpan Lalu Li9hat Blog nya
Namun Ubah lah yang script di atas nama sama Photo dan URL bls-cyber sama icon nya yang lain nya jangan
Terima kasih Jika ada yang kurang paham silahkan comment sobat saya siap bantu ko cara memasang nya
Terima kasih
Wassaolamualikum Wr. Wb.
