ব্লগস্পটের জন্য লেবেল পৃষ্ঠাগুলিতে গ্রেডিয়েন্ট এফেক্ট তৈরি করুন |

আসসালামু আলাইকুম। কেমন আছেন সবাই? আশা করি ভালোই আছেন।
প্রতিবারের মতো এবারেও হাজির হয়েছি নতুন একটি টিউটোরিয়াল নিয়ে । আর আজকের টিউটোরিয়ালে থাকবে কিভাবে আপনি  ব্লগস্পটের জন্য লেবেল পৃষ্ঠাগুলিতে গ্রেডিয়েন্ট এফেক্ট তৈরি করবেন |
ব্লগস্পটের জন্য লেবেল পৃষ্ঠাগুলিতে গ্রেডিয়েন্ট এফেক্ট তৈরি করুন |
ব্লগস্পটের জন্য লেবেল পৃষ্ঠাগুলিতে গ্রেডিয়েন্ট এফেক্ট তৈরি করুন |


তাহলে এবার শুরু করা যাক।

প্রথমে নিছের কোডটি ডাউনলোড করুন।

<b:if cond='data:blog.searchLabel'>
<style>
.breadcrumbs{display:none}
div#label-intro{z-index:20;margin:0;color:#fff;text-align:center;height:100%;position:absolute;width:100%;box-shadow: inset 3px 3px 20px 0px #00000057;}
.label-intro{z-index:2;position:absolute;width:100%;height:100%}
div#label-intro div.noi-dung{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);width:1080px;max-width:100%;text-align:left;padding:0 0 0 8em;box-sizing:border-box}
div#label-intro div.noi-dung i.labels{left:0;position:absolute;top:50%;transform:translate(0,-50%);font-size:6em;font-weight:100;opacity:.3}
div#label-intro div.noi-dung div.title{font-weight:700;font-size:2.5em;text-shadow:6px 6px 0 rgba(0,0,0,0.1)}
div#label-intro div.noi-dung div.content{width:600px;max-width:100%}
/*div#label-intro div.noi-dung div.title small.cap{display:block;font-size:14px;font-weight:300}*/
@keyframes bsw-wave2{0%{transform:translateX(0) translateZ(0) scaleY(1)}50%{transform:translateX(-25%) translateZ(0) scaleY(0.55)}100%{transform:translateX(-50%) translateZ(0) scaleY(1)}}
.waveWrapper{z-index:0;overflow:hidden;position:relative;left:0;top:0;margin:auto;width:100%;height:420px;user-select:none;-webkit-user-select:none}
.bsw-wavebg{position:absolute;width:100%;overflow:hidden;height:100%;bottom:0;background:linear-gradient(-45deg,#f5efef, #EE7752, #E73C7E, #23A6D5, #23D5AB,#764ba2,#7577a9);background-size:400% 400%;-webkit-animation:Gradient 50s ease infinite;-moz-animation:Gradient 50s ease infinite;animation:Gradient 50s ease infinite}
.bsw-bgt{z-index:15;opacity:0.5}
.bsw-bgm{z-index:10;opacity:0.75}
.bsw-bgb{z-index:5}
.wave{position:absolute;left:0;width:200%;height:100%;background-repeat:repeat no-repeat;background-position:0 bottom;transform-origin:center bottom}
.bsw-wavetop{background-size:50% 100px}
.bsw-wave-ani .bsw-wavetop{animation:move-wave 3s;-webkit-animation:move-wave 3s;-webkit-animation-delay:1s;animation-delay:1s}
.bsw-wave-mid{background-size:50% 120px}
.bsw-wave-ani .bsw-wave-mid{animation:bsw-wave2 10s linear infinite}
.bsw-wave-bot{background-size:50% 100px}
.bsw-wave-ani .bsw-wave-bot{animation:bsw-wave2 15s linear infinite}
.bsw_wrapper{margin-top:15px}
@-webkit-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@-moz-keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes Gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
</style>
<div class='waveWrapper bsw-wave-ani'>
<div id='label-intro'>
<div class='label-intro'>
<div class='noi-dung'>
<i class='labels fa fa-folder-open'/>
<div class='title'><!--<small class='cap'>CHUYÊN MỤC</small>--><span><data:blog.pageName/></span></div>
<div class='content'>সম&#2509;পর&#2509;ক&#2503; স&#2503;র&#2494; ন&#2495;বন&#2509;ধগ&#2497;ল&#2495;, ট&#2509;র&#2495;ক এব&#2434; ট&#2495;পস ভ&#2494;গ কর&#2503; ন&#2503;ওয&#2492;&#2494;র স&#2503;র&#2494; জ&#2494;য&#2492;গ&#2494; &#39;<span style='font-weight:700'><data:blog.pageName/></span>&#39;এর সম&#2509;পর&#2509;ক&#2503; আপন&#2494;র য&#2494; প&#2509;রয&#2492;&#2507;জন ত&#2494; দ&#2509;র&#2497;ত খ&#2497;&#2433;জ&#2503; প&#2503;ত&#2503;
স&#2494;র&#2509;চ কর&#2497;ন!</div>
</div>
</div>
</div>
<div class='bsw-wavebg bsw-bgt'>
<div class='wave bsw-wavetop' style='background-image: url(&apos;http://front-end-noobs.com/jecko/img/wave-top.png&apos;)'/>
</div>
<div class='bsw-wavebg bsw-bgm'>
<div class='wave bsw-wave-mid' style='background-image: url(&apos;http://front-end-noobs.com/jecko/img/wave-mid.png&apos;)'/>
</div>
<div class='bsw-wavebg bsw-bgb'>
<div class='wave bsw-wave-bot' style='background-image: url(&apos;http://front-end-noobs.com/jecko/img/wave-bot.png&apos;)'/>
</div>
</div>
</b:if>
তারপর ব্লগারে লগিং করুন।

লেআউট থেকে থিমে যান, এবং ইডিট এইচ টি এম এল এ ক্লিক করুন।

এখন <body> ট্যাগটি খোঝে বের করেন ,তারপর ডাউনলোড করা কোডটি  <body> ট্যাগের নিছে পেস্ট করুন।

ব্যাস আপনার কাজ শেষ। 
পোস্ট রেটিং করুন
ট্যাগঃ
About Author

টিউটোরিয়ালটি কেমন লেগেছে মন্তব্য করুন!