আপনার ব্লগার ব্লগে পোষ্টের মাঝে যুক্ত করুন লাইভ ডেমো বাটন (সিএসএস ও এইচটিএমএলসহ)

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

কিভাবে আপনার ব্লগে যুক্ত করবেন।

• প্রথমে আপনার ব্লগার লগিন করুন।
• তারপর ড্যাশবোর্ড হতে ড্রাপ ডাউন মেনু হতে টেমপ্লেট নির্বাচন করুন। 
• এবং এবান আপনার টেমপ্লেট যাওয়ার পরে এডিট এইচটিএমএল নির্বাচন করুন। 
• তার পর একটি কোডিং অপশন দেখতে পাবেন। 
• সেখান Ctrl+F চেপে সার্চ অপশনে নিচের কোডটুকু খুজে বের করুন।

</b:skin>

• উপরের কোডটির পুর্বে ঠিক নিচের কোডটুকু কপি করে পেষ্ট করুন।

বুলু কালারের কোডটুকু দেখুন।

.nildemo {
width: 110px;
height: 25px;
background: #32A8FE;
border-radius:2px;
-moz-border-radius:2px ;
-webkit-border-radius:2px ;
text-align: center;
padding-top: 5px;
-webkit-transition:-webkit-box-shadow .5s ease;
-moz-transition:-webkit-box-shadow .5s ease;
-ms-transition:-webkit-box-shadow .5s ease;
-o-transition:-webkit-box-shadow .5s ease;
transition:-webkit-box-shadow .5s ease;
margin:auto;
}
.nildemo:hover {
background: #46AFFC;
-webkit-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-moz-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-ms-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-o-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
box-shadow:0 0 0 9999px rgba(0,0,0,.4);
position:relative;
z-index:99999;
}
.nildemo a {
color: #333;
text-decoration: none;
font: normal 16px Arial, Verdana;
text-align: center;
}

আপনি ব্লগ পোষ্ট কিভাবে যুক্ত করবেন।

<div class="nildemo"><a href="DEMO URL HERE" target="blank" rel="nofollow">&#9776; Live Demo</a></div>

কাষ্টমাইজ করবেন কিভাবে দেকুন।

• আপনারা সংযুক্ত সেটা ডেমো ইউআরএল লেখার স্থানে আপনার ব্লগ সাইটের বা ডেমো ব্লগ সাইটের ইউআরএল লিংক টি বসাবেন।

এছাড়া আরো তিন ডেমোর ছবি যুক্ত করলাম দেকুন এখান থেকে ।

☆ প্রথম ছবি  ☆ দ্বিতীয় ছবি  ☆ তৃতীয় ছবি

তো ব্যাস আপনার কাজ শেষ।  এবার আপনি আপনার পোষ্ট ভিউ করে দেখুন কাজ হয়েছে। এদিকে আপনাদের ছোড় একটা কৌশণ অবলম্ভন করে তিন কোড যুক্ত করতে পারেন। শুধুমাত্র আপনাকে সিএসএস কোডটি কাষ্টমাইজ করতে হবে।

তো বন্ধুরা আজ এই পর্যন্ত আ জ আগামীতে আপনাদের জন্য আরো নতুন কিছু নিয়ে হাজির হব। ততদিন পর্যন্ত আপনারা আমাদের সাথে থাকুন। আল্লাহ হাফেজ।

সম্পূর্ণ পড়ুন

আপনার ব্লগার ব্লগে বিভিন্ন স্টাইলে Most Commented ওয়েডগেট যুক্ত করবেন (সিএসএস স্টাইলসহ)

