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

Wapkiz এ trickbd এর মতোন সাইট তৈরির ৫ম পর্বে আপনাকে স্বাগতম। আজকেই এই পর্বে আমরা বাকী পেজগুলোর ডিজাইন করবো যেগুলোর ডিজাইন করা বাকী ছিল। আর আপনি যদি আগের পর্ব গুলোন না দেখে থাকেন তাহলে দেখে নিন।

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

তো চলেন শুরু করা যাক। তবে শুরু করার আগে ভিডিওটি দেখে নিন তা নাহলে কিছুই বুঝবেন নাহ!!

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

আর একটা সমস্যা সমাধান করে নেই। এর জন্য Header এ গিয়ে Logged user কোডটা এডিট করার জন্য E তে ক্লিক করুন। তারপর, Dashboard এর লিংকটা একটু পরিবর্তন করে নিন। site-post.html এর জায়গায় site-posts.html এটা রিপ্লেস করে দিন। [না বুঝলে ভিডিওটি দেখুন]

এবার নিচের পেজের কোডগুলোন আপনার সাইটের পেজে বসিয়ে দিন। তবে কিছু কিছু কোডের Visibility এবং Position চেঞ্জ করে নিতে হবে। একটু ঝামেলা আছে কিন্তু। আগেই বলে রাখি কোড গুলোর Position সবার শেষে দিবেন। তাহলে আর Position নিয়ে সমস্যা হবে না। এবং আমার সাইটের নামের জায়গায় আপনার সাইটের নাম রিপ্লেস করে দিবেন।

Wapkiz Blog Page Code

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

Blog Code 1

:title: :url-2: - WikiBN.ML:/title:

Blog Code 2

<div class="breadcumbs_single">
 <div id="crumbs">[blog]to=:url-1:,no=You maybe Acess a wrong page!! Connect with us ⬇⬇ || <a href=":site_url:">Home</a> &raquo; <a href=":site_url:/site-category.html?to-name=%category%" class="capital">[replace=(%category%)]-|| [/replace]</a> &raquo; <span class="current">%title%</span>[/blog] </div>
</div>

Blog Code 3

<div class="ad_block">
 <center>
  <a href="https://www.facebook.com/tunebn.official">
   <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Facebook_logo_%28square%29.png/600px-Facebook_logo_%28square%29.png" style="width:42px;height:42px;border:0;">
  </a>
  <a href="https://twitter.com/rzsimran">
   <img src="https://pngimg.com/uploads/twitter/twitter_PNG32.png" style="width:42px;height:42px;border:0;">
  </a>
  <a href="https://www.linkedin.com/company/#">
   <img src="https://upload.wikimedia.org/wikipedia/commons/c/ca/LinkedIn_logo_initials.png" style="width:42px;height:42px;border:0;">
  </a>
 </center>
</div>

Blog Code 4

[blog]to=:url-1:,v=on,no=|| <div class="block_single">
 <h1>%title%</h1>
 <div class="post_paragraph">
  <div align="center">
   <h3>
    <a href="https://www.tunebn.co/">Open With TuneBn</a>
   </h3>
   </a>
  </div>%text%
 </div>
 <div class="post_options">
  <div class="post_rate">
   <table width="100%">
    <td style="float: left;">%date=--% ago <span> [%date%] </span>
    </td>
    <td style="float: right; text-align: right"></td>
   </table>
  </div>
 </div>undefined
</div>undefined<ul class="post_moderate">(if :my_name:=%by%) <li>
  <a href="http://:site_url:/site_editblog.html?blog=%id%" class="is-small button is-link mr4">Edit
 </li>(/if) <li>
  <a title="Report This Post" data-post-id="560536" class="button is-small is-danger " href="#report">Report</a>
 </li>
