दोस्तों आज के इस आर्टिकल में आपके साथ शेयर करुगा 4 USEFULL HTML CSS AND JAVASCRIPT CODES जो कि आपके ब्लॉग की खूबसूरती बनायेगे।
CODE FOR FAV ICON
दोस्तों fav icon आपके ब्लॉग मे आपके logo का काम करता है। इस code में आपको अपने ब्लॉग के लिए एक logo बनाना होगा और जिसका अनुपात 1:1 हो और 1MB से कम हो आप इसको बाद मे अलग-अलग अनुपात मे crop करना होगा जिसका अनुपात आपको code मे देखने को मिलेगा आप इसके लिए किसी भी fav icon genratior tool या वेबसाइट का उपयोग कर सकते हो।<!-- Meta Icon --> <link href='' rel='icon' type='image/x-icon'/> <link href='#' rel='apple-touch-icon'/> <link href='#' rel='apple-touch-icon' sizes='57x57'/> <link href='#' rel='apple-touch-icon' sizes='72x72'/> <link href='#' rel='apple-touch-icon' sizes='76x76'/> <link href='#' rel='apple-touch-icon' sizes='114x114'/> <link href='#' rel='apple-touch-icon' sizes='120x120'/> <link href='#' sizes='144x144'/> <link href='' rel='apple-touch-icon' sizes='152x152'/> <link href='#' rel='apple-touch-icon' sizes='180x180'/>
दोस्तों आपको इस कोड को बनाने के लिए हर लाइन मे वहां पर दिए गए अनुपात मे क्रोप करना होगा। इसके बाद आपको उन सभी क्रोप की गई फोटो को ब्लोगेर् पोस्ट मे कुछ इस प्रकार लगाना होगा की आपको पता चल सके की कौनसी फोटो का कितना साइज इसके लिए आप एक उदहारण देख सकते हैं।
इसके बाद आपको उन सभी फोटो का url # की जगह डाल देना है,ध्यान रहे की उसी फोटो का url डालना होगा जिसका वहां जितना अनुपात हो।
Url लगा देने के बाद आपको उस पूरे code को कॉपी करके ब्लॉगर template के head टैग के बाद पेस्ट कर देना है और सेव पर क्लिक करना है।
आपका favicon पूर्ण रूप से तेयार है।
Download button with countdown
दोस्तों डाउनलोड बटन के साथ यदि countdown भी मिल जाए तो यह हमारे ब्लॉग के लिए बेहतर होगा क्योंकि इससे यदि कोई आपके ब्लॉग से किसी सामग्री को downlod करना होगा तो वहां पर उसे उस download करने के लिए प्रतीक्षा करेगा जिससे की आपको ज्यादा पैसा मिलेगा।
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
*{
}
body{
}
.download-container{
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.download-btn{
position: relative;
background: #4285F4;
color: #fff;
width: 260px;
padding: 18px 0;
text-align: center;
font-size: 1.3em;
font-weight: 400;
text-decoration: none;
border-radius: 5px;
box-shadow: 0 5px 25px rgba(1 1 1 / 15%);
transition: background 0.3s ease;
}
.download-btn:hover{
background: #2874F3;
}
.download-btn i{
margin-left: 5px;
}
.countdown{
font-size: 1.5em;
font-weight: 700;
margin-bottom: 20px;
}
.countdown span{
color: #0693F6;
font-size: 1.5em;
font-weight: 800;
}
.pleaseWait-text{
font-size: 1.1em;
font-weight: 600;
display: none;
}
.manualDownload-text{
font-size: 1.1em;
font-weight: 600;
display: none;
}
.manualDownload-link{
color: #0693F6;
font-weight: 800;
text-decoration: none;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<div class="download-container">
<a href="#" class="download-btn">Download Files <i class="fas fa-download"></i></a>
<div class="countdown"></div>
<div class="pleaseWait-text">Please wait..</div>
<div class="manualDownload-text">
If the download didn't start automatically, <a href="" class="manualDownload-link">click here.</a>
</div>
<script type="text/javascript">
const downloadBtn = document.querySelector(".download-btn");
const countdown = document.querySelector(".countdown");
const pleaseWaitText = document.querySelector(".pleaseWait-text");
const manualDownloadText = document.querySelector(".manualDownload-text");
const manualDownloadLink = document.querySelector(".manualDownload-link");
var timeLeft = 10;
downloadBtn.addEventListener("click", () => {
downloadBtn.style.display = "none";
countdown.innerHTML = "Download will begin automatically in <span>" + timeLeft + "</span> seconds."; //for quick start of countdown
var downloadTimer = setInterval(function timeCount(){
timeLeft -= 1;
countdown.innerHTML = "Download will begin automatically in <span>" + timeLeft + "</span> seconds.";
if(timeLeft <= 0){
clearInterval(downloadTimer);
pleaseWaitText.style.display = "block";
let download_href = ""; //enter the downloadable file link URL here
window.location.href = download_href;
manualDownloadLink.href = download_href;
setTimeout(() => {
pleaseWaitText.style.display = "none";
manualDownloadText.style.display = "block";
}, 4000);
}
}, 1000);
});
</script>
दोस्तो इस code मे आप अपने अनुसार टाइम सेट कर सकते है
दोस्तों इस code मे आपको "#" की जगह अपना download लिंक (url) डालना होगा। उसके बाद आपको इस कोड को कॉपी करके ब्लॉगर पोस्ट की उस जगह लगना होगा जहाँ पर आप download बटन लगना चाहते है। आपका बटन तैयार है।
SUBSCRIBE TO UNLOCK LINK
दोस्तो ये कोड आपके लिया और खास करके उन youtubers के लिया काफी ज्यादा फायदेमंद है जिनके subscriber नहीं बढ़ रहे है ये कोड आपकि विडीओ से आने वाले views से सब्सक्राइबर्स गेन कर सकते है। दोस्तो इस code मे आपको '#' की जगह अपने यूट्यूब channel का url डालना होगा और '#2' की जगह आपको उस url को डालना होगा जिस पर आप reader को भेजना चाहते हो,उसके बाद इसे आप अपनी पोस्ट मे लगा सकते है। नोट! आपको इस code को html viewr करके डालना है।Social icon
दोस्तों ये कोड उन ब्लॉगर के लिए फायदेमंद है जिनके ब्लॉगर template मे Social icon नहीं है। दोस्तों इस कोड मे आपको दो कोड देखने को मिलेंगे एक कोड (html) होगा जिसे आपको पोस्ट मे डालना होगा और दूसरा जिसे आपको template के </style> teg के बाद डालना होगा।
<div class="buttons" style="border-radius: 6px; font-size: 15px; text-align: center;">
<a class="fa fa-youtube-play" href="https://youtube.com/c/technopahadi" id="btn_yt" onclick="show()" onmouseout="this.style.background='red'" onmouseover="this.style.background='#e30202'" style="background: red; border-radius: 6px; color: white; display: inline-block; font-size: 15px; font-weight: 500; margin: 15px 30px; padding: 14px 0px; text-decoration: none; transition: all 0.2s linear 0s; width: 250px;"> SUBSCRIBE TO UNLOCK LINK</a>
<div style="margin: auto;">
<a href="1" id="yt" onmouseout="this.style.background='red'" onmouseover="this.style.background='#135B0A'" style="background-color: red; border-radius: 6px; color: white; display: none; font-size: 15px; font-weight: 500; margin: 15px 30px; padding: 14px 0px; text-decoration: none; transition: all 0.2s linear 0s; width: 250px;">Click To Download</a>
<a class="fa fa-download" href="2" id="ytv" style="background-color: red; border-radius: 6px; color: white; display: none; font-size: 15px; font-weight: 500; margin: 15px 30px; padding: 14px 0px; text-decoration: none; transition: all 0.2s linear 0s; width: 250px;"> Checking you subscribe or not...</a>
</div>
</div>
<!--Start Youtube subcribe javascript-->
<script type="text/javascript">
var _0x28f9 = ["\x3C\x68\x32\x20\x61\x6C\x69\x67\x6E\x3D\x22\x63\x65\x6E\x74\x65\x72\x22\x3E\x3C\x69\x66\x72\x61\x6D\x65\x20\x73\x72\x63\x3D\x22", "\x2F\x3E\x3C\x2F\x69\x66\x72\x61\x6D\x65\x3E\x3C\x2F\x68\x31\x3E", "\x77\x72\x69\x74\x65"]; document[_0x28f9[2]](_0x28f9[0] + src1 + _0x28f9[1])
</script>
<script type="text/javascript">
document.getElementById("yt").style.display = "none";
document.getElementById("ytv").style.display = "none";
function show() {
window.open('https://youtube.com/c/CODINGASHISH');
// sleep(3000);
setTimeout(function () {
document.getElementById("yt").style.display = "block";
<script/>
यदि आप इसे ब्लॉग के होम पेज मे जोड़ना करना चाहते है तो आप इसे layout > मे जाकर gedjet मे ऐड कर सकते है। यहाँ पर आपको सिर्फ html कोड डालना होगा।