আপনার ব্লগে যুক্ত করুন আকর্ষণীও Email Subscription উইজেট (V-3)

Sayeem

5 years ago

আমরা ইতিপূর্বে কয়েকটি আকর্ষণীয় Email Subscription Form উইজেট আপনাদের সাথে শেয়ার করেছি। এবারও আপনাদের সাথে আরেকটি Email Subscription Form উইজেট শেয়ার করব। আসলে প্রত্যেক ব্লগেই Email Subscription Form থাকা একান্ত প্রয়োজন। কারণ এটি আপনার ব্লগের Subscriber বাড়িয়ে নিতে সাহায্য করবে। যে কোন ব্লগের Subscriber যখন বাড়তে থাকবে তখন ভিজিটরও বাড়তে থাকবে।

ব্লগার ব্লগে যুক্ত করুন Email Subscription উইজেট (V-3)

উপরের চিত্রে Email Subscription Form উইজেট এর ডেমো দেখতে পাচ্ছেন। এটি সম্পূর্ণ Css3 এর সমন্বয়ে তৈরি করা হয়েছে। আপনি ইচ্ছে করলে এটাকে আপনার মনেরমত করে কাষ্টমাইজ করতে পারবেন। তাছাড়া বাটনগুলি কিছু অতিরিক্ত 3D Css3 ইফেক্ট দেয়া হয়েছে। আশাকরি আপনার কাছে উইজেটটি ভাল লাগবে। লাইভ দেখুন- Live Demo

সকল পোষ্ট দেখুন

কিভাবে যুক্ত করবেনঃ

প্রথমে আপনার ব্লগে লগইন করুন।
ব্লগার ড্যাশবোর্ড হতে Theme এ ক্লিক করুন|

ব্লগার ব্লগে যুক্ত করুন Email Subscription উইজেট (V-3)

এবার Edit HTML এ ক্লিক করুন।
তারপর কীবোর্ড হতে Ctrl+F একত্রে প্রেশ করে সার্চ উইনডোস ওপেন করুন।
সার্চবারে ]]></b:skin> লিখে সার্চ করুন।

ব্লগার ব্লগে যুক্ত করুন Email Subscription উইজেট (V-3)

এবার নিচের কোডগুলো ]]></b:skin> এর উপরে পেষ্ট করুন।

/* Subscribe Box by itsayeem.com*/

#itsayeemSubscribe {width:auto; height:auto; background-color:#eee; border:1px solid #ddd; border-radius:7.5px; display:block; margin:auto; line-height:40px; padding:0px}

#itsayeemSubscribe .email__ {padding:15px 15px 5px;}

#itsayeemSubscribe .email {margin:auto; color:#555; text-align:center;}

#itsayeemSubscribe .email:before {content:”; width:50px; height:50px; display:block; text-align:center; margin:auto; border-radius:100px; transition:all .3s ease; -webkit-animation:ignielRing 5s 0s ease-in-out infinite; -webkit-transform-origin:50% 4px; -moz-animation:ignielRing 5s 0s ease-in-out infinite; -moz-transform-origin:50% 4px; animation:ignielRing 5s 0s ease-in-out infinite; transform-origin:50% 4px; background:url(“data:image/svg+xml,%3Csvg viewBox=’0 0 24 24′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cpath d=’M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21M19.75,3.19L18.33,4.61C20.04,6.3 21,8.6 21,11H23C23,8.07 21.84,5.25 19.75,3.19M1,11H3C3,8.6 3.96,6.3 5.67,4.61L4.25,3.19C2.16,5.25 1,8.07 1,11Z’ fill=’%23008c5f’/%3E%3C/svg%3E”) center center / 50px no-repeat;}

#itsayeemSubscribe .medsos__ {padding:15px 0px; line-height:0px; border-top:1px solid #ccc;}

#itsayeemSubscribe form {display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; align-items:center; margin:0px 0px 15px; padding:0px; position:relative;}

