«

»

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

আপনার ব্লগ বা ওয়েবসাইডের জন্য জটিল ডিজাইনের 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>


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

Background ও Header Image পরিবর্তন করা যায় এ রকম কয়েকটি WordPress Themes
HTML শিখুন HTML5 সহ [পর্ব-8] Frames, IFrames & Colors
সাইবার ওয়ার থেকে রক্ষা পেতে জেনে নিন ওয়ার্ডপ্রেস ব্লগ সিকিউরিটির কিছু প্রয়োজনীয় পদক্ষেপ।
মাইএসকিউএল MySQL part-10 (মাইএসকউএল এর Relational/Comparison Operator)
ওয়ার্ডপ্রেসের Blank থিম তৈরি (পর্ব-২)
সিএমএস রিভিউ:: ওয়ার্ডপ্রেস
আপনার ব্লগার ব্লগ এর জন্য একটি অসাধারণ পেজ নাম্বার WIDGET !!!

মন্তব্য দিনঃ

comments

About the author

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

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

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

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

মন্তব্য করুন