আস্সালামুআলাইুম...
হ্যালো বন্ধুরা !
আমি ছাদিকুর রহমান, আজ আমি আপনাদের সামনে এমন একটি বিষয় নিয়ে হাজির হলাম কিভাবে আপনারা Add করবেন Demo and Download button in Blogger ।
ব্লগারে ডেমো এবং ডাউনলোড বোতাম যুক্ত করুন - আমরা একটি সহজ এবং নিরাময় ডেমো তৈরি করার সাথে সাথে অনুসরণ করুন এবং কিছু CSS3 ব্যবহার করে বোতাম ডাউনলোড করুন। হোভারে একটি অনন্য এবং সাধারণ প্রভাব অর্জন করতে সিএসএস ডেমো এবং ডাউনলোড বোতামগুলি সীমানা-ব্যাসার্ধ, বক্স-ছায়া, লিনিয়ার-গ্রেডিয়েন্টস, জেড-ইনডেক্স এবং ট্রানজিশন সহ সিএসএস হভার ইফেক্ট ব্যবহার করবে। এই পোস্টে আমি একটি টিউটোরিয়াল ভাগ করব কিভাবে ব্লগারদের জন্য প্রতিক্রিয়াশীল সিএসএস ডেমো এবং ডাউনলোড বোতাম যুক্ত করুন। এই টিউটোরিয়ালটি তাদের ব্লগার টেমপ্লেট এবং ওয়ার্ডপ্রেস থিম সম্পর্কে ব্লগিংয়ে সহায়তা করতে পারে। ডেমো এবং ডাউনলোড বোতামগুলি সিএসএস দিয়ে মাউস হোভার ইফেক্ট সহ তৈরি করা হয়েছে। দুটি আইকন হ'ল ফন্টওয়েজ থেকে নেওয়া। সুতরাং এই টিউটোরিয়ালটি শুরু করার আগে আপনার অবশ্যই আপনার ব্লগে ফন্টউইউজ যুক্ত করতে হবে।
আপনি যদি নিজের ওয়েবসাইট বা ব্লগস্পট ব্লগের জন্য একটি সাধারণ তবে সুন্দর সিএসএস 3 ডেমো এবং ডাউনলোড বোতাম সন্ধান করেন তবে এই টিউটোরিয়ালটি আপনাকে সহায়তা করবে। এই টিউটোরিয়ালে আমি সম্পূর্ণরূপে সিএসএস এবং এইচটিএমএল বেস ডেমো এবং ব্লগারটির জন্য ডাউনলোড বোতাম ভাগ করেছি। আপনি যদি কোনও ব্লগার টেম্পলেট বা ওয়ার্ডপ্রেস থিমগুলি ভাগ করে নেওয়ার সাইট চালনা করেন তবে আপনার অবশ্যই দুটি সাধারণ বোতাম যুক্ত করতে হবে এবং সেগুলি ডেমো এবং ডাউনলোড বোতাম। এই দুটি বোতামটি টেমপ্লেট ভাগ করে নেওয়ার সাইটের জন্য সবচেয়ে গুরুত্বপূর্ণ।
এই টিউটোরিয়ালটি সিএসএস 3 এবং এইচটিএমএল দ্বারা তৈরি করা সিএসএস 3 অ্যানিমেশন প্রভাব সহ সুন্দর সিএস 3 ডেমো এবং ডাউনলোড বোতামগুলির একটি দুর্দান্ত সংগ্রহ এবং এই বোতামগুলি ব্লগার টেম্পলেট বা ওয়ার্ডপ্রেস থিমগুলি ভাগ করে নেওয়ার সাইটগুলি চালানো লোকদের সহায়তা করে। বোতামগুলির উপর প্রভাব সিএসএস রূপান্তর এবং সীমান্ত-নীচের বৈশিষ্ট্যগুলি ব্যবহার করে তৈরি করা হয়। মূলত দুটি গ্রেডিয়েন্ট ব্যবহৃত হয়, একটি সিএসএস 3 ট্রানজিশন এবং অন্যটি প্রভাবটিকে আরও সুন্দর করার জন্য হোভারের সীমানা-নীচে।
এবার টিউটোরিয়াল শুরু করিঃ-
Save the Template.
Now use the below HTML Code in every post in html tab where you want share Demo and Download button.
DEMO DOWNLOAD
হ্যালো বন্ধুরা !
আমি ছাদিকুর রহমান, আজ আমি আপনাদের সামনে এমন একটি বিষয় নিয়ে হাজির হলাম কিভাবে আপনারা Add করবেন Demo and Download button in Blogger ।
ব্লগারে ডেমো এবং ডাউনলোড বোতাম যুক্ত করুন - আমরা একটি সহজ এবং নিরাময় ডেমো তৈরি করার সাথে সাথে অনুসরণ করুন এবং কিছু CSS3 ব্যবহার করে বোতাম ডাউনলোড করুন। হোভারে একটি অনন্য এবং সাধারণ প্রভাব অর্জন করতে সিএসএস ডেমো এবং ডাউনলোড বোতামগুলি সীমানা-ব্যাসার্ধ, বক্স-ছায়া, লিনিয়ার-গ্রেডিয়েন্টস, জেড-ইনডেক্স এবং ট্রানজিশন সহ সিএসএস হভার ইফেক্ট ব্যবহার করবে। এই পোস্টে আমি একটি টিউটোরিয়াল ভাগ করব কিভাবে ব্লগারদের জন্য প্রতিক্রিয়াশীল সিএসএস ডেমো এবং ডাউনলোড বোতাম যুক্ত করুন। এই টিউটোরিয়ালটি তাদের ব্লগার টেমপ্লেট এবং ওয়ার্ডপ্রেস থিম সম্পর্কে ব্লগিংয়ে সহায়তা করতে পারে। ডেমো এবং ডাউনলোড বোতামগুলি সিএসএস দিয়ে মাউস হোভার ইফেক্ট সহ তৈরি করা হয়েছে। দুটি আইকন হ'ল ফন্টওয়েজ থেকে নেওয়া। সুতরাং এই টিউটোরিয়ালটি শুরু করার আগে আপনার অবশ্যই আপনার ব্লগে ফন্টউইউজ যুক্ত করতে হবে।
Here’s how it will work: using a combination of HTML and CSS, i will create two separate pieces. These include the main button and two smaller eye and download icon. The eye and download icon used from fontawesme icon.
আপনি যদি নিজের ওয়েবসাইট বা ব্লগস্পট ব্লগের জন্য একটি সাধারণ তবে সুন্দর সিএসএস 3 ডেমো এবং ডাউনলোড বোতাম সন্ধান করেন তবে এই টিউটোরিয়ালটি আপনাকে সহায়তা করবে। এই টিউটোরিয়ালে আমি সম্পূর্ণরূপে সিএসএস এবং এইচটিএমএল বেস ডেমো এবং ব্লগারটির জন্য ডাউনলোড বোতাম ভাগ করেছি। আপনি যদি কোনও ব্লগার টেম্পলেট বা ওয়ার্ডপ্রেস থিমগুলি ভাগ করে নেওয়ার সাইট চালনা করেন তবে আপনার অবশ্যই দুটি সাধারণ বোতাম যুক্ত করতে হবে এবং সেগুলি ডেমো এবং ডাউনলোড বোতাম। এই দুটি বোতামটি টেমপ্লেট ভাগ করে নেওয়ার সাইটের জন্য সবচেয়ে গুরুত্বপূর্ণ।
এই টিউটোরিয়ালটি সিএসএস 3 এবং এইচটিএমএল দ্বারা তৈরি করা সিএসএস 3 অ্যানিমেশন প্রভাব সহ সুন্দর সিএস 3 ডেমো এবং ডাউনলোড বোতামগুলির একটি দুর্দান্ত সংগ্রহ এবং এই বোতামগুলি ব্লগার টেম্পলেট বা ওয়ার্ডপ্রেস থিমগুলি ভাগ করে নেওয়ার সাইটগুলি চালানো লোকদের সহায়তা করে। বোতামগুলির উপর প্রভাব সিএসএস রূপান্তর এবং সীমান্ত-নীচের বৈশিষ্ট্যগুলি ব্যবহার করে তৈরি করা হয়। মূলত দুটি গ্রেডিয়েন্ট ব্যবহৃত হয়, একটি সিএসএস 3 ট্রানজিশন এবং অন্যটি প্রভাবটিকে আরও সুন্দর করার জন্য হোভারের সীমানা-নীচে।
এবার টিউটোরিয়াল শুরু করিঃ-
Before starting this tutorial please take a backup of you template for safety.
First go to Blogger Dashboard > Template > Edit HTML and put the below code before </style> tag.
.btn{list-style:none;text-align:center;margin:10px!important;padding:10px!important;font-size:14px;clear:both;display:inline-block;text-decoration:none!important;color:#FFF!important}
.btn ul {margin:0;padding:0}
.btn li{display:inline;margin:5px;padding:0;list-style:none;}
.demo,.download{padding:12px 15px!important;color:#fff!important;font-weight:700;font-size:14px;font-family:Open Sans,sans-serif;text-align:center;text-transform:uppercase;border-radius:3px;opacity:.95;border:0;letter-spacing:2px;transition:all .2s ease-out}
.demo {background-color:#3498DB;}
.download {background-color:#1ABC84;}
.demo:hover {background-color:#60B8F4;color:#fff;border-bottom:2px solid #3498DB; opacity:1;}
.download:hover {background-color:#49DDAA;color:#fff;border-bottom:2px solid #1ABC84;opacity:1;}
.demo:before {content:'\f135';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}
.download:before {content:'\f019';display:inline-block;font-weight:normal;vertical-align:top;margin-right:10px;width:16px;height:16px;line-height:24px;font-family:fontawesome;transition:all 0.5s ease-out;}Save the Template.
Now use the below HTML Code in every post in html tab where you want share Demo and Download button.
<div style="text-align: center;"> <ul class="btn"> <li><a class="demo" href="YOUR-LINK-HERE" target="_blank">DEMO</a></li> <li><a class="download" href=" YOUR-LINK-HERE" target="_blank">DOWNLOAD</a></li> </ul> </div>
ফলাফল:-
আশা করি আপনাদের ভাল লেগেছে...।
ধন্যবাদ সবাইকে...
ধন্যবাদ সবাইকে...
সবাই ভালো থাকবেন ধন্যবাদ
আমার সাইট ভিজিট কারার অনুরুধ রইল।
আমার fb : Sadikur Rahman Mejan
আপনার জন্য আরও ভয়েস
Ads By Sadik14367
ConversionConversion EmoticonEmoticon