sfAppStore এর মতো ওয়াপকিজ সাইট তৈরি করুন [পার্ট - 1]


হেলো ফ্রেন্ডস, আশা করি সকলেই ভালো আছেন। তো বন্ধুরা অনেকেই আমাকে sfappstore.wapkiz.com এই সাইটের কোড গুলো শেয়ার করার জন্য অনুরোধ করেছে। তো বন্ধুরা আজ থেকে আমি sfappstore.wapkiz.com এর কোড গুলো সিরিজ আকারে শেয়ার করবো। তো আজকে সিরিজের প্রথম পোস্টে সাইটের CSS, মেটা হেডার, হেডার, এবং ফুটারের কোড শেয়ার করবো। তো চলুন শুরু করা যাক।


প্রথমেই আমাদের প্রয়োজনীয় পেজ গুলো তৈরি করতে হবে। পেজ গুলো তৈরি করার জন্য Panel >> Page এ গিয়ে একটি একটি করে নিচের পেজ গুলো তৈরি করুন।

  • search
  • category
  • download
  • upload
  • profile
  • edit-profile
  • user
  • admin



CSS

সাইট ডিজাইনের জন্য প্রথম প্রয়োজন CSS। CSS প্রথমে না বসিয়ে অন্য কোড বসালে সাইটে ডিজাইন আসবে না। তাই আমরা প্রথমে CSS কোড সাইটে বসাবো। তো নিচ থেকে কোড কপি করে আপনার সাইটের Panel >> CSS Theme >> Edit Full CSS এ গিয়ে পেস্ট করে দিন। আর যারা বাটন ফোন দিয়ে এখান থেকে কপি করতে পারবেন না তারা এই লিঙ্ক থেকে কোড কপি অথবা ডাউনলোড করুন।

body {
  text-transform:capitalize;
  background:#001a00;
  color:#00e6e6;
  margin:0px;
  padding:1px;
  border-radius:5px;
  }

* {
  box-sizing:border-box;
  overflow:hidden;
  }

.header {
  background:#none;
  padding:0px;
  }

.header table {
  color:#ff0;
  border-radius:0px;
  margin-top:5px;
  background-color:#00e6e6;
  width:100%;
  }

.header table tr {
  background:#none;
  color:#001a00;
  padding:0px;
  margin:0px;
  width:100%;
  }

.header table th {
  background-color:#092525;
  background-image:url('data:image/gif;base64,R0lGODlhAQARAMQAAAALDQAHCQAEBgASFwAaIQAfJgA9TABAUAAzQAAwOwAOEgAWHAA6SQAnMQA3RQAjLAAsNgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAABABEAAAUP4GEwDpJAzVMQy6AAgRACADs=');
  background-repeat:repeat-x;
  color:#001a00;
  padding:0px;
  margin:0px;
  width:33%;
  text-align:center;
  border-radius:8px;
  }

.header .logo {
  position:relative;
  }

.header .logo_img {
  width:100%;
  height:100px;
  padding:0px;
  margin:0px;
  display:block;
  border-radius:5px;
  border:0px solid #00e6e6;
  }

.search table{
  border-radius:5px;
  padding:0px;
  margin:5px 0px 0px 0px;
  background:#00e6e6;
  width:100%;
  }

.search table tr{
  border-radius:0px;
  padding:0px;
  margin:0 0 0 3px;
  background:#none;
  width:100%;
  }

.search table td{
  border-radius:5px;
  padding:0px;
  margin:0px;
  background:#none;
  }

.search .text {
  background:#dff;
  border-radius:5px;
  border: 1px solid #00e6e6;
  color:#000;
  padding:6px 0px;
  margin:0px 80px 0px 0px;
  size:small; width:100%;
  }

.search .submit {
  background:#001a00;
  border-radius:5px;
  border:1px solid #00e6e6;
  box-shadow:1px 1px 3px #000;
  padding:6px; margin:0px 0px 0px 3px;
  color: #00e6e6;
  font-weight:bold;
  width:75px;
  }

.select select {
  color:#00e6e6;
  padding:6px;
  background:#4d79ff;
  border-radius:5px;
  border:3px solid #00e6e6;
  width:100%;
  font-weight:bold;
  outline:none;
  margin:5px 0px 0px 0px;
  }

.page_title {
  padding:10px 0px 0px 0px;
  margin:0px;
  position:absolute;
  top:10px;
  left:0px;
  color:#fff;
  font-size:200%;
  display:block;
  width:100%;
  text-shadow:1px 1px 10px #000;
  text-align:center;
}

