BD WEB DESIGN BANGLA: ব্লগার

Showing posts with label ব্লগার. Show all posts

ব্লগার এর জন্য 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, ওয়ার্ডপ্রেস, ব্লগার

আপনার ব্লগে একটি এনিমেটেড লেখা যুক্ত করুন দুনিয়ার সবচেয়ে সহজ পদ্ধতিতে

আজ আমি আপনাদের শিখাবো কিভাবে আপনার ব্লগে একটি চলন্ত লেখা যোগ করতে হয়। এটা খুব সহজ একটা কোড যেটি দিয়ে আপনি আপনার ব্লগে HTML উইজেট এ যোগ করে যেকোন লেখা বিগ্গাপন এবং নোটিস হিসেবে ইউজ করতে পারবেন।

আপনার ব্লগে একটি এনিমেটেড লেখা যুক্ত করতে আপনাকে নিচের কোড গুলি ইউজ করতে হবে:

লেখা গুলি বাম থেকে ডানে দেখাতে নিচের কোড টি ইউজ করুন

<marquee direction="left">আপনি যে লেখা গুলি এনিমেটেড করতে চান সেগুলি এই লেখার বদলে লিখুন....</marquee>

লেখা গুলি ডান থেকে বামে দেখাতে নিচের কোড টি ইউজ করুন

<marquee direction="right">আপনি যে লেখা গুলি এনিমেটেড করতে চান সেগুলি এই লেখার বদলে লিখুন....</marquee>

লেখা গুলি নিচ থেকে উপরে দেখাতে নিচের কোড টি ইউজ করুন

<marquee direction="up">আপনি যে লেখা গুলি এনিমেটেড করতে চান সেগুলি এই লেখার বদলে লিখুন....</marquee>

লেখা গুলি উপর থেকে নিচে দেখাতে নিচের কোড টি ইউজ করুন

<marquee direction="down">আপনি যে লেখা গুলি এনিমেটেড করতে চান সেগুলি এই লেখার বদলে লিখুন....</marquee>

Posted by sofiq 12:09 AM 0 comments

Blogger, ওয়ার্ডপ্রেস, ব্লগার

আপনার ব্লগে একটি এনিমেটেড লেখা যুক্ত করুন দুনিয়ার সবচেয়ে সহজ পদ্ধতিতে

লেখা গুলি বাম থেকে ডানে দেখাতে নিচের কোড টি ইউজ করুন

<marquee direction="left">আপনি যে লেখা গুলি এনিমেটেড করতে চান সেগুলি এই লেখার বদলে লিখুন....</marquee>

লেখা গুলি ডান থেকে বামে দেখাতে নিচের কোড টি ইউজ করুন

<marquee direction="right">আপনি যে লেখা গুলি এনিমেটেড করতে চান সেগুলি এই লেখার বদলে লিখুন....</marquee>

লেখা গুলি নিচ থেকে উপরে দেখাতে নিচের কোড টি ইউজ করুন

<marquee direction="up">আপনি যে লেখা গুলি এনিমেটেড করতে চান সেগুলি এই লেখার বদলে লিখুন....</marquee>

লেখা গুলি উপর থেকে নিচে দেখাতে নিচের কোড টি ইউজ করুন

<marquee direction="down">আপনি যে লেখা গুলি এনিমেটেড করতে চান সেগুলি এই লেখার বদলে লিখুন....</marquee>

Posted by sofiq 12:09 AM 0 comments

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

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

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

আপনার ব্লগে একটি এনিমেটেড লেখা যুক্ত করুন দুনিয়ার সবচেয়ে সহজ পদ্ধতিতে

আপনার ব্লগে একটি এনিমেটেড লেখা যুক্ত করুন দুনিয়ার সবচেয়ে সহজ পদ্ধতিতে

Total Pageviews

Test Footer 2

Recent Post

Popular post

Labels

Blog Archive

Taka Exchange Rate

Test Footer

Test Footer 1

Login