BD WEB DESIGN BANGLA

ব্লগার এর জন্য CSS Button

বন্ধুরা আমার সালাম নিবেন অনেক দিন জাবত ব্লগ নিয়ে লিখি না তাই আজ বসে পড়লাম লিখার জন্য, ভাল লাগলে অবশ্যই বলবেন।

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

LIVE DEMO

এটিকে আপনার ব্লগে সেটাপ দিতে হবে যা যা করনীয়ঃ

টেমপ্লেট এর ব্যাকআপ নিয়ে নিন

তারপর নিচের মত করেনঃ

ব্লগার এ লগইন করুন
তারপর Template এ গিয়ে Edit HTML এ চলে যান
সেখানে যাওয়ার পর নিচের কোডটি খুজুন [খোজার জন্য Ctrl+F এর সাহায্য নিন]

তারপর নিচের কোড টি উপরের কোড এর আগে বসান

.button {
    font: 15px Calibri, Arial, sans-serif;
/* A semi-transparent text shadow */
    text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
/* Overriding the default underline styling of the links */
    text-decoration: none !important;
    white-space: nowrap;
    display: inline-block;
    vertical-align: baseline;
    position: relative;
    cursor: pointer;
    padding: 10px 20px;
    background-repeat: no-repeat;
/* The following two rules are fallbacks, in case
the browser does not support multiple backgrounds. */
    background-position: bottom left;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png');
/* Multiple backgrounds version. The background images
are defined individually in color classes */
    background-position: bottom left, top right, 0 0, 0 0;
    background-clip: border-box;
/* Applying a default border raidus of 8px */
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
/* A 1px highlight inside of the button */
    -moz-box-shadow: 0 0 1px #fff inset;
    -webkit-box-shadow: 0 0 1px #fff inset;
    box-shadow: 0 0 1px #fff inset;
/* Animating the background positions with CSS3 */
/* Currently works only in Safari/Chrome */
    -webkit-transition: background-position 1s;
    -moz-transition: background-position 1s;
    transition: background-position 1s;
}

.button:hover {
/* The first rule is a fallback, in case the browser
does not support multiple backgrounds
*/
    background-position: top left;
    background-position: top left, bottom right, 0 0, 0 0;
}

.button:active {
/* Moving the button 1px to the bottom when clicked */
    bottom: -1px;
}
/* The three buttons sizes */
.button.big {
    font-size: 30px;
}

.button.medium {
    font-size: 18px;
}

