0
A+ A-

ব্লগে সুন্দর ডিজাইনের levels যুক্ত করার পদ্ধতি

 

তিনটি পদ্ধতি সম্পন্ন করে ব্লগে label gadget যোগ করতে হবে।
প্রথমে আপনাকে label gadget যোগ করতে হবে নিচের পদ্ধতি অনুসরণ করে--

ক. label Gadget যোগ করার পদ্ধতি:

স্টেপ - ১: আপনার ব্লগ এ লগিন করুন এবং post ক্লিক করুন তারপর Layout ক্লিক করুন। নিচের ছবির মত।
   
Blogger Layout
স্টেপ - ২: এখন হাতের ডান পাশে নিচের ছবির মত Add a Gadget লেখার উপর ক্লিক করুন।
Add gadget Button in blogger


স্টেপ - ৩: Add a Gadget লেখার উপর ক্লিক করার পর নিচের ছবির মত পপআপ মেনুতে কিছু অপসন দেখা যাবে। এই পপআপ মেনুতে নিচের দিকে scroll করে নামলে নিচের ছবির মত 'Labels' গেজেট দেখা যাবে। তখন Labels গেজেট এর ডান পাশে প্লাস (+) চিহ্নের উপর ক্লিক করতে হবে।     
Add Label Gadget from blogger default gadget


 স্টেপ - ৪: প্লাস (+) চিহ্নের উপর ক্লিক করার পর নিচের ছবির মত একটি window আসবে। এখান থেকে Display অপসন এর Cloud সিলেক্ট করে দিয়ে Save বাটনে ক্লিক করতে হবে।    


স্টেপ - ৫: এখন এই Labels গেজেট টি নিচের ছবির মত আপনার পছন্দের মত জায়গায় মাঊস দিয়ে ধরে টেনে নিয়ে বসাতে পারেন।     
Move blogger gadget to your favorite Place



খ. Label Style (CSS) যোগ করার পদ্ধতি:

স্টেপ - ১: এখন বাম পাশ থেকে নিচের ছবির মত template এ ক্লিক করতে হবে তারপর নিচের ছবির মত Edit HTML এ ক্লিক করতে হবে।   
blogger edit html


স্টেপ - ২:  "Edit HTML" এ ক্লিক করার পর নিচের ছবির মত কোড দেখা যাবে।
edit Blogger HTML code
স্টেপ - ৩: এখন কি-বোর্ড থেকে Ctrl+F চাপলে  নিচের ছবির মত হাতের ডান পাশে উপরে Search বক্স দেখা যাবে।   

স্টেপ - ৪: Search বক্স এই  ]]></b:skin> কোড  টাইপ বা কপি পেস্ট করে Enter বা Search এ ক্লিক করলে নিচের ছবির মত হলুদ রঙে ]]></b:skin>  লেখা দেখা যাবে। ঠিক ]]></b:skin> লেখার আগে বা উপরে Leves এর কোড কপি পেস্ট করতে হবে।
   

গ. CSS কোড যোগ করার পদ্ধতি:

ঠিক ]]></b:skin> লেখার আগে বা উপরে নিম্নে প্রদত্ত Leves এর কোড কপি পেস্ট করতে হবে। তারপর Save Template এ ক্লিক করতে হবে। সব শেষে View Blog এ ক্লিক করে ব্লগে কেমন দেখায় তা দেখতে হবে।


CSS কোড:

Design 1: Leaf style labels

blogger labels
 কপি পেস্ট নিচের কোড---
 
