How to Completely Customize Your Blogger Homepage with HTML, CSS, and JavaScript
Looking to revamp your Blogger homepage? This comprehensive guide will walk you through every step of the customization process using HTML, CSS, and JavaScript. Whether you want to create a new layout, remove default elements, or style your site uniquely, this tutorial has you covered.
Key Highlights:
1. Creating a Custom Homepage
Learn how to set up a new page in the Blogger dashboard.
Publish the page as 'Home' to serve as the foundation for your customized homepage.
2. Setting Up Custom Redirects
Redirect visitors seamlessly from the default homepage to your new design.
3. Removing Unnecessary Elements
Use browser inspection tools to identify and hide widgets, headers, and other unwanted elements.
4. Custom Styling with CSS
Enhance your site's aesthetics by applying custom CSS to fonts, margins, paddings, and colors.
5. Optimizing Image Handling
Host images on Cloudinary for fast loading and ensure they display perfectly in your design.
6. Final Touches: Adding Links
Link back to your blog posts and ensure smooth navigation for visitors.
Why Customize Your Blogger Homepage?
A customized homepage helps set your blog apart, providing a polished, professional look that engages visitors. With HTML, CSS, and JavaScript, you can transform your site to reflect your unique style and needs.
Embedding Youtube Video with AMP is a way to optimize loading in your web pages or blog. For this tutorial you are going to Embed YouTube Video with AMP Play OnClick and on Lightbox. By using this lightbox we can also make visitors focus more on the video content presented when clicking the play button or clicking on the video thumbnail image by extinguishing other content behind the lightbox overlay. There are two ways that we are going to use for this tutorial, by using BUTTON and video THUMBNAIL
Note: Change the red code with your Youtube Video ID.
Conclusion
Congrats !! You have made it. Now you have learned How to Embed YouTube Video with AMP Play OnClick in Blogger. Hope you liked this tutorial, if you enjoyed then please share it with your friends, please stay tuned with Us for more such awesome tutorials. Happy Blogging!
Pre code is used when you want to emphasize and organize codes in your blog post. Though you can used blockqoute but Pre code looks more professional and at the same time it gives your visitors the emphasis what kind of code you are sharing.
Pre code has unique feature such as, you can specify the kind of code your sharing e.g. CSS, JAVASCRIPT and HMTL, display in professional way and easy to select script by double click on Pre code block.
Adding Pre code in Blogger Site
This widget is powered by Font awesome version 4.3.0 so first we need to add font awesome file to your blogger template.
Step #1: Log in to your Blogger Account and Go to your Blogger Dashboard.
Step #2: Click Theme --> Edit HTML.
Step #3: Find<head> by Pressing CTRL + F (Windows) or CMD + F (MAC) Step #4: Now paste the below code below/after <head> tag.
Step #7: Now find </body> by Pressing CTRL + F (Windows) or CMD + F (MAC)
Step #8: Copy and paste the below code above /before </body>
<script type='text/javascript'>
$('i[rel="pre"]').replaceWith(function() {
return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
pres[i].addEventListener("dblclick", function () {
var selection = getSelection();
var range = document.createRange();
range.selectNodeContents(this);
selection.removeAllRanges();
selection.addRange(range);
}, false);
}
</script>
Step #9: save your template.
How to use Pre code in your Blog Post?
Note: Editor should be in HTML view..
<pre class='code html'><label><i class='fa fa-html5 fa-lg'></i> HTML</label><code>
Add HTML code here
</code></pre>
<pre class='code css'><label><i class='fa fa-css3 fa-lg'></i> CSS</label><code>
Add CSS code here
</code></pre>
<pre class='code javascript'><label><i class='fa fa-code fa-lg'></i> JS</label><code>
Add JavaScript code here
</code></pre>
Conclusion
Congrats !! You have made it. Now you have learned How to Add Pre code in Blogger Site. Hope you liked this tutorial, if you enjoyed then please share it with your friends, please stay tuned with Us for more such awesome tutorials. Happy Blogging!
Blogger widgets play a vital role for your blog. Widgets are most frequently used to customize blog sidebars. Each widget represents an area of content, which bloggers can populate with ads, text, links, images, and more. This tutorials will give you the idea on how to make sticky or fix sidebar widget in your blog purposely to emphasize the content of your widget or any other purpose it may serve depending on you.
Demo, you can see Popular post of this Blog.
Let us begin with the tutorial, simply follow the steps below:
Step #1: Log in to your Blogger Account and Go to your Blogger Dashboard.
Step #2: Click Template --> Edit HTML.
Step #3: Find </head> by Pressing CTRL + F (Windows) or CMD + F (MAC)
Step #4: Now paste the below code above/before </head> tag.
Step #5: Change the widget ID of your widget that you want to make sticky and Save your template.
How to find widget ID?
Widget ID is unique ID of each of your widget. How to find widget ID, simply go to your DASHBOARD select LAYOUT then click EDIT on the widget then you can see on widget ID.
Refer of the screenshot below:
