Admin Panel Widget For Blogger (Only Visible To Admin)

6/16/2013 Beginners Guide , CSS , Widgets 0 Comments

Hi guys as i said before that i would by designing widgets then templates for blogger so this time i have an Admin Panel widget for your blog only visible to admin of the blog.

Install It Into Blogger

1. Log Into Blogger Dashboard
2. Navigate To Template
3. Click On Customise
4. Then click on Advanced
5. And there scroll down
6. And click Add CSS
7. Paste The following CSS there

span.panel_adm{display:block;background:#f4f4f4;width:220px;height:75px;border:1px solid #e8e8e8}
.panel_adm strong{font-size:15px;display:block;width:100%;border-bottom:1px solid #e8e8e8;text-indent:6px;padding:4px 0;margin-bottom:10px}a.Dashboard{background-image: url(data:image/gif;base64,R0lGODlhEgARALMAALu7u6WlpcfHx46OjoODg2FhYZmZmenp6WxsbHd3d93d3VVVVdLS0rCwsPT09EpKSiH5BAAAAAAALAAAAAASABEAAARW0MkpAaA4t/da/hvXfVQojqR5opi6spI6HEdwevGJUMntACsDxXYC2BCiAqUgQgodKoJAQDgFDhPB6yWgKF6LFQOzAnxPGaZoYDgtMr0tJ5EZyDmESQQAOw==);background-repeat:no-repeat;background-position:10% 10%}
a.new-post{background-image:url(data:image/gif;base64,R0lGODlhEgAQALMAAHd3d93d3cfHx2FhYWxsbIODg46OjrCwsFVVVdLS0kpKSvT09AAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAASABAAAARCcMlJZULq1D2P+gFHJUPiIaG4XApiJuqKfUMsfy2ssp8b87nfLBgD4HyxgoBA3LUEAF3M8CHYJAEFQHNdHATd8CYCADs=);background-repeat:no-repeat;background-position:10% 12%}
a.Dashboard, a.new-post {display:inline-block;height:22px;padding:4px 0 0 28px;color:#3399cc;font-size:12px}
a.Dashboard{margin-right:24px}
a.new-post:hover,a.Dashboard:hover{text-decoration:underline !important;}

8. Click on Apply To Blog
9. After it is applied click on Back To Blogger
10. Now Navigate to Layout
11. Click On Add a Gadget
12. Scroll Down
13. Select HTML/JavaScript
14. Paste the following HTML there.

<span class='item-control blog-admin'> <span class="panel_adm"> <strong>Admin Panel</strong> <a class="Dashboard" href="http://www.blogger.com/blogger.g?blogID=1546328745671234986#overview" target="_self" title="Dashboard">Dashboard</a> <a class="new-post" href="//www.blogger.com/post-edit.g?blogID=1546328745671234986&from=pencil" target="_self" title="new-post">New Post</a> </span> </span>

• Now change the orange highlighted with your blog id (On the new pop out window of HTML/JavaScript,Above there you will see something like this blogID=1546328745671234986 after blogID in your browser pop out window you will see  some numbers copy that numbers and replace them with these numbers.)