আজকে আমি আপনাকে দেখাব কিভাবে আপনি ব্লগার ওয়েবসাইটে একটি কাউন্টডাউন টাইমার বোতাম যুক্ত করতে পারেন।
আপনার সাইটে কাউন্টডাউন টাইমার বোতাম যুক্ত করলে যখনই কেউ ডাউনলোড বোতামে ক্লিক করবে, এটি 20 সেকেন্ডের কাউন্টডাউন টাইমার সহ একটি পপআপ উইন্ডো দেখাবে এবং আপনি এটিতে একটি অ্যাডসেন্স বিজ্ঞাপন রাখতে পারেন।
এইভাবে, আপনি আপনার ব্লগ পোস্টে আপনার দর্শকদের বেশিক্ষণ রাখতে পারেন এবং আপনার বাউন্স রেট কমাতে পারেন এবং সামগ্রিক থাকার সময় বাড়াতে পারেন। সুতরাং, এটি ওয়েবসাইটের ব্যস্ততা বাড়াতে সাহায্য করে এবং এসইওতে সহায়তা করে।
ব্লগারে একটি পপআপ ডাউনলোড টাইমার বোতাম যোগ করতে, নীচের পদক্ষেপগুলি অনুসরণ করুন:-
1. ব্লগার ড্যাশবোর্ডে যান এবং একটি ব্লগ পোস্ট খুলুন।
2. এখন এইচটিএমএল কোডটি পেস্ট করুন এবং ডাউনলোড বোতাম লিঙ্কটি প্রতিস্থাপন করুন, অ্যাডসেন্স প্রকাশক আইডি, এবং বিজ্ঞাপন স্লট কোডটি দিন:
<p style="text-align: center;"><a class="button" href="#PopupDownload" id="get-download"><i class='icon download'></i>Download</a></p>
<div data-ml-modal="" id="PopupDownload">
<div class="Popup_container"></div>
<div class="modal-dialog">
<div class="Popup_content center">
<div class="adpop-top">
<h2 style="margin: 0px;">Download Your file</h2>
<div class="ad-pop__close" onclick="document.getElementById("PopupDownload").style.display="none""><svg style="height: 25px; width: 25px; fill: black;" viewbox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z"></path></svg></div>
</div>
<br />
<div style="width: 660px;">
<!--Change data adslot & Adclient code here-->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-xxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxxx"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
<br />
<a class="button" href="#" id="Popup_Download_btn"><i class="icon download"></i>Download File</a>
</div></div></div>
3. তারপর CSS এবং Javascript কোড কপি করুন এবং </body> ট্যাগের উপরে পেস্ট করুন।
<b:if cond='data:view.isPost'>
<script>
//<![CDATA[
var downloadButton = document.getElementById("Popup_Download_btn"); var counter = 20; var newElement = document.createElement("span"); newElement.innerHTML = "Please Wait 20 sec"; var id; downloadButton.parentNode.replaceChild(newElement, downloadButton); function startDownload() { this.style.display = 'none'; id = setInterval(function () { counter--; if (counter < 0) { newElement.parentNode.replaceChild(downloadButton, newElement); clearInterval(id); } else { newElement.innerHTML = "Please Wait" + " " + counter.toString() + " " + " sec.... "; } }, 1000); }; var clickbtn = document.getElementById("get-download"); clickbtn.onclick = startDownload;
//]]>
</script>
</b:if>
<b:if cond='data:view.isPost'>
<style>
#Popup_Download_btn{display:inline-flex;display:-webkit-inline-flex;flex-wrap:wrap;-webkit-flex-wrap:wrap;align-items:center;-webkit-align-items:center;margin-bottom:10px;padding:9px 20px;border-radius:10px;font-size:.8rem;line-height:1.3rem;background-color:#303e9f;color:#ffffff; font-weight: bold;}
.adpop-top{height:40px;width:100%;border-bottom:1px #E5E5E5 solid}
.btn-at{display:block;height:50px;color:#fff!important;font-size:18px;text-transform:uppercase;background:#f3a;text-align:center;line-height:50px;width:200px;margin:12px auto;transition:all 0.4s ease-in}
[data-ml-modal]{position:fixed;top:0;bottom:0;left:0;right:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:999;width:0;height:0;opacity:0}
[data-ml-modal]:target{width:auto;height:auto;opacity:1;-webkit-transition:opacity 1s ease;transition:opacity 1s ease}
[data-ml-modal]:target .Popup_container{position:fixed;top:0;bottom:0;left:0;right:0;cursor:pointer;background-color:#000;background-color:rgba(0,0,0,0.7);z-index:1}
[data-ml-modal] .modal-dialog{border-radius:6px;box-shadow:0 11px 15px -7px rgba(0,0,0,0.2),0 24px 38px 3px rgba(0,0,0,0.14),0 9px 46px 8px rgba(0,0,0,0.12);position:relative;width:90%;max-width:660px;max-height:70%;margin:10% auto;overflow-x:hidden;overflow-y:auto;z-index:2}
[data-ml-modal] .Popup_content{background:#fff;padding:23px 27px}
@media (max-width:767px){[data-ml-modal] .modal-dialog{margin:20% auto}}
.ad-pop__close{position:absolute;right:1em;top:1em;width:1.1em;height:1.1em;cursor:pointer}
.icon {display: inline-block;vertical-align: middle;margin-right: 10px;width: 18px;height: 18px;background-size: cover;background-repeat: no-repeat;background-position: center center;}
.button .icon.download {
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>");
}
</style>
</b:if>
4. এখন আপনার পপআপ ডাউনলোড টাইমার বোতামটি ব্লগার ওয়েবসাইটে কাজ করবে।
এখানে, মনে রাখবেন: যে এই টাইমার বোতাম কোডটি শুধুমাত্র পোস্ট পৃষ্ঠায় লোড হবে কারণ আমরা শুধুমাত্র if শর্ত সেট করেছি। আপনি যদি পৃষ্ঠাগুলিতে এটি ব্যবহার করতে চান তবে আপনি এটিকে আপনার কোড থেকে সরাতে পারেন। ধন্যবাদ