#itsayeemSubscribe form:before {left:15px; position:absolute; display:block; width:20px; height:20px; background:url(“data:image/svg+xml,%3Csvg viewBox=’0 0 24 24′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cpath d=’M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z’ fill=’%23717171’/%3E%3C/svg%3E”) no-repeat; content:”;}

#itsayeemSubscribe input {width: calc(100% – 35px); background-color:#ccc; line-height:1.5em; border:1px solid #ccc; border-right:0px; padding:8px 10px 8px 40px; font-size:12px; text-align:left !important; border-radius:50px 0px 0px 50px; outline:none; outline-width:0px; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none;}

#itsayeemSubscribe button {background-color:#008c5f; width:40px; min-width:40px; height:36px; margin:0px; padding:0px; border:0px; box-shadow:none; vertical-align:top; cursor:pointer; transition:all .3s ease; background-image:unset; border-radius:0px 50px 50px 0px;}

#itsayeemSubscribe button:hover, #itsayeemSubscribe button:focus {background-color:#1d2129;}

#itsayeemSubscribe button:before {display:inline-block; width:20px; height:20px; margin:0px; background:url(“data:image/svg+xml,%3Csvg viewBox=’0 0 24 24′ xmlns=’http://www.w3.org/2000/svg’%3E%3Cpath d=’M2,21L23,12L2,3V10L17,12L2,14V21Z’ fill=’%23fff’/%3E%3C/svg%3E”) no-repeat; content:”; vertical-align:-3px;}

#itsayeemSubscribe .medsos {width:100%; text-align:center;}

#itsayeemSubscribe .medsos svg {width:20px;height:20px;margin-top:7px}

#itsayeemSubscribe .medsos svg path {fill:#fff}

#itsayeemSubscribe .medsos a {display:inline-block; margin-right:7px; width:35px; height:35px; box-shadow: 0px 7px 15px 0px rgba(0,0,0,0.4); transition: all ease-in-out 300ms; border-radius:100px;}

#itsayeemSubscribe .medsos a:last-child {margin-right:0px;}

#itsayeemSubscribe .medsos a:hover {box-shadow: 0px 23px 15px -3px rgba(0,0,0,0.25); transform: translate(0px, -10px) scale(1.05);}

#itsayeemSubscribe .medsos .facebook{background:#3a579a}

#itsayeemSubscribe .medsos .twitter {background:#00abf0}

#itsayeemSubscribe .medsos .googleplus {background:#df4a32}

#itsayeemSubscribe .medsos .youtube {background:#cc181e}

#itsayeemSubscribe .medsos .instagram {background:#992ebc}

#itsayeemSubscribe .medsos .pinterest {background:#e60023}

@-webkit-keyframes ignielRing{

0% { -webkit-transform: rotateZ(0); }

1% { -webkit-transform: rotateZ(30deg); }

3% { -webkit-transform: rotateZ(-28deg); }

5% { -webkit-transform: rotateZ(34deg); }

7% { -webkit-transform: rotateZ(-32deg); }

9% { -webkit-transform: rotateZ(30deg); }

11% { -webkit-transform: rotateZ(-28deg); }

13% { -webkit-transform: rotateZ(26deg); }

15% { -webkit-transform: rotateZ(-24deg); }

17% { -webkit-transform: rotateZ(22deg); }

19% { -webkit-transform: rotateZ(-20deg); }

21% { -webkit-transform: rotateZ(18deg); }

23% { -webkit-transform: rotateZ(-16deg); }

25% { -webkit-transform: rotateZ(14deg); }

27% { -webkit-transform: rotateZ(-12deg); }

29% { -webkit-transform: rotateZ(10deg); }

31% { -webkit-transform: rotateZ(-8deg); }

33% { -webkit-transform: rotateZ(6deg); }

35% { -webkit-transform: rotateZ(-4deg); }

37% { -webkit-transform: rotateZ(2deg); }

39% { -webkit-transform: rotateZ(-1deg); }

41% { -webkit-transform: rotateZ(1deg); }

43% { -webkit-transform: rotateZ(0); }

100% { -webkit-transform: rotateZ(0); }

}