.button.small {
    font-size: 13px;
}
/* A more rounded button */
.button.rounded {
    -moz-border-radius: 4em;
    -webkit-border-radius: 4em;
    border-radius: 4em;
}
/* Defining four button colors */
/* BlueButton */
.blue.button {
    color: #0f4b6d !important;
    border: 1px solid #84acc3 !important;
/* A fallback background color */
    background-color: #48b5f2;
/* Specifying a version with gradients according to */
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'),
-moz-radial-gradient(    center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'),
-webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}

.blue.button:hover {
    background-color: #63c7fe;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'),
-moz-radial-gradient(    center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'),
-webkit-gradient(    radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}
/* Green Button */
.green.button {
    color: #345903 !important;
    border: 1px solid #96a37b !important;
    background-color: #79be1e;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}

.green.button:hover {
    background-color: #89d228;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}
/* Orange Button */
.orange.button {
    color: #693e0a !important;
    border: 1px solid #bea280 !important;
    background-color: #e38d27;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}

.orange.button:hover {
    background-color: #ec9732;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}

.gray.button {
    color: #525252 !important;
    border: 1px solid #a5a5a5 !important;
    background-color: #a9adb1;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}

.gray.button:hover {
    background-color: #b6bbc0;
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
    background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNs8TTcubzmlsAFv6Lr4zc4MIvqEJpg7GlMiRbQTZ0-H-XobROZK3P3W9Tcvs8kFHeIc7ZEUPPrcCSR0HjUt-JsQrP0YwM8x3L7uXwEkCwuWzA4IaU1Ky22dh846VCx_3F7yq2CCb89Fk/s1600/helperblogger-button_bg.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}

1.HTML For Big Button

2.HTML For Medium Button

3.HTML For Small Button

4.HTML For Small Rounded Buttons

এবার আপনি আপনার বাটন থেকে TEXT HERE পরিবর্তন করে আপনার TEXT টি লিখে দিন
না পারলে কমেন্ট করে জানাবেন হেল্প করব

Posted by sofiq 3:13 AM 0 comments

ব্লগার

JavaScript Image Slider ব্লগারের জন্য।

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

LIVE DEMO

এই স্লাইডারটি কি আপনার ব্লগে যুক্ত করতে চান? তাহলে নিচের নির্দেশনা অনুসারে এগিয়ে চলুন।

প্রথমেআপানর ব্লগে প্রবেশ করুন
তারপর আপনি নাক বরাবর নিচের দিক Layout এ চলে যান।
তারপর Add a Gadget এ ক্লিক করে HTML/JavaScript সিলেক্ট করে নিন।
তারপর নিচের কোডটি সিলেক্ট করে সেখানে paste করুন
তারপর শেষ কাজ, এবার সেভ করুন।

/* JavaScript Image Slider By http://www.projuktirkhela.blogspot.com/ */

#mcis {
 display: none;
}

#sliderFrame {
 position: relative;
 width: 500px;
 margin: 0 auto;
        border:5px solid #000;
}

#ribbon {
 width: 111px;
 height: 111px;
 position: absolute;
 top: -4px;
 left: -4px;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6ObX013HR0122wFEgb5dpMs6KozaXDq9oFNm-qRYeuq83TvvvlkxJRmhvW1IxS-k7XMzgiPOHhflN9Vp6oqDJ5nEHF5gOImTG4RVSHNwaxBG019qs2-8MXwudwUazu1Mkea4z2QaUxhA/s1600/helperblogger.com-ribbon.png) no-repeat;
 z-index: 7;
}

#slider {
 width: 500px;
 height: 218px;
 background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9oXMCIub3bSwTAsnN7KlBpKrDCUhUstZVcHC3ucG_JD2FXbzAAq7IhLhHaLKjtyrGUPX8Ao1RLfDzXWRU__0fif9453OJlhEjTJQ6ErdP2S-1ItcmZ3tzuQ_aBkYr6c99kkNsOt4vfd8/s1600/helperblogger.com-loading.gif) no-repeat 50% 50%;
 position: relative;
 margin: 0 auto;
 box-shadow: 0px 1px 5px #999999;
}

#slider img {
 position: absolute;
 border: none;
 display: none;
}

#slider a.imgLink {
 z-index: 2;
 display: none;
 position: absolute;
 top: 0px;
 left: 0px;
 border: 0;
 padding: 0;
 margin: 0;
 width: 100%;
 height: 100%;
}

div.mc-caption-bg, div.mc-caption-bg2 {
 position: absolute;
 width: 100%;
 height: auto;
 padding: 0;
 left: 0px;
 bottom: 0px;
 z-index: 3;
 overflow: hidden;
 font-size: 0;
}

div.mc-caption-bg {
 background-color: black;
}

div.mc-caption {
 font: bold 14px/20px Arial;
 color: #EEE;
 z-index: 4;
 padding: 10px 0;
 text-align: center;
}

div.mc-caption a {
 color: #FB0;
}

div.mc-caption a:hover {
 color: #DA0;
}

div.navBulletsWrapper {
 top: 250px;
 left: 190px;
 width: 150px;
 background: none;
 padding-left: 20px;
 position: relative;
 z-index: 5;
 cursor: pointer;
}

div.navBulletsWrapper div {
 width: 11px;
 height: 11px;
 background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMNwO-RAOOaAvz4Xhb4On2UnyToOx81EHvLVtQf7pl8mJfHWqQ_uoJSk2TFCSpBI_j-9LdWlmoYSlN7fVqnpgoQpoUeAZz22pD0orcstPewVTrjn05QvcqXtt4HqZG61LoUrLaWd6XqdQ/s1600/helperblogger.com-bullet.png) no-repeat 0 0;
 float: left;
 overflow: hidden;
 vertical-align: middle;
 cursor: pointer;
 margin-right: 11px;
 _position: relative;
}

div.navBulletsWrapper div.active {
 background-position: 0 -11px;
}

#slider {
 transform: translate3d(0,0,0);
 -ms-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0);
 -o-transform: translate3d(0,0,0);
 -webkit-transform: translate3d(0,0,0);
}
 </style>

স্লাইডের উচ্চতা ও প্রস্থ পরিবর্তন করার জন্য নিচের কোড গুলোর পরিবর্তন করে নিন

