«

»

এম কে এইচ তানভীর

আপনার ব্লগ বা ওয়েবসাইডের জন্য জটিল ডিজাইনের Cocial Network Icon।

আমরা সবাই আমাদের ব্লগ বা ওয়েবসাইটকে অনেক সুন্দর করে সাজানোর চেস্টা করি,
নতুন কিছু আবিস্কার করার আশাকরি। আমরা প্রত্যেকে আমাদের ব্লগ বা সাইডে 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>


এ সম্পর্কিত আরো কিছু টুইট:

HTML শিখুন HTML5 সহ (পার্ট-3) HTML Element
দুই ডলারের কমেই ডোমেইন নিবন্ধন কিংবা পরিবর্তনের সুযোগ
আপনার ওয়বেসাইটের জন্য Contact Form তৈরী করুন সহজেই
ফ্রী ফ্রী নিয়ে নিন ২৭৫০ ডলার মূল্যের একটি অসাধারন premium theme (ভাল লাগবেই)
ওয়ার্ডপ্রেস হুক - যেন এক যাদুর কাঠি
শীর্ষ ১০টি ওয়েব ডিজাইনার এবং ডেভেলপার টুল
Doller Buy, Sell &amp; Exchange BD Wallet – Home BITCOIN ক্রয় বিক্রয়ের একটি বিশ্বস্ত নাম Bdwalle...

মন্তব্য দিনঃ

comments

About the author

এম কে এইচ তানভীর

এম কে এইচ তানভীর

শিখতে ভালোবাসি, আর ভালোবাসি শেখাতে। চেষ্টা করি নতুন কিছু সৃষ্টি করতে।

Permanent link to this article: http://techtweets.com.bd/web-developing/mkhtanvirbd/33321

মন্তব্য করুন