কীভাবে ব্লগার পোস্টগুলির জন্য ডেমো এবং ডাউনলোড বাটন যুক্ত করবেন

 হ্যালো বন্ধুরা! Nijam360 ব্লগে আপনাকে স্বাগতম। আজকে আমরা কীভাবে ব্লগার পোস্টগুলির জন্য ডেমো এবং ডাউনলোড বাটন যুক্ত   করবেন  এ সম্পর্কে কথা বলতে যাচ্ছি ।

Stylish Slider CSS ডেমো এবং ডাউনলোড বোতামগুলির বৈশিষ্ট্য

Pure CSS.
Light Weight.
Font Awesome icons used.
A simple combo of HTML and CSS.
Cool Hover Effect.
The text also changes on hover.
Easy to customize.
CSS ভিত্তিক স্লাইডার ডেমো এবং ব্লগারগুলিতে ডাউনলোড বোতামগুলি কীভাবে যুক্ত করবেন?
বন্ধুরা, এখন আমি আপনাকে ধাপে ধাপে বলেছি যে কীভাবে আপনি সহজেই আপনার ব্লগ পোস্টে স্লাইডার ডেমো এবং ডাউনলোড বোতামটি যুক্ত করতে পারেন? সুতরাং আপনি যদি নিজের পোস্টে এই বোতামটি দেখাতে চান তবে নীচের দেওয়া পদক্ষেপগুলি অনুসরণ করুন এবং html এবং CSS ব্যবহার করুন।

Step 1: Adding Font Awesome To Blogger

এখন আপনাকে প্রথমে আপনার ব্লগার ড্যাশবোর্ডটি খুলতে হবে। এছাড়াও আপনাকে Theme>Edit HTML এ যেতে হবে। এবং </head>অনুসন্ধান করতে। এছাড়াও, নীচে প্রদত্ত কোডটি এই </head> tag  উপরে পেস্ট করুন এবং Save Button ক্লিক করুন।

 <script type='text/javascript'>  
 //<![CDATA[  
 function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }  
 loadCSS("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css");  
 //]]>  
 </script>  
 <noscript>  
 <link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css' rel='stylesheet'/>  
 </noscript>  

Step 2: Adding CSS Code Of And Download Buttons

দ্বিতীয় ধাপে আপনাকে আপনার ব্লগার টেম্পলেটে এই দুটি buttons জন্য CSS যুক্ত করতে হবে। এর জন্য আপনাকে Theme>Edit Theme এ ক্লিক করতে হবে। এখন আপনাকে আপনার টেমপ্লেটে ]]></b:skin> tag অনুসন্ধান করতে হবে  এবং নীচে প্রদত্ত CSS এটির ]]></b:skin>  উপরে পেস্ট করে Save করতে  হবে

 /* CSS Demo & Download Buttons By (www.Techly360.com) */  
 .bie-slide,  
  .bie-slide2 {  
   position: relative;  
   display: inline-block;  
   height: 40px;  
   width: 170px;  
  line-height: 40px;  
   padding: 0;  
  border-radius: 50px;  
   background: #fdfdfd;  
   border: 2px solid #f84f4f;  
   margin: 10px;  
   transition: all 0.5s ease-in-out;  
  }  
  .bie-slide2 {  
   border: 2px solid #36D7B7;  
  }  
  .bie-slide:hover {  
  background-color: #f84f4f;  
  }  
  .bie-slide2:hover {  
  background-color: #36D7B7;  
  }  
  .bie-slide:hover span.circle,  
  .bie-slide2:hover span.circle2 {  
   left: 100%;  
  margin-left: -45px;  
  background-color: #fdfdfd;  
   color: #f84f4f;  
  }  
  .bie-slide2:hover span.circle2 {  
   color: #36D7B7;  
  }  
  .bie-slide:hover span.title,  
  .bie-slide2:hover span.title2 {  
   left: 40px;  
   opacity: 0;  
  }  
  .bie-slide:hover span.title-hover,  
  .bie-slide2:hover span.title-hover2 {  
   opacity: 1;  
   left: 28px;  
  }  
  .bie-slide span.circle,  
  .bie-slide2 span.circle2 {  
   display: block;  
  background-color: #f84f4f;  
   color: #fff;  
   position: absolute;  
   float: left;  
   margin: 5px;  
  line-height: 30px;  
   height: 30px;  
   width: 30px;  
   top: 0;  
   left: 0;  
   transition: .5s;  
  border-radius: 50%;  
  }  
  .bie-slide2 span.circle2 {  
  background-color: #36D7B7;  
  }  
  .bie-slide span.title,  
  .bie-slide span.title-hover,  
  .bie-slide2 span.title2,  
  .bie-slide2 span.title-hover2 {  
   position: absolute;  
   left: 65px;  
  text-align: center;  
   margin: 0 auto;  
  font-size: 16px;  
  font-weight: bold;  
   color: #f84f4f;  
   transition: .5s;  
  }  
  .bie-slide2 span.title2,  
  .bie-slide2 span.title-hover2 {  
   color: #36D7B7;  
  }  
  .bie-slide span.title-hover,  
  .bie-slide2 span.title-hover2 {  
   left: 80px;  
   opacity: 0;  
  }  
  .bie-slide span.title-hover,  
  .bie-slide2 span.title-hover2 {  
   color: #fff;  
  }  

Step 3: Adding HTML portion to blogger posts

নীচে প্রদত্ত কোডটি হ'ল আপনার Stylish Slider Live Demo and Download Butto এবং html স্ক্রিপ্ট। এগুলি আপনি সহজেই ব্যবহার করতে পারেন।

For Demo Button

 <div id="wrap" style="text-align:center">  
 <a class="bie-slide" href="#" rel="no-follow" target="_blank">  
  <span class="circle"><i class="fa fa-laptop"></i></span>  
  <span class="title">Demo</span>  
  <span class="title-hover">Click here</span>  
 </a>  
 </div>  

For Download Button

 <div id="wrap" style="text-align:center">  
 <a class="bie-slide2" href="#" rel="nofollow" target="_blank">  
  <span class="circle2"><i class="fa fa-download"></i></span>  
  <span class="title2">Download</span>  
  <span class="title-hover2">Click here</span>  
 </a>  
 </div>  

Demo and Download Button

 <div id="wrap" style="text-align:center">  
 <a class="bie-slide" href="#" rel="no-follow" target="_blank">  
  <span class="circle"><i class="fa fa-laptop"></i></span>  
  <span class="title">Demo</span>  
  <span class="title-hover">Click here</span>  
 </a>  
 <a class="bie-slide2" href="#" rel="nofollow" target="_blank">  
  <span class="circle2"><i class="fa fa-download"></i></span>  
  <span class="title2">Download</span>  
  <span class="title-hover2">Click here</span>  
 </a>  
 </div>