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

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

Demo Click here

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

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

<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'><span><data:blog.pageName/></span></div>
<div class='content'>সম্পর্কে সেরা নিবন্ধগুলি, ট্রিক এবং টিপস ভাগ করে নেওয়ার সেরা জায়গা '<span style='font-weight:700'><data:blog.pageName/></span>'এর সম্পর্কে আপনার যা প্রয়োজন তা দ্রুত খুঁজে পেতে
সার্চ করুন!</div>
</div>
</div>
</div>
<div class='bsw-wavebg bsw-bgt'>
<div class='wave bsw-wavetop' style='background-image: url('http://front-end-noobs.com/jecko/img/wave-top.png')'/>
</div>
<div class='bsw-wavebg bsw-bgm'>
<div class='wave bsw-wave-mid' style='background-image: url('http://front-end-noobs.com/jecko/img/wave-mid.png')'/>
</div>
<div class='bsw-wavebg bsw-bgb'>
<div class='wave bsw-wave-bot' style='background-image: url('http://front-end-noobs.com/jecko/img/wave-bot.png')'/>
</div>
</div>
</b:if>

Download Click here

তারপর ব্লগারে লগিং করুন।

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

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

ব্যাস আপনার কাজ শেষ।