আসসালামালাইকুম, বন্ধুরা কেমন আছেন। নিশ্চয় ভাল। আর আপনাদের সকলের ভালকে কেন্দ্র করে আমার আজকের লেখা। আজ আমি আপনাদের সাখে Most Commented  নিয়ে আলোচনা করবো। আর ব্লগে ভিজিটর বাড়ানো সম্ভব হবে। কেননা ব্লগে অনেক মন্তব্য পাওয়ার জন্য বিভিন্ন সময় বিভিন্ন ধরনের পোষ্ট ব্যবহার করে থাকি। কিন্তু কিভাবে পোষ্টটিতে সর্বাধিক মন্তব্য পাওয়া যায় সেটা মুল লক্ষ্য। তাই আর বিস্তারিত না মুল কথা ফিরে আসি তো দেখুন তাহলে

উপরের ছবি টি একটি ইংরেজি ব্লগ সাইট হতে সংগ্রহ করা। তাই নিরদিধায় নিচের কোডগুলো ব্যবহার করতে পারে কেমন। তো কোডগুলো নিচে শেয়ার করা হলো।

• প্রথমে আপনার ব্লগের ড্যাশবোর্ডে প্রবেশ করবেন। 
• তার পরে ড্রাপ ডাউন মেনু হতে লেআউট মেনুটি নির্বাচন কবরেন। 
• এবং তার পর আপনারা একটি পেজ দেখতে পাবেন। 
• সেখান থেকে Add widget টি নির্বাচন করার পরে নতুন উইডোজ দেথতে পাবেন। 
• সেখান থেকে HTML/JavaScript widget টি নির্বাচন করবেন। 
• সর্বশেষ নিচে কোডগুলো ধাপে ধাপে ব্যবাহার করবেন।

1. প্রথম ডেমো কোড হলো।

<style>
.comment-count {
padding: 3px 10px;
background: #000000;
color: #ffffff;
font-family: 'Oswald', sans-serif;
font-size: 80%;
float: right;
}
.odhik-montobbo ul {
padding: 0px !important;
list-style:none;
font-family: 'Oswald', sans-serif;
}
.odhik-montobbo ul li {
list-style: none;
padding: 10px;
color: #000000;
margin-top: -10px;
background:none;
}
.odhik-montobbo ul li a {
color: #000000;
list-style: none;
text-decoration: none;
font-size: 90%;
}
.odhik-montobbo:nth-child(3n+0) {
background: #E21323;
width: 100%;
margin-top:10px;
}
.odhik-montobbo:nth-child(4n+0) {
background: #E5FF99;
width: 100%;
}
.odhik-montobbo:nth-child(5n+0) {
background: #00E5FF;
width: 100%;
}
.odhik-montobbo:nth-child(6n+0) {
background: #09BCF7;
width: 100%;
padding-top:-15px;
}
.odhik-montobbo:nth-child(7n+0) {
background: #09F746;
width: 100%;
}
</style>
<script type="text/javascript">
function stripTags(s,n)
    {
    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="odhik-montobbo"><ul><li style="margin-bottom: 10px"><div class="comment-count">' + postComments + "</div>" + "<a href="+ postURL + '">' + postTitle + "</a>"  + '</li></ul></div>';
 document.write(postList);
 }
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
 AddUrlHere=http://bloggingjogot.blogspot.com&amp;NumberofPosts=7&amp;_id=2cb5eb603ed55a6264ee1484e5fdd45c
&amp;_callback=mostcommented
&amp;_render=json" type="text/javascript"></script>

1. 2 ২য় ডেমো হলো।

