[ওয়েব ডিজাইন টিটোরিয়াল বাংলা] Wapkiz এ বানান Trickbd এর মতোন ফোরাম সাইট {Part-3/Header and Footer}

আজ আর কোন কথা নয় ডিরেক্ট পয়েন্ট এ চলে আসুন। এর আগের পর্বে আমরা Meta Header এ একটা ছোট কোড বাসাইছিলাম। আপনি কি জানেন ওই কোডটা কী? আসলে ওই ছোট কোডটির মাধ্যমে আমরা একসাথে আরো কয়েকটি কাজ করে ফেলেছি আর সেগুলো হলো -
  1. Css Install
  2. JQuery Install
  3. Font awsome Install
  4. Wapkiz add hide
  5. Some Important Javascript Install
  6. Favicon Install
Meta Header code এ পরিবর্তন আনা হয়েছে কোডটি আবার Re-Install করবেন।

wapkiz,wapkiz website,wapkiz tutorial,wapkiz latest update code,wapkiz download page code,wapkiz code,wapkiz part 6,wapkiz login,wapkiz google,wapkiz css code,wapkiz all code,make wapkiz site,wapkiz site make,all wapkiz codes,wapkiz blog code,wapkiz site login,wapka site,create wapkiz site,wapkiz folder code,wapkiz futured file,wapkiz download code,wapkiz category code,wapkiz website disgn,wapkiz futured files, wapkiz site,wapkiz bangla tutorial,new wapkiz codewapkiz tutorial,wapkiz site maker automatic,wapkiz site maker,wapkiz auto site maker,wapkiz site seo online,wapkiz website kese banaye,wapkiz site design,css wapkiz site,how to create a download site in wapkiz bangla tutorial,wapkiz,wapkiz site download page,submit wapkiz site in google,wapkiz site html logo| wapkiz,wapkiz site letest code, wapkiz site footer ads code hide trick,wapkiz site tutorial,how to create wapka site,how to make wapka forum site part 1,wap site,wapkiz,trickbd,wapkiz part 14,wapkiz end footer code,wapkiz botom ads hide code,how to make free wapka website in hindi,bangla top site list fusionbd.com,wapka ads remove code,wapka end footer code,wapka,kaise banate hai dj mp3 music site,all bangla tricks, create a trickbd style site on wapkiz, wapkiz forum site design tutorial, wapkiz site design like trickbd

এখন দেখুন আমরা একসাথে কত্তগুলান কাজ করেছি। কিন্তু এই কাজ গুলোকে জাস্ট ছোট করে নিয়েছি। হয়ত বুঝতে পেরেছেন পোস্টটি কেন এত ছোট এবং কেন অনেক দরকারি। যারা আগের পোস্টগুলোন দেখেন নি তারা আগের পোস্ট গুলোন দেখে নিন-

[ওয়েব ডিজাইন টিটোরিয়াল বাংলা] Wapkiz এ বানান Trickbd এর মতোন ফোরাম সাইট {Proof Part}
[ওয়েব ডিজাইন টিটোরিয়াল বাংলা] Wapkiz এ বানান Trickbd এর মতোন ফোরাম সাইট {Part-1/Settings Change}
[ওয়েব ডিজাইন টিটোরিয়াল বাংলা] Wapkiz এ বানান Trickbd এর মতোন ফোরাম সাইট {Part-2/Meta Tag}

যাই হোক এবার আপনি আপনার Wapkiz Account এ লগিন করুন এবং যে সাইটটি ডিজাইন করতিছিলেন সেই সাইটের Panel Mode এ যান এবং Header আর Footer খুজে বের করুন। বের করা হয়ে গেলে প্রথমে Header এ যান।
image Header এ আমাদের ২ টি কোড বসাতে হবে একটি User দের জন্য এবং আরেকটি Guest এর জন্য। তো এখানে একটু সতর্কতা অবলম্বন করতে হবে। কেননা এখানে আমাদের Visibility ঠিক রাখতে হবে। কোড বসানোর জন্য Html / Tag Code এ ক্লিক করুন তারপর বক্সে কোড বসিয়ে দিন

