WapkizWeb Design Tutorial

Wapkiz এ বানান সম্পূর্ণ নতুন ডিজাইনের ডাউনলোড সাইট [PART-1]

আসসালামু ওয়ালাইকুম। আশা করছি ভালো আছেন। Wapkiz এ ডাউনলোড সাইট বানানোর টিউটোরিয়ালের ১ম পর্বে আপনাকে স্বাগতম। যার Web Deign এ নতুন আশা করছি এই টিউটোরিয়ালটি তাদের উপকার এ আসবে। আর অবশ্যই টিউটোরিয়ালটি শেয়ার করে সবার নিকট ছড়িয় দিবেন যাতে অন্যরাও শিখতে পারে।

তো, এবার চলেন কাজে নেমে পরি। আশা করছি Wapkiz এ আপনার অ্যাকাউন্ট আছে। যদি না থাকে তবে এই লিংকে গিয়ে একটা অ্যাকাউন্ট খুলে নিবেন। যদি থাকে তবে তো আর কোন কথাই নেই। এবার নতুন একটা সাইট খুলে নিন। আগের সাইট থাকলেও কোন সমস্যা নেই। তবে ব্লাংক থিম একটিভ করবেন।

চলুন সাইট বানানোর আগে দেখে নেই আমারা কোন ডিজাইনের সাইট বানাবো। আশা করছি সাইটের ডিজাইনটা ভালো লাগবে। এটা সম্পুর্ণ নতুন এবং ইউনিক ডিজাইন।

Wapkiz এ ডাউনলোড সাইট বানানোর ডেমো

হোম পেজে ও ফাইল লিস্টে পেজের স্ক্রিনশট, Wapkiz এ ডাউনলোড সাইট
হোম পেজে ও ফাইল লিস্টে পেজের স্ক্রিনশট
ফাইল ডাউনলোড পেজের স্ক্রিনশট, Wapkiz এ ডাউনলোড সাইট
ফাইল ডাউনলোড পেজের স্ক্রিনশট

আপনি চাইলে লাইভে ডেমো দেখতে পারেন। লাইভ দেখতে এখানে ক্লিক করুন (Link Expired)। তো, এবার সাইটের কাজ শুরু করা যাক। যে সাইটা ডিজাইন করবেন সেই সাইটের Panel Mode এ প্রবেশ করুন –

Wapkiz Download site Tutorial in Bangla
Wapkiz panel mode

এবার স্ক্রল করে একটু নিচে আসুন। Css Theme লেখা খুজেও বের করুন। তারপর ওখানে ক্লিক করুন।

Wapkiz Download site Tutorial in Bangla [Css Theme]
Wapkiz Download site Tutorial in Bangla [Css Theme]
এবার Edit Full Css এ ক্লিক করুন

Wapkiz Download site Tutorial in Bangla [Edit Css Theme]
Wapkiz Download site Tutorial in Bangla [Edit Css Theme]
এবার একটা বক্স পাবেন ওখানে Css কোড বসাতে হবে।

Wapkiz download site tutorial bangla [Edit Css Theme]
Wapkiz download site tutorial bangla [Edit Css Theme]
নিচে দেওয়া Css কোডগুলো কপি করে ওই বক্সে বসিয়ে দিবেন।

body {
	background: #eee;
	padding: 0;
	margin: 0;
	color: black;
	text-align: center;
	font-size: 14px;
	font-family: Times New Roman;
	max-width: 420px;
}

.endC {
	background: black;
	padding: 8px;
	color: white;
	text-align: center;
	text-shadow: 1px 1px 2px;
	display: block;
}

.header {
	background: white;
	color: #3366ff;
	margin-bottom: 6px;
	padding: 6px 0 0;
}

.header .top {
	border: 2px solid #3399ff;
	left: 0;
	right: 0;
	top: 0;
	position: fixed;
}

.header .logo {
	font-family: 'Lobster';
	font-size: 30px;
	padding-left: 8px;
	padding-top: 8px;
	padding-bottom: 3px;
	text-align: left;
}

.header .links {
	text-align: left;
}

.header .links a {
	background: white;
	margin-left: 2px;
	margin-right: 2px;
	padding: 6px;
	border-bottom: 2px solid #3399ff;
	color: #3399ff;
	display: inline-block;
	text-decoration: none;
}

.header .links a:hover {
	background: #3399ff;
	color: white;
	text-decoration: none;
	font-weight: bold;
	text-shadow: 1px 1px 2px;
	transition: 0.6s;
}

a {
	color: #3399ff;
	text-decoration: none;
}

a:hover {
	color: #3b5998;
	text-decoration: none;
}

a:hover {
	color: #3b5998;
	text-decoration: none;
}

.dfile {
	background: white;
	padding: 6px;
	border: 1px solid #3399ff;
	margin: 2px;
}

