ওয়াপকিজে ফটো গ্যালারি ওয়েবসাইট তৈরি করুন আপনিও,


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


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




ফটো গ্যালারী সাইট তৈরির জন্য প্রথমে একটি নতুন সাইট তৈরি করে ফেলুন। যারা ওয়াপকিজে নতুন তারা এই লিঙ্ক থেকে দেখে নিন কিভাবে ওয়াপকিজে সাইট তৈরি করতে হয়।


সাইট তৈরি করা হলে প্রথমেই Panel>>File Manager (FM)>> এ গিয়ে Images নামে একটি নতুন ফোল্ডার তৈরী করুন এবং এই ফোল্ডারে দুই-তিনটি ফটো আপলোড করে দিন। এবং মনে রাখবেন এই 1 নম্বর আইডির ফোল্ডারে সব ইমেজ আপলোড করতে হবে তা না হলে হোমপেজের পেজিনেশন ঠিকভাবে কাজ করবে না। তবে আপনি যদি অন্য কোনো ফোল্ডারে আপলোড করতে চান তাহলে পোস্টের নিচের দিকে দেখুন সেখানে d=11 এর জায়গায় আপনি যে ফোল্ডারে ইমেজ আপলোড করবেন সেই   ফোল্ডারের আইডি নম্বর দিতে হবে।


এবার Panel>>Page>> এ গিয়ে 'img' নামে একটি নুতুন পেজ তৈরি করুন। এটা হবে আপনার সাইটের ইমেজ ডাউনলোড পেজ। পেজ তৈরির কাজ এটুকুই এবার পালা সাইট ডিজাইন করার।


মেটা হেডার:

সাইট তৈরির জন্য সর্বদাই প্রথমে মেটা হেডারের কোড বসাতে হয়। নিচের কোডটি অথবা এই লিঙ্কের কোডটি কপি করে Panel>>Meta Header>> এ গিয়ে পেস্ট করে দিন।

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="fvaicon url">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<meta name="description" content="ColorImg - Background Image Collection By Sakhawat Hossain.">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="theme-color" content="#385898">
 <style type="text/css">
 .loader-wrapper {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
   background-color: #385898;
   display:flex;
   justify-content: center;
   align-items: center;
 }
 .loader {
   display: inline-block;
   width: 30px;
   height: 30px;
   position: relative;
   border: 4px solid #Fff;
   animation: loader 2s infinite ease;
 }
 .loader-inner {
   vertical-align: top;
   display: inline-block;
   width: 100%;
   background-color: #fff;
   animation: loader-inner 2s infinite ease-in;
 }
 @keyframes loader {
   0% { transform: rotate(0deg);}
   25% { transform: rotate(180deg);}
   50% { transform: rotate(180deg);}
   75% { transform: rotate(360deg);}
   100% { transform: rotate(360deg);}
 }
 @keyframes loader-inner {
   0% { height: 0%;}
   25% { height: 0%;}
   50% { height: 100%;}
   75% { height: 100%;}
   100% { height: 0%;}
 }
 </style>
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 
 <div class="loader-wrapper">
 	<span class="loader"><span class="loader-inner"></span></span>
 </div>
 
 <script>
         $(window).on("load",function(){
           $(".loader-wrapper").fadeOut("slow");
         });
 </script>
 


সিএসএস ইনস্টল:

সিএসএস ইনস্টল করার জন্য নিচের সিএসএস কোডটি অথবা এই লিঙ্কের কোডটি কপি করে Panel>>CSS Theme>>Edit Full CSS>> এ গিয়ে পেস্ট করে দিন। তাহলেই সিএসএস এর কাজ শেষ।

body {
  padding:0px;
  margin:0px;
  background:#fff;
  font-weight:bold;
}

* {
  box-sizing: border-box;
  padding:0;
  margin:0;
}

.body {
  padding:6px;
  margin:0px;
  background:#fff;
}

.letest img {
  width:100%;
  height:auto;
  border:1px solid #385898;
  padding:0px;
  margin:3px 0;
}

.relative {
  position:relative;
}
.bar {
  position:absolute;
  bottom:0px;
  left:0px;
  color:#385898;
  background:rgba(228, 233, 224, 0.7);
  padding:5px 0px;
  display:block;
  margin:4px 0px;
  border-top:1px solid #385898;
  width:100%;
}

.img_info p{
  padding:5px;
  margin:5px 0;
  display:block;
  background:#eee;
}

.footer {
  color:#fff;
  background:#333;
  padding:0px;
  display:block;
  margin:0px;
  border-top:2px solid #385898;
  width:100%;
}

.links {
  padding:5px;
}

.links a{
  color:#fff;
  padding:10px 5px;
  display:block;
}

.copyright {
  padding:5px;
  margin:0px;
  background:#000;
}

.user_form {
  padding:5px;
  }
  
.user_form input[type=text],input[type=password] {
  padding:5px;
  width:100%;
  background:#fff;
  color:#000;
  border:1px solid #555;
  border-radius:3px;
}

.user_form input[type=submit] {
  padding:5px;
  margin-top:4px;
  width:100%;
  background:#385898;
  color:#fff;
  border:1px solid #555;
  border-radius:3px;
}

.header {
  color:#fff;
  background:#385898;
  padding:10px;
  display:block;
  margin:0px;
}

.header a {
  color:#fff;
  font-size:25px;
  font-weight:bold;
}

