*Please select own language to translate. If need any code, write on comment box with your email address. I will send you.*

2



Label Widget- ebhabe



How to show specific label widget.

আপনার Blogger Template এ add করুন Specific Label Widget এবং এর মাধ্যমে আপনার টেম্পলেটকে আরো সুন্দর করে তুলুন। এ widget দিয়ে আপনার নির্দিষ্ট নামের Label ছবি সহ Show করতে পারবেন। সম্পূর্ণ নতুন একটি style এ post করতে পারবেন আপনার Label গুলো। চলুন এ Label Widget টি তৈরী করার ধাপগুলো দেখি।

প্রথম ধাপ (First Step) :


  • প্রথমে আপনার Template এর Edit এ Click করুন। 
  • এরপর (Ctrl+F) চেপে ]]></b:skin> টাইপ করে search করুন। 
  • এবার নিচের Code টি (before) ]]></b:skin> এর উপরে paste করুন। 


<!--www.ebhabe.com Recent posts by labels1 start-->
img.label_thumb{
float:left;
margin-right:10px !important;
height:65px; /* Thumbnail height */
width:65px; /* Thumbnail width */
border: 1px solid #fff;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
box-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}
#label_with_thumbs {
float: left;
width: 100%;
min-height: 70px;
margin: 0px 10px 2px 0px;
padding: 0;
}
ul#label_with_thumbs li {
padding:8px 0;
min-height:65px;
margin-bottom:0px;
border-bottom: 1px dotted #999999;
}
#label_with_thumbs li{
list-style: none ;
padding-left:0px !important;
}
#label_with_thumbs a { text-transform: uppercase;}
#label_with_thumbs strong {padding-left:0px; }
<!--www.ebhabe.com Recent posts by labels1 end-->


দ্বিতীয় ধাপ (Second Step) :


  • এবার (Ctrl+F) চেপে </head> টাইপ করে search করুন। 
  • এবার নিচের Code টি (before) </head> এর উপরে paste  করুন। 



<!--www.ebhabe.com Recent posts by labels2 start-->
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul  id="label_with_thumbs">');for(var i=0;i<numposts;i++){var  entry=json.feed.entry[i];var posttitle=entry.title.$t;var  posturl;if(i==json.feed.entry.length)break;for(var  k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var  commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var  thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else  thumburl='http://3.bp.blogspot.com/-zP87C2q9yog/UVopoHY30SI/AAAAAAAAE5k/AIyPvrpGLn8/s1600/picture_not_available.png';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var  cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var  monthnames=new  Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li  class="clearfix">');if(showpostthumbnails==true)
document.write('<a href="'+posturl+'" target ="_top"><img  class="label_thumb"  src="'+thumburl+'"/></a>');document.write('<strong><a  href="'+posturl+'" target  ="_top">'+posttitle+'</a></strong><br>');if("content"in  entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var  re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var  quoteEnd=postcontent.lastIndexOf("  ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var  flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+'  - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0  Comments')commenttext='No Comments';commenttext='<a  href="'+commenturl+'" target  ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a  href="'+posturl+'" class="url" target ="_top">More  »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>
<!--www.ebhabe.com Recent posts by labels2 end-->


তৃতীয় ধাপ (Third Step) :


  • এবার (Ctrl+F) চেপে </body> টাইপ করে search করুন। 
  • এখন নিচের Code টি (before) </body> এর উপরে paste করুন। 
  • এবার Template টি save করুন। 



<!--www.ebhabe.com Recent posts by labels3 start-->
<script type='text/javascript'>                   
function changeThumbSize(id,size){
var blogGadget = document.getElementById(id);
var replacement = blogGadget.innerHTML;
blogGadget.innerHTML = replacement.replace(/s72-c/g,&quot;s&quot;+size+&quot;-c&quot;);
var thumbnails = blogGadget.getElementsByTagName(&quot;img&quot;);
for(var i=0;i&lt;thumbnails.length;i++){ 
thumbnails[i].width = size; 
thumbnails[i].height = size; 
}
}
changeThumbSize(&quot;label_with_thumbs&quot;,70);                   
</script>
<!--www.ebhabe.com Recent posts by labels3 end-->


চতুর্থ ধাপ (Fourth Step) :




  • এবার আপনার Template এর Layout এ Click করুন। 
  • এরপর Add a Gadget এ click করুন। 
  • এরপর HTML /JavaScript এ click করুন। 
  • HTML /JavaScript এর Edit এ click করুন। 
  • Title Name টাইপ করুন ও Content এ নিচের Code paste করুন। 
  • নিচের Red Color Widget replace করে আপনার (your) Label Name টাইপ করুন। 
  • HTML /JavaScript টি Save করুন। 
  • এবার আপনার Template টি Save করুন। 


<script type='text/javascript'>
var numposts = 5;
var  showpostthumbnails = true;
var displaymore = false;
var displayseparator =  true;
var showcommentnum = false;
var showpostdate = false;
var  showpostsummary = true;
var numchars = 100;
</script> 
<script type="text/javascript" src="/feeds/posts/default/-/Widget?published&alt=json-in-script&callback=labelthumbs"></script>


নোট : Red Color এর Widget replace করে আপনার (your) Label Name টাইপ করতে ভুলবেন না। আশা করি Specific Label Widget টি তৈরী করতে পেরেছেন।

Post a Comment

  1. How To Create Specific Label Posts Widget For Blogger
    https://www.tellforceblog.com/2017/10/how-to-create-specific-label-posts.html

    ReplyDelete
  2. Sorry for my late reply. Thanks for your link.

    ReplyDelete

 
Top