Top Ad unit 728 × 90

>
[]

ব্লগারের জন্য জটিল একটি নোটিফিকাশন বার নিয়ে নিন।


ব্লগার একটি জনপ্রিয় কন্টেন্ট ম্যানেজমেন্ট সিস্টেম(CMS)। ব্লগারে নির্মিত ব্লগের জন্য বহু গেজেট/উইডগেট নির্মিত হয়েছে। আজকে আমি আপনাদের জন্য নিয়ে এসেছি সুন্দর একটি ব্লগার নোটিফিকাশন বার। এটিতে সর্বশেষ পোস্ট দেখার সুবিধাও আছে। ডেমো দেখতে এখানে ক্লিক করুন। চলুন তাহলে এবার দেখি কিভাবে এটা ইন্সটল করবেন।
প্রথমে ব্লগারে লগইন করুন। তারপর Template>Edit HTML এ যান। এবার CTRL+F চাপুন। একটি বক্স আসবে, সেখানে <body লিখে সার্চ দিন। বডি ট্যাগের ঠিক নিচে এবার নিচের কোডগুলো পেস্ট করুন।



    <style>
    @import url(http://fonts.googleapis.com/css?family=Electrolize);
    #cc-bar {
    background: -webkit-linear-gradient(#000, #333);
    background: -o-linear-gradient(#000, #333);
    background: -moz-linear-gradient(#000, #333);
    background: linear-gradient(#000, #333);
    color: #fafafa;
    width: 100%;
    position: relative !important;
    margin: 0px;
    z-index: 99999;
    height: 40px;
    border-bottom: 1px solid #222;
    border-bottom-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-bottom-right-radius: 10px;
    box-shadow: 0px 1px 3px #3b8dbd;
    -webkit-box-shadow: 0px 1px 3px #3b8dbd;
    -moz-box-shadow: 0px 1px 3px #3b8dbd;
    font-family: &#39;Electrolize&#39;, sans-serif;
    }
    #cc-bar img {
    position:absolute;
    left: 15px;
    top: 12px;
    width:20px;
    }
    #cc-bar a {
    color: #fafafa;
    text-decoration:none;
    font-size:14px;
    font-family: &#39;Electrolize&#39;, sans-serif;
    }
    #cc-bar a:hover {
    text-decoration:none;
    }
    .cc-bar-inner {
    width: 85%;
    margin: auto;
    line-height: 40px;
    }
    .custom-links {
    float: right;
    }
    .theticker {
    float:left;
    width: 700px;
    }
    #ltst {
    color: #fff;
    font-weight:bold;
    font-size: 14px;
    background: #3b8dbd;
    padding: 5px 10px;
    margin-right: 5px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    }
    @media only screen and (max-width: 800px) {
    #cc-bar { display: none; }
    }
    @media only screen and (max-width: 1200px) {
    .custom-links { display: none; }
    }
    </style>
    <div id='cc-bar'>
    <a href='http://tipsworldblog.blogspot.com' target='_blank'><img src='http://4.bp.blogspot.com/-UCFKjn9-W8A/VIyGit_FoJI/AAAAAAAAJ0c/J5Xk0MCKalM/s1600/getthis.png'/></a>
    <div class='cc-bar-inner'>
    <div class='theticker'>
    <div class='widget-content'>
    <span class='tickls' id='ltst'>সর্বশেষ পোস্ট:</span><a id='tickerAnchor' style='text-decoration:none'/><script src='http://codingcrazy.com/demo/ticker.js' style='text/javascript'> </script><script style='text/javascript'> var theLeadString = &quot;LATEST: &quot;; var thePostCount =5; var sBgColor; var nWidth; var nScrollDelay = 175; var sOpenLinkLocation=&quot;S&quot;; </script>
    <!--Replace your Blog URL From Below
    -->
    <script src='http://tipsworldblog.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=PostTicker' style='text/javascript'> </script>
    </div>
    </div>
    <!--Replace those links with your own, I can't do it for you-->
    <div class='custom-links'>
    <a href='http://tipsworldblog.blogspot.com/'>লিঙ্ক ১</a>
    <a href='http://tipsworldblog.blogspot.com/'>লিঙ্ক ২</a>
    <a href='http://tipsworldblog.blogspot.com/'>লিঙ্ক ৩</a>
    </div>
    </div>
    </div>

এখানে tipsworldblog.blogspot.com এর জায়গায় আপনার ব্লগের লিঙ্ক দিন।  তাছাড়া নিচের লিঙ্ক ৩ টি আপনি আপনার মতো করে এডিট করে নিন।
ব্লগারের জন্য জটিল একটি নোটিফিকাশন বার নিয়ে নিন। রিভিউ করছেন Unknown তে 1:42 PM রেটিং:

No comments:

কপিরাইট ২০১৬ © টিপস ওয়ার্ল্ড এর সর্বস্বত্ব সংরক্ষিত
ডিজাইন করেছেন আব্দুল্লাহ আল মামুন

যোগাযোগ

Name

Email *

Message *

Theme images by enot-poloskun. Powered by Blogger.