<style>
.comment-count {
padding: 3px 10px;
background: #000000;
color: #ffffff;
font-family: 'Oswald', sans-serif;
font-size: 80%;
float: right;
}
.odhik-montobbo ul {
padding: 0px !important;
list-style:none;
font-family: 'Oswald', sans-serif;
}
.odhik-montobbo ul li {
list-style: none;
padding: 10px;
color: #000000;
margin-top: -10px;
background:none;
}
.odhik-montobbo ul li a {
color: #000000;
list-style: none;
text-decoration: none;
font-size: 90%;
}
.odhik-montobbo:nth-child(3n+0) {
background: #E21323;
width: 100%;
margin-top:10px;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
}
.odhik-montobbo:nth-child(4n+0) {
background: #E5FF99;
width: 100%;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
}
.odhik-montobbo:nth-child(5n+0) {
background: #00E5FF;
width: 100%;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
}
.odhik-montobbo:nth-child(6n+0) {
background: #09BCF7;
width: 100%;
padding-top:-15px;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
}
.odhik-montobbo:nth-child(7n+0) {
background: #09F746;
width: 100%;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
}
</style>
<script type="text/javascript">
function stripTags(s,n)
    {
    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="odhik-montobbo"><ul><li style="margin-bottom: 10px"><div class="comment-count">' + postComments + "</div>" + "<a href="+ postURL + '">' + postTitle + "</a>"  + '</li></ul></div>';
 document.write(postList);
 }
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
 AddUrlHere=http://bloggingjogot.blogspot.com
&amp;NumberofPosts=7
&amp;_id=2cb5eb603ed55a6264ee1484e5fdd45c
&amp;_callback=mostcommented
&amp;_render=json" type="text/javascript"></script>

1. 3 ৩য় ডেমো দেখুন।

<style>
.comment-count {
border-radius: 30px;
padding: 3px 10px;
background: #000000;
color: #ffffff;
font-family: 'Oswald', sans-serif;
font-size: 80%;
float: right;
}
.odhik-montobbo ul {
padding: 0px !important;
list-style:none;
font-family: 'Oswald', sans-serif;
}
.odhik-montobbo ul li {
list-style: none;
padding: 10px;
color: #000000;
margin-top: -10px;
background:none;
}
.odhik-montobbo ul li a {
color: #000000;
list-style: none;
text-decoration: none;
font-size: 90%;
}
.odhik-montobbo:nth-child(3n+0) {
background: #E21323;
width: 100%;
margin-top:10px;
border-radius: 30px;
}
.odhik-montobbo:nth-child(4n+0) {
background: #E5FF99;
width: 100%;
border-radius: 30px;
}
.odhik-montobbo:nth-child(5n+0) {
background: #00E5FF;
width: 100%;
border-radius: 30px;
}
.odhik-montobbo:nth-child(6n+0) {
background: #09BCF7;
width: 100%;
padding-top:-15px;
border-radius: 30px;
}
.odhik-montobbo:nth-child(7n+0) {
background: #09F746;
width: 100%;
border-radius: 30px;
}
</style>
<script type="text/javascript">
function stripTags(s,n)
    {
    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="odhik-montobbo"><ul><li style="margin-bottom: 10px"><div class="comment-count">' + postComments + "</div>" + "<a href="+ postURL + '">' + postTitle + "</a>"  + '</li></ul></div>';
 document.write(postList);
 }
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
 AddUrlHere=http://bloggingjogot.blogspot.com
&amp;NumberofPosts=7
&amp;_id=2cb5eb603ed55a6264ee1484e5fdd45c
&amp;_callback=mostcommented
&amp;_render=json" type="text/javascript"></script>

1. 4 চার নং ডেমো দেখুন।