</ul>
<div class="author_block">
 <h2>About Author</h2>
 <div class="author_single">
  <table width="100%">
   <td class="avata_post">
    <img alt="" src=":site_url:/:profile(%by%)-urlfoto:" class="avatar avatar-150 photo" height="150" width="150" />
   </td>
   <td class="author_name">
    <a class="author-link" href=":site_url:/site-author.html?to-username=%by%">
     <span class="capital">%by%</span>
    </a>
    <div class="user_role">author</div>
    <p>:profile(%by%)-var(about):</p>
   </td>
  </table>
 </div>
</div>[/blog]

Blog Code 5

<div class="ad_block">
 <a href="https://tunebn.co" target="_blank">
  <img src="https://1.bp.blogspot.com/-dYbd4QLW4dM/XJFDCO1BjRI/AAAAAAAAAc0/KH210g2KaDMxdzRT7keHwyWtovK4bBgZwCPcBGAYYCw/s320/thumbnails%2Bof%2Bwikibn.png" alt="Wilibn.com ad" style="width:100%;height:300px;max-width:400px;" />
 </a>
</div>

Blog Code 6

এই কোডের Visibility Acess হবে User।

<div class="block_comment">
 <h3 id="comments">[blog]to=:url-1:,no=No||%comment_count%[/blog] responses to [blog]to=:url-1:,no=Error Post||%title%[/blog]</h3>
 <ol class="commentlist">[blog_cmt]to=:url-1:,o=ul,no=Be first Make a comment.|| <li class="comment">
   <div class="comment-body">
    <div class="comment-author vcard">
     <img alt="%name%" src=":site_url:/:profile(%by%)-urlfoto:" class="avatar avatar-32 photo" height="32" width="32" />
     <cite class="fn">
      <a href=":site_url:/site-author.html?to-username=%name%" rel="external nofollow" class="url capital">%name%</a>
     </cite>
    </div>
    <div class="comment-meta commentmetadata">
     <a href="#%date%">%date%</a>&nbsp;
    </div>
    <p>%text%</p>
    <div class="reply">
     <a rel="nofollow" class="comment-reply-link">Reply</a>
    </div>
   </div>
  </li>[/blog_cmt] </ol>
 <div id="respond" class="comment-respond">
  <h3 id="reply-title" class="comment-reply-title">Make a Comment</h3>[blogcmt_form]to=:url-1:,ud=#comment||%notify%[/blogcmt_form] <form action="" method="post" id="commentform" class="comment-form">
   <p class="logged-in-as">
    <a href=":site_url:/page-author.html">Logged in as :my_name:</a>. <a href=":site_url:/site_logout.html">Log out?</a>
   </p>
   <p class="comment-form-comment">
    <label for="comment">Comment</label>
    <textarea id="comment" name="blogcmt_text" cols="45" rows="8" maxlength="65525" required="required"></textarea>
   </p>
   <p class="form-submit">
    <input name="blogcmt_submit" type="submit" id="submit" class="submit" value="Post Comment" />
   </p>
  </form>
 </div>undefined
</div>

Blog Code 7

এই কোডের Visibility Acess হবে Guest।

<div class="block_comment">
 <h3 id="comments">[blog]to=:url-1:,no=No||%comment_count%[/blog] responses to [blog]to=:url-1:,no=Error Post||%title%[/blog]</h3>
 <ol class="commentlist">[blog_cmt]to=:url-1:,o=ul,no=Be first Make a comment.|| <li class="comment">
   <div class="comment-body">
    <div class="comment-author vcard">
     <img alt="%name%" src=":site_url:/:profile(%by%)-urlfoto:" class="avatar avatar-32 photo" height="32" width="32" />
     <cite class="fn">
      <a href=":site_url:/site-author.html?to-username=%name%" class="url" rel="external nofollow">
       <span class="capital">%name%</span>
      </a>
     </cite>
    </div>
    <div class="comment-meta commentmetadata">
     <a href="#%date%">%date%</a>&nbsp;
    </div>
    <p>%text%</p>
    <div class="reply">
     <a rel="nofollow" class="comment-reply-link">Login to Reply</a>
    </div>
   </div>
  </li>[/blog_cmt] </ol>
 <div id="respond" class="comment-respond">
  <h3 id="reply-title" class="comment-reply-title">Leave a Reply</h3>You must be <a href=":site_url:/site_login.html">logged in</a> to post a comment.
 </div>undefined
