*** IT সম্পর্কে দক্ষ হতে চান ? ** তাহলে নিয়মিত Visit করুন .... IT Knowledge School **** টেকপ্রেমী : বদিউজ্জামান ( রুবেল )
*** IT সম্পর্কে দক্ষ হতে চান ? ** তাহলে নিয়মিত Visit করুন .... IT Knowledge School **** টেকপ্রেমী : বদিউজ্জামান ( রুবেল )
Blogger Tips and TricksLatest Tips And TricksBlogger Tricks
Showing posts with label Blog Site Developer. Show all posts
Showing posts with label Blog Site Developer. Show all posts

ব্লগারে একটি আকর্ষণীয় XML Sitemap Page তৈরী করে নিন

What Is XML Sitemap?

Actually, the Search engine uses their respective web crawlers (bots) to discover pages from links within the site and from other sites. XML Sitemap is a .xml file attached to your website which supplies this data to crawlers. Sitemap file consists of all posts URL with additional information regarding each URL. The Search engine uses this data to index your posts in the best possible way. Use of XML Sitemap file guarantees that your web pages will get indexed in search engines.

What Is HTML Sitemap?

HTML sitemap is a regular HTML page which can be read by search engine bots as well as by visitors. Web crawler treats it like a regular HTML page (with many links). The main purpose of the using HTML based sitemap is to represent all your posts in an organized manner so that your users can navigate all of your posts through a single page.
Features
- Post list will update automatically with the addition of new posts.
- Automatic addition of Suffix 'new' to newly added posts.
- Sorted alphabetically (ascending)

How To Add Sitemap Page In Blogger

Note: This is Label Based Sitemap Page and you can only apply label based themes on it.
Step 1. Login to your Blogger account, then go to Pages > New page.
Create HTML based Sitemap Page on Blogger
Step 2. Enter "Site Map" in Page title field.
Step 3. Switch to HTML mode.
How to add sitemap in blogger
Step 4. Enter following inside blank field.
Note: Clear any default code inside HTML field before pasting provided code.
<script type='text/javascript'>

var postTitle = new Array();
var postUrl = new Array();
var postPublished = new Array();
var postDate = new Array();
var postLabels = new Array();
var postRecent = new Array();
var sortBy = "titleasc";
var numberfeed = 0;

function bloggersitemap(a) {
    function b() {
        if ("entry" in a.feed) {
            var d = a.feed.entry.length;
            numberfeed = d;
            ii = 0;
            for (var h = 0; h < d; h++) {
                var n = a.feed.entry[h];
                var e = n.title.$t;
                var m = n.published.$t.substring(0, 10);
                var j;
                for (var g = 0; g < n.link.length; g++) {
                    if (n.link[g].rel == "alternate") {
                        j = n.link[g].href;
                        break
                    }
                }
                var o = "";
                for (var g = 0; g < n.link.length; g++) {
                    if (n.link[g].rel == "enclosure") {
                        o = n.link[g].href;
                        break
                    }
                }
                var c = "";
                if ("category" in n) {
                    for (var g = 0; g < n.category.length; g++) {
                        c = n.category[g].term;
                        var f = c.lastIndexOf(";");
                        if (f != -1) {
                            c = c.substring(0, f)
                        }
                        postLabels[ii] = c;
                        postTitle[ii] = e;
                        postDate[ii] = m;
                        postUrl[ii] = j;
                        postPublished[ii] = o;
                        if (h < 10) {
                            postRecent[ii] = true
                        } else {
                            postRecent[ii] = false
                        }
                        ii = ii + 1
                    }
                }
            }
        }
    }
    b();
    sortBy = "titledesc";
    sortPosts(sortBy);
    sortlabel();
    displayToc();
}

function sortPosts(d) {
    function c(e, g) {
        var f = postTitle[e];
        postTitle[e] = postTitle[g];
        postTitle[g] = f;
        var f = postDate[e];
        postDate[e] = postDate[g];
        postDate[g] = f;
        var f = postUrl[e];
        postUrl[e] = postUrl[g];
        postUrl[g] = f;
        var f = postLabels[e];
        postLabels[e] = postLabels[g];
        postLabels[g] = f;
        var f = postPublished[e];
        postPublished[e] = postPublished[g];
        postPublished[g] = f;
        var f = postRecent[e];
        postRecent[e] = postRecent[g];
        postRecent[g] = f
    }
    for (var b = 0; b < postTitle.length - 1; b++) {
        for (var a = b + 1; a < postTitle.length; a++) {
            if (d == "titleasc") {
                if (postTitle[b] > postTitle[a]) {
                    c(b, a)
                }
            }
            if (d == "titledesc") {
                if (postTitle[b] < postTitle[a]) {
                    c(b, a)
                }
            }
            if (d == "dateoldest") {
                if (postDate[b] > postDate[a]) {
                    c(b, a)
                }
            }
            if (d == "datenewest") {
                if (postDate[b] < postDate[a]) {
                    c(b, a)
                }
            }
            if (d == "orderlabel") {
                if (postLabels[b] > postLabels[a]) {
                    c(b, a)
                }
            }
        }
    }
}

function sortlabel() {
    sortBy = "orderlabel";
    sortPosts(sortBy);
    var a = 0;
    var b = 0;
    while (b < postTitle.length) {
        temp1 = postLabels[b];
        firsti = a;
        do {
            a = a + 1
        } while (postLabels[a] == temp1);
        b = a;
        sortPosts2(firsti, a);
        if (b > postTitle.length) {
            break
        }
    }
}

