Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.

  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

[Blogger Tutorial] Hướng Dẫn Thêm Admin Control Panel Vào Blogger

Chủ đề thuộc danh mục 'Hướng dẫn/Thủ thuật Blogspot tại đây' được đăng bởi JusTa Khôi, 13/10/14.

Lượt xem: 7,407

  1. JusTa Khôi Thành viên cấp 3

    Sau đây mình xin hướng dẫn các bạn thêm 1 thanh control pannel vào blog của mình :D
    Admin Control Panel này do Mybloggerlab.com phát triển, Nó giúp bạn làm việc khá nhanh, Admin Panel này sẽ chỉ hiển thị cho admin hoặc tác giả của blog thấy thế nên nó sẽ chỉ xuất hiện khi bạn đăng nhập vào blogger của mình :D
    Bằng cách sử dụng thanh điều khiển này bạn có thể nhanh chóng post bài viết mới,chỉnh sửa bài viết,chỉnh sửa layout website...
    Ảnh Demo :
    uVnWIwa.png
    aA0aIVE.png

    Ok, và bây giờ là hướng dẫn cách thêm nó vào blog :))

    Đầu tiên bạn vào Template >> Edit HTML nếu bạn dùng tiếng việt thì Mẫu >> Chỉnh Sửa HTML
    Sau đó bạn tìm thẻ ]]></b:-skin> và thêm vào trên nó đoạn code sau:
    Code:
    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;
}
    Tiếp theo bạn tìm thẻ <body> và thêm vào sau nó :
    Code:
    <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.mybloggerlab.com"><img src='https://1.bp.
	
blogspot.com/-YyMN2VM2FGc/VDka36seHBI/AAAAAAAAFH0/gxXlBTMcJPU/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='&quot;http://www.
	
blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/src=sidebar&quot;'><i class='fa fa-pencil'/> New Post</a></li>
<li><a expr:href='&quot;http://www.
	
blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/target=page&quot;'><i class='fa fa-file'/> New Page</a></li>
<li><a expr:href='&quot;http://www.
	
blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#posts&quot;'><i class='fa fa-th-list'/> All Posts</a></li>
<li><a expr:href='&quot;https://www.
	
blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/target=post;postID=&quot; + data:blog.postId + &quot;&quot;'><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='&quot;http://www.
	
blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#pageelements&quot;'><i class='fa fa-wrench'/> Layout</a></li>
<li><a expr:href='&quot;http://www.
	
blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#templatehtml&quot;'><i class='fa fa-pencil-square-o'/> Edit Template</a></li>
  </ul>
</li>
<li><a expr:href='&quot;http://www.
	
blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#comments&quot;'><i class='fa fa-comment'/> Comments</a>
<ul class='child1'>
<li><a expr:href='&quot;http://www.
	
blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#pendingcomments&quot;'><i class="fa fa-bullhorn"></i> Pending Comments</a></li>
<li><a expr:href='&quot;http://www.
	
blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#spamcomments&quot;'><i class="fa fa-ban"></i> Spam Comments</a></li>
  </ul>
</li>

<li><a expr:href='&quot;http://www.
	
blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#basicsettings&quot;'><i class='fa fa-cog'/> Settings</a>
<ul class='child1'>
<li><a expr:href='&quot;http://www.
	
blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#basicsettings&quot;'><i class="fa fa-heart-o"></i> Basics</a></li>
<li><a expr:href='&quot;http://www.
	
blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#postandcommentsettings&quot;'><i class="fa fa-comments"></i> Post &amp; Comments</a></li>
<li><a expr:href='&quot;http://www.
	
blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#emailandmobilesettings&quot;'><i class="fa fa-mobile"></i> Mobile &amp; Email</a></li>
<li><a expr:href='&quot;http://www.
	
blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#languageandformattingsettings&quot;'><i class="fa fa-calendar-o"></i> Language</a></li>
<li><a expr:href='&quot;http://www.
	
blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#searchsettings&quot;'><i class="fa fa-search-plus"></i> Search Preference</a></li>
<li><a expr:href='&quot;http://www.
	
blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#othersettings&quot;'><i class="fa fa-code"></i> Other</a></li>
<li><a expr:href='&quot;http://www.
	
blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#overviewstats&quot;'><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://4.bp.
	
blogspot.com/-CQS3m0DjQEM/VDkSRYC5PNI/AAAAAAAAFGw/bEIJSiw4PGc/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>
    Save Template và vào lại web để tận hưởng thành quả :D

    ...

    Xem thêm các chủ đề cùng chuyên mục

    Facebook Group Việt Designer
    Tham gia nhóm
    Facebook Fanpage Việt Designer
    Thích trang
    JusTa Khôi, 13/10/14
    #1
    vannha11762, chicharito_achs, Tèo xike và 6 người khác thích bài viết này.
  2. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    Tuyệt vời ông mặt trời :D
    Phạm Hữu Dư, 13/10/14
    #2
    JusTa Khôi thích bài viết này
  3. dcnvnn

    dcnvnn Mới đăng kí

    Chết mất thôi. Cực kì hữu dụng. nút Thanks ở đâu hỉ ??
    dcnvnn, 1/11/14
    #3
  4. Akira Raiden

    Akira Raiden Mới đăng kí

    1. Mình không tìm được thẻ <body> nên mình nghĩ nhầm là thẻ </body>
    2. Mình làm y như trên sau khi xem blog thì bị thế này

    [​IMG]

    Mong bạn trả lời sớm giúp mình. Mình cảm ơn :(
    Akira Raiden, 14/2/15
    #4
  5. Akira Raiden

    Akira Raiden Mới đăng kí

    Thôi thanks bạn, mình tự làm được rồi :D. Cảm ơn bài viết của bạn, bài viết rất hữu ích
    Akira Raiden, 14/2/15
    #5
  6. Nhox_SoCk

    Nhox_SoCk Thành viên cấp 1

    Sao m ko tìm thấy thẻ ]]></b:-skin> b ơi @@
    Nhox_SoCk, 20/7/15
    #6
  7. Trương Ngọc Tuấn

    Trương Ngọc Tuấn Mới đăng kí

    Như wordpress luôn .ths bạn :D
    Trương Ngọc Tuấn, 17/12/15
    #7
  8. vannha11762

    vannha11762 Banned

    Hôm nay vô tình thấy cái này nên cho phép em đào nó lên, chuyện là em đã làm được giao diện như hình của bác rồi mà sao khi click vào các menu bất kì thì nó hiện ra như thế này nhỉ
    rX6FCNI.png
    Có ai bị như em không
    vannha11762, 10/12/16
    #8
Từ khóa:

Ủng hộ diễn đàn