স্লাইডারের ছবি পরিবর্তন করার জন্য নিচের কোড গুলোর পরিবর্তন করে নিন।

ছবিতে লিংক দেওয়ার জন্য এই চিহ্নটি পরিবর্তন→ # করে নিন।
আমার এই পোস্টটি ভাল লাগলে অবশ্যই লাইক দিতে ভুলবেন না।

Posted by sofiq 2:56 AM 0 comments

ব্লগার

চমৎকার একটি ব্লগার Wiget

বন্ধুরা কেমন আছেন? অনেক দিন পর আসলাম। যাই হোক কথা বেশী বলবো না। আমি আজ নিয়ে আসলাম একটি Social Widget ব্লগার এর জন্য। নিচে এর LIVE DEMO দেখে নিন।

এটিকে আপনার করে নিতে হলে যা করনীয়

১. প্রথমই আপনার ব্লগে প্রবেশ করুন

২. তারপর আপনি সোজা Layout এ গিয়ে Add Gadget এ ক্লিক করে HTML/JavaScript টি Select করে নিন।

৩. তারপর নিচের কোডটি Select করে নিন

<style>
#wtss{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;}
#wtss a{text-decoration:none; font-family:trebuchet ms,sans-serif;}
#wtss li{position:relative; height:38px; cursor:pointer; padding: 0 !important;}
#wtss .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH-sHrLI_ug7CTWDoRAyvR-zupdHND-TsBSBXk0RzmfydjfOPUzun3KR6M5wecUlmvwpjcThZDm8Hrv03d7bb7JpxO9kEU1NgqPHg1JQkOqNnTqt0ReAJsMiqn8feTrxmJf2v_QoXO5jM/s800/sprites.png) no-repeat;  background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px;  box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap;  line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#wtss li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt);  line-height:32px;}
#wtss .icon{overflow:hidden; color:#fafafa;}
#wtss .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;}
#wtss .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;}
#wtss .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;}
#wtss .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;}
#wtss .rss{ width:32px;  height:32px;  background-color:rgba(255,102,0,0.42); background-position:-3px -126px;}
#wtss li:hover .icon,
.touch #wtss li .icon{width:210px;}
.touch #wtss li .facebook, #wtss li:hover .facebook{background-color:rgba(59,89,152,1);}
.touch #wtss li .twitter, #wtss li:hover .twitter{background-color:rgba(64,153,255,1);}
.touch #wtss li .googleplus, #wtss li:hover .googleplus{background-color:rgba(228,69,36,1);}
.touch #wtss li .pinterest, #wtss li:hover .pinterest{background-color:rgba(174,45,39,1);}
.touch #wtss li .rss, #wtss li:hover .rss{background-color:rgba(255,102,0,1);}
</style>

<ul id="wtss">
<li data-alt="Follow me on Facebook"><a class="icon facebook" href="http://www.facebook.com/Easiblu">আমাকে Follow করুন</a></li>
<li data-alt="Follow me on Twitter"><a class="icon twitter" href="http://www.twitter.com/EAShiblu">আমাকে Follow করুন</a></li>
<li data-alt="Follow me on Google+"><a class="icon googleplus" href="http://plus.google.com/103593204016755715965">আমাকে Follow করুন</a></li>
<li data-alt="Subscribe with RSS"><a class="icon rss" href="http://feeds.feedburner.com/projuktirkhela">Subscribe করুন RSS দিয়ে</a></li>
</ul>

·        ফেসবুক এর জন্য EASiblu নামটি পালটিয়ে আপনার Username দিয়ে নিন

·        টুইটার এর জন্য EAShiblu  নামটি পালটিয়ে আপনার Username দিয়ে নিন

·        গুগল+ এর জন্য 103593204016755715965  নামটি পালটিয়ে আপনার Username দিয়ে নিন

·        আপনার FeedBurner পাল্টান http://feeds.feedburner.com/projuktirkhela

৪. এবার আপনি SAV E দিয়ে দিন।

ভাল লাগলে বা সমস্যা হলে মন্তব্য করে জানাবেন।

ফেসবুক এ লাইক দিন লাইভ আপডেট পাওয়ার জন্য।

Posted by sofiq 2:51 AM 1 comments

Blogger, Webdesign

