আমরা সবাই আমাদের ব্লগ বা ওয়েবসাইটকে অনেক সুন্দর করে সাজানোর চেস্টা করি,
নতুন কিছু আবিস্কার করার আশাকরি। আমরা প্রত্যেকে আমাদের ব্লগ বা সাইডে Social Network যুক্ত করে থাকি।
আমরা সেই Social Network এর জন্য বিভিন্ন রকমের ডিজাইন করে থাকি, সেটা যদি হয় অন্য ধরনের ডিজাইনের তাহলে কেমন হবে?
স্যাম্পল দেখুন।
যাই হোক,
চলুন ডিজাইনটা তৈরী করে ফেলি। তৈরী করতে যা যা করতে হবে -
প্রথমে আপনার কম্পিউটার এর নোটপ্যাড ওপেন করুন অতঃপর নিচের কোডটি Copy করে Past করুন,
তারপর Save As করুন index.html অথবা আপনারইচ্ছা.html এই নামে। এরপর সেই HTML ফাইল টি ওপেন করুন।
আর অবশ্যই কিছু জানার থাকলে বা নাবুঝলে Comments করবেন।
"আর একটি কথাঃ
আপনার একটি Like বা Comment আমাকে আনেক বেশী উৎসাহ জোগাবে আপনাকে নতুন কিছু শেখানোর।♥♥"
আমার ওয়েব ডিজাইন পেইজ।
কোডটিঃ
<!DOCTYPE html>
<head>
<title>facebook.com/WebsiteDevelop</title>
<style id="page-skin-1" type="text/css">
<!--
#sidebar-wrapper {
width: 310px;
padding: 0 5px 10px 0;
float: right;
word-wrap: break-word;
overflow: hidden;
}
h2 {
font-size:140%;
padding:4px 0 0px 3px;
margin: 0 0 2px 0;
color: #444;
font-weight: 800;
}
.bub{
text-decoration:none;
text-align:center;
position:absolute;
top:200px;
left:200px;
width:60px;
height:60px;
background-color:#33CCFF;
border-radius:50px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
font-family: Calibri, Helvetica, sans-serif;
font-size:130%;font-weight:bold;
line-height:1.8em;
color:#FFf;
}
.bub:hover{
top:130px; left:130px; width:200px; height:200px; border-radius:400px;
-moz-border-radius: 400px;
-webkit-border-radius: 400px;
-webkit-transition: ease 1s;
-moz-transition: ease 1s;
z-index:10;
}
.bub i{
top:12px; position:relative; font-size:90%; text-transform:none;
}
.bub span{
display:none;
position:relative;
top:80px;
text-decoration:none;
}
.bub:hover span{
display:block;
}
--></style>
<script type="text/javascript">
if (window.jstiming) window.jstiming.load.tick('headEnd');
</script>
</head>
<body>
<div id="sidebar-wrapper">
<div>
<a href="http://twitter.com/YOUR_USERNAME">
<i>Twitter</i>
<span>Follow me<br>on twitter</span>
</a>
<a href="http://facebook.com/YOUR_USERNAME" style="margin-left: 50px; background-color: rgb(59, 89, 152);">
<i>Facebook</i>
<span>Be Friend<br>on facebook</span>
</a>
<a href="http://feeds.feedburner.com/YOUR_USERNAME" style="margin-left: 100px; background-color: rgb(241, 94, 40);">
<i>RSS</i><span>Get Free Update<br>via RSS</span>
</a>
<a href="http://in.linkedin.com/YOUR-LINK" style="margin-left: 150px; background-color: rgb(96, 170, 206);">
<i>LinkedIn</i>
<span>Add me<br>to your Network</span>
</a>
</div>
</body>
</html>
আমি এম কে এইচ তানভীর। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 12 বছর 10 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 3 টি টিউন ও 34 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
শিখতে ভালোবাসি, আর ভালোবাসি শেখাতে। চেষ্টা করি নতুন কিছু সৃষ্টি করতে।
স্যাম্পল দেখান!