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

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

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

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

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

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

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

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

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

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

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

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

Posted by sofiq 12:02 AM 0 comments

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

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

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

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

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

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

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

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

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

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

Posted by sofiq 12:02 AM 0 comments

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

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

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

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

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

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

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

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

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

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

Posted by sofiq 12:00 AM 0 comments

Blogger, ব্লগার

ইমেজ জুম ইফেক্ট তৈরী করুন আপনার ব্লগে

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

এবং টিউটোরিয়ালটি ফলো করার আগে
১.আপনার ব্লগের টেম্পলেটটি (ড্যাশবোর্ড>লে আউট>এডিট এইচ টি এম এল> ডাউনলোড ফুল টেম্পলেট– চিত্র দ্রষ্টব্য) ডাউনলোড করে নিন।

২.এবার ব্লগের লে আউট থেকে এডিট এইচ টি এম এল এ যান। Expand Widget Templates এ মার্ক করুন (ডানপাশের উপরের দিকে)।

৩.CTRL+F চেপে

]]></b:skin>

লেখাটি খুজে বের করুন।

৪.

]]></b:skin>

এর ঠিক উপরে নিম্নোক্ত লেখাটি কপি করে পেস্ট করে দিন।

ul.thumb { float: left; list-style: none; margin: 0; padding: 10px; width: 360px; } ul.thumb li { margin: 0; padding: 5px; float: left; position: relative; /* Set the absolute positioning base coordinate */ width: 110px; height: 110px; } ul.thumb li img { width: 100px; height: 100px; /* Set the small thumbnail size */ -ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */ border: 1px solid #ddd; padding: 5px; background: #f0f0f0; position: absolute; left: 0; top: 0; } ul.thumb li img.hover { background:url (http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1o YHc/thumb_bg.png) no-repeat center center; /* Image used as background on hover effect border: none; /* Get rid of border on hover */ }

এখানে আমি আমার ব্লগের ব্যাকগ্রাউন্ডের কালারের সাথে সামাঞ্জস্য রেখে উপরোক্ত (বোল্ড দ্রষ্টব্য) ইমেজ পিকচারটি বেছে নিয়েছি। আপনারা আপনাদের ব্লগের ব্যাকগ্রাউন্ডের কালারের সাথে সামাঞ্জস্যপূর্ণ ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করবেন। আর সে রকম ইমেজ খুজে না পেলে টেম্পলেট থেকেই ব্লগের সাইডবারের ব্যাকগ্রাউন্ড কালারের পরিবর্তন আনতে পারেন। (কালার ম্যাচিং এর ব্যাপারে কারো কোন সমস্যা হলে কমেন্ট বক্সে রেখে যাবেন, সাধ্যমত সাহায্য করার চেষ্টা করব।)

আমি নিচের ইমেজটি ব্যবহার করেছি।

৫. আবার CTRL+F চেপে

</head>

লেখাটি খুজে বের করুন।

এবার

</head>

এর ঠিক উপরে নিম্নোক্ত কোড কপি করে পেস্ট করুন।

<script src='আপনার কোডের সোর্স' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ //Larger thumbnail preview $("ul.thumb li").hover(function() { $(this).css({'z-index' : '10'}); $(this).find('img').addClass("hover").stop() .animate({ marginTop: '-110px', marginLeft: '-110px', top: '50%', left: '50%', width: '174px', height: '174px', padding: '20px' }, 200); } , function() { $(this).css({'z-index' : '0'}); $(this).find('img').removeClass("hover").stop() .animate({ marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '100px', height: '100px', padding: '5px' }, 400); }); //Swap Image on Click $("ul.thumb li a").click(function() { var mainImage = $(this).attr("href"); //Find Image Name $("#main_view img").attr({ src: mainImage }); return false; }); }); </script>

খেয়াল করুন এখানে আমি কোডবুকের জাভা স্ক্রিপ্ট ব্যবহার করেছি । এবং সেটা samehood.js নামে আপলোড করেছি।
আপনাদের সুবিধার্থে আমি আমার কোড লিঙ্কটি দিয়ে দিচ্ছি।

http://www.mydatanest.com/files/kangalini/32285_8klpi/samehood.js

সুতরাং যারা স্ক্রিপ্টটি আপলোড করেননি তাদের জন্য উপরোক্ত কোডের বদলে নিচের টুকু ব্যবহার করতে হবে।

<script src='http://www.mydatanest.com/files/kangalini/32285_8klpi/samehood.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ //Larger thumbnail preview $("ul.thumb li").hover(function() { $(this).css({'z-index' : '10'}); $(this).find('img').addClass("hover").stop() .animate({ marginTop: '-110px', marginLeft: '-110px', top: '50%', left: '50%', width: '174px', height: '174px', padding: '20px' }, 200); } , function() { $(this).css({'z-index' : '0'}); $(this).find('img').removeClass("hover").stop() .animate({ marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '100px', height: '100px', padding: '5px' }, 400); });//Swap Image on Click $("ul.thumb li a").click(function() { var mainImage = $(this).attr("href"); //Find Image Name $("#main_view img").attr({ src: mainImage }); return false; }); }); </script>

৬. সেভ বাটনে ক্লিক করুন।
৭.এবার যথাক্রমে লে আউট>এড এ গেজেট >সিলেক্ট Html/Java script এ ক্লিক করুন।
প্রয়োজনীয় পরিবর্তন সাধনের সাথে নিচের কোড টুকু পেস্ট করুন।

<ul class="thumb"> <li><a href="আপনার ইউ আর এল ১"><img src="ইমেজ সোর্স লিঙ্ক" alt="ট্যাগ" /></a></li> <li><a href="আপনার ইউ আর এল ২"><img src="ইমেজ সোর্স লিঙ্ক" alt="ট্যাগ" /></a></li> <li><a href="আপনার ইউ আর এল ৩"><img src="ইমেজ সোর্স লিঙ্ক" alt="ট্যাগ" /></a></li> <li><a href="আপনার ইউ আর এল ৪"><img src="ইমেজ সোর্স লিঙ্ক" alt="ট্যাগ" /></a></li> <li><a href="আপনার ইউ আর এল ৫"><img src="ইমেজ সোর্স লিঙ্ক" alt="ট্যাগ" /></a></li> </ul>

]]></b:skin>

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