h2 {
  color:#001a00;
  text-align:center;
  background-color:#00b3b;
  background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABdwAAAAoCAYAAADkDjjMAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAFtUlEQVR4Xu3dQW7iQBAFUGwKuMyccpZzY0AxYy+iOC0ig5ooVdFjlSZ28/3KsGi1ysOfv/9uOy8CBAgQIECAAAECBAgQIECAAAECBAgQIECgSyDG47FrAicTIECAAAECBAgQIECAAAECBAgQIECAAAECu12MBwvubgQCBAgQIECAAAECBAgQIECAAAECBAgQINArEMNqh/swz/beX2b99/Ihy/j9tdWD5t65W+dsXcgjc7bHbM35Xf/fyrG2/K4M5t0WWO7J9r5+Zrx8Qu8cvefL8FHnXstXn//Tten9zd3+BjmCAAECBAgQIECAAAECBAgQIECgFYjx9HmH+3rB8auF4a/eX0/eHtOO2yCPjNs52vEyx733Hpn71cdkyfHq6/pN87U1enZ87357do7e42X4uCN7LV99/k/Xpr2e3/TddS0ECBAgQIAAAQIECBAgQIAAgawCsT+csmaTiwABAgQIECBAgAABAgQIECBAgAABAgQIlBGIQQ/3MsUSlAABAgQIECBAgAABAgQIECBAgAABAgTyCsS+aSmTN6pkBAgQIECAAAECBAgQIECAAAECBAgQIEAgr0CMdrjnrY5kBAgQIECAAAECBAgQIECAAAECBAgQIFBGIMbj54emlkkuKAECBAgQIECAAAECBAgQIECAAAECBAgQSCQwL7h7aGqieohCgAABAgQIECBAgAABAgQIECBAgAABAkUFYrDDvWjpxCZAgAABAgQIECBAgAABAgQIECBAgACBTAKxt+CeqR6yECBAgAABAgQIECBAgAABAgQIECBAgEBRAT3cixZObAIECBAgQIAAAQIECBAgQIAAAQIECBDIJWDBPVc9pCFAgAABAgQIECBAgAABAgQIECBAgACBogIW3IsWTmwCBAgQIECAAAECBAgQIECAAAECBAgQyCUwL7ifciWShgABAgQIECBAgAABAgQIECBAgAABAgQIFBSI8XAsGFtkAgQIECBAgAABAgQIECBAgAABAgQIECCQS0BLmVz1kIYAAQIECBAgQIAAAQIECBAgQIAAAQIEigrE7TYVjS42AQIECBAgQIAAAQIECBAgQIAAAQIECBDIIxDT5ZonjSQECBAgQIAAAQIECBAgQIAAAQIECBAgQKCoQEzXS9HoYhMgQIAAAQIECBAgQIAAAQIECBAgQIAAgTwC8w73c540khAgQIAAAQIECBAgQIAAAQIECBAgQIAAgaICMZ3tcC9aO7EJECBAgAABAgQIECBAgAABAgQIECBAIJHA3FLGDvdE9RCFAAECBAgQIECAAAECBAgQIECAAAECBIoKeGhq0cKJTYAAAQIECBAgQIAAAQIECBAgQIAAAQK5BOJND/dcFZGGAAECBAgQIECAAAECBAgQIECAAAECBEoKxM2Ce8nCCU2AAAECBAgQIECAAAECBAgQIECAAAECuQS0lMlVD2kIECBAgAABAgQIECBAgAABAgQIECBAoKiAljJFCyc2AQIECBAgQIAAAQIECBAgQIAAAQIECOQSmFvKXHMlkoYAAQIECBAgQIAAAQIECBAgQIAAAQIECBQUmFvKXArGFpkAAQIECBAgQIAAAQIECBAgQIAAAQIECOQSiOlqwT1XSaQhQIAAAQIECBAgQIAAAQIECBAgQIAAgYoC8w73c8XcMhMgQIAAAQIECBAgQIAAAQIECBAgQIAAgVQCWsqkKocwBAgQIECAAAECBAgQIECAAAECBAgQIFBVwA73qpWTmwABAgQIECBAgAABAgQIECBAgAABAgRSCdjhnqocwhAgQIAAAQIECBAgQIAAAQIECBAgQIBAVYF489DUqrWTmwABAgQIECBAgAABAgQIECBAgAABAgQSCWgpk6gYohAgQIAAAQIECBAgQIAAAQIECBAgQIBAXQEtZerWTnICBAgQIECAAAECBAgQIECAAAECBAgQSCTwHwYneOpa8BzjAAAAAElFTkSuQmCC');
  background-size:cover;
  background-position:center;
  border-radius:5px;
  font-size:170%;
  font-weight:normal;
  padding:5px;
  margin:5px 0px 0px 0px;
  text-shadow: 1px 1px 3px #fff;
  }

