Plus UI Them এ Tool Page কিভাবে বানাবেন ?
<div class="pS post-body postBody" id="postBody">
<p>Your Paragraph show below the Main Heading</p>
<style>
.resco{--gap:10px;--width:280px;display:grid;grid-template-columns:repeat(auto-fit,minmax(49%,0fr));grid-gap:10px;}.resco >*{gap:12px;align-items:center;position:relative;padding:15px;border:1px solid #323232;border-radius:4px;background-color:#fffdfc;line-height:1.3;box-shadow:0 0 #323232;transition:box-shadow .1s ease,transform .1s ease;overflow:hidden;}.resco >*:hover{box-shadow:4px 4px #323232;transition:box-shadow .1s ease,transform .1s ease;filter:none;}.resco a >svg{width:26px;height:26px;}.resco .t::after{content:attr(data-text);font-size:11px;opacity:.7;}.resco .d{position:absolute;top:0;right:0;padding:6px;text-align:end;}.resco .d::before{content:'';position:absolute;top:-35px;right:-30px;width:70px;height:70px;border-radius:50%;background-color:#f9f9fb;transition:background-color .1s ease,transform .2s ease-out;}.resco .d::after{content:attr(data-text);display:flex;align-items:center;position:absolute;top:0;left:0;bottom:0;right:0;padding:15px;font-size:12px;text-align:start;opacity:0;visibility:hidden;}.resco .d:hover{width:100%;height:100%;}.resco .d:hover::before{background-color:#e8f0fe;transform:scale(11.0);}.resco .d:hover::after{opacity:.8;visibility:visible;transition-delay:.2s;}.cInherit a{color:inherit;}.cInherit.u a:hover{text-decoration:underline;}.i16 svg{flex-shrink:0;width:16px;height:16px;}.op svg{opacity:.8;}.flex{display:flex;}.flex.center{align-items:center;justify-content:center;}.flex.column{flex-direction:column;}.flex.wrap{flex-wrap:wrap;}.flex.space-between{justify-content:space-between;}.flex.baseline{align-items:baseline;}.flexIn{display:inline-flex;}.flexIn.baseline{align-items:baseline;}.flexIn.center{align-items:center;}.catL .i{gap:5px;align-items:center;margin-bottom:.75rem;}.catL .i[data-text]::after{content:attr(data-text);opacity:.8;}@media screen and (max-width: 820px){.resco{grid-template-columns:auto}}
.pS h3:after{content:'';position:absolute;left:0;bottom:0;width:60px;height:2px;background-color:#00d07e;margin:0 0 -2px}
.drK .resco >* {background:var(--darkB);border:1px solid rgb(255 255 255 / 39%);}
.drK .resco .d::before{background:#33475c;}
.drK .resco >*:hover{box-shadow:4px 4px rgb(255 255 255 / 40%)}
</style>
<div>
<h3
style="border-bottom: 2px solid rgba(98, 98, 98, 0.15); margin-bottom: 20px; padding-bottom: 5px; position: relative;"
>
Your Main Heading On Top of Tools
</h3>
<div class="resco cInherit">
<!--[ ADD Tools Name - It is helpful for Developer to find Code ]-->
<a
class="flex op"
href="Tools Post or Tools Page URL Paste Here"
rel="nofollow"
target="_blank"
>
<svg class="line" viewBox="0 0 24 24">
<path
d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
></path>
<path d="M12 8.5V14.5"></path>
<path d="M9 12.5L12 15.5L15 12.5"></path>
</svg>
<span class="t flex column" data-text="v7.2"
>Your Tools Name </span
>
<span
class="d"
data-text="Your Tools Description"
>
<span class="i i16"
><svg class="line" viewbox="0 0 24 24">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" x2="12" y1="16" y2="12"></line>
<line x1="12" x2="12.01" y1="8" y2="8"></line></svg
></span>
</span>
</a>
</div>
</div>
</div>
সর্বপ্রথমে উপরের Script
Code টিকে Copy করুন । AndThan আপনার Blogger এ একটা নতুন Page Creat করুন এবং
Copy করা Script Code টি Past করুন ।
Page এর একটা নাম দিন । যেমন – Important Tool For Daily Life
<p>Your Paragraph show below the Main Heading</p>
Your
Paragraph show below the Main Heading এ আপনার Tool Box এর একটা Description লিখুন ।
যেমন – Collection of free web tool for SEO,Blog,Social
media etc
এই Description টা Main
Heading এর নিচে Saw করবে ।
<h3
style="border-bottom: 2px solid rgba(98, 98, 98, 0.15); margin-bottom: 20px; padding-bottom: 5px; position: relative;"
>
Your Main Heading
On Top of Tools
</h3>
Your Main
Heading On Top of Tools এর জায়গায় আপনার Tool Box এর একটা নাম দিন ।আপনি যে Tool Box টা
তৈরি করছেন ।
যেমন –Download,Calculator,Google Drive Direct Link etc .
এই নামটি আপনার Tool Box এর
উপরে Saw করবে ।
এরপর <!--[ ADD Tools Name - It is helpful for
Developer to find Code ]-->
>Your Tools Name
</span
এই দুই জায়গায় আপনার Tool
এর নামটি লিখুন ।
<span class="t
flex column" data-text="v7.2"
এখানে আপনার Tool
এর Virsion Set করতে পারবেন ।
Virsion এর
প্রয়োজন না হলে এই Code টি Remove করে দিন ।
href="Tools Post or Tools Page URL Paste Here"
এখানে আপনার Tool
Post এর Link টি বা Tool Page এর url টি Past করুন ।
data-text="Your Tools Description"
এখানে আপনার Tool এর
Description টি Enter করুন ।
এই Tool টি কি কাজ করে । কিভাবে কাজ করে ।এইরকম একটা
Description.
<svg class="line" viewBox="0 0 24 24">
<path
d="M12 22C17.5228 22 22 17.5228 22
12C22 6.47715 17.5228 2 12 2C6.47715 2 2
6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
></path>
<path d="M12 8.5V14.5"></path>
<path d="M9 12.5L12 15.5L15 12.5"></path>
</svg>
Tool এর icon Change করার জন্য
SVG Code টিকে Change করুন ।
<!--[ ADD Tools Name - It is helpful for Developer to find Code ]-->
<a
class="flex op"
href="Tools Post or Tools Page URL Paste Here"
rel="nofollow"
target="_blank"
>
<svg class="line" viewBox="0 0 24 24">
<path
d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
></path>
<path d="M12 8.5V14.5"></path>
<path d="M9 12.5L12 15.5L15 12.5"></path>
</svg>
<span class="t flex column" data-text="v7.2"
>Your Tools Name </span
>
<span
class="d"
data-text="Your Tools Description"
>
<span class="i i16"
><svg class="line" viewbox="0 0 24 24">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" x2="12" y1="16" y2="12"></line>
<line x1="12" x2="12.01" y1="8" y2="8"></line></svg
></span>
</span>
</a>
নতুন Tool Add করার জন্য উপরের Script Code টিকে Copy করুন । এবং Close </a> tag এর নিচে Past করুন ।
<div>
<h3
style="border-bottom: 2px solid rgba(98, 98, 98, 0.15); margin-bottom: 20px; padding-bottom: 5px; position: relative;"
>
Your Main Heading On Top of Tools
</h3>
<div class="resco cInherit">
দ্বিতীয় Tool Box Add করার জন্য উপরের Script Code টিকে Copy করুন ।এবং উপরের Close </div> tag এর নিচে Script Code টিকে Past করুন ।
এই Code টি যাহেতু <div>
tag দিয়ে Start হয়েছে ।সেহেতু নিচের দুটি Close </div> tag এর উপর আর একটা Close </div> tag দেব। Past করা Script
Code টিকে Close </div> tag দিয়ে end করার জন্য
>
Your Main Heading
On Top of Tools
</h3>
Your Main
Heading On Top of Tools এর জায়গায় আপনার Tool Box এর একটা নাম দিন ।আপনি যে Tool Box টা
তৈরি করছেন ।
যেমন –Download,Calculator,Google Drive Direct Link etc .
এই নামটি আপনার Tool Box এর
উপরে Saw করবে ।
<!--[ ADD Tools Name - It is helpful for Developer to find Code ]-->
<a
class="flex op"
href="Tools Post or Tools Page URL Paste Here"
rel="nofollow"
target="_blank"
>
<svg class="line" viewBox="0 0 24 24">
<path
d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
></path>
<path d="M12 8.5V14.5"></path>
<path d="M9 12.5L12 15.5L15 12.5"></path>
</svg>
<span class="t flex column" data-text="v7.2"
>Your Tools Name </span
>
<span
class="d"
data-text="Your Tools Description"
>
<span class="i i16"
><svg class="line" viewbox="0 0 24 24">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" x2="12" y1="16" y2="12"></line>
<line x1="12" x2="12.01" y1="8" y2="8"></line></svg
></span>
</span>
</a>
এরপর Tool Box এর মধ্যে
Tool Add করার জন্য উপরের Script Code টিকে Copy করুন । এবং <div class="resco cInherit"> এর নিচে এই Copy করা Script Code টিকে Past করুন ।
এবং আগের Process এ Code
টিকে Edit করুন ।