<style>
.comment-count {
border: 8px inset #0572F8;
padding: 3px 10px;
background: #000000;
color: #ffffff;
font-family: 'Oswald', sans-serif;
font-size: 80%;
float: right;
}
.odhik-montobbo ul {
padding: 0px !important;
list-style:none;
font-family: 'Oswald', sans-serif;
}
.odhik-montobbo ul li {
list-style: none;
padding: 10px;
color: #000000;
background:none;
}
.odhik-montobbo ul li a {
color: #000000;
list-style: none;
text-decoration: none;
font-size: 90%;
}
.odhik-montobbo:nth-child(3n+0) {
background: #E21323;
width: 100%;
border: 8px inset #0572F8;
}
.odhik-montobbo:nth-child(4n+0) {
background: #E5FF99;
width: 100%;
border: 8px inset #0572F8;
}
.odhik-montobbo:nth-child(5n+0) {
background: #00E5FF;
width: 100%;
border: 8px inset #0572F8;
}
.odhik-montobbo:nth-child(6n+0) {
background: #09BCF7;
width: 100%;
border: 8px inset #0572F8;
}
.odhik-montobbo:nth-child(7n+0) {
background: #09F746;
width: 100%;
border: 8px inset #0572F8;
}
</style>
<script type="text/javascript">
function stripTags(s,n)
    {
    return s.replace(/<.*?>/ig,"").split(/\s+/).slice(0,n-1).join(" ")
}
function mostcommented(feed) {
 var i;
 for (i = 0; i < feed.count ; i++)
 {
var postURL = "'" + feed.value.items[i].link + "'";
var postTitle = feed.value.items[i].title;
var postComments = feed.value.items[i].commentcount;
var postList = '<div class="odhik-montobbo"><ul><li style="margin-bottom: 10px"><div class="comment-count">' + postComments + "</div>" + "<a href="+ postURL + '">' + postTitle + "</a>"  + '</li></ul></div>';
 document.write(postList);
 }
 }
 </script>
<script src="http://pipes.yahoo.com/pipes/pipe.run?
 AddUrlHere=http://bloggingjogot.blogspot.com
&amp;NumberofPosts=7
&amp;_id=2cb5eb603ed55a6264ee1484e5fdd45c
&amp;_callback=mostcommented
&amp;_render=json" type="text/javascript"></script>

কাষ্টমাইজ করবেন কিভাবে দেখে নিন?

• বোল্ড কালার কৃত লেখাটি পরিবর্তন করবেন। আপনার ব্লগ সাইট লিংক এবং পোস্ট সংখ্যা আপনার মনের মত করে পরিবর্তন করে নিবেন।

তো বন্ধুরা আজ এই পর্যন্ত আগামীতে আরো সুন্দর কিছু নিয়ে আপনাদের মাঝে ফিরে আসবো ততক্ষণ পর্যন্ত আপনারা আমাদের সাথে থাকুন। আল্লাহ হাফেজ।

সম্পূর্ণ পড়ুন

আপনার ব্লগার ব্লগে কিভাবে Spinning Social Icons যোগ করবেন।

আমার সালাম ও শুভেচ্ছা নিবেন। আশা করি আপনারা সকলে ভাল আছেন। আজ আমি আপনাদের সাথে একটি অতি গুরুত্বপূর্ণ বলে আমি মনে করি। কেননা আমরা যখন কোন ওয়েব সাইট ভিজিট করি তখন দেখা যায় যে সারি বন্ধ ভাবের দেখা যায় বৃহত বৃহত নেটওয়াকিং বা সামাজিক যোগাযোগ নেটওয়াকিং সাইট চোখের সামনে ভেসে ওঠে। কিন্তু আমাদের প্রিয় ব্লগ সাইটে যুক্ত করবো কিভাবে। ভাবার কোন কারণ নাই তার জন্য আমি আপনাদের সাখে শেয়ার না করে থাকতে পারলাম না। তাই আর দেরি না করে মুল কথায় আশা যাক। 

কিভাবে সোশাল সেযারিং কোড যক্ত করবেন?

১// আপনি আপনার প্রিয় ব্লগস্পট সাইটের ড্যাশবোর্ডে প্রবেশ করুন।

২// তার পরে আপনারা ড্রাউপডাউন মেনু হতে লেআউট নির্বাচন করনি। 

৩// নেআউট হতে আপনানরা HTML/Javascript লেখা ওয়েডটেগ নির্বাচন কর্নে। 

৪// তার পরে নিচের কোডটুকু করি করে আপনার ব্লগ সাইটে ওয়েডগেট পেষ্ট করুন। 