@-moz-keyframes ignielRing{

0% { -moz-transform: rotate(0); }

1% { -moz-transform: rotate(30deg); }

3% { -moz-transform: rotate(-28deg); }

5% { -moz-transform: rotate(34deg); }

7% { -moz-transform: rotate(-32deg); }

9% { -moz-transform: rotate(30deg); }

11% { -moz-transform: rotate(-28deg); }

13% { -moz-transform: rotate(26deg); }

15% { -moz-transform: rotate(-24deg); }

17% { -moz-transform: rotate(22deg); }

19% { -moz-transform: rotate(-20deg); }

21% { -moz-transform: rotate(18deg); }

23% { -moz-transform: rotate(-16deg); }

25% { -moz-transform: rotate(14deg); }

27% { -moz-transform: rotate(-12deg); }

29% { -moz-transform: rotate(10deg); }

31% { -moz-transform: rotate(-8deg); }

33% { -moz-transform: rotate(6deg); }

35% { -moz-transform: rotate(-4deg); }

37% { -moz-transform: rotate(2deg); }

39% { -moz-transform: rotate(-1deg); }

41% { -moz-transform: rotate(1deg); }

43% { -moz-transform: rotate(0); }

100% { -moz-transform: rotate(0); }

}

@keyframes ignielRing{

0% { transform: rotate(0); }

1% { transform: rotate(30deg); }

3% { transform: rotate(-28deg); }

5% { transform: rotate(34deg); }

7% { transform: rotate(-32deg); }

9% { transform: rotate(30deg); }

11% { transform: rotate(-28deg); }

13% { transform: rotate(26deg); }

15% { transform: rotate(-24deg); }

17% { transform: rotate(22deg); }

19% { transform: rotate(-20deg); }

21% { transform: rotate(18deg); }

23% { transform: rotate(-16deg); }

25% { transform: rotate(14deg); }

27% { transform: rotate(-12deg); }

29% { transform: rotate(10deg); }

31% { transform: rotate(-8deg); }

33% { transform: rotate(6deg); }

35% { transform: rotate(-4deg); }

37% { transform: rotate(2deg); }

39% { transform: rotate(-1deg); }

41% { transform: rotate(1deg); }

43% { transform: rotate(0); }

100% { transform: rotate(0); }

}

/* Subscribe Box by itsayeem.com*/

এবার Save Theme এ ক্লিক করুন।

এখন ড্যাশবোর্ড হতে Layout এ ক্লিক করুন

ব্লগার ব্লগে যুক্ত করুন Email Subscription উইজেট (V-3)

তারপর HTML/JavaScript এ ক্লিক করুন।

ব্লগার ব্লগে যুক্ত করুন Email Subscription উইজেট (V-3)

এবার নিচের কোডগুলি কপি করে HTML/JavaScript এর ঘরে পেষ্ট করুন।

ব্লগার ব্লগে যুক্ত করুন Email Subscription উইজেট (V-3)

<!– Subscribe Box by itsayeem.com –>

<div id=”itsayeemSubscribe”>

<div class=”email__”>

<div class=”email”>

সরাসরি ই-মেইলে আপডেট পোষ্ট পেতে চাইলে

<form action=”https://feedburner.google.com/fb/a/mailverify?uri=xxxxxxx” method=”post” onsubmit=”window.open(‘https://feedburner.google.com/fb/a/mailverify?uri=xxxxxxx‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520’);return true” target=”popupwindow”>

<input name=”email” class=”email” placeholder=”Email: example@mail.com”/>

<input name=”uri” type=”hidden” value=”igniel” /> <input name=”loc” type=”hidden” value=”en_US” />

<button type=”submit”></button>

</form>

</div>

</div>

<div class=”medsos__”>

<div class=”medsos”>