function sortPosts2(d, c) {
    function e(f, h) {
        var g = postTitle[f];
        postTitle[f] = postTitle[h];
        postTitle[h] = g;
        var g = postDate[f];
        postDate[f] = postDate[h];
        postDate[h] = g;
        var g = postUrl[f];
        postUrl[f] = postUrl[h];
        postUrl[h] = g;
        var g = postLabels[f];
        postLabels[f] = postLabels[h];
        postLabels[h] = g;
        var g = postPublished[f];
        postPublished[f] = postPublished[h];
        postPublished[h] = g;
        var g = postRecent[f];
        postRecent[f] = postRecent[h];
        postRecent[h] = g
    }
    for (var b = d; b < c - 1; b++) {
        for (var a = b + 1; a < c; a++) {
            if (postTitle[b] > postTitle[a]) {
                e(b, a)
            }
        }
    }
}



function displayToc() {
    var a = 0;
    var b = 0;
    while (b < postTitle.length) {
        temp1 = postLabels[b];
        document.write("");
        document.write('<div class="post-archive"><h4>' + temp1 + '</h4><div class="ct-columns">');
        firsti = a;
        do {
            document.write("<p>");
            document.write('<a " href="' + postUrl[a] + '">' + postTitle[a] + "");
            if (postRecent[a] == true) {
                document.write(' - <strong><span>New!</span></strong>')
            }
            document.write("</a></p>");
            a = a + 1
        } while (postLabels[a] == temp1);
        b = a;
        document.write("</div></div>");
        sortPosts2(firsti, a);
        if (b > postTitle.length) {
            break
        }
    }
}

</script>

<script src="http://yourblog.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>
Note: Dismiss any type of HTTPS errors.
Step 5. Configuration
- Replace yourblog.blogspot.com with your blog URL.

Step 6. Under Page settings > inside Search Description field add page description.
Step 7. Click on Options > under Reader comments > select Don't allow > Done.
Automatically updating tabular list of posts for blogspot
Step 8. Click Publish.
Note: This tutorial is only about to add Simple HTML Sitemap. You can apply different colorful themes on this sitemap.
Read More »

ব্লগারে একটি আকর্ষণীয় HTML Sitemap Page তৈরী করে নিন

1st Option
যে ভাবে ব্লগে যুক্ত করবেনঃ
  • প্রথমে আপনার ব্লগে লগইন করুন।
  • তারপর ব্লগার ড্যাশবোর্ড হতে Page এ ক্লি করুন।
  • এখন Create a New Page এ ক্লিক করুন।
  • এরপর পেজটির HTML এ ক্লিক করুন।
  • নিচের কোডগুলি কপি করে HTML পেজে পেষ্ট করুন।
<style type="text/css">#sitemap {width:100%;margin:5px auto;margin-left: 4px;border:1px solid #23A839;border-top:0px solid #2D96DF;}.label {color:#FF5F00;font-weight:bold;margin: -16px -1px 0px;padding:1px 0 2px 11px;background: -webkit-linear-gradient(right, #6DFC85 0%, #23A839 40%); /* For Safari 5.1 to 6.0 */background: -o-linear-gradient(right, #6DFC85 0%, #23A839 40%); /* For Opera 11.1 to 12.0 */background: -moz-linear-gradient(right, #6DFC85 0%, #23A839 40%); /* For Firefox 3.6 to 15 */background: linear-gradient(right, #6DFC85 0%, #23A839 40%); /* Standard syntax */border:1px solid #23A839;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;display:block;}.label a {color:#fff;}.label:first-letter {text-transform:uppercase;}.new {color:#FF5F00;font-weight:bold;font-style:italic;}.postname {font-weight:normal;background: -webkit-linear-gradient(right, #6DFC85 0%, #FFF 40%); /* For Safari 5.1 to 6.0 */background: -o-linear-gradient(right, #6DFC85 0%, #FFF 40%); /* For Opera 11.1 to 12.0 */background: -moz-linear-gradient(right, #6DFC85 0%, #FFF 40%); /* For Firefox 3.6 to 15 */background: linear-gradient(right, #6DFC85 0%, #FFF 40%); /* Standard syntax */}.postname li {border-bottom: #DDD 1px dotted;margin-right:5px}a:link {text-decoration:none;}a:visited {text-decoration:none;}a:hover {text-decoration:underline;}</style><div id="sitemap"><script type="text/javascript" src="https://cdn.rawgit.com/prozokti/rashid/master/sitemap.js"></script><script src="https://whhelpdesk.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadsitemap"></script></div>

  • এখন whhelpdesk.blogspot.com এর জায়গার আপনার ব্লগের এড্রেস দিয়ে দিন।
  • ========================================================
2nd Option
যে ভাবে ব্লগে যুক্ত করবেনঃ
  • প্রথমে আপনার ব্লগে লগইন করুন।
  • তারপর ব্লগার ড্যাশবোর্ড হতে Page এ ক্লি করুন।
  • এখন Create a New Page এ ক্লিক করুন।
  • এরপর পেজটির HTML এ ক্লিক করুন।
  • নিচের কোডগুলি কপি করে HTML পেজে পেষ্ট করুন।