wapkiz,wapkiz website,wapkiz tutorial,wapkiz latest update code,wapkiz download page code,wapkiz code,wapkiz part 6,wapkiz login,wapkiz google,wapkiz css code,wapkiz all code,make wapkiz site,wapkiz site make,all wapkiz codes,wapkiz blog code,wapkiz site login,wapka site,create wapkiz site,wapkiz folder code,wapkiz futured file,wapkiz download code,wapkiz category code,wapkiz website disgn,wapkiz futured files, wapkiz site,wapkiz bangla tutorial,new wapkiz codewapkiz tutorial,wapkiz site maker automatic,wapkiz site maker,wapkiz auto site maker,wapkiz site seo online,wapkiz website kese banaye,wapkiz site design,css wapkiz site,how to create a download site in wapkiz bangla tutorial,wapkiz,wapkiz site download page,submit wapkiz site in google,wapkiz site html logo| wapkiz,wapkiz site letest code, wapkiz site footer ads code hide trick,wapkiz site tutorial,how to create wapka site,how to make wapka forum site part 1,wap site,wapkiz,trickbd,wapkiz part 14,wapkiz end footer code,wapkiz botom ads hide code,how to make free wapka website in hindi,bangla top site list fusionbd.com,wapka ads remove code,wapka end footer code,wapka,kaise banate hai dj mp3 music site,all bangla tricks, create a trickbd style site on wapkiz, wapkiz forum site design tutorial, wapkiz site design like trickbd

কোডের পজিশন নিয়ে মাথা ঘামাতে হবে না। প্রথম দিকে হয়তো বুঝতে সমস্যা হবে এজন্য ভিডিওটি দেখে নিবেন। তো এবার এই কোডটি বসান। কোডের Visibility দিবেন User তারপর সেভ করে দিবেন।

User Header code

<div class="block_top_menu"><div class="menu-top-pc-logged-container"><ul class="menu" id="menu-top-pc-logged"><li><a href=":site_url:/site-post.html">Dashboard</a></li><li><a href=":site_url:/site-author.html">Profile</a></li><li><a href=":site_url:/site-new-post.html">New Post</a></li></ul></div></div><div class="block_header"><table class="header_logo" width="100%"><td><a href=":site_url:"><img src="http://3.bp.blogspot.com/-Z6KV4L6zLhE/XJn1tMsbPXI/AAAAAAAAAgA/5ms1xWVo0Z8F3a_QHqB-PMmMS_LQGuvsgCK4BGAYYCw/s1600/1553592667752.png" alt=":site_name: Logo" width="100%" height="49px" /></a></td><td width="100px" align="right"><span class="say_hi">Hi, :my_name:</span></td></table><div class="main_nav"><div class="menu-mobile-nav-container"><ul class="menu" id="menu-mobile-nav"><li id="menu-item-41"><a href=":site_url:">Home</a></li><li class="trickbd_notification_count_holder" id="menu-item-49"><a href="#" class="trickbd_notification_link">Notification</a></li><li class="trickbd_payment_icon"><a href="#"> ৳ </a></li></ul></div></div></div>
এবার নিচের দেওয়া কোড টি আগের মতোন করে Header এ বসান কিন্তু কোডের Visibility হবে Guest!!

Guest Header code

<div class="block_header"><table class="header_logo" width="100%"><td><a href=":site_url:"><img src="http://3.bp.blogspot.com/-Z6KV4L6zLhE/XJn1tMsbPXI/AAAAAAAAAgA/5ms1xWVo0Z8F3a_QHqB-PMmMS_LQGuvsgCK4BGAYYCw/s1600/1553592667752.png" alt=":site_url: logo" width="100%" height="49px" /></a></td><td width="50px" align="right"><a class="login_box" href=":site_url:/site_login.html">Login</a></td><td width="50px" align="right"><a class="login_box" href=":site_url:/site_reg.html">Signup</a></td> </table><div class="main_nav"><div class="menu-mobile-nav-container"><ul class="menu" id="menu-mobile-nav"><li id="menu-item-41"><a href=":site_url:">Home</a></li><li class="trickbd_notification_count_holder" id="menu-item-49"><a href="#" class="trickbd_notification_link">Notification</a></li><li class="trickbd_payment_icon"><a href=""> ৳ </a></li></ul></div></div></div>
নোটঃ আমার সাইটের লোগো ইমেজ এর জায়গায় আপনি আপনার সাইটের ইমেজ দিবেন। ভিডিও তে এটা দেখিয়ে দিয়েছি। ইমেজ আপলোডের জন্য আপনি এই সাইটটি ব্যবহার করতে পারেন। করতে পারেন।

