 |
| Hướng dẫn tạo bảng điều khiển control panel admin trong blogspot |
Blogger mặc định ban đầu là trên thanh tiêu đề có bảng điều khiển của admin, nhưng một tempalte đẹp thì hầu như là đã xóa navbar, và các bạn sẽ không nhìn thấy bảng điều khiển trên thanh tiêu đề của blog nữa, vì bạn đã thay đổi cài đặt hoặc thực hiện bất kỳ tuỳ biến của blog của bạn.
Vì vậy,
PhucNguyenit nghĩ rằng để đến với một cái gì đó được tăng cường và tốt hơn so với thanh điều hướng blogger mặc định.
Chúng tôi đã phát triển một Blogger
Admin Control Panel chuyên nghiệp cao sẽ giúp quản trị viên blog để làm những công việc khá nhanh chóng.
Hôm nay trong bài viết này,
PhucNguyenIT sẽ chỉ cho bạn
Làm thế nào để tạo ra một bảng điều khiển chi tiết Admin Control Panel trong Blogger.Blogger Admin Control Panel là gì?
Nó là cung cấp cho quản trị viên blog của một cơ sở thực hiện thay đổi trong blog của họ một cách dễ dàng và tốc độ. bảng điều khiển Quản trị viên này sẽ chỉ được hiển thị với blog của quản trị viên hoặc tác giả,độc giản hoặc thành viên đăng ký cũng không thể nhìn thấy bảng điều khiển này. Có nghĩa là nó sẽ chỉ xuất hiện, nếu quản trị viên blog đăng nhập vào tài khoản blogger của mình. Để cung cấp cho bạn cái nhìn tổng quan hơn về bảng quản trị, PhucNguyenIT có kèm theo một ảnh chụp màn hình dưới đây cho thấy làm thế nào để tạo và nơi mà bảng điều khiển admin sẽ xuất hiện. Bằng cách sử dụng bảng quản trị này, bạn có thể nhanh chóng truy cập vào bài viết mới, chỉnh sửa bài viết, chỉnh sửa html, ý kiến, bố trí và vv |
| bảng điều khiển control panel |
Làm thế nào để tạo một bảng Admin Control trong Blogger:
Điều đầu tiên bạn cần làm là đăng nhập vào tài khoản blogger của bạn. Bây giờ trên blogger bảng điều khiển, chọn một blog mà bạn muốn cài đặt bảng điều khiển quản trị. Sau khi chọn, vào Template >> Edit HTML >> và tìm kiếm ]]></b:skin> tag dán đoạn mã sau vào trên nó :
.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;
}
Bây giờ một lần nữa trong các mẫu, tìm kiếm mở <body> tag. Một khi bạn có thể tìm thấy các từ khóa, ngay dưới nó dán đoạn mã sau:
<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://phucnguyenit.blogspot.com"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj49EB5W36FVwuZojVuqkBiLJ_Ga_s2JbkP9K-4G29XSPSL3XQ7wOO8S_qO2_BHWjahS_mKX0MTGady7GuQWYe6tkUYCMbG8xa6KsjkxdM_dJUfcFEruAfHqyBukwT0lOVwkpaQlWhKSwI/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://phucnguyenit.blogspot.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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQqx3YUK9lWIjZFnnXhyphenhypheng7lQyAZl5Ye1u2nFfcI7uMPJmDTfQE3UCX3fuNejhkZtD-gao6fkqFYLVFxf_NlIjoCW-P5Gh__T4hPdIUKesxQxCy-ovXHRu16nisi1ei0VES9kLd0QxKlZc/s1600/faizan.png'/>
<div class='mauthor'><br/>Syed Faizan Ali</div>
<a href='http://www.blogger.com/logout.g'> Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
</span>
Đó là vào bạn nếu bạn muốn tùy chỉnh bảng quản trị theo yêu cầu của bạn sau đó cảm thấy tự do để chỉnh sửa cả CSS và HTML Codes. Một khi tất cả mọi thứ được thực hiện, lưu mẫu bằng cách nhấn nút "Save Template" trên đầu trang. Xin chúc mừng, bạn đã thêm thành công Admin Control Panel trong Blogger. PhucNguyenIT hy vọng hướng dẫn này sẽ được nhiều hữu ích cho tất cả người dùng blogger. Nó thực sự là một sự thay thế tuyệt vời để thanh điều hướng mặc định của blogger. Đừng chia sẻ suy nghĩ của bạn về bảng quản trị và làm thế nào chúng ta có thể làm cho nó thậm chí còn tốt hơn.Chú ý: Widget này chỉ được tạo ra bởi PhucNguyenIT.Blogspot.com bất cứ ai sử dụng code trên của PhucNguyenIT hoặc bất cứ ai sao chép đều phải ghi nguồn http://PhucNguyenIT.Blogspot.com không các bạn sẽ đối mặt với pháp lý(khứu nại với google)..hãy tôn trọng bản quyền của người viết !
Nguồn chia sẻ : http://PhucNguyenIT.Blogspot.comTừ khóa nội dung : tạo bảng điều khiển blogspot, admin control panel blogger
0 Nhận xét