<style type="text/css">
#sitemap {width:100%;
margin:5px auto;
margin-left: 4px;
border:1px solid #23A839;
border-top:0px solid #2D96DF;}.label {color:#FF5F00;
font-weight:bold;
margin: -16px -1px 0px;
padding:1px 0 2px 11px;
background: -webkit-linear-gradient(right, #6DFC85 0%, #23A839 40%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #6DFC85 0%, #23A839 40%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #6DFC85 0%, #23A839 40%); /* For Firefox 3.6 to 15 */
background: linear-gradient(right, #6DFC85 0%, #23A839 40%); /* Standard syntax */
border:1px solid #23A839;
border-radius:0px;
-moz-border-radius:0px;
-webkit-border-radius:0px;
display:block;}.label a {color:#fff;}.label:first-letter {text-transform:uppercase;}.new {color:#FF5F00;
font-weight:bold;
font-style:italic;}.postname {font-weight:normal;
background: -webkit-linear-gradient(right, #6DFC85 0%, #FFF 40%); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, #6DFC85 0%, #FFF 40%); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, #6DFC85 0%, #FFF 40%); /* For Firefox 3.6 to 15 */
background: linear-gradient(right, #6DFC85 0%, #FFF 40%); /* Standard syntax */}.postname li {border-bottom: #DDD 1px dotted;
margin-right:5px}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
</style><div id="sitemap">
<script type="text/javascript" src="https://cdn.rawgit.com/prozokti/rashid/master/sitemap.js"></script>
<script src="https://24gdbd.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadsitemap"></script>
</div>
  • এখন 24gdbd.blogspot.com এর জায়গার আপনার ব্লগের এড্রেস দিয়ে দিন।
  • সবশেষে Publish বাটনে ক্লিক করলেই কাজ শেষ।
পূর্বে প্রকাশিতঃ 24worldtips.ml  এখানে
3rd Option
যে ভাবে ব্লগে যুক্ত করবেনঃ
  • প্রথমে আপনার ব্লগে লগইন করুন।
  • তারপর ব্লগার ড্যাশবোর্ড হতে Page এ ক্লি করুন।
  • এখন Create a New Page এ ক্লিক করুন।
  • এরপর পেজটির HTML এ ক্লিক করুন।
  • নিচের কোডগুলি কপি করে HTML পেজে পেষ্ট করুন।
<style>
p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;}
a.post-titles {color: #0000FF;}
ol li{list-style-type:decimal;line-height:25px;}
</style>
<script>
//<![CDATA[
var postTitle=new Array();var postUrl=new Array();var postPublished=new Array();var postDate=new Array();var postLabels=new Array();var postRecent=new Array();var sortBy="titleasc";var tocLoaded=false;var numChars=250;var postFilter="";var numberfeed=0;function bloggersitemap(a){function b(){if("entry" in a.feed){var d=a.feed.entry.length;numberfeed=d;ii=0;for(var h=0;h<d;h++){var n=a.feed.entry[h];var e=n.title.$t;var m=n.published.$t.substring(0,10);var j;for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="alternate"){j=n.link[g].href;break}}var o="";for(var g=0;g<n.link.length;g++){if(n.link[g].rel=="enclosure"){o=n.link[g].href;break}}var c="";if("category" in n){for(var g=0;g<n.category.length;g++){c=n.category[g].term;var f=c.lastIndexOf(";");if(f!=-1){c=c.substring(0,f)}postLabels[ii]=c;postTitle[ii]=e;postDate[ii]=m;postUrl[ii]=j;postPublished[ii]=o;if(h<10){postRecent[ii]=true}else{postRecent[ii]=false}ii=ii+1}}}}}b();sortBy="titleasc";sortPosts(sortBy);sortlabel();tocLoaded=true;displayToc2();document.write('</br><div class="sitemap-link"><a href="http://helplogger.blogspot.com/2013/12/add-sitemap-table-of-contents-to-blogger.html" style="font-size: 10px; text-decoration:none; color: #5146CD;">Get This Widget</a></div>')}function filterPosts(a){scroll(0,0);postFilter=a;displayToc(postFilter)}function allPosts(){sortlabel();postFilter="";displayToc(postFilter)}function sortPosts(d){function c(e,g){var f=postTitle[e];postTitle[e]=postTitle[g];postTitle[g]=f;var f=postDate[e];postDate[e]=postDate[g];postDate[g]=f;var f=postUrl[e];postUrl[e]=postUrl[g];postUrl[g]=f;var f=postLabels[e];postLabels[e]=postLabels[g];postLabels[g]=f;var f=postPublished[e];postPublished[e]=postPublished[g];postPublished[g]=f;var f=postRecent[e];postRecent[e]=postRecent[g];postRecent[g]=f}for(var b=0;b<postTitle.length-1;b++){for(var a=b+1;a<postTitle.length;a++){if(d=="titleasc"){if(postTitle[b]>postTitle[a]){c(b,a)}}if(d=="titledesc"){if(postTitle[b]<postTitle[a]){c(b,a)}}if(d=="dateoldest"){if(postDate[b]>postDate[a]){c(b,a)}}if(d=="datenewest"){if(postDate[b]<postDate[a]){c(b,a)}}if(d=="orderlabel"){if(postLabels[b]>postLabels[a]){c(b,a)}}}}}function sortlabel(){sortBy="orderlabel";sortPosts(sortBy);var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];firsti=a;do{a=a+1}while(postLabels[a]==temp1);b=a;sortPosts2(firsti,a);if(b>postTitle.length){break}}}function sortPosts2(d,c){function e(f,h){var g=postTitle[f];postTitle[f]=postTitle[h];postTitle[h]=g;var g=postDate[f];postDate[f]=postDate[h];postDate[h]=g;var g=postUrl[f];postUrl[f]=postUrl[h];postUrl[h]=g;var g=postLabels[f];postLabels[f]=postLabels[h];postLabels[h]=g;var g=postPublished[f];postPublished[f]=postPublished[h];postPublished[h]=g;var g=postRecent[f];postRecent[f]=postRecent[h];postRecent[h]=g}for(var b=d;b<c-1;b++){for(var a=b+1;a<c;a++){if(postTitle[b]>postTitle[a]){e(b,a)}}}}function displayToc(a){var l=0;var h="";var e="Post Title";var m="Click to sort by title";var d="Date";var k="Click to sort by date";var c="Category";var j="";if(sortBy=="titleasc"){m+=" (descending)";k+=" (newest first)"}if(sortBy=="titledesc"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="dateoldest"){m+=" (ascending)";k+=" (newest first)"}if(sortBy=="datenewest"){m+=" (ascending)";k+=" (oldest first)"}if(postFilter!=""){j="Click to view all"}h+="<table>";h+="<tr>";h+='<td class="header1">';h+='<a href="javascript:toggleTitleSort();" title="'+m+'">'+e+"</a>";h+="</td>";h+='<td class="header2">';h+='<a href="javascript:toggleDateSort();" title="'+k+'">'+d+"</a>";h+="</td>";h+='<td class="header3">';h+='<a href="javascript:allPosts();" title="'+j+'">'+c+"</a>";h+="</td>";h+='<td class="header4">';h+="Read all";h+="</td>";h+="</tr>";for(var g=0;g<postTitle.length;g++){if(a==""){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}else{z=postLabels[g].lastIndexOf(a);if(z!=-1){h+='<tr><td class="entry1"><a href="'+postUrl[g]+'">'+postTitle[g]+'</a></td><td class="entry2">'+postDate[g]+'</td><td class="entry3">'+postLabels[g]+'</td><td class="entry4"><a href="'+postPublished[g]+'">Read</a></td></tr>';l++}}}h+="</table>";if(l==postTitle.length){var f='<span class="toc-note">Show All '+postTitle.length+" Posts<br/></span>"}else{var f='<span class="toc-note">Show '+l+" posts by category '";f+=postFilter+"' the "+postTitle.length+" Total Posts<br/></span>"}var b=document.getElementById("toc");b.innerHTML=f+h}function displayToc2(){var a=0;var b=0;while(b<postTitle.length){temp1=postLabels[b];document.write("<p/>");document.write('<p class="labels"><a href="/search/label/'+temp1+'">'+temp1+"</a></p><ol>");firsti=a;do{document.write("<li>");document.write('<a class="post-titles" href="'+postUrl[a]+'">'+postTitle[a]+"</a>");if(postRecent[a]==true){document.write(' - <strong><span style="color: rgb(255, 0, 0);">New!</span></strong>')}document.write("</li>");a=a+1}while(postLabels[a]==temp1);b=a;document.write("</ol>");sortPosts2(firsti,a);if(b>postTitle.length){break}}}function toggleTitleSort(){if(sortBy=="titleasc"){sortBy="titledesc"}else{sortBy="titleasc"}sortPosts(sortBy);displayToc(postFilter)}function toggleDateSort(){if(sortBy=="datenewest"){sortBy="dateoldest"}else{sortBy="datenewest"}sortPosts(sortBy);displayToc(postFilter)}function showToc(){if(tocLoaded){displayToc(postFilter);var a=document.getElementById("toclink")}else{alert("Just wait... TOC is loading")}}function hideToc(){var a=document.getElementById("toc");a.innerHTML="";var b=document.getElementById("toclink");b.innerHTML='<a href="#" onclick="scroll(0,0); showToc(); Effect.toggle(\'toc-result\',\'blind\');">?? Display Table of Contents</a> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzgPfhby5y7xjpJsG_sP0n7G2NAT8AD73VA2_r1xdwsvBWZZAZa3TgmauHkRCveoprntO1UFF2QUzfSJZKU34xkvxEWFNdVDMonswjlC7tbpyyYGPo5IHFFG3zhyphenhyphenlwZU-Sgf8sFp_MEdHj/s1600/new_icon.gif"/>'}function looptemp2(){for(var a=0;a<numberfeed;a++){document.write("<br>");document.write('Post Link : <a href="'+postUrl[a]+'">'+postTitle[a]+"</a><br>");document.write('Read all : <a href="'+postPublished[a]+'">'+postTitle[a]+"</a><br>");document.write("<br>")}};
//]]>
</script>
<script src="http://helplogger.blogspot.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=bloggersitemap"></script>

  • এখন http://helplogger.blogspot.com এর জায়গার আপনার ব্লগের এড্রেস দিয়ে দিন।
  • সবশেষে Publish বাটনে ক্লিক করলেই কাজ শেষ।