.app_nam {
  color:#001a00;
  background:#none;
  margin:0px 0px 0px 0px;
  font-weight:bold;
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  }

.file table{
  text-transform:capitalize; 
  color:#000;
  font-size:normal;
  text-align:center;
  background:#008080;
  background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAACTCAYAAABPu3PBAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAA2ElEQVQoU2WQQRLDMAgDZfKcfrK3froJtSRDnGkOGWOJRRiv9ycDYyDGOBA4gieWUSepUOk7CfOnOxxTTZYj7rbqHUGozZpBlM3FM1kjezhAn0rNIOUvFZaw46sjO72hHdyZve8jrju8QgucsDqK7ED3C7FjrSBz9WJ+kZnzd11TuOYJeJRSQXX5zjJbYJlUz7KIYp6EBqBLqXneZPmUoGJk1qAkbyikUcJ/14wNr2UUQxSZ1XbSbEALbXGWbbgAtcK+fuWTqmWM3x6nLUy/VKH61bbHoWV+P7QexzfMhPVyAAAAAElFTkSuQmCC');
  background-repeat:repeat-x;
  background-position:center;
  font-size:normal;
  margin-top:5px;
  border-radius:5px;
  text-shadow: 1px 1px 3px #fff;
  box-shadow: 1px 1px 6px #000;
  font-width:bold;
  }

.file table tr {
  background:#none;
  width:100%;
  }

.file table td {
  padding:0px;
  background:#none;
  }

.relative {
  position: relative;
  }.file .flag {
  position: absolute;
  top: 0px;
  right: 0px; 
  color:#00e6e6;
  background:#001a00;
  padding:0px 2px;
  border:2px solid #00b3b3;
  text-shadow:none;
  font-weight:bold;
}

.file .flag1 {
  position: absolute;
  top: 0px;
  left: 0px; 
  color:#00e6e6;
  background:#001a00;
  padding: 0px 2px;
  border:2px solid #00b3b3;
  text-shadow:none;
  font-weight:bold;
  }
  
  .file .flag2 {
  position: absolute;
  top: 0px;
  right: 0px; 
  color:#00e6e6;
  background:#001a00;
  padding:0px 2px;
  border-radius:50%;
  border:2px solid #00b3b3;
  text-shadow: none;
  font-size:normal;
  }

.see_all {
  color:#001a00;
  text-decoration:none;
  background:#00b3b3;
  background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAoCAYAAAC7HLUcAAAACXBIWXMAAA7EAAAOxAGVKw4bAAABmElEQVR4Xu3bUW6DMBCEYQwLXCanzGNuDAg7PgA8gCYRGv99pNU2820tr+M0vd6f0vGFAAKHAtFP0+E3eIgAAl0X/cgC4Q8BgTOBSDd2kHRW7eQ5M9wJDI8fLxD9/Psd5OqCerwaL7AZgRjGuZmwBEXgqkAkziBXzfj5hgRi+MOI1ZAnUc0EeBfLrKHE0QpwD6L1pJqZQF0gHNLNekococCtexDh76cUAo8WiOHGReGjE/HiEBAKcAYRYlLKT4AF4tdTEgkFWCBCTEr5CfAull9PSSQU4KJQiEkpPwFGLL+ekkgoEKVkYTlKIeAlEHndvBKRBgGhQORtFZajFAJeAnUHWbwSkQYBoUDkhR1E6EkpM4E6YrGDmPWUOEIBDulCTEr5CcTOGcSvqySSCURhgcgwKeQnwIjl11MSCQUYsYSYlPITqCMWN+l+bSWRSqCOWNyDqDCp4yfAR038ekoioQAfNRFiUspPgBHLr6ckEgqwgwgxKeUnwA7i11MSCQVi5/9BhJyUchNgxHLrKHmkAoxYUk6KuQl8AV8CQrTjnzooAAAAAElFTkSuQmCC');
  background-size:cover;
  background-position:center;
  padding:5px;
  margin:5px 0px 0px 0px;
  font-size:170%;
  font-weight:normal;
  display:inline-block;
  border-radius:4px;
  text-shadow:1px 1px 3px #fff;
  box-shadow:2px 2px 3px #000;
  transition:all 0.5s;
  clear:right;
  }

