Awesome! টিউনস
সকল Awesome! টিউনস

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

991 দেখা 1 টিউমেন্টস জোসস
টিউন বিভাগ ইন্টারনেট
প্রকাশিত
Level 0

20 টিউনস 60 টিউমেন্টস 0 ফলোয়ার

আসসালামু আলাইকুম। আমার ৩য় পোস্টে আপনাদের সবাইকে স্বাগতম।

ব্লগার একটি জনপ্রিয় কন্টেন্ট ম্যানেজমেন্ট সিস্টেম(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: 'Electrolize', 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: 'Electrolize', 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/2015/01/blog-post_17.html' 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>
<script src='http://tipsworldblog.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=PostTicker' style='text/javascript'> </script>
</div>
</div>
<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 এর জায়গায় আপনার ব্লগের লিঙ্ক দিন।  তাছাড়া নিচের লিঙ্ক ৩ টি আপনি আপনার মতো করে এডিট করে নিন।

পোস্টটি পূর্বে প্রকাশিত এখানে।

Level 0

আমি আব্দুল্লাহ আল মামুন। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 9 বছর 6 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 20 টি টিউন ও 60 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

টিউনস

আরও টিউনস

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

টিউমেন্টস

Level New

সর্বশেষ পোস্ট এর জায়গায় কিছু বাছাই করা পোস্ট রাখতে চাই । এর জন্য কি করব ?