দেখে নিন কিভাবে ব্লগ সাইটে অসাধারণ এনিমেশন ইফেক্ট দিবেন।ব্লগাররা দেখে নিন। [animation effect for blogger in blog site]

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

টাইটেল দেখেই হয়ত বুঝে গেছেন আমি কি বিষয় নিয়ে আপনাদের সামনে হাজির হয়েছি। তো চলুন কিভাবে খুব সহজেই কাজটি আপনারা সম্পন্ন করবেন।

    


 1. যেখানে আপনি ইফেক্ট সেট করতে চান সেখানে নিচের Html কোড গুলো  কপি করে পেষ্ট করে দিন.......



<div class="fblwti-animated"> 

  <div class="fblwtia-mask fblwtia-title-line fblwtia-title-mask-0"> </div> 

  <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia -sapo-line-0"> </div> 

  <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sepline-sapo-0"> </div> 

 <div class="fblwtia-mask fblwtia-title- line fblwtia-title-mask-1"> </div> 

  <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sapo-line-1"> </div> 

  <div class="fblwtia-mask fblwtia- sepline-sapo fblwtia-sepline-sapo-1"> </div> 

  <div class="fblwtia-mask fblwtia-front-mask fblwtia-front-mask-2"> </div> 

 <div class="fblwtia-mask fblwtia-sapo-line fblwtia-sapo-line-2"> </div> 

  <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sepline-sapo-2"> </div>

  <div class="fblwtia-mask fblwtia-front-mask fblwtia-front-mask-3"> </div> 

  <div class="fblwtia-mask fblwtia-sapo-line fblwtia-sapo-line-3"></div> 

  <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sepline-sapo-3"> </div> 

  <div class="fblwtia-mask fblwtia-front-mask fblwtia-front-mask-4"> </div> 

  <div class="fblwtia-mask fblwtia-sapo-line fblwtia-sapo-line-4"> </div> 

  <div class="fblwtia-mask fblwtia-sepline-sapo fblwtia-sepline-sapo-4"> </div> 

</div>
</div>




2. সিএসএস কিভাবে সেট করবেন। দেখে নিন একনজরে......

এবার আমাদের সিএসএস কোড গুলো ব্লগ এ লাগাতে হবে, মানে থিমে লাগাতে হবে। 

১। তা প্রথমে আমরা www.blogger.com এ লগিন করি। আপনার সাইটটি ওপেন করি। 

২।  এবার Theme এ ক্লিক করি।তারপড় Edit Html এ ক্লিক করি। 

]]> </ b: skin>

৩। এবার সাবধানতার ⚠  সহিদ ]]> </b:skin> এর সামনে কপি করা কোড গুলো পেষ্ট করে দেই।

]]> </b:skin> খুজে না পেলে কিবোর্ড থেকে CTRL+ F চেপে ]]> </b:skin> টাইপ করলেই এসে যাবে] বাস কাজ শেষ।




.fblwtia-mask { 
 .fblwtia-title-mask-1 {
 background: #fff; 
 position: absolute; 
 -webkit-box-sizing: border-box; 
 -moz-box-sizing: border-box; 
 box-sizing: border-box;
 height: 10px; 
 }

 
 .fblwtia-title-line { 
 right: 0; 
 left: 36%; 
 top: 0; 
 height: 20px; 
 width: 3%; 
 } 


 .fblwtia-front-mask {
 height: 10px; 
 left: 36%; 
 width: 3%; 
 } 


 top: 30px; 

 } 
 .fblwtia-front-mask-2 { 
 top: 70px; 
 height: 15px; 
 } 

 .fblwtia-front-mask-3 { 
 top: 105px;
 } 

.fblwtia-front-mask-4 { 
 top: 125px; 
 } 

 .fblwtia-sepline-sapo {
 left: 36%; 
 right: 0; 
 } 

 .fblwtia-sepline-sapo-0 { 
 top: 20px; 
 } 

 .fblwtia-sepline-sapo-1 {
 top: 50px; 
 height: 20px; 
 } 

 .fblwtia-sepline-sapo-2 {
 top: 85px;
 height: 20px; 
 } 

 .fblwtia-sepline-sapo-3 {
 top: 115px;
 }

 .fblwtia-sepline-sapo-4 {
 top: 135px; 
 height: 50px;
 }

 .fblwtia-sapo-line { 
 right: 0; 
 }

 .fblwtia-sapo-line-2 { 
 top: 70px; 
 left: 55%; 
 height: 15px; 
 }

 .fblwtia-sapo-line-3 { 
 top: 105px;
 left: 95%; 
 } 

 .fblwtia-sapo-line-4 {
 top: 125px;
 left: 85%; 
 height: 10px;
 } 

 .fblwti-animated { 
 animation-duration: 1.5s; 
 animation-fill-mode: forwards; 
animation-iteration-count: infinite; 
animation-name: placeHolderShimmer; 
 animation-timing-function: linear; 
background: # f6f7f8; 
 background: linear-gradient (to right, # eee 8%, # ddd 18%, # eee 33%); 
background-size: 800px 200px; 
height: 185px;
 position: relative; 
 } 

 @ -webkit-keyframes placeHolderShimmer { 
 0% { 
 background-position: -800px 0;
 } 

 100% { 
 background-position: 800px 0; 
 } 

 }

 .fblwtia-sapo-line-0 { 
 top: 0;
 left: 98%; 
 height: 20px; 
 }

 .fblwtia-sapo-line-1 { 
 top: 30px; 
 left: 85%; 
 height: 20px; 
 }


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


★★★★★

বিদ্রঃ----

নিয়মিত সাবান দিয়ে হাত ধুন।করোনা থেকে বাচুন।অবশ্যই হাচি কাশির সময় টিস্যু, রুমাল বা হাতের কনুই ব্যবহার করুন।
বাড়িতে থাকুন নিরাপদ থাকুন, সুস্থ থাকুন[Stay Home Be Safe..........]
★★★★★




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

Post a Comment

4 Comments