কালবৈশাখী মাল্টিপল অ্যাপ ওয়েবসাইট এইচটিএমএল টেম্পলেট - KalBoishakhi Multiple App Website HTML Templete

আসসালামু আলাইকুম,
কেমন আছেন সকলে? অনেকদিন আপনাদের জন্য কিছু লিখি না। আসলে অনেক চাপের মাঝে আছি, সামনেই প্রি টেস্ট, তাই ব্লগিং এ হাত দিতে পারছি না। কিন্তু কাজের ফাকে ফাকে নানা টেমপ্লেট ইনশাআল্লাহ আপনাদের উপহার দিয়ে জাব একেবারে বিনামুল্যে!
এবারে আমার পক্ষ থেকে আপনাদের জন্য উপহার এই "কালবৈশাখী" টেম্পলেট।
এটির নাম কালবৈশাখী হবার কারন হল এর ব্যাকগ্রাউন্ড ইমেজ আর ফুটার ইমেজ।
ডকুমেন্টেশন এই পোস্টের শেষে পাবেন।








একনজরে সব ফিচার!
  1. Responsive Design
  2. Awesome Background Images
  3. Compressed Background Images for Low Data and Bandwidth Consumption.
  4. Responsive Menu Bar
  5. Client Side Background Image Suit!
  6. Orthi Light Box v1.2 Enabled!
  7. Responsive JQuerry Back To Top Button
  8. Responsive Light Box 
  9. Awesome Social Menus (Footer)
  10. Responsive Light Box
  11. Multiple Apps Support
  12. Awesome Hover Effects
  13. Simple CSS
  14. Native Javascript




রেস্পন্সিভ ডিজাইনের টেম্পলেট এটি :)






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




এছাড়া এই টেমপ্লেটে ব্যাবহার করেছি জেকুয়েরি, ফন্ট অসাম এবং মডার্নাইজার
মডার্নাইজার এর ব্যাবহার করার ফলে ক্রস ব্রাউজারে ভালো ভাবে সাপোর্ট পাওয়া যাবে।

আছে ব্যাক টূ টপ বাটন, একটা কমন ফিচার যদিও...





ব্যাবহার করা হয়েছে আমার ডিজাইন করা "অর্থী টেক্সট লাইট বক্স" :v
টেক্সট লাইটবক্সের মজা হল, ছবির মতো এখানে কেবল ছবি না, টেক্সট সহ পুরো প্যরাগ্রাফ দেখানো যাবে লাইট বক্সে!
এমনকি এই লাইটবক্স রেস্পন্সিভও!









এছাড়া রয়েছে অসাধারণ একটা ফুটার!








ডকুমেন্টেশনঃ

কিভাবে আরও অ্যাপ অ্যাড করবেন?

আরও অ্যাপ অ্যাড করতে এই কোড গুলো ডুপ্লিকেট করতে হবে। 

<div class="popapphold">
<img width="150px" height="auto" src="appdataindex/img/1.png">
<h1 class="apptitlediv">Digital Regional Dictionary</h1>
<div id="changelogdata" style="display:none;">
<div class="orthi-textlightbox-background fade-in">
<div class="orthi-textlightbox-area fade-in">
<button class="orthi-textlightbox-area-close" onclick="hidechangelog()"><i class="fa fa-times" aria-hidden="true"></i></button>
<h2 class="orthi-h2">
Digital Regional Dictionary
</h2>
<div class="appsummary">
<img width="150px" height="auto" src="appdataindex/img/1.png">
</br>
<ul>
<li>Current Verson: 2.4.0 </li>
<li>Platform: Windows/Browser</li>
<li>Developer: Tawsif Torabi & MA Kamol</li>
<li>Release: April, 2015</li>
<li>Downloads: 1224 Times (January, 2016)</li>
<li>Source: Open</li>
</ul>



1st ever the Digital Verson of the Bangladesh Regional Language Dictionary by Dr. Muhammad Shahidullah,

It's Open Source and developed using HTML5 and CSS3.

Can be ran offline mode using any modern browser. The main feature is Voice!

