হেলো ফ্রেন্ডস, আশা করি সকলেই ভালো আছেন। তো বন্ধুরা অনেকদিন থেকে অনুধাবন করছি যে অনেকেই জানে না কিভাবে ওয়াপকিজ সাইটের কোড কপি করে সেটা কাজে লাগানো যায়। কেননা সরাসরি কোড কপি করে কাজে লাগানো যায় না। অনেকেই আমার ফেসবুক পেজে মেসেজ দিয়ে বলে এই সাইটের হেডার কোড কপি করে দাও, ওই সাইটের লেটেস্ট আপডেট কোড কপি করে দাও ইত্যাদি। তো আমি এখন পর্যন্ত অনেক জনকে কোড কপি করে দিয়ে অনেক বোর ফিল করছি। তো সবাই যদি কোড কপি করা শিখে যায় তাহলে আমাকে আর বিরক্ত হতে হবে না। তাই কিভাবে কোড কপি করে এবং এডিট করে সেটা কাজে লাগানো যায় সেই বিষয় নিয়েই আলোচনা করা হবে। তো চলুন শুরু করা যাক।
প্রথমেই যে সাইটের কোড কপি করতে চান সেই সাইটে প্রবেশ করুন এবং সোর্স কোড ভিউ করুন।
এবার আপনি যে সেকশনের কোড কপি করতে চান সেই সেকশনের কোডগুলো সোর্স কোডের মধ্যে খুঁজে বের করুন। প্রয়োজনে সহজে খুঁজে পাওয়ার জন্য ওই সেকশনে থাকা কোনো ওয়ার্ড দিয়ে কোডের মধ্যে সার্চ করে খুঁজে বের করুন।
খুঁজে পেলে ওই সেকশনের সব কোড কপি করে নিন। উদাহরণ স্বরূপ আমি nigupdate.wapkiz.com এই সাইটের লেটেস্ট আপডেট কোড কপি করতে চাই তাই আমি এর লেটেস্ট আপডেট সেকশনের সব কোড কপি করে নিলাম। আমি কপি করে নিচের কোড টা পেলাম।
<div class="block_posts">
<div class="h2">Recent Posts</div>
<ul class="rpul">
<li>
<img width="150" height="150" src="/img/thumbnail.jpg">
<a href="/site-blog.html?to-blog=14&to-title=Site is optimised at it best to ensure earning">Site is optimised at it best to ensure earning</a>
<div class="c">
<p><font color="gray"><i class="fa fa-user" aria-hidden="true"> </i> admin <i class="fa fa-clock-o" aria-hidden="true"></i> 5 day <i class="fa fa-eye"></i>1 Views</font></p>
</div>
</li>
<li>
<img width="150" height="150" src="/img/thumbnail.jpg">
<a href="/site-blog.html?to-blog=13&to-title=Some States Playing Politics With COVID-19 To Get Money – Northern Elders Forum">Some States Playing Politics With COVID-19 To Get Money – Northern Elders Forum</a>
<div class="c">
<p><font color="gray"><i class="fa fa-user" aria-hidden="true"> </i> admin <i class="fa fa-clock-o" aria-hidden="true"></i> 17 day <i class="fa fa-eye"></i>1 Views</font></p>
</div>
</li>
<li>
<img width="150" height="150" src="/img/thumbnail.jpg">
<a href="/site-blog.html?to-blog=12&to-title=Nigerians Reacted To News Of Kano Recording 80 New Cases Of Coronavirus In One Day">Nigerians Reacted To News Of Kano Recording 80 New Cases Of Coronavirus In One Day</a>
<div class="c">
<p><font color="gray"><i class="fa fa-user" aria-hidden="true"> </i> admin <i class="fa fa-clock-o" aria-hidden="true"></i> 17 day <i class="fa fa-eye"></i>1 Views</font></p>
</div>
</li>
<li>
<img width="150" height="150" src="https://fossbytes.com/wp-content/uploads/2020/01/Xioami-MIUI-12-logo-640x367.jpg">
<a href="/site-blog.html?to-blog=11&to-title=These Could Be The First Xiaomi Devices To Get MIUI 12">These Could Be The First Xiaomi Devices To Get MIUI 12</a>
<div class="c">
<p><font color="gray"><i class="fa fa-user" aria-hidden="true"> </i> sakhawat <i class="fa fa-clock-o" aria-hidden="true"></i> 1 month <i class="fa fa-eye"></i>8 Views</font></p>
</div>
</li>
<li>
<img width="150" height="150" src="/img/thumbnail.jpg">
<a href="/site-blog.html?to-blog=10&to-title=HOW IT WORKS">HOW IT WORKS</a>
<div class="c">
<p><font color="gray"><i class="fa fa-user" aria-hidden="true"> </i> Admin <i class="fa fa-clock-o" aria-hidden="true"></i> 1 month <i class="fa fa-eye"></i>18 Views</font></p>
</div>
</li>
<li>
<img width="150" height="150" src="/img/thumbnail.jpg">
<a href="/site-blog.html?to-blog=9&to-title=Funke Akindele Kicks Off Community Service Sentence">Funke Akindele Kicks Off Community Service Sentence</a>
<div class="c">
<p><font color="gray"><i class="fa fa-user" aria-hidden="true"> </i> naijaguy <i class="fa fa-clock-o" aria-hidden="true"></i> 1 month <i class="fa fa-eye"></i>3 Views</font></p>
</div>
</li>
<li>
<img width="150" height="150" src="/img/thumbnail.jpg">
<a href="/site-blog.html?to-blog=8&to-title=FG DECLARES RESUMPTION DATE FOR SCHOOLS">FG DECLARES RESUMPTION DATE FOR SCHOOLS</a>
<div class="c">
<p><font color="gray"><i class="fa fa-user" aria-hidden="true"> </i> naijaguy <i class="fa fa-clock-o" aria-hidden="true"></i> 1 month <i class="fa fa-eye"></i>4 Views</font></p>
</div>
</li>
<li>
<img width="150" height="150" src="/img/thumbnail.jpg">
<a href="/site-blog.html?to-blog=7&to-title=Ronaldinho Released From Prison And Placed Under House Arrest">Ronaldinho Released From Prison And Placed Under House Arrest</a>
<div class="c">
<p><font color="gray"><i class="fa fa-user" aria-hidden="true"> </i> naijaguy <i class="fa fa-clock-o" aria-hidden="true"></i> 1 month <i class="fa fa-eye"></i>2 Views</font></p></div>
</li>
<li>
<img width="150" height="150" src="/img/thumbnail.jpg">
<a href="/site-blog.html?to-blog=6&to-title=Lockdown: Lagos Withdraws Charges Against Naira Marley, Gbadamosi">Lockdown: Lagos Withdraws Charges Against Naira Marley, Gbadamosi</a>
<div class="c">
<p><font color="gray"><i class="fa fa-user" aria-hidden="true"> </i> naijaguy <i class="fa fa-clock-o" aria-hidden="true"></i> 1 month <i class="fa fa-eye"></i>3 Views</font></p>
</div>
</li>
<li>
<img width="150" height="150" src="/img/thumbnail.jpg">
<a href="/site-blog.html?to-blog=4&to-title=Burna Boy Mocks Nigerians As Accountant-General’s Office Is Gutted By Fire">Burna Boy Mocks Nigerians As Accountant-General’s Office Is Gutted By Fire</a>
<div class="c">
<p><font color="gray"><i class="fa fa-user" aria-hidden="true"> </i> naijaguy <i class="fa fa-clock-o" aria-hidden="true"></i> 1 month <i class="fa fa-eye"></i>4 Views</font></p>
</div>
</li>
</ul>
</div>
এবার কোডের মধ্যে লক্ষ্য করুন। দেখুন কিছু কোড বার বার আছে। যেসব কোড বার বার আছে সেসব সেসব কোডের শুধু একটি কোড রেখে বাকি কোড গুলো কেটে দিন। যেমন আমার কপি করা কোডে নিচের কোড টি বার বার আছে।
<li>
<img width="150" height="150" src="/img/thumbnail.jpg">
<a href="/site-blog.html?to-blog=14&to-title=Site is optimised at it best to ensure earning">Site is optimised at it best to ensure earning</a>
<div class="c">
<p><font color="gray"><i class="fa fa-user" aria-hidden="true"> </i> admin <i class="fa fa-clock-o" aria-hidden="true"></i> 5 day <i class="fa fa-eye"></i>1 Views</font></p>
</div>
</li>
কেটে দেওয়ার পর আমি নিচের মত কোড পেলাম।
<div class="block_posts">
<div class="h2">Recent Posts</div>
<ul class="rpul">
<li>
<img width="150" height="150" src="/img/thumbnail.jpg">
<a href="/site-blog.html?to-blog=14&to-title=Site is optimised at it best to ensure earning">Site is optimised at it best to ensure earning</a>
<div class="c">
<p><font color="gray"><idden="true"> </i> admin <i class="fa fa-clock-o" aria-hidden="true"></i> 5 day <i class="fa fa-eye"></i>1 Views</font></p>
</div>
</li>
</ul>
</div>
এবার যে কোড টা বার বার ছিলো সেটার উপরে ও নিচে ওয়াপকিজ ট্যাগ দিয়ে ভিতরের কোড এ প্রয়াজন অনুযায়ী ওয়াপকিজ প্যারামিটার কন্টেন্ট(%name%, %urlthumb%, %title% ইত্যাদি) দিতে হবে।
আমি বার বার আসা কোড গুলো কেটে দেওয়ার পর যে কোড পেয়েছি সেখানে নিচের কোডটি বার বার ছিলো।
<li>
<img width="150" height="150" src="/img/thumbnail.jpg">
<a href="/site-blog.html?to-blog=14&to-title=Site is optimised at it best to ensure earning">Site is optimised at it best to ensure earning</a>
<div class="c">
<p><font color="gray"><i class="fa fa-user" aria-hidden="true"> </i> admin <i class="fa fa-clock-o" aria-hidden="true"></i> 5 day <i class="fa fa-eye"></i>1 Views</font></p>
</div>
</li>আর যেহেতু কোড টা ব্লগের লেটেস্ট আপডটেড কোড ছিলো তাই আমি ওয়াপকিজের ব্লগ লেটেস্ট আপডেটেড ট্যাগ কোড দেব। এভাবে আপনি যে কোড কপি করেছেন সেই কোড অনুযায়ী ওয়াপকিজ ট্যাগ দিতে হবে। ট্যাগ কোড দেওয়ার পর এরকম কোড পাওয়া গেল।
<div class="block_posts">
<div class="h2">Recent Posts</div>
<ul class="rpul">
[blog]o=u,l=10,s=:to-paage:,no=No Posts||
<li>
<img width="150" height="150" src="/img/thumbnail.jpg">
<a href="/site-blog.html?to-blog=14&to-title=Site is optimised at it best to ensure earning">Site is optimised at it best to ensure earning</a>
<div class="c">
<p><font color="gray"><i class="fa fa-user" aria-hidden="true"> </i> admin <i class="fa fa-clock-o" aria-hidden="true"></i> 5 day <i class="fa fa-eye"></i>1 Views</font></p>
</div>
</li>
[/blog]
</ul>
</div>এবার আমরা যদি কোড এই অবস্থায় সাইটে বসিয়ে দেই তাহলে যে সাইট থেকে কোড কপি করেছি সেই সাইটের ব্লগে থাকা টাইটেল, থাম্বনেইল, তারিখ, লেখকের নাম এগুলো আসবে তাই আমাদের এখন কোডে প্রয়োজন অনুযায়ী কন্টেন্ট প্যারামিটার গুলো পরিবর্তন করে দিতে হবে। যেমন: টাইটেলের জন্য %title% , থাম্বনেইল এর লিঙ্ক এর জন্য %urlthumb% , পোস্ট পাবলিশ করার তারিখের জন্য %date% , পোস্টের লেখকের নামের জন্য %by% ইত্যাদি। এভাবে আপনি যে কোড কপি করবেন সেই কোডের ওয়াপকিজ ট্যাগ অনুযায়ী কন্টেন্ট প্যারামিটার বসাতে হবে। কন্টেন্ট প্যারামিটার বসানোর পর আমি নিচের মতো কোড পেলাম।
<div class="block_posts">
<div class="h2">Recent Posts</div>
<ul class="rpul">
[blog]o=u,l=10,s=:to-paage:,no=No Posts||
<li>
<img width="150" height="150" src="%urlthumb%">
<a href="/site-blog.html?to-blog=%id&to-title=%title%">%title%</a>
<div class="c">
<p><font color="gray"><i class="fa fa-user" aria-hidden="true"> </i> %by% <i class="fa fa-clock-o" aria-hidden="true"></i> %date% <i class="fa fa-eye"></i>%hits%</font></p>
</div>
</li>
[/blog]
</ul>
</div>আর এটাই হলো আপনার প্রত্যাশিত HTML কোড।
HTML তো পেয়ে গেলেন এবার CSS কপি করার পালা।
CSS কপি করার জন্য প্রথমে এ HTML এ যতগুলো ক্লাস নেম এবং আইডি নেম আছে সেগুলো দেখে নিন।
এবার যে সাইট থেকে কোড কপি করছিলেন সেই সাইটের ডোমেইন এর শেষে /style.css দিয়ে ওই সাইটের CSS এ প্রবেশ করুন।
এখন আপনি HTML এ যেসব ক্লাস নেম এবং আইডি নেম দেখেছেন সেগুলো দিয়ে যতগুলো সিলেক্টর আছে সেগুলোর সবগুলো CSS কপি করে নিন। যেমন আমি নিচের কোডগুলো পেলাম।
block_posts {
border:1px solid #ccc;
}
block_posts {
margin:4px 0px;
background:#fff;
border-radius:7px 7px 0px 0px;
}
.h2 {
background-color:#09F;
color:white;
font-weight:bold;
padding:4px;
align:left;
border-radius:6px 6px 0px 0px ;
border-bottom:2px solid #06f;
}
.rpul{
}
ul.rpul li{
padding:5px;
border-bottom:1px solid #ccc;
display:block;
min-height:65px;
}
ul.rpul li:last-child{
padding:5px;
border-bottom:0px;
}
ul.rpul img{
float:left;
padding:1px;
margin-right:6px;
width:60px;
height:60px;
}
ul.rpul p{
display:block;
font-size:13px;
}
ul.rpul p a{
display:inline-block;
font-size:13px;
color:#09f;
}
.c{
text-transform:capitalize;
}
ul.rpul a{
font-size:15px;
}
এবার সবশেষে আপনার পাওয়া HTML কোডগুলো ‘HTML / Tag Code’ এ এবং CSS গুলো CSS Theme এ পেস্ট করে দিন তাহলেই কাজ হয়ে যাবে।
শুধুমাত্র ওয়াপকিজ বিষয়ে রেগুলার পোস্ট পেতে ভিজিট করুন:
- এই সাইটে প্রতি দিনই পোস্ট করা হয়।
আশা করি সকলেই বুঝে গেছেন। না বুঝলে কোন বিষয়টি বুঝেন নাই সেটা নিচে কমেন্ট করুন। রিপ্লাই করে বুঝিয়ে দেওয়া হবে। পোস্ট টা পড়ার জন্য অনেক ধন্যবাদ।