Cách thêm bảng điều khiển Admin cho Blog

Hôm nay mình chia sẽ cho các bạn Code tạo Thanh Điều Khiển Dành cho ADMIN Blog.

Đầu tiên các bạn Login vào Blog-Chỉnh sửa HTML.

Thêm CSS Bằng cách tìm ]]></b:skin>

/*Bảng Điều Khiển ADMIN*/
.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:0;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:#999999;padding:7px 15px;font-weight:400;text-decoration:none;font-size:14px}
.mbl-admin-bar li li a{font-size:13px;color:#999999;float:none;padding:0;width:0}
ul.children{color:#999999;background:#333333;font-size:13px;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}
.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:#999999;background:#333333}
ul.child1 li a{padding:10px;width:100%;background:#333333}

Thêm Bên Trên b:skin

Tiếp theo các bạn muốn nó xuất hiện trên đầu Blog như mình thì Tìm để thẻ <body

<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'/>

<div class='span-24'>
<div class='mbl-cpanel'>
<ul class='admin-controll mbl-admin-bar'>
<li class='mblogo'><a href='http://www.thuthuatpc4x.tk/'><img src='http://www.thuthuatpc4x.tk/favicon.ico'/></a></li>
<li class='blog-title'><a expr:href='data:blog.homepageUrl'> <data:blog.title/></a></li>
<li><a href='http://www.blogger.com/home'> Dashboard</a></li>

<li><a href='#'> Posting</a>
<ul class='child1'>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/src=sidebar"'> New Post</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#editor/target=page"'> New Page</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#posts"'> 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 + ""'>Edit Post</a></li>
</ul>
</li>
<li><a href='#'> Customize</a>
<ul class='child1'>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#pageelements"'> Layout</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#templatehtml"'> Edit Template</a></li>
</ul>
</li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#comments"'> Comments</a>
<ul class='child1'>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#pendingcomments"'> Pending Comments</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#spamcomments"'> Spam Comments</a></li>
</ul>
</li>

<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#basicsettings"'> Settings</a>
<ul class='child1'>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#basicsettings"'> Basics</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#postandcommentsettings"'> Post & Comments</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#emailandmobilesettings"'> Mobile & Email</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#languageandformattingsettings"'> Language</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#searchsettings"'> Search Preference</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#othersettings"'> Other</a></li>
<li><a expr:href='"http://www.blogger.com/blogger.g?blogID=" + data:blog.blogId + "#overviewstats"'>Stats</a></li>
</ul>
</li>

<li class='mright'><a href='https://www.facebook.com/adminthuthuatpc4x'> ADMIN Blog</a>
<ul class='children'>
<li><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOTJJ0Y8XTb4LU0inpofcp4LXIdSSSDMSZaYymu26ppnVQ27bX8MGsHQm9dptAt0RAgNexzW3UI1e3mxjxZh2I8cqlY0YMec-dOfpXuglDLlETqoXfgb3m578Uu-UEz6RXmRhGB1M4_Nej/s400/nt.jpg'/>
<a href='http://www.blogger.com/logout.g'>Đăng Xuất</a></li>
</ul>
</li>
</ul>
</div>
</div>

Sau khi thêm code vào các bạn Lưu lại Template và Test.

Code được viết bới Mybloggerlab.com được mình edit lại một số thứ.

Copy nhớ để lại nguồn nha. >

Cách thêm bảng điều khiển Admin cho Blog

thunghiemtemplate

Báo cáo vi phạm

Giới thiệu về tôi

Phát Triển Từ Tháng 8/2017

Tìm kiếm Blog này

Lưu trữ Blog

Tìm Theo Mục

Thành Viên Trực Tuyến

Youtube

Theo Dõi ADMIN Để Xem Thủ Thuật Mới Nhất

Kém Duyên EDM NT MIX

Website Bạn Bè

Keyword

Quảng Cáo

Top Tuần

Nhận xét mới

Tiêu điểm