আপনার ব্লগে যুক্ত করুন রেসপনসিভ সাইটম্যাপ Blogger এর জন্য

কি খবর ব্লগার বন্ধুরা সবাই কেমন আছেন ? নিশ্চই ভাল । আমাদের বেশির ভাগ সবারই ব্লগারে ব্লগ আছে । আমরা সবাই চাই ওয়ার্ডপ্রেসের মত করে আমাদের ব্লগের সাইটম্যাপ তৈরি করতে । কিন্তু ওয়ার্ডপ্রেসের মত সুন্দর সাইটম্যাপ পাই না । তাই আজ আমি আপনারদের জন্য নিয়ে এলাম ৩ কলাম বিশিষ্ট্য দারুন একটা রেসপনসিভ স্টাইল সাইটম্যাপ গেজেট ।গেজেটটা দেখতেও দারুন ।

ডেমো দেখুন 

কিভাবে আপনার ব্লগে যুক্ত করবেন ?

১ । আপনার ব্লগার ড্যাশবোর্ডে যান

২ । ড্যাশবোর্ড থেকে বাম পাশে পেজ ট্যাবে ক্লিক করুন

 

৩ । New Page থেকে Blank Page এ ক্লিক করুন

৪ । তারপর HTML এ ক্লিক করুন

৫ । তারপর নিচের কোড গুলো পেস্ট করে দিন


<script src="https://dl.dropboxusercontent.com/u/36169749/scripts/widgets/btnt-sitemap.js" type="text/javascript"></script> <script src="http://www.projuktirmela.blogspot.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script> <style type="text/css"> .post-archive { width: 100%; padding: 20px 0; text-transform: capitalize; } .post-archive h4 { border-bottom: 2px solid #EEEEEE; color: #333333; font-size: 20px; margin: 0 0 10px 2px; padding: 0 0 10px; } .ct-columns-3 { -moz-column-count: 3; -moz-column-gap: 10px; -moz-column-rule: none; -webkit-column-count: 3; -webkit-column-gap: 10px; -webkit-column-rule: none; column-count: 3; column-gap: 10px; column-rule: none;} .ct-columns-3 p { padding: 5px 0px; -moz-column-break-inside: avoid; -webkit-column-break-inside: avoid; -o-column-break-inside: avoid; -ms-column-break-inside: avoid; column-break-inside: avoid; display: inline-block; width: 100%; } .ct-columns-3 p a { background: #fafafa; color: #333; display: block; border: 1px solid #FFFFFF; font-size: 14px; line-height: normal; outline: 1px solid #EEEEEE; padding: 10px 15px; -webkit-transition:all .25s ease-in-out; -moz-transition:all .25s ease-in-out; -o-transition:all .25s ease-in-out; transition:all .25s ease-in-out; } .ct-columns-3 p a:hover { background: #555; color: #fff; } @media screen and (max-width: 768px){ .ct-columns-3 { -moz-column-count: 1; -moz-column-gap: 0px; -moz-column-rule: none; -webkit-column-count: 1; -webkit-column-gap: 0px; -webkit-column-rule: none; column-count: 1; column-gap: 0px; column-rule: none; } } </style>

পরিবর্তন করুন

উপরের কোডে  Projuktirmela.blogspot.com এর জায়গায় আপরনার ব্লগের লিঙ্ক দিন ।


৬ ।  এবার Publish এ ক্লিক করুন কাজ শেষ ।

আশা করি আপনাদের ভাল লেগেছে । ভাল লাগলে আপনার মতামত জানাবেন কমেন্ট করে ।
নিয়মিত আপডেট পেতে আমাদের ফেসবুক ফ্যান পেজে লাইক দিয়ে একটিভ থাকুন ।

ফেসবুকে আমি                   আমাদের ফ্যানপেজ

Read More

ব্লগারের জন্য দারুন একটা এ্যানিমেটেড Social Widget

কি খবর ব্লগাররা ? আপনাদের জন্য নিয়ে এলাম দারুন একটা এ্যানিমেটেড Social Widget  । ব্লগের এ্যালেক্সা রেঙ্ক , পেজ রেঙ্ক  ইত্যাদি বাড়ানোর জন্য Social মিডিয়া দারুন কাজ করে । তাই সবাই তাদের ব্লগ মিডিয়াগুলোতে প্রচার করে থাকে । এর জন্য তাদের ব্লগে নানা রকম মিডিয়া Widget ব্যবহার করে । Widget গুলো যদি একটু ডিফারেন্ট হয় তাহলে ভিজিটরদের ব্লগের প্রতি আকৃষ্ট করে । এই Widget টা দেখতে অনেক সুন্দর এবং আকৃষ্ট করার মত । আপনি চাইলে এই Widget টা আপনার ব্লগে ব্যবহার করতে পারেন ।

