XtQAdminBar v. 1 - Quick Admin Bar Script for Xtgem Site

Using Xtgem service to build a site? I think Xtgem is became the best wapsite builder service and stand ahead of the other services. Not only build a simple site, but Xtgem with its advanced features allow us to build a complex site using the features provided, and one of them is Blog function or XtBlog.

But one problem on using XtBlog is when we are about to edit a post. It's no problem if we only have simple blog with a few posts, but how if we have dozens or hundreds of post in our xtgem site and we want to edit a post? We must looking from dozens or hundreds of the posts list in the xtblog block in file browser (That could be a serious headache :D ).

And that's when this script will come useful. I called this script as "XtQAdminBar". This script will add a floating admin bar on your xtgem wapsite. The main objective for this script is to make easier to manage your xtblog by adding quick shortcut links, especially a link to edit your current viewed post.

I got the original script from Mr. Graham@Xtgem, then I made some little necessary modification here.

Demo:

xtquickadminbar demo mobile

xtquickadminbar demo desktop web

Main code

This is the main code, place the code in your _footer file.
<!--parser:xtscript-->
# START CONFIGURATION
var $admin_hash= YOUR_BLOG_ID
var $key = 1234
get admkey
if $admkey
call cookie::set $name=admin; $val=$admkey; $expire=31468608
endif;
#END CONFIGURATION
var $admin = call cookie::get $name=admin;$default=0
if $admin != $key
goto @end_qedit
endif;
var $site= <xt:url type="domain"/>
var $path=<xt:url type="path" urlencode="yes"/>
print <div id="admin-bar" class="w3-dark-grey" style="position:fixed;top:30px;right:0;max-width:100%;overflow:hidden;opacity:0.9;padding:0 10px"><div class="btn-group btn-group-xs pull-left"><a class="btn btn-default" onClick="closeAdminBar()" style="color:orange !important"><b>[X]</b></a>;
get __xtblog_entry
if $__xtblog_entry
print <a class="btn btn-default" href="http://xtgem.com/blog/entry/edit?entry_id=$__xtblog_entry&blog_id=$admin_hash&file=$path" target="xtgem">Edit Post</a><a class="btn btn-default" href="http://xtgem.com/blog/entry/add?blog_id=$admin_hash&type=1&file=$path" target="xtgem">New Post</a>
endif;
print <a class="btn btn-default" href="http://xtgem.com/creator/edit_file?file=$path" target="xtgem">Building Tool</a><a class="btn btn-default" href="http://xtgem.com/filebrowser/file_edit?file=$path" target="xtgem">Text Editor</a><a class="btn btn-default login" href="http://xtgem.com/account/site_login?site=$site" target="xtgem"><b>[LOGIN]</b></a><hr/><span style="color:#ccc">Switch version:</span> <a class="btn btn-default" href="http://xtgem.com/template/confirm?t=touch" target="xtgem">Touch</a><a class="btn btn-default" href="http://xtgem.com/template/confirm?t=mobile" target="xtgem">Mobile</a><a class="btn btn-default" href="http://xtgem.com/template/confirm?t=web" target="xtgem">Web</a></div></div>;
@end_qedit
<!--/parser:xtscript-->
<script>function closeAdminBar(){var admbar = document.getElementById("admin-bar"); admbar.style.display= 'none'}</script>
Replace "YOUR_BLOG_ID" (on line 3) with your blog id.

CSS code

Add it to your css file, or simply copy it to your _headtags file.
<style>
#admin-bar {background:#333 !important;color:#fff;}
#admin-bar a, #admin-bar span {padding:10px;color:#fff;display:inline-block}
#admin-bar a:hover, #admin-bar a:active {background:#efefef;color:#333}
#admin-bar .login {color:lightgreen}
#admin-bar hr {padding:0 !important;margin:5px 0 !important}
</style>

How to Use

With the default value above, you can call the Admin bar by adding admkey=1234 parameter in the url, then visit the link.

Example you are viewing your blog post which has url: http://mysite.xtgem.com/index/__xtblog_entry/123456-aaa-bbb-ccc?__xtblog_block_id=1#xt_blog.

Then edit the link to http://mysite.xtgem.com/index/__xtblog_entry/123456-aaa-bbb-ccc?admkey=1234&__xtblog_block_id=1#xt_blog - Then visit the link to call the admin bar...

You can change the parameter name (admkey) and value (1234) as you want.

Note: The script is only work if we are logged in to the site on Touch/mobile version of xtgem.
The admin bar provide link to log in to your current viewed site, if you click it and it NOT showing error, it means you are logged in. Make sure to always click [LOGIN] first before you edit post or create new post!

If you are using desktop/PC, the admin bar also provide link to swith version to Touch.

Q: How to get my blog id?
A: Login to your site on Touch/mobile version. Go to your xtblog block in file browser, and copy the link on "New Post" link. You will get something like "http://xtgem.com/blog/entry/add?blog_id=XXXXXXXXXXXXXXXXXX=&file=index"

Tested and working smoothly on my Windows tablet using Firefox Browser.

Stay up-to-date this blog to get the update of this script.
DONATE: If you think my script is useful, You can send me donuts or coffee to my PayPal: sarumpaetd@gmail.com . Thanks!

Special thanks to:
  • Mr. Graham@Xtgem forum for the script and the guide

Comments on "XtQAdminBar v. 1 - Quick Admin Bar Script for Xtgem Site"

  1. Nice, thank your :D

    ReplyDelete
  2. why are all step and tutorial by u not easy to understand. have done all you said, but yet still not working
    here is the blog im using to run a test for importing

    ReplyDelete
  3. please help.. i would prefer an easy tutorial for this and even for WBWXTB [v. 1.5] - Advanced Blog Template for Xtgem Sites.

    ReplyDelete
  4. Can't find the blog ID anyway...

    Any other way to find the Blog ID?

    ReplyDelete

Post a Comment