Means it's a talking dictionary. The Word Search feature didn' added yet.

Developers are Tawsif, Kamol and Jim from GR+

</div>
</div>
</div>
</div>

<div class="clearfix"></div>
<a class="download" href="#"><i class="fa fa-download" aria-hidden="true"></i> Download</a>

<a class="webpage" href="javascript:" onclick="changelog()"><i class="fa fa-expand" aria-hidden="true"></i> Show More</a>
</div>

কেবল ডুপ্লিকেট করলেই হবে না, লাইট বক্স এনাবেল করার জন্য দয়া করে নিচের পদ্ধতি অনুসরণ করুন,


১. appdataindex/js/textlightbox.js ফাইল ওপেন করুন 

২. সেখানে বেশ কিছু ফাংশান জোড়া করে লেখা আছে। যেমন,
//credits
function credit(){
var content1 = document.getElementById('creditdata');
var Dowhat = ('display: inline;');
content1.style= Dowhat;
}
function hidecredit(){
var content1 = document.getElementById('creditdata');
var Dowhat = ('display: none;');
content1.style= Dowhat;
}
এখানে উল্লেখ্য, প্রতিটি অ্যাপের জন্য লাইটবক্স করতে প্রতিটী অ্যাপের জন্য আলাদা ফাংশান নেইম লাগবে, মিলে গেলে কাজ করবে না।

৩. এবার আপনার অ্যাপের ডাটা কনটেইনার থেকে এই কোড খেয়াল করে       দেখুন,

<div id="changelogdata" style="display:none;">
<div class="orthi-textlightbox-background fade-in">
<div class="orthi-textlightbox-area fade-in">
<button class="orthi-textlightbox-area-close" onclick="hidechangelog()"><i class="fa fa-times" aria-hidden="true"></i></button>
<h2 class="orthi-h2">
Digital Regional Dictionary
</h2>
<div class="appsummary">
<img width="150px" height="auto" src="appdataindex/img/1.png">
</br>
<ul>
<li>Current Verson: 2.4.0 </li>
<li>Platform: Windows/Browser</li>
<li>Developer: Tawsif Torabi & MA Kamol</li>
<li>Release: April, 2015</li>
<li>Downloads: 1224 Times (January, 2016)</li>
<li>Source: Open</li>
</ul>



1st ever the Digital Verson of the Bangladesh Regional Language Dictionary by Dr. Muhammad Shahidullah,

It's Open Source and developed using HTML5 and CSS3.

Can be ran offline mode using any modern browser. The main feature is Voice!

Means it's a talking dictionary. The Word Search feature didn' added yet.

Developers are Tawsif, Kamol and Jim from GR+
</div>
</div>
</div>
</div>

এখানে হলুদ মার্ক করা আইডি হতে হবে হবে ইউনিক এবং এটাই লাইটবক্সের জেএসের জন্য কাজ করবে।
যেমন,
//credits
function changelog(){
var content1 = document.getElementById('changelogdata');
var Dowhat = ('display: inline;');
content1.style= Dowhat;
}
function changelog(){
var content1 = document.getElementById('changelogdata');
var Dowhat = ('display: none;');
content1.style= Dowhat;
}

এবার যদি changelog() ফাংশন কল করেন, তবে changelogdata আইডিধারি এইচটিএমএল ডিভিশন অংশটি ওয়েবপেজে ফুটে উঠবে। 
আর hidechangelog() ফাংশান কল করলে changelogdata আইডিধারি এইচটিএমএল ডিভিশন অংশটি ওয়েবপেজ থেকে হাইড হয়ে যাবে।


এবার তাই hidechangelog() এবং changelog() কল করবেন কিভাবে?