==============================================
সহজ ভাষায় বলা যায় সাইটম্যাপ হচ্ছে আপনার ওয়েবসাইটের সমুদয় পোষ্ট এর সারসংক্ষেপ। সাইটম্যাপের মাধ্যমে Search Engine সহজে বুঝে নিতে পারে যে, আপনার ব্লগে/ওয়েবসাইটে কতগুলো পোষ্ট রয়েছে। যার ফলশ্রুতিতে যে কোন সার্চ ইঞ্জিন আপনার সাইটের কনটেন্ট গুলি Index করে সার্চ রেজাল্টে নিয়ে আসে। এটি হচ্ছে বিভিন্ন সার্চ ইঞ্জিনে আপনার ব্লগ/ওয়েবসাইট সাবমিটের পদ্ধতী। কিন্তু আমি যে HTML Sitemap Page টি তৈরী করা দেখাবো এটি হচ্ছে আপনার পাঠকের জন্য। যার মাধ্যমে পাঠকরা জানতে পারবে আপনার ব্লগে কতগুলি পোষ্ট রয়েছে। এ ছাড়াও আর সুবিধা হচ্ছে যে, এই HTML Sitemap Page টি প্রত্যেকটি Label-কে আলাদা আলাদাভাবে দেখাবে। যার ফলে ভিজিটররা সহজে তাদের পছন্দমত লিংকগুলি ভিজিট করতে পারবে। তাছাড়া নতুন পোষ্টগুলি অটোমেটিকভাবে Indicate করবে যে, কোন গুলি নতুন পোষ্ট। এই পোষ্টটি হয়ত বিভিন্ন ব্লগে অনেকবার করা হয়েছে। তার পরও নতুন করে শেয়ার করছি, কারণ আমি এটিতে নতুন কিছু ফিচার যুক্ত করার পাশাাপাশি সব ধরনের Browsers Compatibility করেছি। যা এটিকে আরও আকর্ষণীয় করে তুলবে। তাছাড়া বাংলা ব্লগের জন্য ফন্টের কিছু সমস্যা ছিল, তা Solve করেছি। আশা করি আপনাদের ভাল লাগবে। এখান থেকে ডেমো দেখে আসতে পারেন।
Blogger Html Sitemap Page
 যে ভাবে ব্লগে যুক্ত করবেনঃ
  • প্রথমে আপনার ব্লগে লগইন করুন।
  • তারপর ব্লগার ড্যাশবোর্ড হতে Page এ ক্লি করুন।
  • এখন Create a New Page এ ক্লিক করুন।
  • এরপর পেজটির HTML এ ক্লিক করুন।
  • নিচের কোডগুলি কপি করে HTML পেজে পেষ্ট করুন।
