আপনি যদি সরাসরি HTML কোড না জেনে থাকেন তাহলে এই পোস্টটি আপনার জন্য। HTML code for website | প্রয়োজনীয় এইচটিএমএল কোডসমূহ-এ পোস্টের মাধ্যমে আমি অত্যান্ত সুন্দরভাবে আলোচনা করেছি। বাংলা টুইট ডট কম ওয়েব সাইটে আপনাকে স্বাগতম। এই ওয়েবসাইটের মাধ্যমে আমরা শেয়ার করে থাকি সকল সিএমএস প্ল্যাটফর্মের টিপস এন্ড ট্রিকস।
|
|
Verious HTML Code প্রয়োজনীয় এইচটিএমএল কোডসমূহ |
HTML code for website | প্রয়োজনীয় এইচটিএমএল কোডসমূহ
ব্যবহারের নির্দেশীকাঃ এই পোস্টের মাধ্যমে যে যে কোড গুলো শেয়ার করা হয়েছে সে সে কোডগুলি কপি করে আপনার ব্লগার ব্লগ স্পট সাইটে বা ওয়ার্ডপ্রেসের এডমিন প্যানেলের এইচটিএমএল প্যানেলে পেস্ট করুন।
কোডসমূহ হলোঃ
- PDF File And Google Form View HTML Code
- Add HTML CODE BOX On Blog post
- Author Box HTML CSS Code Sidebar
- How to Remove date and htmlExtension from Blogger URL
- Clickable Link Image html code
- Clickable Text HTML CODE
- Devide HTML Code In Two Elements
- DISABLE COPY AND PASTE
- Font Colour HTML Code
- iframe Box Code
- Image Gallery HTML Code
- List Code
- Menually Table makeing Code
- Mobile Review Post Code
- Read More add code
- Read More Div HTML CODE
- Stylish Contact Us Page HTML,CSS Code
- Table Of Content HTML Code
- Text Border Code
- World Map Code
- Add HTML Code Insert on blog Post
- Copy to Clip Board HTML CODE
- How to use Video player On Blogger By HTML Code
PDF File And Google Form View HTML Code
PDF File Add On Your Website HTML Code
---------------------------------------------------------
<iframe loading="lazy"src=" https://drive.google.com/file/d/USE DRIVE ID/preview" width="750" height="800"></iframe> --------------------------------------------------------------------------------------- <nav id="breadcrumb"><br /></nav> <div class="post-body entry-content"> <div style="height: 0px; left: 0px; padding-bottom: 129.412%; position: relative; width: 100%;" > <iframe allowfullscreen="" src="https://drive.google.com/file/d/USE DRIVE ID/preview" style="border: 0; height: 100%; left: 0; position: absolute; top: 0; width: 100%;" ></iframe> </div> <div style="height: 0px; left: 0px; padding-bottom: 129.412%; position: relative; width: 100%;" > <br /> </div> </div>
Google Form Add HTML Code On Your Website
-----------------------------------------------------------------
<iframe src="YOUR_GOOGLE_FORM_URL" width="100%" height="800" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
Add HTML CODE BOX On Blog post
<div id="generatedDoc" style="border-style: solid; border-width: thin; box-sizing: inherit; height: 300px; overflow: auto; padding: 20px; text-rendering: geometricprecision; white-space: pre-wrap;"><p style="box-sizing: inherit; color: black; font-family: Arial; font-size: 11pt; margin: 0px; text-rendering: geometricprecision;">PASTE HTML CODE</p><br style="box-sizing: inherit; text-rendering: geometricprecision;"> </div>
Author Box HTML CSS Code Sidebar
<div class="k2-author"> <img class="author-pic" src="IMAGE LINK ADDRESS" alt="Author bio image" width="150" height="150" /> <h2 style="font-size: 22px;" >About the Author</h2><br /> <p style="font-size: 19px;"> Hi there! I'm Abhishek and the founder of Key2Blogging.In my free time, I enjoy making blogging tutorials. </p><br /> <!-- Customize Readmore Button --> <a href='https://example.blogspot.com/'> <button class="k2-button"> Read More ➔ </button> </a><br/> <div class="k2-social"> <a href="#"> <i class="fab fa-facebook"></i> </a> <a href="#"> <i class="fab fa-twitter"></i> </a> <a href="#"> <i class="fab fa-telegram"></i> </a> <a href="#"> <i class="fab fa-linkedin"></i> </a> </div> </div> <style> .k2-author{ border: 2px solid #162536; background-color: #FFFFFF; text-align: center; padding: 30px 25px 30px 25px; } /*profile photo */ .author-pic{ background-color: #4C4A4B; border: 1px; border-radius: 100px; } /* Button Customization*/ .k2-button { background-color: #4CAF50; border: none; border-radius: 30px; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 19px; margin: 4px 2px; cursor: pointer; } /* Social button CSS */ .k2-social a { font-size: 32px; text-decoration: none; padding: 5px 5px; display: inline-block; transition: all 400ms; } .k2-social a:hover { transform: scale(1.1); } /* Official icon colors*/ .k2-social .fa-facebook { color: #3b5998; } .k2-social .fa-twitter { color: #1da1f2; } .k2-social .fa-telegram { color: #0088cc; } .k2-social .fa-linkedin { color: #0077b5; } </style>
How to Remove date and html Extension from Blogger URL
</head> এই ট্যাগ এর ভেতর পেস্ট করে সেভ করতে হবে। ------------------------------------------------------------------------
------------------------------------------------------------------------ <script type='text/javascript'> //<![CDATA[ // BloggerJS v0.3.1 // Copyright (c) 2017-2018 // Licensed under the MIT License var urlTotal,nextPageToken,postsDatePrefix=!1,accessOnly=!1,useApiV3=!1,apiKey="",blogId="",postsOrPages=["pages","posts"],jsonIndex=1,secondRequest=!0,feedPriority=0,amp="&"[0];function urlVal(){var e=window.location.pathname,t=e.length;return".html"===e.substring(t-5)?0:t>1?1:2}function urlMod(){var e=window.location.pathname;"p"===e.substring(1,2)?(e=(e=e.substring(e.indexOf("/",1)+1)).substr(0,e.indexOf(".html")),history.replaceState(null,null,"../"+e)):(e=(e=postsDatePrefix?e.substring(1):e.substring(e.indexOf("/",7)+1)).substr(0,e.indexOf(".html")),history.replaceState(null,null,"../../"+e))}function urlSearch(e,t){var n=e+".html";t.forEach(function(e){-1!==e.search(n)&&(window.location=e)})}function urlManager(){var e=urlVal();0===e?accessOnly||urlMod():1===e?getJSON(postsOrPages[feedPriority],1):2===e&&(accessOnly||history.replaceState(null,null,"/"))}function getJSON(e,t){var n=document.createElement("script");if(useApiV3){var o="https://www.googleapis.com/blogger/v3/blogs/"+blogId+"/"+e+"?key="+apiKey+"#maxResults=500#fields=nextPageToken%2Citems(url)#callback=bloggerJSON";nextPageToken&&(o+="#pageToken="+nextPageToken),nextPageToken=void 0}else o=window.location.protocol+"//"+window.location.hostname+"/feeds/"+e+"/default?start-index="+t+"#max-results=150#orderby=published#alt=json-in-script#callback=bloggerJSON";o=o.replace(/#/g,amp),n.type="text/javascript",n.src=o,document.getElementsByTagName("head")[0].appendChild(n)}function bloggerJSON(e){var t=[];if(useApiV3||void 0===urlTotal&&(urlTotal=parseInt(e.feed.openSearch$totalResults.$t)),useApiV3){try{e.items.forEach(function(e,n){t.push(e.url)})}catch(e){}nextPageToken=e.nextPageToken}else try{e.feed.entry.forEach(function(n,o){var r=e.feed.entry[o];r.link.forEach(function(e,n){"alternate"===r.link[n].rel&&t.push(r.link[n].href)})})}catch(e){}urlSearch(window.location.pathname,t),urlTotal>150?(jsonIndex+=150,urlTotal-=150,getJSON(postsOrPages[feedPriority],jsonIndex)):nextPageToken?getJSON(postsOrPages[feedPriority]):secondRequest&&(nextPageToken=void 0,urlTotal=void 0,jsonIndex=1,secondRequest=!1,0===feedPriority?(feedPriority=1,getJSON("posts",1)):1===feedPriority&&(feedPriority=0,getJSON("pages",1)))}function bloggerJS(e){e&&(feedPriority=e),urlManager()}bloggerJS(); //]]> </script>
Clickable Link Image html code
Clickable Text HTML CODE
No# 01
---------- <p style='text-align:left;'><a href='https://rubelmeer.blogspot.com/'>Meer Tours & Travels Agency</a></p> <div class='ty-copy-container row' style='font-size:1px; opacity:0;'> No#02
--------- <a href="https://www.wbbackend.com/">ghost peppers</a>
Devide HTML Code In Two Elements
Disable Copy Past From Website Text
CODE TO DISABLE COPY AND PASTE OF TEXT CONTENT ON BLOGGER: (past here on theme lyout on HTML Code Any Where) <script src='demo-to-prevent-copy-paste-on-blogger_files/googleapis. js'></script><script type='text/javascript'> if(typeof document.onselectstart!="undefined" ) {document.onselectstart=new Function ("return false" ); } else{document.onmousedown=new Function ("return false" ); document.onmouseup=new Function ("return false"); } </script>
-----------------------------------------------------------------------------------------
Simple steps to disable copy-paste option in blogger.
Log in to the Blogger Account Dashboard. Now Go to the Theme Section. In the Theme Section go to customize with Edit HTML. Now Search tag using Ctrl + F. Copy the code below and paste it before the </body> tag.
<script>
//<![CDATA[
$(document).ready(function() {
//Disable cut copy paste
$('body').bind('cut copy paste', function(e) {
e.preventDefault();
});
//Disable mouse right click
$("body").on("contextmenu", function(e) {
return false;
});
});
//]]>
</script>
Font Colour HTML Code
<font color="#9900FF"> Welcome to freeCodeCamp. </font>
iframe Box html Code
<iframe src="https://www.blogearns.com/2021/06/custom-robots-header-tags-settings-in-blogger.html" style="border: 2px solid #1288ff; height: 400px; width: 100%;" title="Custom Robot Header Tags"></iframe>
Image Gallery HTML Code
<p> </p> <style> .gallery {padding: 0 5px;float: left; width: 24.99999%;} div.gallery img {width: 100%;height: auto;} div.gallery img:hover {opacity: 0.8;} div.img-desc {padding: 10px;text-align: center;} * {box-sizing: border-box;} @media only screen and (max-width: 700px){.gallery {width: 49.99999%; margin: 6px 0;}} @media only screen and (max-width: 500px){.gallery {width: 100%;}} .image-gallery:after {content: "";display: table;clear: both;} </style> <div class="image-gallery">
<!--Image One--> <div class="gallery"> <a href="#" target="_blank"> <img src="IMAGE-URL" alt="Add Image Alt tag here"> </a> <div class="img-desc">image-Caption</div> </div>
<!--Image Two--> <div class="gallery"> <a href="#" target="_blank"> <img src="IMAGE-URL" alt="Add Image Alt tag here"> </a> <div class="img-desc">image-Caption</div> </div>
<!--Image Three--> <div class="gallery"> <a href="#" target="_blank"> <img src="IMAGE-URL" alt="Add Image Alt tag here"> </a> <div class="img-desc">image-Caption</div> </div>
<!--Image Four--> <div class="gallery"> <a href="#" target="_blank"> <img src="IMAGE-URL" alt="Add Image Alt tag here"> </a> <div class="img-desc">image-Caption</div> </div>
<!--Image Five--> <div class="gallery"> <a href="#" target="_blank"> <img src="IMAGE-URL" alt="Add Image Alt tag here"> </a> <div class="img-desc">image-Caption</div> </div> </div> ------------------------------------------------------------- <div class="masonry"> <div class="mItem"> <img src="IMAGE URL"> </div> <div class="mItem"> <img src="IMAGE URL"> </div>
<div class="mItem"> <img src="IMAGE URL"> </div>
<div class="mItem"> <img src="IMAGE URL"> </div>
<div class="mItem"> <img src="IMAGE URL"> </div>
<div class="mItem"> <img src="IMAGE URL"> </div> </div> <style> .masonry img { width: 100%; } .masonry { column-count: 4; column-gap: 16px; } .masonry .mItem { display: inline-block; margin-bottom: 16px; width: 100%; } @media (max-width: 1199px) { .masonry { column-count: 3; } } @media (max-width: 991px) { .masonry { column-count: 2; } } @media (max-width: 767px) { .masonry { column-count: 1; } } </style>
List HTML Code
Unorder List: (Dot Wise)
---------------------------------
<ul> <li>TEXT PAST HERE</li> <li>TEXT PAST HERE</li> <li>TEXT PAST HERE</li> <li>TEXT PAST HERE</li> <li>TEXT PAST HERE</li> <li>TEXT PAST HERE</li> <li>TEXT PAST HERE</li> </ul>
Order List: (Number Wise)
-----------------------------------
<ol> <li>TEXT PAST HERE</li> <li>TEXT PAST HERE</li> <li>TEXT PAST HERE</li> <li>TEXT PAST HERE</li> <li>TEXT PAST HERE</li> <li>TEXT PAST HERE</li> <li>TEXT PAST HERE</li> </ol>
Menually Table makeing Code
<table> <tr> <td>Row 1 - Column 1</td> <td>Row 1 - Column 2 </td> </tr> <tr> <td>Row 2 - Column 1</td> <td>Row 2 - Column 2</td> </tr> </table>
Mobile Review Post Code
<!--------start---> <h1 style="display: inline-block; font-size: 30px;"><b>Sony Xperia Pro-I</b></h1> <div class="all-content"> <div class="mobile-img"> <img src="image url" /> </div> <div class="mobile-price-text"> <h3 class="mobile-price"><b>Official ৳12000</b></h3> <span style="font-size: 15px;">4/32gb</span> <p class="price-text"><b>Brand:</b> Vivo<br /><b>Category:</b> Smartphones<br /><b>Last updated:</b> 19th, Oct, 2021</p> <div class="top-feature"> <h3 style="display: inline-block; font-size: 20px;"><b>Top Feature</b></h3> <ul> <li><i class="fas fa-camera"></i> <b>Camera:</b> 13mp 1080p</li> <li><i class="fas fa-memory"></i> <b>RAM:</b> 2GB RAM Helio P35</li> <li><i class="fas fa-mobile-alt"></i> <b>Display:</b> 6.51" 720x1600 pixel</li> <li><i class="fas fa-battery-full"></i> <b>Battery:</b> 13mp 1080p</li> </ul> </div> </div> </div> <!----------bar----------> <link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"></link> <h3 style="display: inline-block; font-size: 20px;"><b>Our Rating</b></h3><span style="font-size: 13px;"> (58% out of 100%)</span> <div class="w3-light-grey w3-round-xlarge" style="border: 0.5px solid rgb(221, 221, 221);"> <div class="w3-container w3-blue w3-round-xlarge" style="width: 70%;">Display 70%</div> </div> <div class="w3-light-grey w3-round-xlarge" style="border: 0.5px solid rgb(221, 221, 221);"> <div class="w3-container w3-blue w3-round-xlarge" style="width: 40%;">Design 40%</div> </div> <div class="w3-light-grey w3-round-xlarge" style="border: 0.5px solid rgb(221, 221, 221);"> <div class="w3-container w3-blue w3-round-xlarge resbar1" style="width: 30%;">Camera 30%</div> </div> <div class="w3-light-grey w3-round-xlarge" style="border: 0.5px solid rgb(221, 221, 221);"> <div class="w3-container w3-blue w3-round-xlarge" style="width: 60%;">Connectivity 60%</div> </div> <div class="w3-light-grey w3-round-xlarge" style="border: 0.5px solid rgb(221, 221, 221);"> <div class="w3-container w3-blue w3-round-xlarge" style="width: 70%;">Features 70%</div> </div> <div class="w3-light-grey w3-round-xlarge" style="border: 0.5px solid rgb(221, 221, 221);"> <div class="w3-container w3-blue w3-round-xlarge resbar2" style="width: 20%;">Performance 20%</div> </div> <div class="w3-light-grey w3-round-xlarge" style="border: 0.5px solid rgb(221, 221, 221);"> <div class="w3-container w3-blue w3-round-xlarge" style="width: 70%;">Battery 70%</div> </div> <div class="w3-light-grey w3-round-xlarge" style="border: 0.5px solid rgb(221, 221, 221);"> <div class="w3-container w3-blue w3-round-xlarge" style="width: 90%;">Usability 90%</div> </div> <!----------------table----------------> <h1 style="border-top: 0.5px dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>Launch</b></h1> <div class="container table-responsive py-5"> <table class="table table-bordered table-hover"> <tbody> <tr> <th scope="row">Announced</th> <td>2021, October</td> </tr> <tr> <th scope="row">Status</th> <td>Available. Released 2021, October 18</td> </tr> </tbody> </table> <h1 style="border-top: 0.5px dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>Network</b></h1> <div class="container table-responsive py-5"> <table class="table table-bordered table-hover"> <tbody> <tr> <th scope="row">Technology</th> <td>GSM / CDMA / HSPA / LTE</td> </tr> <tr> <th scope="row">2G bands</th> <td>GSM 850 / 900 / 1800 / 1900 - SIM 1 & SIM 2 CDMA 800 & TD-SCDMA</td> </tr> <tr> <th scope="row">3G bands</th> <td>HSDPA 850 / 900 / 2100</td> </tr> <tr> <th scope="row">4G bands</th> <td>1, 3, 5, 8, 34, 38, 39, 40, 41</td> </tr> <tr> <th scope="row">Speed</th> <td>ehfewfkjfhejfkrjekr</td> </tr> <tr> <th scope="row">GPRS</th> <td>❌</td> </tr> <tr> <th scope="row">EDGE</th> <td>✅</td> </tr> </tbody> </table> <h1 style="border-top: 0.5px dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>Body</b></h1> <div class="container table-responsive py-5"> <table class="table table-bordered table-hover"> <tbody> <tr> <th scope="row">Dimensions</th> <td>164.4 x 76.3 x 8.4 mm (6.47 x 3.00 x 0.33 in)</td> </tr> <tr> <th scope="row">Weight</th> <td>190 g (6.70 oz)</td> </tr> <tr> <th scope="row">Build</th> <td>Glass front, plastic back, plastic frame</td> </tr> <tr> <th scope="row">SIM</th> <td>Dual SIM (Nano-SIM, dual stand-by)</td> </tr> </tbody> </table> <h1 style="border-top: 0.5px dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>Display</b></h1> <div class="container table-responsive py-5"> <table class="table table-bordered table-hover"> <tbody> <tr> <th scope="row">Type</th> <td>IPS LCD capacitive touchscreen, 16M colors</td> </tr> <tr> <th scope="row">Size</th> <td>6.51 inches, 102.3 cm2 (~81.6% screen-to-body ratio)</td> </tr> <tr> <th scope="row">Resolution</th> <td>720 x 1600 pixels, 20:9 ratio (~270 ppi density)</td> </tr> <tr> <th scope="row">Multitouch</th> <td>Dual SIM (Nano-SIM, dual stand-by)</td> </tr> </tbody> </table> <h1 style="border-top: 0.5px dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>Platform</b></h1> <div class="container table-responsive py-5"> <table class="table table-bordered table-hover"> <tbody> <tr> <th scope="row">OS</th> <td>Android 11 (Go edition), Funtouch 11</td> </tr> <tr> <th scope="row">Chipset</th> <td>Mediatek MT6765 Helio P35 (12nm)</td> </tr> <tr> <th scope="row">CPU</th> <td>Octa-core (4x2.3 GHz Cortex-A53 & 4x1.8 GHz Cortex-A53)</td> </tr> <tr> <th scope="row">GPU</th> <td>PowerVR GE8320</td> </tr> </tbody> </table> <h1 style="border-top: 0.5px dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>Memory</b></h1> <div class="container table-responsive py-5"> <table class="table table-bordered table-hover"> <tbody> <tr> <th scope="row">Card slot</th> <td>microSDXC (dedicated slot)</td> </tr> <tr> <th scope="row">Internal (ROM)</th> <td>32 GB eMMC 5.1</td> </tr> <tr> <th scope="row">RAM</th> <td>O2 GB</td> </tr> </tbody> </table> <h1 style="border-top: 0.5px dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>Camera</b></h1> <div class="container table-responsive py-5"> <table class="table table-bordered table-hover"> <tbody> <tr> <th scope="row">Primary camera</th> <td>13 MP, f/2.2, 27mm (wide), AF</td> </tr> <tr> <th scope="row">Secondary camera</th> <td>5 MP, f/1.8</td> </tr> <tr> <th scope="row">Features</th> <td>LED flash, HDR, panorama</td> </tr> <tr> <th scope="row">Video</th> <td>1080p@30fps</td> </tr> </tbody> </table> <h1 style="border-top: 0.5px dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>Sound</b></h1> <div class="container table-responsive py-5"> <table class="table table-bordered table-hover"> <tbody> <tr> <th scope="row">Alert types</th> <td>Vibration, MP3, WAV ringtones</td> </tr> <tr> <th scope="row">Loudspeaker</th> <td>Yes</td> </tr> <tr> <th scope="row">3.5mm jack</th> <td>Yes</td> </tr> </tbody> </table> <h1 style="border-top: 0.5px dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>Connectivity</b></h1> <div class="container table-responsive py-5"> <table class="table table-bordered table-hover"> <tbody> <tr> <th scope="row">WLAN</th> <td>Wi-Fi 802.11 b/g/n, Wi-Fi Direct, hotspot</td> </tr> <tr> <th scope="row">Bluetooth</th> <td>5.0, A2DP, LE</td> </tr> <tr> <th scope="row">GPS</th> <td>Yes, with A-GPS, GLONASS, GALILEO, BDS</td> </tr> <tr> <th scope="row">NFC</th> <td>❌</td> </tr> <tr> <th scope="row">FM radio</th> <td>✅</td> </tr> <tr> <th scope="row">USB</th> <td>microUSB 2.0, USB On-The-Go</td> </tr> <tr> <th scope="row">Infrared port</th> <td>❌</td> </tr> </tbody> </table> <h1 style="border-top: 0.5px dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>Features</b></h1> <div class="container table-responsive py-5"> <table class="table table-bordered table-hover"> <tbody> <tr> <th scope="row">Sensors</th> <td>Accelerometer, proximity, compass</td> </tr> <tr> <th scope="row">Messaging</th> <td>SMS(threaded view), MMS, Email, IM</td> </tr> <tr> <th scope="row">Browser</th> <td>HTML5</td> </tr> <tr> <th scope="row">Java</th> <td>❌</td> </tr> </tbody> </table> <h1 style="border-top: 0.5px dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>Battery</b></h1> <div class="container table-responsive py-5"> <table class="table table-bordered table-hover"> <tbody> <tr> <th scope="row">Battery type</th> <td>Non-removable Li-Po</td> </tr> <tr> <th scope="row">Battery capacity</th> <td>5000 mAh</td> </tr> <tr> <th scope="row">Charging</th> <td>Charging 10W and Reverse charging 5W</td> </tr> </tbody> </table> <h1 style="border-top: 0.5px dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>More</b></h1> <div class="container table-responsive py-5"> <table class="table table-bordered table-hover"> <tbody> <tr> <th scope="row">Made by</th> <td>China</td> </tr> <tr> <th scope="row">Color</th> <td>Starry Blue, Pearl White, Mint Green</td> </tr> </tbody> </table> <h1 style="border-top: 0.5px dotted rgb(127, 140, 141); font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>Your Mobile Name</b></h1> <iframe class="BLOG_video_class" allowfullscreen="" youtube-src-id="N8hR2BVTPNk" width="320" height="266" src="https://www.youtube.com/embed/videocode"></iframe> <br /> <p style="text-align: justify;">short review </p> <h1 style="font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>Phone Name</b></h1> <p style="text-align: justify;">medium review </p> <h1 style="font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>Your FAQs about Phone Name Review Year</b></h1> <p style="text-align: justify;">Which question you will have about this phone. Let’s justify these. There we are including the major question and answers about this phone. So, let’s start now.... <br /><br /><b>Question 1: </b> <br /> <span> </span>Answer: It will launch in October 2021. <br /><b>Question 2: </b> <br /> <span> </span>Answer: <br /><b>Question 3: </b> <br /> <span> </span>Answer: </p> <h1 style="font-size: 20px; margin-top: 20px; padding-top: 5px;"><b>Our Decision about Phone Name</b></h1> <p style="text-align: justify;">Your Decision </p> <br /> <p>If you have any question or want to give a feedback about <b>Phone Name</b>, leave a comment. Thanks for connecting with us.</p> <!-----------table end-----------> <style> .all-content{ min-height:400px; margin-bottom:10px; } .all-content .mobile-img img{ float:left; width:50%; padding:10px; border:.5px solid rgba(149, 165, 166,.3); } .all-content .mobile-price-text{ float:right; width:50%; padding:10px; margin-top:15px; } .mobile-price{ font-size:20px; display:inline-block; color:black; } .top-feature ul li{ font-size:15px; list-style-type:none; } .top-feature ul li i{ background-color:#8e44ad; color:#fff; font-size:13px; padding:5px; border-radius:7px; } .post-body th{ background:rgba(189, 195, 199,.3); } .post-body th:hover{ background:rgba(189, 195, 199,.7);} @media (max-width: 661px){ .all-content .mobile-img img{ width:100%; } .all-content .mobile-price-text{ width:100%; } @media (max-width: 794px){ .resbar2{ font-size:10px; } @media (max-width: 450px){ .resbar1{ font-size:10px; } .resbar2{ font-size:5px; } } </style> </div></div></div></div></div></div></div></div></div></div></div></div>
Read More add code
<blockquote> <h3><strong>🔥🔥<a href="https://news.google.com/publications/CAAqBwgKMIWprwswkrTHAw?hl=en-US&gl=US&ceid=US%3Aen" target="_blank" rel="nofollow noopener">Click here to follow US IT BARI-All about Healthy Foods site in Google News</a>🔥🔥</strong></h3> </blockquote>
Read More Div HTML CODE
<div style="border:2px dashed #000099;"> <p><b style="color: #04ff00; font-size: large;">More Article For You...</b></p> <p> <span style="font-size: medium;"><b></b></span></p><ul><span style="font-size: medium;"><b> <li><a href="LINK HERE" target="_blank">TITLE HERE</a></li> <li><a href="LINK HERE" target="_blank">TITLE HERE</a></li> </b></span></ul><span style="font-size: medium;"><b> </b></span> <p></p> </div>
Stylish Contact Us Page HTML,CSS Code
<style> .tb-contact-form-widget{ background:radial-gradient(rgba(8, 85, 252, 0.05),#dfe6e9);; background-repeat: repeat; background-position: 100% 100%; color:#000; padding:25px; font-size:15px;} .srbtn{ display:inline-block;} .cform-button, .btn-reset{ background-color:rgba(44, 62, 80,1.0); padding:5px 30px; border-radius:10px; color:#ffffff; } .cform-button:hover { background-color: #2980b9; color: #fff;} .btn-reset:hover { background-color: red; color: #fff;} .tb-contact-form-widget h3{ text-align:center; margin:20px 0 0 0; padding:10px 0; border-top: 1px dotted #000;} .c-form-name, .c-form-email { width: 100%; max-width: 100%; margin-bottom: 10px; padding: 10px; border: 1px solid #CCC; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff; -webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF; box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;} .c-form-email-message { width: 100%; max-width: 100%; margin-bottom: 10px; padding: 10px; border: 1px solid #CCC; border-radius: 5px; box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 1px #ccc inset, 0 1px 0 #fff; -webkit-box-shadow: 0 1px 1px #CCC inset, 0 1px 0 #FFF;} .c-form-name, .c-form-email, .c-form-email-message input:focus{ background-color: #FFF; box-shadow: 0 0 0 1px #E8C291 inset; border-color: #E8C291;outline: none; -moz-box-shadow: 0 0 0 1px #e8c291 inset; -webkit-box-shadow: 0 0 0 1px #E8C291 inset;} .b-social-buttons{ list-style-type:none; text-align:left;} .b-social-buttons li{ display:inline-block; } .btn-lg{ border-radius:10%; border:1px solid #ddd; background:linear-gradient(to right, #ff105f, #ffad06); color:#fff; text-decoration:none; font-size:15px; margin-right:10px; padding:2px 5px 2px 5px;} #ContactForm1_contact-form-success-message, #ContactForm1_contact-form-error-message{ width:100%; margin-top:15px;} .network-name{ padding-right:10px; color:#ff5722;} #-name{ margin-left:5px;} .form-a{ float: right; width:50%; } .con-info p{ text-align:justify; } .c-info{ float:left; width:50%; } .c-info h1{ font-size:25px; } .c-info p{ font-size:15px; text-align:justify; padding-right:10px; } .c-info ul li{ list-style-type:none; } .c-info li i{ font-size:15px; background:#2c3e50; color:#fff; border-radius:10%; padding:5px; margin-bottom:5px; } @media screen and (max-width:629px) { .c-info{ width:100%; } } @media screen and (max-width:629px) { .form-a{ width:100%; margin-top:10px; } } </style> <div class="con-info"> <p>এই যোগাযোগ পেজটি এই সাইট সম্পর্কিত সাধারণ প্রশ্ন, প্রযুক্তিগত সমস্যার প্রতিবেদন এবং বিজ্ঞাপন সম্পর্কিত অনুসন্ধানের জন্য। আপনার যদি এই সাইট সম্পর্কিত কোন পরামর্শ, মতামত, প্রশ্ন বা পরামর্শ থাকে তাহলে দয়া করে আমাদের লিখুন। আমরা আমাদের সকল পাঠকদের মূল্য দিই এবং তাদের পাঠানো প্রতিটি ইমেইলে রিপ্লে দেওয়ার চেষ্টা করি। যদি আপনি একটি বিনামূল্যে ফ্রিল্যান্সিং সাপোর্ট চান তাহলে এই ফর্মটি ব্যবহার করবেন। আর আপনি যদি নতুন ফ্রিল্যান্সারদের জন্যে এই সাইটে লিখতে চান তবে এই ফর্মটি ব্যবহার করবেন না বরং আমাদের <b><a href="/p/submit-guide.html" target="_blank">সাবমিট গাইড</a></b> এই বাটনটি ব্যবহার করবেন। ওখানে একটি টিউটোরিয়াল পাবলিশ করার সকল নির্দেশিকা দেওয়া আছে। এছাড়াও আপনি যদি কোনো প্রকার পেইড সাপোর্ট বা সার্ভিস পেতে চান তাহলেও এই ফর্মটি ব্যবহার করবেন। ধন্যবাদ। <div class="c-info"> <h1>Important Notice</h1> <p>আমরা ফ্রিল্যান্সিং গাইডলাইন এবং খণ্ডকালীন চাকরির প্রশিক্ষণ সম্পর্কে অতিথি পোস্ট জমা নিয়ে থাকি এবং সেগুলো এই ওয়েবসাইটে পাবলিশ করে থাকি। আপনার ব্লগ বা নিবন্ধনটি আমাদের জন্য মূল্যবান। আপনার যদি এই বিষয়ে আগ্রহ থাকে তাহলে <a href="/p/guest-post-policy.html" target="_blank"><b>অতিথি পোষ্ট পলাইসি</b></a> পরে আপনার ব্লগ বা নিবন্ধনটি <a href="/p/submit-guide.html" target="_blank"><b>সাবমিট করুন</b></a> ধন্যবাদ।</p> <h1>Contact Info</h1> <p><b> ওয়েব ডেভেলপমেন্ট এবং ডিজিটাল মেকেটিং </b> সম্পর্কে কোন প্রশ্নের উত্তর বা সার্ভিস পেতে নির্দ্বিধায় আমার সাথে যোগাযোগ করুন।</p> <li><i class="far fa-clock"></i> SUN to SAT, Bangladesh (GMT+6)</li> <li><i class="fas fa-map-marker-alt"></i> Shibalaya, Manikganj - Bangladesh</li> <li><i class="far fa-envelope"></i> contact.mdrajumolla@gmail.com</li> <li><i class="fab fa-whatsapp"></i> +880 1794606140</li> </div> <div class="c-form-tittle"><h1>Contact Form</h1></div> <div class="form-a"> <div class="tb-contact-form-widget"> <form name="contact-form"> <div class="form-name"> <span> <i class="fa fa-pencil-square-o"></i> Your Name* </span><br /> <input class="c-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" /> </div> <div class="form-email"> <span> <i class="fa fa-envelope-o"></i> E-mail Address* </span><br /> <input class="c-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" /> </div> <div style="clear: both;"> </div> <div class="form-message"> <span> <i class="fa fa-keyboard-o"></i> Message*</span><br /> <textarea class="c-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="7"></textarea> <div class="srbtn"> <input class="cform-button" id="ContactForm1_contact-form-submit" type="button" value="Submit" /> <input class="btn-reset" type="reset" value="Clear" /> </div> <div class="contact-form-error-message" id="ContactForm1_contact-form-error-message"> </div> <div class="contact-form-success-message" id="ContactForm1_contact-form-success-message"> </div> </div> </form> </div> </div>
Table Of Content HTML Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Table of Contents</title> <style> body { font-family: Arial, sans-serif; margin: 20px; } h1 { text-align: center; } .toc { margin: 20px 0; padding: 10px; background-color: #f5f5f5; border: 1px solid #ddd; border-radius: 5px; } ol { list-style-type: none; padding: 0; } li { margin-bottom: 5px; } a { text-decoration: none; color: #333; } a:hover { text-decoration: underline; } </style> </head> <body> <h1>Your Document Title</h1> <div class="toc"> <h2>Table of Contents</h2> <ol> <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> <li><a href="#section3">Section 3</a></li> <!-- Add more entries as needed --> </ol> </div> <section id="section1"> <h2>Section 1</h2> <p>This is the content of Section 1.</p> </section> <section id="section2"> <h2>Section 2</h2> <p>This is the content of Section 2.</p> </section> <section id="section3"> <h2>Section 3</h2> <p>This is the content of Section 3.</p> </section> <!-- Add more sections as needed --> </body> </html>
Text Border Code
<p style="border:2px dashed #000099;">Text Here</p> With Boarder: -------------------- <p style="border:2px dashed #000099;"><a href='https://rubelmeer.blogspot.com/'>Meer ToursTravels Agency</a></p> With Rear More: -------------------- <p style="border:2px dashed #000099;">Read More:<a href='LINK HERE'>TEXT HERE</a></p>
World Map HTML Code
<!--Code by W3codegenerator.com--> <iframe allowfullscreen="" frameborder="1" height="300" marginheight="0" marginwidth="0" name="myiFrame" scrolling="yes" src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik" style="border: 1px #000000 solid;" width="720"> <p>Your browser does not support iframes.</p> </iframe>
Add HTML Code Insert on blog Post
<div class="pre html"> <pre style="max-height: none; white-space: pre-wrap;"> HTML CODE PAST HERE </pre> </div>
Copy to Clip Board HTML CODE
<blockquote id="myInput">TEST PAST HERE</blockquote><button class="k2-copy-button"
id="k2button"><svg aria-hidden="true" height="1em"
preserveaspectratio="xMidYMid meet" role="img" viewbox="0 0 24 24"
width="1em" xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M13
6.75V2H8.75A2.25 2.25 0 0 0 6.5 4.25v13a2.25 2.25 0 0 0 2.25 2.25h9A2.25
2.25 0 0 0 20 17.25V9h-4.75A2.25 2.25 0 0 1 13 6.75z"
fill="currentColor"><path d="M14.5 6.75V2.5l5 5h-4.25a.75.75 0 0
1-.75-.75z" fill="currentColor"><path d="M5.503 4.627A2.251 2.251 0 0
0 4 6.75v10.504a4.75 4.75 0 0 0 4.75 4.75h6.494c.98 0 1.813-.626
2.122-1.5H8.75a3.25 3.25 0 0 1-3.25-3.25l.003-12.627z"
fill="currentColor"></path></path></path></g></svg>Copy</button>
<style>.k2-copy-button svg{margin-right: 10px;vertical-align:
top;} .k2-copy-button{ height: 45px; width: 155px; color: #fff;
background: #265df2; outline: none; border: none; border-radius: 8px;
font-size: 17px; font-weight: 400; margin: 8px 0; cursor: pointer;
transition: all 0.4s ease;}.k2-copy-button:hover{background: #2ECC71;}@media
(max-width: 480px) {#k2button{width:
100%;}}</style><script> function copyFunction() {
const copyText = document.getElementById("myInput").textContent; const
textArea = document.createElement('textarea'); textArea.textContent =
copyText; document.body.append(textArea);
textArea.select(); document.execCommand("copy");
k2button.innerText = "Text copied";
textArea.remove();}document.getElementById('k2button').addEventListener('click',
copyFunction); </script>
How to use Video player On Blogger By HTML Code
<video id="my-video" class="video-js vjs-fluid vjs-big-play-centered" controls preload="auto" width="640" height="500" poster="FETURED IMAGE LINK" data-setup="{}" > <source src="PASTE VIDEO LINK HERE"> To watch this video, please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video. </p> </video>