<a class=”facebook” title=”Facebook” href=”https://www.facebook.com/xxxx” rel=”nofollow noopener” target=”_blank”><svg viewbox=”0 0 24 24″> <path d=”M17,2V2H17V6H15C14.31,6 14,6.81 14,7.5V10H14L17,10V14H14V22H10V14H7V10H10V6A4,4 0 0,1 14,2H17Z”></path></svg></a>

<a class=”twitter” title=”Twitter” href=”https://twitter.com/xxxx” rel=”nofollow noopener” target=”_blank”><svg viewbox=”0 0 24 24″><path d=”M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z”></path></svg></a>

<a class=”youtube” title=”Youtube” href=”https://www.youtube.com/xxxx” rel=”nofollow noopener” target=”_blank”><svg viewbox=”0 0 24 24″><path d=”M10,16.5V7.5L16,12M20,4.4C19.4,4.2 15.7,4 12,4C8.3,4 4.6,4.19 4,4.38C2.44,4.9 2,8.4 2,12C2,15.59 2.44,19.1 4,19.61C4.6,19.81 8.3,20 12,20C15.7,20 19.4,19.81 20,19.61C21.56,19.1 22,15.59 22,12C22,8.4 21.56,4.91 20,4.4Z”> </path></svg></a>

<a class=”instagram” title=”Instagram” href=”https://www.instagram.com/xxxx” rel=”nofollow noopener” target=”_blank”><svg viewbox=”0 0 24 24″><path d=”M7.8,2H16.2C19.4,2 22,4.6 22,7.8V16.2A5.8,5.8 0 0,1 16.2,22H7.8C4.6,22 2,19.4 2,16.2V7.8A5.8,5.8 0 0,1 7.8,2M7.6,4A3.6,3.6 0 0,0 4,7.6V16.4C4,18.39 5.61,20 7.6,20H16.4A3.6,3.6 0 0,0 20,16.4V7.6C20,5.61 18.39,4 16.4,4H7.6M17.25,5.5A1.25,1.25 0 0,1 18.5,6.75A1.25,1.25 0 0,1 17.25,8A1.25,1.25 0 0,1 16,6.75A1.25,1.25 0 0,1 17.25,5.5M12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9Z”></path></svg></a>

<a class=”pinterest” title=”Pinterest” href=”https://pinterest/xxxx” rel=”nofollow noopener” target=”_blank”><svg viewbox=”0 0 24 24″><path d=”M9.04,21.54C10,21.83 10.97,22 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12C2,16.25 4.67,19.9 8.44,21.34C8.35,20.56 8.26,19.27 8.44,18.38L9.59,13.44C9.59,13.44 9.3,12.86 9.3,11.94C9.3,10.56 10.16,9.53 11.14,9.53C12,9.53 12.4,10.16 12.4,10.97C12.4,11.83 11.83,13.06 11.54,14.24C11.37,15.22 12.06,16.08 13.06,16.08C14.84,16.08 16.22,14.18 16.22,11.5C16.22,9.1 14.5,7.46 12.03,7.46C9.21,7.46 7.55,9.56 7.55,11.77C7.55,12.63 7.83,13.5 8.29,14.07C8.38,14.13 8.38,14.21 8.35,14.36L8.06,15.45C8.06,15.62 7.95,15.68 7.78,15.56C6.5,15 5.76,13.18 5.76,11.71C5.76,8.55 8,5.68 12.32,5.68C15.76,5.68 18.44,8.15 18.44,11.43C18.44,14.87 16.31,17.63 13.26,17.63C12.29,17.63 11.34,17.11 11,16.5L10.33,18.87C10.1,19.73 9.47,20.88 9.04,21.57V21.54Z”></path></svg></a>

</div>

</div>

</div>

সবশেষে Gadget টি Save করুন।

কোড কপি করতে সমস্যা এখান থেকে কপি করুন

পরিবর্তনঃ

উপরের লাল কালারের xxxx এর জায়গার সোসিয়াল মিডিয়াগুলির এড্রেস দেন।
পিংক কালারেরxxxxxxx এর স্থলে আপনার Feedburner একাউন্ট এর নাম দেন।