Wapkiz Download Site Design (Part 1)(Demo+Css)

🌀হ্যালো বন্ধুরা, কেমন আছো সবাই🌷। আশা করি ভালো আছো🤩

🛡আজকে আমি দেখাবো কিভাবে Wapkiz মাধ্যমে প্রিমিয়াম ডাউনলোড সাইট বানাতে হয়।

🛡তার আগে দেখে নেই ডাউনলোড সাইট টি কেমন হবে 

🛡তাছাড়া সাইটে ডেমো আগে দেখে নেই।

DemoClick here

👊বেশি  কথা না বলে শুরু করে দিন 👇👇

আমরা সকলে জানি কিভাবে Wapkiz এর অ্যাকাউন্ট খুলতে হয় তাই আর আমি দেখালাম না 

আজকে আমি দেখাবো CSS code install করতে হয়।

▶প্রথমে আপনার ওয়েবসাইটের Panel Mode এ যান।

▶তারপর CSS Theme এ ক্লিক করুন

▶তারপর Edit full CSS এ ক্লিক করুন

▶তারপর খালি বক্সে নিচের দেওয়া CSS কোডটি পেস্ট করে Okতে ক্লিক করুন

body { margin: 0; padding: 0; color:#000; font-family: arial, sans-serif; } body *{ margin: 0; padding: 0; } a img,:link img,:visited img { border: none; } a { text-decoration:none; color:#222; } a:hover { text-decoration: none; } b{ font-weight:bold; } .tCenter { text-align:center; } .logo { background:url(bg.png) repeat-x #fff; text-align:center; } .search { background:#EDECEA; border: 1px solid #D7CCC5; padding: 5px; text-align:left; } .search_input, .search_submit { font-size: 14px; color: #666; font-weight: bold; border-radius: 5px; border: 1px solid #ccc; } .search_input { width: 200px; margin: 8px 0 0 10px; padding: 6px; } .search_submit { width: 65px; margin: 8px 0 8px 5px; padding: 6px 0 6px 0; cursor: pointer; } #mainDiv{ } hr{ background-color:#ccc; border:medium none; height:1px; margin:2px 0; padding:0;} h1, h2, h3{ color:#fff; background:#3CB371; font-size:18px; text-align:center; background: -moz-linear-gradient(top, #3CB371 0%, #4A9586 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3CB371), color-stop(100%,#4A9586)); background: -webkit-linear-gradient(top, #3CB371 0%, #4A9586 100%); font-size:130%; font-weight:normal; padding:5px; margin:0; text-shadow: 1px 1px 3px #555; } .randomFile h3{ text-align:left; } .f1 { background:#515151; color:#fff; font-size:120%; padding:5px; text-align:center; font-weight:bold; } .f1 a { color:#fff; } .hd{background:#eee;color:#0E71C6;font-size:small; font-weight:bolder; line-height:20px;padding:0;text-align:center;vertical-align:middle;} h2 a{ font-size:18px; color:#ffffff; } .clr { clear:both; } .absmiddle { vertical-align:middle; border:none; border-radius:10px; } .ct { margin-right:3px; vertical-align:middle; padding:1px; border:1px solid #999; } .odd, .even, .sl { vertical-align:middle; } .odd { background:#f5f5fa; } .even { background:#fff; } .description { background:#f5f5f5; color:#222; padding:5px; text-align:center; } .description a { text-decoration:underline; } .filedescription { background:#f5f5f5; padding: 5px 0; text-align:center; } .fl { } .fl td{ padding:7px 2px; border-bottom:1px solid #ccc; } .fl a{ vertical-align:middle; } .fl img{ border:1px solid #bbb; padding:1px; } .fl div{ display:table-cell; } .tblimg { width:65px; text-align:center; } .catRow div{ display:table-cell; } .catRow div img { padding-right:5px; } .link1{ color:#0E71C6; } .button { color:#086C8F; font-weight:bold; } .red { color:red;} .info { color:red; background:#fff; text-align:center; padding:2px; } p{ padding:2px 0; } table { width:100%; margin:auto;} .devider { height:5px;} .dtype { font-size:normal; padding:5px; text-align:center; } .fileName { font-weight:bold; } .fileName span{ color:#555; text-decoration:none;} .fileName img{ padding-right:3px;} .downLink {margin:1px 0; } .dwnLink { font-weight:bold; } .pgn { background:#EDECEA; border: 1px solid #D7CCC5; padding: 8px; text-align:center; padding:5px 0; font-size:18px;} .pgn form{ padding-top:5px; } .pgn a, .pgn span { padding:2px 5px; margin:0 1px; font-weight:bold; -moz-border-radius:5px; -webkit-border-radius:5px; font-size:18px;} .pgn a { border:1px solid #ccc; background:#f5f5f5; } .pgn div { padding-top:5px; } .pgn span,.pgn a:hover { border:1px solid #ccc; background:#ddd; color:#777;} img { vertical-align:middle; } .showimage { padding:5px; text-align:center;} a.top {color:#FF7F00; text-decoration:none; } .updates div { background:#FDFDFD; background: -moz-linear-gradient(top, #FDFDFD 0%, #EEEEEE 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FDFDFD), color-stop(100%,#EEEEEE)); background: -webkit-linear-gradient(top, #FDFDFD 0%, #EEEEEE 100%); border-bottom:1px solid #ccc; padding:10px; } .catRowHome, .catRow { border-bottom:1px solid #ccc; background:#FDFDFD; background: -moz-linear-gradient(top, #FDFDFD 0%, #EEEEEE 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FDFDFD), color-stop(100%,#EEEEEE)); background: -webkit-linear-gradient(top, #FDFDFD 0%, #EEEEEE 100%); } .catRow:hover, .catRowHome:hover { background:#EDEDED; background: -moz-linear-gradient(top, #EDEDED 0%, #DADADA 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EDEDED), color-stop(100%,#DADADA)); background: -webkit-linear-gradient(top, #EDEDED 0%, #DADADA 100%); } .catRow a, .catRowHome a { display:block; font-weight:bold; background:url(arrow.png) right center no-repeat; padding:9px; } .catRow a div span, .catRowHome a div span,{ font-size:x-small; color:#5a5; font-weight:normal; } .fl { border-bottom:1px solid #ccc; background:#FDFDFD; background: -moz-linear-gradient(top, #FDFDFD 0%, #EEEEEE 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FDFDFD), color-stop(100%,#EEEEEE)); background: -webkit-linear-gradient(top, #FDFDFD 0%, #EEEEEE 100%); } .fl:hover { background:#EDEDED; background: -moz-linear-gradient(top, #EDEDED 0%, #DADADA 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#EDEDED), color-stop(100%,#DADADA)); background: -webkit-linear-gradient(top, #EDEDED 0%, #DADADA 100%); } .fl:focus { background:#EDEDED; background: -moz-linear-gradient(top, #fbb757 0%, #ea8615 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fbb757), color-stop(100%,#ea8615)); background: -webkit-linear-gradient(top, #fbb757 0%, #ea8615 100%); } .fl span{ color:#CD3508; font-weight:normal; } .fl a{ display:block; padding:8px; } .fl a img{ margin-right:3px; border:none; border-radius:10px; } .fl a div div{ vertical-align:middle; display:table-cell; } .fl a div{ } .path{ padding:2px; margin:5px 0; font-weight:bold; } .path2{ padding:5px; margin:5px 0; font-weight:normal; } .error{ background:#FFEFEF; border:1px solid #f00; margin:5px; padding:5px; font-weight:bold; text-align:center; color:#f00; } .fshow { padding:3px; text-align:center; background:#fff; border-bottom:1px solid #ddd;} .thumbimg{ vertical-align:middle; border:none; border-radius:10px; } .db{ font-size:small; text-align:center; padding:5px;} .ad1 { background:#EDECEA; border: 1px solid #D7CCC5; padding: 8px; text-align:center; } .ad5{ background:#EEEEEE; border:1px solid #DDDDDD; padding:2px; text-align:center; } .fb { font-weight:bold; } .ftrLink{ background:#666666; background: -moz-linear-gradient(top, #000000 0%, #666666 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#000000), color-stop(100%,#666666)); background: -webkit-linear-gradient(top, #000000 0%, #666666 100%); color:#fff; padding:5px; text-align:center; font-weight:bold; text-shadow:1px 1px 3px #555; } .ftrLink a{ color:#fff; } .duration{position:relative;background-color:#ababab;font-size:70%;font-weight:bold;border-radius:.25em;padding:2px;} search{background:#f8f8f8;text-align:center;border-bottom:1px solid #ddd;padding:10px;margin-bottom:10px;} #searchtext{overflow:hidden;} .search input[type=text]{background::#3CB371;border:1px solid #ccc;color:#777;display:block;font-size:inherit;outline:0;width:100%;box-sizing:border-box;padding-left:18px;font-size:12px;border-radius:25px;margin:0;height:35px;-webkit-box-shadow:inset 1px 1px 5px -2px rgba(0,0,0,0.43);-moz-box-shadow:inset 1px 1px 5px -2px rgba(0,0,0,0.43);box-shadow:inset 1px 1px 5px -2px rgba(0,0,0,0.43); } .search input[type=submit]{background:#3CB371;display:block;float:right;text-align:center;width:10%;min-width:55px;box-sizing:border-box;height:35px;border:0;padding-top:0;margin-left:1%;border-radius:25px;color:#f2f2f2;font-weight:400;font-size:12px;border-bottom:2px solid #2e945d;-webkit-box-shadow:inset 0 -2px #2e945d;box-shadow:inset 0 -2px #2e945d;cursor:pointer;} sharebox{background:rgba(70,130,180,0.1);margin:7px;padding:3px;border-radius:30px;text-align:center;} .share_btn{display:inline-block;text-decoration:none;width:45px;height:45px;line-height: 45px;font-size:21px;border-radius:50%;text-align:center;vertical-align:middle;overflow:hidden;font-weight:bold;text-shadow:1px 1px 1px rgba(255, 255, 255, 0.66);box-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);margin:3px;} .share_btn .fa{line-height: 45px;} .share_btn:hover{box-shadow: 0 3px 3px rgba(0, 0, 0, 0.28);} .share_btn:active{transform:translateY(5px);} .shtw {color: #22b8ff;background-image: -webkit-linear-gradient(#aeecff 0%, #57c8ff 100%);background-image: linear-gradient(#aeecff 0%, #57c8ff 100%);} .shfb {color:#6183f3;background-image: -webkit-linear-gradient(#b5d3ff 0%, #6b8bff 100%);background-image: linear-gradient(#b5d3ff 0%, #6b8bff 100%);} .shmail{color:#ff6d82;background-image: -webkit-linear-gradient(#ffcfd7 0%, #ff7285 100%);background-image: linear-gradient(#ffcfd7 0%, #ff7285 100%);} .shwhatsapp{color:#60d245;background-image: -webkit-linear-gradient(#b9ffca 0%, #80e067 100%);background-image: linear-gradient(#b9ffca 0%, #80e067 100%);} .shpin{color:#ea4158;background-image: -webkit-linear-gradient(#ffa8a8 0%, #ff5d5d 100%);background-image: linear-gradient(#ffa8a8 0%, #ff5d5d 100%);} .shtg {color: #0077b3;background-image: -webkit-linear-gradient(#80d4ff 0%, #0088cc 100%);background-image: linear-gradient(#80d4ff 0%, #0088cc 100%);}

⚠পোষ্টটি অনেক বড় হয়ে যাচ্ছে তাই আজকে এখানেই শেষ। গত পর্বে দেখাবো কিভাবে হেডার এবং ফুটার যুক্ত করতে হয়।⚠

⚠কিছু কিছু বানান ভুলের জন্য আমি আন্তরিকভাবে দুঃখিত। আর যদি কোন কিছু জানার থাকে তাহলে নিচে কমেন্ট বক্সে কমেন্ট করুন। ⚠