</div>

ব্যস Blog Page পেজের কাজ শেষ। এবার Author Page পেজে চলে আসুন।

Author Page code

এই কোডটির Visibility Acess চেঞ্জ করে User করে দিন।

Author code for User

এবার এই কোডটির Visibility Acess চেঞ্জ করে User করে দিন।

:title::to-username(:my_name:): - TrickBN.ml:/title:(if :to-info:=posted) <div class="notify">
 <p>Your Post has been published. Thanks for create a tune.</p>
</div>(/if)(if :my_name:=:to-username(:my_name:):) <a class="btn btn-default" style="margin: 0px 5px" href="">Edit Profile</a>(/if) <div class="author_block">
 <h2>TrickBN profile of :to-username(:my_name:):</h2>
 <table width="100%">
  <tr>
   <td width="75px">
    <img alt=":to-username(:my_name:):" src=":site_url:/:profile(:to-username(:my_name:):)-urlfoto:" class="avatar avatar-150 current-author photo" height="150" width="150" />
   </td>
   <td>
    <h3 class="capital">:to-username(:my_name:):</h3>
    <div class="user_role">author </div>
    <p>:profile(:to-username(:my_name:):)-var(about):</p>
   </td>
  </tr>
 </table>
 <div class="author_info">
  <p>
   <span>Registered on: </span>:profile(:to-username(:my_name:):)-dreg:
  </p>
  <p>
   <span>Last login: </span>:profile(:to-username(:my_name:):)-dlogin:
  </p>
  <p>
   <span>Total post: </span>[blog]usr=:to-username(:my_name:):,l=0,no=0||%count%[/blog]
  </p>
  <p>
   <span>User ID: </span>
  </p>
 </div>
</div>
<div class="block_posts">
 <h2>
  <div class="breadcumbs">
   <div id="crumbs">
    <a href=":site_url:">Home</a> &raquo <span class="current">Articles posted by :to-username(:my_name:):</span>
   </div>
  </div>
 </h2>
 <ul class="rpul">[blog]usr=:to-username(:my_name:):,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>
<div class="wp-pagenavi">:page:c=[blog]usr=:to-username(:my_name:):,l=0,no=0||%count%[/blog],l=10,s=:to-page:,no=,u=?to-username=:to-username(:my_name:):&to-page=:: <span>:to-page(1): of %nlast%</span> %prev=«% %n% %next=»% :/page: </div>

Author Page code for Guest

এবার এই কোডটির Visibility Acess চেঞ্জ করে Guest করে দিন।

:title::to-username(Admin): - TrickBN.ml:/title: <div class="author_block">
 <h2>TrickBN profile of :to-username(Admin):</h2>
 <table width="100%">
  <tr>
   <td width="75px">
    <img alt=":to-username:" src=":site_url:/:profile(:to-username(admin):)-urlfoto:" class="avatar avatar-150 current-author photo" height="150" width="150" />
   </td>
   <td>
    <h3 class="capital">:to-username(admin):</h3>
    <div class="user_role">author </div>
    <p>:profile(:to-username(admin):)-var(about):</p>
   </td>
  </tr>
 </table>
 <div class="author_info">
  <p>
   <span>Registered on: </span>:profile(:to-username(admin):)-dreg:
  </p>
  <p>
   <span>Last login: </span>:profile(:to-username(admin):)-dlogin:
  </p>
  <p>
   <span>Total post: </span>[blog]usr=:to-username(admin):,l=0,no=0||%count%[/blog]
  </p>
  <p>
   <span>User ID: </span>
  </p>
 </div>