.align_right {
  text-align:right;
  }

.paging {
  clear:both;margin:5px 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 5px;
  margin:0 4px 0 0;
  }

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

.paging span {
  font-weight:700;
  }

.info_top {
  color:#00e6e6;
  background-color:#000406;
  background-image:url('data:image/gif;base64,R0lGODlhAQARAMQAAAALDQAHCQAEBgASFwAaIQAfJgA9TABAUAAzQAAwOwAOEgAWHAA6SQAnMQA3RQAjLAAsNgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAABABEAAAUP4GEwDpJAzVMQy6AAgRACADs=');
  background-repeat:repeat-x;
  padding:3px;
  margin:5px 0 0 0;
  border:1px solid #00e6e6;
  }

.info {
  color:#00e6e6;
  background-color:#000406;
  background-image:url('data:image/gif;base64,R0lGODlhAQARAMQAAAALDQAHCQAEBgASFwAaIQAfJgA9TABAUAAzQAAwOwAOEgAWHAA6SQAnMQA3RQAjLAAsNgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAABABEAAAUP4GEwDpJAzVMQy6AAgRACADs='); 
  background-repeat:repeat-x;
  padding:3px; 
  margin:0px;
  border:1px solid #00e6e6;
  overflow:hidden;
  max-height:23px;
  }

.download {
  color:#09f;
  background:#ccc;
  margin:5px 0px 0px 0px;
  padding:5px;
  text-align:center;
  font-width:bold;
  display:block;
  border:2px solid #4775d1;
  }

.contact {
  color:#fff;
  background:rgba(0, 26, 0, 0.3);
  margin:0px 5px 0px 0px;
  padding:1px;
  text-align:left;
  font-width:bold;
  display:block;
  }

.menu {
  background: #008080;
  color: white;
  padding: 4px 0px;
  margin:5px 0px 0px 0px;
  border-bottom: 3px solid #afafaf;
  text-shadow:none;
  }

.menu table {
  width:100%;
  background:#none;
  }

.menu table tr {
  width:100%;
  background:#none;
  }

.menu table td {
  width:50%;
  background:#none;
  }

.sms_menu {
  background: #ebebeb;
  color:#333;
  padding:0px;
  border:1px solid #dfdfdf;
  font-size:normal;
  border-radius: 0px 0px 0px 0px;
  }
  
  .edit_text input[type=text] {
  background:#4d79ff;
  border: 1px solid #ccc;
  box-shadow:1px 1px 3px #000;
  color:#00e6e6;
  padding:6px 0px;
  margin:0px 0px 5px 0px;
  size:small; width:100%;
  }
  
  .edit_text input[type=textarea] {
  background:#4d79ff;
  border: 1px solid #ccc;
  box-shadow:1px 1px 3px #000;
  color:#00e6e6;
  padding:6px;
  margin:5px 0px 0px 0px;
  size:small;
  width:100%;
  height:100px;
  }

.edit_text select {
  color:#00e6e6;
  padding:6px;
  background:#4d79ff;
  border:1px solid #ccc;
  width:100%;
  font-weight:bold;
  box-shadow:1px 1px 3px #000;
  outline:none;
  margin:5px 0px 0px 0px;
  }

.edit_image input {
  background:#fff;
  border: 2px solid #ccc;
  box-shadow:1px 1px 3px #000;
  color:#000;
  padding:5px;
  margin:5px 0px 0px 0px;
  size:small; width:100%;
  }
  
  .eidt_text input[type=submit], .edit_save input {
  background:#339966;
  border: 1px solid #00e6e6;
  box-shadow:1px 1px 3px #000;
  color:#fff;
  padding:6px;
  margin:5px 0px 0px 0px;
  size:small;
  width:100%;
  }

.notice {
  color:#001a00;
  background:#008080;
  width:auto;
  padding:5px;
  margin:0px;
  text-align:justify;
  border-radius: 0px 0px 10px 10px;
  }

.notice table {
  width:100%;
  background:#none;
  }

.notice table tr {
  width:100%;
  background:#none;
  }

.notice table td {
  width:50%;
  background:#none;
  }

.ads {
  padding: 3px;
  text-align: center;
  color:#001a00;
  }

.ads img {
  width:100%;
  max-height:50px;
 }
 
 a {
  color:#00e5e5;
  text-decoration:none;
  }i {
  font-size:normal!important;
}

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

}

