আপনার ব্লগার ব্লগে পোষ্টের মাঝে যুক্ত করুন লাইভ ডেমো বাটন (সিএসএস ও এইচটিএমএলসহ)

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

কিভাবে আপনার ব্লগে যুক্ত করবেন।

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

</b:skin>

• উপরের কোডটির পুর্বে ঠিক নিচের কোডটুকু কপি করে পেষ্ট করুন।

বুলু কালারের কোডটুকু দেখুন।

.nildemo {
width: 110px;
height: 25px;
background: #32A8FE;
border-radius:2px;
-moz-border-radius:2px ;
-webkit-border-radius:2px ;
text-align: center;
padding-top: 5px;
-webkit-transition:-webkit-box-shadow .5s ease;
-moz-transition:-webkit-box-shadow .5s ease;
-ms-transition:-webkit-box-shadow .5s ease;
-o-transition:-webkit-box-shadow .5s ease;
transition:-webkit-box-shadow .5s ease;
margin:auto;
}
.nildemo:hover {
background: #46AFFC;
-webkit-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-moz-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-ms-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
-o-box-shadow:0 0 0 9999px rgba(0,0,0,.4);
box-shadow:0 0 0 9999px rgba(0,0,0,.4);
position:relative;
z-index:99999;
}
.nildemo a {
color: #333;
text-decoration: none;
font: normal 16px Arial, Verdana;
text-align: center;
}

আপনি ব্লগ পোষ্ট কিভাবে যুক্ত করবেন।

<div class="nildemo"><a href="DEMO URL HERE" target="blank" rel="nofollow">&#9776; Live Demo</a></div>

কাষ্টমাইজ করবেন কিভাবে দেকুন।

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

এছাড়া আরো তিন ডেমোর ছবি যুক্ত করলাম দেকুন এখান থেকে ।

☆ প্রথম ছবি  ☆ দ্বিতীয় ছবি  ☆ তৃতীয় ছবি

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

তো বন্ধুরা আজ এই পর্যন্ত আ জ আগামীতে আপনাদের জন্য আরো নতুন কিছু নিয়ে হাজির হব। ততদিন পর্যন্ত আপনারা আমাদের সাথে থাকুন। আল্লাহ হাফেজ।

Read More

আপনার ব্লগার ব্লগ পোষ্টে HTML5 Icons যুক্ত করবেন। মেগা পোষ্ট না দেখলে মিস করবেন।

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

আর বন্ধুরা আপনারা সকলে নিচের চিত্রের মাধ্যমে অনেকগুলো HTML5 Icons কোড দেখতে পারেন। সেখান থেকে আপনার পছন্দের কোড ব্যবহার করতে পারবেন।

তো বন্ধুরা আপনার প্রিয় ব্লগে প্রতিটি পোষ্টের কিভাবে এই আইকন গুলো যুক্ত করবেন।

★ আপনার ব্লগের ড্যার্শবোডে প্রবেশ করুন।
★ তার নিউ পোষ্ট বাটনে ক্লিক করুন।
★ তার পরে HTML বাটনে ক্লিক করতে হবে।

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

Read More

আপনার ব্লগস্পট ব্লগে Accordain Table contents of sitemap যুক্ত করুন কোডিং দিয়ে!!!

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

আর লাইভ ডেমো দেখতে ভিজিট করুন আমার ব্লগে। Live Demo Here

কিভাবে আপনার ব্লগে Accordian Table Contents of Sitemap যুক্ত করবেন। 

• প্রখমে আপনার ব্লগে ড্যাশবোর্ডে প্রবেশ করবেন।
• দ্বিতীয়ত ড্যাশবোর্ডে প্রবেশ করার পর ড্রাপডাউন মেনু হতে Pages Select করবেন। 
• তার একটি পেজ ট্যাব Open হবে। 
• সেখান থেকে আপনাতে New A Pages Select করতে হবে। 
• New Pages Open হবে। 
• তার আপনারা দুইটি অপশন দেখতে পারে Compose or HTML
• সেখান থেকে আপনারা প্রথমে HTML Select করবেন।
• Title ঘরে Sitemap লিখবেন এবং Content ঘরে নিচের কোড টুকু কপি পেষ্ট করবেন। 
• সেভ করার আগে আপনাকে Compose mode ফিরে এসে পেজটি সেভ করতে হবে।

