Demo Khanhnguyen 5: Thêm Admin Control Panel truy cập Blogger Dashboard từ Blog

Admin Control Panel là một công cụ truy cập trực tiếp vào Dashboard của Blogger khi bạn đang trên trang Web/ Blog của mình. Nó do Mybloggerlab.com phát triển, Nó giúp bạn làm việc khá nhanh, Admin Panel này sẽ chỉ hữu dụng cho admin của blog nên nó sẽ chỉ xuất hiện khi bạn đăng nhập vào blogger của mình bằng chính Account của Blogger.

Bằng cách sử dụng thanh công cụ điều khiển nầy, bạn có thể nhanh chóng tạo bài viết mới, chỉnh sửa bài viết,chỉnh sửa layout, vào Template để chỉnh sữa Source Code, hoặc thiết lập một số tính năng cho Blog website...

Cách làm cụ thể như sau:

- Vào Template >> Edit HTML

- Sau đó bạn tìm thẻ ]]></b:skin> và thêm vào trên nó đoạn code sau:

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;}

- Tìm tiếp thẻ <body> </body>và thêm vào bên trong nó đoạn Code 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'/>

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgycU-DfuAf0CdtwSDPla8ULfV3t324gZD5pIsYwnveng98WpcQJ-efPCU4qeaeMg3kaPaEotAf5nlOGZlLtQC7kgiUqe09byOFOiwLre4i10Lmnpb0XHQlBqhddanlAP6t9AwB2c76_44/s1600/v.pn'/></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='#'>Howdy, Admin</a>
<ul class='children'>
<li><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOiLcWnB1p1lzny7YHhy8XrY-0R4I2m7FT-Zk3rzUm5fCnM37COow493hMocUCFgktBIJ_fAxwV23cnvrg1TYhAbBgPkwHBirW8pqfqBNZvpY1desJyK1zdTqucvosmWtgG3EAvF-KbDY/s1600/faizan.png'/>
<div class='mauthor'> Syed Faizan Ali</div></li>
<a href='http://www.blogger.com/logout.g'>Logout</a>
</ul></li></ul></div></div>

- Save Template trước khi thử chạy ứng dụng của Blog nhé.

Tin là bạn sẽ làm được nếu bạn làm đúng theo tiến trình hướng dẫn. Chúc các bạn thành công.

Bạn có thể xem thử Demo của mình ở đây:

Mỡ trang Link

Tổng hợp: Khanhnguyen' s Blog

Demo Khanhnguyen 5

Chủ Nhật, 9 tháng 7, 2017

Thêm Admin Control Panel truy cập Blogger Dashboard từ Blog

Không có nhận xét nào:

Đăng nhận xét