WapkizWeb Design Tutorial

Wapkiz এ trickbd এর মতোন সাইট তৈরি করুন [Part 7]

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

Wapkiz এ trickbd এর মতোন সাইট তৈরির সকল পর্ব

Part InfoPart Link
Proof PartPart 0
Setting ChangePart 1
Meta TagPart 2
Header & FooterPart 3
Page Design 1Part 4
Page Design 2Part 5
Login & RegistrationPart 6
HomepagePart 7
Admin DiscussionPart 8
[Bonus] Remove Footer AdsView

তো চলেন শুরু করে দেওয়া যাক। কাজ শুরুর পূর্বে ভিডিওটি দেখে নিন তাহলে কাজ করতে সুবিধা হবে।

Wapkiz এ trickbd এর মতোন সাইট তৈরি ভিডিও

এই পর্বে যেসব কাজ করা হয়েছে তা ভালোভাবে বোঝার জন্য ভিডিওটি দেখে নিন।

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

Trickbd style All Code

কোডগুলোন রেডিমেট কোড। অযথা এডিট করতে গিয়ে কোড Error বা সময় নস্ট করবেন না। যেগুলোন এডিট করতে বলব শুধু সেইগুলা এডিট করলেন যথেস্ট।

Title Code For wapkiz

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

:title:WikiBN.ML - Know for sharing | Bangladeshi first mobile based tech forum and community.:/title:

Wapkiz Feature Post Code like Trickbd

একদম ট্রিকবিডির মতোনই ফিচার পোস্ট সিস্টেম। ফিচার ক্যাটেগরিতে থাকা পোস্টটি অটোমেটিক এই খানে জায়গা করে নিবে। যেমনটা ট্রিকবিডিতে হয় আর কী!! কিভাবে কোন পোস্ট ফিচার ক্যাটেগরিতে এড করবেন তা Admin Discussion এ আলোচনা করব।

<div class="block_posts">
 <h2>Featured post</h2>
 <ul class="rpul">[blog]bid=Featured,o=h,l=3,v=on,no=No Featured Post Available || <li>
   <img width="150" height="150" src="%urlthumb%" class="attachment-thumbnail size-thumbnail wp-post-image" alt="%title%" />
   <a href="http://:site_name:/page-blog/%id%/[replace=(%title%)] []/||-[][/replace]"> %title% </a>
   <p>%date=--% ago <a href="http://:site_name:/page-blog/%id%/[replace=(%title%)] []/||-[][/replace]#comment">%comment_count% Comments</a> %hits% views </p>
  </li>[/blog] </ul>
</div>

Wapkiz Hot Post code Like Trickbd

Trickbd তে যেমন সর্বোচ্চ ভিউ পোস্টটি হট পোস্টে জায়গায় করে নেয় এই কোডির মাধ্যমে তা অটোমেটিক সর্বোচ্চ ভিউ হওয়া পোস্টটি হট পোস্টে এ জায়গা করে নিবে।

<div class="block_posts">
 <h2>Hot posts</h2>
 <ul class="rpul">[blog]bid=blog,o=h,t=month,l=5,v=on,no=|| <li>
   <img width="150" height="150" src="%urlthumb%" class="attachment-thumbnail size-thumbnail wp-post-image" alt="%title%" />
   <a href="http://:site_name:/page-blog/%id%/[replace=(%title%)] []/||-[][/replace]"> %title% </a>
   <p>%date=--% ago <a href="http://:site_name:/page-blog/%id%/[replace=(%title%)] []/||-[][/replace]#comment">%comment_count% Comments</a> %hits% views </p>
  </li>[/blog] </ul>
</div>

Wapkiz Recent Post code Like Trickbd

সর্বশেষ ১০টি পোস্ট রিসেন্ট পোস্ট এ জায়গা করে নিবে। যেমনটি ট্রিকবিডিতে হয় আর কী।

<div class="block_posts">
 <h2>Recent Posts</h2>
 <ul class="rpul">[blog]o=u,l=10,s=:to-page:,v=on,no=|| <li>
   <img width="150" height="150" src="%urlthumb%" class="attachment-thumbnail size-thumbnail wp-post-image" alt="%title%" />
   <a href="http://:site_name:/page-blog/%id%/[replace=(%title%)] []/||-[][/replace]"> %title% </a>
   <p>%date=--% ago <a href="http://:site_name:/page-blog/%id%/[replace=(%title%)] []/||-[][/replace]#comment">%comment_count% Comments</a>
   </p>
  </li>[/blog] </ul>
</div>

Wapkiz Panging Code Like Trickbd

90% ট্রিকবিডির মতোন দেখতে। কোডটি বানাতে গিয়ে অনেক ঝামেলা পোহাতে হয়েছে। কিন্তু আপনাকে এই ঝামেলা পোহাতে হবে না।

<div class="wp-pagenavi">:page:c=[blog]l=0||%count%[/blog],l=10,s=:to-page:,no=::<span>:to-page(1): of %nlast%</span> %prev=«% %n% %next=»% :/page:</div>

Wapkiz Category Code Like Trickbd

আপনার হয়তো জানেন যে, Wapkiz এ ক্যাটেরগরি পেজের নামগুলোর ১ম অক্ষর অটোমেটিক ছোটো হাতের অক্ষরে চলে আসে এই সমস্যা CSS ট্রিক এর মাধ্যমে সমাধান করলেও একটা বিরাট সমসায় পরি। সেটি হলো, Wapkiz এ Category name এর মাঝে Space ব্যবহার করলে সেই ক্যাটেগরি লিস্টে কোন পোস্টি শো করে না। তা ক্যটেগরি সিস্টেমেও বিরাট পরিবর্তন আনা হয়েছে। কোডটিতে অনেক কিছু রিপ্লেমেন্ট করা হয়েছে যা আপনি দেখলেই বুঝবেন। কীভাবে ক্যটেগিরি খুলবেন এই নিয়ে Admin Discussion এ আলোচনা হবে। তাই কোডটি এডিট করবেন না। তবে এড কোড চেঞ্জ করে নিতে পারেন।

<div class="ad_block">
 <a href="https://www.tunebn.co/">
  <img src="https://1.bp.blogspot.com/-dYbd4QLW4dM/XJFDCO1BjRI/AAAAAAAAAc0/KH210g2KaDMxdzRT7keHwyWtovK4bBgZwCPcBGAYYCw/s320/thumbnails%2Bof%2Bwikibn.png" alt="topper24 ad" style="width:100%;height:300px;max-width:400px;" />
 </a>
</div>
<div class="block_category">
 <h2>Categories</h2>
 <ul>[blog_cat]o=u|| <li class="cat-item capital">
   <a href=":site_url:/site-category.html?to-name=%name%">[replace=(%name%)]-|| [/replace]</a> (%count%)
  </li>[/blog_cat] </ul>
</div>

শেষ কথা

Wapkiz এ trickbd এর মতোন সাইট তৈরি সপ্তম পর্ব এখানেই শেষ করছি। ভালো থাকুন শুস্থ থাকুন টিউনবিএনের সাথেই থাকুন। পোস্টটি কেমন লাগল তা জানাতে এবং কোথাও কোন সমস্যায় পড়লে কমেন্ট করুন। অথবা আমাদের ফেসবুক পেজে মেসেজ করতে পারেন। আমাদের ফেসবুক পেজের লিংক – TuneBN Facebook Page

Imran Hossan

I am Imran, a student with the dream of becoming a professional developer, I love to explore, explore, learn interesting things on the Internet.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button

Adblock Detected

Hey Dear!! Thank you for visit on TuneBN. Please Disable your AD Blocker to continue browsing.