<div id="changelogdata" style="display:none;">
<div class="orthi-textlightbox-background fade-in">
<div class="orthi-textlightbox-area fade-in">
<button class="orthi-textlightbox-area-close" onclick="hidechangelog()"><i class="fa fa-times" aria-hidden="true"></i></button>
<h2 class="orthi-h2">
Digital Regional Dictionary
</h2>
<div class="appsummary">
<img width="150px" height="auto" src="appdataindex/img/1.png">
</br>
<ul>
<li>Current Verson: 2.4.0 </li>
<li>Platform: Windows/Browser</li>
<li>Developer: Tawsif Torabi & MA Kamol</li>
<li>Release: April, 2015</li>
<li>Downloads: 1224 Times (January, 2016)</li>
<li>Source: Open</li>
</ul>
দেখুন, হাইলাইট করা অংশে একটা বাটন আছে, এবং ঐ বাটন দিয়ে আমি হাইড করার ফাংশান কল করবো এবং,



<a class="webpage" href="javascript:" onclick="changelog()"><i class="fa fa-expand" aria-hidden="true"></i> Show More</a>
  উপরের মতো শো মোর বাটন দিয়ে ঐ লাইট বক্স শো করবো।

এবার প্রতিটী অ্যাপের জন্য আপনাকে আলাদা করে ফাংশনের জোড়া (হাইড এবং শো) তৈরি করতে হবে এবং আলাদা করে ইউনিক ফাংশান তৈরি করে নিতে হবে।


কিভাবে আরও ব্যাকগ্রাউণ্ড ইমেজ যোগ করবেন?
আরও ব্যাকগ্রাউন্ড ইমেজ যোগ করতে বা বর্তমানের ডিফল্টগুলো পরিবরতন করতে index.html ফাইল খুলুন।

সেখানে হেড ট্যাগের নিচে নিচের কোড খুজে বের করুন,

<style id="changebg" type="text/css">
html{
background: url(appdataindex/bg1.jpg) no-repeat center center fixed;

background-size: cover;
}
</style>
<script type="text/javascript">
//Client Side can Change background image to suit with the site.
function bgimg1(){
var chngstyle = document.getElementById('changebg');
var newstyle = ('html{background: url(appdataindex/bg1.jpg) no-repeat center center fixed; background-size: cover;}');
chngstyle.innerHTML = newstyle;
}

function bgimg2(){
var chngstyle = document.getElementById('changebg');
var newstyle = ('html{background: url(appdataindex/bg2.jpg) no-repeat center center fixed; background-size: cover;}');
chngstyle.innerHTML = newstyle;
}

function bgimg3(){
var chngstyle = document.getElementById('changebg');
var newstyle = ('html{background: url(appdataindex/bg3.jpg) no-repeat center center fixed; background-size: cover;}');
chngstyle.innerHTML = newstyle;
}
</script>

কমলা রঙ দিয়ে হাইলাইট করা লিঙ্কে ডিফল্ট ব্যাকগ্রাউন্ড ইমেজের ইউআরএল দিতে হবে। সাইজ চওড়া না হলে ব্যাকগ্রাউন্ড ঠিক মতো কাভার করলেও রেজুলেশন কমিয়ে দেখাবে। আর হলুদ হাইলাইট করা লিঙ্কে চেঞ্জ করা যায়, এমন ব্যাকগ্রাউন্ড ইমেজ গুলোর লিঙ্ক দিবেন।






শেয়ার করুন

লেখকঃ

আমি তাওসিফ তুরাবি, অনলাইনাম (অনলাইন + নাম) ব্লগার তাওসিফ। এখন, ২০১৬ পর্যন্ত আমি ১৬ বছরের এক কিশোর। পড়াশোনা করি শহীদ পুলিশ স্মৃতি কলেজে। টেক ব্লগ লিখতে ভালবাসি। সাইন্স ফিকশন আর গল্প লিখতে পছন্দ করি।  জিআর+ ব্লগের এর একজন প্রতিষ্ঠাতা অ্যাডমিন।
আমাদের একটা ওয়েব ডেভেলপার ফার্ম আছে যার নাম জিআর+ আইটি বাংলাদেশ
এছাড়া আমার ব্যাক্তিগত ব্লগ রয়েছে। আমার ফেসবুক আইডিতে আমার সাথে সর্বক্ষণ যোগাযোগ করতে পারবেন। 


পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট