সোশ্যাল এবং ইমেল সাবস্ক্রাইব বক্স ব্লগার ব্লগের জন্য নতুন স্টাইল !!

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






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



কিভাবে এই ওয়েডগেট ব্যবহার করবেন !




  • প্রথমে আপনার ব্লগার অ্যাকাউন্ট লগইন করুন । 
  • ড্যাশবোর্ড থেকে Layout → HTML/Javascript এ ক্লিক করুন । 
  • এবার ফাকা ঘোরে নীচে কোড গুল কপি পেস্ট করুন । 



<style type="text/css">
.wg-roumash{
padding:10px;
margin:auto;
width: 100%;
height:60px;
}

.wg-roubbb{
background: #000;
}

.wg-roubbb{
width:44px;
height:44px;
border-radius:10000px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
cursor:pointer;
float:left;
margin-right:5px;
}
.wg-roubbb:hover{
background:#ddd;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.wg-roubbb img{
padding-top:5px;padding-left:5px;
}

#wg-mashmini {
width:100%;
margin:auto;
padding:0px;
}

.wg-mashmnbx {
background-color:#000;
border:1px solid #fff;
border-top:1px solid #fff;
overflow:hidden;
padding:12px 16px;
}

.wg-mashmnbx form {
width:100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
border:0;
}

.wg-mashmnbx input.emailu {
float:left;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
border:0;
color:#999;
width:100%;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
font-size:13px;
padding:7px 10px 8px;
}

.wg-mashmnbx input.submitu {
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
color:#000;
font-weight:700;
font-size:12px;
float:right;
cursor:pointer;
padding:7px 14px;
}

.wg-mashmnbx input.submitu:hover {
text-decoration:none;
}

.wg-bttnwht {
border:1px solid #fff;
text-shadow:1px 1px 0 #fff;
background-color:#fff;
}

.wg-bttnwht:hover {
background-color:#DCDCDC;
}
</style>

<div class='wg-roumash'>
<div class='wg-roubbb'><a href='http://www.facebook.com/#' target='_blank'><img border='0' src='http://1.bp.blogspot.com/-H38kJ5PSU-k/Uin2qt9WW0I/AAAAAAAAAP8/W5Wmpt42xwY/s1600/facebook.png'/></a></div>

<div class='wg-roubbb'><a href='http://www.twitter.com/#' target='_blank'><img border='0' src='http://2.bp.blogspot.com/-B3UXsAyQbdw/Uin2scG5PKI/AAAAAAAAAQU/zcSj3UljGCw/s1600/twitter.png'/></a></div>

<div class='wg-roubbb'><a href='http://www.plus.google.com/#' target='_blank'><img border='0' src='http://3.bp.blogspot.com/--Pp4ZjOu4Ew/Uin2qgGT5zI/AAAAAAAAAP4/sMX3HGgzctE/s1600/google+.png'/></a></div>

<div class='wg-roubbb'><a href='http://www.youtube.com/#' target='_blank'><img border='0' src='http://3.bp.blogspot.com/-2KJ18EdFkdM/Uin2sS-cP1I/AAAAAAAAAQQ/7Vv8-WQWRQo/s1600/youtube.png'/></a></div>
<div class='wg-roubbb'><a href='http://www.youtube.com/#' target='_blank'><img border='0' src='http://2.bp.blogspot.com/-aVX-dCRSr-A/Uin2qzynvOI/AAAAAAAAAQI/l-Mn8lg6sPs/s1600/rss.png'/></a></div>
</div>

    <div id="wg-mashmini">

    <div class="wg-mashmnbx">
        <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=#', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
        <table width="100%">
            <tr>
            <td>
                <input class="emailu" name="email" placeholder="Enter your email" type="text"/>
            </td>
            <td width="64px">
                <input class="submitu wg-bttnwht" type="submit" value="Subscribe"/>
            </td>
            </tr>
        </table>
        <input name="uri" type="hidden" value="#"/>
        <input name="loc" type="hidden" value="en_US"/>
        </form>
    </div>

    </div>



উপরের কোড থেকে # মুছে সেখানে আপনার সব সোশ্যাল ইউজার নাম ও ইমেল সাবস্ক্রাইব ID বসিয়ে দিন এবং শেষ Save এ ক্লিক করুন ।


ব্যাস এবার আপনার ব্লগ ভিজিট করুন । পোস্টটি ভাল লাগলে বন্ধুদের সঙ্গে শেয়ার করুন কোন রকম সমস্যা হলে নীচে কমেন্ট করুন । ভাল থাকবেন সুস্থ । আসসালামু আলাইকুম ।

এসো বন্ধু

আমি পারভেজ ব্লগিং এর সঙ্গে যুক্ত আছি গত বেশ কিছু বছর, বাংলা ব্লগিং এর সঙ্গে সঙ্গে আমি অন্য ভাষাতেও ব্লগিং করি। সেই সব কারনে ব্লগে নিয়তম থাকা হয়না, আপনাদের ভালোবাসা যদি আগের মত আবার ফিরে পাই তাহলে অবশ্যই নিয়মত হবার চেস্ট করবো। facebook telegram youtube twitter

3 মন্তব্যসমূহ

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

  1. অামার সব হচ্ছে কিন্তু বক্স গুলো কালো দেখাচ্ছে কেন?

    উত্তরমুছুন
  2. অামার সব হচ্ছে কিন্তু বক্স গুলো কালো দেখাচ্ছে কেন?

    উত্তরমুছুন
  3. ভাই এখনে যে uri and hidden value এটা কি কাজের, এবং কোথায় পাবো কিসে বসাবো প্লিজ হেল্প

    উত্তরমুছুন
নবীনতর পূর্বতন

نموذج الاتصال