tag:blogger.com,1999:blog-90213029908566221422024-03-05T23:40:53.452-08:00ikaszokoUnknownnoreply@blogger.comBlogger5125tag:blogger.com,1999:blog-9021302990856622142.post-3952179257099560612021-02-25T01:03:00.000-08:002021-02-25T01:03:18.684-08:00How to add dark mode on blogger blog<div class="separator" style="clear: both; text-align: center;"><a style="margin-left: 1em; margin-right: 1em;"><img alt="How to add dark mode on blogger blog" border="0" data-original-height="720" data-original-width="1280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAPKhUnAUWxwqWyq5HKV6WcS16bzbgKkq200CQd4ZuyucDiZjJZGPJ41YBsybwyXtZmVM4vZoz7rfv_5v3atccW0glny0ATihaTWoiHNBNd3uu_9u649ET3EtF-jRzxEseAlTULzE7teo/s16000/how+to+add+dark+mode+on+blogger+blog.png" title="How to add dark mode on blogger blog" /></a></div>Hey guys, what up in this article, we will talk about the dark mode. <b>How to add dark mode on blogger</b>? On the blogger, does not support any plugin so can't add dark mode so there is only one way to add and it uses custom coding and design the dark mode but in this article, I will tell you how you can design the <b>dark mode on your blog</b> and also how you can add. If you <b>want to add a dark mode</b> to your blog theme then you need to follow 3 steps:<div><ul style="text-align: left;"><li>Design a dark mode toggle button (you can use a template)</li><li>Design the dark mode with css</li><li>Add toggle for dark mode and use local storage to save dark mode data</li></ul></div><div class="separator" style="clear: both; text-align: center;"><a style="margin-left: 1em; margin-right: 1em;"><img alt="How to add dark mode on blogger blog" border="0" data-original-height="667" data-original-width="1366" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdQGWIycOekujQV4eUu4i2sUCPCufywWcf00z3wqr37v_6B7qp8TuMG86S-oZbu0_MPyTf4ji3ly3edUIG6R6KpLv8itoZ2JHad5dSV2ZnV0_I-7W_YTbwdMtR3JC10rahDoNCD_T8CWk/s16000/how+to+add+dark+mode+on+blogger+blog%252C+button+style+1.png" title="How to add dark mode on blogger blog" /></a></div><h2 style="text-align: left;">How to add dark mode</h2><div>Hey, guys now I am telling you how you can add dark mode on your blog. Before you start creating dark mode design you need to select a template then you can start design.</div><div><br /></div><div>Select any template you want:</div><div class="separator" style="clear: both; text-align: center;"><a style="margin-left: 1em; margin-right: 1em;"><img alt="How to add dark mode on blogger blog" border="0" data-original-height="667" data-original-width="1366" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEij-HD54yv2Fgn83_ee-n8Qplyd6vPFGXYi-BulCCCWqRTgsoz1-xccmXfdwd5PtsX65lbmL4jf7SJTZKCtcavy3dKhpmBJr14ybvP7d54mC5ybAkQpGS8uLFM7ew_2dEtdm1_bR2DO6ac/s16000/How+to+add+dark+mode+on+blogger+blog%252C+with+darkmode.png" title="How to add dark mode on blogger blog" /></a></div><pre title="Html"><code><div class='dark-btn'><br /> <i aria-hidden='true' class='fa fa-moon-o'></i><br /> </div></code></pre><br /><pre title="CSS"><code>/* Dark Mode Button */<br />.dark-btn{<br /> position: fixed;<br /> opacity: 0;<br /> visibility: hidden;<br /> overflow: hidden;<br /> text-align: center;<br /> z-index: 99;<br /> border: 1px solid #5b95f5;<br /> width: 47px;<br /> height: 44px;<br /> line-height: 40px;<br /> right: 25px;<br /> bottom: -25px;<br /> padding-top: 2px;<br /> transition: all 0.5s ease-in-out;<br /> transition-delay: 0.2s;<br /> box-shadow: 4px 4px 15px rgba(0,0,0,0.1);<br /> border-radius: 100px;<br /> visibility: visible;<br /> cursor: pointer;<br /> opacity: 1;<br /> bottom: 25px;<br /> }<br /> .fa-moon-o:before{<br /> font-size: 39px;<br /> color: #00bfff;<br /> <br /> }</code></pre><br /><div class="separator" style="clear: both;"><img alt="How to add dark mode on blogger blog" border="0" data-original-height="667" data-original-width="1366" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmu4Ajuy7qSOZKVasNNm0UsAEKnK4pgBd1sYv9oBsgT81URmQEFjxuYg83hUihD75ONZHByLV22DOhbaNDOZN9HKYrRkL5WLDUFMXQXtIBccTRokXz46Z2tQ1tYe_wcMyXPPkiRmSGj8g/s16000/how+to+add+dark+mode+on+blogger+blog%252C+button+style+2.png" title="How to add dark mode on blogger blog" /></div><br /><pre title="Html"><code> <div class='dark-btn'><input class='check' id='dark-btn' title='Night Dark' type='checkbox'><br /> <i aria-hidden='true' style="color: blue;" class='fa fa-moon-o'></i><br /> </div></code></pre><br /><pre title="CSS"><code>/* Dark Mode Button */<br />.dark-btn{position:fixed;float:left;z-index:99;bottom:20px;left:20px;font-size:15px;padding:15px;border-radius:50%;background:#00A3FE;text-align:center}<br />.check {display: none}<br />.dark-btn .iconmode .openmode{display:block}<br />.dark-btn .iconmode .closemode{display:none}<br />.dark-btn .check:checked ~ .iconmode .openmode{display:none}<br />.dark-btn .check:checked ~ .iconmode .closemode{display:block}<br />}</code></pre>Now if you see the icon moon icon is not showing then you can install the font awesome CDN: <pre title="Cdn"><code><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous" /></code></pre><blockquote><strong>Note:</strong> Add the HTML code after the <mark></body></mark> tag then add the css after <mark>]]></b:skin></mark> tag (if you use the cdn then add the code code after <mark></head></mark> tag.)</blockquote><pre title="JavaScript"><code><script>const body = document.querySelector("body");<br /> const darkModeBtn = document.querySelector(".dark-btn");<br /> <br /> if (localStorage.getItem("darkModeStatus")) {<br /> body.classList.add("dark");<br /> darkModeBtn.style.background = "#000";<br /> }<br /> <br /> darkModeBtn.addEventListener('click', function(){<br /> if (localStorage.getItem("darkModeStatus")) {<br /> body.classList.remove('dark');<br /> darkModeBtn.style.background = "#fff";<br /> darkModeBtn.style.color = "#fff";<br /> localStorage.removeItem("darkModeStatus");<br /> } else {<br /> body.classList.add('dark');<br /> darkModeBtn.style.background = "#000";<br /> localStorage.setItem("darkModeStatus", "true");<br /> }<br /> });</script></code></pre><blockquote><strong>Now:</strong> Add the javascript code after the <mark></body></mark> tag.</blockquote><h2 style="text-align: left;">How to design dark mode</h2>For designing dark mode you can work with this small css first: <pre title="Css"><code> body.dark {<br /> background: #000000;<br /> }</code></pre><blockquote>To add the dark mode for full theme you need to found all class division and adding the dark mode color one by one for founding the class division just inspact the element you will the devision. After you found the division see the below CSS code: <pre title="Css"><code>body.dark <mark>devision</mark>{<br /> now styling here<br /> }</code></pre><br /> Now add the division on <mark>division</mark> text of the css and add you style code on the <mark>now styling here</mark> for example: <pre><code><br /> background: #000;<br /> color: #fff;</code></pre></blockquote><div class="separator" style="clear: both;"><a style="display: block; padding: 1em 0px; text-align: center;"><img alt="How to add dark mode on blogger blog" border="0" data-original-height="368" data-original-width="424" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAgDdiHsuiXZasc6FPK4QZHdDJIzoyvmZjypV8dvfBQu5O8i5yYMMGCikwnWYzOTdF0v127nn6O8dlRXMSb1c-IL0Y5W_uYdsfaT_2o2jf7y_Q81SwPOil5db7C3g6MdEBnuRyzh1Bo1I/s16000/Capture1.PNG" title="How to add dark mode on blogger blog" /></a></div><h2 style="text-align: left;">Video</h2><div>Now if you don't understand anything you can watch the below video to get a better idea about <b>how to add dark mode on blogger blog</b>:</div><div><br /></div><iframe width="560" height="315" src="https://www.youtube.com/embed/fUUPccfSGg8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><h2 style="text-align: left;">Base data of this project</h2><div>Before writing this article I am so many demo data for <b>creating dark mode on blogger</b>. You can browse and download all base data for the below link:</div><br /><a class="btn" href="https://codepen.io/sayem-miaji/full/zYBoPEz" rel="dofollow" target="_blank">Demo Dark Mode 1</a><br /><br /><a class="btn" href="https://github.com/SayemTutorial/dark-mode/tree/main/dark%20mode%20type%201" rel="dofollow" target="_blank">Download Dark Mode 1</a><br /><br /><a class="btn" href="https://codepen.io/sayem-miaji/full/OJXbExQ" rel="dofollow" target="_blank">Demo Dark Mode 2</a><br /><br /><a class="btn" href="https://github.com/SayemTutorial/dark-mode/tree/main/dark%20mode%20type%202" rel="dofollow" target="_blank">Download Dark Mode 2</a><br /><br /><a class="btn" href="https://pureapk-danutheme.blogspot.com/" rel="dofollow" target="_blank">See Result On Blogger Theme</a> <h2 style="text-align: left;">Conclosing</h2><div>This a quick guide article about how you can install dark mode on a blogger blog by using HTML,css and also with js (for the one-click event and local storage). Thanks for with us.</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-9021302990856622142.post-2894637503235643122021-02-24T11:26:00.001-08:002021-02-24T11:26:10.537-08:00How to Enable Dark Mode on Google Chrome<div class="separator"><div class="separator" style="margin-left: 1em; margin-right: 1em;"><img alt="" border="0" data-original-height="300" data-original-width="1144" height="732" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbX6aHIKHm5dzY3b_WXU3peKbrRxiL4I2XKHBpubTnbvLhc5qGjbUtfhVeYpBK5HOfv6Sbh4IlD8y-KQOVU6ZZqrQeLrRxuZEtlWugpcUhIxNGwYbrsMWLHtMAbVowLY8bJNnxyHStgfs/w696-h366/How+to+Enable+Dark+Mode+on+Google+Chrome.png" width="1392" /></div></div>Recently, Google has been experimenting with the Dark Mode feature on Google Chrome Desktop and Mobile, but there is no button or checkbox to change or activate the feature. To activate Dark Mode, you can do different methods on different devices.<div><br /></div><div><div>There are several reasons to activate Dark Mode in Chrome. On Mobile devices, this feature may consume high battery power. In 2018, Google confirmed that apps with a Dark appearance look more attractive than light ones.</div><div><br /></div><div>Using Dark Mode can reduce the use of Blue Light which can interfere with your rest time. If it is disturbed, then you will feel that it is difficult to sleep.</div><div><br /></div><div><h2 style="text-align: left;">Enable Dark Mode in Google Chrome in Windows 10</h2><div><ol style="text-align: left;"><li>Go to the Settings menu, select ' Personalization ', click ' Colors ', select ' Choose your Default app mode '.</li><li>Change it to ' Dark ' and all applications that have the Dark Mode feature, including Chrome, will change their color without restarting the browser you are using.</li></ol></div><div><br /></div><h2 style="text-align: left;">Enable Dark Mode in Google Chrome on macOS</h2><div><ol style="text-align: left;"><li>Open ' System Preferences ', click ' General ', select ' Appearance '.</li><li>Select ' Dark '. Then all applications that have the Dark Mode feature, including Chrome, will change their color.</li></ol></div><div><br /></div><h2 style="text-align: left;">Enable Dark Mode in Google Chrome on Android</h2><div><ol style="text-align: left;"><li>Until now, the Dark Mode feature is still being experimented on. To activate it, enter the text chrome: // flags in the Address Bar Browser.</li><li>Select the ' Search Flags ' box and type dark. You will see two options: ' Android web contents dark mode ' and ' Android Chrome UI dark mode '. If you enable the first option, Chrome will detect if the developer of a website has a dark version and will select that version automatically. If you don't have a dark version, the browser will change the color of the website. If you activate the second option, the browser display will turn dark.</li><li>Select Menu on the Drop-Down for each of these options and change the setting to ' Activated ', then restart your browser.</li><li>Now, go to the Settings menu, select ' Themes ' and select ' Dark '. If you haven't found it yet, then restart Chrome again until the feature actually appears.</li></ol></div></div><br /></div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-9021302990856622142.post-8067433171962096682021-02-24T11:25:00.000-08:002021-02-24T11:25:53.626-08:00How to Make a Blogger Template: Sections and Widgets<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_bjKYyYlIjTafr652mEgAAf_2w_pN8KvRtBnLpL3B8S8qGLEu7Rd4fJOkO6Y2tm4PExO5AyS-O9WtngG4CyVhhjn0uG1D-xSRONV1cQR7tfnjpTYeWpFiH2MVpfiqg28pFvj5hRwqXns/s0/blogger.jpg" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" data-original-height="508" data-original-width="900" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_bjKYyYlIjTafr652mEgAAf_2w_pN8KvRtBnLpL3B8S8qGLEu7Rd4fJOkO6Y2tm4PExO5AyS-O9WtngG4CyVhhjn0uG1D-xSRONV1cQR7tfnjpTYeWpFiH2MVpfiqg28pFvj5hRwqXns/s0/blogger.jpg"/></a></div><p> Designing a Blogger Template is not as difficult as you think (if you already understand a little about HTML and CSS). I have summarized how to make a Blogger Template and here I will show you a way that is easy to understand. Before continuing, the first thing you should know is how Blogger works.</p><p>To design a template requires skills in Web Development. You have to be good at or understand Web Design but you don't have to be (very) very good at it. At least, you understand basic HTML, CSS, JavaScript, and XML. To learn about these technologies, I recommend that you study them at <a href="http://W3Schools.com" rel="nofollow" target="_blank">W3Schools.com</a>.</p><h2 style="text-align: left;">How Does Blogger Work?</h2><p>When we upload or install a new template on Blogger. The template will be entered into the Blogger Database. When someone visits your blog, the browser will send a request and the blogger will give the output to the browser.</p><h2 style="text-align: left;">Basic Layout</h2><div><br /></div><pre><code><?xml version="1.0" encoding="UTF-8" ?><br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br /><html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'><br /><head><br /><title><data:blog.pageTitle/></title><br /></head><br /><body><br /> <!-- CONTENT HERE --><br /></body><br /></html></code></pre>The Blogger templates all contain XML code and a few elements. We can see the code above that the code structure of Blogger consists of xmlns (XML Namespace). Namespaces such as <mark>xmlns:b</mark> , <mark>xmlns:data</mark>, <mark>xmlns:expr</mark> are used to provide us with data from the Blogger database.<div><br /></div><div><div>The following is an explanation of the XML Namespace on Blogger:</div><div><ol style="text-align: left;"><li><mark>xmlns:b</mark> - To access elements on Blogger.</li><li><mark>xmlns:data</mark> - This is where the data comes from.</li><li><mark>xmlns:expr</mark> - Used to compute Expressions for attributes (We'll learn about that later)</li></ol></div></div><blockquote><strong>Note</strong> : You can change the Namespace from <mark>xmlns:b</mark> to <mark>xmlns:blog</mark> or <mark>xmlns:data</mark> to <mark>xmlns:d</mark> . But it's better to just use the default version.</blockquote><h2 style="text-align: left;">Before Continuing</h2><p>Before we go to the next stage, here I have a little explanation about the Layout and how it looks like. To design a Layout, you can take a picture or make a sketch.</p><p>Here are some keys to creating a Layout:</p><p></p><ol style="text-align: left;"><li>Determine where the Menu is located and how the Menu will look.</li><li>Determine how and where the post will appear, whether it consists of 2 columns or 3 columns.</li><li>Determine where the Widget can appear. </li></ol><p></p><h2 style="text-align: left;">Section</h2><p>The layout on Blogger Templates is created using Sections. The section is one of the locations of elements such as Header, Footer, Sidebar, etc.</p><h2 style="text-align: left;">Writing Section</h2><p>Creating Sections on Blogger is very easy. We can insert widgets into sections, but we cannot insert HTML elements into sections. To insert content in a Section, we must use the Widget element.</p><p>Here is an example of writing a Section:</p><p><br /></p><pre><code><b:section id='' class='' maxwidgets='' showaddelement=''><br /></b:section></code></pre>Writing Sections is almost the same as writing HTML which has attributes. Each attribute has a different meaning.<div><br /></div><h2 style="text-align: left;">Attributes to Section</h2><div><ol style="text-align: left;"><li>id (Required) - Contains a name that is allowed only in letters or numbers.</li><li>class (Opsional) - Berisi nama seperti "navbar", "header", "sidebar", dll.</li><li>maxwidgets (Optional) - Number of Widgets to add to the Section.</li><li>showaddelement (Optional) - You can only select " Yes " or " No ". By default, the <mark>showaddelement</mark> is " Yes ". These attributes are elements for adding a Widget.</li><li>growth (Optional) - You can only choose between " Horizontal " and " Vertical ". By default, the contents of the <mark>growth</mark> attribute are " vertical ". This attribute is the layout of the widget (flat sideways or flat down).</li></ol></div><div><div>Sections can have Widgets inside. However, we cannot add a Section to the Section.</div><div><br /></div><div>Here is an example of writing a Section:</div></div><div><br /></div><pre><code><b:section id='header' class='header' maxwidgets="1" showaddelement="no"><br /><!-- Content Of Section --><br /></b:section><br /><b:section id='main' class='main' maxwidgets="1" showaddelement="no"><br /><!-- Content Of Section --><br /></b:section><br /><b:section id='footer' class='footer' showaddelement="no"><br /><!-- Content Of Section --><br /></b:section></code></pre><div><br /></div><h2 style="text-align: left;">Widget</h2>The section is where the Widget comes from. The section is just a Layout element, which will be displayed in the browser is a Widget. We can enter a default Widget or Custom Widget into the Section.<div><br /><div>Here is an example of writing a Widget:</div></div><div><br /></div><pre><code><b:widget id='' locked='' mobile='' title='' pageType='' type='' /></code></pre><div><br /></div><h2 style="text-align: left;">Attributes on Widgets</h2><div><ol style="text-align: left;"><li>id (Required) - Contains a name that is allowed only in letters or numbers.</li><li>type (Required) - This is the type or type of Widget. The following types of widgets can be used on Blogger:</li><li>BlogArchive</li><li>Blog</li><li>Feed</li><li>Header</li><li>HTML</li><li>SingleImage</li><li>LinkList</li><li>List</li><li>Logo</li><li>BlogProfile</li><li>Navbar</li><li>VideoBar</li><li>Newsbar</li><li>locked (Optional) - You only choose between " Yes " or " No ". By default it is " No ". If you select " No ", the Widget will be locked, cannot be moved or deleted.</li><li>title (Optional) - This is an attribute to display the Widget title. If not filled, then the Title can be the name of the Widget Type.</li><li>pageType (Optional) - Can be a name such as "main", "archive", "item", etc. The default is "all".</li><li>mobile (Optional) - You just choose between " Yes ", " No ", or " only ". If you select " Yes ", the Widget will only appear on Mobile devices.</li></ol><div>The following is the writing of the Section and its Widgets:</div></div><div><br /></div><pre><code><b:section id="sidebar" class="sidebar" maxwidgets="" showaddelement="yes"><br /><b:widget id='CustomSearch1' title='Search' type='CustomSearch' locked='false'/><br /><b:widget id='FollowByEmail1' title='Follow By Email' type='FollowByEmail' locked='false' /><br /><b:widget id='PopularPosts1' locked='false' title='Popular Post' type='PopularPosts'/><br /><b:widget id='Label1' type='Label' locked='false' /><br /></b:section></code></pre>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-9021302990856622142.post-85396160154905195192021-02-24T11:09:00.002-08:002021-02-24T11:10:59.367-08:00How to install adblocker killer script on blogger<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGYNEry01WEAPdOEmTFf0rpFTFOjMQ1dMaYY7pKcXqOISo8OIeZx2pwGD1ZC6LeAXF8ccByLcARCDaXpEI8qa3s9cSQFLjn6g1GIHTC2bPm9HTxGZfK9Ic91KfOTNiKfnXK_FAHo86nsY/s0/how+to+install+ads+killer+script+on+blogger.png" style="display: block; padding: 1em 0px; text-align: center;"><img alt="How to install ad blocker killer script on blogger" border="0" data-original-height="720" data-original-width="1280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGYNEry01WEAPdOEmTFf0rpFTFOjMQ1dMaYY7pKcXqOISo8OIeZx2pwGD1ZC6LeAXF8ccByLcARCDaXpEI8qa3s9cSQFLjn6g1GIHTC2bPm9HTxGZfK9Ic91KfOTNiKfnXK_FAHo86nsY/s16000/how+to+install+ads+killer+script+on+blogger.png" title="How to install ad blocker killer script on blogger" /></a></div>Hi, guys in this article I will tell you how you can <b>install the ads blocker killer script on your blogger blog</b>. Adblocker killer helps you to increase your ad income because when anyone uses ads killer on your site then you don't get any profit from her visit. If you install the ad blocker killer script on your blog then when any person visits your blog if he uses adblocker he sees a pop-up and guides to disable the ad blocked on your site if he doesn't disable the ad killer then he doesn't get any way to use your blog.<div><br /></div><div>On the internet, you get so many types of ad blocker killer script but 90% script of them does not look so good this why I am giving you a stylish ad blocker killer script and if you change the color code of this script then it's fully matched with your blog theme.</div><div><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQLtjqNI1vlJRcjJE_oMKrLeUMj4OjA5SR_7OoGtfHofeFw8I2LoupvA2mVxqqQA3EDP6N3vnlAK7o-c6UYMO_2uL-YunfZjavPvm2L0_loJmLhzyelWxszCZWDIdTl25I4AwNLq1dUQQ/s1280/How+to+install+ad+blocker+killer+script+on+blogger.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="720" data-original-width="1280" height="360" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQLtjqNI1vlJRcjJE_oMKrLeUMj4OjA5SR_7OoGtfHofeFw8I2LoupvA2mVxqqQA3EDP6N3vnlAK7o-c6UYMO_2uL-YunfZjavPvm2L0_loJmLhzyelWxszCZWDIdTl25I4AwNLq1dUQQ/w640-h360/How+to+install+ad+blocker+killer+script+on+blogger.gif" width="640" /></a></div><br /><div>I hope you understand the use of ad blocker killer script, so let's talk about how to install adblocker killer script on blogger.</div><div><br /></div><div>If you want to install this script then please follow all the below steps:</div><div><br /></div><div><ol style="text-align: left;"><li>Open blogger dashboard</li><li>Go to the theme section then theme HTML edit.</li><li>Now search for </head> tag<br /><blockquote>If you want to search for anything on the theme then click on the HTML code then press Ctrl + F now you see a small search box opened, type your keyword, and hit enter.</blockquote></li><li>Now paste the below code after the </head> tag<br /><pre><code><style type='text/css'><br />/* Animation */<br />@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}<br />@keyframes rubberBand{from{transform:scale3d(1,1,1)}30%{transform:scale3d(1.25,0.75,1)}40%{transform:scale3d(0.75,1.25,1)}50%{transform:scale3d(1.15,0.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scale3d(1,1,1)}}<br />/* Say Hi to Adblock */<br />#arlinablock{background:rgba(0,0,0,0.65);position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;overflow:auto;z-index:999999;animation:fadeInDown 1s}<br />#arlinablock .header{margin:0 0 15px 0}<br />#arlinablock .inner{background:#e3482d;color:#fff;box-shadow:0 5px 20px rgba(0,0,0,0.1);text-align:center;width:600px;padding:40px;border-radius:5px;margin:7% auto 2% auto;animation:rubberBand 1s}<br />#arlinablock button{padding:10px 20px;border:0;background:rgba(0,0,0,0.15);color:#fff;margin:20px 5px;cursor:pointer;transition:all .3s}<br />#arlinablock button:hover{background:rgba(0,0,0,0.35);color:#fff;outline:none}<br />#arlinablock button.active,#arlinablock button:hover.active{background:#fff;color:#222;outline:none}<br />#arlinablock .fixblock{background:#fff;text-align:left;color:#000;padding:20px;height:250px;overflow:auto;line-height:30px}<br />#arlinablock .fixblock div{display:none}<br />#arlinablock .fixblock div.active{display:block}<br />#arlinablock ol{margin-left:20px}<br />@media(max-width:768px){#arlinablock .inner{width:calc(100% - 20px);margin:10px auto;padding:15px}}<br /></style><br /><script type='text/javascript'><br />//<![CDATA[<br />// Say Hi to Adblock<br />function downloadJSAtOnload(){var e=document.createElement("script");e.src="https://cdn.jsdelivr.net/gh/Arlina-Design/quasar@master/arlinablock.js",document.body.appendChild(e)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;<br />//]]><br /></script></code></pre></li> <li>Now save your theme and see.</li></ol><div style="text-align: center;"><a class="button btn preview" href="https://codepen.io/sayem-miaji/pen/pobzavO" rel="nofollow" target="_blank">Result</a></div></div><h2 style="text-align: left;">Conclusion</h2><div>This a small article about how you can install an adblocker killer script on your blogger blog. No one can bypass this adblocker because I am already adding some javascript for this. If you face any problem with this article then please comment down below. Thank you.</div>Unknownnoreply@blogger.com0tag:blogger.com,1999:blog-9021302990856622142.post-88012298389281699292021-02-24T11:08:00.001-08:002021-02-24T11:08:37.601-08:00How to add a professional about us sidebar widget on blogger<div class="separator" style="clear: both;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPQb17jq8G0OB32BQgRrU2snYLLRO187UNd1WOjm_cTzpcJUlC3MzRVaH8tDieCWdj0cxF6In-P1npfPmf3wNMysF0edXY3WoaTk72xZ6fM1dMyaGA8T7fKxtrfBKc9POMmMxxXk0I4HU/s0/How+to+add+about+us+sidebar+widget+on+blogger.png" style="display: block; padding: 1em 0px; text-align: center;"><img alt="How to add professional about us sidebar widget on blogger" border="0" data-original-height="720" data-original-width="1280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPQb17jq8G0OB32BQgRrU2snYLLRO187UNd1WOjm_cTzpcJUlC3MzRVaH8tDieCWdj0cxF6In-P1npfPmf3wNMysF0edXY3WoaTk72xZ6fM1dMyaGA8T7fKxtrfBKc9POMmMxxXk0I4HU/s16000/How+to+add+about+us+sidebar+widget+on+blogger.png" title="How to add professional about us sidebar widget on blogger" /></a></div>Hi, guys in this tutorial we will talk about how you can add a professional about us sidebar widget on blogger. <div><br /></div><div> On the google blogger, we got a profile if you want to show your bio then you may add your bio and other things on the profile. In this article, I am telling you how to add and customize a professional sidebar about widget on blogger. </div><div><br /></div><div> There is a lot of benefits you get on this widget. Let's talk about all features one by one: </div><div> <ul style="text-align: left;"> <li>Show profile on the widget</li> <li>Show bio on the widget</li> <li>Show social media profile link on the widget</li> <li>Message and subscribe button</li> <li>Instagram like, love and share added</li> </ul> Now, how you can add this to your blogger blog. Follow the below steps to add this widget to your blogger blog: </div><div><br /></div><div> Login to blogger.com. Now go to the layout section then click on the "Add a Gadget" then simply take the "HTML/JavaScript" widget, now copy the below code and add it to the widget </div><div><br /></div><pre title="Add on widget"><code><br /><div class="wrapperx"><br /> <div class="img-area"><br /> <div class="inner-area"><br /> <img src="<mark>https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4pDnJR-OAPZEgtVOtBJxkN0OFwVmb1fNcNhfdHhjKsIgb9XrZezh8gocfGOuKZzvUS2cQz66XUwZOfUASLmWEn9D5eTKsesPCGdVqLkTFo3pywci3ygc0NU5pRkKIxhXcD8Kq66nL3pCW/s220/IMG_4801.png</mark>" alt="" /><br /> </div><br /> </div><br /> <div class="name"><mark>Sayem Miaji</mark></div><br /> <div class="about"><mark>Designer & Developer</mark></div><br /> <div class="social-icons"><br /> <a href="<mark>https://www.facebook.com/sayemtutorial</mark>" class="fb"><i class="fab fa-facebook-f"></i></a><br /> <a href="<mark>http://twitter.com/sayemtutorial</mark>" class="twitter"><i class="fab fa-twitter"></i></a><br /> <a href="<mark>https://www.instagram.com/sayemtutorial/</mark>" class="insta"><i class="fab fa-instagram"></i></a><br /> <a href="<mark>https://youtube.com/sayemtutorial</mark>" class="yt"><i class="fab fa-youtube"></i></a><br /> </div><br /> <div class="buttons"><br /> <button><a href="<mark>https://www.messenger.com/t/sayem.miaji.564</mark>">Message</a></button><br /> <button><a href="<mark>https://youtube.com/sayemtutorial?sub_confirmation=1</mark>">Subscribe</a></button><br /> </div><br /> <div class="social-share"><br /> <div class="row"><br /> <i class="far fa-heart"></i><br /> <i class="icon-2 fas fa-heart"></i><br /> <span><mark>20.4k</mark></span><br /> </div><br /> <div class="row"><br /> <i class="far fa-comment"></i><br /> <i class="icon-2 fas fa-comment"></i><br /> <span><mark>14.3k</mark></span><br /> </div><br /> <div class="row"><br /> <i class="fas fa-share"></i><br /> <span><mark>12.8k</mark></span><br /> </div><br /> </div><br /> </div><br /><style><br />.wrapperx,<br />.wrapperx .img-area,<br />.social-icons a,<br />.buttons button{<br /> background: #eee;<br />}<br />.wrapperx{<br /> position: relative;<br /> padding: 30px;<br /> border-radius: 10px;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br /> flex-direction: column;<br />}<br />.wrapperx .icon{<br /> font-size: 17px;<br /> color: #31344b;<br /> position: absolute;<br /> cursor: pointer;<br /> opacity: 0.7;<br /> top: 15px;<br /> height: 35px;<br /> width: 35px;<br /> text-align: center;<br /> line-height: 35px;<br /> border-radius: 50%;<br /> font-size: 16px;<br />}<br />.wrapperx .icon i{<br /> position: relative;<br /> z-index: 9;<br />}<br />.wrapperx .icon.arrow{<br /> left: 15px;<br />}<br />.wrapperx .icon.dots{<br /> right: 15px;<br />}<br />.wrapperx .img-area{<br /> height: 150px;<br /> width: 150px;<br /> border-radius: 50%;<br /> display: flex;<br /> align-items: center;<br /> justify-content: center;<br />}<br />.img-area .inner-area{<br /> height: calc(100% - 25px);<br /> width: calc(100% - 25px);<br /> border-radius: 50%;<br />}<br />.inner-area img{<br /> height: 100%;<br /> width: 100%;<br /> border-radius: 50%;<br /> object-fit: cover;<br />}<br />.wrapperx .name{<br /> font-size: 23px;<br /> font-weight: 500;<br /> color: #31344b;<br /> margin: 10px 0 5px 0;<br />}<br />.wrapperx .about{<br /> color: #44476a;<br /> font-weight: 400;<br /> font-size: 16px;<br />}<br />.wrapperx .social-icons{<br /> margin: 15px 0 25px 0;<br />}<br />.social-icons a{<br /> position: relative;<br /> height: 40px;<br /> width: 40px;<br /> margin: 0 5px;<br /> display: inline-flex;<br /> text-decoration: none;<br /> border-radius: 50%;<br />}<br />.social-icons a:hover::before,<br />.wrapperx .icon:hover::before,<br />.buttons button:hover:before{<br /> content: "";<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> bottom: 0;<br /> right: 0;<br /> border-radius: 50%;<br /> background: #ecf0f3;<br /> box-shadow: inset -3px -3px 7px #ffffff,<br /> inset 3px 3px 5px #ceced1;<br />}<br />.buttons button:hover:before{<br /> z-index: -1;<br /> border-radius: 5px;<br />}<br />.social-icons a i{<br /> position: relative;<br /> z-index: 3;<br /> text-align: center;<br /> width: 100%;<br /> height: 100%;<br /> line-height: 40px;<br />}<br />.social-icons a.fb i{<br /> color: #4267B2;<br />}<br />.social-icons a.twitter i{<br /> color: #1DA1F2;<br />}<br />.social-icons a.insta i{<br /> color: #E1306C;<br />}<br />.social-icons a.yt i{<br /> color: #ff0000;<br />}<br />.wrapperx .buttons{<br /> display: flex;<br /> width: 100%;<br /> justify-content: space-between;<br />}<br />.buttons button{<br /> position: relative;<br /> width: 100%;<br /> border: none;<br /> outline: none;<br /> padding: 12px 0;<br /> color: #31344b;<br /> font-size: 17px;<br /> font-weight: 400;<br /> border-radius: 5px;<br /> cursor: pointer;<br /> z-index: 4;<br />}<br />.buttons button:first-child{<br /> margin-right: 10px;<br />}<br />.buttons button:last-child{<br /> margin-left: 10px;<br />}<br />.wrapperx .social-share{<br /> display: flex;<br /> width: 100%;<br /> margin-top: 30px;<br /> padding: 0 5px;<br /> justify-content: space-between;<br />}<br />.social-share .row{<br /> color: #31344b;<br /> font-size: 17px;<br /> cursor: pointer;<br /> position: relative;<br />}<br />.social-share .row::before{<br /> position: absolute;<br /> content: "";<br /> height: 100%;<br /> width: 2px;<br /> background: #e0e6eb;<br /> margin-left: -25px;<br />}<br />.row:first-child::before{<br /> background: none;<br />}<br />.social-share .row i.icon-2{<br /> position: absolute;<br /> left: 0;<br /> top: 50%;<br /> color: #31344b;<br /> transform: translateY(-50%);<br /> opacity: 0;<br /> pointer-events: none;<br /> transition: all 0.3s ease;<br />}<br />.row:nth-child(1):hover i.fa-heart,<br />.row:nth-child(2):hover i.fa-comment{<br /> opacity: 1;<br /> pointer-events: auto;<br />}<br />.buttons button a {<br /> color: #31344b;<br />}<br /></style><br /></code></pre>Now simply change the marked things of this code according to your profile. After editing done save the widget and enjoy.<div><br /></div><div>This a small article about how to add a professional about us sidebar widget on blogger. If you face any kind of problem with this article then feel free to tell us in the comment box. Thanks for with us.</div>Unknownnoreply@blogger.com0