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

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

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

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

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

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

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

এবার Edit Full Css এ ক্লিক করুন

এবার একটা বক্স পাবেন ওখানে Css কোড বসাতে হবে।

নিচে দেওয়া 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;
}

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