<link href="https://dl.dropboxusercontent.com/s/6ijo28ljl13wftf/theblogger911.blogspot.com.blogtoc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="https://dl.dropboxusercontent.com/s/ojis1x3thbp59a2/theblogger911.blogspot.com.blogtoc.js
"></script>
<script src="http://www.bloggingjogot.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="https://dl.dropboxusercontent.com/s/3oo804bhfkdejfi/theblogger911.blogspot.com.accordblogtoc.js" type="text/javascript"></script>

• উপরের কোডের ভিতরে লাল চিহিৃত স্থানে আপনার ব্লগ সাটের URL বসাবেন। 

ব্যস আপনার কাজ শেষ। আপনার আপনার সাইটের প্রবেশ করলে বুঝতে পারবেন যে আপনি সফল হয়েছেন। 

আপনাদের সকলকে সার্বিক সহযোগিতা কামনা করে এই ভোর রাতে পোষ্ট লেখা থেকে বিরত  নিলাম। আল্লাহ হাফেজ।

Read More

আপনার ব্লগস্পট ব্লগে ভিজিটর বাড়াতে যোগ করুন Bangla Online Radio FM

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

• কিভাবে আপনার ব্লগে যুক্ত করবেন।

  ১// প্রথমে আপনার ব্লগে ড্যাশর্বোড প্রবেশ করুন।
  ২// ড্যার্শবোড হতে লে আউট বাটন টি নির্বাচন করুন। 
  ৩// তার পরে লে আউট হতে এ্যাড বাটনে ক্লিক করার পরে পপ আউট বাটনটি ওপেন হবে। আর সেখান থেকে HTML/Javascript ক্লিক করুন। আর বিষয়টি  সম্পর্কে সম্পুর্ণ ধারণা পেতে নিচের চিত্র অনুসরণ করুন। 
  
  
  
  
  
  
  
  ৪// টাইটেল ঘর ফাকা রেখে কনটেন্ট ঘরে নিচের কোডগুলো কপি পেষ্ট করুন।
  
  
  

  <script language=javascript type="text/javascript" src="https://bdtechzone-dot-com.googlecode.com/files/bangla_OnliNE_radio.js"></script>

  
  ৫// এবার সেভ করে বের হয়ে আসুন। মুল সাইট হেত ঘুরে আসুন দেখুন কাজ হয়েছে।
  
  
  ☞  আমার এই পোস্ট আপনার ভাল বা কাজে আসলে শেয়ার করুন আপনার বন্ধুদের মধ্যে এবং কোন আসুবিধা হলে কমেন্ট করবেন আমি সাহায্য করার চেষ্টা করবো ।
  
  
      তাহলে আজাকের মতো এই পর্যন্ত আবারও দেখা হবে নতুন কিছু নিয়ে ভাল থাকবেন সুস্থ  
      থাকবেন  ধন্যবাদ।

Read More

আপনার ব্লগার ব্লগে pure CSS page loading Spinners যুক্ত করুন। [২০১৪ সালের সেরা পেজ Loading Spinner]

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

১// প্রথমে আপনার ব্লগ সাইটের ড্যাশবোর্ডে প্রবেশ করুন।
২// তার আপনার ব্লগ ড্যাশবোর্ড হতে টেমপ্লেট নির্বাচন করুন এবং Edit HTML  নির্বাচন করুন।
৩// তার পর বডি ট্যাগ থুজে আপানার বের করুন।

<body> or </body>