#sidebar { width:150px; float:left; padding:8px 0; margin:0; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

লক্ষ্য করুন এখানে ব্যাকগ্রাউন্ড কেন কালার সম্বন্ধে কিছুই বলা নেই। সেক্ষেত্রে উপরের কোডটিতে সামান্য পরিবর্তন আনুন।

#sidebar { width:150px; float:left; padding:8px 0; margin:0; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ background: #FFFFFF; }

এখানে আমার ব্লগের টেম্পলেটের ব্যাকগ্রাউন্ড সাদা বলে আমি background: #FFFFFF; মানে সাদা ব্যবহার করেছি। আপনারা আপনাদের পছন্দ মতো কালার বেছে নিন।
HTML কালার কোড

উপরের সাইডবার কোডটি এভাবেও থাকতে পারে।

#sidebar-wrapper { width: 220px; float: $endSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

সুতরাং সেক্ষেত্রে আপনার করণীয় হবে

এর স্থলে ।

#sidebar-wrapper { width: 220px; background: কালার কোড; padding:8px 0; float: $endSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

ব্যবহার করা।(প্রয়োজনীয় পরিবর্তন শেষ করে নিন)।
আর যদি কিছু সাইডবার নাই খুজে পান (একবারে নতুন ব্লগস্পট ব্যবহারকারী যারা) তাহলে খালি

.sidebar h2 { background-color:red,অথবা white(যেটা ইচ্ছা); }

লেখাটি

]]<>/b:skin<

এর উপরে জুড়ে দিন।

আপনার ব্লগে সাইডবারের সাইজ অনুসারে ইমেজের সাইজে কিভাবে পরিবর্তন আনবেনঃ
উপরের থাম্বনেইলের জুম হোভার সাইজ আমি ওয়াইডথ ১৭৪ পিক্সেল এবং হাইট ১৭৪ পিক্সেল অর্থাৎ অনেকটা বর্গাকার করে দিয়েছি।
আপনার ব্লগের সাইডবার বেশী চওড়া হলে আপনি লক্ষ্য রাখবেন ছবিটি যখন জুম হবে তখন তা যেন আপনার পুরো সাইডবারকে ঢেকে রাখে (সৌন্দর্য বৃদ্ধির জন্য)।
আর আপনার সাইডবার একদম সরু হলে, বিশেষত যারা দুই এর অধিক কলামের টেম্পলেট ব্যবহার করে থাকেন, তারা থাম্বনেইলের সাইজ (উপরে যেখানে হাইট এবং ওয়াইডথ ১০০ পিক্সেল দেয়া আছে) কমিয়ে নিবেন।