.nd {
	height: 120px;
	width: 120px;
	border: 1px solid #3399ff;
	border-radius: 6px;
}

.pd2 {
	background: white;
	padding: 6px;
	color: #3399ff;
	text-align: left;
	border-bottom: 1px solid #eee;
}

.iw6px {
	background: white;
	padding: 6px;
}

.dfile2 {
	background: white;
	padding: 6px;
	margin: 2px;
	border: 1px solid #3399ff;
}

.dlfile3 {
	padding: 8px;
	overflow: auto;
}

.dlfile3 a:hover {
	opacity: 0.3;
}

.dl1 {
	background: #3399ff;
	padding: 6px;
	border: 1px solid #3399ff;
	color: white;
	margin: 2px;
	display: inline-block;
}

.dl2 {
	background: white;
	padding: 6px;
	border: 1px solid #3399ff;
	color: #3399ff;
	margin: 2px;
	display: inline-block;
}

.catbb {
	border: 1px solid #3399ff;
	margin: 8px 2px 8px 2px;
}

.catt {
	background: #3399ff;
	padding: 6px;
	color: white;
	text-shadow: 1px 1px 2px blue;
	font-weight: bold;
	border-bottom: 1px solid #3399ff;
}

.catd {
	background: #f8f8f8;
	padding: 4px;
}

.catb {
	border: 1px solid #3399ff;
	margin: 2px;
	display: inline-block;
}

.catb a {
	background: white;
	padding: 6px;
	color: #3399ff;
	font-weight: bold;
	display: inline-block;
	text-decoration: none;
}

.catb a:hover {
	background: #3399ff;
	color: white;
	text-decoration: none;
	transition: 0.5s;
}

.catc {
	background: #3399ff;
	padding: 6px;
	color: white;
	font-weight: bold;
	display: inline-block;
}

.file {
	background: white;
	padding: 6px;
	text-align: left;
	border: 1px solid #3399ff;
	border-right: 5px solid #3399ff;
	overflow: auto;
	margin: 2px;
}

.file2 {
	background: white;
	padding: 6px;
	text-align: left;
	border: 1px solid #3399ff;
	border-left: 5px solid #3399ff;
	overflow: auto;
	margin: 2px;
}

.file .imge,
.file2 .imge {
	height: 70px;
	width: 60px;
	float: left;
	margin-right: 4px;
	border: 1px solid #3399ff;
}

.menu2 {
	background: #3399ff;
	font-weight: bold;
	padding: 6px;
	color: white;
	text-shadow: 1px 1px 2px blue;
}

.menuc2 {
	border-left: 5px solid blue;
	margin: 2px;
}

.titlex {
	display: inline-block;
	overflow: auto;
	padding-bottom: 4px;
}

.pagc {
	border: 1px solid #3399ff;
	margin: 2px;
}

.pag {
	background: white;
	padding: 6px;
	border-left: 5px solid #3399ff;
	border-right: 5px solid #3399ff;
	overflow: auto;
}

.pag pg {
	background: white;
	border: 1px solid #3399ff;
	color: #3399ff;
	display: inline-block;
	font-weight: bold;
	padding: 4px;
}

.pag a {
	color: blue;
	text-decoration: none;
	font-weight: bold;
}

.footer {
	background: #333;
	padding: 8px;
	border-top: 4px solid #3399ff;
	text-align: left;
}

.footer a {
	color: white;
	text-decoration: none;
}

.footer a:hover {
	text-shadow: 1px 1px 2px;
}

.footer .ic {
	color: white;
	padding: 2px;
	font-size: 16px;
}

.footer .nam {
	background: #222;
	padding-top: 6px;
	padding-left: 6px;
	padding-bottom: 6px;
	padding-right: 15px;
	display: inline-block;
	color: white;
	font-weight: bold;
	text-shadow: 1px 1px 2px;
	border: 1px solid #000;
}

.footer .txt {
	padding-top: 4px;
	color: white;
}

.footer .sep {
	padding: 2px;
	background: #222;
	margin-top: 6px;
	margin-bottom: 6px;
	border-radius: 6px;
}

.footer .p2 {
	padding-top: 2px;
	padding-bottom: 2px;
}

কোড কপি করা হয়ে গেলে বাক্সে কোড পেস্ট করে সেভ করে দিন। ব্যস কাজ শেষ। আজ এই পর্যন্তই। আবারো খুব শিঘ্রই হাজির হবো পরবর্তী পর্ব নিয়ে। ভালো থাকুন সুস্থ থাকুন এবং আমাদের সাথে থাকুন। কোথাও কোন সমস্যা হলে অবশ্যই কমেন্টের মাধ্যমে আমাকে জানাবেন। আর পোস্টটি শেয়ার করতে ভুলিয়েন না।

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

2 Comments

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.