নিচে লাইভ ডেমো দেখুন 

 আপনার ব্লগে যুক্ত করতে যা করতে হবে 

• প্রথমে আপনার ব্লগারে প্রবেশ করুন 
• এখান থেকে লেয়াউট এ যান 
• তারপর ADD A GEDGET এ ক্লিক করুন
• নতুন ওইনডো থেকে HTML/JAVASCRIPT নির্বাচন করুন 
• তারপর নিচের কোড গুলো পেস্ট করে দিন 

<style>#WG-SWS {width: 260px;margin: 5px 20px;padding:5px;}#WG-SWS li {cursor: pointer;height: 48px;position: relative;list-style-type: none;}#WG-SWS .icon {background: #D91E76 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGpgwTuYL3DyMjLXRGNSOsREUQi8gPyCP13FezgGtGIrhe9nyuejky4HQtC-27Qbztf0ONykQeoYJS2QtyYx1A5IzhZGdbdOvVuXELyZ0rrYZOq1mrzCBqL_OPoAurSubVSCuEECSYI6I/s1600/NBT-Social_Button.png') 0 0 no-repeat;background-color: rgba(217, 30, 118, .42);border-radius: 30px;display: block;color: #0033CC;float:none;height: 48px;line-height: 48px;margin: 5px 0;position: relative;text-align: left;text-indent: 90px;text-shadow: #333 0 1px 0;white-space: nowrap;width: 48px;z-index: 5;-webkit-transition: width .25s ease-in-out, background-color .25s ease-in-out;-moz-transition: width .25s ease-in-out, background-color .25s ease-in-out;-o-transition: width .25s ease-in-out, background-color .25s ease-in-out;transition: width .25s ease-in-out, background-color .25s ease-in-out;-webkit-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-moz-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;-o-box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;box-shadow: rgba(0, 0, 0, .28) 0 2px 3px;text-decoration: none;}#WG-SWS span:hover {visibility: hidden;}#WG-SWS span {display: block;top: 15px;position: absolute;left: 90px;}#WG-SWS .icon {color: #fafafa;overflow: hidden;}#WG-SWS .fb {background-color: rgba(45, 118, 185, .42);background-position: 0 -382px;}#WG-SWS .twit {background-color: rgba(0, 161, 223, .42);background-position: 0 -430px;}#WG-SWS .google {background-color: rgba(167, 0, 0, .42);background-position: 0 -478px;}#WG-SWS .pint {background-color: rgba(204, 0, 0, .42);background-position: 0 -526px;}#WG-SWS .linked {background-color: rgba(0, 87, 114, .42);background-position: 0 -574px;}#WG-SWS .ytube {background-color: rgba(170, 0, 0, .42);background-position: 0 -670px;}#WG-SWS .rss {background-color: rgba(255, 109, 0, .42);background-position: 0 -718px;}#WG-SWS li:hover .icon {width: 250px;}#WG-SWS li:hover .icon {background-color: #d91e76;}#WG-SWS li:hover .fb {background-color: #2d76b9;background-position: 0 2px;}#WG-SWS li:hover .twit {background-color: #00A1DF;background-position: 0 -46px;}#WG-SWS li:hover .google {background-color: #A70000;background-position: 0 -94px;}#WG-SWS li:hover .pint {background-color: #C00;background-position: 0 -142px;}#WG-SWS li:hover .linked {background-color: #005772;background-position: 0 -190px;}#WG-SWS li:hover .ytube {background-color: #A00;background-position: 0 -286px;}#WG-SWS li:hover .rss {background-color: #EC5601;background-position: 0 -334px;}#WG-SWS .icon:active {bottom: -2px;-webkit-box-shadow: none;-moz-box-shadow: none;-o-box-shadow: none;}</style><ul id="WG-SWS"> <li><a class="icon fb" href="http://www.facebook.com/projuktirmela">Like us on Facebook</a>Like us on Facebook </li> <li><a class="icon twit" href="https://twitter.com/projuktirmela">Follow us on Twitter</a>Follow us on Twitter </li> <li><a class="icon google" href="https://plus.google.com/projuktirmela">Follow us on Google+</a>Follow us on Google+ </li> <li><a class="icon pint" href="http://www.pinterest.com/projuktirmela">Follow us on Pinterest</a>Follow us on Pinterest </li> <li><a class="icon linked" href="http://in.linkedin.com/projuktirmela">Follow us on LinkedIn</a>Follow us on LinkedIn </li> <li><a class="icon ytube" href="http://www.youtube.com/user/projuktirmela">Follow us on Youtube</a>Follow us on Youtube </li> <li><a class="icon rss" href="http://feeds.feedburner.com/projuktirmela">Subscribe via RSS</a>Subscribe via RSS</li> </ul>

এবার একটু কাস্টোমাইজ করুনঃ

কোডগুলোতে যেখানে যেখানে projuktirmela আছে সেখানে আপনার লিঙ্কগুলো বসিয়ে দিন  কাজ শেষ ।
ভাল লাগলে অবশ্যই বলবেন ।   কোন সমস্যা হলে কমেন্ট করে অথবা ফেসবুকে আমাকে ইনবক্স করতে পারেন । আমি বলে দিব বা সাহয্য করব ।  আর কেনো ভুল হলে আমাকে ধরিয়ে দিবেন ।সবাই ভাল থাকবেন ।

Read More

আপনার ব্লগে যুক্ত করুন চলন্ত ট্রাক Social Bookmarking Widget

কি খবর বন্ধুরা ? আজ আমি আপনাদের সাথে একটি দারুন ব্লগার Widget শেয়ার করব । আমাদের ব্লগকে সবাই সুন্দর করে সাজাতে চাই । এজন্য নানা Widget ব্যবহার করি । ব্লগকে সুন্দর ও এসইও তে Social Bookmarking Widget খুবি গুরুত্বপুর্ন । আর ব্লগে যদি এনিম্যাটেড Widget থাকে তাহলে ভিজিটরাও আকৃষ্ট হয় এবং ব্লগ দেখতেও সুন্দর হয় । এধরনের একটি Widget হল Running Trucks Social Bookmarking Widget .

Live Demo দেখুন

এই Widget টা আপনার ব্লগে যুক্ত করার জন্য

১ । প্রথমে Blogger এ লগিন করে Dashbord এ যান
২ । তার পর Layout থেকে Add a Gadget এ ক্লিক করেন
৩ । তারপর Add a HTML/Javascript এক্লিক করুন
৪ । তারপর নিচের কোডগুলো পেস্ট করুন


<div style="position: fixed; z-index: 65535; left: 0px; bottom: -3px; width:100%;"> <marquee><a href="http://www.facebook.com/projuktirmela" target="blank"> <abbr title="Follow us at Facebook"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifokXlfWjSVxwtZgNVaeOjgJDSTUfA4CzO8Gg0sGdw0RQD_tl2AW9uAGFNllLE8jym9hJh0JqzQLPbc_D-WcQSYPzWtTOU2fUe1lAPNDvqpB-aurbfa7chnoU1gtIyEYkTT3SARZVM60GK/s1600/Social-Truck_fb2.png" width="120px" height="100px"/> </abbr> </a> <a href="http://feeds.feedburner.com/projuktirmela" target="blank"> <abbr title="Subscribe Our Feeds"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5zjgtw3u32T9cZdmi7V3ZhkV8GgqK0LPWQhUpPYX-sR4QcnInkB8Sz6eGuhfmSSsCiio8L9oyXT_VQBaHuD2NED08eCebKOpJoDU6f360XuWvD1FWGvnpjLyg-SaLIDiz2ahYYAFUUTfU/s1600/Social-Truck_rss.png" width="120px" height="100px"/> </abbr> </a><a href="http://twitter.com/projuktirmela" target="blank"> <abbr title="Follow Us on Twitter"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdWNXeUKnL9XQsmk7iz8w9Hx4UJuyKnNwUy5udQYvulHXgjsTFoA8SmEalkDoP4klU2YV6FOUWvL7LqIbk15neHZ4MdprS0PapvbNCVi5NulzQAsGUzz-RFtzIe_MRkeHpl3BvGTs4nxO5/s1600/Social-Truck_twi.png" width="120px" height="100px"/> </abbr> </a> </marquee></div>

৫ । এবার Save এ ক্লিক করুন কাজ শেষ ।

পরিবর্তন করুনঃ
১ । ফেসবুক লিঙ্কঃ   projuktirmela
২ । ফিড লিঙ্কঃ projuktirmela
৩ । টুইটার লিঙ্কঃ projuktirmela

এগুলো পরিবর্তন করে নিজের লিঙ্ক দিন ।

ভাল লেগে থাকলে লাইক ও কমেন্ট করে আপনার মতামত জানাবেন ।

Read More

ডাউনলোড করে নিন চমৎকার কিছু ব্লগার টেমপ্লেট ফ্রি

কি খবর সবার ? সবাই ভাল আছেনতো ? আজ আমি আপনাদের সাথে শেয়ার করব চমৎকার কিছু ব্লগার টেমপ্লেট । আমরা সবাই কম-বেশি আমাদের ব্লগকে মনের মত করে সাজাতে চাই । কিন্তু মনের মত টেমপ্লেট পাই না । তাই আমি আজ কিছু আমার ভাললাগা বা পছন্দের টেমপ্লেট আপনাদের উপহার দিব ।

নিচে স্ক্রিনশর্ট সহ কিছু টেমপ্লেট দেয়া হল , আপনাদের ভাল লাগলে ডাউনলোড করে নিতে পারেন । 

১ ।                                     E-style 

                             DEMO                   DOWNLOAD

২ ।                                     Adsosive

                          DEMO                     DOWNLOAD

৩ ।                                    Chronicl

                          DEMO                 DOWNLOAD

  ৪ ।                                Minimal seo

                      DEMO                    DOWNLOAD

এবার আপনার ব্লগকে সাজান নিজের মনের মত করে । ভাললেগে থাকলে লাইক ও কমেন্ট করবেন ।

Read More

আপনার ব্লগে যুক্ত করুন দারুন একটা Social Subscription Widget সহজে

কি খবর বন্ধুরা , সবাই কেমন আছেন ? আশা করি সবাই ভাল । আমাদের বেশির ভাগ সবারই ব্লগ আছে তাই না ? আমি এখন আপনাদের উপহারদেব একটি দারুন Social Subscription Widget  ব্লগারের জন্য ।

                              

আপনি চাইলে আপনার ব্লগে এই ওইজেটটি ব্যবহার করতে পাররেন । 

                                 ডেমো দেখুন

 

ওইজেটটি আপনার ব্লগে যুক্ত করেতে দুটি ধাপে যুক্ত করতে হবে ।

ধাপ-একঃ

১ । প্রথমে আপনার ব্লগে লগইন করতে হবে ।

২ । তারপর যথাক্রমে Template >> Edit HTML  যেতে হবে

৩ । এরপর আপনাকে এই  ]]></b:skin>   কোডটি খুজে বের করতে হবে

৪ । এরপর নিচের সিএসএস কোডগুলো উপরের কোডটার পূর্বে পেস্ট করতে হবে । 