Posted by sofiq 11:50 PM 0 comments

Blogger, ব্লগার

ইমেজ জুম ইফেক্ট তৈরী করুন আপনার ব্লগে

৩.CTRL+F চেপে

]]></b:skin>

লেখাটি খুজে বের করুন।

৪.

]]></b:skin>

এর ঠিক উপরে নিম্নোক্ত লেখাটি কপি করে পেস্ট করে দিন।

ul.thumb { float: left; list-style: none; margin: 0; padding: 10px; width: 360px; } ul.thumb li { margin: 0; padding: 5px; float: left; position: relative; /* Set the absolute positioning base coordinate */ width: 110px; height: 110px; } ul.thumb li img { width: 100px; height: 100px; /* Set the small thumbnail size */ -ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */ border: 1px solid #ddd; padding: 5px; background: #f0f0f0; position: absolute; left: 0; top: 0; } ul.thumb li img.hover { background:url (http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1o YHc/thumb_bg.png) no-repeat center center; /* Image used as background on hover effect border: none; /* Get rid of border on hover */ }

আমি নিচের ইমেজটি ব্যবহার করেছি।

৫. আবার CTRL+F চেপে

</head>

লেখাটি খুজে বের করুন।

এবার

</head>

এর ঠিক উপরে নিম্নোক্ত কোড কপি করে পেস্ট করুন।

<script src='আপনার কোডের সোর্স' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ //Larger thumbnail preview $("ul.thumb li").hover(function() { $(this).css({'z-index' : '10'}); $(this).find('img').addClass("hover").stop() .animate({ marginTop: '-110px', marginLeft: '-110px', top: '50%', left: '50%', width: '174px', height: '174px', padding: '20px' }, 200); } , function() { $(this).css({'z-index' : '0'}); $(this).find('img').removeClass("hover").stop() .animate({ marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '100px', height: '100px', padding: '5px' }, 400); }); //Swap Image on Click $("ul.thumb li a").click(function() { var mainImage = $(this).attr("href"); //Find Image Name $("#main_view img").attr({ src: mainImage }); return false; }); }); </script>

http://www.mydatanest.com/files/kangalini/32285_8klpi/samehood.js

<script src='http://www.mydatanest.com/files/kangalini/32285_8klpi/samehood.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ //Larger thumbnail preview $("ul.thumb li").hover(function() { $(this).css({'z-index' : '10'}); $(this).find('img').addClass("hover").stop() .animate({ marginTop: '-110px', marginLeft: '-110px', top: '50%', left: '50%', width: '174px', height: '174px', padding: '20px' }, 200); } , function() { $(this).css({'z-index' : '0'}); $(this).find('img').removeClass("hover").stop() .animate({ marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '100px', height: '100px', padding: '5px' }, 400); });//Swap Image on Click $("ul.thumb li a").click(function() { var mainImage = $(this).attr("href"); //Find Image Name $("#main_view img").attr({ src: mainImage }); return false; }); }); </script>

<ul class="thumb"> <li><a href="আপনার ইউ আর এল ১"><img src="ইমেজ সোর্স লিঙ্ক" alt="ট্যাগ" /></a></li> <li><a href="আপনার ইউ আর এল ২"><img src="ইমেজ সোর্স লিঙ্ক" alt="ট্যাগ" /></a></li> <li><a href="আপনার ইউ আর এল ৩"><img src="ইমেজ সোর্স লিঙ্ক" alt="ট্যাগ" /></a></li> <li><a href="আপনার ইউ আর এল ৪"><img src="ইমেজ সোর্স লিঙ্ক" alt="ট্যাগ" /></a></li> <li><a href="আপনার ইউ আর এল ৫"><img src="ইমেজ সোর্স লিঙ্ক" alt="ট্যাগ" /></a></li> </ul>

]]></b:skin>

#sidebar { width:150px; float:left; padding:8px 0; margin:0; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

#sidebar { width:150px; float:left; padding:8px 0; margin:0; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ background: #FFFFFF; }

উপরের সাইডবার কোডটি এভাবেও থাকতে পারে।

#sidebar-wrapper { width: 220px; float: $endSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }

সুতরাং সেক্ষেত্রে আপনার করণীয় হবে

এর স্থলে ।

#sidebar-wrapper { width: 220px; background: কালার কোড; padding:8px 0; float: $endSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ }