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

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

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

শিখতে ভালোবাসি, আর ভালোবাসি শেখাতে। চেষ্টা করি নতুন কিছু সৃষ্টি করতে।
আপনার ব্লগ বা ওয়েবসাইডের জন্য জটিল ডিজাইনের Social Network Icon।

আমরা সবাই আমাদের ব্লগ বা ওয়েবসাইটকে অনেক সুন্দর করে সাজানোর চেস্টা করি,
নতুন কিছু আবিস্কার করার আশাকরি। আমরা প্রত্যেকে আমাদের ব্লগ বা সাইডে Social Network যুক্ত করে থাকি।
আমরা সেই
Social Network এর জন্য বিভিন্ন রকমের ডিজাইন করে থাকি, সেটা যদি হয় অন্য ধরনের ডিজাইনের তাহলে কেমন হবে?
স্যাম্পল দেখুন।

 

Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

যাই হোক,

চলুন ডিজাইনটা তৈরী করে ফেলি। তৈরী করতে যা যা করতে হবে –

প্রথমে আপনার কম্পিউটার এর নোটপ্যাড ওপেন করুন অতঃপর নিচের কোডটি 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>

 

টিউনারপেজের নতুন টিউন আপনাকে ইমেইল করব?
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting
Unlimited Web Hosting

একটি উত্তর ত্যাগ

Please enter your comment!
Please enter your name here

two + twelve =