</div>
<div class="block_posts">
 <h2>
  <div class="breadcumbs">
   <div id="crumbs">
    <a href=":site_url:">Home</a> &raquo; <span class="current">Articles posted by :to-username(admin):</span>
   </div>
  </div>
 </h2>
 <ul class="rpul">[blog]usr=:to-username(admin):,o=u,l=10,s=:to-page:,no=,v=on|| <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>
<div class="wp-pagenavi">:page:c=[blog]usr=:to-username(admin):,l=0,no=0||%count%[/blog],l=10,s=:to-page:,no=,u=?to-username=:to-username(admin):&to-page=:: <span>:to-page(1): of %nlast%</span> %prev=«% %n% %next=»% :/page: </div>

ব্যাস, Author page এরও কাজ শেষ। এবার আমরা New Post পেজের কাজ করব। তো শুরু করা যাক –

New Post code

কোন কোড এডিট করার চেস্টা করবেন না। বিস্তারিত ভিডিওতে!!

New Post Code 1

:title:New Post - WikiBN.ML:/title:

New Post Code 2

এই পেজের Visibility Acess Guest করে দিবেন।

<div class="notify">You need to login first for create a tune. <a href=":site_url:/site_login.html"> Click Here</a> to login.</div>

New Post Code 3

[blog_form]bid=blog,ud=site-author.html?to-info=posted||%notify%[/blog_form]

New Post Code 4

এই কোডের Visibility Acess User করে দিবেন।

<div class="block_posts mobile-post-input">
 <h2>
  <a href="/post">Posts</a> | Add Post | <a href="/post?action=media">Add Screenshot</a> | <a href="bb-codes">Add BB Codes</a>
 </h2>
 <div class="notify">
  <b>Basic Rules: (Updated at 11.12.17) </b>
  <ul>
   <li>বাংলায় পোষ্ট করলে শুদ্ধ বাংলা ব্যবহার করুন</li>
   <li>পোষ্ট এর সাথে সম্পুর্কযুক্ত ক্যাটাগরী/ফিচারড ইমেজ/ট্যাগ ব্যবহার করুন</li>
   <li>
    <a href="/">যেভাবে নতুন ট্রিকবিএনে তে পোষ্ট করবেন</a>
   </li>
   <li>
    <a href="/">পোষ্ট করার জন্য সম্পূর্ন নীতিমালা</a>
   </li>
   <li>
    <b>বাধ্যতামূলক কিছু নিয়মঃ</b>
    <br />**সম্পূর্ন নিজের ভাষায় পোষ্ট লিখুন... <a href="/">কপিপেষ্ট পরিহার করুন।</a>
    <h4>কেউ কপিপেষ্ট করেছে এমন প্রমান পেলে সাথে সাথে ট্রেইনার থেকে তাকে বাতিল করা হবে </h4>**পোষ্ট এর একেবারে শেষ ছাড়া কোথাও পোষ্ট দাতার সাইট লিংক থাকতে পারবে না <br />**এপ/গেম এর রিভিও দিলে এপ/গেম ডাওনলোড এর ডাইরেক্ট লিংক দিতে হবে এবং বিস্তারিত পোষ্ট+স্ক্রিনশুট দিতে হবে <br />** <h4>আর্নিং সাইট নিয়ে পোষ্ট করলে অবশ্যই বিস্তারিত লিখে পোষ্ট করতে হবে এবং অবশ্যই ট্রেইনারকে নিশ্চিত করতে হবে সেই সাইট পেমেন্ট দেয়। যদি কোন ইউজার কমপ্লেইন করে যে কোন ট্রেইনার স্কাম সাইট নিয়ে পোষ্ট করেছে তাহলে সেই ট্রেইনার কে সাথে সাথে ট্রেইনার থেকে সড়িয়ে নেয়া হবে। আর্নিং এর ব্যাপারে কথা বলতে ব্যাক্তিগত পর্যায়ে যোগাযোগ করতে প্রলুব্ধ করা যাবে না, যা সমাধান দেয়ার ট্রিকবিএনে কমেন্টের মাধ্যমেই দিতে।হবে। </h4>
   </li>
  </ul>
 </div>
 <div class="pad4">
  <form action="" method="post">
   <label for="">Enter title here</label>
   <input type="text" placeholder="Enter title here" name="blog_title" value="" />
   <label for="">Content</label>
   <textarea name="text" style="box-sizing:border-box;"></textarea>
   <label for="">Category</label>
   <select name="blog_cat">[blog_cat]bid=blog,o=u|| <option value="%name%">[replace=(%name%)]-[]a[]b[]c[]d[]e[]f[]g[]h[]i[]j[]k[]l[]m[]n[]o[]p[]q[]r[]s[]t[]u[]v[]w[]x[]y[]z|| []A[]B[]C[]D[]E[]F[]G[]H[]I[]J[]K[]L[]M[]N[]O[]P[]Q[]R[]S[]T[]U[]V[]W[]X[]Y[]Z[/replace]</option>[/blog_cat] </select>
   <label for="">Tags</label>
   <span>Enter more tags by (,) comma</span>
   <input type="text" name="tags" value="" disabled />
   <input type="submit" name="blog_submit" value="Submit post" class="btn btn-primary" />
   <input type="submit" name="draft" value="Save as draft" class="btn btn-default" style="opacity:0.5" disabled />
  </form>
 </div>
</div>

ব্যাস কাজ শেষ। এবার আমরা Posts নামক পেজটির ডিজাইন করব।

Posts/ Dashboard Page Code

আগের মতোনই কাজ। শুরু করে দেওয়া যাক-

Posts code 1

:title:Dashboard - WikiBN.ML:/title:

Posts code 2

এই কোডটির Visibility হবে Guest !!

<div class="notify">You need to <a href="/site_login.html">login</a> first.</div>

Posts code -3

এই কোডটির Visibility হবে User !!

<div class="block_posts">
 <h2>Posts | <a href=":site_url:/site-new-post.html">New post</a>
 </h2>
 <ul class="rpul">[blog]usr=:to-username(:my_name:):,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> %hits% Views </p>
   <p>%edit%</p>
  </li>[/blog] </ul>
</div>
<div class="wp-pagenavi">:page:c=[blog]usr=:to-username(:my_name:):,l=0,no=0||%count%[/blog],l=10,s=:to-page:,no=,u=?to-username=:to-username(:my_name:):&to-page=:: <span>:to-page(1): of %nlast%</span> %prev=«% %n% %next=»% :/page: </div>

এবার শুধু বাকি ক্যাটেগরি পেজের কাজ শুরু করে দেওয়া যাক!!

Category Page Code

এই কোডটি ক্যাটেরগরি পেজে গিয়ে পেস্ট করে দিন। ভুলেও এডিট করার চেস্টা করবেন না।

:title::to-name(All): Archives - WikiBN.ML:/title: <div class="block_posts">
 <h2>
  <a href="/">Home</a> » Archive by category " <span class=" capital">[replace=(:to-name(None):)]-|| [/replace]</span>"
 </h2>
 <ul class="rpul">[blog]cat=:to-name:,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>
<div class="wp-pagenavi">:page:c=[blog]bid=blog,cat=:to-name:,l=0||%count%[/blog],l=10,s=:to-page:,no=,u=?to-name=:to-name:&to-page=:: <span>:to-page(1): of %nlast%</span> %prev=«% %n% %next=»% :/page: </div>
<div class="ad_block">
 <a href="https://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 এর মতোন সাইট তৈরির ৫ম পর্ব নিয়ে এই ছিল আমাদের আজকের পোস্ট। আবারো দেখা হবে পরবর্তী পর্বতে। পোস্টটি ভালো লাগলে কমেন্ট + শেয়ার করবেন। আর যে কোন সমস্যায় আমাদেরকে ফেসবুকে মেসেজ দিন [Message us on facebook]।