select {
  color:#00e6e6;
  padding:2px;
  background:#4d79ff;
  border:1px solid #ccc;
  box-shadow:1px 1px 3px #000;
  outline:none;
  margin:0px;
  }

input {
  color:#00e6e6;
  padding:2px;
  background:#4d79ff;
  border:1px solid #ccc;
  box-shadow:1px 1px 3px #000;
  outline:none;
  margin:0px;
  }

.about p {
  font-size:200%;
  position:absolute;
  top:10px;
  left:10px;
  font-width:bolt;
  color:#001a00;
  text-shadow:2px 2px 3px #555;
  width:96%;
  }

.about a {
  color:#00e6e6;
  background:#001a00;
  padding:0px 10px;
  margin:0px;
  border-radius:8px;
  border:2px solid #00e6e6;
  }

.about span {
  color:#fff;
  background:#001a00;
  padding:0px 10px;
  margin:0px;
  border-radius:8px;
  border:2px solid #00e6e6;
  }

.footer {
  color:#00e6e6;
  background-color:#none;
  padding:0px;
  border-top:0px solid #ff66ff;
  }

.footer .cat {
  color:#001a00;
  background-color:#092525;
  background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAaCAIAAAD5ZqGGAAAAGklEQVQImWMIufmF6e/PH3jxP3SxX0SoQcUAMyRLlWcKm4QAAAAASUVORK5CYII=');
  background-repeat:repeat-x;
  padding:3px;
  margin:5px 0 0 0;
  text-shadow:1px 1px 1px #fff;
  border:1px solid #54d9f4;
 }

.footer table {
  color:#00e6e6;
  border-radius:5px;
  margin-top:5px;
  text-align:center;
  background-color:#00e6e6;
  width:100%;
  }

.footer table tr {
  background:#none;
  width:100%;
  }

.footer table th {
  background-color:#000406;
  background-image:url('data:image/gif;base64,R0lGODlhAQARAMQAAAALDQAHCQAEBgASFwAaIQAfJgA9TABAUAAzQAAwOwAOEgAWHAA6SQAnMQA3RQAjLAAsNgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAABABEAAAUP4GEwDpJAzVMQy6AAgRACADs=');
  background-repeat:repeat-x;
  padding:0px;
  width:50%;
  border-radius:8px;
  }

.footer table th div {
  padding:3px;
  }

.footer .nev table th {
  background-color:#000406;
  background-image:url('data:image/gif;base64,R0lGODlhAQARAMQAAAALDQAHCQAEBgASFwAaIQAfJgA9TABAUAAzQAAwOwAOEgAWHAA6SQAnMQA3RQAjLAAsNgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAABABEAAAUP4GEwDpJAzVMQy6AAgRACADs=');
  background-repeat:repeat-x;
  padding:0px;
  font-size:25px;
  width:25%;
  }

.overflow {
  width:100%;
  overflow:scroll;
  margin:0px;
  }

@media only screen and (min-width: 315px) {
body {
  padding:0px 15px;
  border:0px solid #ff0;
  margin:0px;
  }

}

@media only screen and (min-width: 315px) {
body {
  padding:0px 15px;
  border:0px solid #ff0;
  margin:0px;
  }

.file table tr td{
  padding:4px;
  }

}


Meta Header

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

	
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="shortcut icon" href="http://sfappstore.yn.lt/icon/Folder-Download-icon.png">
	<link rel="stylesheet" href="/style.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<meta name="description" content="SfAppStore is a Java app store. You can download heare the best Java Apps, Games and eBook, to your java mobile phones.">
	<meta property="og:type" content="website"/> <meta property="og:title" content="SfAppStore | Download best Java Apps.">
	<div id="header">


Header

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

<div class="header">
	<a href="/index.html">
		<div class="logo" align="center">
			<img src="http://sfappstore.yn.lt/icon/Sf_Logo1.png" alt="" class="logo_img">
		</div>
	</a>
	<div class="search">
		<form action="/site-search.html" method="get">
			<table>
				<tbody>
					<tr>
						<td width="100%">
							<input class="text" type="text" name="to-search" placeholder="Type a keyward" size="20%" maxlength="2048" value=":to-search:"/>
						</td>
						<td width="75px">
							<input class="submit" type="submit" value="Search"/>
						</td>
					</tr>
				</tbody>
			</table>
		</form>
	</div>
	<div class="select">
		<select name="hmenu"onchange="location=this.value">
			<option value="" selected >Select App Category</option>
		[fm_folder]d=all,o=u,l=50||
			<option value="/site-category.html?to-id=%id%&to-name=%name%.html" >%name%</option>
		[/fm_folder]
		</select>
	</div>