Add An Awesome Fixed Position Slide Open Heart Bookmarking Gadget To Blogger

সালাম ও বিজয় মাসের শুভেচ্ছা জানিয়ে আজকের ডিজাইন কে নিয়ে আলোচনা শুরু করি । ধাপ -১ প্রথমে Blogger sing করুন>এরপর Template এ ক্লিক করুন> Edit Html এ ক্লিক করুন> এরপর Expand Widget টিক R দিন

এবার Ctrl+F চেপে </head> লেখাটি খুজে বের করুন।

এবং </head> এর ঠিক পূর্বে নিচের কোড স্থাপন করুন।

<script src='http://w.sharethis.com/gallery/shareegg/shareegg.js' type='text/javascript'/>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({publisher: "ur-98d377f-bdd3-9ad1-fbe5-2a678f0a60ee", onhover:false}); </script>
<link href='http://w.sharethis.com/gallery/shareegg/shareegg.css' media='screen' rel='stylesheet' type='text/css'/>

ধাপ-২ এবার Ctrl+F চেপে </body> লেখাটি খুজে বের করুন।

এবং </body> এর ঠিক পূর্বে নিচের কোড স্থাপন করুন।

<div style='position: fixed; bottom: 2%; left: 2%;'>
<div class='shareEgg' id='shareThisShareHeart'/>
</div>
<script type='text/javascript'>stlib.shareEgg.createEgg('shareThisShareHeart', ['facebook','twitter','pinterest','linkedin','stumbleupon','email','sharethis'], {title:' <data:blog.pageTitle/>',url:'<data:blog.url/>',theme:'shareheart'});</script><a href="http://www.spiceupyourblog.com/">Blogger Wordpress Gadgets</a>

এবার সেভ করুন।

লাইভ ডোমো দেখুন।

Posted by sofiq 2:51 AM 0 comments

Blogger

আপনার ব্লগে যুক্ত করুন স্টাইলিশ Facebook Like Box

আসসালামু আলাইকুম। আশা করি টেকটিউন্সের সাথে কোন না কোন ভাবে যুক্ত সকল ব্যক্তিই ভাল আছেন। আজ আপনাদের আমি দেখাব কিভাবে একটি সাধারণ ফেসবুক লাইক বক্স উইডগেটকে অসাধারণ করা যায়। যে উইডগেট টি আপনারা আপনাদের ব্লগে বা ওয়েব সাইটে যুক্ত করতে পারবেন।

Live Demo

প্রথম পর্যায়ঃ

তাহলে শুরু করা যাক। প্রথমেই আপনাকে আপনার কাংখিত ফেসবুক পেজটির ID যোগার করতে হবে। এজন্য আপনাকে যেতে হবেএই লিঙ্ক

এই লিঙ্কে গেলে আপনি ওয়েব পেজে এই বক্সটি দেখতে পাবেন । এবার এই বাক্সটির Enter Your Facebook Username এর জায়গায় আপনার ফেসবুক পেজের Username লিখুন। এরপর Get Details এ ক্লিক করুন। এবার নতুন একটি উইন্ডো খুলবে যেখানে আপনি আপনার ফেসবুক পেজের ID পাবেন।

দ্বিতীয় পর্যায়ঃ

আপনার ব্লগার একাউন্টে লগ ইন করুন।
এবার Layout Option সিলেক্ট করুন।
এবার Add A Gadget এ ক্লিক করুন।নতুন একটি উইন্ডো আসবে।
এবার Html/JavaScript এ ক্লিক করুন।
এবার নিচের কোড টূকু কপি করে Content Box এ পেস্ট করুনঃ

1

<iframe src="<a href="http://www.connect.facebook.com/widgets/fan.php?channel_url=http://probloggingtools.com/?fbc_channel=2&id=285964218143147&name=PBT&width=297&connections=10&stream=0&logobar=0&css=http://probloggingtools.googlecode.com/files/facebook-like-Box-style.css&quot" onclick="javascript:_gaq.push(['_trackEvent','outbound-article','']);" rel="nofollow">http://www.connect.facebook.com/widgets/fan.php?channel_url=http://probloggingtools.com/?fbc_channel=2&id=285964218143147&name=PBT&width=297&connections=10&stream=0&logobar=0&css=http://probloggingtools.googlecode.com/files/facebook-like-Box-style.css&quot</a>; height="300" frameborder="0"> </iframe>