৪//আপনারা <body> খুজে পেলে তার উপরে নিচের কোডগুলো কপি করে পেষ্ট করুন। আর বডি ট্যাগ খুজে না পেলে </body> এর উপরে কোডগুলো কপি করে পেষ্ট করুন।

 

<div class="animation-1">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
</div>

৫// CSS Code ব্যবহার করতে হবে।

]]></b:skin>

৬// ঠিক উপরে নিচের কোড গুলো কপি পেষ্ট করুন।

.animation-1
{
    width:55px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform:rotate(45deg);
}

.animation-1 div
{
    display:inline-block;
    background-color: #0088d0;
    width:25px;
    height:25px;
    margin:0;
    padding:0;
}

.animation-1 .box1
{
    -webkit-animation: animation1-box1 1.5s infinite;
    animation: animation1-box1 2s infinite;
}

.animation-1 .box2
{
    -webkit-animation: animation1-box2 1.5s infinite;
    animation: animation1-box2 2s infinite;
}

.animation-1 .box3
{
    -webkit-animation: animation1-box3 1.5s infinite;
    animation: animation1-box3 2s infinite;
}

.animation-1 .box4
{
    -webkit-animation: animation1-box4 1.5s infinite;
    animation: animation1-box4 2s infinite;
}

@keyframes animation1-box1
{
    40%
    {
        transform: translate(-25px, -25px) rotate(85deg);
    }
    50%
    {

        transform: translate(-25px, -25px) rotate(90deg);
    }
    100%
    {
        transform: translate(-0px, -0px) rotate(180deg);
    }
}


@keyframes animation1-box2
{
    40%
    {
        transform: translate(50px, -25px) rotate(85deg);
    }
    50%
    {
        transform: translate(50px, -25px) rotate(90deg);
    }
    100%
    {
        transform: translate(-0px, -0px) rotate(180deg);
    }
}

@keyframes animation1-box3
{
    40%
    {
        transform: translate(-50px, 25px) rotate(85deg);
    }
    50%
    {
        transform: translate(-50px, 25px) rotate(90deg);
    }
    100%
    {
        transform: translate(-0px, -0px) rotate(180deg);
    }
}


@keyframes animation1-box4
{
    40%
    {
        transform: translate(25px, 25px) rotate(85deg);
    }
    50%
    {
        transform: translate(25px, 25px) rotate(90deg);
    }
    100%
    {
        transform: translate(-0px, -0px) rotate(180deg);
    }
}

৭// ব্যাস আপনার কাজ শেষ এবং টেমপ্লেট সেভ দিয়ে বের হয়ে আসবেন।
তাই আজ এই পর্যন্ত। আপনার সকলে ভাল থাকুন এই  কামনা করে লেখা শেষ করলাম। আল্লাহ হাফেজ।

Read More

আপনার ব্লগার ব্লগে Pop out ফেসবুক লাইক বক্স যুক্ত করুন ।

আল্লাহ্‌ এর নাম নিয়ে আজকের এই পোস্ট শুরু করছি । আজকেও আপনাদের জন্য সেই ফেসবুক লাইক বক্স নিয়ে পোস্ট করতে বসে গেলাম কিন্তু আজকের টা একটু আলাদা । এই ফেসবুক লাইক বক্স টি দেখতে ক্যামন হবে দেখে নিন আমার এই ব্লগের ডান পাশ থেকে । কি পছন্দ হল তো তাহলে আর দেরি করে ভাল কি আপনিও আপনার ব্লগে এই সুন্দর Pop out ফেসবুক লাইক বক্স টি যুক্ত করে নিন । কিভাবে যুক্ত করবেন এর জন্য কষ্ট করে নীচের টিপস টি একটু লক্ষ করুন ।

* প্রথমে Jquery JavaScript Plugin যুক্ত করে নিন , আর যদি আগে থেকে Jquery JavaScript Plugin আপনার ব্লগ থাকে তাহলে দরকার নাই । সে যাই হোক যুক্ত থাকুক বা না থাকুক , কি ভাবে Jquery JavaScript Plugin যুক্ত করবেন একটু দেখেনিন ।

১) প্রথমে আপনার ব্লগার লগ অন করুন তারপর > Dashboard >Template > Edit Html এ গিয়ে যান । 

২) এবার CTRL + F চেপে </head> এটি সার্চ করে খুজে বের করুন ।

৩) এবার </head> এর পাশে বা নিচে এই কোড টি পেস্ট করুন এবং Save Templete এ ক্লিক করে বেরিয়ে আসুন ।


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

* Jquery JavaScript Plugin যুক্ত করা হয়ে গেল । আবারও বলছি  Jquery JavaScript Plugin যদি আগে থেকে যুক্ত থাকে তাহলে যুক্ত করার প্রয়জন নেই । এবার বক্স যুক্ত করার পালা । 

১) আপনার ব্লগার ব্লগ লগ অন করুন তারপর ড্যাশবোর্ড থেকে Layout এ ক্লিক করুন তারপর Add a Gadget এ ক্লিক করুন । নীচের চিত্রে দেখুন । 

২) এবার যে বক্স ওপেন হবে সেখান থেকে HTML/JavaScript এ ক্লিক করুন । নীচের চিত্রে দেখুন । 

৩) এবার একটি বক্স ওপেন হবে সেখানে Title ঘর ফাকা রেখে Content ঘরে নীচের কোড গুল কপি করে পেস্ট করুন । নীচের চিত্রে দেখুন । 

*** ---কোড পেতে নীচে যান---***

<style type="text/css">

 /*<![CDATA[*/

 #fbplikebox{display: block;padding: 0;z-index: 99999;position: fixed;}

 .fbplbadge {background-color:#3B5998;display: block;height: 150px;top: 50%;margin-top: -75px;position: absolute;left: -47px;width: 47px;background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFl8Vm-ciYw43uovqQ046roV1vb4euBb26KMLnzsZgEGeSEkP7nlDJxMQvc6Q97hSTaWMvXmUiFB3J20TXqpWF13wMmmW7Ti0wqPIZWWpsd2zURiNb7kbJMWH9DsvpOqglmo0__ygaVfI/s1600/vertical-right.png");background-repeat: no-repeat;overflow: hidden;-webkit-border-top-left-radius: 8px;-webkit-border-bottom-left-radius: 8px;-moz-border-radius-topleft: 8px;-moz-border-radius-bottomleft: 8px;border-top-left-radius: 8px;border-bottom-left-radius: 8px;}

 /*]]>*/

 </style>

 <script type="text/javascript">

 /*<![CDATA[*/

 (function(w2b){

 w2b(document).ready(function(){

 var $dur = "medium"; // Duration of Animation

 w2b("#fbplikebox").css({right: -250, "top" : 100 })

 w2b("#fbplikebox").hover(function () {

 w2b(this).stop().animate({

 right: 0

 }, $dur);

 }, function () {

 w2b(this).stop().animate({

 right: -250

 }, $dur);

 });

 w2b("#fbplikebox").show();

 });

 })(jQuery);

 /*]]>*/

 </script>

 <div id="fbplikebox" style="display:none;">

 <div></div>

 <iframe src="http://www.facebook.com/plugins/likebox.php?href=Asobondhublog&amp;width=250&amp;height=250&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23C4C4C4&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:250px;background:#FFFFFF;" allowtransparency="true"></iframe>

 </div>

* এবার লাল রঙে Asobondhublog টি কে মুছে আপানর ফেসবুক ফ্যান পেজ এর URL টি বসিয়ে দিন তার পর Save বটনে ক্লিক করে বেরিয়ে আসুন । 

* আশাকরি আপনারা কাজটি করতে এতখনে সফল হয়েছেন । তাহলে আর দেরি না করে ক্যামন লাগলো আমাকে কমেন্ট করে জানান । তাহলে আজকের মতো এই পর্যন্ত আল্লাহ্‌ হাফেজ । 

Read More