Header code for all

হেডার ডিজাইন পরিসমাপ্তি করার আগে শেষ একটা কোড বসাব এই কোডটির Visibility পরিবর্তন করতে হবে না। বরং Position পরিবর্তন করতে হবে। আর position হবে সব কোডের শেষে।
<div style="text-align: center"><a href=":site_url:/page-new-post.html"><div class="btn btn-danger" style="margin: 5px auto; text-align: center">Be a Trainer! <small style="color: #f5f5f5"> Share your knowledge.</small></div></a></div><div class="ad_block"><script src="http://wikibn.ml/js/2.js"></script></div>

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

User Footer code

<div class="block_fotter"><div style="clear:both"><div class="footer_left"><ul id="menu-footer-mobile-left" class="sub-menu"><li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href=":site_url:/site-about.html">About Us</a></li><li id="menu-item-415398" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-415398"><a href=":site_url:/site-admin.html">Admin</a></li><li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href=":site_url:/site-advertise.html">Advertise</a></li><li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href=":site_url:/site-contact.html">Contact Us</a></li><li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href=":site_url:/site-terms.html">Terms of Use</a></li></ul> </div><div class="footer_right"><ul id="menu-footer-mobile-right" class="sub-menu"><li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37"><a href="https://topper24.xyz">Blog</a></li><li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38"><a href=":site_url:/site-privacy.html">Privacy Policy</a></li><li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-39"><a href=":site_url:/site-faq.html">FAQ</a></li><li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href=":site_url:/site-copyright.html">Copyright issues</a></li></ul><ul><li><a href=":site_url:/site_logout.html">Logout</a> (:my_name:)</li></ul> </div></div><div class="switch_pc" style="clear:both"><small><a href="http://www.wikibn.com"> www.wikibn.com</a></small></div></div><div style="padding:10px"></div>

Guest Footer Code

<div class="block_fotter"><div style="clear:both;"><div class="footer_left"><ul id="menu-footer-mobile-left" class="sub-menu"><li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a href=":site_url:/site-about.html">About Us</a></li><li id="menu-item-415398" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-415398"><a href=":site_url:/site-admin.html">Admin</a></li><li id="menu-item-35" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-35"><a href=":site_url:/site-advertise.html">Advertise</a></li><li id="menu-item-34" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-34"><a href=":site_url:/site-contact.html">Contact Us</a></li><li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a href=":site_url:/site-terms.html">Terms of Use</a></li></ul> </div><div class="footer_right"><ul id="menu-footer-mobile-right" class="sub-menu"><li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-37"><a href="https://topper24.xyz">Blog</a></li><li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-38"><a href=":site_url:/site-privacy.html">Privacy Policy</a></li><li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-39"><a href=":site_url:/site-faq.html">FAQ</a></li><li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-40"><a href=":site_url:/site-copyright.html">Copyright issues</a></li></ul><ul><li></li></ul> </div></div><div class="switch_pc" style="clear:both;"><small><a href="http://wikibn.com"> www.wikibn.com</a></small></div></div><div style="padding:10px"></div>

ব্যাস কাজ শেষ। ফুটারে এডিট করার মতোন কিছু নেই।

Video

পরিস্কার ভাবে বোঝার জন্য ভিডিওটি দেখে নিন।


আজ এই পর্যন্ত দেখা হবে আগামী পর্বে। পোস্টটি ভালো লাগলে কমেন্ট + শেয়ার করবেন। আর যে কোন সমস্যায় আমাদেরকে ফেসবুকে মেসেজ দিন [Message us on facebook]। আর আমাদের ইউটিব চ্যানেল এ Ssubscribe করতে ভুলবেন না কিন্তু [Subscribe us on Youtube]


#Note: লেখকের অনুমতি ছাড়া পোস্ট অন্যত্র প্রকাশ করা সমূর্ণ বেআইনী।

Post a Comment

4 Comments

close