.label-size{
 margin:0;
 padding:0;
 position:relative;
 } 
 .label-size a{
 float:left;
 height:18px;
 line-height:18px;
 position:relative;
 font:14px verdana;
 margin-bottom: 9px;
 margin-left:10px;
 padding:10px;
 -webkit-box-shadow: inset 0 1px 0 0 #96ca6d;
  -moz-box-shadow: inset 0 1px 0 0 #96ca6d;
  box-shadow: inset 0 1px 0 0 #96ca6d;
  background-color: #7fbf4d;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7fbf4d), color-stop(100%, #63a62f));
  background-image: -webkit-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: -moz-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: -ms-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: -o-linear-gradient(top, #7fbf4d, #63a62f);
  background-image: linear-gradient(top, #7fbf4d, #63a62f);
  border: 1px solid #63a62f;
  border-bottom: 1px solid #5b992b;
 color:#fff;
 text-decoration:none;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
 -webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all  .5s ease-in-out;
 } 
.label-size a:hover
{
text-shadow:5px 5px 5px #dcdcdc;
background:orange;
border:1px solid orange;
border-bottom-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 30px;
border-top-right-radius: 30px;
}

Design 2 : Glossy Pills label

Glossy pills blogger labels
  কপি পেস্ট নিচের কোড---
 
.label-size{
 margin:0;
 padding:0;
 position:relative;

 } 
 .label-size a{
              float:left;
 height:18px;
 line-height:18px;
 position:relative;
 font:13px verdana;
 margin-bottom: 9px;
 margin-left:10px;
 padding:10px;
text-decoration:none;
  background-color: #ee432e;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee432e), color-stop(50%, #c63929), color-stop(50%, #b51700), color-stop(100%, #891100));
  background-image: -webkit-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: -moz-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: -ms-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: -o-linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  background-image: linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
  border: 1px solid #951100;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
  -webkit-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
  -moz-box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
  box-shadow: inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333333;
  color: #fff;
  font: bold 14px "helvetica neue", helvetica, arial, sans-serif;
   text-align: center;
  text-shadow: 0px -1px 1px rgba(0, 0, 0, 0.8);
  }
  .label-size a:hover {
    background-color: #f37873;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f37873), color-stop(50%, #db504d), color-stop(50%, #cb0500), color-stop(100%, #a20601));
    background-image: -webkit-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: -moz-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: -ms-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: -o-linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
    background-image: linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
     }
বি: দ্র: আমার ব্লগে উপরের লেভেল টি যোগ করা হয়েছে।

Design 3: Clean labels


Clean labels
কপি পেস্ট নিচের কোড--- 


.label-size{
 margin:0;
 padding:0;
 position:relative;
 } 
 .label-size a{
text-decoration:none;
 float:left;
 height:18px;
 line-height:18px;
 position:relative;
 margin-bottom: 9px;
 margin-left:10px;
 padding:10px;
  background-color: #eeeeee;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
  background-image: linear-gradient(top, #eeeeee, #cccccc);
  border: 1px solid #ccc;
  border-bottom: 1px solid #bbb;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #333;
  font: bold 12px verdana;
    text-align: center;
  text-shadow: 0 1px 0 #eee;
  }
  .label-size a:hover {
    background-color: #dddddd;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dddddd), color-stop(100%, #bbbbbb));
    background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: linear-gradient(top, #dddddd, #bbbbbb);
    border: 1px solid #bbb;
    border-bottom: 1px solid #999;
        text-shadow: 0 1px 0 #ddd; }
  button.clean-gray:active {
    border: 1px solid #aaa;
    border-bottom: 1px solid #888;
    -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; }



Design 4: Animated border style labels

Animated border labels


 কপি পেস্ট নিচের কোড--- 


 


.label-size{
 margin:0;
 padding:0;
 position:relative;

 } 
 .label-size a{
 float:left;
 height:18px;
 line-height:18px;
 position:relative;
 font:14px verdana;
 margin-bottom: 9px;
 margin-left:10px;
 padding:10px;
 color: #fff;
 background: #48C9FF;
 background: -webkit-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
 background: -moz-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
 background: -ms-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
 background: -o-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
 background: linear-gradient(to bottom, #48C9FF 0%, #2EA8E5 100%);
 text-shadow: #29a3cc 0 1px 3px;
 text-decoration:none;    
 border-top-left-radius: 10px 50px;
 border-bottom-left-radius: 10px 50px;
 border-top-right-radius: 10px 50px;
 border-bottom-right-radius: 10px 50px;
 -moz-border-radius-topleft: 10px 50px;
 -moz-border-radius-topright: 10px 50px;
 -moz-border-radius-bottomright: 10px 50px;
 -moz-border-radius-bottomleft: 10px 50px;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 transition: all 0.5s ease;
 }

.label-size a:hover 
{
 -moz-border-radius-topleft: 50px 50px;
 -moz-border-radius-topright: 50px 50px;
 -moz-border-radius-bottomright: 50px 50px;
 -moz-border-radius-bottomleft: 50px 50px;
 border-top-left-radius: 50px 50px;
 border-bottom-left-radius: 50px 50px;
 border-top-right-radius: 50px 50px;
 border-bottom-right-radius: 50px 50px;
}



Design 5 : Button style labels

Button style labels


 কপি পেস্ট নিচের কোড--- 


 


.label-size{
 margin:0;
 padding:0;
 position:relative;

 } 
 .label-size a{
              float:left;
 height:18px;
 line-height:18px;
 position:relative;
 font:13px verdana;
 margin-bottom: 9px;
 margin-left:10px;
 padding:10px;
 text-decoration:none;
 background-color: #ff4c47;
 border-radius: 3px;
 box-shadow: 0 2px 0 #db443d;
 -moz-box-shadow: 0 2px 0 #db443d;
 -webkit-box-shadow: 0 2px 0 #db443d;
 color: #fff;
 
 text-align: center;
}

.label-size a:hover {
 background-color: #db443d;
}


 


 ধন্যবাদ সবাইকে।



















Posted by











Share to:









































Post a Comment











































        

      







Subscribe to:
Post Comments (Atom)













 










Top