@import url("http://fonts.googleapis.com/css?family=Oswald&text=AaBbCcEeFfIiKkLlMmOoRrSsTtWw%20"); .w2bOldSocial ul { font-family: 'Oswald', sans-serif; margin: 15px 0; overflow: hidden; } .w2bOldSocial ul li { float: left; width: 90px; padding: 0 0 0 55px !important; margin: 0 0 0 5px !important; line-height: 48px !important; } .w2bOldSocial ul li a { font-size: 20px !important; text-decoration:none; padding:0 !important; margin:0 !important; text-decoration:none; } .w2bOldSocial ul li a:hover { text-decoration:underline; } .w2bOldSocial ul li.w2brss { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjdqndmYCp2v6gEgl8iDnw3r85tjSAevTU4vTFwDoa2btFZM0zpkTnWPOMq8UVKvEXdQvwZGn67YQrntUqdDsyT51uCEw5ls0BIUO82XbUqUXBj4nC6vM-VoNVgYVUyiDeztcHi6K31XXp/s48/RSS.png") no-repeat scroll left center transparent !important; } .w2bOldSocial ul li.w2bmail { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYm3TjUo5cZXfn_7FZEnUa8g7JW4mmIF03thztSbsSh2F4YlmWNDzA_JAdYHsIPXuhDh5Uu5grg4G_2Wb8ccZG4AvCFp8BRuIxie6xaSvlSbqLC6GWhKYBc5qCoY3GnYxu-df8pvMcwurq/s48/Mail.png") no-repeat scroll left center transparent !important; } .w2bOldSocial ul li.w2btwitter { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivFbrOCYMC3Fzi_7IZ-hYBQZixvvFG3rDsCvVlDRuU_02KfQYFPLhqNm9JkMNMmJI2SntKRLsTHXmax9J6ZNhjNvu6pxDXX-A04mrODOGRLNlprhMB-_LLKKNeGtcaB775f7s5FeB8y5v8/s48/Twitter2.png") no-repeat scroll left center transparent !important; } .w2bOldSocial ul li.w2bfacebook { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP5w-8T1_-0fXKJnxhcnWmMRN28_g7WW3LgRdR4hYPjYFKvp_3eqp9GgsqidlLyvC2fTR4_FvGohwMieQYtxuelXq8C-TMcg397TcV62PInvePsgVcDekiviP9OBloe09-PUMFvx92d9JZ/s48/Facebook.png") no-repeat scroll left center transparent !important; } #w2bEmailsub { display: block; clear: both; margin: 10px 0; } form.w2bEmailform { margin: 20px 0 0; display: block; clear: both; } .emailText { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieOGxuOrRjndUXLHKqxtqGI8dDoo0omeGQkgGAVpl5vgX4WdKYp2m7rAKpiFxKuCw-q9dsaOUBtyW3Wnj90D84LTOZROXhpxYjF0mnBacNlG786tb0m5OVa3SANDwXXm1D6jfRBgkz1bji/s28/w2b-mail.png") no-repeat scroll 4px center transparent; padding: 7px 15px 7px 35px; color: #444; font-weight: bold; text-decoration: none; border: 1px solid #D3D3D3; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 1px 1px 2px #CCC inset; -moz-box-shadow: 1px 1px 2px #CCC inset; box-shadow: 1px 1px 2px #CCC inset; } .emailButton { color: #444; font-weight: bold; text-decoration: none; padding: 6px 15px; border: 1px solid #D3D3D3; cursor: pointer; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #fbfbfb; background: -moz-linear-gradient(top, #fbfbfb 0%, #f4f4f4 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbfbfb), color-stop(100%,#f4f4f4)); background: -webkit-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); background: -o-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); background: -ms-linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FBFBFB', endColorstr='#F4F4F4',GradientType=0 ); background: linear-gradient(top, #fbfbfb 0%,#f4f4f4 100%); }

এবার ওইজেট কোড যুক্ত করাঃ

১ । ব্লগের Layout  থেকে Add Gadget এ ক্লিক করে নির্বাচন করতে হবে HTML/JavaScript এবং নিচের কোডগুলো পেস্ট করতে হবে ।

<div class="w2bOldSocial"> <ul> <li class="w2brss"><a href="http://feeds.feedburner.com/projuktirmela">RSS</a></li> <li class="w2bmail"><a href="http://feedburner.google.com/fb/a/mailverify?uri=projuktirmela" >Email</a></li> <li class="w2btwitter"><a href="http://twitter.com/projuktirmela">Twitter</a></li> <li class="w2bfacebook"><a href="http://facebook.com/projuktirmela">Facebook</a></li> </ul> </div> <div id="w2bEmailsub"> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=projuktirmela', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="w2bEmailform"> <input type="hidden" value="projuktirmela" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input type="text" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" value="Enter your email..." name="email" class="emailText" /> <input type="submit" class="emailButton" value="SignUp" title='' /> </form> </div>

পরিবর্তনঃ 

উপরের কোডগুলোতে একটু পরিবর্তন করে নিন ।

১ । http://feeds.feedburner.com/projuktirmela     আপনার লিঙ্ক দিন

২ । http://feedburner.google.com/fb/a/mailverify?uri=projuktirmela  আপনার লিঙ্ক দিন

৩ । http://twitter.com/projuktirmela    আপনার লিঙ্ক দিন

৪ । http://facebook.com/projuktirmela  আপনার লিঙ্ক দিন

৫ । <input type="hidden" value="projuktirmela" name="uri" />  আপনার ফিডবার্নার নাম দিন ।

কাজ শেষ । কোন সমস্যা বা ভাল লাগলে কমেন্ট করে জানাবেন ।

Read More