cara membuat halaman admin seperti di wordpress pada blogger
cara membuat halaman admin seperti di wordpress pada blogger
Hallo selamat sore sahabar PerampokGoogle sudah pada bangun belum ? Hmm jangan kebanyakan begadang ya nanti atit hhahahahaha, Sore ini saya ada Tutorial bagus ne buat edit tampilan blogger sobat semua jadi lebih profesional.Bagaimana tidak dengan memasang tampilan seperti ini sobat jadi tidak akan kesusahan lagi dalam melakukan kegiatan blogger sobat. Jadi kali ini saya akan kasih tips 'Bagaimana cara memasang atau membuat halaman admin seperti di wordpress pada blogger' Tertarik untuk mencoba ?
Jika belum tertarik coba lihat gambar dibawah ini, Setelah blogger di tambah halaman admin nya pasti tertarik buat, Menerapkan nya diblogger sobat masing masing
Pertama mari kita lihat halaman admin wordpress !
Langkah pemasang halaman admin seperti wordpress di blogger :
- Login ke dashboard blogger https://www.blogger.com
- Pilih menu Template
- Klik Edit HTML
- Cari kode </style> atau ]]></b:skin> terus letakan kode css dibawah ini tepat diatasnya.
.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;
}
Kemudian letakan kode dibawah ini tepat diatas kode pada template sobat masing masing.
<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.perampokgoogle.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgadd8QdqKAil4JGgZ4HQ4gjXWHyk6Si1gNTIQuWJV_8OTkvRgOrnd217afdJGnpQJSBpCFUxWDSjxhMyQZ_P6VfSTV3E7C-WUfgciTotPURk5TcgWLhD9Mi0eCXaUbpiT1VBBBr8POs0/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'/> 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'/> 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'/> Pending Comments</a></li> <li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#spamcomments"'><i class='fa fa-ban'/> 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'/> Basics</a></li> <li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#postandcommentsettings"'><i class='fa fa-comments'/> Post & Comments</a></li> <li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#emailandmobilesettings"'><i class='fa fa-mobile'/> 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'/> Language</a></li> <li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#searchsettings"'><i class='fa fa-search-plus'/> Search Preference</a></li> <li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#othersettings"'><i class='fa fa-code'/> 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='https://lh6.googleusercontent.com/-Vbzn7Tzt-1c/AAAAAAAAAAI/AAAAAAAAH5Q/fOoNkkMgSYE/s512-c/photo.jpg'/> <div class='mauthor'><br/>PerampokGoogle</div> <a href='http://www.blogger.com/logout.g'> Logout</a></li> </ul> </li> </ul> </div> </div> </span>
Sekarang save template dan lihat hasilnya keren bukan jangan lupa komentar jika ada masalah hati eeeh masalah tutorial diatas ini hahahahahaa ^_^
Love u All. . .