h3 {
  color:#385898;
  background:#e4e9e0;
  padding:6px;
  display:block;
  margin:0 0 3px 0;
  text-align:left;
  font-size:normal;
  border: 1px solid #ddd;
}

img {
  vertical-align: middle;
  max-width:100%;
}

a {
  color:#385898;
  text-decoration:none; 
}

hr {
  color:#385898;
  width:100%;
  height:1px;
}

.paging {
   clear:both;
   padding:6px 0px;
   background:#e4e9e0;
   color:#222;
   margin:3px 0px;
}

.paging a, .paging span {
   background:#fff;
}

.paging span.current {
   background:#e5e5e5 none repeat scroll 0 0;
   border:1px solid #001a00;
   font-weight:400;
}

.paging span {
   color:#000;
   background:#e5e5e5 none repeat scroll 0 0;
   border:1px solid #999;
   font-weight:400;
}

.paging a {
   color:#00f;
   text-decoration:none;
   border:1px solid #00f;
   padding:3px 10px;
   margin:0px 2px;
}

.paging span {
   text-decoration:none;
   border:1px solid #000;
   padding:4px 10px;
   margin:0px 2px;
}

.paging span {
   font-weight:700;
}


হেডার:

হেডার ডিজাইন করার জন্য আমি আপনাদের যে কোড দেবো সেটা একেবারেই সিম্পল। আপনারা আপনাদের প্রয়োজন অনুযায়ী হেডার ডিজাইন করে নিয়েন। হেডারের জন্য নিচের কোডটি অথবা এই লিঙ্কের কোডটি কপি করে হেডার পেজে Panel>>HTML / Tag Code>> এ গিয়ে পেস্ট করে দিন।

<div class="header">
	<a href="/">ColorImg</a>
</div>
<div class="body">


ফুটার:

আমি আপনের সাথে যে ফুটার কোড শেয়াড় করবো সেটা অনেক সুন্দর। তো হেডার ডিজাইন করার জন্য নিচের কোডটি অথবা এই লিঙ্কের কোডটি কপি করে ফুটার পেজে Panel>>HTML / Tag Code>> এ গিয়ে পেস্ট করে দিন।

</div>
<div class="footer">
	<h1>Connect Us:</h1>
	<div class="links">
		<a href="https://fb.com/sfsakhawat999" > <i class="fa fa-facebook-official"></i>/sfsakhawat999</a>
		<a href="https://twitter.com/sfsakhawat999" > <i class="fa fa-twitter"></i>/sfsakhawat999</a>
		<a href="https://instagram.com/sfsakhawat999" > <i class="fa fa-instagram"></i>/sfsakhawat999</a>
		<a href="https://mesakhawat.blogspot.com" > <i class="fa fa-globe"></i>MeSakhawat.Blogspot.Com</a>
	</div>
	<div class="user_form">:login:</div>	<div class="copyright">© 2020 Colorimg</div>
</div>


হোমপেজ:

হোমপেজ ডিজাইন করার জন্য নিচের কোডটি অথবা এই লিঙ্কের কোডটি কপি করে হোমপেজের Panel>>HTML / Tag Code>> এ গিয়ে পেস্ট করে দিন। তাহলেই হোমপেজের কাজ শেষ।

<title>Colorimg</title>
<h3>Latest Updates:</h3>
[fm]d=1,l=5,s=:to-page:,lu=1,no=no Updates||
<div class="letest">
	<div class="relative">
		<img src="%urlthumb%">
		<div class="bar">
			<table width="100%">
				<tbody>
					<tr width="100%">
						<td align="left"><i class="fa fa-clock-o" style="font-size:12px;"></i> %time_upl=d M Y%</td>
						<td align="right"><a href="/page-img/%id%"> <i class="fa fa-download" style="font-size:15px;"></i> Download</a></td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
</div>
[/fm]
<div class="paging">
:page:c=[fm]d=1,l=0||%count%[/fm],l=5,s=:to-page:,no=:: 
	<table width="100%">
		<tbody>
			<tr width="100%">
				<td align="left">%prev=<%</td>
				<td align="center">Page - :to-page(1): of %nlast%</td>
				<td align="right"> %next=>% :/page:</td>
			</tr>
		</tbody>
	</table>
</div>


ইমেজ পেজ:

ইমেজ ডাউনলোড পেজ ডিজাইনের জন্য img পেজে Panel>>HTML / Tag Code>> এ গিয়ে নিচের কোডটি অথবা এই লিঙ্কের কোডটি কপি করে পেস্ট করে দিন। তাহলেই ইমেজ ডাউনলোড পেজের কাজ শেষ।

<title>DOWNLOAD IMAGE</title>
[fm]d=all,to=:url-1(:to-id:):||
<h3>DOWNLOAD IMAGE</h3>
<img src="%urlthumb%" class="img">
<div class="img_info">
	<p>Image Title: %name%</p>
	<p>Image ID: %id%</p>
	<p>Uploader: %by%</p>
	<p>Upload Date: %time_upl%</p>
	<a href="%link%" style="padding:5px;margin:2px 0; text-align:center;display:block;background:#e4e9e0;">DOWNLOAD</a>
</div>
[/fm]


পোস্টটা কেমন লাগলো সেটা কমেন্ট করে জানাবেন। আর এর পরবর্তীতে হ্যাকিং প্রোটেক্ট ব্লগ তৈরির সিরিজ আসছে। রেগুলার বিষয়ে পোস্ট পেতে আমাদের সাথেই থাকুন, ধন্যবাদ

Post a Comment

0 Comments