ব্লগস্পট অ্যাডমিনদের জন্য একটি বিশেষ স্টাইলিশ Admin Bar । ব্লগে লাগিয়ে নিন এবং ড্যাশবোর্ডের কাজ করুন আরও শর্টকাটে!

আসলামুয়ালাইকুম, কেমন আছেন ব্লগস্পট গুরু ভাইয়েরা? আশা করি আমার মত নেই। ভালোই আছেন। আমি খুব একটা ভালো নেই। তো এজন্যই লেখালেখি কমে গেছে।
আপনারা যারা ব্লগস্পট নিয়ে কাজ করেন তাদের জন্য আজ থাকছে একটি অসাধারণ স্টাইলিশ Admin Bar । অনেকে Admin Bar চিনেছেন কিন্তু অনেকেই বুঝেন নি। এই Admin Bar -কে Navigation Bar ও বলা হয়ে থাকে। এটা ব্লগস্পট এবং ওয়ার্ডপ্রেস উভয় প্লাটফর্মেই আছে। কিন্তু ব্লগস্পটের যে ডিফল্ট নেভিগেশন বার টা আছে সেটা এক ধরনের ডিজাইন এবং কাস্টমাইজেশন সুবিধা না থাকায় অনেকেরই পছন্দ নয়। আর ঠিক তাদের জন্যই আজকের Admin Bar গেজেটটি। দেখতে অনেকটা ওয়ার্ডপ্রেস স্টাইলের। Admin Bar টি তৈরি করেছেন My Blogger Lab এর প্রতিষ্ঠাতা সৈয়দ ফাইজান আলী। আমি সেটা হুবহু শেয়ার করলাম না। কিছুটা কাস্টমাইজেশন আমিও করলাম। তাই ১% হলেও আমার ক্রেডিট আছে। সেসব কথা বাদ। এখন আসি আরেকটু কথায়।
আপনি প্রশ্ন করতে পারেন এই Admin Bar দিয়ে কি হবে? এই Admin Bar শুধু আপনারই জন্য। মানে হলো আপনি যখন ব্লগস্পট একাউন্টে লগিন করা থাকবেন ঠিক তখনই আপনি ব্লগের উপর এই বার টি দেখতে পারবেন। আরও ক্লিয়ার মানে হল এটি শুধু ব্লগের এডমিনরাই দেখতে পাবেন। এখন আসি এই বার দিয়ে আপনার উপকার কি হবে? এই একটি বারেই ব্লগস্পট ড্যাশবোর্ডের সব অপশন দেয়া আছে। তাই ব্লগ ভিজিট করার সময় শর্টকাট পদ্ধতিতে অনেক সহজেই অ্যাডমিন হিসেবে আপনার কাজ গুলো করতে পারবেন। এছাড়াও আছে লগ আউট অপশন! চাইলে নিজের ছবিটি দেখুন। Admin Bar টি কেমন সেই ধারনাও পেয়ে যাবেন।
এবার আপনিও আপনার ব্লগে এটি লাগিয়ে নিতে চাইলে নিচের ধাপগুলো অনুসরণ করুন।
  • ব্লগস্পট ড্যাশবোর্ড থেকে টেমপ্লেটের এডিট এইচটিএমএল অপশনে যান।
  • এবার ]]></b:skin> কোডটি খুঁজে বের করুন এবং খুঁজে পেলে এই কোডের উপরে নিচে দেয়া কোডগুলো বসান।

.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 &gt; a,.mbl-admin-bar li.current-cat &gt; a,.mbl-admin-bar li.current_page_item &gt; a,.mbl-admin-bar li.current-menu-item &gt; 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: left;
 }
 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;
 }

  • এখন আবারো আগের মত করে <body> কোডটি খুঁজুন।
  • খুঁজে পেলে পূর্বের মত করেই <body> কোডের পরে নিচের কোডগুলো বসিয়ে দিন।

<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.bloggermaruf.com/" rel="dofollow" title="Created By My Blogger Lab &amp; Brought You By Blogger Maruf"><img src="http://s28.postimg.org/ovg6d218p/rsz_blogger_maruf_icon.png" /></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></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/>Edit Post</a></li>
       </ul>
     </li>
       <li><a href="#"><i></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></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></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></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><a href="https://www.blogger.com/blogger.g?blogID=8771815777216077914#"><i > Howdy, Admin</i></a><br /><ul><br />
     <li><img src="https://dnc.techtunes.io/tDrive/tuner/blogger_maruf/303030/10405689_688313544589131_3824814331472593690_n1.jpg" /><br /><div>
     <br />
     Blogger Maruf</div>
     <br /><a href="http://www.blogger.com/logout.g"> Logout</a></li>
     </ul>
     </li> <li><a href="http://www.mybloggerlab.com/" rel="dofollow">My Blogger Lab</a></li>

     </ul>
     </div>
     </div>
     </span>

কোড ঠিকমত কাজ না করলে দয়া করে জানাবেন। দ্রুত আপডেট করার চেষ্টা করব। মতামত জানাবেন। আর আমার জন্য দোয়া করতে ভুলবেন না। সৌজন্যেঃ ব্লগার মারুফ ডট কম

Level 2

আমি ব্লগার মারুফ। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 11 বছর 1 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 196 টি টিউন ও 1301 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 2 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

আমি মারুফ। প্রযুক্তিকে ভালোবাসি। তাই গড়তে চাই প্রযুক্তির বাংলাদেশ। পড়াশুনা করছি রংপুরের বেগম রোকেয়া বিশ্ববিদ্যালয়ে অ্যাকাউন্টিং এন্ড ইনফরমেশন সিস্টেমস বিভাগে। আমার ওয়েবসাইটঃ https://virtualvubon.com এবং https://www.rupayon.com


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

Level 2

ভল লাগল

আপনার কোডটি ঠিকমত কাজ করছে না।
এটা ব্যবহার করলে তাতে আপনার ব্লগের ইনফো (সাথে আপনার চমৎকার একটি ছবি) চলে আসছে।
সেই রকম লোকের হাতে লাগলে আপনার বারোটাও বাজিয়ে দিতে পারে।

ওহ, নমুনা দেখাতে ভুলেগেছি। নমুনা দেখে আসুন- http://ajkhc.blogspot.com/