</div>


এবার নিচের কোড টা অথবা এই লিঙ্কের কোড টা কপি করে হেডার পেজে Panel >> HTML / Tag Code এ গিয়ে Visibility Access 'User' এবং Position 'Top' দিয়ে পেস্ট করে দিন।

<div class="header">
	<table>
		<tbody>
			<tr>
				<th width="33%">
					<a href="/">
						<div>Home</div>
					</a>
				</th>
				<th width="33%">
					<a href="/site-upload.html">
						<div>Upload</div>
					</a>
				</th>
				<th width="33%">
					<a href="/site-profile.html?to-user=:my_name:">
						<div>Profile</div>
					</a>
				</th>
			</tr>
		</tbody>
	</table>
</div>


এবার নিচের কোড টা অথবা এই লিঙ্কের কোড টা কপি করে হেডার পেজে Panel >> HTML / Tag Code এ গিয়ে Visibility  Access 'Guest' এবং Position 'Top' দিয়ে পেস্ট করে দিন।

<div class="header">
	<table>
		<tbody>
			<tr>
				<th>
					<a href="/">
						<div>home</div>
					</a>
				</th>
				<th>
					<a href="/site_login.html">
						<div>log in</div>
					</a>
				</th>
				<th>
					<a href="/site_reg.html">
						<div>sign up</div>
					</a>
				</th>
			</tr>
		</tbody>
	</table>
</div>


হেডারের কাজ এখানেই শেষ।


Footer

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

<div class="footer">
	<h2>Important Links</h2>
	<a href="http://flamingtext.com"><div class="cat">» Online Logo Maker</div></a>
	<a href="http://base64-image.de"><div class="cat">» Base64 Image Encoder</div></a>
	<a href="http://banglatext.com/text2image.html"><div class="cat">» Text To Image</div></a>
	<a href="http://banglatext.com/uni2bijoy.html"><div class="cat">» Unicode To Bijoy Converter</div></a>
	<a href="http://banglatext.com/bangla-date-converter.html"><div class="cat">» Bangla Date Converter</div></a>
	<a href="http://webresizer.com/resizer"><div class="cat">» Online Image Resizer</div></a>
	<a href="http://screenshotmachine.com/website-screenshot-generator.php"><div class="cat">» Online Full Page Screenshot Taker</div></a>
	<div class="nev">
		<table>
			<tbody>
				<tr width="100%">
					<th><a href="javascript:history.back()"><div><i class="fa fa-arrow-left" style="font- size:40px;" ></i></div> </a> </th>
					<th> <a href="http://sfappstore.wapkiz.com"><div><i class="fa fa-home" style="font- size:40px;" ></i></div> </a> </th>
					<th> <a href="#header"><div> <i class="fa fa-arrow-up" style="font- size:40px;" ></i> </div></a> </th>
					<th> <a href="#"><div> <i class="fa fa-refresh" style="font- size:40px;" ></i> </div></a> </th>
				</tr>
			</tbody>
		</table>
	</div>
	<table>
		<tbody>
			<tr>
				<th style="width:50%; text-align:left;"><a href="/site-admin.html"><div>About Admin</div></a></th>
				<th style="width:50%; text-align:left;"><a href="http://sfappstore.wapkiz.com/site-11.html"><div>Contact Admin</div></a></th>
			</tr>
			<tr>
				<th style="width:50%; text-align:left;"><a href="https://www.trickjal.xyz"><div>Terms & Policy</div></a></th>
				<th style="width:50%; text-align:left;"><a href="/site-8.html"><div>Team</div></a></th>
			</tr>
			<tr>
				<th style="width:50%; text-align:left;"><a href="/site-10.html?to-blog=4"><div>Buy a Site</div></a></th>
				<th style="width:50%; text-align:left;"><a href="/site-5.html"><div>Notice</div></a></th>
			</tr>
		</tbody>
	</table>
</div>


তো বন্ধুরা এই ছিলো sfAppStore সিরিজের প্রথম পোস্ট। আগামী পোস্ট নিয়ে আসছি শীঘ্রই। ততক্ষণ সাইটের সাথেই থাকুন ভালো থাকুন সুস্থ থাকুন, ধন্যবাদ।

Post a Comment

0 Comments