tag:blogger.com,1999:blog-51418583618927986012020-11-30T21:39:45.517+05:30HowbloggerzHowbloggerz provides you Blogger Tips, Blogspot Widgets, Blogger Templates, Customization, CSS, HTML, SEO tips, jQuery Tricks and all Blogging Tricks.Unknownnoreply@blogger.comBlogger31125tag:blogger.com,1999:blog-5141858361892798601.post-87335216333051340122020-10-13T20:22:00.006+05:302020-11-26T19:52:22.761+05:30Move Inline CSS or JavaScript To External (FREE)<style>.container { width: 100% !important; padding: 0 !important; } input[type="text"], select, textarea { text-transform: none; font-size: smaller; } </style> <p><strong>CSS</strong> stands for Cascading Style Sheets which is a design language, describes how and where the HTML elements are to be displayed on the web page. It mainly controls the looks of the website like the colour, size and font of the text. <strong>JavaScript</strong> is an object-oriented computer programming language commonly used to create complex features on web pages. It is also called interactive web language because it can create and change the static components of the web pages based upon the user input and always keeps running in the background to fetch the latest details.</p> <a name='more'></a> <div class="mainimg"><img alt="How To Convert Internal CSS or JavaScript To External File" src="https://1.bp.blogspot.com/-COAX-tJpHQ8/XxRmtXa2DpI/AAAAAAAAdWM/MXO2239wiiYijVp2HuAB4Z9t3dWeLyqEwCLcBGAsYHQ/d/Convert-inline-css-to-external.png" /></div> <h2>What is inline / Internal CSS and Internal JavaScript?</h2><p>All the CSS's and JavaScript's code that is embedded with in HTML document are know as inline or Internal CSS or Internal JavaScript.</p> <code><p style="color: red; text-align: center;">Hello World!</p> <u>/* Inline CSS */</u><br /><br /><style type='text/css'> <u>/* Internal CSS */</u><br /> p {<br /> color: red;<br /> text-align: center;<br /> }<br /></style><br /><br /><script type='text/javascript'> <u>// Internal JavaScript</u><br />var x = 5;<br />var y = 2;<br />var z = x + y;<br />alert(z);<br /></script> </code><br /><br /> <p class="pnote"><strong>Note:</strong> There is no inline Javascript.</p> <h2>What is External CSS and JavaScript?</h2><p>All the CSS's and JavaScript's code that is <strong>hosted externally</strong> (<i>uploaded on a server</i>) in form of a file but connected to the required HTML document are known as External CSS or JavaScript.</p> <code><link href='/myCSS.css' rel='stylesheet' type='text/css'/> <u>/* External CSS</u><br /><script src='/myJavaScript.js' type='text/javascript'/> <u>// External JavaScript</u></code><br /><br /> <p class="pnote"><strong>Note:</strong> Here <span style="color: #488bfa;">/myCSS.css</span> and <span style="color: #488bfa;">/myJavaScript.js</span> are links to the file uploaded on a server.</p> <h3>Benefits of External CSS and JavaScript.</h3> <p>- <a href="http://www.howbloggerz.com/2016/06/ways-to-reduce-blogger-page-load-time.html" target="_blank">Page loading speed</a> increases once file is cached. <br />- bandwidth reduces. <br />- Single file can used on multiple websites. <br />- Easy to update the code from single file. <br />- Make HTML document tidy. </p> <p><i>You can also <strong>Minify JavaScript and CSS</strong> code to reduce the file size and <strong>execution time</strong></i></p> <h2>How to Host CSS and JavaScript file for free</h2> <ul class="nav nav-tabs mb-3" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="google-tab" data-toggle="tab" href="#google" role="tab" aria-controls="google" aria-selected="true">Google</a> </li> <li class="nav-item"> <a class="nav-link" id="dropbox-tab" data-toggle="tab" href="#dropbox" role="tab" aria-controls="dropbox" aria-selected="false">Dropbox</a> </li> <li class="nav-item"> <a class="nav-link" id="others-tab" data-toggle="tab" href="#others" role="tab" aria-controls="others" aria-selected="false">Others / Servers</a> </li></ul> <div class="tab-content" id="myTabContent"> <p><span class="step">Step 1.</span> Open <strong>Notepad</strong> > <strong>Paste your code</strong>.</p><p class="pnote"><strong>Note: </strong>For CSS remove <style> and </style> tags, for JavaScript remove <script> and </script> tags from start and end of the code if any.</p> <p><span class="step">Step 2.</span> In the Notepad menu, select '<strong>File</strong>' > '<strong>Save as</strong>' and type the file name with extension .css for CSS and .js for JavaScript.</p> <p><span class="step">Step 3.</span> In the same window, choose "<strong>All files</strong>" in the "Save as type" option and set the Character Encoding to <strong>UTF-8</strong>.</p> <div class="simg"><img src="https://4.bp.blogspot.com/-vzcVnHMAsBs/V16QI2ja1JI/AAAAAAAAAUQ/ABZuNu4deY0NsapY4inoFLfBSAIMGpZ_QCLcB/s1600/Preparing-CSS-and-Javascript-file-to-host-online.png" alt="Preparing CSS and Javascript file to host Externally" title="Save CSS and JavaScript file" /></div> <div class="tab-pane fade show active" id="google" role="tabpanel" aria-labelledby="google-tab"> <p>There are so many file hosting services, but google drive is free and easy to manage. You can also use google drive for windows to quickly manage your files.</p> <p><span class="step">Step 4.</span> Open <a href="https://drive.google.com/" rel="nofollow" target="_blank"><u>Google drive</u></a> and login with your Gmail account. After you logged in, click on the <strong>NEW</strong> > <strong>Folder</strong> button and create a new separate folders to upload your JavaScript and CSS files.</p> <p><span class="step">Step 5.</span> Open the newly created folder, and click on the <strong>NEW</strong> > <strong>File Upload</strong>. then choose the files to upload.</p> <p><span class="step">Step 6.</span> After the files have been successfully uploaded, <strong>right click</strong> on the file names and select '<strong>Share</strong>'. Again in the pop-up select <strong>change to anyone with the link</strong> and click <strong>Copy link</strong>.</p> <div class="simg"><img src="https://1.bp.blogspot.com/-FFQj0c8QoTc/X4WzX7VgvqI/AAAAAAAADMQ/ZRkszxGrSeMMTasUyPDjgWwZfVXS11g9gCLcBGAsYHQ/s0/remove-inline-css-javascript-upload-to-server.gif" alt="Remove Inline CSS Javascript and upload to server" title="Upload files to Google drive" /></div> <p><span class="step">Step 7.</span> Link has been copied to your clipboard. Paste your code in the below form to <strong>generate direct download link from Google drive and Dropbox sharing link</strong></p> <div class="container"> <div class="panel panel-default panel-primary" id="mainpanel"> <div class="panel-body"> <form> <div class="form-group input-group-sm"> <label for="sharelink">Share Link</label> <input type="text" class="form-control" id="sharelink" placeholder="Dropbox or Google Drive link" autofocus="true"> </div> <div class="form-group"> <label for="downloadlink">Download Link</label> <div class="input-group input-group-sm mb-3"> <input type="text" class="form-control" id="downloadlink" readonly> <div class="input-group-append"> <button id="copylinkbtn" class="btn btn-primary" type="button" data-clipboard-target="#downloadlink" disabled>Copy link</button> </div> </div> </div> <div class="form-row"> <div class="form-group col-md-2"> <label for="docvalue">Document Type</label> <select class="custom-select custom-select-sm" id="docvalue" disabled> <option selected value="Choose">Choose</option> <option name="doctype" value="CSS">CSS</option> <option name="doctype" value="javascript">Javascript</option> </select> </div> </div> <div class="form-group"> <label for="htmllink">HTML Code</label> <div class="input-group input-group-sm mb-3"> <input type="text" class="form-control" id="htmllink" readonly> <div class="input-group-append"> <button id="copycodebtn" class="btn btn-primary" type="button" data-clipboard-target="#htmllink" data-clipboard-demo="" disabled>Copy Code</button> </div> </div> </div> </form> </div> </div></div> </div> <!-- Tab1 --> <div class="tab-pane fade" id="dropbox" role="tabpanel" aria-labelledby="dropbox-tab"> <p class="pnote"><strong>Note:</strong> You cannot directly upload js and CSS files on Web version of Dropbox so, you have to <a href="https://www.dropbox.com/downloading" rel="nofollow" target="_blank">Download Dropbox</a> for Windows, Mac, Andriod, iOS or Linux to upload your files.</p> <p><span class="step">Step 4.</span> After installing the dropbox, login and finish the setup process.</p> <p><span class="step">Step 5.</span> Open the dropbox folder and create a seperate folder for uploading CSS and Javascript files. Move your files into specified folders.</p> <p><span class="step">Step 6.</span> After the files have been successfully uploaded, Right click and select '<strong>Share</strong>'. In the pop-up select create link and click Copy link.</p> <p class="pnote"><strong>Tip:</strong> After uploading the files you can also use the web version of <a href="https://www.dropbox.com/dropbox/" rel="nofollow" target="_blank">Dropbox</a> to get file link.</p> <p><span class="step">Step 7.</span> Link has been copied to your clipboard. Paste your code in the below form to <strong>generate direct download link from Google drive and Dropbox sharing link</strong></p> <div class="container"> <div class="panel panel-default panel-primary" id="mainpanel"> <div class="panel-body"> <form> <div class="form-group input-group-sm"> <label for="sharelink">Share Link</label> <input type="text" class="form-control" id="sharelink" placeholder="Dropbox or Google Drive link" autofocus="true"> </div> <div class="form-group"> <label for="downloadlink">Download Link</label> <div class="input-group input-group-sm mb-3"> <input type="text" class="form-control" id="downloadlink" readonly> <div class="input-group-append"> <button id="copylinkbtn" class="btn btn-primary" type="button" data-clipboard-target="#downloadlink" disabled>Copy link</button> </div> </div> </div> <div class="form-row"> <div class="form-group col-md-2"> <label for="docvalue">Document Type</label> <select class="custom-select custom-select-sm" id="docvalue" disabled> <option selected value="Choose">Choose</option> <option name="doctype" value="CSS">CSS</option> <option name="doctype" value="javascript">Javascript</option> </select> </div> </div> <div class="form-group"> <label for="htmllink">HTML Code</label> <div class="input-group input-group-sm mb-3"> <input type="text" class="form-control" id="htmllink" readonly> <div class="input-group-append"> <button id="copycodebtn" class="btn btn-primary" type="button" data-clipboard-target="#htmllink" data-clipboard-demo="" disabled>Copy Code</button> </div> </div> </div> </form> </div> </div></div> </div> <!-- Tab2 --> <div class="tab-pane fade" id="others" role="tabpanel" aria-labelledby="others-tab"> <p><span class="step">Step 4.</span> Upload your files on your server or on any other place.</p> <p><span class="step">Step 5.</span> Get the direct download link of your file.</p> <p><span class="step">Step 6.</span> Paste your link below.</p> <div class="container"> <div class="panel panel-default panel-primary" id="mainpanel"> <div class="panel-body"> <form> <div class="form-group input-group-sm"> <label for="filelink">File Link</label> <input type="text" class="form-control" id="filelink" placeholder="File link here" autofocus="true"> </div> <div class="form-row"> <div class="form-group col-md-2"> <label for="dockvalue1">Document Type</label> <select class="custom-select custom-select-sm" id="docvalue1" disabled> <option selected value="Choose">Choose</option> <option name="doctype1" value="CSS">CSS</option> <option name="doctype1" value="javascript">Javascript</option> </select> </div> </div> <div class="form-group"> <label for="htmllink1">HTML Code</label> <div class="input-group input-group-sm mb-3"> <input type="text" class="form-control" id="htmllink1" readonly> <div class="input-group-append"> <button id="copycodebtn1" class="btn btn-primary" type="button" data-clipboard-target="#htmllink1" data-clipboard-demo="" disabled>Copy Code</button> </div> </div> </div> </form> </div> </div></div> <p><span class="step">Step 7.</span> Select the <i>Document Type</i> and copy your HTML code.</p> </div> <!-- Tab3 --> </div> <!-- Tab Content --> <p><strong>Now you can use above code on your HTML document to add external CSS and JavaScript file.</strong></p> <p><span class="step">Step 8.</span> Login to blogger account, then navigate to <strong>Theme</strong> > <strong>Edit HTML</strong> and place your Code:</p> <p><strong>For CSS</strong>: Place code above <mark></head></mark>.<br /> <strong>For JavaScript.</strong>: Place code above <mark></body></mark> to <a target='_blank' href='https://gtmetrix.com/defer-parsing-of-javascript.html'>Defer parsing of JavaScript</a>.</p> <p class="pnote"><strong>Tip:</strong> Use ctrl+f to find above codes.</p> <p><strong>Read:</strong> <a href="http://www.howbloggerz.com/2016/06/ways-to-reduce-blogger-page-load-time.html"><u>How to Reduce Blogger Page load time</u></a></p>. <p class="ht">That's all!</p> <p>For any type of issue or suggestion, please comment below. Stay Updated! Browse Howbloggerz :)</p> <script src='https://dl.dropboxusercontent.com/s/nswg5z6fklfj3pp/drive-dropbox-link-generator-min.js' defer='defer' type='text/javascript'></script>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5141858361892798601.post-69611757621441749442019-03-10T23:16:00.000+05:302019-06-14T18:13:05.262+05:3013 Benefits of Blogging and Why People Do Blogs?<div class="datemod">Updated on: <span itemprop="dateModified">June 13, 2019</span></div> <div class="mainimg"><img alt="13 Benefits of Blogging and Why People Do Blogs" src="https://4.bp.blogspot.com/-65rN5DHrlK8/XQIYfIjYLdI/AAAAAAAAXow/NRAQMWW7XwMbKyXp1NMXW_hKkkMsKC_fACLcBGAs/s1600/15-Benefits-of-Blogging-and-Why-People-Do-Blogs.png"></div> <div class="bimg"><img alt="Benifits of blogging for student bussness education" src="https://2.bp.blogspot.com/-yDaDVObOz_w/XQIZC10TDfI/AAAAAAAAXo4/Y_MYG66hdTEfqqUzi3VdhUaJ7qiq33oQQCLcBGAs/s1600/Benifits-of-blogging-for-student-bussness-education.jpg" title="Importance of Blogging"></div> <p>When the blogging was started the first blog was really puffed up in online journals and the blogger was known as the professional blogger but the <strong>making money on the blogs</strong> was not the aim. After the passage of time, people start blogging for many different fields like education, health, fashion, entertainment, business, marketing and many more. Blogging becomes the most developed field over the last years and there are also a lot of <strong>benefits in blogging</strong>.</p> <a name='more'></a> <h2>Benefits of blogging</h2> <p>After the research, we discovered that blogging has so many benefits and that’s why we found some bonus benefits of the blogging which may be empowering and helpful for you and for your company</p> <h3>A chance to express yourself</h3> <div class="simg"><img alt="Why blogs are so popular" src="https://2.bp.blogspot.com/-wfLylSQFkZA/XQInDhdfQwI/AAAAAAAAXpc/Exj2NuchyYc_u-FouCoSbaUy76AbqIyMQCLcBGAs/s1600/why-blogs-are-so-popular.jpg" title="Express yourself"></div> <p>Blogs gave the platform to express your thoughts, feelings, and ideas according to your passion. Every famous blogosphere has his specific field in blog writing and he shares his ideas, suggestions, information’s, and thoughts in his field. Blogging provides the opportunity to connect with the network of people who belongs to the same passions.</p> <h3>Create a Difference</h3> <div class="simg"><img alt="reasons why should i blog" src="https://1.bp.blogspot.com/-ZAtmu8_vw48/XQIrAqqhmUI/AAAAAAAAXp0/8t3rTSlVlUYO2bM1CntXsk3mBeA2CVwNQCLcBGAs/s1600/reasons-why-should-i-blog.jpg" title="Create a difference"></div> <p>Some people write a blog on the same passion but still, their blogs look different from others. That’s why they become a famous blogger because there is always something unique in their blogs and this quality increase their fan following.</p> <h3>Polish Your Writing Skills</h3> <div class="simg"><img alt="why people reads blog" src="https://4.bp.blogspot.com/-2t5z2TIluLc/XQIpjc1_6II/AAAAAAAAXpo/d56kq43FX8QLsIB05zPdN3NOtQI6n9atgCLcBGAs/s1600/why-people-reads-blog.jpg" title="Improve your skills"></div> <p>Blogging is a great source to polish your writing skills because the more you write, the more you polish your skills. The professional bloggers write their blogs on a daily basis that’s why they have excellent writing skills. Though it is not important that good writers always write successful blogs.</p> <h3>Increase your visibility</h3> <div class="simg"><img alt="Purpose of Blog" src="https://2.bp.blogspot.com/-4jv8XAS8_GY/XQItDisTotI/AAAAAAAAXqA/MKGYgAZdF5kAtnAsRYZP659Hna25AB-_gCLcBGAs/s1600/purpose-of-blog.jpg" title="Increase your search visibility"></div> <p>If you want to become a visible writer then start blogging on social media. The social media provide you the visibility because people search for information on a daily basis. If your information is related to their searching then Google will show your content as people connect with your blogs and it will increase the chance of visibility.</p> <h3>Improve your memory</h3> <div class="simg"><img alt="Uses of Blog" src="https://2.bp.blogspot.com/-DULTPFnsUEA/XQIuZ4HgH9I/AAAAAAAAXqI/OCk809k_YSAkywcp05qmJl8AzUma8If7ACLcBGAs/s1600/uses-of-blogs.jpg" title="Enhance your memory"></div> <p>Practicing the mind through learning and writing is the most beneficial exercise to the neurons. We do physical exercise to make our body fit. The brain needs encouragement and action to make our nervous system fit. You will be stunned by what you will recall from taking an interest in mental bounding given by blogging exercises.</p> <h3>Make money</h3> <div class="simg"><img alt="Make Money from Blogs" src="https://1.bp.blogspot.com/-1oyxlVdwUDk/XQOMdKGW2-I/AAAAAAAAXqc/DLtSaPtZsC8aZBgqXZ9q_AVWQ5NbtJf2gCLcBGAs/s1600/make-money-from-blogs.jpg" title="Make money using Blogs"></div> <p>In the beginning, people did not write blocks with the intention of making money but nowadays blogging become the business, companies especially hires the bloggers. There are also freelance bloggers who write blogs generally. If you also want to make money through blogs then gain experience and specialities of a successful blogger.</p> <h3>Make your own network</h3> <div class="simg"><img alt="How much can we make with a blog" src="https://3.bp.blogspot.com/-Xx1WMAdwqvQ/XQON-8PjeFI/AAAAAAAAXqo/FK2dhrXpPsMxooVwjNXsjU6C6FRFTa6CgCLcBGAs/s1600/How-much-can-we-make-with-a-blog.jpg" title="Make your own network"></div> <p>Blogging is the community-based network and it is a great source to engage people in it. However, you are a sole proprietor and blogging for the marketing of your own business. This network will facilitate the growth of your product. Meanwhile, make your online networking strong it is the side benefits like achieving the access to important software, workshops, tools, seminars, and other community-based events.</p> <h3>Increasing Creativity</h3> <div class="simg"><img alt="Creative blog Writing" src="https://1.bp.blogspot.com/-HzUHs6DG0hU/XQOPERbBzpI/AAAAAAAAXqw/8sohLKnnlVgD_keL5w919EwI_OBxsp27gCLcBGAs/s1600/creative-blog-writing.jpg" title="Creativity"></div> <p>Writing on a regular basis will increase the creativity of your mind and focused also improve creativity. When someone starts doing consciously activities, it means that he starts thinking from out of the box.</p> <h3>Make your own online Portfolio</h3> <div class="simg"><img alt="Online portfolio" src="https://2.bp.blogspot.com/-D9f5ImmKCY8/XQOSKXrTSLI/AAAAAAAAXq8/Yquz38Sv8UwZZDL1u-p4-iJAMzn0OrpwACLcBGAs/s1600/online-portfolio.jpg" title="Portfolio"></div> <p>Blogging is a great source for seeking freelance writers and authors to make up an online portfolio. To displaying their writing skills on the huge platforms to spaciously reach with the freelancers that can also be built their contact and sign new customers.</p> <h3>Build FAQs on your website</h3> <div class="simg"><img alt="FAQ" src="https://1.bp.blogspot.com/-u2-LCkzXv8A/XQOS33obqBI/AAAAAAAAXrI/067bz-pJN-sUsf6X3W6hgbhw03rYp2jtwCLcBGAs/s1600/FAQ.jpg" title="FAQ"></div> <p>The blog is also the big source to create the Frequently Asked Questions on your website, the FAQ section of websites includes the general questions with the short answers. You can add the videos, pictures, and diagrams and also you can add the links of your blogs in the FAQ. By this, your victors can get the information about your blog topics which may they are searching. Because if the victors start researching in the middle of the night and your office isn’t open so, they can get the information by FAQs.</p> <h3>Learn about a group of People</h3> <div class="simg"><img alt="Why people do blogs" src="https://3.bp.blogspot.com/-NA4SWTqxbLc/XQOUYFotdaI/AAAAAAAAXrU/GRaasZiFlMsV8OkOrff7yJS-PbD6aa_fQCLcBGAs/s1600/Why-people-do-blogs.jpg" title="Meet new peoples like you"></div> <p>Blogosphere spends most of the time in the sharing of their ideas and thoughts on the insights of the readers. This is not one side transaction, if you look deeply, you will see the reader also shares a lot with you. Readers makes the will of the writers and you can learn a lot when you start reading their comments on your blogs. This learning helps you to know the demands of your reader and what type of blogs you have to write.</p> <h3>Collect your emails</h3> <div class="simg"><img alt="Email marketing" src="https://4.bp.blogspot.com/-zz_YUha5O2c/XQOVNEiP0cI/AAAAAAAAXrc/Yss0u2zbvLghIYdN6ZKPHah4hrbCTndBwCLcBGAs/s1600/email-marketing.jpg" title="Email Marketing"></div> <p>Emails are still the most authentic and official way of online communication. Officials check their emails on a regular basis because they are used to receiving important updates. To get the primary email of someone is not easy but if you get it, you can directly contact that person. By this, you can get their attention and you can directly inform them about your new blogs.</p> <h3>Help others by your blogs</h3> <div class="simg"><img alt="Help Others" src="https://1.bp.blogspot.com/-p_Y-6GwRCjw/XQOV5wWJeUI/AAAAAAAAXro/xd3haHPwf30m9bNN0CqnNF1uJLOxH27yQCLcBGAs/s1600/help-others.jpg" title="Help Others"></div> <p>Every good and informative blog help the readers because it is the free information that how to make online money. So many people think to facilitate their self by reading this information. There are so many categories of blogs like health, fashion, education, business and many more. So the blogs can help the people that are related to each of these categories. For instance, blogs can help people in losing weight, about new trends and fashion, about information related to education and different specific subjects. The blog educates the people and it is the powerful source of helping them.</p> <h2>Start writing your blog today</h2> <p>Nowadays technology and internet become the more entrenched part of our life. So, it is impossible to ignore the benefits of blogging and making a website because bloggers don’t need extraordinary degrees or HTML information. There are so many free platforms for blogging by them you can make yourself an expert in blogging then you can build your personal website by using blogger.com because it is simple and easy to use.</p> <div class="gauthor"><h3 style="color: #2EB983">Author's Bio</h3> <div class="authorpic" style="border-color: #d4edff"><img src="https://4.bp.blogspot.com/-tUDsANN6mfE/XIUacBsUt1I/AAAAAAAACyw/eWgQKMoBaZ41LyouIrWXG1TNU4pmGlBPQCLcBGAs/s1600/unnamed.jpg" alt="Joseph Carey" title="Joseph Carey" /></div><div class="authorbio">Joseph Carey is the notable writer and blogger, after completing his Bachelor’s in (Arts and English Language) Joseph starts writing essays, his every essay have quality and simple to read. Aside from his activities he stays dynamic on <a href="https://www.expertessaywriters.co.uk/" rel="nofollow" target="_blank"">@ExpertEssayWriters.co.uk</a></div></div>Unknownnoreply@blogger.com4tag:blogger.com,1999:blog-5141858361892798601.post-25416771349786219022018-04-09T10:44:00.000+05:302018-04-09T10:44:50.096+05:304 Pitfalls You Need To Avoid While Writing Blogs!<div class="datemod">Updated on: <span itemprop="dateModified">April 09, 2018</span></div> <div class="mainimg"><img alt="Mistakes to avoid while writing blogs" src="https://2.bp.blogspot.com/-3K5ZsmDEs9I/WrRzKBbhMKI/AAAAAAAAJjI/oOhzYZ5TMRA3AyYO5icjBURm38B4bMiuwCLcBGAs/s1600/Mistakes-to-avoid-while-writing-blogs.jpg"></div> <div class="simg"><img alt="Usual mistakes that blogger's do" src="https://2.bp.blogspot.com/-Za2dszrF6Bc/WrRzZbe-BVI/AAAAAAAAJjM/klx1Q2BuWlgvKLJb1HvO61Wd76_31TvwQCLcBGAs/s1600/usual-mistakes-that-bloggerz-do.jpg" title="Writing Blogs"></div> <p>For a newbie, Blogging can seem like a cool thing that he can do at the comfort of his personal space or the cubicle of his office. It is when he actually delves into this big world that he knows the realities of this demanding job.</p> <p>Many people consider blogging as just an <strong>extension of writing</strong>. However, the two are different in many ways. Unlike writing, blogging is a multifaceted job with various aspects including <strong>writing, search engine optimization, and publishing</strong> to name a few. So when you become a blogger, you have to do a sort of grounding before you can start blogging.</p> <p>Unfortunately, not many bloggers bother to go through the upskilling process prior to becoming a blogger which is why they commit serious blunders in the course of their blogging journey.</p> <p>Being a blogger myself, I’ve also done some serious goofs in the early <a href="http://www.howbloggerz.com/2018/02/blogging-in-2018.html" target="_blank">phase of blogging</a> that kept me from achieving my goals. But I don’t want you to suffer the ramifications of those mistakes and this is why I’ve rounded up some of the <strong>common pitfalls of blogging</strong> that you must avoid as a newbie blogger:</p> <a name='more'></a> <h2>1. Ignoring Your Audience</h2> <div class="simg"><img alt="blogging tips for beginners" src="https://1.bp.blogspot.com/-8q85Rsz-nUY/WrRznmzb6hI/AAAAAAAAJjQ/Vq-bgSQqh2winG_JKvqtzz1cGcpBNprzACLcBGAs/s1600/blogging-tips-for-beginners.jpg" title="First Things First"></div> <p>Blogging addresses a particular audience. When you start writing blogs without first learning about your <strong>target readers</strong>, you become just another voice in the cacophony of the blogging world. Being a blogger, you can get attention only when you address a specific audience that you can enrich with your articles.</p> <p>So before you jump into blogging, you need to sit down and think about the finely-grained audience who are going to benefit from your write-ups. <em>Are they fitness freaks? Are they food lovers? Are they traveling enthusiasts?</em></p> <p>And equally important to know are their geographic and socioeconomic background. Are they <em>North America, Europeans or Asians?</em> Are you going to address the elites of a particular region or will you be writing about the issues of the working class?</p> <p>Answering these questions will enable you to write articles on appropriate topics that will serve the right information to your audience.</p> <h2>2. Writing On Too Broad Topics</h2> <p>A blogger is as good or as bad as his topics are. What topics you pick for your articles define your scope of writing. Writing on too broad or generic topics will do no good to your audience. Let’s say you are a fitness blogger who educates people regarding their fitness and diet regimen. If you choose topics like <em>“How to stay healthy in life?”</em> or <em>“Best Foods For Your health?”</em> you are not going to help your audience as they are too general to do any good to them.</p> <div class="simg"><img alt="do and don'ts of blogging" src="https://4.bp.blogspot.com/-FOQIsTRYjT0/WrRz62W9chI/AAAAAAAAJjc/iH-pmTCLa1M3KIUSflEnsoN9N2DCI69OQCLcBGAs/s1600/do-and-donts-of-blogging.png" title="Google Topic Suggestions"></div> <p>To make the topics more viable to your audience, you need to focus more on specific topics like “How To Get Back Into Shape After Pregnancy?” or “The Best Foods To Fortify Your Gut Health”. Such topics are going to make more impact as they address the specific issues that factor in lives of your specific audience. Besides, you will be able to <strong>catch the attention of a more targeted segment of readers</strong>.</p> <h2>3. Building A Taut Style Of Writing</h2> <p>The preponderance of new blogs has one thing in common: They all have a highly formal or a sort of academic style of writing. The common features of such writing are the use of formal tone, jargons, <a href="http://www.howbloggerz.com/2016/04/how-to-change-email-subscription-delivery-time-blogger.html" target="_blank">technical terminologies</a>, and long paragraphs. Remember that blogging is entirely a different ballgame than writing academic journals or a literature paper. What new bloggers need to understand is that an article is only as good as easy it sounds.</p> <p>So you need to cultivate a writing style that can pull in the readers and make it easier for them to understand the gist of your blogs. In other words, you need to keep a <strong>conversational style of writing</strong>, make use of easy vocabulary and break your information into short paragraphs.</p> <h2>4. Not Posting Regularly</h2> <p>Just like any other successful things, blogging is effective only when you are consistent in your approach. Writing random posts not only confuse your readers, it also affects the flow of traffic on your blog.</p> <div class="simg"><img alt="tips for writing blogs" src="https://3.bp.blogspot.com/-twzcU2pVGJk/WrR0OY4WvZI/AAAAAAAAJjk/93ZJE72TUXQA4m70Uqr1GVhUBccfBmEHACLcBGAs/s1600/tips-for-writing-blogs.jpg" title="Not posting regulary"></div> <p>Let me draw an analogy here. I love reading Paulo Coelho. Every year, I look forward to his books and always grab the first copy. But whenever he takes a hiatus, I have no option but to read works of Elizabeth Gilbert or Ian McEwan.</p> <p>Similarly, your blog readers want to hear from you at regular intervals. Just like a fan, they look forward to new articles. But when you take long gaps between your write-ups, it frustrates your readers and they jump to other blogs.</p> <p>Apart from killing the interest of your readers, random blogging also hurts the flow of traffic to your blog. The reason is simple. The more articles you write, the more people subscribe to your blog which in turn pull in more people to your blog.</p> <p><a href="https://blog.hubspot.com/marketing/blogging-frequency-benchmarks" rel="nofollow" target="_blank">Hubspot reveals</a> that websites that publish 16 blogs in a month get <strong>3.5X more traffic</strong> than the bloggers who publish 0-4 articles in a month. Therefore, you can set 16 blogs as the least number of articles you should publish in a month. <p>To keep the frequency of your blogs in check, you need to create an editorial calendar and mention the posts along with the date of publishing.</p> <h3>Final Thoughts…</h3> <p>It is commonplace to see bloggers make silly mistakes like the ones that we mentioned above. So if the aforementioned blunders are the reasons of your flagging enthusiasm as a blogger then it is time to get back in the saddle and start blogging again.</p> <p>Share your experience, comment and let other know the mistakes you have done as a beginner.</p> <div class="gauthor"><h3 style="color: #2EB983">Author's Bio</h3> <div class="authorpic" style="border-color: #d4edff"><img src="https://4.bp.blogspot.com/-6bYhSvU1Od8/Wq4zuGxCneI/AAAAAAAAJhE/wWzDza25yEESgHuM8VMNaIEoFkd_XZFqACLcBGAs/s1600/Ishika-agarwal.png" alt="Ishika Agarwal" title="Ishika Agarwal" /></div><div class="authorbio">Ishika Agarwal is a content strategist and a proficient blogging geek at <a href="https://www.courseworkonline.co.uk" rel="nofollow" target="_blank">Coursework Online</a>. She loves to share blogging trends and interesting knowledge in her write ups.</div></div>Unknownnoreply@blogger.com6tag:blogger.com,1999:blog-5141858361892798601.post-50539567242147979852018-02-06T21:31:00.003+05:302020-10-14T21:21:44.674+05:30Blogging In 2018: How To Hit The Bull’s Eye?<div class="datemod">Updated on: <span itemprop="dateModified">October 14, 2020</span></div> <div class="mainimg"><img alt="Blogging In 2018" src="https://1.bp.blogspot.com/-3L6L-_lZ4z0/Wnl87ryzZAI/AAAAAAAAJCY/bi0w1ER_wUcbcRr9IbA3cPLiK-MXsw_twCLcBGAs/s1600/Blogging-In-2018-How-To-Hit-The-Bulls-Eye.jpg"></div> <div class="simg"><img alt="How to Boost Up Blog Traffic" src="https://3.bp.blogspot.com/-_DknpNzK1gw/Wnl9GC8nW2I/AAAAAAAAJCc/Ec7VeY_VU40wmUvvybfo8Stm1fEVnvbjACLcBGAs/s1600/How-to-Boost-Up-Blog-Traffic.jpeg" title="Blogging In 2018"></div> <p>2017 was another great year for the <strong>bloggers</strong>. As we step into 2018, there are many trends that bloggers need to implement in the current year. Some of them deserve a mention here:</p> <a name='more'></a> <h2>• Write More Long-Form Content</h2> <p>The web is a primary source of information for industry experts who read blogs to build their knowledge vault. They want to get quick information about their profession, a trend in their industry, or a new idea. In other words, reading blogs is a serious business for them. So they are not interested in reading a generic <em>500-word</em> long article.</p><p><a rel='nofollow' href='http://www.curata.com/blog/generate-more-leads-with-data-driven-content-marketing/' target='_blank'>According to Curata</a>, long-form content generates <strong>8X more page views, 3X more shares, and 9X more lead generation</strong>. Therefore, you need to serve in-depth information to your audience that a 500-word article can’t do. Being a professional blogger, it is important for you to write <strong><em>high-quality articles</em></strong> that can explain a topic to the core. Therefore, your articles have to be longer and meatier to get the attention of today’s online readers.</p><p><strong>In 2018, you have to commit yourself to writing long-form articles that can serve the readers with more helpful information and less fluff.</strong></p> <h2>• Publish More Vlogs</h2> <div class="simg"><img alt="Blogging Tips 2018" src="https://3.bp.blogspot.com/-dYamsAu--Rg/Wnl9SnxvOzI/AAAAAAAAJCg/qc8AO8NU8isT9PZrp-ANQ2y0251V-_U1gCLcBGAs/s1600/Blogging-Tips-2018.jpg" title="Publish vlogs"></div> <p>Video blogging was at the tipping point in 2017 and it is going to be even bigger in the current year. <a href='https://www.orbitmedia.com/blog/blogger-trends/' rel='nofollow' target='_blank'>According to Orbit Media</a>, videos are the leading form of visual content that bloggers incorporated in their articles, followed by audio, and lists.</p><p>Viewers love watching videos as it is interactive and they take less time to learn a topic as compared to reading an article. Besides, more people are logging in to YouTube to watch educational videos. <em>Tech crunch reveals that more than 1.5 billion of users log in to YouTube to watch video content</em>.</p><p><strong>In a nutshell, the video content is going to dominate the year 2018 in blogging.</strong></p> <h2>• Make A Schedule Of Your Blog Posts</h2> <p><a href='https://blog.hubspot.com/marketing/blogging-frequency-benchmarks' rel='nofollow' target='_blank'>HubSpot conducts a survey</a> to find out what frequency of posts produces better results. According to the survey, the business blogs that published more than sixteen blogs every month gained <strong>3.5X more visitors</strong> than the others. The point here is to publish more posts in a month. On an average, you need to publish at least <strong>20 posts in a month</strong>.</p> <h2>• Spice Up The Design Of Your Blog</h2> <div class="simg"><img alt="Best Blogger Theme" src="https://1.bp.blogspot.com/-hj6n0YBW04U/Wnl9dEjUrWI/AAAAAAAAJCo/Sd_MW929LuUgxfMi9HVBPADEdNlVUvaKgCLcBGAs/s1600/Best-Blogger-Themes.jpg" title="Blog Design"></div> <p>Blogs are no longer just about plain writing and there is a big deal of design work that goes into making your blog more appealing and functional to your audience. Today, the blogs look more like a website with plenty of buttons, widgets, and third-party applications to make it easier for the users to search or use anything. In 2018, there will be more bloggers who will work on their blog design and make it more user-friendly for the visitors.</p><p>So sit down with your designer and let him know the layout for your blog that includes all the ingredients of a contemporary web design.</p><p><a href='https://www.fiverr.com/saurabhjrl/do-ultimate-blogger-customization'><u><strong><em>Hire me to spice up your blog (Starting @ $5)</em></strong></u></a></p> <h2>• Keep Rocking The Social Media World</h2> <p>Social media continues to dominate the realm of content marketing. When other platforms struggle with keeping up with the demands of online users, social media takes the lead with its better functionalities. Live streaming is a recent example of how you can engage with <strong>millions of people in real-time</strong> within a matter of seconds. Using live streaming, you can now directly interact with your audience and let them about hottest things.</p><p>In addition, the visual content continues to attract more people on <strong><em>Instagram, Pinterest, and Tumblr</em></strong>. Today, these photo-sharing websites have become a podium for social celebrities and influencers to get the attention of the people and get them to their blogs.</p><p><strong>Therefore, if you want to beat the competition in this year, you need to slog more time on social media websites.</strong></p> <h2>• Strategize Your Blogging</h2> <p>Content Marketing Institute conducts a survey of the leading businesses in B2B content marketing. According to the survey, <em>the organization that has a documented content marketing strategy has 61% more successful than the competition</em>.</p> <p>To start off, you can set certain goals that include the monthly targets of your blog post. HubSpot recommends writing more than <strong>16 blog posts every month</strong> as it can allow you want to generate <strong>3.5X more traffic</strong> than your competitors. Therefore, if you want to grow more traffic on your blog in 2018, it is time to speed up your blogging and meet the mark of over 16 blog posts every month.</p> <p><strong>Read:</strong> <a href="/2016/06/ways-to-reduce-blogger-page-load-time.html"><u>Guide you need to Boost Up your blog loading time</u></a>.</p> <div class="gauthor"><h3>Author's Bio</h3> <div class="authorpic"><img src="https://4.bp.blogspot.com/-Bpz-bx1wdvw/Wnl9pK-ZADI/AAAAAAAAJCs/CM3mh-I_3pUDWUIYxa0v4P6zOikxR_aZQCLcBGAs/s1600/Jasmine-Demeester.png" alt="Jasmine Demeester" title="Jasmine Demeester" /></div><div class="authorbio">Jasmine Demeester is a Pro Blogger, Digital Marketer, and Expert Educator at <a rel='nofollow' href='http://www.dissertationhelpdeal.co.uk/' target='_blank'>Dissertation Help Deal</a>. Her articles address the current trends in digital marketing, blogging, and education. She is also a sports enthusiast who likes to engage in outdoor games.</div></div>Unknownnoreply@blogger.com2tag:blogger.com,1999:blog-5141858361892798601.post-55806353411768515352017-07-16T11:25:00.000+05:302018-01-11T16:11:23.645+05:30Setup Custom Domain In Blogger (with Images)<div class="datemod">Updated on: <span itemprop="dateModified">July 16, 2017</span></div> <p>Tutorial to <strong>Setup Custom Domain (third-party URL)</strong> in your blog to change your blogger blog URL from <strong>.blogspot to .com</strong> or any other top-level domain. You can also follow this tutorial if you have any problem in your custom domain or if it is <em>not working properly</em>.</p> <a name='more'></a> <div class="mainimg"><img alt="Setup Custom Domain In Blogger with Images and demo" border="0" src="https://1.bp.blogspot.com/-bWyR7GErDiQ/WWn4GFwdyYI/AAAAAAAAG68/NFiclcI-xUoOnqoQBtQYlMESDjJEE-NIwCLcBGAs/s1600/Setup-Custom-Domain-In-Blogger-with-Images.png" /></div> <p>Before proceeding further there are some terms that you should know to understand tutorial clearly.</p> <h2>What is the domain name?</h2> <p>Simply, a domain name is the string like <strong>www.example.com</strong> which point towards a website on the internet.<p>- <a href="https://en.wikipedia.org/wiki/Domain_name" target="_blank" title="Read more on Wikipedia">Wiki</a><br />- <a href="https://www.verisign.com/en_US/website-presence/online/how-dns-works/index.xhtml" rel="nofollow" target="_blank">Graphical working of DNS</a><br /> <h2>Where can I buy Domain Names?</h2> <p>You can buy domain names from an organization or commercial entity called domain registrars. There are approx. <strong title="According to ICANN">2943+ registrars</strong> over the internet and each of them has their own plans and prices.<p> <table class="hbz-table"> <tbody><tr> <th>Registrar Name</th> <th>$ USD</th> <th>₹ INR</th> </tr><tr> <td><a href="http://www.kqzyfj.com/click-8374994-11077921" rel="nofollow" target="_blank">1and1</a></td> <td>$0.99 / yr</td> <td>-</td> </tr><tr> <td><a href="https://www.godaddy.com" rel="nofollow" target="_blank">GoDaddy</a></td> <td>$0.99 / yr</td> <td>₹299 / yr</td> </tr><tr> <td><a href="http://www.kqzyfj.com/click-8374994-11429042" rel="nofollow" target="_blank">NameCheap</a></td> <td>$8.88 / yr</td> <td>₹568.67 / yr</td> </tr><tr> <td><a href="https://www.bigrock.in/deals-on-domains-aff?utm_source=affiliate&a_aid=594f9d6f02b7c&coupon=SEPCOM99AFF" rel="nofollow" target="_blank">Bigrock</a></td> <td>$9.99 / yr</td> <td>₹99 / yr <span title="Use this Promo Code">[SEPCOM99AFF]</span></td> </tr><tr> <td><a href="https://www.bluehost.com/track/howbloggerz/" target="_blank">Bluehost</a></td> <td>$11.99 / yr</td> <td>₹749 / yr</td> </tr></tbody></table> <p class="pnote"><strong>Note:</strong> The above given prices are for .com for 1st yr excluding additional fee (renew charges may be higher) - Updated on December 24, 2017</p> <p>You can compare the price and additional features. The buying process is easy, simply enter your desired domain name and complete the payment.</p> <p>You can also get <strong><a href="http://www.dot.tk/" rel="nofollow" target="_blank" title="Website who provide free domains">free domains</a></strong> like <strong>.tk .ml .ga .cf .gq</strong> etc but, I suggest you to go for paid option because all free domains are not free for lifetime you have to pay a renewal fee after a period of 1 year. Moreover, very less number of people use free domains. Have you seen any?</p> <p>In this tutorial, I am using <strong>GoDaddy to Setup Custom Domain in blogger</strong>. You can follow the same steps for <strong>Bigrock</strong>, <strong>NameCheap</strong> and other registrars.</p> <p class="pnote"><strong>Note:</strong> If you get confused with settings on other registrar's website then comment below or contact me.</p> <p><span style="color: #17a98c;"><strong>Step 1.</strong></span> <strong>Buy Domain name for your blog</strong> from any of the above-given registrars.</p> <p><span style="color: #17a98c;"><strong>Step 2.</strong></span> Log-in to your account and navigate to <strong>Domains</strong> > <strong>Manage</strong>.</p> <div class="simg"><img alt="add custom domain blogspot" src="https://4.bp.blogspot.com/-IvgohRnWusQ/WWdYxJRi0VI/AAAAAAAAG5M/WgHW8kkyERoVCDra7ftKuGmo9YWa-iCZgCLcBGAs/s1600/add-custom-domain-blogspot.png" title="Manage Domains" /></div> <p><span style="color: #17a98c;"><strong>Step 3.</strong></span> Click on '<strong>Manage DNS</strong>' .</p> <div class="simg"><img alt="how to setup custom domain on blogger with godaddy" src="https://3.bp.blogspot.com/-QyY4Qtq1aqs/WWdZGA86uUI/AAAAAAAAG5Q/ucDKeJl5-8cyQ5Uu0s_dXfXmEWQ2FXqPwCLcBGAs/s1600/how-to-setup-custom-domain-on-blogger-with-godaddy.png" title="Manage DNS Settings" /></div> <p><span style="color: #17a98c;"><strong>Step 4.</strong></span> Open new window on your browser and <strong>log-in into your blogger account</strong>.</p> <p><span style="color: #17a98c;"><strong>Step 5.</strong></span> Navigate to <strong>Settings</strong> > <strong>Basic</strong>.</p> <p><span style="color: #17a98c;"><strong>Step 6.</strong></span> Under <strong>Publishing</strong> > <strong>Blog Address</strong>. Click on '<strong>+ Set up a third-party URL for your blog</strong>'.</p> <div class="simg"><img alt="how to change blogspot to .com free" src="https://2.bp.blogspot.com/-PvdXaT3w0FE/WWdZS7cVSLI/AAAAAAAAG5U/aBdBH8gp2cQm5CQV_FSHqmKvoZDTGo0dACLcBGAs/s1600/how-to-change-blogspot-to-.com-free.png" title="Set up a third-party URL" /></div> <p><span style="color: #17a98c;"><strong>Step 7.</strong></span> Enter your newly purchased domain name and click '<strong>Save</strong>'.</p> <div class="simg"><img alt="get free domain for blogger" src="https://1.bp.blogspot.com/-PybRp-qC8x0/WVE_F5RF2cI/AAAAAAAAGxY/LzOGy0CF1S8w6gkPTQshYchAWHSek3YqQCLcBGAs/s1600/get-free-domain-for-blogger.png" title="Save 3rd Party Domain Settings" /></div> <p class="pnote"><strong>Note:</strong> Enter www, in the beginning, to make it work.</p> <p>You will see an error '<strong>We have not been able to verify your authority to this domain. Error 12</strong>' and two CNAMEs.</p> <div class="simg"><img alt="We have not been able to verify your authority to this domain. Error 12" src="https://3.bp.blogspot.com/-JljFazEkAqw/WVE_MJzabBI/AAAAAAAAGxc/1ONcXL1jHqIVbgMo-gcI1DtF45sShxG7ACLcBGAs/s1600/we-have-not-been-able-to-verify-your-authority-to-this-domain.png" title="We have not been able to verify your authority to this domain. Error 12" /></div> <p><span style="color: #17a98c;"><strong>Step 8.</strong></span> Open DNS setting window. Click on <strong>ADD</strong> and <em>enter the following data</em> to create new CNAME and click '<strong>Save</strong>'.</p> <div class="separator"><a href="https://1.bp.blogspot.com/-a8-Iwrvjo4M/WWdZv09RejI/AAAAAAAAG5Y/-0RK9PDwDeMFo6oVrKnhsjOsFIwKzjY7gCLcBGAs/s1600/blogger-custom-domain-not-working-1.png"><img alt="blogger custom domain not working" src="https://1.bp.blogspot.com/-0ddZb6DOErQ/WWdZvxXtumI/AAAAAAAAG5c/QwVjZ7rUluUiVi_-m40kNlErgZw5mxeDQCLcBGAs/s1600/blogger-custom-domain-not-working.png" title="ADD CNAME RECORD" /></a></div> <p class="pnote"><strong>Note:</strong> The first CNAME is same for everyone. Also, do not edit or delete any default entries (nameservers etc) in DNS settings unless you know what are you doing.</p> <p><span style="color: #17a98c;"><strong>Step 9.</strong></span> Again, click on <strong>ADD</strong> and <em>enter the following data</em>.</p> <p class="pnote"><strong>Note:</strong> In this case replace 'Host' and 'Points to' with the one given to you (open blogger window to find yours and then copy-paste it)</p> <div class="separator"><a href="https://2.bp.blogspot.com/-jakBu6xf31Y/WWdZ9zwvj1I/AAAAAAAAG5g/87a8r49-8NIro_KLnFbxb9xEYqTAk_CYwCLcBGAs/s1600/cname-records-1.png"><img alt="CNAME RECORDS" src="https://3.bp.blogspot.com/-AM-kkSCkzwQ/WWdZ-NAQikI/AAAAAAAAG5k/enUv8Cj9lEgV63ELSlbiq6RR3T49EOG0gCLcBGAs/s1600/cname-records.png" title="ADD CNAME RECORD" /></a></div> <p>then click <strong>save</strong>.</p> <p><span style="color: #17a98c;"><strong>Step 10.</strong></span> Again, click on <strong>ADD</strong> and <em>enter the following data</em> and then click <strong>save</strong>.</p> <div class="separator"><a href="https://4.bp.blogspot.com/-l_VG42uK8c4/WWdaTk9r5_I/AAAAAAAAG5s/qulzyG2OAA8ZtjgUju1eq1ir6XKIo3ZBACLcBGAs/s1600/how-to-add-custom-domain-to-blogger-bigrock-1.png"><img alt="how to add custom domain to blogger bigrock" src="https://3.bp.blogspot.com/-W0q-3ylTRjE/WWdaTk99voI/AAAAAAAAG5o/R7Qsq17BvNcH256a8e23MA7zkSX8jyX4ACLcBGAs/s1600/how-to-add-custom-domain-to-blogger-bigrock.png" title="Add A type record" /></a></div> <p><span style="color: #17a98c;"><strong>Step 11.</strong></span> Follow the same steps to <em>add three more records</em> with type '<strong>A</strong>' and Host '<strong>@</strong>'. Just replace '<strong>Points to</strong>' with <em>these values</em>.</p><p>216.239.34.21<br />216.239.36.21<br />216.239.38.21 </p> <div class="separator"><a href="https://4.bp.blogspot.com/-KSnTRRUA6P8/WWdauDUkRnI/AAAAAAAAG5w/W3TGVkn5MroysJhD71NNtDSl4CQT2FESACLcBGAs/s1600/blogspot-domain-price-1.png"><img alt="blogspot domain price" src="https://2.bp.blogspot.com/-9eMBu4fehHw/WWdauFfff_I/AAAAAAAAG50/E6pKwTntBjM7BIhAorMTWcjteXpFwettwCLcBGAs/s1600/blogspot-domain-price.png" title="All four A type records" /></a></div> <p><span style="color: #17a98c;"><strong>Step 12.</strong></span> Now <em>wait for an hour</em> for your DNS setting to get activated.</p> <p><span style="color: #17a98c;"><strong>Step 13.</strong></span> Follow step 7 again. This time there will be no error.</p> <p><strong>Read:</strong> <a href="/2016/12/add-blog-in-google-search-console.html"><u>How to Make My Blog Visible in Google Search Result</u></a></p> <p class="ht">That’s it</p> <p>You have successfully <strong>setup custom domain on blogger</strong>. Your blogspot.com address will be changed to your new custom domain. Be patient, as it might take up to <em>24 hours for the redirect to start working</em>. If you're still seeing an error after 24 hours, it means your settings weren't entered correctly and you should try the process again. Comment bellow for any other issue. Stay Updated, Browse Howbloggerz! :)</p>Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-5141858361892798601.post-10115844983428532132017-03-08T09:33:00.000+05:302019-05-06T05:18:06.871+05:30How to Generate HTML Sitemap Page on Blogger<div class="datemod">Updated on: <span itemprop="dateModified">May 06, 2019</span></div> <p>Before going forward to add <strong>Sitemap page</strong> it is very important to understand the difference between HTML sitemap and XML sitemap.</p> <h2>What is XML Sitemap?</h2> <p>Actually, the Search engine uses their respective web crawlers (bots) to discover pages from links within the site and from other sites. XML Sitemap is a .xml file attached to your website which supplies this data to crawlers. Sitemap file consists of all posts URL with additional information regarding each URL. The Search engine uses this data to index your posts in the best possible way. Use of XML Sitemap file guarantees that your web pages will get indexed in search engines.</p> <a name='more'></a> <div class="mainimg"><img alt="How to Generate HTML Sitemap Page on Blogger" border="0" src="https://2.bp.blogspot.com/-MYhIEFv_pvE/WLvrrGEp6kI/AAAAAAAAGEE/w6IkOjRrfesrWemdcGgSTIbgfI6Km1BNwCLcB/s1600/How-to-Generate-HTML-Sitemap-Page-on-Blogger.jpg" /></div> <p><a href="http://www.howbloggerz.com/2016/12/add-blog-in-google-search-console.html" target="_blank"><u>How to add and submit an XML sitemap to google and other search engines</u></a></p> <h2>What is HTML Sitemap?</h2> <p>HTML sitemap is a regular HTML page which can be read by search engine bots as well as by visitors. Web crawler treats it like a regular HTML page (with many links). The main purpose of the using HTML based sitemap is to represent all your posts in an organized manner so that your users can navigate all of your posts through a single page.</p> <div class="hbz-demo"><a href="http://howbloggerz.com/p/sitemap.html" rel="nofollow" target="_blank">DEMO</a></div> <p class="ht">Features</p>- Post list will update automatically with the addition of new posts.<br/>- Automatic addition of Suffix 'new' to newly added posts.<br/>- Sorted alphabetically (ascending)<br/> <h3>How to add sitemap page in blogger</h3> <p><strong>Note: This is <u>Label Based</u> Sitemap Page and you can only apply label based themes on it.</strong></p> <p><span style="color: #17a98c;"><strong>Step 1.</strong></span> Login to your Blogger account, then go to <strong>Pages</strong> > <strong>New page</strong>.</p> <div class="simg"><img alt="Create HTML based Sitemap Page on Blogger" src="https://3.bp.blogspot.com/-wUG7nbGYpMg/WJzGSsdQdjI/AAAAAAAAF4k/5FV73mqAqy4TaKwj1iWIUiK110MrCVDIgCLcB/s1600/Create-HTML-based-Sitemap-Page-on-Blogger.png" title="Create a new page" /></div> <p><span style="color: #17a98c;"><strong>Step 2.</strong></span> Enter "<strong>Site Map</strong>" in Page title field.</p><p><span style="color: #17a98c;"><strong>Step 3.</strong></span> Switch to <strong>HTML</strong> mode.</p> <div class="bimg"><img alt="How to add sitemap in blogger" src="https://1.bp.blogspot.com/-JnL4a1mMmoQ/WJzGksznqpI/AAAAAAAAF4o/nQevlOgCYOMyWF3_heMMg2UBEPWeHc3ZwCLcB/s1600/How-to-add-sitemap-in-blogger.png" title="Enter Page Name and switch to HTML mode" /></div> <p><span style="color: #17a98c;"><strong>Step 4.</strong></span> Enter following inside blank field.</p> <p class="pnote"><strong>Note:</strong> Clear any default code inside HTML field before pasting provided code.</p> <p><strong>Read:</strong> <a href="http://www.howbloggerz.com/2016/07/remove-ltr-trbidi-code-from-blogger-posts.html" target="_blank"><u>How to Automatically Remove Default Code from Blogger's Writing Panel</u></a><p> <pre><code><script type='text/javascript'><br /><br />var postTitle = new Array();<br />var postUrl = new Array();<br />var postPublished = new Array();<br />var postDate = new Array();<br />var postLabels = new Array();<br />var postRecent = new Array();<br />var sortBy = "titleasc";<br />var numberfeed = 0;<br /><br />function bloggersitemap(a) {<br /> function b() {<br /> if ("entry" in a.feed) {<br /> var d = a.feed.entry.length;<br /> numberfeed = d;<br /> ii = 0;<br /> for (var h = 0; h < d; h++) {<br /> var n = a.feed.entry[h];<br /> var e = n.title.$t;<br /> var m = n.published.$t.substring(0, 10);<br /> var j;<br /> for (var g = 0; g < n.link.length; g++) {<br /> if (n.link[g].rel == "alternate") {<br /> j = n.link[g].href;<br /> break<br /> }<br /> }<br /> var o = "";<br /> for (var g = 0; g < n.link.length; g++) {<br /> if (n.link[g].rel == "enclosure") {<br /> o = n.link[g].href;<br /> break<br /> }<br /> }<br /> var c = "";<br /> if ("category" in n) {<br /> for (var g = 0; g < n.category.length; g++) {<br /> c = n.category[g].term;<br /> var f = c.lastIndexOf(";");<br /> if (f != -1) {<br /> c = c.substring(0, f)<br /> }<br /> postLabels[ii] = c;<br /> postTitle[ii] = e;<br /> postDate[ii] = m;<br /> postUrl[ii] = j;<br /> postPublished[ii] = o;<br /> if (h < 10) {<br /> postRecent[ii] = true<br /> } else {<br /> postRecent[ii] = false<br /> }<br /> ii = ii + 1<br /> }<br /> }<br /> }<br /> }<br /> }<br /> b();<br /> sortBy = "titledesc";<br /> sortPosts(sortBy);<br /> sortlabel();<br /> displayToc();<br />}<br /><br />function sortPosts(d) {<br /> function c(e, g) {<br /> var f = postTitle[e];<br /> postTitle[e] = postTitle[g];<br /> postTitle[g] = f;<br /> var f = postDate[e];<br /> postDate[e] = postDate[g];<br /> postDate[g] = f;<br /> var f = postUrl[e];<br /> postUrl[e] = postUrl[g];<br /> postUrl[g] = f;<br /> var f = postLabels[e];<br /> postLabels[e] = postLabels[g];<br /> postLabels[g] = f;<br /> var f = postPublished[e];<br /> postPublished[e] = postPublished[g];<br /> postPublished[g] = f;<br /> var f = postRecent[e];<br /> postRecent[e] = postRecent[g];<br /> postRecent[g] = f<br /> }<br /> for (var b = 0; b < postTitle.length - 1; b++) {<br /> for (var a = b + 1; a < postTitle.length; a++) {<br /> if (d == "titleasc") {<br /> if (postTitle[b] > postTitle[a]) {<br /> c(b, a)<br /> }<br /> }<br /> if (d == "titledesc") {<br /> if (postTitle[b] < postTitle[a]) {<br /> c(b, a)<br /> }<br /> }<br /> if (d == "dateoldest") {<br /> if (postDate[b] > postDate[a]) {<br /> c(b, a)<br /> }<br /> }<br /> if (d == "datenewest") {<br /> if (postDate[b] < postDate[a]) {<br /> c(b, a)<br /> }<br /> }<br /> if (d == "orderlabel") {<br /> if (postLabels[b] > postLabels[a]) {<br /> c(b, a)<br /> }<br /> }<br /> }<br /> }<br />}<br /><br />function sortlabel() {<br /> sortBy = "orderlabel";<br /> sortPosts(sortBy);<br /> var a = 0;<br /> var b = 0;<br /> while (b < postTitle.length) {<br /> temp1 = postLabels[b];<br /> firsti = a;<br /> do {<br /> a = a + 1<br /> } while (postLabels[a] == temp1);<br /> b = a;<br /> sortPosts2(firsti, a);<br /> if (b > postTitle.length) {<br /> break<br /> }<br /> }<br />}<br /><br />function sortPosts2(d, c) {<br /> function e(f, h) {<br /> var g = postTitle[f];<br /> postTitle[f] = postTitle[h];<br /> postTitle[h] = g;<br /> var g = postDate[f];<br /> postDate[f] = postDate[h];<br /> postDate[h] = g;<br /> var g = postUrl[f];<br /> postUrl[f] = postUrl[h];<br /> postUrl[h] = g;<br /> var g = postLabels[f];<br /> postLabels[f] = postLabels[h];<br /> postLabels[h] = g;<br /> var g = postPublished[f];<br /> postPublished[f] = postPublished[h];<br /> postPublished[h] = g;<br /> var g = postRecent[f];<br /> postRecent[f] = postRecent[h];<br /> postRecent[h] = g<br /> }<br /> for (var b = d; b < c - 1; b++) {<br /> for (var a = b + 1; a < c; a++) {<br /> if (postTitle[b] > postTitle[a]) {<br /> e(b, a)<br /> }<br /> }<br /> }<br />}<br /><br /><br /><br />function displayToc() {<br /> var a = 0;<br /> var b = 0;<br /> while (b < postTitle.length) {<br /> temp1 = postLabels[b];<br /> document.write("");<br /> document.write('<div class="post-archive"><h4>' + temp1 + '</h4><div class="ct-columns">');<br /> firsti = a;<br /> do {<br /> document.write("<p>");<br /> document.write('<a " href="' + postUrl[a] + '">' + postTitle[a] + "");<br /> if (postRecent[a] == true) {<br /> document.write(' - <strong><span>New!</span></strong>')<br /> }<br /> document.write("</a></p>");<br /> a = a + 1<br /> } while (postLabels[a] == temp1);<br /> b = a;<br /> document.write("</div></div>");<br /> sortPosts2(firsti, a);<br /> if (b > postTitle.length) {<br /> break<br /> }<br /> }<br />}<br /><br /></script><br /><br /><script src="http://www.<span style="color: #FF7F27;">yourblog.blogspot.com</span>/feeds/posts/summary?alt=json-in-script&max-results=9999&callback=bloggersitemap" type="text/javascript"></script><br /></code></pre> <p class="pnote"><strong>Note:</strong> Dismiss any type of HTTPS errors.</p> <p><span style="color: #17a98c;"><strong>Step 5.</strong></span> Configuration</p><p>- Replace <code><span style="color: #FF7F27;">yourblog.blogspot.com</span></code> with your blog URL.</p><br /><p><span style="color: #17a98c;"><strong>Step 6.</strong></span> Under <strong>Page settings</strong> > inside Search Description field <strong>add page description</strong>.</p><p><span style="color: #17a98c;"><strong>Step 7.</strong></span> Click on <strong>Options</strong> > under Reader comments > select <strong>Don't allow</strong> > <strong>Done</strong>.</p> <div class="bimg"><img alt="Automatically updating tabular list of posts for blogspot" src="https://4.bp.blogspot.com/-ASUm3a8pvEs/WLuFPMMU_kI/AAAAAAAAGD0/dtb0hJPkwtgykSxwmDPK6d1EmjG2mHHIQCLcB/s1600/Automatically-updating-tabular-list-of-posts-for-blogspot.png" title="Additional page settings" /></div> <p><span style="color: #17a98c;"><strong>Step 8.</strong></span> Click <strong>Publish</strong>.</p> <p class="pnote"><strong>Note:</strong> This tutorial is only about to add <u>Simple HTML Sitemap</u>. You can apply different colorful themes on this sitemap.</p> <p><strong>Read:</strong> <a href="http://www.howbloggerz.com/2017/03/themes-for-blogger-sitemap-seql.html"><u>Themes of HTML Sitemap Page - Label based (SEQL)</u></a><p> <p class="ht">Happy Blogging!</p> <p>You have successfully added an <strong>HTML based sitemap page</strong> on your blog. Place your Site Map page link, wherever you would like to show your <em>Site Map page</em>. You can also apply different themes on this sitemap provided by Howbloggerz. For any issues related to above Tutorial Please Comment Below. Stay Updated, Browse Howbloggerz! :)</p>Unknownnoreply@blogger.com77tag:blogger.com,1999:blog-5141858361892798601.post-87359801174366757782017-03-05T19:37:00.000+05:302017-03-07T19:55:38.866+05:30Themes for Blogger Sitemap Label Based (SEQL)<div class="datemod">Updated on: <span itemprop="dateModified">March 05, 2017</span></div> <p>These are <strong>themes</strong> for HTML-based sitemap page provided by howbloggerz only and will not work for any other sitemap.<br /><br /> <a href="http://www.howbloggerz.com/2017/03/generate-html-sitemap-page-blogger.html" target="_blank"><u>How to Add Sitemap Page in blogger</u></a> - by howbloggerz</p> <a name='more'></a> <div class="mainimg"><img alt="Themes for Blogger Sitemap Label Based (SEQL)" border="0" src="https://4.bp.blogspot.com/-JmA5c1EUx7Y/WLvrrJ7B5ZI/AAAAAAAAGEM/nfHgEK964HgR1PYiFvxcTKeuqp_b2L5IwCLcB/s1600/SEQL-Label-based-sitemap-theme.jpg" /></div> <ul><li>Format - Label based</li><li>Design - SEQL</li><li>Responsive</li><li>Easy custom columns</li><li>No hidden script</li></ul> <div class="hbz-demo"><a href="http://www.howbloggerz.com/p/demo.html?url=http://howbloggerz-demo.blogspot.com/p/seql.html" rel="nofollow" target="_blank">DEMO</a></div> <div class="bimg"><img alt="" src="https://2.bp.blogspot.com/-9rF_maZmupM/WK8J3AZEdkI/AAAAAAAAF_c/SuXjU1A4uVoQ1FzRbBQkT45kEc8s3HS2ACLcB/s1600/Dark-Sitemap-theme.png" title=""/></div> <pre><code><link href="https://fonts.googleapis.com/css?family=Lato|Montserrat" rel="stylesheet"><br /><style type="text/css"><br /> .post-archive {<br /> width: 100%;<br /> padding: 20px 0;<br /> font-family: "Lato", sans-serif;<br /> }<br /> <br /> .post-archive h4 {<br /> border-bottom: 2px solid #E3E3E3;<br /> color: #333333;<br /> font-size: 20px;<br /> margin: 0 0 10px 2px;<br /> padding: 0 0 10px;<br /> font-family: "Montserrat", sans-serif;<br /> font-weight: 700;<br /> }<br /> <br /> .ct-columns {<br /> <span style="color: #1BBA1D;"><strong>-moz-column-count: 2</strong></span>;<br /> -moz-column-gap: 20px;<br /> -moz-column-rule: none;<br /> <span style="color: #1BBA1D;"><strong>-webkit-column-count: 2</strong></span>;<br /> -webkit-column-gap: 20px;<br /> -webkit-column-rule: none;<br /> <span style="color: #1BBA1D;"><strong>column-count: 2</strong></span>;<br /> column-gap: 20px;<br /> column-rule: none;<br /> }<br /> <br /> .ct-columns p {<br /> padding: 5px 0px;<br /> -moz-column-break-inside: avoid;<br /> -webkit-column-break-inside: avoid;<br /> -o-column-break-inside: avoid;<br /> -ms-column-break-inside: avoid;<br /> column-break-inside: avoid;<br /> display: inline-block;<br /> width: 100%;<br /> }<br /> <br /> .ct-columns p a {<br /> background: #242424;<br /> color: #fff;<br /> display: block;<br /> border: 2px solid #000;<br /> font-size: 14px;<br /> line-height: normal;<br /> border-radius: 5px;<br /> padding: 10px 15px;<br /> -webkit-transition: all .25s ease-in-out;<br /> -moz-transition: all .25s ease-in-out;<br /> -o-transition: all .25s ease-in-out;<br /> transition: all .25s ease-in-out;<br /> }<br /> <br /> .ct-columns p a:hover {<br /> background: #fff;<br /> color: #000;<br /> text-decoration: none;<br /> }<br /> <br /> .ct-columns p a span {<br /> color: rgb(255, 0, 0);<br /> }<br /> <br /> @media screen and (max-width: 768px) {<br /> .ct-columns {<br /> <span style="color: #00ACED"><strong>-moz-column-count: 2</strong></span>;<br /> -moz-column-gap: 10px;<br /> -moz-column-rule: none;<br /> <span style="color: #00ACED"><strong>-webkit-column-count: 2</strong></span>;<br /> -webkit-column-gap: 10px;<br /> -webkit-column-rule: none;<br /> <span style="color: #00ACED"><strong>column-count: 2</strong></span>;<br /> column-gap: 10px;<br /> column-rule: none;<br /> }<br /> }<br /> <br /> @media screen and (max-width: 550px) {<br /> .ct-columns {<br /> <span style="color: #FF6500"><strong>-moz-column-count: 1</strong></span>;<br /> -moz-column-gap: 0px;<br /> -moz-column-rule: none;<br /> <span style="color: #FF6500"><strong>-webkit-column-count: 1</strong></span>;<br /> -webkit-column-gap: 0px;<br /> -webkit-column-rule: none;<br /> <span style="color: #FF6500"><strong>column-count: 1</strong></span>;<br /> column-gap: 0px;<br /> column-rule: none;<br /> }<br /> }<br /></style><br /></code></pre> <div class="timg"><img alt="" src="https://3.bp.blogspot.com/-k3_06_emGCw/WK8J3umowbI/AAAAAAAAF_g/soVxSLZmPz4lwBy4RlFYcX_oAqAtNJtQwCLcB/s1600/Simple-Sitemap-Theme.png" title=""/></div> <pre><code><link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet"><br /><style type="text/css"><br /> .post-archive {<br /> width: 100%;<br /> padding: 20px 0;<br /> font-family: "Lato", sans-serif;<br /> }<br /> <br /> .post-archive h4 {<br /> border-bottom: 1px solid #EAEAEA;<br /> color: #333333;<br /> font-size: 20px;<br /> margin: 0 0 10px 2px;<br /> padding: 0px 10px 10px;<br /> }<br /> <br /> .ct-columns {<br /> <span style="color: #1BBA1D;"><strong>-moz-column-count: 2</strong></span>;<br /> -moz-column-gap: 20px;<br /> -moz-column-rule: none;<br /> <span style="color: #1BBA1D;"><strong>-webkit-column-count: 2</strong></span>;<br /> -webkit-column-gap: 20px;<br /> -webkit-column-rule: none;<br /> <span style="color: #1BBA1D;"><strong>column-count: 2</strong></span>;<br /> column-gap: 20px;<br /> column-rule: none;<br /> }<br /> <br /> .ct-columns p {<br /> padding: 0px;<br /> -moz-column-break-inside: avoid;<br /> -webkit-column-break-inside: avoid;<br /> -o-column-break-inside: avoid;<br /> -ms-column-break-inside: avoid;<br /> column-break-inside: avoid;<br /> display: inline-block;<br /> width: 100%;<br /> }<br /> <br /> .ct-columns p a {<br /> color: #0A12CE;<br /> display: block;<br /> font-size: 14px;<br /> line-height: normal;<br /> padding: 0px 15px;<br /> }<br /> <br /> .ct-columns p a:hover {<br /> color: #888CDD;<br /> }<br /> <br /> .ct-columns p a span {<br /> color: rgb(255, 0, 0);<br /> }<br /> <br /> @media screen and (max-width: 768px) {<br /> .ct-columns {<br /> <span style="color: #00ACED"><strong>-moz-column-count: 2</strong></span>;<br /> -moz-column-gap: 10px;<br /> -moz-column-rule: none;<br /> <span style="color: #00ACED"><strong>-webkit-column-count: 2</strong></span>;<br /> -webkit-column-gap: 10px;<br /> -webkit-column-rule: none;<br /> <span style="color: #00ACED"><strong>column-count: 2</strong></span>;<br /> column-gap: 10px;<br /> column-rule: none;<br /> }<br /> }<br /> <br /> @media screen and (max-width: 550px) {<br /> .ct-columns {<br /> <span style="color: #FF6500"><strong>-moz-column-count: 1</strong></span>;<br /> -moz-column-gap: 0px;<br /> -moz-column-rule: none;<br /> <span style="color: #FF6500"><strong>-webkit-column-count: 1</strong></span>;<br /> -webkit-column-gap: 0px;<br /> -webkit-column-rule: none;<br /> <span style="color: #FF6500"><strong>column-count: 1</strong></span>;<br /> column-gap: 0px;<br /> column-rule: none;<br /> }<br /> }<br /></style><br /></code></pre> <div class="timg"><img alt="" src="https://1.bp.blogspot.com/-cvT5H9NX22Y/WK8J3E1bR8I/AAAAAAAAF_U/q1a-1vFf1IYrQh3cby2ETgPjkhReynPygCLcB/s1600/Cute-Sitemap-Theme.png" title=""/></div> <pre><code><link href="https://fonts.googleapis.com/css?family=Didact+Gothic|Exo" rel="stylesheet"><br /><style type="text/css"><br /> .post-archive {<br /> width: 100%;<br /> padding: 20px 0;<br /> font-family: 'Didact Gothic', sans-serif<br /> }<br /> <br /> .post-archive h4 {<br /> border-left: 5px solid #D342DD;<br /> color: #333333;<br /> font-size: 20px;<br /> margin: 0 0 10px 2px;<br /> padding: 5px 10px;<br /> font-family: 'Exo', sans-serif;<br /> font-weight: 700;<br /> box-shadow: 0 0 5px #64446666;<br /> border-radius: 5px;<br /> }<br /> <br /> .ct-columns {<br /> <span style="color: #1BBA1D;"><strong>-moz-column-count: 2</strong></span>;<br /> -moz-column-gap: 20px;<br /> -moz-column-rule: none;<br /> <span style="color: #1BBA1D;"><strong>-webkit-column-count: 2</strong></span>;<br /> -webkit-column-gap: 20px;<br /> -webkit-column-rule: none;<br /> <span style="color: #1BBA1D;"><strong>column-count: 2</strong></span>;<br /> column-gap: 20px;<br /> column-rule: none;<br /> }<br /> <br /> .ct-columns p {<br /> padding: 5px 0px;<br /> -moz-column-break-inside: avoid;<br /> -webkit-column-break-inside: avoid;<br /> -o-column-break-inside: avoid;<br /> -ms-column-break-inside: avoid;<br /> column-break-inside: avoid;<br /> display: inline-block;<br /> width: 100%;<br /> }<br /> <br /> .ct-columns p a {<br /> background: #fff;<br /> color: #F568AD;<br /> display: block;<br /> border: 1px solid #C9AFCB;<br /> font-size: 15px;<br /> line-height: normal;<br /> border-radius: 0 3px 0;<br /> padding: 10px 15px;<br /> -webkit-transition: all .25s ease-in-out;<br /> -moz-transition: all .25s ease-in-out;<br /> -o-transition: all .25s ease-in-out;<br /> transition: all .25s ease-in-out;<br /> box-shadow: 5px 5px #F0EAED;<br /> }<br /> <br /> .ct-columns p a:hover {<br /> background: #fff;<br /> color: #D034E7;<br /> text-decoration: none;<br /> }<br /> <br /> .ct-columns p a span {<br /> color: rgb(231, 0, 255);<br /> }<br /> <br /> @media screen and (max-width: 768px) {<br /> .ct-columns {<br /> <span style="color: #00ACED"><strong>-moz-column-count: 2</strong></span>;<br /> -moz-column-gap: 10px;<br /> -moz-column-rule: none;<br /> <span style="color: #00ACED"><strong>-webkit-column-count: 2</strong></span>;<br /> -webkit-column-gap: 10px;<br /> -webkit-column-rule: none;<br /> <span style="color: #00ACED"><strong>column-count: 2</strong></span>;<br /> column-gap: 10px;<br /> column-rule: none;<br /> }<br /> }<br /> <br /> @media screen and (max-width: 550px) {<br /> .ct-columns {<br /> <span style="color: #FF6500"><strong>-moz-column-count: 1</strong></span>;<br /> -moz-column-gap: 0px;<br /> -moz-column-rule: none;<br /> <span style="color: #FF6500"><strong>-webkit-column-count: 1</strong></span>;<br /> -webkit-column-gap: 0px;<br /> -webkit-column-rule: none;<br /> <span style="color: #FF6500"><strong>column-count: 1</strong></span>;<br /> column-gap: 0px;<br /> column-rule: none;<br /> }<br /> }<br /></style><br /></code></pre> <div class="timg"><img alt="" src="https://3.bp.blogspot.com/-o_C6zrJmbQY/WK8J3kdL7XI/AAAAAAAAF_k/2emBaVANKKwSBcHAhahc5aWLrL2kB3o7QCLcB/s1600/Sleek-Sitemap-Theme.png" title=""/></div> <pre><code><link href="https://fonts.googleapis.com/css?family=Lato|Roboto" rel="stylesheet"><br /><style type="text/css"><br /> .post-archive {<br /> width: 100%;<br /> padding: 20px 0;<br /> font-family: "Lato", sans-serif;<br /> }<br /> <br /> .post-archive h4 {<br /> box-shadow: 0px -10px #ab494d inset, 0 0 120px #000 inset;<br /> color: #fff;<br /> font-size: 20px;<br /> margin: 0 0 10px 2px;<br /> padding: 5px 2px 15px 8px;<br /> font-family: "Roboto", sans-serif;<br /> font-weight: 700;<br /> border-radius: 5px 5px 0 0;<br /> }<br /> <br /> .ct-columns {<br /> <span style="color: #1BBA1D;"><strong>-moz-column-count: 2</strong></span>;<br /> -moz-column-gap: 20px;<br /> -moz-column-rule: none;<br /> <span style="color: #1BBA1D;"><strong>-webkit-column-count: 2</strong></span>;<br /> -webkit-column-gap: 20px;<br /> -webkit-column-rule: none;<br /> <span style="color: #1BBA1D;"><strong>column-count: 2</strong></span>;<br /> column-gap: 20px;<br /> column-rule: none;<br /> }<br /> <br /> .ct-columns p {<br /> padding: 5px 0px;<br /> -moz-column-break-inside: avoid;<br /> -webkit-column-break-inside: avoid;<br /> -o-column-break-inside: avoid;<br /> -ms-column-break-inside: avoid;<br /> column-break-inside: avoid;<br /> display: inline-block;<br /> width: 100%;<br /> }<br /> <br /> .ct-columns p a {<br /> background: #AB494D;<br /> color: #fff;<br /> display: block;<br /> border: 2px solid #3A3A3A;<br /> font-size: 14px;<br /> line-height: normal;<br /> border-radius: 4px;<br /> padding: 10px 15px;<br /> -webkit-transition: all .25s ease-in-out;<br /> -moz-transition: all .25s ease-in-out;<br /> -o-transition: all .25s ease-in-out;<br /> transition: all .25s ease-in-out;<br /> box-shadow: -1px -3px 2px #8f8c8c;<br /> }<br /> <br /> .ct-columns p a:hover {<br /> background: #27292E;<br /> color: #fefefe;<br /> text-decoration: none;<br /> }<br /> <br /> .ct-columns p a span {<br /> color: rgb(221, 233, 45);<br /> }<br /> <br /> @media screen and (max-width: 768px) {<br /> .ct-columns {<br /> <span style="color: #00ACED"><strong>-moz-column-count: 2</strong></span>;<br /> -moz-column-gap: 10px;<br /> -moz-column-rule: none;<br /> <span style="color: #00ACED"><strong>-webkit-column-count: 2</strong></span>;<br /> -webkit-column-gap: 10px;<br /> -webkit-column-rule: none;<br /> <span style="color: #00ACED"><strong>column-count: 2</strong></span>;<br /> column-gap: 10px;<br /> column-rule: none;<br /> }<br /> }<br /> <br /> @media screen and (max-width: 550px) {<br /> .ct-columns {<br /> <span style="color: #FF6500"><strong>-moz-column-count: 1</strong></span>;<br /> -moz-column-gap: 0px;<br /> -moz-column-rule: none;<br /> <span style="color: #FF6500"><strong>-webkit-column-count: 1</strong></span>;<br /> -webkit-column-gap: 0px;<br /> -webkit-column-rule: none;<br /> <span style="color: #FF6500"><strong>column-count: 1</strong></span>;<br /> column-gap: 0px;<br /> column-rule: none;<br /> }<br /> }<br /></style><br /></code></pre> <div class="timg"><img alt="" src="https://2.bp.blogspot.com/-Jf4x4U8nepc/WK8J3MdlW7I/AAAAAAAAF_Y/fwDR8zcfgbQ_XuUQAVXuejjoz2npoUQmQCLcB/s1600/Howbloggerz-Sitemap-Theme.png" title=""/></div> <pre><code><link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway" rel="stylesheet"><br /><style type="text/css"><br /> .post-archive {<br /> width: 100%;<br /> padding: 20px 0;<br /> font-family: 'Open Sans', sans-serif;<br /> }<br /> <br /> .post-archive h4 {<br /> border-bottom: 2px solid #EEEEEE;<br /> color: #333333;<br /> font-size: 20px;<br /> margin: 0 0 10px 2px;<br /> padding: 0 0 10px;<br /> font-family: 'Raleway', 'sans-serif';<br /> font-weight: 300;<br /> }<br /> <br /> .ct-columns {<br /> <span style="color: #1BBA1D;"><strong>-moz-column-count: 2</strong></span>;<br /> -moz-column-gap: 20px;<br /> -moz-column-rule: none;<br /> <span style="color: #1BBA1D;"><strong>-webkit-column-count: 2</strong></span>;<br /> -webkit-column-gap: 20px;<br /> -webkit-column-rule: none;<br /> <span style="color: #1BBA1D;"><strong>column-count: 2</strong></span>;<br /> column-gap: 20px;<br /> column-rule: none;<br /> }<br /> <br /> .ct-columns p {<br /> padding: 5px 0px;<br /> -moz-column-break-inside: avoid;<br /> -webkit-column-break-inside: avoid;<br /> -o-column-break-inside: avoid;<br /> -ms-column-break-inside: avoid;<br /> column-break-inside: avoid;<br /> display: inline-block;<br /> width: 100%;<br /> }<br /> <br /> .ct-columns p a {<br /> background: #fafafa;<br /> color: #333;<br /> display: block;<br /> border: 2px solid #FFFFFF;<br /> font-size: 14px;<br /> line-height: normal;<br /> outline: 1px solid #EEEEEE;<br /> padding: 10px 15px;<br /> -webkit-transition: all .25s ease-in-out;<br /> -moz-transition: all .25s ease-in-out;<br /> -o-transition: all .25s ease-in-out;<br /> transition: all .25s ease-in-out;<br /> }<br /> <br /> .ct-columns p a:hover {<br /> background: #fff;<br /> color: #000;<br /> text-decoration: none;<br /> }<br /> <br /> .ct-columns p a span {<br /> color: rgb(255, 0, 0);<br /> }<br /> <br /> @media screen and (max-width: 768px) {<br /> .ct-columns {<br /> <span style="color: #00ACED"><strong>-moz-column-count: 2</strong></span>;<br /> -moz-column-gap: 10px;<br /> -moz-column-rule: none;<br /> <span style="color: #00ACED"><strong>-webkit-column-count: 2</strong></span>;<br /> -webkit-column-gap: 10px;<br /> -webkit-column-rule: none;<br /> <span style="color: #00ACED"><strong>column-count: 2</strong></span>;<br /> column-gap: 10px;<br /> column-rule: none;<br /> }<br /> }<br /> <br /> @media screen and (max-width: 550px) {<br /> .ct-columns {<br /> <span style="color: #FF6500"><strong>-moz-column-count: 1</strong></span>;<br /> -moz-column-gap: 0px;<br /> -moz-column-rule: none;<br /> <span style="color: #FF6500"><strong>-webkit-column-count: 1</strong></span>;<br /> -webkit-column-gap: 0px;<br /> -webkit-column-rule: none;<br /> <span style="color: #FF6500"><strong>column-count: 1</strong></span>;<br /> column-gap: 0px;<br /> column-rule: none;<br /> }<br /> }<br /></style><br /></code></pre> <h2>Steps to Apply Sitemap Theme</h2> <p><span style="color: #17a98c;"><strong>Step 1.</strong></span> Login to your <strong>Blogger account</strong>, then go to <strong>Pages</strong> > Click <strong>edit</strong> under Site Map page.</p> <p class="pnote"><strong>Note:</strong> Make sure that <strong>HTML mode</strong> is on. if not, then toggle it on > click close button without saving the page and then open it again by clicking edit.</p> <p><span style="color: #17a98c;"><strong>Step 2.</strong></span> Click anywhere inside the input field and find the following code (use Ctrl + F):</p> <pre><code><script type='text/javascript'><br /></code></pre> <p><span style="color: #17a98c;"><strong>Step 3.</strong></span> <strong>Paste</strong> your theme code just above it (at the top).</p> <p class="pnote"><strong>Note:</strong> If you have applied any theme code before then remove it before applying new theme code.</p> <p><span style="color: #17a98c;"><strong>Step 4.</strong></span> Configuration.</p> <p>- To change the number of columns replace numeric value inside:</p> <ul><li>For <strong>laptop</strong> <code><span style="color: #1BBA1D;"><strong>-moz-column-count: 2</strong></span>, <span style="color: #1BBA1D;"><strong>-webkit-column-count: 2</strong></span>, <span style="color: #1BBA1D;"><strong>column-count: 2</strong></span></code></li><li>For <strong>ipad</strong> <code><span style="color: #00ACED"><strong>-moz-column-count: 2</strong></span>, <span style="color: #00ACED"><strong>-webkit-column-count: 2</strong></span>, <span style="color: #00ACED"><strong>column-count: 2</strong></span></code></li><li>For <strong>iphone</strong> <code><span style="color: #FF6500"><strong>-moz-column-count: 1</strong></span>, <span style="color: #FF6500"><strong>-webkit-column-count: 1</strong></span>, <span style="color: #FF6500"><strong>column-count: 1</strong></span></code></li></ul> <p><span style="color: #17a98c;"><strong>Step 5.</strong></span> Click <strong>Update</strong>.</p> <p class="pnote"><strong>Note:</strong> Dismiss any HTTPS error and Click on Update again.</p> <p>Not found any theme for your blog design? Send me your blog address via Contact Us page and i will try to add one for you in <em>upcoming sitemap themes</em>.</p> <p class="ht">hurray!</p> <p>You have successfully applied a <em>new theme</em> to your Site Map page. For any issues related to above Tutorial Please Comment Below. Stay Updated, Browse Howbloggerz! :)</p>Unknownnoreply@blogger.com4tag:blogger.com,1999:blog-5141858361892798601.post-54880960144097051732016-12-15T19:03:00.001+05:302020-03-29T13:32:33.525+05:30How to Add Your Blog in Google Search Console<div class="datemod">Updated on: <span itemprop="dateModified">March 29, 2020</span></div> <p><strong>Google Search Console</strong> (earlier known as Google Webmaster tools) is a collection of online professional web tools provided by google for free. GSC help you to manage your website for google search results. GSC include features like Search appearance, Search traffic analytic, error checking, website improvement suggestions and so <a href="https://support.google.com/webmasters/answer/4559176?hl=en" target="_blank"><u>more</u></a>.</p> <a name='more'></a> <div class="mainimg"><img alt="How to Attach Your Blog in Google Search Console" border="0" src="https://1.bp.blogspot.com/-eqjVAKuUf-Y/WE0dk8a2aPI/AAAAAAAAFBU/S7NwxrxvPxE0ZoLIElneh6OSPgnKVff1wCLcB/s1600/How-to-attach-your-blog-with-google-search-console.png" /></div> <p><span style="color: #17a98c;"><strong>Step 1.</strong></span> Go-to <a href="https://www.google.com/webmasters/tools" target="_blank">https://www.google.com/webmasters/tools</a> and then <strong>login with your google account</strong>.</p> <p><span style="color: #17a98c;"><strong>Step 2.</strong></span> Enter your <strong>blog address</strong> in the given area.</p> <ul class="pnote"><li><strong>For Custom domain users:</strong> http://www.example.com you can also use <strong><em>https</em></strong> instead of <strong><em>http</em></strong> if you have purchased SSL from your domain registrar.</li><li><strong>For Normal blogger users:</strong> http://www.example.blogspot.com you can also use <strong><em>https</em></strong> instead of <strong><em>http</em></strong> because blogger provide SSL for its sub-domains free of cost.</li></ul> <div class="bimg"><img alt="Submit your Blog on Google Search Console" src="https://2.bp.blogspot.com/-1n5mmUU2FWQ/WEw0WMi7cFI/AAAAAAAAFAo/L3uuWdiNfpI0pjjZNNtm8vGhZM1s5KL6gCLcB/s1600/Submit-your-Blog-on-Google-Search-Console.png" title="Add your blog URL" /></div> <p class="pnote"><strong>Note:</strong> If your are using https make sure https redirect is 'on' in Settings > Basic > HTTPS</p> <p class="pnote"><strong>Recommended:</strong> You can add all four possible properties of a domain to get best out of Webmaster tools. For Example, if you have a domain name <span style="color: #d34836;">example.com</span> then you can add following properties too:<br/><span style="color: #1a73e8;">http://example.com/ <br/>http://www.example.com/ <br/>https://example.com/ <br/>https://www.example.com/</span></p> <p><span style="color: #17a98c;"><strong>Step 3.</strong></span> If you have used same google account to login in search console that was linked with blogger account then your blog will <strong>automatically get verified</strong>.</p> <div class="separator"><a href="https://1.bp.blogspot.com/-mvj5Ii11Pgo/WEw0c-ybj2I/AAAAAAAAFAs/iw3RS6hxLgM4m1n33GvYEBIox0NyT8AVACLcB/s1600/Add-Your-blogspot-on-webmaster-tools.png" imageanchor="1"><img alt="Add Your blogspot on webmaster tools" border="0" src="https://1.bp.blogspot.com/-mvj5Ii11Pgo/WEw0c-ybj2I/AAAAAAAAFAs/iw3RS6hxLgM4m1n33GvYEBIox0NyT8AVACLcB/s1600/Add-Your-blogspot-on-webmaster-tools.png" title="Verify your blog" /></a></div> <p><span style="color: #17a98c;"><strong>Step 4.</strong></span> Click on "<strong>Not now</strong>".</p> <p class="pnote"><strong>Note:</strong> If you didn't get verified as an owner of website then you can use alternative given methods.</p> <p><strong>Read:</strong> <a href="http://www.howbloggerz.com/2016/12/submit-blogger-sitemap-to-google-search-console.html"><u>How to Add Sitemap in Google Search Console using Official sitemap URL</u></a>.</p> <p class="ht">Awesome!</p> <p>You can also verify the indexing for your blog by searching in the Google with "<span style="color: #d34836;">site:yourblog.com</span>". Replace <span style="color: #1a73e8;">yourblog.com</span> with the URL of your blog like here in my case it is site:howbloggerz.com.</p> <p class="pnote"><strong>Remember:</strong> Indexing process can take up to a week or more. be patient!</p> <p>Now you have successfully created your Search console account and have attached your blog with it. For any issues related to the above Tutorial Please Comment Below. Stay Updated, Browse Howbloggerz ! :)</p>Unknownnoreply@blogger.com17tag:blogger.com,1999:blog-5141858361892798601.post-10066933991155209512016-12-15T19:03:00.000+05:302016-12-15T19:03:31.302+05:30How to Submit Blogger Sitemap to Search Console<div class="datemod">Updated on: <span itemprop="dateModified">December 15, 2016</span></div> <p>It was already discussed <a href="http://www.howbloggerz.com/2016/12/add-blog-in-google-search-console.html" target="_blank"><strong>How to create account for your blog in Google Search Console</strong></a>. After creating your <strong>Google Search Console</strong> account you need to add your blog <strong>sitemap</strong> in it so that all of your blog posts can be indexed by google in search results for relevant queries. Moreover you can manage which post to show and which not in the results and more.</p> <a name='more'></a> <div class="mainimg"><img alt="Submit blogspot sitemap to google webmaster tools" border="0" src="https://4.bp.blogspot.com/-3lE7QBImCI8/WFFEuDP5vFI/AAAAAAAAFIM/-Lr_qyj5aRAGUOGRpXh8XhwtmYRj-tFxwCLcB/s1600/Submit-blogspot-sitemap-to-google-webmaster-tools.jpg" /></div> <h2>What is Sitemap?</h2> <p><blockquote class="quotz" cite="https://en.wikipedia.org/wiki/Sitemaps">According to Wikipedia The Sitemaps protocol allows a webmaster to inform search engines about URLs on a website that are available for crawling. A Sitemap is an XML file that lists the URLs for a site. It allows webmasters to include additional information about each URL: when it was last updated, how often it changes, and how important it is in relation to other URLs in the site. This allows search engines to crawl the site more intelligently. Sitemaps are a URL inclusion protocol and complement robots.txt, a URL exclusion protocol.</blockquote></p> <h2>How to add your blogger sitemap in search console</h2> <p>Many other tutorial website may suggest you to <strong>add sitemap using RSS URL</strong> which is messy, complex and of large size because before few years back blogger blogs doesn't have their sitemap xml file that's why many users use RSS/ATOM to serve as sitemap but recently blogger started providing sitemap xml file which is attached to each blogger blog. Moreover <strong>official blogger sitemap file</strong> is small in size, easy to understand and updated instantly with addition of new posts.</p> <p><span style="color: #17a98c;"><strong>Step 1.</strong></span> Open your <a href="https://www.google.com/webmasters/tools" target="_blank">Search console account</a>.</p> <p><span style="color: #17a98c;"><strong>Step 2.</strong></span> Navigate to <strong>Crawl</strong> > <strong>Sitemaps</strong> > <strong>ADD/TEST SITEMAP</strong>.</p> <div class="bimg"><img alt="Adding blogger sitemap to Google Search Console" src="https://2.bp.blogspot.com/-vllgDttMf9s/WFDid5atQqI/AAAAAAAAFHA/1xvEiQFHAAEQCQgVCt0fDv9pfixUpzjfwCLcB/s1600/adding-blogger-sitemap-to-google-search-console.png" title="Navigate to sitemap tab" /></div> <p><span style="color: #17a98c;"><strong>Step 3.</strong></span> Add <strong>sitemap.xml</strong> and click <strong>submit</strong>.</p> <div class="bimg"><img alt="How to submit your blog xml sitemap file" src="https://3.bp.blogspot.com/-Ks2q1eoZJVI/WFDi845sVvI/AAAAAAAAFHE/IbWp1hHucPYvTwO6kAAEgf6HcqNFdcnOACLcB/s1600/how-to-submit-your-blog-xml-sitemap-file.png" title="Add sitemap url" /></div> <p class="ht">UP!</p> <p><strong>Suggestion:</strong> In similar way you can submit your blog sitemap to Bing webmasters and others</p> <p>Your blog posts will start getting indexed in google results soon. For any issues related to above Tutorial Please Comment Below. Stay Updated, Browse Howbloggerz ! :)</p>Unknownnoreply@blogger.com10tag:blogger.com,1999:blog-5141858361892798601.post-82438099605668378572016-07-29T16:25:00.000+05:302016-11-20T17:08:43.947+05:305 Themes For Blogger Official Search Box Widget<div class="datemod">Updated on: <span itemprop="dateModified">November 20, 2016</span></div> <p><strong>Search box</strong> is the must have widget in each and every blog. Search box allows your readers to get access to your articles more easily by helping them to find the content what they are looking for. I have already published <strong><a href="http://www.howbloggerz.com/2016/02/stylish-search-boxes-blogger.html">Stylish search box widgets for blogger,</a></strong> but blogger also provide their <strong>official search box widget</strong>, which is basically known as Google Custom Search box.</p> <a name='more'></a> <div class="mainimg"><img alt="How to customize blogger official search widget" border="0" src="https://4.bp.blogspot.com/-fUKER0fTiCw/V5L4YlnA1cI/AAAAAAAAAj8/XqbxAY51ZpUl9tqLL_tDppO6e0Me8kb9wCKgB/s1600/How-to-customize-blogger-search-widget.jpg" /></div> <p><strong>Google Custom Search</strong> (<a href="https://cse.google.com">CSE</a>) is the best search box on the web because it gives you numbers of benefits that are hard to resist. For instance - Others 3rd party search boxes only analyses your post title with searched query to show search results, but CSE also analyses your post content, meta codes and many other things to show results so that your readers can get most relevant content. Actually, this work as same as Google Search works, but the only difference is that, you get only that data which is linked with your blog. Blogger users get this widget <strong>free of cost</strong> where as for non-blogger users its cost near about <em>$100/year</em>. You can add this widget by navigating to <strong>Layout</strong> > <strong>Add widget</strong> > <strong>Select Search box</strong> > <strong>Save</strong>.</p> <h2>CSS Themes for Blogger Default search box widget</h2> <p>The main reason why most of the bloggers don't want to add this official search widget is, that the <strong>look and feel of the widget is very very simple</strong> but allows you to change the look of the widget. To style and customize your Search widget you must have knowledge of CSS, but many of you don't, that's why, I created <strong>5 beautiful, professional and stylish themes for your widget</strong>. What all you need to do is the simple copy paste work. Go ahead, choose your design and follow the instructions.</p> <h2>Stylish CSS for blogger's Search widget</h2> <img border="0" alt="Simple style to customize blogger official search widget" title="Simple professional design " src="https://4.bp.blogspot.com/-47s3m75vb5c/V5LeXOMTnAI/AAAAAAAAAjc/H7iL2FTbEXIjWpeOCuuR0din_s5SFjBBQCLcB/s1600/simple-professional-custom-google-search-css.png" /> <pre><code>input.gsc-input{background-color:#fff;border-color:#CDCDCD!important;padding:6px!important;border-radius:5px 0 0 5px!important}input.gsc-search-button{margin-left:-1px!important;border:1px solid #ddd;padding:5px;border-radius:0 5px 5px 0;cursor:pointer}</code></pre> <img border="0" alt="Css for default search box" title="Official google search look" src="https://2.bp.blogspot.com/-o3--0_w-SY8/V5LeWvk05AI/AAAAAAAAAjY/lU1sVwtYUGo8w5qAwe2GRb_QQjx_aGjsgCLcB/s1600/custom-google-search-css.png" /> <pre><code>input.gsc-input{background-color:#fff;border-color:#62B3EC!important;padding:6px!important;height:17px;font-size:13px}input.gsc-search-button{margin-left:-1px!important;border:1px solid #62B3EC;padding:5px;border-radius:0 5px 5px 0;cursor:pointer;font-size:0;height:31px;width:31px;background:url(https://1.bp.blogspot.com/-ZJ9Ze0-zmMw/V5HsIRIztEI/AAAAAAAAAio/sLQreQ7dM3cnP7RsxkukoWXk9FowVN0sQCLcB/s1600/Search-icon.png) no-repeat center;background-color:#62B3EC;background-size:15px}.gsc-search-button:hover{background-color:#3B78E7;border-color:#3B78E7;border-radius:0 5px 5px 0}</code></pre> <img border="0" alt="Customize google blogspot search box" title="Professional looking search widget" src="https://2.bp.blogspot.com/-tWz0puqX1BM/V5LeWEkXt7I/AAAAAAAAAjQ/u6Dz8Z6RFt8XzgZ_n9MIukzMmIaAPE07ACLcB/s1600/beautiful-custom-google-search-widget-css.png" /> <pre><code>table.gsc-search-box td.gsc-input{padding-right:5px!important}input.gsc-input{background-color:#fff;border-color:#CCC!important;padding:6px!important;height:17px;font-size:15px;color:#9F999D;border-radius:3px 0 0 3px;border-width:1px 0 1px 1px !important}input.gsc-search-button{margin-left:-1px!important;border:1px solid #CCC;padding:5px;border-radius:0 3px 3px 0;cursor:pointer;font-size:0;height:31px;width:31px;background:#fff url(http://1.bp.blogspot.com/-b7DvNZpfZio/VbJw34qUQOI/AAAAAAAAAFU/MfOQrIYchKQ/s1600/search-icon.png) no-repeat center;border-width:1px 1px 1px 0}</code></pre> <img border="0" alt="Dark theme for blogger official search box widget" title="Design for dark blogs" src="https://2.bp.blogspot.com/-HS0koSKPE8E/V5LeWJrX31I/AAAAAAAAAjU/jKkG-B-ssg0c-gqKB_fs7cOgFUPtmPkWgCLcB/s1600/custom-google-search-box-css-for-dark-themes.png" /> <pre><code>table.gsc-search-box td.gsc-input{padding-right:40px!important}.gsc-search-button{display:none!important}input.gsc-input{padding:5px 0 8px 40px !important;height:22px;font-size:13px;color:#fff;border-radius:19px;border-width:0!important;width:100%!important;box-shadow:2px 3px 3px #292929 inset;background:#fff url(https://1.bp.blogspot.com/-ZJ9Ze0-zmMw/V5HsIRIztEI/AAAAAAAAAio/sLQreQ7dM3cnP7RsxkukoWXk9FowVN0sQCLcB/s1600/Search-icon.png) no-repeat scroll 16px 12px;background-color:#444;background-size:12px;text-shadow:1px 3px 3px #0B0A0A}</code></pre> <img border="0" alt="Beautiful CSS for default search widget" title="Beautiful search design" src="https://2.bp.blogspot.com/-lXhYzuqJUlU/V5LeV3Ro3WI/AAAAAAAAAjM/I7QmTCNOG-cyUmcmJMkSJ2G453WJPQM0QCLcB/s1600/Stylish-css-theme-for-blogger-official-custom-google-search-widget.png" /> <p class="pnote" style="padding: 20px 5px;"><strong>Recommended:</strong> For perfect experience of this style use colorful background image.</p> <pre><code>table.gsc-search-box td.gsc-input{padding-right:0!important}input.gsc-input{background-color:RGBA(0,0,0,0.5);padding:8px 15px!important;height:22px;font-size:15px;color:#fff;border-radius:19px;border-width:0!important;width:100%!important}input.gsc-search-button{margin-left:-5px!important;margin-right:5px!important;padding:5px;border-radius:50%;cursor:pointer;font-size:0;height:30px;width:30px;background:#fff url(http://1.bp.blogspot.com/-b7DvNZpfZio/VbJw34qUQOI/AAAAAAAAAFU/MfOQrIYchKQ/s1600/search-icon.png) no-repeat center;border-width:0}</code></pre> <h3>Steps: To customize blogger official search box</h3> <p><span style="color: #17a98c;"><strong>Step 1.</strong></span> Login to your blogger account > <strong>Dashboard</strong> > <strong>Template</strong> > <strong>Edit HTML</strong></p> <div class="simg"><img alt="Edit HTML Template" src="https://2.bp.blogspot.com/-rHEqb_6BZ3Y/VsndjhBdWzI/AAAAAAAAAO0/g91hZRJXZKoV65NqM3fQ8jQxukjbXrZRACKgB/s1600/Edit-template-blogger.png" title="Edit Template HTML" border="0"></div> <p><span style="color: #17a98c;"><strong>Step 2.</strong></span> Click anywhere inside the code and find the following code (use Ctrl + F):</p> <pre><code>]]></b:skin></code></pre> <p><span style="color: #17a98c;"><strong>Step 3.</strong></span> Just above <code>]]></b:skin></code> place you CSS code.</p> <p><span style="color: #17a98c;"><strong>Step 4.</strong></span> Click <strong>Save template</strong>.</p> <p class="ht">Great!</p> <p>Refresh your blog to see your <strong>beautiful, professional looking google search box</strong>. For any issues related to above Tutorial Please Comment Below. Stay Updated, Browse Howbloggerz ! :)</p>Unknownnoreply@blogger.com14tag:blogger.com,1999:blog-5141858361892798601.post-13109467407567330442016-07-21T14:21:00.000+05:302016-07-23T16:35:29.634+05:30Remove dir="ltr" trbidi="on" from Blogger Posts<div class="datemod">Updated on: <span itemprop="dateModified">July 21, 2016</span></div> <div class="mainimg"><img border="0" alt="Remove dir="ltr" trbidi="on" from Blogger Posts" src="https://1.bp.blogspot.com/-4N0ReVhxp7Y/V5CHXuH5ZDI/AAAAAAAAAhw/rMBgM9sYfjkOvND-MjRufSYZR-sE11oHgCLcB/s1600/Remove-ltr-trbidi-from-blogger-posts.png" /></div> <img class="bimg" alt="How to remove default code dir ltr trbidi on from blogger" title="How to remove default code from blogger posts" border="0" src="https://4.bp.blogspot.com/-h01nuo_DcAg/V5CHXja_KvI/AAAAAAAAAh0/P5ufzKv1BN0RQYD3KzY3kZJpiJKmNHlIQCLcB/s1600/steps-to-permanently-delete-default-code-from-blogger-posts.png" /> <p>All of you create posts in blogger, but have you ever notice that whenever you create a new post blogger by default add code <strong><div dir="ltr" style="text-align: left;" trbidi="on"></strong> at the top/starting of your blog post (in post HTML). Now the questions are, <i>Why blogger automatically adds that piece of code in your posts? What is the use of that code? Can we remove that code? What happen if we remove that code?</i></p> <a name='more'></a> <p>Actually the "ltr" and "trbidi" settings are used by blogger to support both "ltr" and "rtl" justified languages. This piece of code helps your readers to read translated Arabic, Syriac and Mandaean (or <a href="https://en.wikipedia.org/wiki/Right-to-left" target="_blank">rtl</a>) languages properly on your blog. This code is not necessary and you can <strong>remove this code</strong> from your post.</p> <p class="ht">PROS :-</p> <ul><li>Make your post code clean and tidy.</li><li>Remove override CSS code <strong>style="text-align: left;"</strong>.</li><li>Your readers can still translate your page by using tools like Google translator.</li><li>You can reverse the setting at any time (default setting).</li></ul> <p class="ht">CONS :-</p> <ul><li>Your blog can no more support translated "rtl" languages.</li></ul> <p>In 2015 blogger have officially provided the option to<strong> remove <div dir="ltr" style="text-align: left;" trbidi="on"> from posts</strong> with blogger setting. Yes! now it is so easy to remove the above code with only 3 easy simple steps.</p> <h2>How to Remove the code dir="ltr" trbidi="on" from all posts</h2> <p><span style="color: #17a98c;"><strong>Step 1.</strong></span> Login to your blogger account, then navigate to <strong>Settings</strong> > <strong>Language and formatting</strong>.</p> <p><span style="color: #17a98c;"><strong>Step 2.</strong></span> In the section "Enable transliteration" select <strong>disabled</strong>.</p> <img class="bimg" border="0" src="https://4.bp.blogspot.com/-wbneIjHyjQg/V5B7V_AGLBI/AAAAAAAAAhY/iEREb0c9wYIIxxrPnZqvi0s6XAD_NnfOQCLcB/s1600/How-to-disable-language-translation-in-blogger.png" alt="How to disable ltr and trbidi setting in blogger" title="Disable ltr and trbidi settings"/> <p><span style="color: #17a98c;"><strong>Step 3.</strong></span> Click <strong>Save settings</strong>.</p> <p style="opacity: 0.7;"><strong>Note:</strong> The code will no longer exist whenever you create new post but you have to manually edit the post HTML to remove code from already published posts.</p> <p class="ht">That's all!</p> <p>Refresh your blog posts list and create a new post. Switch to HTML, and you will find no such code in your blog. Don't thank me, thank blogger for giving us control. For any issues related to above Tutorial Please Comment Below. Stay Updated, Browse Howbloggerz! :)</p>Unknownnoreply@blogger.com9tag:blogger.com,1999:blog-5141858361892798601.post-17745798174851536852016-07-20T09:38:00.000+05:302016-07-20T09:46:35.313+05:30Search Results "Sort By Date" Order in Blogspot<div class="datemod">Updated on: <span itemprop="dateModified">July 20, 2016</span></div> <div class="mainimg"><img alt="How to set Sort by date as default sorting order in blogger" border="0" src="https://3.bp.blogspot.com/-EuhNkcAmZfg/V474fEvkb0I/AAAAAAAAAfw/S8SQsvszMxcGZFHUbfyelhJaaVKcdYtYQCLcB/s1600/Search-Results-Sort-By-Date-Order-in-Blogspot.png" /></div> <img class="bimg" alt="How to set default order for search result" src="https://1.bp.blogspot.com/-pZMfB9eTqu4/V4761cyQ6wI/AAAAAAAAAgA/_IknkUPGZI8ccD7fUHK_dd2JhyD26QRygCLcB/s1600/how-to-set-default-order-for-search-result1.png" title="How to set default order for search result" border="0"> <p>We have already discussed that <strong>Search is the necessary part of the blog/blogspot</strong> and whenever your users make search over it the resultant page shows <strong>results sorted by relevance for the give query</strong> for example:</p> <div class="simg"><img border="0" src="https://1.bp.blogspot.com/-cOo0oWVF9dc/V47XB8QEPfI/AAAAAAAAAfY/KRLpWuSBPwYtaK2O0OigdgFBqXbPdc9ygCLcB/s1600/Showing-posts-sorted-by-relevance-for-query-sample-Sort-by-date-Show-all-posts.png" alt="Showing posts sorted by relevance for query sample. Sort by date Show all posts" title="Default sorting order for search result"/></div> <p>Many of you want to <strong>change the order</strong> and would like to <strong>set "Sort By Date" as the default sorting order</strong> not "Sort by Relevance" so that your viewers can see your latest posts first without clicking on link each time to change the order. This method works only with 3rd party search boxes. Follow the given steps carefully.</p> <a name='more'></a> <h2>How To Set "Sort By Date" As Default Sorting Order</h2> <p><span style="color: #17a98c;"><strong>Step 1.</strong></span> Login to your Blogger account, then navigate to your 3rd party <a href="http://www.howbloggerz.com/2016/02/stylish-search-boxes-blogger.html" target="_blank"><strong>Search Box</strong></a> code.</p> <p>For example:</p> <pre><code><form action="/search" method="get"><br /><input type="text" name="q" placeholder="Type Here..."/><br /><input type="hidden" name="max-results" value="8"/><br /><input type="submit" value="Search" /><br /></form></code></pre> <p style="opacity: 0.7">Note: The above code may vary.</p> <p><span style="color: #17a98c;"><strong>Step 2.</strong></span> Find the code <code></form></code> and paste the following code just above it.</p> <pre><code><input name="by-date" type="hidden" value="true"/></code></pre> <p>For Example:</p> <pre><code><form action="/search" method="get"><br /><input type="text" name="q" placeholder="Type Here..."/><br /><input type="hidden" name="max-results" value="8"/><br /><input type="submit" value="Search" /><br /><input name="by-date" type="hidden" value="true"/><br /></form></code></pre> <p><span style="color: #17a98c;"><strong>Step 3.</strong></span> <strong>Save</strong> your code.</p> <p><strong>Read: <a href="http://howbloggerz.blogspot.com/2016/02/how-to-remove-change-showing-posts-with-label-blogger.html">How to Change Status message on search result page</a></strong></p> <p><span style="font-size: large;"><strong>Enjoy!</strong></span></p> <p>Jump into your blog and make a search. Wait! What? your <strong>search result is sorted by date</strong> not by relevance. Remember code may vary according to your search box, if the above tutorial doesn't work for you don't worry - comment below. Stay Updated, Browse Howbloggerz ! :)</p>Unknownnoreply@blogger.com4tag:blogger.com,1999:blog-5141858361892798601.post-86958157106968473942016-07-16T15:46:00.002+05:302020-07-28T21:12:56.222+05:30How to Increase Video Size in Blogger Posts<div class="datemod">Updated on: <span itemprop="dateModified">July 28, 2020</span></div> <div class="mainimg"><div class="separator" style="clear: both; text-align: center;"><img alt="How to increase video size in blogger posts" border="0" src="https://1.bp.blogspot.com/-qDL30oKhuSE/V4n5OIFqVrI/AAAAAAAAAek/GbL9Ta9jyxgWc_cmS-hIZ1BgEPncYF6qACLcB/s1600/how-to-increase-blogger-video-size.jpg" /></div></div> <img class="bimg" alt="Steps to change youtube video size for blogger posts" border="0" src="https://4.bp.blogspot.com/-dicsuMOE7Ss/V4n5OUz0mFI/AAAAAAAAAeo/5F_PfMAcTfMGTlDO2VedDpnesUI-ZVHzgCLcB/s1600/how-to-increase-youtube-video-size-in-blogger-posts.png" title="Increase YouTube video size for Blogger posts" /> <p><strong>Embedding a YouTube video</strong> in your blog post is the best practice to make your post content rich and visually effective. Moreover adding videos in your post helps you to <i><b>decrease the bounce rate</b></i> and <i><b>increases your revenue</b></i>.</p> <p>We can easily add videos on our posts by using blogger post editing tool bar but by default blogger post's video size is small and doesn't fill the whole post width, that small size can affect your video impact on readers. So, to <strong>increase the size of your blogger video</strong> (By maintaining its ratio) so that viewers can see clearly just follow the give tutorial with images.</p> <a name='more'></a> <div class="simg"><img alt="Post video before and after" border="0" src="https://1.bp.blogspot.com/-qVES2WdseYU/V4n8keyFW9I/AAAAAAAAAe8/iBORqRIcoecTLu3noMTKbyB2dIutxoXtgCLcB/s1600/blogger-post-video-before-and-after.jpg" title="Blogger post video before and after" /></div> <h2>Steps: How To Change YouTube Video Size</h2> <p><span style="color: #17a98c;"><b>Step 1.</b></span> Login to your blogger account > <b>Dashboard</b> > <b>Template</b> > <b>Edit HTML</b></p> <div class="simg"><img alt="Edit HTML Template" border="0" src="https://2.bp.blogspot.com/-rHEqb_6BZ3Y/VsndjhBdWzI/AAAAAAAAAO0/g91hZRJXZKoV65NqM3fQ8jQxukjbXrZRACKgB/s1600/Edit-template-blogger.png" title="Edit Template HTML" /></div> <p><span style="color: #17a98c;"><b>Step 2.</b></span> Click anywhere inside the code and find the following code (use Ctrl + F):</p> <blockquote class="tr_bq"></head></blockquote> <p><span style="color: #17a98c;"><b>Step 3.</b></span> Just above it place the following code:</p> <blockquote class="tr_bq"><script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'></script><br /><script><br />$('.BLOG_video_class').ready(function(){<br />$('.BLOG_video_class').parent().css({<br /> 'position': 'relative',<br /> 'padding-bottom': '56.25%',<br /> 'height': '0',<br /> 'clear': 'both',<br /> 'text-align': 'center',<br /> 'margin': '20px 0'<br />});<br /><br />$('.BLOG_video_class').css({<br /> 'position': 'absolute',<br /> 'top': '0',<br /> 'left': '0',<br /> 'width': '100%',<br /> 'height': '100%',<br />});<br />});<br /></script></blockquote> <p><span style="color: #17a98c;"><b>Step 4.</b></span> Click <b>Save template</b>.</p> <p><span style="font-size: large;"><b>Done !</b></span></p> <p>All of your embedded YouTube videos will be of full size and responsive with your post width. If you have and issue related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)</p>Unknownnoreply@blogger.com19tag:blogger.com,1999:blog-5141858361892798601.post-51464527406726262972016-06-14T06:46:00.000+05:302016-06-15T22:48:54.406+05:305 Ways To Reduce Blogger Page Load Time<div class="mainimg"><div class="separator" style="clear: both; text-align: center;"><img alt="Ways To Reduce Blogger Page Load Time" border="0" src="https://3.bp.blogspot.com/-9zqlfPQR98k/V19V_04WFmI/AAAAAAAAAWo/R-wIgG2hL0oRYDUosvmzwfUJx6el8tkhQCLcB/s1600/ways-to-boost-blogger-page-load-time.png" /></div></div><img alt="Time is now google ranking factor" border="0" src="https://1.bp.blogspot.com/-C9FjrNiGZeo/V19WJZZl8QI/AAAAAAAAAWw/BLG439L2p8MOy44x2MUzs883q35H5JANQCLcB/s1600/time-is-now-google-ranking-factor.png" style="margin: 0 0 20px 0; max-width: 100%;" title="Ways To Reduce Blogger Page Load Time 1" />The adage <i>“patience is a virtue”</i> doesn’t apply online. Even a one-second delay can drastically reduce pageviews, customer satisfaction and your lovely revenue. Actually, it’s not a secret at all, <b>Page load time</b> have long played a role in search engine rankings. Since 2010, Google has been accounting for a site speed in its algorithm for ranking. So what’s the biggest factor contributing to your <b>page speed</b>? - It takes browsers time to download the resource code that makes up your page. It has to download your HTML, your stylesheets, your scripts and your images. Each new feature weighs down your <b>blogger blog</b> just a little more.<br /><a name='more'></a><br />Did you know that if an e-commerce site is making $100,000 per day, a delay of 1 second in <b>page load time</b> can cost it an annual loss of $2.5 million. Research also shows that 47% of the readers expect that the websites should load within 2 seconds while a delay of more than 3 seconds can make 40% of your readers to abandon your site and I know you don't want to lose your users - that's why you're here :)<br /><br />Of course, a quick search on <b>how to improve page load time</b> turns up so many techniques. Minify CSS? JavaScript at bottom? but no specific instructions for <i>blogger blogs</i> BUT don't worry, I have prepared a list of ways for blogspot users, implementing these changes dramatically <b>improve your page load time</b>, even if you aren’t a total technical programmer. In this article, we’ll use both basic and advanced techniques you can use to optimize your blogger page load time.<br /><br /><br /><h2 style="text-align: left;">Ways To Improve Blogger Page Load Time</h2><br /><h3 style="text-align: left;">#1 - Optimize your images:</h3>Others ways may help you to reduce the page size in bytes, but image size can dramatically increase or decrease your page size in kilobytes (KB) and we have already discussed that <b>More Page size = More page load time</b>. Therefore <b>Image size was the most important factor in page load time</b>. Many times we upload images to increase the visual appeal of the posts, therefore its become important to<b> optimize</b> the images. As <b>Blogger</b> by default doesn't optimize the images we upload, so we have to optimize the images before uploading.<br /><br /><ul style="text-align: left;"><li>Use online image compressing tool like <a href="http://tinypng.com/" rel="nofollow" target="_blank">Tingpng</a>, <a href="http://www.imageoptimizer.net/" rel="nofollow" target="_blank">ImageOptimizer</a> to optimize images without compromising with image quality.</li><li>Crop your images to the correct size. For Example: If your main page width is 600px, resize the image to that width. Don’t just upload a 2000px-wide image and set the width parameter (width=”600”). This slows your page load time and creates a bad user experience.</li></ul><br /><span style="color: #444444;">Recommended: Use JPEG or PNG Image format, though all browsers fully support them.</span><br /><br /><br /><h3 style="text-align: left;">#2 - Reduce numbers of posts on your homepage:</h3>Homepage was the most important page in the blog, it's like first impression and we know "<b><i>First impression matters</i></b>". Homepage itself speak all about your blog, most of the users use your homepage for navigation purpose. According to a study, 90% of the visitor consider homepage as important factor for blog quality. If your homepage is visually appealing but <b>slow in loading</b>, 55% of the user may abondon your blog. Even if your writing quality content. Therefore by reducing the numbers of posts per page, we can dramatically <b>improve homepage load time</b> of our blogspot blog.<br /><br />- Goto <b>Settings</b> > <b>Posts, comments and sharing</b> > Change "<b>Show at most</b>" value.<br />- Click <b>Save</b>.<br /><br /><span style="color: #444444;">Recommended: show at most 6-8 posts on homepage.</span><br /><br /><b>Read: <a href="http://www.howbloggerz.com/2016/02/custom-stylish-search-boxes-blogger.html" target="_blank">Stylish Search Boxes with limited number of posts per page</a>.</b><br /><br /><br /><h3 style="text-align: left;">#3 - Reduce numbers of Widgets</h3>Adding widgets was a cool feature in <b>blogger</b> and blogger lets you add as many widgets as you want. But remember, adding too many widgets can increase HTTP requests which effects your page load time very badly. Therefore always use limited numbers of widgets on your blog.<br /><br /><ul style="text-align: left;"><li>Remove unwanted and non-essential widgets.</li><li>Use at max 5 widgets on a page.</li><li>Create page instead of widget (but should be relevant). For Example: You can create contact page instead of adding contact widget.</li><li>Show or Hide widgets on Specific page.</li></ul><br /><br /><h3 style="text-align: left;">#4 - Minify JavaScripts and CSS</h3>Compressing (Minify) your code is also useful for interpreted languages that run over the Internet, such as CSS and JavaScript. It reduces the the size of the file (code) without harming your code. SORRY to say again that "More page size = More page load time".<br /><br />Before we move further, its important to learn more about the benefits of External source code. If the code is External, it can easier be cached by browsers. (Cached means: Your file will be downloaded once and can be executed many time, through out the blog without downloading again and again). Of course this will <b>optimize your page load time</b> :)<br /><br /><ul style="text-align: left;"><li>Convert inline JavaScript to External JavaScript, then minify them and place at the end (same as #5).</li><li>Convert inline CSS to External file, then compress the code.</li></ul><br /><b>Read: <a href="http://www.howbloggerz.com/2016/06/convert-inline-css-javascript-external-file.html" target="_blank">How to Convert Inline JavaScript to External file in blogger</a></b><br /><br />To minify CSS, try <b><a href="http://csscompressor.com/" rel="nofollow" target="_blank">CSScompressor</a></b>. To minify Javascript, try <b><a href="http://javascript-compressor.com/" rel="nofollow" target="_blank">Javascript-Compressor</a></b>.<br /><br /><h4 style="text-align: left;">How to Minify CSS and JavaScript:</h4>1. Copy and paste your CSS or JavaScript in blank, input field.<br />2. Click Compress.<br />3. Again copy and paste your output code in your file, and save the file.<br /><br /><b>Note:</b> Don't move CSS file at the end of body. (Optional) You can place CSS file above </head> tag.<br /><br /><br /><br /><h3 style="text-align: left;">#5 - Move JavaScripts at the Bottom</h3>Pages always load from top to bottom and the code placed first in the HTML document, run first and so on. JavaScripts take few seconds to get fully executed and thereby increases the <b>page load time</b>, Therefore JavaScripts should be placed at the end of body so that important code can load first to display page faster.<br /><br /><b>Note:</b> Don't move default, blogger JavaScripts. <span style="color: #cc0000;"><b>Important!</b></span> <a href="http://www.howbloggerz.com/2016/04/backup-restore-blogger-posts-content-template.html" target="_blank"><b>Backup your templates</b></a> before applying these options <span style="color: #666666;">(If anything went wrong, you can revert it easily)</span>.<br /><br />These options are only for custom features. For example: <a href="http://www.howbloggerz.com/2016/02/custom-stylish-search-boxes-blogger.html" rel="nofollow" target="_blank"><b>Custom Search Box</b></a>, <a href="http://www.howbloggerz.com/2016/02/stylish-email-social-media-subscription-widgets-for-blogger.html" target="_blank"><b>Custom Subscription box</b></a>, <a href="http://www.howbloggerz.com/2016/03/custom-stylish-responsive-jquery-lightbox-for-blogger.html" target="_blank"><b>Custom Lightbox for blogger</b></a> etc.<br /><br /><br />- Move the Inline JavaScript code above<span style="color: white;"> <span style="background-color: #3d85c6;"></body></span></span> tag.<br /><br /> For Example:<br /><blockquote class="tr_bq"><script> Your code </script> <br /> or<br /><script type="text/javascript"> Your code </script></blockquote><br /><br />- Also Place External JavaScript at the end.<br /><br /> For Example:<br /><blockquote class="tr_bq"><script src="http://javascript.js"/><br /> or<br /><script src="http://javascript.js"></script><br /> or<br /><script type="text/javascript" src="http://javascript.js"/><br /> or<br /><script type="text/javascript" src="http://javascript.js"></script></blockquote><br /><h4 style="text-align: left;">Steps: To move JavaScript at Bottom</h4>1. Copy your JavaScript code with <script> ... </script> tag.<br />2. Login to blogger, then navigate to <b>Dashboard </b>><b> Template</b> > <b>Edit HTML</b>.<br />3. Use ctrl+f and find code <span style="color: white;"><span style="background-color: #3d85c6;"></body></span></span>.<br />4. Just above it place your JavaScript.<br />5. Click <b>Save</b>.<br /><br /><br /><br /><span style="font-size: large;"><b>Finally, its over</b></span><br /><br />Now, its time to check out the magic. Don't forget to share your experience below. Stay Updated, Browse Howbloggerz ! :)Unknownnoreply@blogger.com3tag:blogger.com,1999:blog-5141858361892798601.post-9520760490309067022016-05-25T12:58:00.000+05:302016-06-16T12:15:11.797+05:305 Steps to Add Signature to Blogger Posts (with Demo)Do you want to <b>add a signature text or image to your Blogger posts</b>? Post signature is usually a text or an image at the end of each post, <b>adding custom signature to your blogger posts</b> not only give it certain flair but also gives a visible stamp of your authority over your blog content. You can manually <b>insert signature</b> to new blog posts but what about old post, its not easy to <b>add signature</b> manually in already published posts specially if they are in hundreds.<br /><a name='more'></a><br />Don't worry your are howbloggerz user, nothing is impossible here. I have created a set of CSS and HTML code to <b>automatically add signature in old and upcoming new posts</b>. The best part about this method is that you can edit your signature at any time and the changes will reflect on every post.<br /><div class="mainimg"><div class="separator" style="clear: both; text-align: center;"><img alt="How to add signature to blogger posts" border="0" src="https://2.bp.blogspot.com/-wSqRoY-zK8U/V0Vw9LkgiPI/AAAAAAAAASU/ov-R-rseCD45L2vjZmsExVQ1-iHVEq3VACLcB/s1600/How-to-add-signature-to-blogger-posts.png" /></div></div><br />There are two types of <i>signature</i> you can add either text or image and both have different way of installing therefore i have added instruction for both types with images and created a demo to make you have a look.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-TMWFzBzSIWw/V0VBxeV0oDI/AAAAAAAAAR0/fa1OcU7BYh47fOpcag82-2bBlElR9M6rgCLcB/s1600/added-signature-to-post.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Added signature to blogger posts" border="0" height="468" src="https://2.bp.blogspot.com/-TMWFzBzSIWw/V0VBxeV0oDI/AAAAAAAAAR0/fa1OcU7BYh47fOpcag82-2bBlElR9M6rgCLcB/s640/added-signature-to-post.png" width="640" /></a></div><h4 style="text-align: center;"><div class="hbz-demo"><a href="http://howbloggerz-demo.blogspot.com/" rel="nofollow" target="_blank">DEMO</a></div></h4><br /><br /><h2 style="text-align: center;">How to Add Signature to Blogger Posts</h2><br /><br /><span style="color: #17a98c;"><b>Step 1.</b></span> Login to your blogger account > <b>Dashboard</b> > <b>Template</b> > <b>Edit HTML</b><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-rHEqb_6BZ3Y/VsndjhBdWzI/AAAAAAAAAO0/g91hZRJXZKoV65NqM3fQ8jQxukjbXrZRACKgB/s1600/Edit-template-blogger.png" style="margin-left: 1em; margin-right: 1em;"><img alt="how to edit blog template for adding signature in posts" border="0" src="https://2.bp.blogspot.com/-rHEqb_6BZ3Y/VsndjhBdWzI/AAAAAAAAAO0/g91hZRJXZKoV65NqM3fQ8jQxukjbXrZRACKgB/s1600/Edit-template-blogger.png" title="" /></a></div><br /><br /><span style="color: #17a98c;"><b>Step 2.</b></span> Click anywhere inside the code and find the following code ( use Ctrl + F ) :<br /><br /><blockquote class="tr_bq"><div class='post-footer'></blockquote><br /><span style="color: #444444;">Note : There are two occurrence of the above code. 1st occurrence for mobile view and second for desktop.</span><br /><br /><br /><span style="color: #17a98c;"><b>Step 3.</b></span> Just above <span style="background-color: #0b5394;"><span style="color: white;"><b><div class='post-footer'></b></span></span> Place the following code:<br /><br /><br /> <ul class="tabs"><li><a href="#tab1"><h4>To Add Text Signature </h4></a></li><li><a href="#tab2"><h4>To Add Image Signature </h4></a></li></ul> <div id="tabs-content"><div id="tab1"><blockquote class="tr_bq"> <style type="text/css"><br />.hbz-signature {<br /> font-size: <span style="color: white;"><span style="background-color: #38761d;">22</span></span>px;<br /> font-family: <span style="color: #0b5394;"><b>Papyrus,fantasy</b></span>;<br /> text-shadow: 5px 2px 2px <span style="color: #cc0000;"><b>#dddddd</b></span>;<br /> margin-top : 30px;<br /> text-color: <span style="color: #e69138;"><b>#222222</b></span>;<br />}<br /><br />.hbz-signature span {<br /> font-size: 14px;<br /> vertical-align: top;<br />}<br /> </style><br /> <div class="hbz-signature"><span>By</span> <b><span style="color: #a64d79;">You Name</span></b></div></blockquote></div><div id="tab2"><blockquote class="tr_bq"> <style type="text/css"><br />.hbz-signature {<br /> margin-top: 30px;<br />}<br /><br />.hbz-signature img {<br /> background: transparent none repeat scroll 0% 0%;<br /> border: medium none;<br /> box-shadow: none;<br />}<br /> </style><br /> <div class="hbz-signature"><img src="<span style="color: #3d85c6;"><b>Your Signature Image URL</b></span>" alt="<span style="color: #38761d;"><b>Your Image Name</b></span>"/></div></blockquote></div></div><br /><br /> <span style="color: #17a98c;"><b>Step 4.</b></span> Configuration of Code:<br /><br /><br /><h3 style="text-align: left;">For Text Signature:</h3><ul style="text-align: left;"><li>Adjust the value <span style="color: white;"><span style="background-color: #38761d;">22</span></span> to change font size of text.</li><li>Replace the value <span style="color: #0b5394;"><b>Papyrus,fantasy</b></span> to change the font family of the text (<b><a href="http://www.cssfontstack.com/" rel="nofollow" target="_blank">List of Font Family</a></b>).</li><li>Replace the value <span style="color: #cc0000;"><b>#dddddd</b></span> to change text shadow color (<b><a href="http://www.html-color-codes.info/" rel="nofollow" target="_blank">Color Codes</a></b>).</li><li>Replace the value <span style="color: #e69138;"><b>#222222</b></span> to change text color.</li><li>Replace <b><span style="color: #a64d79;">You Name</span></b> with your name or with any other text.</li></ul><br /><h3 style="text-align: left;">For Image Signature:</h3>Note: To create your Signature image you can use photo editing software on your mobile or machine, or the online <b><a href="http://www.pixlr.com/" rel="nofollow" target="_blank">Pixlr</a></b> editor.<br /><br />If you don't know much about editing, you can use tool <b><a href="http://www.mylivesignature.com/" rel="nofollow" target="_blank">Mylivesignatue</a> </b>(<i>Recommended</i>).<br /><br /><ul style="text-align: left;"><li>Replace <span style="color: #3d85c6;"><b>Your Signature Image URL</b></span> with the URL of the image.</li><li>Replace <span style="color: #38761d;"><b>Your Image Name</b></span> with name of the image.</li></ul><b>Read : <a href="http://www.howbloggerz.com/2016/03/get-find-url-upload-image-blogger.html" target="_blank">How to Get the URL of an Image </a></b><br /><ul style="text-align: left;"></ul><br /><span style="color: #17a98c;"><b>Step 4.</b></span> Click <b>Save template</b>.<br /><br /><br /><h4>That's all!</h4><br />Now go through your blog and see you <b>signature</b> text or image on each blogger post. Coding usually depends on the template you are using, therefore if you have and issue related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)Unknownnoreply@blogger.com1tag:blogger.com,1999:blog-5141858361892798601.post-42763098214514670732016-05-19T14:18:00.001+05:302020-10-17T21:21:00.262+05:30How to Change Blogger Email address (with Images)<div class="datemod">Updated on: <span itemprop="dateModified">October 17, 2020</span></div> <p>Blogger does not provide option to change primary email id and so many blogger user asking "how to change my blogger email address" with different reasons, chosen a wrong blogger email address at the time of creating a blogspot blog is one of the top reason but if you are also looking to change your blogspot login email address with any reason then you are at right place.</p> <a name='more'></a> <div class="mainimg"><img alt="how to change blogger email address with images" src="https://2.bp.blogspot.com/-j_boh4O7TqE/Vz18muP1l-I/AAAAAAAAAvM/6F4kx0t6aDwWC6OldcoKHcZhHbwGmQHxgCLcB/s1600/how-to-change-blogger-email-address-with-images.png" /></div> <p>Now days their are too many different ways to change blogger account email id but don't worry i have come with easy one, i have created an article on the best and easiest way to change your email address on blogger including step by step instructions (with images):</p> <h2>Changing Blogger Login Email Address</h2> <p><span class="step">Step 1.</span> Login to your blogger account for which you want to change your login email id.</p> <p><span class="step">Step 2.</span> Now navigate to <b>Blogger Dashboard</b> > <b>Settings</b> > <b>Permissions</b> section.</p> <p><span class="step">Step 3.</span> Click on <b>Invite more authors</b> and send an author invitation to your new email address.</p> <div class="simg"><img src="https://1.bp.blogspot.com/-Ek4ofsxJz2o/X4sJNkZJSuI/AAAAAAAAd6A/jowoC1CmUrsEBrnyPWsk05M35VDTK33AQCLcBGAsYHQ/s0/adding-author-to-blogger-to-change-email-id.png" alt="Adding author to blogger to change email id" title="Add Author" /></div> <p><span class="step">Step 4.</span> Open the invitation email and accept the author invitation, again login to <a href="http://blogger.com/" rel="nofollow" target="_blank">blogger</a> with old email id.</p> <p><span class="step">Step 5.</span> Again navigate to Permissions section and click <b>Blog admins and authors</b>. Change the role of new email id from <b>Author</b> to <b>Admin</b> and hit <b>Save</b>.</p> <div class="simg"><img src="https://1.bp.blogspot.com/-G1vA93-wrFU/X4sQuYoZ1XI/AAAAAAAAd6s/ng1aPiwZcBQ68iNpo8lzkTkqnBErcIIRACLcBGAsYHQ/s0/changing-page-role-to-change-blogger-email.png" alt="Changing page role to change blogger email" title="Change role of Author" /></div> <p><span class="step">Step 6.</span> Now login to <a href="http://blogger.com/" rel="nofollow" target="_blank">blogger</a> with your new email address.</p> <p><span class="step">Step 7.</span> Again Navigate to <b>Permission section</b> and remove your old email address from <b>Blog admins and authors</b>.</p> <div class="simg"><img src="https://1.bp.blogspot.com/-dOQmkOn9ims/X4sRB9xJR7I/AAAAAAAAd60/XAEhvRS7SwcAnFgLCY6xaJZf0zhOFmXjwCLcBGAsYHQ/s0/removing-old-blogger-email-address.png" alt="Removing old blogger email address" title="Remove older email address" /></div> <p class="ht">That's it!</p> <p>You have successfully changed your blogspot email address with new email id. For any issues related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)</p>Unknownnoreply@blogger.com12tag:blogger.com,1999:blog-5141858361892798601.post-58104708568579169702016-05-18T12:05:00.001+05:302016-06-26T13:39:01.863+05:30How to Customize Blogger's Official LightboxBlogger by default added the Lightbox feature to add more interactivity to images we normally upload in our post, with their lightbox its much more easier to view images by using the arrow keys and even the background is darker for getting more focus on the images instead of text added in that post. But till now we do not have any option to customize the overall looks of lightbox by changing its background color, changing the bar color containing all the images small thumbnails and much more. <br /><a name='more'></a><br /><div class="mainimg"><img alt="How to Customize Blogger's Official Lightbox" border="0" src="https://3.bp.blogspot.com/-kldhLrm5zj0/V2-NYt4UzGI/AAAAAAAAAc8/R7nQnnM64qE5WjCzmqmEXOmTXZo8MKweACLcB/s1600/Customize-blogger-lightbox.jpg" /></div> For those of you who have chosen to use the Blogger's Lightbox View instead of <a href="https://howbloggerz.blogspot.com/2016/03/custom-stylish-responsive-jquery-lightbox-for-blogger.html" target="_blank">custom jquery lightbox</a> for displaying pictures when clicking on them now have the option to change its style in a whole different way by just using few line's of CSS code. You will be able to change the black color of the screen, the border or shadow of the images and the color of the thumbnails background. It means we can customize the Blogger Lightbox entirely on our taste. After adding our CSS code, the entire look of the lightbox window will be changed - the background color, the bar showing the thumbnails, the border of images, the text within it, transparency and the close button. Now just follow the given step by step tutorial with images and demo :<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-StB-Jl088eQ/VzwLW1AhxsI/AAAAAAAAAtw/WNEIeHkc1d07IrCPkrt4DWpheNkwRcLFwCLcB/s1600/how-to-customize-blogger-official-lightbox.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="adding css to custommize blogger official lightbox" border="0" height="410" src="https://3.bp.blogspot.com/-StB-Jl088eQ/VzwLW1AhxsI/AAAAAAAAAtw/WNEIeHkc1d07IrCPkrt4DWpheNkwRcLFwCLcB/s640/how-to-customize-blogger-official-lightbox.png" title="" width="640" /></a></div><br /><h4 style="text-align: center;"><div class="hbz-demo"><a href="http://howbloggerz-demo.blogspot.com/p/customized-blogger-lightbox.html" rel="nofollow" target="_blank">DEMO</a></div></h4><br /><h2 style="text-align: left;">How to Customize Blogger's Official Lightbox</h2><br /><br /><span style="color: #17a98c;"><b>Step 1.</b></span> Login to your blogger account > <b>Dashboard</b> > <b>Template</b> > <b>Edit HTML</b><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-rHEqb_6BZ3Y/VsndjhBdWzI/AAAAAAAAAO0/g91hZRJXZKoV65NqM3fQ8jQxukjbXrZRACKgB/s1600/Edit-template-blogger.png" style="margin-left: 1em; margin-right: 1em;"><img alt="how to edit blog template" border="0" src="https://2.bp.blogspot.com/-rHEqb_6BZ3Y/VsndjhBdWzI/AAAAAAAAAO0/g91hZRJXZKoV65NqM3fQ8jQxukjbXrZRACKgB/s1600/Edit-template-blogger.png" title="" /></a></div><br /><br /><span style="color: #17a98c;"><b>Step 2.</b></span> Click anywhere inside the code and find the following code ( use Ctrl + F ) :<br /><br /><blockquote class="tr_bq"> ]]></b:skin></blockquote><br /><span style="color: #17a98c;"><b>Step 3.</b></span> Just above <span style="background-color: #3d85c6;"><span style="color: white;"><b>]]></b:skin></b></span></span> add following CSS :<br /><br /><br /><blockquote class="tr_bq"> /* Background or Overlay*/<br /><br /> .CSS_LIGHTBOX_BG_MASK {<br /> background-color: #000000 !important;<br /> background-image: url(<span style="color: #6aa84f;">background-image-url)</span> !important;<br /> opacity: <span style="color: #cc0000;">0.8</span> !important;<br /> filter: alpha(opacity=90) !important;<br /> }<br /><br /><br /> /* Images Border and Shadow */<br /><br /> .CSS_LIGHTBOX_SCALED_IMAGE_IMG {<br /> outline: 0px solid #fff !important;<br /> -webkit-border-radius: <span style="color: white;"><span style="background-color: #3d85c6;">5</span></span>px;<br /> -moz-border-radius: <span style="background-color: #3d85c6;"><span style="color: white;">5</span></span>px;<br /> border-radius: <span style="color: white;"><span style="background-color: #3d85c6;">5</span></span>px;<br /> -webkit-box-shadow: 0px 0px 5px #ffffff;<br /> -moz-box-shadow: 0px 0px 5px #ffffff;<br /> box-shadow: 0px 0px 5px #ffffff;<br /> }<br /><br /><br /> /* Close Button */<br /><br /> .CSS_LIGHTBOX_BTN_CLOSE {<br /> background-image: url(<span style="color: #f1c232;">button-image-url</span>) !important;<br /> }<br /><br /><br /> /* Thumbnails Bar */<br /><br /> .CSS_LIGHTBOX_FILMSTRIP {<br /> background-color: #000000 !important;<br /> }<br /><br /><br /> /* Index Info (number of images) */<br /><br /> .CSS_LIGHTBOX_INDEX_INFO {<br /> color: #898989 !important;<br /> }</blockquote><br /><span style="color: #17a98c;"><b>Step 4.</b></span> Configuration of CSS:<br /><br />- Replace <span style="color: #6aa84f;">background-image-url</span> with the URL of the image for background.<br />- Replace <span style="color: #f1c232;">button-image-url</span> with the URL of the image for close button.<br /> <span style="color: #444444;">For example : <i>background-image: url(https://www.image.com/image.jpg) !important;</i></span><br /><br /> <b>Related post: <a href="https://howbloggerz.blogspot.com/2016/03/get-find-url-upload-image-blogger.html" target="_blank">How to get image URL</a></b><br /><br /><span style="color: #666666;"> Note : If you want use default value for close button then remove the CSS :</span><br /><br /><span style="color: #666666;"><i> /* Close Button */<br /><br /> .CSS_LIGHTBOX_BTN_CLOSE {<br /> background-image: url(button-image-url) !important;<br /> }</i></span><br /><br />- Adjust the value <span style="color: #cc0000;">0.8</span> ( from 0 to 1 ) to change the transparency (Opacity) of background.<br /><br />- Replace the value #xxxxxx to change the color of particular element in particular section (<b><a href="http://www.html-color-codes.info/" rel="nofollow" target="_blank">Color Codes</a></b>).<br /><ul style="text-align: left;"><li> For example : Say if you want to change the background color of Thumbnails bar to #ffffff, then change the value #000000 to #ffffff under /* Thumbnails Bar */ inside background-color :<br /><br /><span style="color: #444444;"><i> /* Thumbnails Bar */<br /><br /> .CSS_LIGHTBOX_FILMSTRIP {<br /> background-color: #ffffff !important;<br /> }</i></span></li><br /><li> Or Say if you want change the Text color of Index Info then change the value #898989 with any other say #dddddd under /* Index Info (number of images) */ inside color :<br /><br /><span style="color: #444444;"><i> /* Index Info (number of images) */<br /><br /> .CSS_LIGHTBOX_INDEX_INFO {<br /> color: #dddddd !important;<br /> }</i></span></li></ul><br />- Adjust the value <span style="color: white;"><span style="background-color: #3d85c6;">5</span></span> to change the radius of image <span style="color: #666666;">(all 3 values should be same)</span>.<br /><br /><span style="color: #444444;">Note: Make sure your blogger lightbox is enabl</span>ed - <b>Settings</b> > <b>Posts, comments and sharing</b> > <b>Showcase images with Lightbox</b><br /><br /><br /><span style="color: #17a98c;"><b>Step 5.</b></span> Click <b>Save template</b>.<br /><br /><h4>Great !</h4>Refresh your blog and click on any image to see your own customized blogger lightbox. For any issues related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)Unknownnoreply@blogger.com4tag:blogger.com,1999:blog-5141858361892798601.post-84195481474260956582016-05-11T12:03:00.000+05:302016-06-26T13:45:46.904+05:30How To Add jQuery Drop Down Menu To BloggerDrop down Navigation menu is an essential part of any blog or website. Maintaining a clean, easy to use navigation menu is a huge part of creating an effective design. Too many links can confuse a reader, while too few can leave them wondering what they’re missing. A drop down menu is a great way to hide extra links while still making them available to curious readers. Drop down menus can help organize and categorize content links. If your blog contains a large amount of information and you’re interested in categorizing your links a little better, a drop down menu might be the ticket! It helps visitors to easily get the required content from the whole blog. <br /><a name='more'></a><br /><div class="mainimg"><img border="0" alt="Stylish jQuery menu for blogger with highlighter" src="https://1.bp.blogspot.com/-FgPxSJzr7bU/V2-Oux-8ZKI/AAAAAAAAAdM/-83s87_0O0M_IP7hsXa1qm97EEKqWH0pQCLcB/s1600/Stylish-jQuery-menu-for-blogger-with-highlighter.png" /></div><br />Since Blogger doesn’t offer the option to automatically add a drop down menu as WordPress does, we have to make our own. This requires a little bit of CSS and HTML knowledge, but I will walk you through it so it doesn’t seem so confusing. The menu I’ve put together is built entirely with CSS3, HTML, jQuery and JavaScript. You can view a demo of it here. While WordPress makes it easy to add a drop down menu (sub items), it’s a little more complicated on Blogger. We’ll basically be creating a list within a list, and all that’s needed is some extra code and styling! To get started, you’ll need to follow the below tutorial with images: <br /><br /><h2>Adding The jQuery 2-Sub Drop Down Menu</h2><br /><span style="color: #17a98c;"><b>Step 1.</b></span> Login to your blogger account > <b>Dashboard</b> > <b>Template</b> > <b>Edit HTML</b><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-rHEqb_6BZ3Y/VsndjhBdWzI/AAAAAAAAAO0/g91hZRJXZKoV65NqM3fQ8jQxukjbXrZRACKgB/s1600/Edit-template-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="how to edit blog template" border="0" src="https://2.bp.blogspot.com/-rHEqb_6BZ3Y/VsndjhBdWzI/AAAAAAAAAO0/g91hZRJXZKoV65NqM3fQ8jQxukjbXrZRACKgB/s1600/Edit-template-blogger.png" title="" /></a></div><br /><br /><span style="color: #17a98c;"><b>Step 2.</b></span> Click anywhere inside the code and find the following code ( use Ctrl + F ) : <br /><br /><blockquote class="tr_bq"></header></blockquote><br /><span style="color: #17a98c;"><b>Step 3.</b></span> Just below <b></header></b> add the following HTML code : <br /><br /><blockquote class="tr_bq"> <div id="navmenu"><br /> <ul><br /> <li><a class="highlight" href="#">Home</a></li><br /> <li><a href="#">Product</a><br /> <ul><br /><br /> <li><a href="#">Product 1</a><br /> <ul><br /> <li><a href="#">Sub Item</a></li><br /> <li><a href="#">Sub Item</a></li><br /> </ul><br /> </li><br /><br /> <li><a href="#">Product 2</a><br /> <ul><br /> <li><a href="#">Sub Item</a></li><br /> <li><a href="#">Sub Item</a></li><br /> </ul><br /> </li><br /><br /> </ul><br /> </li><br /> <li><a href="#">Category</a><br /> <ul><br /><br /> <li><a href="#">Category 1</a><br /> <ul><br /> <li><a href="#">Sub Item</a></li><br /> <li><a href="#">Sub Item</a></li><br /> </ul><br /> </li><br /> <li><a href="#">Category 2</a></li><br /> <li><a href="#">Category 3</a><br /> <ul><br /> <li><a href="#">Sub Item</a></li><br /> <li><a href="#">Sub Item</a></li><br /> </ul><br /> </li><br /><br /> </ul><br /> </li><br /> <li><a href="#">About</a></li><br /> <li><a href="#">Contact</a></li><br /> </ul><br /></div></blockquote><br /><span style="color: #17a98c;"><b>Step 4.</b></span> Configuration of HTML code : <br /><br /><br /><h4>1. Replace # with the URL of the link.</h4><br />Say if your post URL is http://howbloggerz.blogspot.com<b><i>/2016/05/how-to-add-drop-down-menu-to-blogger.html</i></b><br />or if your page URL is http://howbloggerz.blogspot.com<b><i>/p/page.html</i></b><br /><br />To make sure that current page link highlighter works properly with country redirect.<br /><br />Add only : <b><i>/2016/05/how-to-add-drop-down-menu-to-blogger.html</i></b><br />or <b><i>/p/page.html</i></b><br /><br /><br />Example : <br /><br /><b><a href="</b><i>/2016/05/how-to-add-drop-down-menu-to-blogger.html</i><b>"><span style="color: #3d85c6;">Title</span></a></b><br /><br />Note: Use full URL for home page link ( do not use above format ). <br /><br /><br /><h4>2. Replace the text inside the code with title of that specific URL.</h4><br /><i><a href="#"><span style="color: #3d85c6;">Title</span></a></i><br /><br /><h4>3. How to add more categories :</h4><br />To add another category say "Group" before "About", place the following code just above it :<br /><br /><i><li><a href="#">Group</a></li></i><br /><br />Example : <br /><br /><blockquote class="tr_bq"><div id="navmenu"><br /> <ul><br /> <li><a class="highlight" href="#">Home</a></li><br /> <li><a href="#">Product</a><br /> <ul><br /><br /> <li><a href="#">Product 1</a><br /> <ul><br /> <li><a href="#">Sub Item</a></li><br /> <li><a href="#">Sub Item</a></li><br /> </ul><br /> </li><br /><br /> <li><a href="#">Product 2</a><br /> <ul><br /> <li><a href="#">Sub Item</a></li><br /> <li><a href="#">Sub Item</a></li><br /> </ul><br /> </li><br /><br /> </ul><br /> </li><br /> <li><a href="#">Category</a><br /> <ul><br /><br /> <li><a href="#">Category 1</a><br /> <ul><br /> <li><a href="#">Sub Item</a></li><br /> <li><a href="#">Sub Item</a></li><br /> </ul><br /> </li><br /> <li><a href="#">Category 2</a></li><br /> <li><a href="#">Category 3</a><br /> <ul><br /> <li><a href="#">Sub Item</a></li><br /> <li><a href="#">Sub Item</a></li><br /> </ul><br /> </li><br /><br /> </ul><br /> </li><br /> <b><span style="color: #0b5394;"><li><a href="#">Group</a></li></span></b><br /> <li><a href="#">About</a></li><br /> <li><a href="#">Contact</a></li><br /> </ul><br /></div></blockquote><br /><br /><br /><h4>4. How to add Sub-category :</h4><br />Say if you want to add sub-category to category "Group" then place the following code just above the closing tag <b></li></b> of "Group" :<br /><br /><ul><br /><li><a href="#">Sub Group</a></li><br /></ul> <br /><br />Example : <br /><br /><i><li><a href="#">Group</a></i><br /><i> <b><ul></b></i><br /><i><b> <li><a href="#">Sub Group</a></li></b></i><br /><i><b> </ul></b></i><br /><i></li></i><br /><br />To add another sub category in "Group" add following code just above closing tag <b></ul></b> of "Group" : <br /><br /><li><a href="#">Sub Group</a></li> <br /><br />Example : <br /><br /><i><li><a href="#">Group</a></i><br /><i> <b><ul></b></i><br /><i><b> <li><a href="#">Sub Group 1</a></li></b></i><br /><i><b><i><b> <li><a href="#">Sub Group 2</a></li></b></i> </b></i><br /><i><b> </ul></b></i><br /><i></li></i><br /><br /><br /><h4><b>5. How to add Sub-sub category :</b></h4><br />Say if you want to add sub-sub category inside "Group" in "Sub Group 1" add the following code just above the closing tag <b></li></b> of "Sub Group 1" : <br /><br /><ul><br /><li><a href="#">Sub-Sub Group</a></li><br /></ul><br /><br />Example : <br /><br /><i><li><a href="#">Group</a><br /> <ul><br /> <li><a href="#">Sub Group 1</a></i><br /><i><b> <ul><br /> <li><a href="#">Sub-Sub Group</a></li><br /> </ul></b></i><br /><i> </li><br /> <li><a href="#">Sub Group 2</a></li><br /> </ul><br /></li> </i><br /><br /><br /><span style="color: #17a98c;"><b>Step 4.</b></span> Again find the code <b></head></b> and place anyone of the following code just above it : <br /><br /><br /><h4 style="text-align: center;"><div class="hbz-demo"><a href="http://howbloggerz-demo.blogspot.com/p/jquery-menus-for-blogger.html" rel="nofollow" target="_blank">DEMO</a></div></h4><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-pHtFQJLb808/VzIVHazVvII/AAAAAAAAAoM/F7Y0QlHO-AMo7kAn-cksz10RL4Rc8j07gCLcB/s1600/jQuery-menu-for-blogger-1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="jQuery menu for blogger 1" border="0" src="https://3.bp.blogspot.com/-pHtFQJLb808/VzIVHazVvII/AAAAAAAAAoM/F7Y0QlHO-AMo7kAn-cksz10RL4Rc8j07gCLcB/s1600/jQuery-menu-for-blogger-1.png" title="" /></a></div><br /><br /><blockquote class="tr_bq"><script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script><br /><script type='text/javascript'><br /> $(document).ready(function() {<br /> var str = location.href.toLowerCase();<br /> $('#navmenu ul li a').each(function() {<br /> if (str.indexOf(this.href.toLowerCase()) > -1) {<br /> $("li a.highlight").removeClass("highlight");<br /> $(this).addClass("highlight")<br /> }<br /> });<br /><br /> $('#navmenu ul ul li a').each(function() {<br /> if ($(this).hasClass('highlight')){<br /> $(this).parent().parent().parent().children(':first-child').addClass('highlight');<br /> $(this).parent().addClass('highlights');<br /> } });<br /><br /> $('#navmenu ul ul ul li a').each(function() {<br /> if ($(this).hasClass('highlight')){<br /> $(this).parent().parent().parent().parent().parent().children(':first-child').addClass('highlight');<br /> $(this).parent().parent().parent().addClass('highlights');<br /> $(this).parent().addClass('highlights');<br /> } });<br /><br /> $("<span></span>").insertBefore("#navmenu ul ul ul");<br /> $("#navmenu ul ul ul").parent().find("a").css({<br /> "padding": "5px 28px 7px 16px"<br /> });<br /><br /> $("#navmenu ul ul ul").hover(function() {<br /> $(this).prev().css("opacity", "0");<br /> }, function() {<br /> $(this).prev().css("opacity", "1");<br /> });<br /> });<br /></script><br /><br /><br /><style type="text/css"><br /> #navmenu,<br /> #navmenu ul,<br /> #navmenu ul li,<br /> #navmenu ul ul,<br /> #navmenu ul ul li,<br /> #navmenu ul ul ul,<br /> #navmenu ul ul ul li {<br /> z-index: 1000;<br /> }<br /> <br /> #navmenu ul {<br /> margin: 0;<br /> padding: 0<br /> }<br /> <br /> #navmenu li {<br /> margin: 0;<br /> padding: 0<br /> }<br /> <br /> #navmenu a {<br /> margin: 0;<br /> padding: 0<br /> }<br /> <br /> #navmenu ul {<br /> list-style: none;<br /> overflow: visible;<br /> }<br /> <br /> #navmenu a {<br /> text-decoration: none<br /> }<br /> <br /> #navmenu {<br /> height: 70px;<br /> background-color: #232323;<br /> box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);<br /> width: auto;<br /> }<br /> <br /> #navmenu > ul > li {<br /> float: left;<br /> margin-left: 15px;<br /> position: relative<br /> }<br /> <br /> #navmenu > ul > li > a {<br /> color: #a0a0a0;<br /> font-family: Verdana, 'Lucida Grande';<br /> font-size: 15px;<br /> line-height: 70px;<br /> padding: 15px 20px;<br /> border: none;<br /> display: inline;<br /> -webkit-transition: color .15s;<br /> -moz-transition: color .15s;<br /> -o-transition: color .15s;<br /> transition: color .15s<br /> }<br /> <br /> #navmenu > ul > li > a:hover,<br /> #navmenu ul li a.highlight {<br /> color: #fff;<br /> background-color: #232323;<br /> }<br /> <br /> #navmenu > ul > li > ul {<br /> opacity: 0;<br /> visibility: hidden;<br /> padding: 16px 0 20px 0;<br /> background-color: #fafafa;<br /> text-align: left;<br /> position: absolute;<br /> top: 55px;<br /> left: 50%;<br /> margin-left: -90px;<br /> width: 180px;<br /> overflow: visible;<br /> border: none;<br /> -webkit-transition: all .3s .1s;<br /> -moz-transition: all .3s .1s;<br /> -o-transition: all .3s .1s;<br /> transition: all .3s .1s;<br /> -webkit-border-radius: 5px;<br /> -moz-border-radius: 5px;<br /> border-radius: 5px;<br /> -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);<br /> -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);<br /> box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)<br /> }<br /> <br /> #navmenu > ul > li:hover > ul {<br /> opacity: 1;<br /> top: 65px;<br /> visibility: visible<br /> }<br /> <br /> #navmenu > ul > li > ul:before {<br /> content: '';<br /> display: block;<br /> border-color: transparent transparent #fafafa transparent;<br /> border-style: solid;<br /> border-width: 10px;<br /> position: absolute;<br /> top: -20px;<br /> left: 50%;<br /> margin-left: -10px<br /> }<br /> <br /> #navmenu > ul ul > li {<br /> position: relative;<br /> float: none;<br /> }<br /> <br /> #navmenu ul ul a {<br /> color: #323232;<br /> font-family: Verdana, 'Lucida Grande';<br /> font-size: 13px;<br /> background-color: #fafafa;<br /> padding: 5px 8px 7px 16px;<br /> display: block;<br /> border: none;<br /> -webkit-transition: background-color 0.1s;<br /> -moz-transition: background-color 0.1s;<br /> -o-transition: background-color 0.1s;<br /> transition: background-color 0.1s<br /> }<br /> <br /> #navmenu ul ul li:hover {<br /> background-color: #cc2c24;<br /> }<br /> <br /> #navmenu ul ul li:hover span {<br /> right: 10px;<br /> -webkit-transition: all .3s;<br /> -moz-transition: all .3s;<br /> -o-transition: all .3s;<br /> transition: all .3s;<br /> }<br /> <br /> #navmenu ul ul li:hover span::before {<br /> border-color: transparent transparent transparent #fff;<br /> }<br /> <br /> #navmenu ul ul ul {<br /> visibility: hidden;<br /> opacity: 0;<br /> position: absolute;<br /> top: -16px;<br /> left: 206px;<br /> padding: 16px 0 20px 0;<br /> background-color: #fafafa;<br /> text-align: left;<br /> width: 180px;<br /> border: none;<br /> -webkit-transition: all .3s;<br /> -moz-transition: all .3s;<br /> -o-transition: all .3s;<br /> transition: all .3s;<br /> -webkit-border-radius: 5px;<br /> -moz-border-radius: 5px;<br /> border-radius: 5px;<br /> -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);<br /> -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);<br /> box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)<br /> }<br /> <br /> #navmenu ul ul > li:hover > ul {<br /> opacity: 1;<br /> left: 190px;<br /> visibility: visible<br /> }<br /> <br /> #navmenu ul ul a:hover {<br /> color: #f0f0f0;<br /> background-color: #cc2c24;<br /> }<br /> <br /> #navmenu ul ul span::before {<br /> content: '';<br /> display: block;<br /> border-color: transparent transparent transparent #000000;<br /> border-style: solid;<br /> border-width: 5px;<br /> position: absolute;<br /> z-index: 1001;<br /> }<br /><br /> #navmenu ul ul li.highlights span::before {<br /> border-color: transparent transparent transparent #fff;<br /> }<br /> <br /> #navmenu ul ul span:hover::before {<br /> border-color: transparent transparent transparent #fafafa;<br /> -webkit-transition: all .3s;<br /> -moz-transition: all .3s;<br /> -o-transition: all .3s;<br /> transition: all .3s;<br /> }<br /> <br /> #navmenu ul ul span {<br /> position: absolute;<br /> right: 20px;<br /> top: 10px;<br /> }<br /></style></blockquote><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-Bj1zBvPOBBY/VzIVg_esV-I/AAAAAAAAAoQ/xhUbB_8dwSkz3UOCYruOs2QloDQ3gRVhQCLcB/s1600/jQuery-menu-for-blogger-2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="jQuery menu for blogger 2" border="0" src="https://1.bp.blogspot.com/-Bj1zBvPOBBY/VzIVg_esV-I/AAAAAAAAAoQ/xhUbB_8dwSkz3UOCYruOs2QloDQ3gRVhQCLcB/s1600/jQuery-menu-for-blogger-2.png" title="" /></a></div><br /><br /><blockquote class="tr_bq"><script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script><br /><script type='text/javascript'><br /> $(document).ready(function() {<br /> var str = location.href.toLowerCase();<br /> $('#navmenu ul li a').each(function() {<br /> if (str.indexOf(this.href.toLowerCase()) > -1) {<br /> $("li a.highlight").removeClass("highlight");<br /> $(this).addClass("highlight")<br /> }<br /> });<br /><br /> $('#navmenu ul ul li a').each(function() {<br /> if ($(this).hasClass('highlight')){<br /> $(this).parent().parent().parent().children(':first-child').addClass('highlight');<br /> $(this).parent().addClass('highlights');<br /> } });<br /><br /> $('#navmenu ul ul ul li a').each(function() {<br /> if ($(this).hasClass('highlight')){<br /> $(this).parent().parent().parent().parent().parent().children(':first-child').addClass('highlight');<br /> $(this).parent().parent().parent().addClass('highlights');<br /> $(this).parent().addClass('highlights');<br /> } });<br /><br /> $("<span></span>").insertBefore("#navmenu ul ul ul");<br /> $("#navmenu ul ul ul").parent().find("a").css({<br /> "padding": "5px 28px 7px 16px"<br /> });<br /><br /> $("#navmenu ul ul ul").hover(function() {<br /> $(this).prev().css("opacity", "0");<br /> }, function() {<br /> $(this).prev().css("opacity", "1");<br /> });<br /> });<br /></script><br /><br /><br /><style type="text/css"><br /> #navmenu,<br /> #navmenu ul,<br /> #navmenu ul li,<br /> #navmenu ul ul,<br /> #navmenu ul ul li,<br /> #navmenu ul ul ul,<br /> #navmenu ul ul ul li {<br /> z-index: 1000;<br /> }<br /> <br /> #navmenu ul {<br /> margin: 0;<br /> padding: 0<br /> }<br /> <br /> #navmenu li {<br /> margin: 0;<br /> padding: 0<br /> }<br /> <br /> #navmenu a {<br /> margin: 0;<br /> padding: 0<br /> }<br /> <br /> #navmenu ul {<br /> list-style: none;<br /> overflow: visible;<br /> }<br /> <br /> #navmenu a {<br /> text-decoration: none<br /> }<br /> <br /> #navmenu {<br /> height: 50px;<br /> background-color: #265783;<br /> box-shadow: 0 2px 3px rgb(167, 205, 240);<br /> width: auto;<br /> border-bottom: 3px solid #214565;<br /> }<br /> <br /> #navmenu > ul > li {<br /> float: left;<br /> position: relative;<br /> border-right: 1px solid #214565;<br /> }<br /> <br /> #navmenu > ul > li > a {<br /> color: #fff;<br /> font-family: Verdana, 'Lucida Grande';<br /> font-size: 15px;<br /> line-height: 50px;<br /> padding: 15px 20px;<br /> border: none;<br /> display: inline;<br /> -webkit-transition: color .15s;<br /> -moz-transition: color .15s;<br /> -o-transition: color .15s;<br /> transition: color .15s<br /> }<br /> <br /> #navmenu > ul > li > a:hover,<br /> #navmenu ul li a.highlight {<br /> color: #fff;<br /> background-color: #214565;<br /> }<br /> <br /> #navmenu > ul > li > ul {<br /> opacity: 0;<br /> visibility: hidden;<br /> padding: 16px 0 20px 0;<br /> background-color: #fafafa;<br /> text-align: left;<br /> position: absolute;<br /> top: 70px;<br /> width: 180px;<br /> overflow: visible;<br /> border: none;<br /> -webkit-transition: all .3s .1s;<br /> -moz-transition: all .3s .1s;<br /> -o-transition: all .3s .1s;<br /> transition: all .3s .1s;<br /> -webkit-border-radius: 3px;<br /> -moz-border-radius: 3px;<br /> border-radius: 3px;<br /> -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);<br /> -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);<br /> box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)<br /> }<br /> <br /> #navmenu > ul > li:hover > ul {<br /> opacity: 1;<br /> top: 50px;<br /> visibility: visible<br /> }<br /> <br /> #navmenu > ul > li > ul:before {<br /> content: '';<br /> display: block;<br /> border-color: transparent transparent #fafafa transparent;<br /> border-style: solid;<br /> border-width: 10px;<br /> position: absolute;<br /> top: -15px;<br /> left: 10%;<br /> margin-left: -10px<br /> }<br /> <br /> #navmenu > ul ul > li {<br /> position: relative;<br /> float: none;<br /> }<br /> <br /> #navmenu ul ul a {<br /> color: #323232;<br /> font-family: Verdana, 'Lucida Grande';<br /> font-size: 13px;<br /> background-color: #fafafa;<br /> padding: 5px 8px 7px 16px;<br /> display: block;<br /> border: none;<br /> -webkit-transition: background-color 0.1s;<br /> -moz-transition: background-color 0.1s;<br /> -o-transition: background-color 0.1s;<br /> transition: background-color 0.1s<br /> }<br /> <br /> #navmenu ul ul li:hover {<br /> background-color: #cc2c24;<br /> }<br /> <br /> #navmenu ul ul li:hover span {<br /> right: 10px;<br /> -webkit-transition: all .3s;<br /> -moz-transition: all .3s;<br /> -o-transition: all .3s;<br /> transition: all .3s;<br /> }<br /> <br /> #navmenu ul ul li:hover span::before {<br /> border-color: transparent transparent transparent #fff;<br /> }<br /> <br /> #navmenu ul ul ul {<br /> visibility: hidden;<br /> opacity: 0;<br /> position: absolute;<br /> top: -16px;<br /> left: 206px;<br /> padding: 16px 0 20px 0;<br /> background-color: #fafafa;<br /> text-align: left;<br /> width: 180px;<br /> border: none;<br /> -webkit-transition: all .3s;<br /> -moz-transition: all .3s;<br /> -o-transition: all .3s;<br /> transition: all .3s;<br /> -webkit-border-radius: 5px;<br /> -moz-border-radius: 5px;<br /> border-radius: 5px;<br /> -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);<br /> -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);<br /> box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)<br /> }<br /><br /> #navmenu ul ul ul::before {<br /> content: '';<br /> display: block;<br /> border-color: transparent #dbdbdb transparent transparent;<br /> border-style: solid;<br /> border-width: 10px;<br /> position: absolute;<br /> top: 20px;<br /> left: -20px;<br /> }<br /> <br /> <br /> #navmenu ul ul > li:hover > ul {<br /> opacity: 1;<br /> left: 190px;<br /> visibility: visible<br /> }<br /> <br /> #navmenu ul ul a:hover {<br /> color: #f0f0f0;<br /> background-color: #214565;<br /> }<br /> <br /> #navmenu ul ul span::before {<br /> content: '';<br /> display: block;<br /> border-color: transparent transparent transparent #000000;<br /> border-style: solid;<br /> border-width: 5px;<br /> position: absolute;<br /> z-index: 1001;<br /> }<br /><br /> #navmenu ul ul li.highlights span::before {<br /> border-color: transparent transparent transparent #fff;<br /> }<br /> <br /> #navmenu ul ul span:hover::before {<br /> border-color: transparent transparent transparent #fafafa;<br /> -webkit-transition: all .3s;<br /> -moz-transition: all .3s;<br /> -o-transition: all .3s;<br /> transition: all .3s;<br /> }<br /> <br /> #navmenu ul ul span {<br /> position: absolute;<br /> right: 20px;<br /> top: 10px;<br /> }<br /></style></blockquote><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-J1cEk96JJdg/VzIVuZrsgdI/AAAAAAAAAoY/ZxIgdPzM3V06wIRnVj0Q8oSNwpLFCMY1wCLcB/s1600/jQuery-menu-for-blogger-3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="jQuery menu for blogger 3" border="0" src="https://1.bp.blogspot.com/-J1cEk96JJdg/VzIVuZrsgdI/AAAAAAAAAoY/ZxIgdPzM3V06wIRnVj0Q8oSNwpLFCMY1wCLcB/s1600/jQuery-menu-for-blogger-3.png" title="" /></a></div><br /><br /><blockquote class="tr_bq"><script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script><br /><script type='text/javascript'><br /> $(document).ready(function() {<br /> var str = location.href.toLowerCase();<br /> $('#navmenu ul li a').each(function() {<br /> if (str.indexOf(this.href.toLowerCase()) > -1) {<br /> $("li a.highlight").removeClass("highlight");<br /> $(this).addClass("highlight")<br /> }<br /> });<br /><br /> $('#navmenu ul ul li a').each(function() {<br /> if ($(this).hasClass('highlight')){<br /> $(this).parent().parent().parent().children(':first-child').addClass('highlight');<br /> $(this).parent().addClass('highlights');<br /> } });<br /><br /> $('#navmenu ul ul ul li a').each(function() {<br /> if ($(this).hasClass('highlight')){<br /> $(this).parent().parent().parent().parent().parent().children(':first-child').addClass('highlight');<br /> $(this).parent().parent().parent().addClass('highlights');<br /> $(this).parent().addClass('highlights');<br /> } });<br /><br /> $("<span></span>").insertBefore("#navmenu ul ul ul");<br /> $("#navmenu ul ul ul").parent().find("a").css({<br /> "padding": "10px 28px 12px 16px"<br /> });<br /><br /> $("#navmenu ul ul ul").hover(function() {<br /> $(this).prev().css("opacity", "0");<br /> }, function() {<br /> $(this).prev().css("opacity", "1");<br /> });<br /> });<br /></script><br /><br /><br /><style type="text/css"><br /> #navmenu,<br /> #navmenu ul,<br /> #navmenu ul li,<br /> #navmenu ul ul,<br /> #navmenu ul ul li,<br /> #navmenu ul ul ul,<br /> #navmenu ul ul ul li {<br /> z-index: 1000;<br /> }<br /> <br /> #navmenu ul {<br /> margin: 0;<br /> padding: 0<br /> }<br /> <br /> #navmenu li {<br /> margin: 0;<br /> padding: 0<br /> }<br /> <br /> #navmenu a {<br /> margin: 0;<br /> padding: 0<br /> }<br /> <br /> #navmenu ul {<br /> list-style: none;<br /> overflow: visible;<br /> }<br /> <br /> #navmenu a {<br /> text-decoration: none<br /> }<br /> <br /> #navmenu {<br /> background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;<br /> background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;<br /> background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;<br /> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );<br /> height: 50px;<br /> box-shadow: 1px 1px 3px #C2C2C2;<br /> width: auto;<br /> border-radius: 0 0 3px 3px;<br /> -webkit-border-radius: 0 0 3px 3px;<br /> -moz-border-radius: 0 0 3px 3px;<br /> }<br /> <br /> #navmenu > ul > li {<br /> float: left;<br /> position: relative;<br /> border-right: 1px solid #CFCFCF;<br /> }<br /> <br /> #navmenu > ul > li > a {<br /> color: #000;<br /> font-family: Verdana, 'Lucida Grande';<br /> font-size: 15px;<br /> line-height: 50px;<br /> padding: 15px 20px;<br /> border: none;<br /> display: inline;<br /> -webkit-transition: color .15s;<br /> -moz-transition: color .15s;<br /> -o-transition: color .15s;<br /> transition: color .15s<br /> }<br /> <br /> #navmenu > ul > li > a:hover,<br /> #navmenu ul li a.highlight {<br /> color: #fff;<br /> background-color: #50A2EE;<br /> }<br /> <br /> #navmenu > ul > li > ul {<br /> opacity: 0;<br /> visibility: hidden;<br /> padding: 0px;<br /> background-color: #fafafa;<br /> text-align: left;<br /> position: absolute;<br /> top: 150px;<br /> width: 180px;<br /> overflow: visible;<br /> border: none;<br /> -webkit-transition: all .3s .1s;<br /> -moz-transition: all .3s .1s;<br /> -o-transition: all .3s .1s;<br /> transition: all .3s .1s;<br /> -webkit-border-radius: 5px;<br /> -moz-border-radius: 5px;<br /> border-radius: 5px;<br /> -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);<br /> -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);<br /> box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)<br /> }<br /> <br /> #navmenu > ul > li:hover > ul {<br /> opacity: 1;<br /> top: 54px;<br /> visibility: visible<br /> }<br /> <br /> #navmenu > ul > li > ul:before {<br /> content: '';<br /> display: block;<br /> border-color: transparent transparent #fafafa transparent;<br /> border-style: solid;<br /> border-width: 15px;<br /> position: absolute;<br /> top: -25px;<br /> left: 10%;<br /> margin-left: -10px<br /> }<br /> <br /> #navmenu > ul ul > li {<br /> position: relative;<br /> float: none;<br /> border-bottom: 1px solid #ddd;<br /> }<br /><br /> #navmenu ul ul a {<br /> color: #323232;<br /> font-family: Verdana, 'Lucida Grande';<br /> font-size: 13px;<br /> background-color: #fafafa;<br /> padding: 10px 8px 12px 16px;<br /> display: block;<br /> border: none;<br /> -webkit-transition: background-color 0.1s;<br /> -moz-transition: background-color 0.1s;<br /> -o-transition: background-color 0.1s;<br /> transition: background-color 0.1s<br /> }<br /><br /> #navmenu ul ul li:first-child a, #navmenu ul ul ul li:first-child a {<br /> border-radius: 5px 5px 0 0;<br /> -webkit-border-radius: 5px 5px 0 0;<br /> -moz-border-radius: 5px 5px 0 0;<br /> }<br /><br /> #navmenu ul ul li:last-child a, #navmenu ul ul ul li:last-child a {<br /> border-radius: 0 0 5px 5px;<br /> -webkit-border-radius: 0 0 5px 5px;<br /> -moz-border-radius: 0 0 5px 5px;<br /> }<br /><br /> #navmenu ul ul li:last-child {<br /> border-bottom: 0px;<br /> }<br /> <br /> #navmenu ul ul li:hover span {<br /> -webkit-transform: rotate(90deg);<br /> -ms-transform:rotate(360deg);<br /> transform: rotate(90deg);<br /> -webkit-transition: all .3s;<br /> -moz-transition: all .3s;<br /> -o-transition: all .3s;<br /> transition: all .3s;<br /> }<br /> <br /> #navmenu ul ul ul {<br /> visibility: hidden;<br /> opacity: 0;<br /> position: absolute;<br /> top: 0px;<br /> left: 206px;<br /> padding: 0px;<br /> background-color: #fafafa;<br /> text-align: left;<br /> width: 180px;<br /> border: none;<br /> -webkit-transition: all .3s;<br /> -moz-transition: all .3s;<br /> -o-transition: all .3s;<br /> transition: all .3s;<br /> -webkit-border-radius: 5px;<br /> -moz-border-radius: 5px;<br /> border-radius: 5px;<br /> -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);<br /> -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);<br /> box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)<br /> }<br /><br /> #navmenu ul ul ul::before {<br /> content: '';<br /> display: block;<br /> border-color: transparent #dbdbdb transparent transparent;<br /> border-style: solid;<br /> border-width: 10px;<br /> position: absolute;<br /> top: 10px;<br /> left: -20px;<br /> z-index: 1000;<br /> }<br /> <br /> <br /> #navmenu ul ul > li:hover > ul {<br /> opacity: 1;<br /> left: 190px;<br /> visibility: visible<br /> }<br /> <br /> #navmenu ul ul a:hover {<br /> color: #f0f0f0;<br /> background-color: #00A2E8;<br /> }<br /> <br /> #navmenu ul ul span {<br /> background-image: url("https://4.bp.blogspot.com/-Odm4GB62Eno/Vy9sfmXdRDI/AAAAAAAAAn4/4O95b1gxOQ8Vzss-iOznxkcik5BCcHzBgCLcB/s1600/hbz-arrow.png");<br /> border-radius: 50%;<br /> -webkit-border-radius: 50%;<br /> -moz-border-radius: 50%;<br /> position: absolute;<br /> right: 20px;<br /> top: 10px;<br /> width: 18px;<br /> height: 18px;<br /> }<br /></style></blockquote><br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-Fs1NQy8jWZ0/VzIV8hj0a_I/AAAAAAAAAoc/WzpLhsbsr4gtEnOLc-94stXl_jv8_1OGQCLcB/s1600/jQuery-menu-for-blogger-4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="jQuery menu for blogger 4" border="0" src="https://1.bp.blogspot.com/-Fs1NQy8jWZ0/VzIV8hj0a_I/AAAAAAAAAoc/WzpLhsbsr4gtEnOLc-94stXl_jv8_1OGQCLcB/s1600/jQuery-menu-for-blogger-4.png" title="" /></a></div><br /><blockquote class="tr_bq"><script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script><br /><script type='text/javascript'><br /> $(document).ready(function() {<br /> var str = location.href.toLowerCase();<br /> $('#navmenu ul li a').each(function() {<br /> if (str.indexOf(this.href.toLowerCase()) > -1) {<br /> $("li a.highlight").removeClass("highlight");<br /> $(this).addClass("highlight")<br /> }<br /> });<br /><br /> $('#navmenu ul ul li a').each(function() {<br /> if ($(this).hasClass('highlight')){<br /> $(this).parent().parent().parent().children(':first-child').addClass('highlight');<br /> $(this).parent().addClass('highlights');<br /> } });<br /><br /> $('#navmenu ul ul ul li a').each(function() {<br /> if ($(this).hasClass('highlight')){<br /> $(this).parent().parent().parent().parent().parent().children(':first-child').addClass('highlight');<br /> $(this).parent().parent().parent().addClass('highlights');<br /> $(this).parent().addClass('highlights');<br /> } });<br /><br /> $("<span></span>").insertBefore("#navmenu ul ul ul");<br /> $("#navmenu ul ul ul").parent().find("a").css({<br /> "padding": "10px 28px 12px 16px"<br /> });<br /><br /> $("#navmenu ul ul ul").hover(function() {<br /> $(this).prev().css("opacity", "0");<br /> }, function() {<br /> $(this).prev().css("opacity", "1");<br /> });<br /> });<br /></script><br /><br /><br /><style type="text/css"><br /> #navmenu,<br /> #navmenu ul,<br /> #navmenu ul li,<br /> #navmenu ul ul,<br /> #navmenu ul ul li,<br /> #navmenu ul ul ul,<br /> #navmenu ul ul ul li {<br /> z-index: 1000;<br /> }<br /> <br /> #navmenu ul {<br /> margin: 0;<br /> padding: 0<br /> }<br /> <br /> #navmenu li {<br /> margin: 0;<br /> padding: 0<br /> }<br /> <br /> #navmenu a {<br /> margin: 0;<br /> padding: 0<br /> }<br /> <br /> #navmenu ul {<br /> list-style: none;<br /> overflow: visible;<br /> }<br /> <br /> #navmenu a {<br /> text-decoration: none<br /> }<br /> <br /> #navmenu {<br /> background: -webkit-linear-gradient(#cbcbcb, #a1a1a1) repeat scroll 0 0 transparent;<br /> background: -moz-linear-gradient(#cbcbcb, #a1a1a1) repeat scroll 0 0 transparent;<br /> background: linear-gradient(#cbcbcb, #a1a1a1) repeat scroll 0 0 transparent;<br /> filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbcbcb', endColorstr='#a1a1a1',GradientType=0 );<br /> height: 50px;<br /> box-shadow: 1px 1px 3px #C2C2C2;<br /> width: auto;<br /> border-radius: 30px;<br /> -webkit-border-radius: 30px;<br /> -moz-border-radius: 30px;<br /><br /> }<br /> <br /> #navmenu > ul > li {<br /> float: left;<br /> position: relative;<br /> margin-left: 15px;<br /> }<br /> <br /> #navmenu > ul > li > a {<br /> color: #fff;<br /> font-family: Verdana, 'Lucida Grande';<br /> font-size: 15px;<br /> line-height: 50px;<br /> padding: 5px 15px;<br /> border: none;<br /> border-radius: 30px;<br /> -webkit-border-radius: 30px;<br /> -moz-border-radius: 30px;<br /> text-shadow: 0px 2px 1px #C6C6C6;<br /> display: inline;<br /> -webkit-transition: color .15s;<br /> -moz-transition: color .15s;<br /> -o-transition: color .15s;<br /> transition: color .15s<br /> }<br /> <br /> #navmenu > ul > li > a:hover,<br /> #navmenu ul li a.highlight {<br /> color: #000;<br /> background-color: #fff;<br /> box-shadow: 1px 2px 3px #8d8d8d;<br /> }<br /> <br /> #navmenu ul ul a.highlight {<br /> background-color: #F5F5F5;<br /> }<br /><br /> #navmenu > ul > li > ul {<br /> opacity: 0;<br /> visibility: hidden;<br /> padding: 0px;<br /> background-color: #fafafa;<br /> text-align: left;<br /> position: absolute;<br /> top: 54px;<br /> width: 180px;<br /> overflow: visible;<br /> border: none;<br /> -webkit-transition: all .3s .1s;<br /> -moz-transition: all .3s .1s;<br /> -o-transition: all .3s .1s;<br /> transition: all .3s .1s;<br /> -webkit-border-radius: 15px;<br /> -moz-border-radius: 15px;<br /> border-radius: 15px;<br /> -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);<br /> -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);<br /> box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)<br /> }<br /> <br /> #navmenu > ul > li:hover > ul {<br /> opacity: 1;<br /> top: 54px;<br /> visibility: visible<br /> }<br /> <br /> #navmenu > ul > li > ul:before {<br /> content: '';<br /> display: block;<br /> border-color: transparent transparent #fafafa transparent;<br /> border-style: solid;<br /> border-width: 15px;<br /> position: absolute;<br /> top: -25px;<br /> left: 10%;<br /> margin-left: -10px<br /> }<br /> <br /> #navmenu > ul ul > li {<br /> position: relative;<br /> float: none;<br /> border-bottom: 1px solid #ddd;<br /> }<br /><br /> #navmenu ul ul a {<br /> color: #323232;<br /> font-family: Verdana, 'Lucida Grande';<br /> font-size: 13px;<br /> background-color: #fff;<br /> padding: 10px 8px 12px 16px;<br /> display: block;<br /> border: none;<br /> -webkit-transition: background-color 0.1s;<br /> -moz-transition: background-color 0.1s;<br /> -o-transition: background-color 0.1s;<br /> transition: background-color 0.1s<br /> }<br /><br /> #navmenu ul ul li:first-child a, #navmenu ul ul ul li:first-child a {<br /> border-radius: 15px 15px 0 0;<br /> -webkit-border-radius: 15px 15px 0 0;<br /> -moz-border-radius: 15px 15px 0 0;<br /> }<br /><br /> #navmenu ul ul li:last-child a, #navmenu ul ul ul li:last-child a {<br /> border-radius: 0 0 15px 15px;<br /> -webkit-border-radius: 0 0 15px 15px;<br /> -moz-border-radius: 0 0 15px 15px;<br /> }<br /><br /> #navmenu ul ul li:last-child {<br /> border-bottom: 0px;<br /> }<br /> <br /> #navmenu ul ul li:hover span { <br /> animation: fade 1s forwards;<br /> -webkit-animation: fade 1s forwards;<br /> -moz-animation: fade 1s forwards;<br /> -o-animation: fade 1s forwards;<br /> animation-iteration-count: infinite;<br /> -webkit-animation-iteration-count: infinite;<br /> -moz-animation-iteration-count: infinite; <br /> -o-animation-iteration-count: infinite;<br /> }<br /> <br /> @keyframes fade {<br /> 0% {opacity:0;}<br /> 50% {opacity:1;}<br /> 100% {opacity:0;}<br /> }<br /><br /> @-webkit-keyframes fade {<br /> 0% {opacity:0;}<br /> 50% {opacity:1;}<br /> 100% {opacity:0;}<br /> }<br /><br /> @-moz-keyframes fade {<br /> 0% {opacity:0;}<br /> 50% {opacity:1;}<br /> 100% {opacity:0;}<br /> }<br /><br /> @-o-keyframes fade {<br /> 0% {opacity:0;}<br /> 50% {opacity:1;}<br /> 100% {opacity:0;}<br /> }<br /><br /> #navmenu ul ul ul {<br /> visibility: hidden;<br /> opacity: 0;<br /> position: absolute;<br /> top: 0px;<br /> left: 206px;<br /> padding: 0px;<br /> background-color: #fafafa;<br /> text-align: left;<br /> width: 180px;<br /> border: none;<br /> -webkit-transition: all .3s;<br /> -moz-transition: all .3s;<br /> -o-transition: all .3s;<br /> transition: all .3s;<br /> -webkit-border-radius: 15px;<br /> -moz-border-radius: 15px;<br /> border-radius: 15px;<br /> -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);<br /> -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);<br /> box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)<br /> }<br /><br /> #navmenu ul ul ul::before {<br /> content: '';<br /> display: block;<br /> border-color: transparent #dbdbdb transparent transparent;<br /> border-style: solid;<br /> border-width: 10px;<br /> position: absolute;<br /> top: 10px;<br /> left: -20px;<br /> z-index: 1000;<br /> }<br /> <br /> <br /> #navmenu ul ul > li:hover > ul {<br /> opacity: 1;<br /> left: 190px;<br /> visibility: visible<br /> }<br /> <br /> #navmenu ul ul a:hover {<br /> color: #000;<br /> background-color: #F5F5F5;<br /> }<br /> <br /> #navmenu ul ul span {<br /> border-color: transparent transparent transparent #777;<br /> border-style: solid;<br /> border-width: 5px;<br /> display: block;<br /> position: absolute;<br /> right: 20px;<br /> top: 14px;<br /> }<br /></style></blockquote><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-ZjbNeprHdB8/VzIWLOSGU0I/AAAAAAAAAok/qADigpxa0LkH0HJl1lzZvLGELZJnzJ5XQCLcB/s1600/jQuery-menu-for-blogger-5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="jQuery menu for blogger 5" border="0" src="https://2.bp.blogspot.com/-ZjbNeprHdB8/VzIWLOSGU0I/AAAAAAAAAok/qADigpxa0LkH0HJl1lzZvLGELZJnzJ5XQCLcB/s1600/jQuery-menu-for-blogger-5.png" title="" /></a></div><br /><br /><blockquote class="tr_bq"><script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script><br /><script type='text/javascript'><br /> $(document).ready(function() {<br /> var str = location.href.toLowerCase();<br /> $('#navmenu ul li a').each(function() {<br /> if (str.indexOf(this.href.toLowerCase()) > -1) {<br /> $("li a.highlight").removeClass("highlight");<br /> $(this).addClass("highlight")<br /> }<br /> });<br /><br /> $("<span></span>").insertBefore("#navmenu ul ul ul");<br /> $("#navmenu ul ul ul").parent().find("a").css({<br /> "padding": "5px 28px 7px 16px"<br /> });<br /><br /> $("#navmenu ul ul ul").hover(function() {<br /> $(this).prev().css("opacity", "0");<br /> }, function() {<br /> $(this).prev().css("opacity", "1");<br /> });<br /><br /> $("#navmenu ul ul").hover(function() {<br /> $(this).prev().addClass("highlightz");<br /> }, function() {<br /> $(this).prev().removeClass("highlightz");<br /> });<br /><br /> function getRandomClass() {<br /> var classes = new Array("a", "b", "c", "d", "e", "f");<br /> <br /> var randomNumber = Math.floor(Math.random()*7);<br /><br /> return classes[randomNumber];<br /> };<br /> $("#navmenu ul ul li:has(ul)").hover(function() {<br /> var randomClass = getRandomClass();<br /> $(this).attr("class", randomClass);<br /> });<br /><br /> $('#navmenu ul ul ul li a').each(function() {<br /> if ($(this).hasClass('highlight')){<br /> $(this).removeClass('highlight');<br /> $(this).parent().parent().parent().parent().parent().children(':first-child').addClass('highlight');<br /> }<br /> });<br /><br /> $('#navmenu ul ul li a').each(function() {<br /> if ($(this).hasClass('highlight')){<br /> $(this).removeClass('highlight');<br /> $(this).parent().parent().parent().children(':first-child').addClass('highlight');<br /> }<br /> });<br /><br /><br /> });<br /></script><br /><br /><br /><style type="text/css"><br /><br /><br /> #navmenu ul ul li.a:hover a, #navmenu ul ul li.a:hover ul {<br /> background-color: #65834C;<br /> color: #fff;<br /> }<br /><br /><br /> #navmenu ul ul li.b:hover a, #navmenu ul ul li.b:hover ul {<br /> background-color: #4F4C83;<br /> color: #fff;<br /> }<br /><br /> #navmenu ul ul li.c:hover a, #navmenu ul ul li.c:hover ul {<br /> background-color: #4C7983;<br /> color: #fff;<br /> }<br /><br /> #navmenu ul ul li.d:hover a, #navmenu ul ul li.d:hover ul {<br /> background-color: #834C4C;<br /> color: #fff;<br /> }<br /><br /> #navmenu ul ul li.e:hover a, #navmenu ul ul li.e:hover ul {<br /> background-color: #4D6899;<br /> color: #fff;<br /> }<br /><br /> #navmenu ul ul li.f:hover a, #navmenu ul ul li.f:hover ul {<br /> background-color: #97944C;<br /> color: #fff;<br /> }<br /><br /> #navmenu ul ul ul a:hover {<br /> text-decoration: underline;<br /> }<br /><br /> #navmenu,<br /> #navmenu ul,<br /> #navmenu ul li,<br /> #navmenu ul ul,<br /> #navmenu ul ul li,<br /> #navmenu ul ul ul,<br /> #navmenu ul ul ul li {<br /> z-index: 1000;<br /> }<br /> <br /> #navmenu ul {<br /> margin: 0;<br /> padding: 0<br /> }<br /> <br /> #navmenu li {<br /> margin: 0;<br /> padding: 0<br /> }<br /> <br /> #navmenu a {<br /> margin: 0;<br /> padding: 0<br /> }<br /> <br /> #navmenu ul {<br /> list-style: none;<br /> overflow: visible;<br /> }<br /> <br /> #navmenu a {<br /> text-decoration: none<br /> }<br /> <br /> #navmenu {<br /> height: 50px;<br /> background-color: #384959;<br /> box-shadow: 0 0 3px rgb(206, 206, 206);<br /> width: auto;<br /> }<br /> <br /> #navmenu > ul > li {<br /> float: left;<br /> position: relative;<br /> }<br /> <br /> #navmenu > ul > li > a {<br /> color: #fff;<br /> font-family: Verdana, 'Lucida Grande';<br /> font-size: 15px;<br /> line-height: 50px;<br /> padding: 15px 20px;<br /> border: none;<br /> display: inline;<br /> -webkit-transition: color .15s;<br /> -moz-transition: color .15s;<br /> -o-transition: color .15s;<br /> transition: color .15s<br /> }<br /> <br /><br /> #navmenu > ul > li > a:hover,<br /> #navmenu ul li a.highlight,<br /> #navmenu .highlightz {<br /> color: #000;<br /> background-color: #fff;<br /> }<br /><br /> #navmenu > ul > li > ul {<br /> opacity: 0;<br /> visibility: hidden;<br /> padding: 16px 0 20px 0;<br /> background-color: #fff;<br /> text-align: left;<br /> position: absolute;<br /> width: 180px;<br /> overflow: visible;<br /> border: none;<br /> -webkit-transition: all .3s .1s;<br /> -moz-transition: all .3s .1s;<br /> -o-transition: all .3s .1s;<br /> transition: all .3s .1s;<br /> -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);<br /> -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);<br /> box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4)<br /> }<br /> <br /> #navmenu > ul > li:hover > ul {<br /> opacity: 1;<br /> visibility: visible<br /> }<br /> <br /> #navmenu > ul ul > li {<br /> position: relative;<br /> float: none;<br /> }<br /> <br /> #navmenu ul ul a {<br /> color: #323232;<br /> font-family: Verdana, 'Lucida Grande';<br /> font-size: 13px;<br /> background-color: #fff;<br /> padding: 5px 8px 7px 16px;<br /> display: block;<br /> border: none;<br /> -webkit-transition: background-color 0.1s;<br /> -moz-transition: background-color 0.1s;<br /> -o-transition: background-color 0.1s;<br /> transition: background-color 0.1s<br /> }<br /> <br /> #navmenu ul ul li:hover {<br /> background-color: #cc2c24;<br /> }<br /> <br /> #navmenu ul ul li:hover span {<br /> right: 10px;<br /> -webkit-transition: all .3s;<br /> -moz-transition: all .3s;<br /> -o-transition: all .3s;<br /> transition: all .3s;<br /> }<br /> <br /> #navmenu ul ul li:hover span::before {<br /> border-color: transparent transparent transparent #fff;<br /> }<br /> <br /> #navmenu ul ul ul {<br /> visibility: hidden;<br /> opacity: 0;<br /> position: absolute;<br /> top: -16px;<br /> left: 180px;<br /> padding: 16px 0 20px 0;<br /> background-color: #fff;<br /> text-align: left;<br /> width: 180px;<br /> border: none;<br /> -webkit-transition: all .3s;<br /> -moz-transition: all .3s;<br /> -o-transition: all .3s;<br /> transition: all .3s;<br /> -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);<br /> -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);<br /> box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);<br /> z-index: 1000;<br /> }<br /> <br /> <br /> #navmenu ul ul > li:hover > ul {<br /> opacity: 1;<br /> visibility: visible<br /> }<br /> <br /> #navmenu ul ul a:hover {<br /> color: #f0f0f0;<br /> background-color: #214565;<br /> }<br /> <br /> #navmenu ul ul span::before {<br /> content: '';<br /> display: block;<br /> border-color: transparent transparent transparent #000000;<br /> border-style: solid;<br /> border-width: 5px;<br /> position: absolute;<br /> z-index: 1001;<br /> }<br /><br /> #navmenu ul ul li.highlights span::before {<br /> border-color: transparent transparent transparent #fff;<br /> }<br /> <br /> #navmenu ul ul span:hover::before {<br /> border-color: transparent transparent transparent #fafafa;<br /> -webkit-transition: all .3s;<br /> -moz-transition: all .3s;<br /> -o-transition: all .3s;<br /> transition: all .3s;<br /> }<br /> <br /> #navmenu ul ul span {<br /> position: absolute;<br /> right: 20px;<br /> top: 10px;<br /> }<br /></style></blockquote><br /><br /><span style="color: #17a98c;"><b>Step 4.</b></span> Click <b>Save template</b>.<br /><br /><h4>That's all !</h4>Refresh your blog to see stylish horizontal jquery menu with highlighter. For any issues related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)Unknownnoreply@blogger.com15tag:blogger.com,1999:blog-5141858361892798601.post-58171498698566394912016-04-20T23:10:00.000+05:302016-06-16T12:15:11.777+05:30Removing Hyperlinks From Blogger Post ImagesBy default Blogger creates a link to the image whenever an image is uploaded to a Blogger post. Sometimes, however, you might want to remove the link to prevent the image from being clickable. A common reason would be to safeguard your image. If you are worried about your image being copied you can prevent it from appearing full size by disabling the link. When you remove the hyperlink off an image from your post, your post image won't be clickable anymore, preventing readers from accessing the larger version of the image. <br /><a name='more'></a><br /><div class="mainimg"><div class="separator" style="clear: both; text-align: center;"><img alt="Removing Hyperlinks From Blogger Post Images" border="0" src="https://1.bp.blogspot.com/-IBS-LC3Zm2U/VxfEEyOePJI/AAAAAAAAAnA/I66gd55235sPiy5O9GhUN2x6dd9cEhNQQCLcB/s1600/removing-hyperlink-from-blogger-post-images.png" title="" /></div></div>If you are using a custom Blogger template, then you probably have noticed that few of the third-party developed templates does not supports <a href="http://www.howbloggerz.blogspot.in/2016/03/custom-stylish-responsive-jquery-lightbox-for-blogger.html" target="_blank">Lightbox</a> functionality, which causes images to be opened in a new tab window whenever they are clicked by the users. Since, Blogger use Picasa web album to host your blog’s images, so whenever user clicks on an image present on your site it ultimately takes them to a different destination, which causes increase in the bounce rate and decrease in the ad sales because your users are not converting they are coming from one end and leaving from the other.<br /><br />Recently, one of our users asked us that How to Remove Hyperlinks from Post Images in Blogger? The easiest way to remove hyperlinks for post images in blogger is to simply revert to the HTML Tab in the blogger post editor and remove the hyperlink <a href>. However, what if you have to edit large numbers of posts? don't worry, we have prepared set of codes with CSS and JavaScript tweak, not HTML one to automatically remove links. Today in this tutorial, we will show you How to manually or automatically Remove Hyperlinks from single Post image or from Homepage page / Specific post / Specific page / or from all posts in blogger with step by step instructions and images.<br /><br /><br /><h2 style="text-align: left;">Removing Hyperlinks from Posts Images</h2><br />If you just want to disable the hyperlink from a single image in Blogger try this method. I have found that it removes the link but it will not reinstate it once removed so be sure you want to remove the link before you start otherwise you will need to reinstate the link manually. I suggest you <a href="http://www.howbloggerz.blogspot.com/2016/04/backup-restore-blogger-posts-content-template.html" target="_blank">backup</a> before you start.<br /><br /><h3 style="text-align: left;">Removing Hyperlinks Manually / from Single Image</h3><h4 style="text-align: left;">1. By Using Blogger Compose Editor Toolbar ( <i>Easy</i> ) </h4><span style="color: #17a98c;"><b>Step 1.</b></span> Login to your blogger account, then navigate to <b>edit post</b> ( <i>From which you want to remove image hyperlink</i> ).<br /><br /><span style="color: #17a98c;"><b>Step 2.</b></span> <i>Make sure Compose is selected</i>, then <b>select the picture</b> and then <b>click on <span style="color: blue;"><u>Link</u></span></b> in Toolbar.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-Fmv45xqK9kM/VxeQCo1rUbI/AAAAAAAAAmw/6LfnfpoQSawm4E_t46fLtEDIA3X0jPpgQCLcB/s1600/Removing-image-hyperlink-using-blogger-editor.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Removing image hyperlink using blogger editor" border="0" src="https://4.bp.blogspot.com/-Fmv45xqK9kM/VxeQCo1rUbI/AAAAAAAAAmw/6LfnfpoQSawm4E_t46fLtEDIA3X0jPpgQCLcB/s1600/Removing-image-hyperlink-using-blogger-editor.png" title="" /></a></div><br /><br /><span style="color: #17a98c;"><b>Step 3.</b></span> Click on <b>Publish / Update</b>.<br /><br /><h4 style="text-align: left;"></h4><h4 style="text-align: left;">2. By Using Blogger Post HTML Editor</h4><span style="color: #17a98c;"><b>Step 1.</b></span> Login to your blogger account, then navigate to <b>edit post</b> ( <i>From which you want to remove image hyperlink</i> ).<br /><br /><span style="color: #17a98c;"><b>Step 2.</b></span> <i>Make sure HTML is selected</i>, then Find the <b>image hyperlink code</b>.<br /><br /><b>Note :</b> <i>Their may be more than one Image hyperlink depends upon the number of images in post. Code may vary little because every image have different URL.</i><br /><br />Code look like this :<br /><br /><blockquote class="tr_bq"><span style="color: #38761d;"><a</span> href="https://4.bp.blogspot.com/-pqkPpEx7KNY/VxYXv655rRI/AAAAAAAAAmk/HCKXZFHvtCobFrpozByEUuclA7MAjEBYQCKgB/s1600/Vintage-Camera.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><span style="color: #134f5c;"><img</span> border="0" height="180" src="https://4.bp.blogspot.com/-pqkPpEx7KNY/VxYXv655rRI/AAAAAAAAAmk/HCKXZFHvtCobFrpozByEUuclA7MAjEBYQCKgB/s320/Vintage-Camera.jpg" width="320" /><span style="color: #38761d;"></a></span></blockquote><br /><span style="color: #17a98c;"><b>Step 3.</b></span> Now <b>remove the hyperlink</b> around the img tag ( <i>Blue color code</i> ).<br /><br /><blockquote class="tr_bq"><span style="color: blue;"><a href="https://4.bp.blogspot.com/-pqkPpEx7KNY/VxYXv655rRI/AAAAAAAAAmk/HCKXZFHvtCobFrpozByEUuclA7MAjEBYQCKgB/s1600/Vintage-Camera.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"></span><img border="0" height="180" src="https://4.bp.blogspot.com/-pqkPpEx7KNY/VxYXv655rRI/AAAAAAAAAmk/HCKXZFHvtCobFrpozByEUuclA7MAjEBYQCKgB/s320/Vintage-Camera.jpg" width="320" /><span style="color: blue;"></a></span> </blockquote><br /><span style="color: #17a98c;"><b>Step 4.</b></span> Click on <b>Publish / Update</b>.<br /><br /><br /><br /><h3 style="text-align: left;">Removing Hyperlinks Automatically From Post Images</h3><br /><span style="color: #17a98c;"><b>Step 1.</b></span> Login to your blogger account, then navigate to <b>Template</b> > <b>Edit HTML</b>.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-rHEqb_6BZ3Y/VsndjhBdWzI/AAAAAAAAAO0/cDynSo2Pfg8gHWQBxD2pU_UjLX5KwoV7Q/s1600/Edit-template-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="edit blogger template" border="0" src="https://2.bp.blogspot.com/-rHEqb_6BZ3Y/VsndjhBdWzI/AAAAAAAAAO0/cDynSo2Pfg8gHWQBxD2pU_UjLX5KwoV7Q/s1600/Edit-template-blogger.png" title="" /></a></div><br /><span style="color: #17a98c;"><b>Step 2.</b></span> Click anywhere inside the code and search for following code ( CTRL+F ) :<br /><br /><blockquote class="tr_bq"></head></blockquote><br /><br /><span style="color: #17a98c;"><b>Step 3.</b></span> Copy and paste the following code just above it to <b>disable Hyperlinks</b> from :<br /><br /><ul class="tabs"><li><a href="#tab1"><h4>All posts</h4></a></li><li><a href="#tab2"><h4>Homepage</h4></a></li><li><a href="#tab3"><h4>All pages</h4></a></li><li><a href="#tab4"><h4>Specific post & page</h4></a></li></ul><div id="tabs-content"><div id="tab1"><blockquote class="tr_bq"><b:if cond='data:blog.pageType == "item"'><br /><script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'></script><br /><script type="text/javascript"><br />$(document).ready(function() {<br />$('.post-body a[href]:has(img)').css({"cursor": "default" , "pointer-events": "none" , "-webkit-user-select": "none" , "-khtml-user-select": "none" , "-moz-user-select": "none" , "-o-user-select": "none" , "user-select": "none"})<br />.click(function() { return false; });<br />});<br /></script><br /></b:if></blockquote></div><div id="tab2"><blockquote class="tr_bq"><b:if cond='data:blog.url == data:blog.homepageUrl'><br /><script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'></script><br /><script type="text/javascript"><br />$(document).ready(function() {<br />$('.post-body a[href]:has(img)').css({"cursor": "default" , "pointer-events": "none" , "-webkit-user-select": "none" , "-khtml-user-select": "none" , "-moz-user-select": "none" , "-o-user-select": "none" , "user-select": "none"})<br />.click(function() { return false; });<br />});<br /></script><br /></b:if></blockquote></div><div id="tab3"><blockquote class="tr_bq"><b:if cond='data:blog.pageType == "static_page"'><br /><script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'></script><br /><script type="text/javascript"><br />$(document).ready(function() {<br />$('.post-body a[href]:has(img)').css({"cursor": "default" , "pointer-events": "none" , "-webkit-user-select": "none" , "-khtml-user-select": "none" , "-moz-user-select": "none" , "-o-user-select": "none" , "user-select": "none"})<br />.click(function() { return false; });<br />});<br /></script><br /></b:if></blockquote></div><div id="tab4"><blockquote class="tr_bq"><b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "<span style="color: blue;">URL-HERE</span>"'><br /><script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'></script><br /><script type="text/javascript"><br />$(document).ready(function() {<br />$('.post-body a[href]:has(img)').css({"cursor": "default" , "pointer-events": "none" , "-webkit-user-select": "none" , "-khtml-user-select": "none" , "-moz-user-select": "none" , "-o-user-select": "none" , "user-select": "none"})<br />.click(function() { return false; });<br />});<br /></script><br /></b:if></blockquote></div></div><br /><br /><span style="color: #17a98c;"><b>Step 4.</b></span> Configuration for <b>Specific post and page only</b> :<br /><br />Replace <span style="color: blue;">URL-HERE</span> with the page / post URL. For example :<br /><br /><b>If your post URL is :</b> <i>http://www.howbloggerz.blogspot.com/2016/04/removing-hyperlinks-from-blogger-post-images.html</i><br /><b>Then add only :</b> <i>2016/04/removing-hyperlinks-from-blogger-post-images.html</i><br /><br />OR<br /><br /><b>If your page URL is :</b> <i>http://www.howbloggerz.blogspot.com/p/write-for-us.html</i><br /><b>Then add only :</b> <i>p/write-for-us.html</i><br /><br /><br /><span style="color: #17a98c;"><b>Step 5.</b></span> Click Save Template.<br /><br /><h4 style="text-align: left;">Enjoy!</h4>Now view your blog post images and try a click over it :), as it is impossible to have one global code that works for all templates. If it doesn't work on your template, leave a comment and I'll prepare one that will work for you. Stay Updated, Browse Howbloggerz! :)Unknownnoreply@blogger.com15tag:blogger.com,1999:blog-5141858361892798601.post-69876385889445337942016-04-18T23:32:00.000+05:302016-06-16T12:15:11.786+05:30How To Change Email Subscription Delivery Time For BloggerIf you were looking to <b>change your google blogger feedburner email subscription delivery time</b> for blog updates or To <b>send recent / latest / newly published posts into yours followers inbox immediately</b> or after few hours or Want To <b>manage the auto-send email setting to prevent delay</b> of day or several hours in email receiving or to receive posts email updates from your blog in real-time or To solve any other issue related to posts delivery schedule via email. <a name='more'></a>Follow the below given step by step tutorial with images :<br /><div class="mainimg"><div class="separator" style="clear: both; text-align: center;"><img alt="how to change Email subscription delivery time blogger" border="0" src="https://2.bp.blogspot.com/-enpldP-Ymq0/VxUdnmUckfI/AAAAAAAAAlM/9AhwdX1aGOod2godFsYYaWUPUztRUocEwCLcB/s1600/how-to-change-Email-subscription-delivery-time-blogger.png" title="" /></div></div><br /><h2 style="text-align: left;">Steps: To Change Email Subscription Delivery Time</h2><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-nsNpPNJov5Y/VxUcePbTQWI/AAAAAAAAAk8/RsUK9RnxgA8Ig1JRjXKQ0VfXoCnxaeSqgCLcB/s1600/FeedBurner.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="feedburner logo" border="0" src="https://1.bp.blogspot.com/-nsNpPNJov5Y/VxUcePbTQWI/AAAAAAAAAk8/RsUK9RnxgA8Ig1JRjXKQ0VfXoCnxaeSqgCLcB/s1600/FeedBurner.png" title="" /></a></div><br /><br /><br /><span style="color: #17a98c;"><b>Step 1.</b></span> Go to <b><a href="http://feedburner.google.com/" rel="nofollow" target="_blank">Feedburner</a></b>, Login with your blogger account > <b>Select your blog</b>.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-dQB-2Oj81KI/VxUcvtPhlgI/AAAAAAAAAlA/hNT4QoSmOZArSGtFvULmNwVp9Iv-bPUvgCLcB/s1600/Feedburner-dashboard.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Feedburner dashboard" border="0" src="https://4.bp.blogspot.com/-dQB-2Oj81KI/VxUcvtPhlgI/AAAAAAAAAlA/hNT4QoSmOZArSGtFvULmNwVp9Iv-bPUvgCLcB/s1600/Feedburner-dashboard.png" title="" /></a></div><br /><br /><br /><span style="color: #17a98c;"><b>Step 2.</b></span> Then navigate to <b>Publicize</b> > <b>Email Subscriptions</b> > <b>Delivery Options</b>.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-HYF1K0g8kRI/VxUc9oqGvhI/AAAAAAAAAlE/57IOnaqiQ2kCcEugUZUi1B_a2sszHXGUACLcB/s1600/Changing-email-delivery-time.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Changing email delivery time blogger" border="0" height="369" src="https://4.bp.blogspot.com/-HYF1K0g8kRI/VxUc9oqGvhI/AAAAAAAAAlE/57IOnaqiQ2kCcEugUZUi1B_a2sszHXGUACLcB/s640/Changing-email-delivery-time.png" title="" width="640" /></a></div><br /><br /><span style="color: #17a98c;"><b>Step 3.</b></span> Change the setting and then Click <b>Save</b>.<br /><br /><h4 style="text-align: left;">Some Tips :</h4><ol style="text-align: left;"><li>Make sure your the time in your Blogger settings is in YOUR time zone. This will throw the delivery timing off if it isn’t.</li><li>Make sure when you schedule a blog that is timed BEFORE the scheduled Email Delivery time in Feedburner.</li><li>This screen is also where you can DEACTIVATE sending emails from Feedburner all together if you still want to keep your account active but just want to stop email service.</li><li>The setting to schedule delivery of new posts to email subscribers does not allow for immediate delivery, but asks you to choose a two hour window. Therefore you can schedule/publish your post few hours before delivery time to deliver it faster.</li></ol><br /><h4 style="text-align: left;">That's it</h4>Now your subscribers will receive posts updates via email in your scheduled time. For any issues related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5141858361892798601.post-12544121130816446192016-04-14T16:36:00.001+05:302016-06-14T12:19:39.892+05:30Show At Most Posts Setting Not Working In BloggerMany users were facing problems related to topic ' <b>The older posts were missing from their blog homepage but they were actually not deleted and still exist in posts list</b> ' or ' <b>The number of posts per page were not matching up with the setting of number of posts per page or that should be shown and missing posts were shown in link "<i>older posts</i>"</b> ' or ' <b>The number of posts on main page / Show at most posts on the main page setting is not Saving properly</b>.<br /><a name='more'></a><br /><div class="mainimg"><div class="separator" style="clear: both; text-align: center;"><img alt="Posts per page not working or saving properly" border="0" src="https://1.bp.blogspot.com/-hNvLTzTAUt4/Vw95ZDqCxzI/AAAAAAAAAkg/3saJhhkTXlIpiA2UOrh3eUTS4ORrsXA_ACLcB/s1600/posts-per-page-setting-not-working-saving-properly.png" title="" /></div></div><br />These problem were caused due to the large length of posts in your blog due to which blogger was not able to set preferred numbers of posts per page ( <i>Approx limit 155,000 characters / page for posts</i> ). and therefore shifts your posts to next page ( <i>Older Posts</i> link ).<br /><br />To solve this problem Problem you need to <b>add Jump Break</b> in each post to <b>summaries</b> your posts by maintaining the length your posts without shorting / editing posts. This will add link to full post after few defined lines.<br /><br />To learn to add jump break follow the given step by step tutorial with images :<br /><br /><h2 style="text-align: left;">Steps : How To Add Jump Break </h2><br /><span style="color: #17a98c;"><b>Step 1.</b></span> Login to your Blogger account, then click on New Post or Open existing post.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-nk25-5AWFVI/Vw9xld7wGmI/AAAAAAAAAkA/-KlXaWttw7o2JdfsSIX8ZXIjV1SNn8qkwCLcB/s1600/creating-new-posts-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="creating new post in blogger" border="0" height="286" src="https://3.bp.blogspot.com/-nk25-5AWFVI/Vw9xld7wGmI/AAAAAAAAAkA/-KlXaWttw7o2JdfsSIX8ZXIjV1SNn8qkwCLcB/s640/creating-new-posts-blogger.png" title="" width="640" /></a></div><br /><br /><br /><span style="color: #17a98c;"><b>Step 2.</b></span> After few lines ( Summary of post ) insert jump break using Blogger Post editor.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-veXkNSlq-cY/Vw9xs_g5KtI/AAAAAAAAAkE/EPXNagvO90MZsBmV45FvPhb3N106yAaIgCLcB/s1600/adding-jump-break-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="adding jump breaks in blogger posts" border="0" height="312" src="https://2.bp.blogspot.com/-veXkNSlq-cY/Vw9xs_g5KtI/AAAAAAAAAkE/EPXNagvO90MZsBmV45FvPhb3N106yAaIgCLcB/s640/adding-jump-break-blogger.png" title="" width="640" /></a></div><br /><br /><span style="color: #17a98c;"><b>Step 3.</b></span> Click publish / Update.<br /><br /><br /><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody><tr><td style="text-align: center;"><a href="https://3.bp.blogspot.com/-6I-ws8nQydg/Vw9x4ZyN7uI/AAAAAAAAAkI/qavUUHqMQqkBsWAQVl6fGCpS9LPLsEJ1QCLcB/s1600/post-preview-after-adding-jump-break.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img alt="Post Preview after adding Jump Break" border="0" src="https://3.bp.blogspot.com/-6I-ws8nQydg/Vw9x4ZyN7uI/AAAAAAAAAkI/qavUUHqMQqkBsWAQVl6fGCpS9LPLsEJ1QCLcB/s1600/post-preview-after-adding-jump-break.png" title="" /></a></td></tr><tr><td class="tr-caption" style="text-align: center;">Post Preview after adding Jump Break</td></tr></tbody></table><br /><br /><h4 style="text-align: left;">That's all</h4><br />Now you can add Jump Breaks in each post either new or old which will also solve the above given problems. For any issues related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)Unknownnoreply@blogger.com4tag:blogger.com,1999:blog-5141858361892798601.post-10837710648448179162016-04-12T13:50:00.002+05:302016-06-16T12:15:11.750+05:30How To Backup And Restore Blogger Posts And TemplateHas fear of losing data of your blog posts? <b>Must backup your All blog posts</b> to save your years of hard-work or to <b>Import or Export</b> your blog posts to other platform.<br /><br />Thinking to make any changes in your blog template? <b>Remember to backup your Template</b> each time before it to preserve your blog design and layout if you ran into any problem in your edit.<br /><br />So, If you want to backup and restore your blogger posts and template to prevent inconvenience to your users. Follow the given step by step tutorial with images :<br /><a name='more'></a><div class="mainimg"><div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://3.bp.blogspot.com/-3qNS5qY0JUI/VwyzqDRGRII/AAAAAAAAAjs/sAvplWedAZwehNNL1ni5AhbjJS2tzibXQCLcB/s1600/how-to-backup-restore-blogger-posts-tempate.png" /></div></div><br /><br /><h2 style="text-align: left;">How To Backup And Restore Template : </h2><br /><span style="color: #17a98c;"><b>Step 1.</b></span> Login to your Blogger account, then go to <b>Template</b> > <b>Backup / Restore</b>. <br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-szFu9kj4uJM/VwyYGXu45MI/AAAAAAAAAiU/ZlC_pTecIa0Jk_3lwbCx4HvH_dTAtFtrwCLcB/s1600/backup-restore-blogger-template.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="backup restore blogger template" border="0" height="392" src="https://3.bp.blogspot.com/-szFu9kj4uJM/VwyYGXu45MI/AAAAAAAAAiU/ZlC_pTecIa0Jk_3lwbCx4HvH_dTAtFtrwCLcB/s640/backup-restore-blogger-template.png" title="" width="640" /></a></div><br /><br /><span style="color: #17a98c;"><b>Step 2.</b></span> To Backup Template: Click <b>Download full template</b> and save the xml file.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-yPwQuOgedTI/VwyZf4FQwtI/AAAAAAAAAig/OAGXGZej28M795ck3Fmd0UJNpZtLG4WpwCLcB/s1600/download-blogger-template-xml-file.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="download blogger template xml file" border="0" src="https://3.bp.blogspot.com/-yPwQuOgedTI/VwyZf4FQwtI/AAAAAAAAAig/OAGXGZej28M795ck3Fmd0UJNpZtLG4WpwCLcB/s1600/download-blogger-template-xml-file.png" title="" /></a></div><br /><h4 style="text-align: center;">Now you have Backup of your Template</h4><br /><br /><span style="color: #17a98c;"><b>Step 3.</b></span> To Restore Template: Click <b>Browse...</b> , select the xml file ( Backup file ) and Click <b>Upload</b>.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-7dyXgk828EI/VwybBK8LhiI/AAAAAAAAAis/xtrQ7dd_f04l4jofp7DpFM_a3n2i2UkJwCLcB/s1600/restore-blogger-template.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="restore blogger template" border="0" src="https://4.bp.blogspot.com/-7dyXgk828EI/VwybBK8LhiI/AAAAAAAAAis/xtrQ7dd_f04l4jofp7DpFM_a3n2i2UkJwCLcB/s1600/restore-blogger-template.png" title="" /></a></div><br /><br /><h4 style="text-align: center;">Now you have successfully Restored your Template.</h4><br /><br /><h2 style="text-align: left;">How To Backup And Restore Blogger Posts :</h2><br /><h3 style="text-align: left;">To Backup Blog content :</h3><br /><span style="color: #17a98c;"><b>Step 1.</b></span> Login to your Blogger account, then go to <b>Settings</b> > <b>Other</b> > <b>Back up content</b>.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-lvN4EJ4atmo/VwykTZL9YMI/AAAAAAAAAi8/ZVwduJ-AtFoshGWxvOPAn3aeS4XPvrx3ACLcB/s1600/backup-export-blogger-posts-comments-and-pages.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="backup export blogger posts comments and pages" border="0" height="448" src="https://2.bp.blogspot.com/-lvN4EJ4atmo/VwykTZL9YMI/AAAAAAAAAi8/ZVwduJ-AtFoshGWxvOPAn3aeS4XPvrx3ACLcB/s640/backup-export-blogger-posts-comments-and-pages.png" title="" width="640" /></a></div><br /><br /><br /><span style="color: #17a98c;"><b>Step 2.</b></span> Click <b>Save to your computer</b> and save the xml file.<br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-00Z43-A5h6w/VwykgQz0ppI/AAAAAAAAAjA/v4KMk8smhkU-KPt9AWX4lR0bGQqyOp-3ACLcB/s1600/save-blog-posts-pages-content-on-computer.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="save blog posts pages content on computer" border="0" src="https://1.bp.blogspot.com/-00Z43-A5h6w/VwykgQz0ppI/AAAAAAAAAjA/v4KMk8smhkU-KPt9AWX4lR0bGQqyOp-3ACLcB/s1600/save-blog-posts-pages-content-on-computer.png" title="" /></a></div><br /><br /><h3 style="text-align: left;">To Restore Blog content :</h3><br /><span style="color: #17a98c;"><b>Step 1.</b></span> Login to your Blogger account, then go to <b>Settings</b> > <b>Other</b> > <b>Import content</b>.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-HDrwriSB3cw/VwyknyZX9SI/AAAAAAAAAjE/MY-ZaDMCbWcs-JJP43MeiUPQk-CL_oawwCLcB/s1600/restore-import-blogger-posts-comments-and-pages.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="restore import blogger posts comments and pages" border="0" height="448" src="https://3.bp.blogspot.com/-HDrwriSB3cw/VwyknyZX9SI/AAAAAAAAAjE/MY-ZaDMCbWcs-JJP43MeiUPQk-CL_oawwCLcB/s640/restore-import-blogger-posts-comments-and-pages.png" title="" width="640" /></a></div><br /><br /><br /><span style="color: #17a98c;"><b>Step 2.</b></span> Solve the CAPTCHA ( if any ) Click <b>Import from computer</b> and select the xml file.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-amdMA9im7zw/Vwykzol4PBI/AAAAAAAAAjM/QRU1AOmwj7MrigDy1_D6iQyCEqOGIWcxwCLcB/s1600/import-blogger-post-pages-comments-from-your-computer.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="import blogger post pages comments from your computer" border="0" src="https://3.bp.blogspot.com/-amdMA9im7zw/Vwykzol4PBI/AAAAAAAAAjM/QRU1AOmwj7MrigDy1_D6iQyCEqOGIWcxwCLcB/s1600/import-blogger-post-pages-comments-from-your-computer.png" title="" /></a></div><br /><br /><br /><br /><h4 style="text-align: left;">That's it !</h4><br />You have successfully backup and restored your blogger Template and content included posts, pages and comments. For any issues related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-5141858361892798601.post-39043866402404141152016-03-23T13:29:00.001+05:302018-01-21T11:10:51.672+05:30How To Add Text Watermark To Blogger (20 Styles)<div class="datemod">Updated on: <span itemprop="dateModified">January 21, 2018</span></div> <p>I found too many questions about <strong>Adding watermark in blogger posts</strong> but no appropriate solution, so I decided to create a tutorial for my users to let them know how to <em>add text watermark to their Blogspot blog</em>.</p> <p>Watermark is basically used to prevent your content from being getting copied and also to link your blog content to your name or brand. For <strong>adding a horizontal, vertical or diagonal text watermark</strong> (<em>repeating or non-repeating - multi-line or single-line</em>) to the blogger template just follow the given step by step tutorial with images and a demo.</p> <a name='more'></a> <div class="mainimg"><img alt="Add Text Watermark To Blogger Posts" src="https://3.bp.blogspot.com/-jReKGIs_vtw/VvI97h8njTI/AAAAAAAAAfI/3mZV05Ve5hgK0jJp_PcRm2qAXGtpm-Ekg/s1600/Add-text-watermark-to-blogger.png" /></div> <h2>Steps : Adding Text Watermark to Blog Posts</h2> <div class="simg"><img alt="Add Watermark To Blogger Template" src="https://1.bp.blogspot.com/-h-z1nK8wo3w/Wli9ShajVXI/AAAAAAAAIcc/IG0TVsGr6gUSsGlUuhUYY3kkAvaiRFQYgCLcBGAs/s1600/add-watermark-to-blogspot-blog.png" title="Post with Watermark" /></div> <div class="hbz-demo"><a href="http://www.howbloggerz.com/p/demo.html?url=http://howbloggerz-demo.blogspot.com/" rel="nofollow" target="_blank">DEMO</a></div> <p><span style="color: #17a98c;"><strong>Step 1.</strong></span> Login to your Blogger account, then go to <strong>Theme</strong> > <strong>Edit HTML</strong>.</p> <div class="simg"><img alt="Edit HTML of Theme" src="https://1.bp.blogspot.com/-CyVKqetjads/WMQXZ3dYveI/AAAAAAAAGFk/TPRPs0vlhOsrSru_jBC4XAaMBKnsbZq-wCLcB/s1600/Edit-HTML-Theme-Blogger.png" title="Edit Theme's HTML" border="0" /></div> <p><span style="color: #17a98c;"><strong>Step 2.</strong></span> Click anywhere inside the code and search for the following code (CTRL+F):</p> <pre><code><data:post.body/></code></pre> <p><span style="color: #17a98c;"><strong>Step 3.</strong></span> Replace the code with this code:</p> <p class="pnote"><strong>Note:</strong> Their will be two codes replace both.</p> <pre><code><div class='hbzwatermark'><data:post.body/></div></code></pre> <div class="simg"><img alt="Watermark for blogspot blogs" src="https://1.bp.blogspot.com/-mi-YJTtRBA8/VvJCetOXrSI/AAAAAAAAAfo/9TUH-NTff_QOB2QobUxtX0aLeS0Phw3ng/s1600/Adding-watermark-text-to-blog-posts.png" title="Edit Theme's HTML" border="0" /></div> <p><span style="color: #17a98c;"><strong>Step 4.</strong></span> Again click anywhere inside the code and search for following code:</p> <pre><code>]]></b:skin></code></pre> <p><span style="color: #17a98c;"><strong>Step 5.</strong></span> Place this code just above it:</p> <ul class="tabs"><li><a href="#tab1"><h3>Multi-line Watermarks</h3></a></li><li><a href="#tab2"><h3>Single-line Watermarks</h3></a></li></ul> <div id="tabs-content"><div id="tab1"> <ul class="tabs"><li><a href="#tab3"><span class="htitle">Repeating</span></a></li><li><a href="#tab4"><span class="htitle">Non-Repeating</span></a></li></ul> <div id="tabs-content"><div id="tab3"> <ul class="tabs"><li><a href="#tab5"><span class="htitle">Horizontal</span></a></li><li><a href="#tab6"><span class="htitle">Vertical</span></a></li><li><a href="#tab7"><span class="htitle">Diagonal</span></a></li></ul> <div id="tabs-content"><div id="tab5"><ul class="hheader"><li>For Horizontally Repeating Multi-line Watermark</li> <pre><code>.hbzwatermark:before {<br /> display: block;<br /> background: url("<span style="color: #0b5394;">https://3.bp.blogspot.com/-8WVWdAZ23tM/WkNeDHW1GEI/AAAAAAAAIYA/y09Ncr7ZCOQ5B5tPy22-K_j3Ue9b1NLcQCLcBGAs/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png</span>");<br /> background-repeat: repeat;<br /> position: absolute;<br /> height: 100%;<br /> top: 0;<br /> left: 0;<br /> width: 100%;<br /> content: "";<br /> z-index: -1;<br /> background-size: auto <span style="color: #38761d;">30px</span>;<br /> opacity: <span style="color: #ff0707;">0.5</span>;<br />}<br />.hbzwatermark {<br /> position: relative;<br /> overflow: hidden;<br /> z-index: 1;<br />}</code></pre></ul></div> <div id="tab6"><ul class="hheader"><li>For Vertically Repeating Multi-line Watermark <span>(Top to Bottom)</span></li> <pre><code>.hbzwatermark::before {<br /> display: block;<br /> background: url("<span style="color: #0b5394;">https://3.bp.blogspot.com/-8WVWdAZ23tM/WkNeDHW1GEI/AAAAAAAAIYA/y09Ncr7ZCOQ5B5tPy22-K_j3Ue9b1NLcQCLcBGAs/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png</span>");<br /> position: absolute;<br /> height: 200%;<br /> top: -100%;<br /> left: 50%;<br /> width: 5000%;<br /> transform: rotate(90deg);<br /> -moz-transform: rotate(90deg);<br /> -webkit-transform: rotate(90deg);<br /> transform-origin: left center;<br /> -moz-transform-origin: left center;<br /> -webkit-transform-origin: left center;<br /> content: "";<br /> z-index: -1;<br /> background-size: auto <span style="color: #38761d;">30px</span>;<br /> opacity: <span style="color: #ff0707;">0.5</span>;<br /> background-repeat: repeat;<br />}<br />.hbzwatermark {<br /> position: relative;<br /> overflow: hidden;<br /> z-index: 1;<br />}</code></pre> <li>For Vertically Repeating Multi-line Watermark <span>(Bottom to Top)</span></li> <pre><code>.hbzwatermark::before {<br /> display: block;<br /> background: url("<span style="color: #0b5394;">https://3.bp.blogspot.com/-8WVWdAZ23tM/WkNeDHW1GEI/AAAAAAAAIYA/y09Ncr7ZCOQ5B5tPy22-K_j3Ue9b1NLcQCLcBGAs/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png</span>");<br /> position: absolute;<br /> height: 200%;<br /> bottom: -100%;<br /> left: 50%;<br /> width: 5000%;<br /> transform: rotate(-90deg);<br /> -moz-transform: rotate(-90deg);<br /> -webkit-transform: rotate(-90deg);<br /> transform-origin: left center;<br /> -moz-transform-origin: left center;<br /> -webkit-transform-origin: left center;<br /> content: "";<br /> z-index: -1;<br /> background-size: auto <span style="color: #38761d;">30px</span>;<br /> opacity: <span style="color: #ff0707;">0.5</span>;<br /> background-repeat: repeat;<br />}<br />.hbzwatermark {<br /> position: relative;<br /> overflow: hidden;<br /> z-index: 1;<br />}</code></pre></ul></div> <div id="tab7"><ul class="hheader"><li>For Diagonally Repeating Multi-line Watermark <span>(Bottom-Left to Top-Right)</span></li> <pre><code>.hbzwatermark::before {<br /> display: block;<br /> background: url("<span style="color: #0b5394;">https://3.bp.blogspot.com/-8WVWdAZ23tM/WkNeDHW1GEI/AAAAAAAAIYA/y09Ncr7ZCOQ5B5tPy22-K_j3Ue9b1NLcQCLcBGAs/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png</span>");<br /> position: absolute;<br /> height: 200%;<br /> bottom: -100%;<br /> left: 0%;<br /> width: 5000%;<br /> transform: rotate(-45deg);<br /> -moz-transform: rotate(-45deg);<br /> -webkit-transform: rotate(-45deg);<br /> transform-origin: left center;<br /> -moz-transform-origin: left center;<br /> -webkit-transform-origin: left center;<br /> content: "";<br /> z-index: -1;<br /> background-size: auto <span style="color: #38761d;">30px</span>;<br /> opacity: <span style="color: #ff0707;">0.5</span>;<br /> background-repeat: repeat;<br />}<br />.hbzwatermark {<br /> position: relative;<br /> overflow: hidden;<br /> z-index: 1;<br />}</code></pre> <li>For Diagonally Repeating Multi-line Watermark <span>(Top-Left to Bottom-Right)</span></li> <pre><code>.hbzwatermark::before {<br /> display: block;<br /> background: url("<span style="color: #0b5394;">https://3.bp.blogspot.com/-8WVWdAZ23tM/WkNeDHW1GEI/AAAAAAAAIYA/y09Ncr7ZCOQ5B5tPy22-K_j3Ue9b1NLcQCLcBGAs/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png</span>");<br /> position: absolute;<br /> height: 200%;<br /> top: -100%;<br /> left: 0%;<br /> width: 5000%;<br /> transform: rotate(45deg);<br /> -moz-transform: rotate(45deg);<br /> -webkit-transform: rotate(45deg);<br /> transform-origin: left center;<br /> -moz-transform-origin: left center;<br /> -webkit-transform-origin: left center;<br /> content: "";<br /> z-index: -1;<br /> background-size: auto <span style="color: #38761d;">30px</span>;<br /> opacity: <span style="color: #ff0707;">0.5</span>;<br /> background-repeat: repeat;<br />}<br />.hbzwatermark {<br /> position: relative;<br /> overflow: hidden;<br /> z-index: 1;<br />}</code></pre></ul></div></div> <p><span style="color: #17a98c;"><strong>Step 6.</strong></span> Configuration:</p> </div> <div id="tab4"><ul class="tabs"><li><a href="#tab8"><span class="htitle">Horizontal</span></a></li><li><a href="#tab9"><span class="htitle">Vertical</span></a></li><li><a href="#tab10"><span class="htitle">Diagonal</span></a></li></ul> <div id="tabs-content"><div id="tab8"><ul class="hheader"><li>For Horizontally Non-Repeating Multi-line Watermark <span>(Left to Right)</span></li> <pre><code>.hbzwatermark::before {<br /> display: block;<br /> background: url("<span style="color: #0b5394;">https://3.bp.blogspot.com/-8WVWdAZ23tM/WkNeDHW1GEI/AAAAAAAAIYA/y09Ncr7ZCOQ5B5tPy22-K_j3Ue9b1NLcQCLcBGAs/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png</span>");<br /> position: absolute;<br /> height: 200%;<br /> width: 100%;<br /> transform: rotate(-90deg);<br /> -moz-transform: rotate(-90deg);<br /> -webkit-transform: rotate(-90deg);<br /> transform-origin: center;<br /> -moz-transform-origin: center;<br /> -webkit-transform-origin: center;<br /> content: "";<br /> z-index: -1;<br /> background-size: auto <span style="color: #38761d;">30px</span>;<br /> opacity: <span style="color: #ff0707;">0.5</span>;<br /> background-repeat: repeat-y;<br /> background-position: center;<br /> top: -50%;<br />}<br />.hbzwatermark {<br /> position: relative;<br /> overflow: hidden;<br /> z-index: 1;<br />}</code></pre> <li>For Horizontally Non-Repeating Multi-line Watermark <span>(Right to Left)</span></li> <pre><code>.hbzwatermark::before {<br /> display: block;<br /> background: url("<span style="color: #0b5394;">https://3.bp.blogspot.com/-8WVWdAZ23tM/WkNeDHW1GEI/AAAAAAAAIYA/y09Ncr7ZCOQ5B5tPy22-K_j3Ue9b1NLcQCLcBGAs/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png</span>");<br /> position: absolute;<br /> height: 200%;<br /> width: 100%;<br /> transform: rotate(90deg);<br /> -moz-transform: rotate(90deg);<br /> -webkit-transform: rotate(90deg);<br /> transform-origin: center;<br /> -moz-transform-origin: center;<br /> -webkit-transform-origin: center;<br /> content: "";<br /> z-index: -1;<br /> background-size: auto <span style="color: #38761d;">30px</span>;<br /> opacity: <span style="color: #ff0707;">0.5</span>;<br /> background-repeat: repeat-y;<br /> background-position: center;<br /> top: -50%;<br />}<br />.hbzwatermark {<br /> position: relative;<br /> overflow: hidden;<br /> z-index: 1;<br />}</code></pre> <p><span style="color: #17a98c;"><strong>Step 6.</strong></span> Configuration:</p></ul></div> <div id="tab9"><ul class="hheader"><li>For Vertically Non-Repeating Multi-line Watermark</li> <pre><code>.hbzwatermark::before {<br /> display: block;<br /> background: url("<span style="color: #0b5394;">https://3.bp.blogspot.com/-8WVWdAZ23tM/WkNeDHW1GEI/AAAAAAAAIYA/y09Ncr7ZCOQ5B5tPy22-K_j3Ue9b1NLcQCLcBGAs/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png</span>");<br /> position: absolute;<br /> height: 100%;<br /> width: 100%;<br /> content: "";<br /> z-index: -1;<br /> background-size: auto <span style="color: #38761d;">30px</span>;<br /> opacity: <span style="color: #ff0707;">0.5</span>;<br /> background-repeat: repeat-y;<br /> background-position: center;<br />}<br />.hbzwatermark {<br /> position: relative;<br /> overflow: hidden;<br /> z-index: 1;<br />}</code></pre> <p><span style="color: #17a98c;"><strong>Step 6.</strong></span> Configuration:</p></ul></div> <div id="tab10"><ul class="hheader"> <pre><code>.hbzw {<br /> display: none;<br /> background: url("<span style="color: #0b5394;">https://3.bp.blogspot.com/-8WVWdAZ23tM/WkNeDHW1GEI/AAAAAAAAIYA/y09Ncr7ZCOQ5B5tPy22-K_j3Ue9b1NLcQCLcBGAs/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png</span>") repeat-y;<br /> background-position: center;<br /> position: absolute;<br /> left: 0;<br /> top: -50%;<br /> width: 100%;<br /> height: 200%;<br /> opacity: <span style="color: #ff0707;">0.5</span>;<br /> transform-origin: center;<br /> -moz-transform-origin: center;<br /> -webkit-transform-origin: center;<br /> content: "";<br /> z-index: -1;<br /> background-size: auto <span style="color: #38761d;">30px</span>;<br />}<br /> .hbzwatermark {<br /> position: relative;<br /> overflow: hidden;<br /> z-index: 1;<br />}</code></pre> <p><span style="color: #17a98c;"><strong>Step 6.</strong></span> Place following code just above <code class="cdht"></head></code></p> <pre><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script></code></pre> <p class="pnote"><strong>Note:</strong> If the above is already present then, there is no need to place it again.</p> <p><span style="color: #17a98c;"><strong>Step 7.</strong></span> Place following code just above <code class="cdht"></body></code></p> <li>For Diagonally Non-Repeating Multi-line Watermark <span>(Top-Left to Bottom-Right)</span></li> <pre><code><script><br /> $(document).ready(function() {<br /> $(".hbzwatermark").each(function() {<br /> var h = $(this).height();<br /> var w = $(this).width();<br /> var r = Math.atan(w / h);<br /> var a = r * 180 / Math.PI;<br /> $(this).prepend("<div class='hbzw'></div>");<br /> $(this).children(":first").css({<br /> "transform": "rotate(-" + a + "deg)",<br /> "-moz-transform": "rotate(-" + a + "deg)",<br /> "-webkit-transform": "rotate(-" + a + "deg)",<br /> "display": "block"<br /> });<br /> });<br /> });<br /></script></code></pre> <li>For Diagonally Non-Repeating Multi-line Watermark <span>(Top-Right to Bottom-Left)</span></li> <pre><code><script><br /> $(document).ready(function() {<br /> $(".hbzwatermark").each(function() {<br /> var h = $(this).height();<br /> var w = $(this).width();<br /> var r = Math.atan(w / h);<br /> var a = r * 180 / Math.PI;<br /> $(this).prepend("<div class='hbzw'></div>");<br /> $(this).children(":first").css({<br /> "transform": "rotate(" + a + "deg)",<br /> "-moz-transform": "rotate(" + a + "deg)",<br /> "-webkit-transform": "rotate(" + a + "deg)",<br /> "display": "block"<br /> });<br /> });<br /> });<br /></script></code></pre> <p><span style="color: #17a98c;"><strong>Step 8.</strong></span> Configuration:</p></ul></div></div></div></div></div> <div id="tab2"><ul class="tabs"><li><a href="#tab11"><span class="htitle">Repeating</span></a></li><li><a href="#tab12"><span class="htitle">Non-Repeating</span></a></li></ul> <div id="tabs-content"><div id="tab11"><ul class="tabs"><li><a href="#tab13"><span class="htitle">Horizontal</span></a></li><li><a href="#tab14"><span class="htitle">Vertical</span></a></li><li><a href="#tab15"><span class="htitle">Diagonal</span></a></li></ul> <div id="tabs-content"><div id="tab13"><ul class="hheader"><li>For Horizontally Repeating Single-line Watermark</li> <pre><code>.hbzwatermark::before {<br /> display: block;<br /> background: url("<span style="color: #0b5394;">https://3.bp.blogspot.com/-8WVWdAZ23tM/WkNeDHW1GEI/AAAAAAAAIYA/y09Ncr7ZCOQ5B5tPy22-K_j3Ue9b1NLcQCLcBGAs/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png</span>");<br /> position: absolute;<br /> height: 100%;<br /> width: 100%;<br /> content: "";<br /> z-index: -1;<br /> background-size: auto <span style="color: #38761d;">30px</span>;<br /> opacity: <span style="color: #ff0707;">0.5</span>;<br /> background-repeat: repeat-y;<br /> background-position: center;<br />}<br />.hbzwatermark {<br /> position: relative;<br /> overflow: hidden;<br /> z-index: 1;<br />}</code></pre> <p><span style="color: #17a98c;"><strong>Step 6.</strong></span> Configuration:</p></ul></div> <div id="tab14"><ul class="hheader"> <li>For Vertically Repeating Single-line Watermark <span>(Top to Bottom)</span></li> <pre><code>.hbzwatermark::before {<br /> display: block;<br /> background: url("<span style="color: #0b5394;">https://3.bp.blogspot.com/-8WVWdAZ23tM/WkNeDHW1GEI/AAAAAAAAIYA/y09Ncr7ZCOQ5B5tPy22-K_j3Ue9b1NLcQCLcBGAs/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png</span>");<br /> position: absolute;<br /> height: 100%;<br /> width: 5000%;<br /> transform: rotate(90deg);<br /> -moz-transform: rotate(90deg);<br /> -webkit-transform: rotate(90deg);<br /> transform-origin: center;<br /> -moz-transform-origin: center;<br /> -webkit-transform-origin: center;<br /> content: "";<br /> z-index: -1;<br /> background-size: auto <span style="color: #38761d;">30px</span>;<br /> opacity: <span style="color: #ff0707;">0.5</span>;<br /> background-repeat: repeat-x;<br /> background-position: center;<br /> left: -2450%;<br />}<br /> .hbzwatermark {<br /> position: relative;<br /> overflow: hidden;<br /> z-index: 1;<br />}</code></pre> <li>For Vertically Repeating Single-line Watermark <span>(Bottom to Top)</span></li> <pre><code>.hbzwatermark::before {<br /> display: block;<br /> background: url("<span style="color: #0b5394;">https://3.bp.blogspot.com/-8WVWdAZ23tM/WkNeDHW1GEI/AAAAAAAAIYA/y09Ncr7ZCOQ5B5tPy22-K_j3Ue9b1NLcQCLcBGAs/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png</span>");<br /> position: absolute;<br /> height: 100%;<br /> width: 5000%;<br /> transform: rotate(-90deg);<br /> -moz-transform: rotate(-90deg);<br /> -webkit-transform: rotate(-90deg);<br /> transform-origin: center;<br /> -moz-transform-origin: center;<br /> -webkit-transform-origin: center;<br /> content: "";<br /> z-index: -1;<br /> background-size: auto <span style="color: #38761d;">30px</span>;<br /> opacity: <span style="color: #ff0707;">0.5</span>;<br /> background-repeat: repeat-x;<br /> background-position: center;<br /> left: -2450%;<br />}<br /> .hbzwatermark {<br /> position: relative;<br /> overflow: hidden;<br /> z-index: 1;<br />}</code></pre> <p><span style="color: #17a98c;"><strong>Step 6.</strong></span> Configuration:</p></ul></div> <div id="tab15"><ul class="hheader"> <pre><code>.hbzw {<br /> display: none;<br /> background: url("<span style="color: #0b5394;">https://3.bp.blogspot.com/-8WVWdAZ23tM/WkNeDHW1GEI/AAAAAAAAIYA/y09Ncr7ZCOQ5B5tPy22-K_j3Ue9b1NLcQCLcBGAs/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png</span>") repeat-x;<br /> position: absolute;<br /> left: 0;<br /> width: 5000%;<br /> transform-origin: left center;<br /> -moz-transform-origin: left center;<br /> -webkit-transform-origin: left center;<br /> content: "";<br /> opacity: <span style="color: #ff0707;">0.5</span>;<br /> z-index: -1;<br /> background-size: auto <span style="color: #38761d;">30px</span>;<br />}<br /> .hbzwatermark {<br /> position: relative;<br /> overflow: hidden;<br /> z-index: 1;<br />}</code></pre> <p><span style="color: #17a98c;"><strong>Step 6.</strong></span> Place following code just above <code class="cdht"></head></code></p> <pre><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script></code></pre> <p class="pnote"><strong>Note:</strong> If the above is already present then, there is no need to place it again.</p> <p><span style="color: #17a98c;"><strong>Step 7.</strong></span> Place following code just above <code class="cdht"></body></code></p> <li>For Diagonally Repeating Single-line Watermark <span>(Top-Left to Bottom-Right)</span></li> <pre><code><script><br /> $(document).ready(function() {<br /> $(".hbzwatermark").each(function() {<br /> var h = $(this).height();<br /> var w = $(this).width();<br /> var r = Math.atan(h / w);<br /> var a = r * 180 / Math.PI;<br /> $(this).prepend("<div class='hbzw'></div>");<br /> var n = $(".hbzwatermark .hbzw").css("background-size");<br /> var s = n.split(' ')[1];<br /> var q = s.replace("px", "");<br /> $(this).children(":first").css({<br /> "transform": "rotate(" + a + "deg)",<br /> "-moz-transform": "rotate(" + a + "deg)",<br /> "-webkit-transform": "rotate(" + a + "deg)",<br /> "display": "block",<br /> "height": s,<br /> "top": -(q / 2) + "px"<br /> });<br /> });<br /> });<br /></script></code></pre> <li>For Diagonally Repeating Single-line Watermark <span>(Bottom-Left to Top-Right)</span></li> <pre><code><script><br /> $(document).ready(function() {<br /> $(".hbzwatermark").each(function() {<br /> var h = $(this).height();<br /> var w = $(this).width();<br /> var r = Math.atan(h / w);<br /> var a = r * 180 / Math.PI;<br /> $(this).prepend("<div class='hbzw'></div>");<br /> var n = $(".hbzwatermark .hbzw").css("background-size");<br /> var s = n.split(' ')[1];<br /> var q = s.replace("px", "");<br /> $(this).children(":first").css({<br /> "transform": "rotate(-" + a + "deg)",<br /> "-moz-transform": "rotate(-" + a + "deg)",<br /> "-webkit-transform": "rotate(-" + a + "deg)",<br /> "display": "block",<br /> "height": s,<br /> "bottom": -(q / 2) + "px"<br /> });<br /> });<br /> });<br /></script></code></pre> <p><span style="color: #17a98c;"><strong>Step 8.</strong></span> Configuration:</p></ul></div></div></div> <div id="tab12"><ul class="tabs"><li><a href="#tab16"><span class="htitle">Horizontal</span></a></li><li><a href="#tab17"><span class="htitle">Vertical</span></a></li><li><a href="#tab18"><span class="htitle">Diagonal</span></a></li></ul> <div id="tabs-content"><div id="tab16"><ul class="hheader"><li>For Horizontal Single-Word Watermark</li> <pre><code>.hbzwatermark::before {<br /> display: block;<br /> background: url("<span style="color: #0b5394;">https://3.bp.blogspot.com/-8WVWdAZ23tM/WkNeDHW1GEI/AAAAAAAAIYA/y09Ncr7ZCOQ5B5tPy22-K_j3Ue9b1NLcQCLcBGAs/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png</span>");<br /> position: absolute;<br /> height: 100%;<br /> width: 100%;<br /> content: "";<br /> z-index: -1;<br /> background-size: auto <span style="color: #38761d;">30px</span>;<br /> opacity: <span style="color: #ff0707;">0.5</span>;<br /> background-repeat: no-repeat;<br /> background-position: center;<br />}<br /> .hbzwatermark {<br /> position: relative;<br /> overflow: hidden;<br /> z-index: 1;<br />}</code></pre> <p><span style="color: #17a98c;"><strong>Step 6.</strong></span> Configuration:</p></ul></div> <div id="tab17"><ul class="hheader"> <li>For Vertical Single-Word Watermark <span>(Bottom to Top)</span></li> <pre><code>.hbzwatermark::before {<br /> display: block;<br /> background: url("<span style="color: #0b5394;">https://3.bp.blogspot.com/-8WVWdAZ23tM/WkNeDHW1GEI/AAAAAAAAIYA/y09Ncr7ZCOQ5B5tPy22-K_j3Ue9b1NLcQCLcBGAs/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png</span>");<br /> position: absolute;<br /> height: 100%;<br /> width: 100%;<br /> transform: rotate(-90deg);<br /> -moz-transform: rotate(-90deg);<br /> -webkit-transform: rotate(-90deg);<br /> transform-origin: center;<br /> -moz-transform-origin: center;<br /> -webkit-transform-origin: center;<br /> content: "";<br /> z-index: -1;<br /> background-size: auto <span style="color: #38761d;">30px</span>;<br /> opacity: <span style="color: #ff0707;">0.5</span>;<br /> background-repeat: no-repeat;<br /> background-position: center;<br />}<br /> .hbzwatermark {<br /> position: relative;<br /> overflow: hidden;<br /> z-index: 1;<br />}</code></pre> <li>For Vertical Single-Word Watermark <span>(Top to Bottom)</span></li> <pre><code>.hbzwatermark::before {<br /> display: block;<br /> background: url("<span style="color: #0b5394;">https://3.bp.blogspot.com/-8WVWdAZ23tM/WkNeDHW1GEI/AAAAAAAAIYA/y09Ncr7ZCOQ5B5tPy22-K_j3Ue9b1NLcQCLcBGAs/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png</span>");<br /> position: absolute;<br /> height: 100%;<br /> width: 100%;<br /> transform: rotate(90deg);<br /> -moz-transform: rotate(90deg);<br /> -webkit-transform: rotate(90deg);<br /> transform-origin: center;<br /> -moz-transform-origin: center;<br /> -webkit-transform-origin: center;<br /> content: "";<br /> z-index: -1;<br /> background-size: auto <span style="color: #38761d;">30px</span>;<br /> opacity: <span style="color: #ff0707;">0.5</span>;<br /> background-repeat: no-repeat;<br /> background-position: center;<br />}<br /> .hbzwatermark {<br /> position: relative;<br /> overflow: hidden;<br /> z-index: 1;<br />}</code></pre> <p><span style="color: #17a98c;"><strong>Step 6.</strong></span> Configuration:</p></ul></div> <div id="tab18"><ul class="hheader"> <pre><code>.hbzw {<br /> display: none;<br /> background: url("<span style="color: #0b5394;">https://3.bp.blogspot.com/-8WVWdAZ23tM/WkNeDHW1GEI/AAAAAAAAIYA/y09Ncr7ZCOQ5B5tPy22-K_j3Ue9b1NLcQCLcBGAs/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png</span>") no-repeat;<br /> background-position: center;<br /> position: absolute;<br /> left: 0;<br /> width: 100%;<br /> bottom: 50%;<br /> transform-origin: center;<br /> -moz-transform-origin: center;<br /> -webkit-transform-origin: center;<br /> content: "";<br /> opacity: <span style="color: #ff0707;">0.5</span>;<br /> z-index: -1;<br /> background-size: auto <span style="color: #38761d;">30px</span>;<br />}<br /> .hbzwatermark {<br /> position: relative;<br /> overflow: hidden;<br /> z-index: 1;<br />}</code></pre> <p><span style="color: #17a98c;"><strong>Step 6.</strong></span> Place following code just above <code class="cdht"></head></code></p> <pre><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script></code></pre> <p class="pnote"><strong>Note:</strong> If the above is already present then, there is no need to place it again.</p> <p><span style="color: #17a98c;"><strong>Step 7.</strong></span> Place following code just above <code class="cdht"></body></code></p> <li>For Diagonal Single-Word Watermark <span>(Top-Left to Bottom-Right)</span></li> <pre><code><script><br /> $(document).ready(function() {<br /> $(".hbzwatermark").each(function() {<br /> var h = $(this).height();<br /> var w = $(this).width();<br /> var r = Math.atan(h / w);<br /> var a = r * 180 / Math.PI;<br /> $(this).prepend("<div class='hbzw'></div>");<br /> var n = $(".hbzwatermark .hbzw").css("background-size");<br /> var s = n.split(' ')[1];<br /> var q = s.replace("px", "");<br /> $(this).children(":first").css({<br /> "transform": "rotate(" + a + "deg)",<br /> "-moz-transform": "rotate(" + a + "deg)",<br /> "-webkit-transform": "rotate(" + a + "deg)",<br /> "display": "block",<br /> "height": s,<br /> "margin-bottom": -(q / 2) + "px"<br /> });<br /> });<br /> });<br /></script></code></pre> <li>For Diagonal Single-Word Watermark <span>(Bottom-Left to Top-Right)</span></li> <pre><code><script><br /> $(document).ready(function() {<br /> $(".hbzwatermark").each(function() {<br /> var h = $(this).height();<br /> var w = $(this).width();<br /> var r = Math.atan(h / w);<br /> var a = r * 180 / Math.PI;<br /> $(this).prepend("<div class='hbzw'></div>");<br /> var n = $(".hbzwatermark .hbzw").css("background-size");<br /> var s = n.split(' ')[1];<br /> var q = s.replace("px", "");<br /> $(this).children(":first").css({<br /> "transform": "rotate(-" + a + "deg)",<br /> "-moz-transform": "rotate(-" + a + "deg)",<br /> "-webkit-transform": "rotate(-" + a + "deg)",<br /> "display": "block",<br /> "height": s,<br /> "margin-bottom": -(q / 2) + "px"<br /> });<br /> });<br /> });<br /></script></code></pre> <p><span style="color: #17a98c;"><strong>Step 8.</strong></span> Configuration:</p></ul></div></div></div></div></div></div> <ul><li>Replace <span style="color: #0b5394;"><code><strong>https://3.bp.blogspot.com/-8WVWdAZ23tM/WkNeDHW1GEI/AAAAAAAAIYA/y09Ncr7ZCOQ5B5tPy22-K_j3Ue9b1NLcQCLcBGAs/s1600/picturetopeople.org-0ce39e09dcc77f7dafa3324347f32fe795720fed0e21a3d765.png</strong></code></span> with your watermark text image URL.</li><li>Adjust the value <span style="color: #38761d;"><code><strong>30px</strong></code></span> to adjust the size of the watermark text.</li><li>Adjust the value <span style="color: #ff0707;"><code><strong>0.5</strong></code></span> in between <strong>0.1 - 1.0</strong> to adjust the transparency of watermark. </li></ul> <p><strong>To Create Watermark Text Image <a href="http://www.picturetopeople.org/text_generator/others/transparent/transparent-text-generator.html#idMyForm" rel="nofollow" target="_blank"><u>Click here</u></a>.</strong></p> <ul class="decimalli"><li>Type your '<strong>Text</strong>'.</li><li>Set '<strong>Font size</strong>' to 50 from dropdown box.</li><li>Set '<strong>Margin</strong>' to 6.</li><li>Select yours watermark 'Text color' such that <strong>your post text is visible</strong> over it.</li><li>Choose your <strong>Font</strong>.</li><li><strong>Click Generate</strong> and save the image.</li></ul> <p><strong>Read:</strong> <a href="http://howbloggerz.com/2016/03/get-find-url-upload-image-blogger.html"><u>How To Generate The URL Of An Image (Saved in Computer)</u></a>.</p> <p><span style="color: #17a98c;"><strong>Step 7.</strong></span> Save Theme.</p> <p class="ht">That's it</p> <p>Now check out your blog posts, you will find your <strong>watermark placed behind every blog post</strong>. For any issues related to above tutorial comment below. Stay Updated, Browse Howbloggerz! :)</p>Unknownnoreply@blogger.com21tag:blogger.com,1999:blog-5141858361892798601.post-23504637235947970212016-03-21T00:48:00.003+05:302016-06-16T12:15:11.755+05:30How To Get The URL Of An Image In BloggerAs each day there are lots of new users joining the world of blogging, It is very important to know about the basic tricks in blogger and finding the URL, address or link of the image you upload on your blog post is one of them. If you want to know how to find the URL of an image, photo or picture follow the given instructions : <br /><a name='more'></a><br /><br /><div class="mainimg"><div class="separator" style="clear: both; text-align: center;"><img alt="How to find get url on an image in blogger" border="0" src="https://3.bp.blogspot.com/-YhdbLxR4abw/Vu70SuNrjdI/AAAAAAAAAe0/wy6Ay5CrxsUYCns0nSMpMPBotWHPUy0cA/s1600/how-to-get-the-url-of-an-image-blogger.jpg" title="" /></div></div><br /><h2> Steps : Finding The URL Of An Image</h2><br /><span style="color: #17a98c;"><b>Step 1.</b></span> Log in to your Blogger account, then click on New Post. <br /><br /><span style="color: #17a98c;"><b>Step 2.</b></span> Click on HTML ( Right to compose ) and clear the codes from input area.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-DwNRqGLajss/Vu7nERQQSbI/AAAAAAAAAeE/96hH_HszIjIzRnEbfYmCOJzkcv_Qaa5Rg/s1600/New-post-HTML-mode-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="html mode in blogger post editor" border="0" height="281" src="https://1.bp.blogspot.com/-DwNRqGLajss/Vu7nERQQSbI/AAAAAAAAAeE/96hH_HszIjIzRnEbfYmCOJzkcv_Qaa5Rg/s640/New-post-HTML-mode-blogger.png" title="" width="640" /></a></div><br /><br /><br /><span style="color: #17a98c;"><b>Step 3.</b></span> Click on Image upload icon, in pop-up window select the image you want to upload and click add selected. <br /><br /><span style="color: #17a98c;"><b>Step 4.</b></span> Again a pop-up box appear, Select <b>None</b> under 'Image alignment' and <b>Original size</b> under 'Image size', then click 'OK'. <br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-XyIw3n1I_SY/Vu7puq1tMhI/AAAAAAAAAeQ/quwNmsxBQYwwlm7boPnjXB1GERjN-SOXg/s1600/Uploading-image-HTML-mode-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="image layout in blogger post editor in HTML mode" border="0" src="https://3.bp.blogspot.com/-XyIw3n1I_SY/Vu7puq1tMhI/AAAAAAAAAeQ/quwNmsxBQYwwlm7boPnjXB1GERjN-SOXg/s1600/Uploading-image-HTML-mode-blogger.png" title="" /></a></div><br /><br /><br /><span style="color: #17a98c;"><b>Step 5.</b></span> Now some codes will appear in your input field area like this : <br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-7nVg5n9R0To/Vu7sOnsIfRI/AAAAAAAAAek/UwAbs_73704QudKj9gyVIXJa-p81ghRyA/s1600/Image-code-in-HTML-mode-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Image code in HTML mode" border="0" src="https://3.bp.blogspot.com/-7nVg5n9R0To/Vu7sOnsIfRI/AAAAAAAAAek/UwAbs_73704QudKj9gyVIXJa-p81ghRyA/s1600/Image-code-in-HTML-mode-blogger.png" title="" /></a></div><br /><br /><b>This code contains two same URLs of an image ( copy any one ) :</b><br /><br /><blockquote class="tr_bq"><a href="<span style="color: #3d85c6;">http://3.bp.blogspot.com/-AoAXfReWA7I/Ub9ZxFqCyzI/AAAAAAAACYU/68Qi0lLxSEE/s1600/3.jpg</span>" imageanchor="1"><img border="0" src="https://3.bp.blogspot.com/-AoAXfReWA7I/Ub9ZxFqCyzI/AAAAAAAACYU/68Qi0lLxSEE/s1600/3.jpg" /></a></blockquote><br /><br />All the images uploaded on blogger are saved anyway on PicasaWeb (unless when you removed the draft, you have also selected the option to remove the image). Therefore another way to get the URL of the already published images from your blog or directly from <a href="https://picasaweb.google.com/home" rel="nofollow" target="_blank">PicasaWeb</a> is by using browser option :<br /><br />To get the URL of the image from Picasa, click on the image to open in <b>full size</b> > <b>right click</b> on the picture and select the following option depending on the browser you are using...<br /><br /><br /><br />- On <b>Google Chrome</b> > select <b>Copy Image Address</b>.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-LhTDdZ8lghI/VyhZbHh1kpI/AAAAAAAAAnY/QVMBq-Jx5sQqkpl0l8-gjfucAEO4pQGcACLcB/s1600/Copy-image-address-google-chrome.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="how to copy image url in google chrome" border="0" src="https://4.bp.blogspot.com/-LhTDdZ8lghI/VyhZbHh1kpI/AAAAAAAAAnY/QVMBq-Jx5sQqkpl0l8-gjfucAEO4pQGcACLcB/s1600/Copy-image-address-google-chrome.png" title="" /></a></div><br /><br /><br />- If you are using <b>Mozilla Firefox</b> > select <b>Copy Image Location</b>.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://3.bp.blogspot.com/-OlR_G3utfCU/VyhaZE0K1PI/AAAAAAAAAng/3RRJi28cEh8bt_0Kzoqlr9dZ2ARiJ373ACLcB/s1600/Copy-image-location-mozilla-firefox.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="how to copy image url in mozilla firefox" border="0" src="https://3.bp.blogspot.com/-OlR_G3utfCU/VyhaZE0K1PI/AAAAAAAAAng/3RRJi28cEh8bt_0Kzoqlr9dZ2ARiJ373ACLcB/s1600/Copy-image-location-mozilla-firefox.png" title="" /></a></div><br /><br />- If you are using <b>Opera</b> > select <b>Copy Image URL</b>.<br /><br />- If you are using <b>Safari</b> > select <b>Copy Image Address</b>.<br /><br />- If you are using <b>Internet Explorer</b> > first select<b> Properties</b>, a window will open and there you will find the Address section from where you can select the URL of the image. Copy it.<br /><br /><br /><h4>Great !</h4>Once you have selected any of these options, you'll have the URL of the image copied to the clipboard. Use Ctrl+V or paste option to paste URL. For any issues related to above instructions comment below. Stay Updated, Browse Howbloggerz ! :)Unknownnoreply@blogger.com13tag:blogger.com,1999:blog-5141858361892798601.post-40157800325824212612016-03-16T23:14:00.000+05:302018-03-11T23:05:13.171+05:30How To Remove Border And Shadow Around Images On BloggerBy default blogger shows border and shadow around images or photos of your blog post if you find this annoying and want to remove or delete it just follow the given tutorial with images : <br /><a name='more'></a><br /><br /><br /><div class="mainimg"><div class="separator" style="clear: both; text-align: center;"><img alt="how to remove border and shadow from blogger images main" border="0" src="https://4.bp.blogspot.com/-Z7T8ulAv_EE/VumY6Tsa2WI/AAAAAAAAAZk/WYYCoNjNl4on3ENVc0XIFXBzsQEnfEIBg/s1600/how-to-remove-border-and-shadow-from-blogger-images-main.png" title="" /></div></div><div class="separator" style="clear: both; text-align: center;"><a href="https://4.bp.blogspot.com/-DbndQrh78PM/VumPe1dmSQI/AAAAAAAAAZU/qzsn-E19g1Y-I_nAr86oGRqU23H3Yr01A/s1600/how-to-remove-border-and-shadow-from-blogger-images.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="how to remove border and shadow from blogger images" border="0" height="250" src="https://4.bp.blogspot.com/-DbndQrh78PM/VumPe1dmSQI/AAAAAAAAAZU/qzsn-E19g1Y-I_nAr86oGRqU23H3Yr01A/s640/how-to-remove-border-and-shadow-from-blogger-images.png" title="" width="640" /></a></div><br /><h2>Steps : To remove border from blogger images</h2><br /><span style="color: #17a98c;"><b>Step 1.</b></span> Log in to your Blogger account, then go to Template > Edit HTML.<br /><br /><br /><div class="separator" style="clear: both; text-align: center;"><a href="https://2.bp.blogspot.com/-rHEqb_6BZ3Y/VsndjhBdWzI/AAAAAAAAAO0/cDynSo2Pfg8gHWQBxD2pU_UjLX5KwoV7Q/s1600/Edit-template-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="edit blogger template" border="0" src="https://2.bp.blogspot.com/-rHEqb_6BZ3Y/VsndjhBdWzI/AAAAAAAAAO0/cDynSo2Pfg8gHWQBxD2pU_UjLX5KwoV7Q/s1600/Edit-template-blogger.png" /></a></div><br /><br /><span style="color: #17a98c;"><b>Step 2.</b></span> Click anywhere inside the code and search for following code ( CTRL+F ) : <br /><br /><blockquote class="tr_bq">]]></b:skin></blockquote><br /><span style="color: #17a98c;"><b>Step 3.</b></span> Copy and paste the following code just above it : <br /><br /><blockquote class="tr_bq">.post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img {<br /> padding: 0px !important;<br /> background: none !important;<br /> border: none !important;<br /> -moz-box-shadow: 0px 0px 0px transparent !important;<br /> -webkit-box-shadow: 0px 0px 0px transparent !important;<br /> box-shadow: 0px 0px 0px transparent !important;<br />}</blockquote><br /><strong>Note:</strong> To remove border from mobile view goto Theme > Click on gear icon under mobile > Under 'Choose mobile theme' Select "Custom" and click Save. <br /><br /><span style="color: #17a98c;"><b>Step 4.</b></span> Save the Template. <br /><br /><span style="font-size: large;"><b>That's it !</b></span><br /><br />Now visitors of your blog will not see any border and shadow around your blog images. For any issues related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)Unknownnoreply@blogger.com43