CODEWITHSUNDEEP
htmlblogger
mshwf
mshwf

Reputation: 7449

How to to make a piece of HTML in blogger only visible to admins?

I want to add a control panel to my blog, I found this here:

<span class='item-control blog-admin'>
<style>
.control-panel ul{z-index: 20; position: absolute; margin: 0px auto; background-color: #F6F6F6; width: 100%; }
.control-panel ul li{display: inline-block; float: left; padding: 7px 0px;}
.control-panel ul li a {color:#686868;padding: 7px 15px;border-right: 1px solid #E3E3E3;font-weight: bold;font-size: 13px;}
.control-panel a:hover {text-decoration:none; color:#FC8F44;}
</style>
<div class='control-panel'>
<ul>
<li><a href='http://www.blogger.com/home'>My Blogs</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/src=sidebar&quot;' rel='nofollow'>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;' rel='nofollow'>New Page</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#posts&quot;' rel='nofollow'>All Posts</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#comments&quot;' rel='nofollow'>Comments</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#pageelements&quot;' rel='nofollow'>Layout</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#templatehtml&quot;' rel='nofollow'>Edit HTML</a></li>
<li><a href='#' onclick='location.reload(true); return false;'>Refresh</a></li>
<li><a href='/' target='_blank'>New Tab</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#basicsettings&quot;' rel='nofollow'>Settings</a></li>
<li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#overviewstats&quot;' rel='nofollow'>Stats</a></li>
<li><a href='http://www.blogger.com/logout.g'>Logout</a></li>
</ul>
</div>
</span>

I added it under the body of my blog's theme but the gadget is always hidden, is there a way to make it only visible to admin?

Upvotes: 1

Views: 743

Answers (1)

Prayag Verma
Prayag Verma

Reputation: 5651

For v2 templates, The above code should work as expected because of the presence of blog-admin class on the span tag. This element has CSS set to display:block only when an admin visits the blog. This is achieved using the following dynamic CSS file which Blogger automatically adds to every blog (The authorization for finding out whether the visitor is admin or not happens behind the scenes and we don't have to worry about that).

https://www.blogger.com/dyn-css/authorization.css?targetBlogID=XXXXX&amp;zx=XXXXX

In certain cases, template creators prevent loading this dynamic CSS file (likely because this CSS file is never cached and there is certainly a speed benefit even if its minimal) by replacing -

</head>

with

&lt;!-- 
</head>
--&gt; &lt;/head&gt;

In those cases, you will have to undo the steps to make sure that the dynamic CSS gets loaded.

For v3 themes, the quick editing feature is not supported by default.

quick editing not supported

Hence manually adding the dynamic CSS to the code will make things work -

<link href='https://www.blogger.com/dyn-css/authorization.css?targetBlogID=6752007275128684588&amp;zx=2f99e9cb-69f3-46cb-b0cf-85ae799dfa91' rel='stylesheet'/>
  • targetBlogID query parameter needs to be set to your BlogID
  • zx query parameter is an auto-generated parameter (and likely responsible for authorization)

Upvotes: 1

Related Questions