<style type="text/css">
#sitemap {
   width:100%;
   margin:5px auto;
   margin-left: 4px;
   border:1px solid #23A839;
   border-top:0px solid #2D96DF;
}
.label {
   color:#FF5F00;
   font-weight:bold;
   margin: -16px -1px 0px;
   padding:1px 0 2px 11px;
   background: -webkit-linear-gradient(right,#6DFC85 0%,#23A839 40%); /* For Safari 5.1 to 6.0 */
   background: -o-linear-gradient(right,#6DFC85 0%,#23A839 40%); /* For Opera 11.1 to 12.0 */
   background: -moz-linear-gradient(right,#6DFC85 0%,#23A839 40%); /* For Firefox 3.6 to 15 */
   background: linear-gradient(right,#6DFC85 0%,#23A839 40%); /* Standard syntax */
   border:1px solid #23A839;
   border-radius:0px;
   -moz-border-radius:0px;
   -webkit-border-radius:0px;
   display:block;
}
.label a {color:#fff;}
.label:first-letter {text-transform:uppercase;}
.new {
   color:#FF5F00;
   font-weight:bold;
   font-style:italic;
}
.postname {
   font-weight:normal;
   background: -webkit-linear-gradient(right,#6DFC85 0%,#FFF 40%); /* For Safari 5.1 to 6.0 */
   background: -o-linear-gradient(right,#6DFC85 0%,#FFF 40%); /* For Opera 11.1 to 12.0 */
   background: -moz-linear-gradient(right,#6DFC85 0%,#FFF 40%); /* For Firefox 3.6 to 15 */
   background: linear-gradient(right,#6DFC85 0%,#FFF 40%); /* Standard syntax */
}
.postname li {
   border-bottom: #DDD 1px dotted;
   margin-right:5px
}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
</style>

<div id="sitemap">
<script type="text/javascript" src="https://harunzoki.googlecode.com/svn/trunk/Sitemap.js"></script>
<script src="http://www.prozokti.com/feeds/posts/default?max-results=9999&amp;alt=json-in-script&amp;callback=loadsitemap"></script>
</div>
  • এখন www.prozokti.com এর জায়গার আপনার ব্লগের এড্রেস দিয়ে দিন।
  • সবশেষে Publish বাটনে ক্লিক করলেই কাজ শেষ।
Read More »

সঠিক উপায়ে Mobile Template থেকে অপ্রয়োজনীয় HTML Hide করুন

Responsive Blogger Template ডিজাইন সম্পর্কিত সিরিজ টিউটরিয়াল শেয়ার করার জন্য কিছু দিন আগে আমরা ঘোষনা করেছিলাম। সেই ঘোষনা অনুযায়ী আজ তার ২য় পোষ্ট শেয়ার করতে যাচ্ছি। উল্লেখ্য যে, আমরা ইতিপুর্বে প্রফেশনাল ব্লগার টেমপ্লেট তৈরি ০৮ টি ধারাবাহিক টিউটরিয়াল শেয়ার করেছি। পোষ্টগুলি অবশ্যই এক পলক দেখে নেবেন।
সঠিক উপায়ে Mobile Template থেকে অপ্রয়োজনীয় HTML Hide করুন
গত ২০১৫ সালের এপ্রিল মাসে Google's Mobile Friendly Update Algorithm এর নতুন নিয়ম আপডেট করে। যার ফলে অনেক ভালমানের ব্লগের মোবাইলের মাধ্যমে ভিজিটর পাওয়ার পরিমান কমে গেছে। কারণ অনেক ওয়েব ডেভেলপাররা বুঝতে পারেনি যে, ব্লগার টেমপ্লেটের ডিজাইন শুধুমাত্র মোবাইল উপযোগী হলে হবে না, পাশাপাশি মোবাইল Browsers গুলির স্পীড এর উপযোগীও হতে হবে। মোবাইল টেমপ্লেটের স্পীড নরমালি যে কোন কম্পিউটার Browsers টেমপ্লেটের চাইতে অনেক কম হয়ে থাকে। তাছাড়াও মোবাইলের মাধ্যমে বেশীরভাগ লোক 2G ও 3G নেটওয়ার্কের মাধ্যমে Internet ব্যবহার করে থাকেন। যার গতি যে কোন Broad Band ইন্টারনেটের চাইতে অনেকগুন কম হয়ে থাকে। কাজেই আপনার ব্লগের মোবাইল টেমপ্লেটকে ঐ সব আনুষাঙ্গিক বিষয় মাথায় রেখে সাজাতে হবে। শুধুমাত্র মোবাইল উপযোগী স্টাইল করলেই হবে না। কারণ যখন কোন ভিজিটর ব্লগ ভিজিট করার সময় বেশী সময় নেবে সে ঐ ব্লগ ভিজিট না করে তার বিষয়টি অন্যত্র খোঁজার চেষ্টা করবে।
সকল পোষ্ট দেখুন
আমি অনেক ভালমানের ব্লগার টেমপ্লেট রিসার্চ করেছি এবং দেখেছি যে, বেশীরভাগ ডেভেলপাররা তাদের ব্লগের মোবাইল টেমপ্লেট হতে কোন HTML অংশ Hide করার জন্য শুধুমাত্র "Display:none" Property ব্যবহার করেছেন। এভাবে যদিও কোন HTML Element Hide করা সম্ভব, তবুও এটি মোবাইল টেমপ্লেটের ক্ষেত্রে ১০০% নিরাপদ নয়। 

 Responsive Templates এ কেন "Display:none" ব্যবহার করা উচিত নয়?

  • "Display:none" Property শুধুমাত্র Images, Iframes এবং Div Section -কে Hide করার ক্ষেত্রে অবশ্যই ব্যবহার করবেন। তবে আপনি যদি এ ভাবে সকল ধরনের HTML অংশ মোবাইল টেমপ্লেট থেকে Hide করেন তাহলে যদিও এটি মোবাইল টেমপ্লেটের Out Put থেকে Hide হবে তবে Input এ ঠিকই কাজ করবে। ফলে দেখা যাবে ঐ সমস্ত HTML অংশ Rendered করার পাশাপাশি প্রত্যেকটি লিংক Search Robot Crawl করতে থাকবে। এতেকরে আপনার টেমপ্লেট সার্চ ইঞ্জিন অপটিমাইজেশনে বড় সমস্যার সম্মুখিন হবে।
  • অধীকন্তু আপনি যদি মোবাইল টেমপ্লেট থেকে "Display:none" Property ব্যবহার করে কোন আর্টিকেল Hide করেন তাহলে সেটিও সার্চ Robot -দের Visible করে রাখবে। যারফলে সার্চ রোবট আপনার ব্লগের বিভিন্ন কনটেন্ট এর ব্যাপারে Confused এ পড়ে যাবে। এটিও সার্চ ইঞ্জিন অপটিমাইজেশনে অনেক ব্যাঘাত ঘটাবে। 
  • সবচেয়ে বড় সমস্যা হচ্ছে এটি ব্যবহার করে কোন অংশ Hide করার ফলে যদি আপাতত ঐ সমস্ত কনটেন্ট বাহ্যিক ‍দৃষ্টিতে দেখা যাবে না তবে সেগুলি Input এ ঠিকই কাজ করতে থাকবে। যার ফলে আপনার টেমপ্লেটের Speed কমতে থাকবে।

 সঠিক উপায়ে Mobile Template থেকে অপ্রয়োজনীয় HTML Hide করাঃ

Blogger Templates XHTML ফরমেটে তৈরি করা হয়েছে, যার জন্য এটি অনেক ধরনের Conditional Tag Support করে। মোবাইল টেমপ্লেটের জন্য isMobileRequest অত্যন্ত গুরুত্বপূর্ণ একটি Conditional Tag যেটি যে কোন HTML DOM এর ক্ষেত্রে ব্যবহার করতে পারবেন। এই isMobileRequest এর True ও False দুটি Condition রয়েছে। নিচে আমাদের ব্লগের User Experience দেখুন, যেখানে গুগল আমাদের ব্লগের জন্য 100/100 Score প্রদান করছে। আপনার ব্লগের User Experience গুগল ডেভেলপার পেজ এর লিংক থেকেচেক করে নিতে পারেন।
সঠিক উপায়ে Mobile Template থেকে অপ্রয়োজনীয় HTML Hide করুন

 কিভাবে Conditional Tag ব্যবহার করবেন?

  • আপনার ব্লগে লগইন করুন।
  • ব্লগের কোন অংশ শুধুমাত্র মোবাইল টেমপ্লেটে দেখানোর জন্য নিচের Conditional Tag টি ব্যবহার করুন।
<b:if cond='data:blog.isMobileRequest == "true"'>

HTML To Show Only in Mobile Devices

</b:if>
  • অথবা আপনার ব্লগের কোন অংশ যদি শুধুমাত্র কম্পিউটার টেমপ্লেটে দেখাতে চান তাহলে নিচের Conditional Tag টি ব্যবহার করতে হবে।
<b:if cond='data:blog.isMobileRequest == "false"'>

HTML To Show Only in Desktop Devices

</b:if>
  • উপরের এই Conditional Tag দুটি HTML Element-কে শুধুমাত্র প্রয়োজনীয় জায়গাতে Active করে রাখবে এবং অপ্রয়োজনীয় ক্ষেত্রে Disable করে রাখবে।
সাহায্য জিজ্ঞাসাঃ আশা করছি উপরের কোন বিষয় আপনাদের বুঝতে অসুবিধা হবে না। তারপরও যদি কোন অংশ সম্পর্কে দ্বিধা থাকে তাহলে আমাদের জানাতে পারেন। আমাদের পরবর্তী পোষ্টে শেয়ার করব কিভাবে isMobileRequest ব্যবহার করে ব্লগের JavaScript ও Widget Disable করে মোবাইল টেমপ্লেটের Speed বৃদ্ধি করবেন।
Read More »

ব্লগের Facebook Comment Box হতে অপ্রয়োজনীয় Comments ডিলিট করুন

কিছু দিন আগে আমরা ব্লগে Facebook Comment Box যুক্ত করার দু’টি পদ্ধতী দেখিয়েছিলাম। সেখানেএকটিতে বিস্তারিতভাবে এবং অন্যটিতে দেখিয়েছিলাম কিভাবে সহজ উপায়ে ব্লগে Facebook Comment Box যুক্ত করতে হয়। আপনার ব্লগে যদি যুক্ত করা না থাকে তাহলে পছন্দমত উপরের যে কোন লিংক থেকে Facebook Comment Box যুক্ত করে নিতে পারেন।
Facebook-Moderation-Tool
এবার মূল কথায় আসা যাক। অনেকেই ভাবেন যে, ব্লগে ফেইসবুক Facebook Comment Box যুক্ত করা যায় কিন্তু কমেন্ট ডিলিট করা যায় না। এ জন্য অনেকেই Facebook Comment Box যুক্ত করা থেকে বিরত থাকেন। আসলে তাদের ধারনা সম্পূর্ণ ভূল। ব্লগার Comment Box এর মত Facebook Comment Box থেকেও আপনার অপছন্দকর এবং অপ্রয়োজনীয় কমেন্টগুলি Moderation Tool অপশনের মাধ্যমে খুব সহজেই ডিলিট করতে পারবেন।

এই টুলটি Facebook Comment Box ব্যবহারকারীদের জন্য খুবই গুরুত্বপূর্ণ। কারন এমন কিছু কমেন্ট থাকবে যা আপনার ব্লগের জন্য সম্পূর্ণ অপ্রয়োজনীয় বা ব্লগ সম্পর্কিত নয়। তখন এ গুলি আপনাকে ডিলিট করতে হয়, আর ডিলিট করতে না পারলে অন্য ভিজিটররা আপনার পোষ্টটি সম্পর্কে বিরূপ চিন্তা করতে পারে।

 কিভাবে করবেনঃ

  • প্রথমে উপরের লিংক হতে একটি Facebook App ID তৈরী করে নিন।
  • তারপর আপনার ব্লগে নরমালি Facebook Comment Box যুক্ত করুন।
  • এরপর ব্লগার Template > Edit Html এ ক্লিক করুন।
  • তারপর কিবোর্ড হতে Ctrl+F চেপে <head> অংশটি সার্চ করুন।
  • এখন নিচের ম্যাটা ট্যাগ দুটি <head> অংশটির নিচে পেষ্ট করুন।
<meta content='100007549210939' property='fb:admins'/>
<meta content='112733679069469' property='fb:app_id'/>
  • উপরের লাল চিহ্নিত প্রথমটিতে আপনার Facebook Account এর User ID এবং ২য় টিতে Facebook App ID দেন। (নোটঃ User ID আপনার Facebook এর প্রোফাইলে যাওয়ার পর ব্রাউজারের Address বারে দেখতে পাবেন। আপনি যদি কাষ্টম Name ব্যবহার করে (https://www.facebook.com/harunzokii) থাকেন, তাহলে নরমালি এটি দেখতে পাবেন না। যদি এ ধরনের নাম ব্যবহার করে থাকেন, তাহলে এই লিংকে গিয়ে আপনার ফেইসবুক Url টি দিয়ে Lookup করলে 15 সংখার User ID পেয়ে যাবেন। আর ২য় টি আপনার Facebook App ID তে গেলেই পেয়ে যাবেন)।
কিভাবে Moderator হবেনঃ উপরের ধাপগুলি শেষ করলেই আপনি Facebook Comment Box এর কমেন্ট ডিলিট করতে পারবেন না। এই জন্য আপনাকে একজন Moderator হতে হবে।
  • আপনার ফেইসবুক একাউন্টে লগইন করুন।
  • তারপর এই লিংকে ক্লিক করলে আপনার Facebook App ID এর ডান দিকে একটি Settings অপশন দেখতে পাবেন। এই Settings অপশনে ক্লিক করলে নিচের চিত্রটি শো করবে।
Facebook-Moderation-Tool
  • এখানে লাল তীর চিহ্নের মাধ্যমে মার্ক করা বক্সে আপনার নামটি লিখে নাম সিলেক্ট করে দিয়ে Save এ ক্লিক করলেই কাজ Ok. এখন থেকে আপনি কমেন্ট ডিলিট করতে পারবেন।

 কিভাবে Comment ডিলিট করবেনঃ

  • এখন থেকে ব্লগের Facebook Comment বক্সে গেলে প্রত্যেকটি কমেন্ট এর ডান পাশে নিচের চিত্রের অপশনগুলি দেখতে পাবেন। এর জন্য অবশ্যই আগে থেকে আপনার Facebook Account এ লগইন করা থাকতে হবে। তবেই আপনি Moderation Tools অপশন দেখতে পাবেন।
Facebook-Moderation-Tool
  • উপরের লাল চিহ্নিত Hide Comment এ ক্লিক করে আপনি যে কারও কমেন্ট Hide করে রাখতে পারবেন। এতে করে ঐ Hide করা কমেন্টটি কেউ-ই দেখতে পাবে না।
Read More »

ব্লগে ০২ টি আকর্ষণীয় Customize Blockquote Style যুক্ত করুন!

যে কোন ব্লগে Block Quote অথবা Block Quotation দ্বারা সাধারনত ব্লগ পোষ্টের ভীতরের কিছু লেখাকে Highlight করা হয়। এটি আসলে ভিজিটরদের ব্লগের কোন অংশ সম্পর্কে স্পষ্ট ধারনা দেয়ার জন্য করা হয়। তাছাড়াও ব্লগে যখন কোন ধরনের Html, Css এবং JavaScript কোড শেয়ার করা হয় তখন এগুলিকে সহজে চেনার জন্য Block Quotation ব্যবহার করা হয়।
ব্লগে ০২ টি আকর্ষণীয় Customize Blockquote Style যুক্ত করুন!
সব ধরনের ব্লগে বিভিন্ন স্টাইলের Block Quotation ব্যবহার করতে দেখা যায়। আমরা আজ আপনাদের সাথে ০২ টি Customize Blockquote Css Style শেয়ার করব। এ দুটিকে কাষ্টমাইজ করে আপনি চাইলে আপনার মনেরমত করে নিতে পারবেন।

 কিভাবে করবেনঃ

  • প্রথমে আপনার ব্লগে লগইন করুন।
  • এরপর Template > Edit Html এ ক্লিক করুন।
ব্লগে ০২ টি আকর্ষণীয় Customize Blockquote Style যুক্ত করুন!
  • তারপর কিবোর্ড হতে Ctrl+F চেপে ]]></b:skin> অংশটি সার্চ করুন।
ব্লগে ০২ টি আকর্ষণীয় Customize Blockquote Style যুক্ত করুন!
  • এখন আপনার পছন্দমত নিচের যে কোন একটি স্টাইল টেমপ্লেট এর ]]></b:skin> ট্যাগের ঠিক উপরে পেষ্ট করুন
ব্লগে ০২ টি আকর্ষণীয় Customize Blockquote Style যুক্ত করুন!
স্টাইল-১
.post blockquote {
    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPhJwh8Yx2-32Jm_xYy0rXwIvlxn1m_Fgki_nJrx9QQmpWEmvbK05F2Zcz1q2LyiVm91IaFan8P7tFeFf6GfJ51q7jjOACKnOXItAFikKM29OeBIw60X9Tgr7JQPSjJr2WjAEMnoNIcjIi/s1600/blockquote-bg.png") repeat scroll center top #F9F9F9;
    border-left:6px solid #CACACA;
    border-radius:6px;
    color:#000;
    font-size:11px;
    font-family: Georgia,"Times New Roman",Times,serif;
    font-style:italic;
    line-height:18px;
    margin:0px 0px 5px 0px;
    overflow:hidden;
    padding:10px 0px 10px 40px;
 }
ব্লগে ০২ টি আকর্ষণীয় Customize Blockquote Style যুক্ত করুন!
স্টাইল-২
.post blockquote {
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9btb_iY4knZzVawtQJ9KAf2cnIpjMpoHCmk4jnD1gciRBmM_LIX4NyVefKN6ekb5uPYmyD-htkUHkThdpJH49SVVTqgpU7s2ku-1cvXgL51ZI0M66Hy0F5SU-41Wj6Twa8VZemuGVpGNb/s1600/Bloquote.png');
    background-position:0% 0%;
    background-repeat:no-repeat repeat;
    border-radius:6px;
    border-color:#007ABE;
    border-right:1px dotted;
    border-bottom:1px dotted;
    border-top:1px dotted;
    color:#000; font-size:11px;
    font-family: Georgia,"Times New Roman",Times,serif;
    font-style:italic; line-height:18px;
    margin:0px 0px 5px 0px;
    overflow:hidden;
    padding:10px 0px 10px 40px;
 }
  • সবশেষে Save Template এ ক্লিক করে Template টি Save করুন।

 কাষ্টমাইজেশনঃ

  • উপরের background হতে ব্যাকগ্রাউন্ডের ছবি বা কালার পরিবর্তন করতে পারবেন।
  • border-left:6px solid #CACACA হতে Border কালার এবং Border Width পরিবর্তন।
  • এরপর color, font-size, font-family এবং font-style হতে ফন্ট স্ট্যাইল পরিবর্তন।
  • এছাড়ও Margin, Padding সহ আর অনেক স্টাইল যুক্ত করতে পারবেন।
Read More »

Badiuzzaman ( Rubel )