<style>
#wc-rotico
{
background:#ffffff;
border:1px solid #dcdcdc;
padding:10px;
box-shadow:1px 1px 4px  #dcdcdc;
-moz-box-shadow:1px 1px 4px  #dcdcdc;
-web-kit-box-shadow:1px 1px 4px  #dcdcdc;
-goog-ms-box-shadow:1px 1px 4px  #dcdcdc;
}
#wc-rotico img{ 
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}

#wc-rotico img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

</style>
<div id="wc-rotico">
<a href='http://www.facebook.com/2' target='_blank' rel="nofollow">
<img border="0" src="http://4.bp.blogspot.com/-FLrQQv4zXYY/Uh3H5HMmtLI/AAAAAAAACSo/CNjUCyfZY9E/s1600/Facebook.png" /></a>
<td valign="top" width="33"><a href='https://twitter.com/' target='_blank'  rel="nofollow">
<img border="0" src="http://2.bp.blogspot.com/-zsElLEeWt_s/Uh3H7UcozEI/AAAAAAAACTE/wuU-BI1CZAc/s1600/Twitter.png" /></a>
<a href='http://feeds.feedburner.com/' target='_blank' rel="nofollow">
<img border="0" src="http://4.bp.blogspot.com/-i8XfPimO5lo/Uh3H7NLikpI/AAAAAAAACTA/b81bQXaDtVM/s1600/RSS.png" /></a>
<a href='https://plus.google.com/105802694845534710685' target='_blank' rel="nofollow">
<img border="0" src="http://4.bp.blogspot.com/-aBIFDEM9KR8/Uh3H5tRMZQI/AAAAAAAACS0/z6u6L8WXFgY/s1600/Google+plus.png" /></a>
<a href="#" target='_blank' rel="nofollow">
<img border="0" src="http://2.bp.blogspot.com/-YFcScg8c5M8/Uh3H5QygjhI/AAAAAAAACSs/vvGO9oPWwZs/s1600/LinkedIn.png" /></a>
</td></div>

৫// সর্ব শেষে আপনার নির্বাচন করা লেআইটটি সেভ করে বের হয়ে আসুন।

আর আপনাদের কোন সমস্যা হতে আমাদের ফেসবুক গ্রপে যুক্ত হনো। আপনারদের সকলকে অসংখ্য ধন্যবাদ দিয়ে আজকের সত লেখা হতে বিতায় নিলাম। আল্লাহ হাফেজ।

 

সম্পূর্ণ পড়ুন

ব্লগার ব্লগে CSS3 Browser Support করে দেখে নিন। [ওয়েব ডিজাইনাদের জন্য]

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

আর সিএসএস৩ ব্রাউজা সম্পর্কে বিস্তারিত জানতে এখানে ক্লিক করুন এবং বিস্তারিত দেখুন। আপনারা জেনে আরো খুশি হবো শুধু মাত্র সিএসএস৩ শেখার জন্য আলাদা একটি ওয়েব সাইট তৈরি করা হয়েছে সেটাও আমি আপনার কাজের সুবিধান্তে শেয়ার করছি। তাই সুয়োগ পেলে আপনারা সিএসএস-৩ টিউটোরিয়া সাইট হতে ঘুরে আসতে পারেন। কেননা সেখান থেকে আমাদের অনেক কিছু শেখার আছে।

তাই আজ এই পর্যন্ত। আগামীতে আমি আরো নতুন কিছু নিয়ে আপনাদের কাছে হাজির হবো। আল্লাহ হাফেজ।

সম্পূর্ণ পড়ুন

আপনার ব্লগার ব্লগে pure CSS page loading Spinners যুক্ত করুন। [২০১৪ সালের সেরা পেজ Loading Spinner]

বন্ধুরা আমার সালাম ও শুভেচ্ছা নিবেন। আশা করি আপনারা সকলে আল্লাহ রহমতে এবং মাগফিরতের মাসের সকলে ভাল আছেন। আর আমিও আপনাদের সকলের ভালবাসা ও শ্রদ্ধা নিয়ে ভাল আছি। বন্ধুরা আজ আমি আপনাদের সাথে চমৎকার একটি শিক্ষণীয় বিষয় নিয়ে হাজির হয়েছি। কেননা আমরা যারা অনলাইনে কাজ করি থাকি। তাদের একটি স্বাদের বা প্রিয় blog সাইট আছে। কিন্তু যখন আমরা আমাদের সাইট বা অন্য কারো সাইট ভিজিট করি তখন দেথা যায় পেজ লোডিং নামে একটি সুন্দর অপশন দেখা যায়। তাহলে আর কথা না বাড়িয়ে কাজের কথায় আশা যাক। দেখুন তাহলে>>>>>

১// প্রথমে আপনার ব্লগ সাইটের ড্যাশবোর্ডে প্রবেশ করুন।
২// তার আপনার ব্লগ ড্যাশবোর্ড হতে টেমপ্লেট নির্বাচন করুন এবং Edit HTML  নির্বাচন করুন।
৩// তার পর বডি ট্যাগ থুজে আপানার বের করুন।

<body> or </body>

৪//আপনারা <body> খুজে পেলে তার উপরে নিচের কোডগুলো কপি করে পেষ্ট করুন। আর বডি ট্যাগ খুজে না পেলে </body> এর উপরে কোডগুলো কপি করে পেষ্ট করুন।

 

<div class="animation-1">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</div>

৫// CSS Code ব্যবহার করতে হবে।

]]></b:skin>

৬// ঠিক উপরে নিচের কোড গুলো কপি পেষ্ট করুন।

.animation-1
{
    width:55px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform:rotate(45deg);
}

.animation-1 div
{
    display:inline-block;
    background-color: #0088d0;
    width:25px;
    height:25px;
    margin:0;
    padding:0;
}

.animation-1 .box1
{
    -webkit-animation: animation1-box1 1.5s infinite;
    animation: animation1-box1 2s infinite;
}

.animation-1 .box2
{
    -webkit-animation: animation1-box2 1.5s infinite;
    animation: animation1-box2 2s infinite;
}

.animation-1 .box3
{
    -webkit-animation: animation1-box3 1.5s infinite;
    animation: animation1-box3 2s infinite;
}

.animation-1 .box4
{
    -webkit-animation: animation1-box4 1.5s infinite;
    animation: animation1-box4 2s infinite;
}

@keyframes animation1-box1
{
    40%
    {
        transform: translate(-25px, -25px) rotate(85deg);
    }
    50%
    {

        transform: translate(-25px, -25px) rotate(90deg);
    }
    100%
    {
        transform: translate(-0px, -0px) rotate(180deg);
    }
}


@keyframes animation1-box2
{
    40%
    {
        transform: translate(50px, -25px) rotate(85deg);
    }
    50%
    {
        transform: translate(50px, -25px) rotate(90deg);
    }
    100%
    {
        transform: translate(-0px, -0px) rotate(180deg);
    }
}

@keyframes animation1-box3
{
    40%
    {
        transform: translate(-50px, 25px) rotate(85deg);
    }
    50%
    {
        transform: translate(-50px, 25px) rotate(90deg);
    }
    100%
    {
        transform: translate(-0px, -0px) rotate(180deg);
    }
}


@keyframes animation1-box4
{
    40%
    {
        transform: translate(25px, 25px) rotate(85deg);
    }
    50%
    {
        transform: translate(25px, 25px) rotate(90deg);
    }
    100%
    {
        transform: translate(-0px, -0px) rotate(180deg);
    }
}

৭// ব্যাস আপনার কাজ শেষ এবং টেমপ্লেট সেভ দিয়ে বের হয়ে আসবেন।
তাই আজ এই পর্যন্ত। আপনার সকলে ভাল থাকুন এই  কামনা করে লেখা শেষ করলাম। আল্লাহ হাফেজ।

সম্পূর্ণ পড়ুন