NETRAL'ID

NETRAL'ID

Do it. Click the button below to convert your link

News Update
Loading...

Wednesday, 2 September 2020

How to make ad widgets above, middle, and below blog posts

Chances are many have already shared how to advertise, above in the middle and below the post in an old-fashioned way, by editing html. this time I will share a tutorial on how to make a widget above in the middle and below blogger posts, which you can edit at any time in blogger layout.

1. Login to your Blogger account

2. Theme > Edit Html look for this code ]]></b:skin>, and place the code below right above the code ]]></b:skin>

/* Ad Slots */
.top-Ad-Slots .widget,.top-Ad-Slots .widget-content,.Ad-Slots-below .widget,.Ad-Slots-below .widget-content,.Middle-Ad-Slot1 .widget,.Middle-Ad-Slot1 .widget-content,.Middle-Ad-Slot2 .widget,.Middle-Ad-Slot2 .widget-content{margin:0!important;width:100%}

3. Look for the code <b:section class='main' id='main'>...</b:section>  |  or something similar, because each regular template is different, the code below is located right below the code.

<b:if cond='data:view.isLayoutMode or data:view.isPost'>
              <b:section class='top-Ad-Slots' id='top-Ad-Slots' maxwidgets='1' name='Ads Appear Above the Article' showaddelement='no'>
                <b:widget id='HTML76' locked='true' title='Ad Code' type='HTML' version='2' visible='true'>
                  <b:widget-settings>
                    <b:widget-setting name='content'>&lt;div style=&quot;width:100%;height:90px;background:#f5f5f5;margin:0 auto;position:relative;&quot;&gt;
&lt;div id=&#39;content1&#39;&gt;

&lt;/div&gt;
&lt;/div&gt;</b:widget-setting>
                  </b:widget-settings>
                  <b:includable id='main'>
                    <div class='widget-content'>
                      <data:content/>
                    </div>
                  </b:includable>
                </b:widget>
              </b:section>  
              <b:section class='Middle-Ad-Slot1' id='Middle-Ad-Slot1' maxwidgets='1' name='Ads Appear in the Middle of the Article' showaddelement='no'>
                  <b:widget id='HTML77' locked='true' title='Ad Code' type='HTML' version='2' visible='true'>
                    <b:widget-settings>
                      <b:widget-setting name='content'>&lt;div style=&quot;width:100%;height:90px;background:#f5f5f5;margin:0 auto;position:relative;&quot;&gt;
&lt;div id=&#39;content1&#39;&gt;

&lt;/div&gt;
&lt;/div&gt;</b:widget-setting>
                    </b:widget-settings>
                    <b:includable id='main'>
                      <div class='widget-content'>
                        <data:content/>
                      </div>
                    </b:includable>
                  </b:widget>
                </b:section>
              <b:section class='Middle-Ad-Slot2' id='Middle-Ad-Slot2' maxwidgets='1' name='Ads Appear in the Middle of the Article' showaddelement='no'>
                <b:widget id='HTML78' locked='true' title='Ad Code' type='HTML' version='2' visible='true'>
                  <b:widget-settings>
                    <b:widget-setting name='content'>&lt;div style=&quot;width:100%;height:90px;background:#f5f5f5;margin:0 auto;position:relative;&quot;&gt;
&lt;div id=&#39;content1&#39;&gt;

&lt;/div&gt;
&lt;/div&gt;</b:widget-setting>
                  </b:widget-settings>
                  <b:includable id='main'>
                    <div class='widget-content'>
                      <data:content/>
                    </div>   
                  </b:includable>
                </b:widget>
              </b:section>
              <b:section class='Ad-Slots-below' id='Ad-Slots-below' maxwidgets='1' name='Ads Appear Under the Article' showaddelement='no'>
                <b:widget id='HTML79' locked='true' title='Ad Code' type='HTML' version='2' visible='true'>
                  <b:widget-settings>
                    <b:widget-setting name='content'>&lt;div style=&quot;width:100%;height:90px;background:#f5f5f5;margin:0 auto;position:relative;&quot;&gt;
&lt;div id=&#39;content1&#39;&gt;

&lt;/div&gt;
&lt;/div&gt;</b:widget-setting>
                  </b:widget-settings>
                  <b:includable id='main'>
                    <div class='widget-content'>
                      <data:content/>
                    </div>
                  </b:includable>
                </b:widget>
              </b:section>
            </b:if>

4. Also put the code below just above the </body> code

<b:if cond='data:view.isPost'>
<script>
//<![CDATA[
!function(){var e=document.querySelector(".post-body"),n=e.querySelectorAll("div > br, span > br, div > p, span > p"),t=Math.ceil(.2*n.length),l=Math.ceil(.5*n.length),o=document.querySelector("#Middle-Ad-Slot1 .widget-content"),i=document.querySelector("#Middle-Ad-Slot2 .widget-content"),r=document.querySelector("#top-Ad-Slots .widget-content"),d=document.querySelector("#Ad-Slots-below .widget-content"),c=document.getElementById("iklan1"),a=document.getElementById("iklan2");function u(e,n){n.parentNode.insertBefore(e,n.nextSibling)}null!=r&&"\n"!=r.innerHTML&&e.insertBefore(r,e.childNodes[0]),null!=d&&"\n"!=d.innerHTML&&e.appendChild(d),0<n.length?(null!=o&&"\n"!=o.innerHTML&&u(o,null!==c?c:n[t]),null!=i&&"\n"!=i.innerHTML&&u(i,null!==a?a:n[l])):(o.parentNode.removeChild(o),i.parentNode.removeChild(i))}();
//]]>
</script>
</b:if>


5. Save Theme and Done

If you are confused you can see the video below how to install it



So After you install a widget like this you don't need to edit the html if you want to change your ad, just enter the blogger layout and select the widget in which position you want to change.

Ok, that's the first tutorial from me "How to Make an Ad Widget in the middle and at the bottom of the post" hopefully Useful

Tuesday, 11 August 2020

How to make Hero wave or head wrapper

How to create a style like this is very easy, here's how to make a Hero wave or head wrapper

Login to blogger > Click Themes > Edit Html

Place the css code below right above the ]]> </ b:skin> code or </style>  code


/* Intro Wave */
#head-wrapper{position:relative;text-align:center;padding:0 20px;float:left;background-size:cover;background:#6ed25c;background-image:linear-gradient(to right,#0002a0 0,#0076f4 100%);background-position:50%;background-repeat:no-repeat;overflow:hidden;width:100%;height:280px;margin:54px auto 0px auto}.course-head{position:relative;display:table;width:100%;height:100%;z-index:5}.course-sub-head{padding:0 10px;max-width:970px;position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);width:100%;text-align:center;margin:0}.post-header{position:relative}.head-text{float:left;width:100%;text-align:center;margin:0 0 50px}.head-text h3{display:block;font-size:1.8rem;color:#fff;text-align:center;font-weight:500;margin:0 0 20px}.head-text p{line-height:normal;margin:0}.head-text.onex{margin:auto;color:#fff}.head-text.onex h3{color:#fff}svg{vertical-align:middle}#head-wrapper svg.wave{position:absolute;bottom:-1px;left:0;overflow:hidden;vertical-align:middle}.avv{fill:none}.bvv{clip-path:url(#a)}.cvv,.dvv{fill:#fff}.cvve,.dvve{fill:#fff}.dvv,.dvve{opacity:0.5;isolation:isolate}#head-wrapper svg.wavee{position:absolute;top:-1px;left:0;overflow:hidden;vertical-align:middle;transform:rotate(180deg)}.button-home a span.but{background:transparent;color:#fff;font-size:14px;font-weight:500;border-radius:99em;padding:10px 22px;display:inline-block;text-align:center;position:relative;margin:25px auto 0 auto;overflow:hidden;border:2px solid;outline:none;transition:all .1s}.button-home a span.but:hover{background:#fff;color:#222;border-color:#fff;box-shadow:0 2px 6px -2px rgba(0,0,0,0.15)}.Night .button-home a span.but{border:2px solid rgba(255,255,255,.15)}.Night .button-home a span.but:hover{background:#007bff;color:#fff;border-color:#007bff}.Night #head-wrapper{background:#263545}.Night .cvv,.Night .dvv,.Night .cvve,.Night .dvve{fill:#1c2733}.containerghost{position:absolute;right:5%;top:40%;margin-top:-85.5px;opacity:.7;animation:bounceInRight 3.5s}.ghost{animation:float 3s ease-out infinite}.shadowFrame{width:130px;margin-top:15px}.shadow{animation:shrink 3s ease-out infinite;transform-origin:center center}.shadow ellipse{transform-origin:center center}


Then place the following html code below the </header> code or above the id = 'wrapper'> code


<div class='clear'/>
<div id='head-wrapper'>
<div class='course-head'>
<div class='course-sub-head row'>
<div class='head-text onex section'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<h3 class='title'>
            <data:blog.title/>
         </h3>
<p>The place to share tips about bloggers and other information</p>
<div class='button-home'>
<a href='https://www.ali-va.us/' rel='nofollow noopener' target='_blank' title='Browse Our Blogger Themes'><span class='but'>Browse Themes</span></a></div>
</b:if></b:if>
<b:if cond='data:view.isSingleItem'> 
<h3 class='title'><data:blog.pageName/></h3>
<br/>
</b:if>
</div>
  <div class='clear'/>
</div>
</div>
<svg class='wave' height='50px' preserveAspectRatio='none' style='pointer-events: none' viewBox='0 0 1920 75' width='100%'><defs><clipPath id='a'><rect class='avv' height='75' width='1920'/></clipPath></defs><g class='bvv'><path class='cvv' d='M1963,327H-105V65A2647.49,2647.49,0,0,1,431,19c217.7,3.5,239.6,30.8,470,36,297.3,6.7,367.5-36.2,642-28a2511.41,2511.41,0,0,1,420,48'/></g><g class='b'><path class='dvv' d='M-127,404H1963V44c-140.1-28-343.3-46.7-566,22-75.5,23.3-118.5,45.9-162,64-48.6,20.2-404.7,128-784,0C355.2,97.7,341.6,78.3,235,50,86.6,10.6-41.8,6.9-127,10'/></g><g class='bvv'><path class='dvv' d='M1979,462-155,446V106C251.8,20.2,576.6,15.9,805,30c167.4,10.3,322.3,32.9,680,56,207,13.4,378,20.3,494,24'/></g><g class='bvv'><path class='dvv' d='M1998,484H-243V100c445.8,26.8,794.2-4.1,1035-39,141-20.4,231.1-40.1,378-45,349.6-11.6,636.7,73.8,828,150'/></g></svg>
</div>

which I marked please change according to your wishes

Save template. done 

Background with animated waves


How to create a style like this is very easy, here's how to make a Hero wave or head wrapper

Login to blogger > Click Themes > Edit Html

Place the css code below right above the ]]> </ b:skin> code or </style>  code


:root{--body-font:Roboto,Arial,sans-serif;--body-bg:#f0f2f5;--title-color:#1f2b38;--link-color:#2980b9;--text-color:#67676a;--subtitle-color:#47474a;--header-bg:#1f2b38;--header-color:#95a5a6;--header-hover-color:#fff;--navbar-bg:#243342;--navbar-color:#95a5a6;--navbar-hover-color:#fff;--hero-bg-1:#2c7ee8;--hero-bg-2:#27ae60;--hero-color:#fff;--hero-text-color:#cfeddc;--green-color:#27ae60;--green-hover-color:#239c56;--blue-color:#2980b9;--blue-hover-color:#2573a6;--red-color:#e74c3c;--bsellers-bg:#fff;--bsellers-title-color:#1f2b38;--bsellers-link-color:#2980b9;--footer-bg:#1f2b38;--footer-color:#95a5a6;--footer-title-color:#fff;--footer-hover-color:#fff;--footerbar-bg:#161e27;--footerbar-color:#e8e9eb;--footerbar-hover-color:#fff;--copyright-color:#95a5a6;--border-color:#e1e8ed;--box-shadow:0 1px 2px rgba(0,0,0,0.1);--top-box-shadow:0 -1px 2px rgba(0,0,0,0.1)}
/* Next */
#vagina-ngiler a{padding-top:60px}
#vagina-ngiler a span{position:absolute;top:0;left:0;right:0;height:40px;transition:all .3s}
#vagina-ngiler a:hover span{opacity:.8}
#vagina-ngiler a span::before{position:absolute;content:'';top:-22px;left:-22px;width:44px;height:44px;box-shadow:0 0 0 0 rgba(255,255,255,0.1);border-radius:100%;opacity:0;-webkit-animation:sdb 3s infinite;animation:sdb 3s infinite}
#vagina-ngiler a span::after{position:absolute;content:'';width:12px;height:12px;margin:-8px 0 0 -6px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}
.insightly{position:absolute;bottom:35%;left:50%;z-index:2;display:inline-block;transform:translate(0,-50%);color:#fff}
#hero-vvv svg.wave {position: absolute;bottom: -1px;left: 0;overflow: hidden;vertical-align: middle;}
.a{fill:none}.b{clip-path:url(#a)}.c,.d{fill:#efefef;transition: all .5s ease;}.d{opacity:0.5;isolation:isolate}
/*Netralid*/
.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translate(0,0)}.fa-lg{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.fa-fw{width:1.28571429em;text-align:center}.fa-check:before{content:"\f00c"}.fa-chevron-up:before{content:"\f077"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-facebook:before{content:"\f09a"}.fa-twitter:before{content:"\f099"}.fa-instagram:before{content:"\f16d"}.fa-play:before{content:"\f04b"}.fa-desktop:before{content:"\f108"}.fa-file-text-o:before{content:"\f0f6"}.fa-whatsapp:before{content:"\f232"}.fa-envelope-o:before{content:"\f003"}.fa-external-link:before{content:"\f08e"}
.fa-navicon:before{margin-top:10px}
.fa-navicon{margin-top:10px}
.hero-footer{width:100%;background-size:cover}
.hero-footer{position:absolute;z-index:1;bottom:-10px;left:0;height:auto}
.hero-footer img{width:100%;height:100%}
/* Wave Effect */
#fancy-shape{clear:both;max-width:100%;display:block;position:relative;margin:0 auto 5% auto;padding:30px 0 0 0;justify-content:center;z-index:1;max-height:100px}
.footer-fancy-shape{clear:both;overflow:hidden;position:absolute;left:0;bottom:100%;width:100%;margin-bottom:-2px;direction:ltr}
.footer-fancy-shape svg{z-index:-1;display:block;position:relative;left:50%;transform:translateX(-50%)}
svg:not(:root){overflow:hidden}
.footer-fancy-shape .footer-fancy-shape-fill{fill:#fff;width:calc(100% + 2.5px);transform-origin:center;transform:rotateY(0deg)}
.footer-fancy-shape-bottom svg{width:calc(130% + 2.5px);height:125px}
.waving{overflow:hidden;position:relative;width:100%;color:#fff;font-size:0;margin:0 auto}
.waving svg{fill:#fff;width:102%;margin-left:-1%;height:auto}
.flex{display:flex;justify-content:center;align-items:center;text-align:center}
.waves{position:relative;width:100%;height:15vh;margin-bottom:-7px;min-height:100px;max-height:150px}
.waves1{position:relative;width:100%;height:15vh;min-height:80px;max-height:100px}
.content{position:relative;height:20vh;text-align:center;background-color:white}
.parallax &gt; use{animation:move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite}
.parallax &gt; use:nth-child(1){animation-delay:-2s;animation-duration:7s}
.parallax &gt; use:nth-child(2){animation-delay:-3s;animation-duration:10s}
.parallax &gt; use:nth-child(3){animation-delay:-4s;animation-duration:13s}
.parallax &gt; use:nth-child(4){animation-delay:-5s;animation-duration:20s}
@keyframes move-forever{0%{transform:translate3d(-90px,0,0)}100%{transform:translate3d(85px,0,0)}}
@media (max-width:768px){.waves{height:40px;min-height:40px}}
#hero-wrapper{position:relative;float:left;width:100%;background-color:var(--hero-bg);background:url(https://2.bp.blogspot.com/-Cunhwsdp0mY/XkwPhif1ZJI/AAAAAAAABbQ/QcKYgn8WpuggeTcr90fNXlmGQE0Mpy0JwCK4BGAYYCw/s480/hero-wrapper.png), linear-gradient(135deg, var(--hero-bg-1) 40%, var(--hero-bg-2));background-blend-mode:overlay;padding:45px 0 135px;margin:0;box-shadow:var(--box-shadow)}
.hero-content{float:left;width:100%;color:var(--hero-color);text-align:center;margin:0 0 5px}
.hero-content h1{display:block;font-size:35px;font-weight:700;margin:0 0 13px;color:#fff}
.hero-content p{display:block;font-size:16px;color:var(--hero-text-color);margin:0}
.hero-tags{float:left;width:100%;font-size:14px;color:var(--hero-color);text-align:center;margin:0 0 10px}
.hero-tags span,.hero-tags a{display:inline-block}
.hero-tags a{color:var(--hero-text-color);margin:0 0 0 10px}
.hero-tags a:hover{color:var(--hero-color)}
.bt-wrapper{position:relative;float:left;width:100%;margin:0}
.bt-items{float:left;width:100%;margin:35px 0 45px}
.bt-item{float:left;width:100%;margin:30px 0}
.index-card{position:relative;float:left;width:calc(100% / 3);margin:35px 0 0;padding:0 15px}
.bt-items .index-card:nth-child(1),.bt-items .index-card:nth-child(2),.bt-items .index-card:nth-child(3){margin:0}
@media screen and (max-width: 640px) {
#hero-wrapper{padding:35px 0 40px}
.hero-content h1{display:initial;font-size:27px}
.hero-tags{margin:0}
.bt-items{margin:35px 0}
.index-card{width:100%}
.bt-items .index-card:nth-child(2){margin:35px 0 0}
.aff_header h2,.fc_header h3,.master-p h3{line-height:1.6em}}


Then place the following html code below the </header> code or above the id = 'wrapper'> code


  <div class='clr'/>
<div id='hero-wrapper'>
<div class='row'>
<b:if cond='data:view.isHomepage'>
<div class='container'>
<div class='hero-content'>
<h1 class='hero-title'>Happily used by 1000+ Customers.</h1>
<p class='hero-text'>Get ready for the surprise! Our Responsive Blogger Theme.</p>
</div>
<div class='hero-tags'>
<span class='tags-label'>Popular Searches:</span><a class='popular-tag' href='/search/label/Free?&amp;max-results=18'>Free Area</a>,<a class='popular-tag' href='/search/label/Members?&amp;max-results=18'>Members Area</a>
</div>
</div>
</b:if>
<b:if cond='data:view.isSearch'>
<div class='container'>
<div class='hero-content'>
<h1 class='hero-title'><data:blog.title/></h1>
<p>Get the best theme according to your needs</p>
</div>
</div>
</b:if>
<b:if cond='data:view.isSingleItem'>
<div class='container'>
<div class='hero-content'>
<h1 class='hero-title'><data:blog.pageName/></h1>
</div>
</div>
</b:if>
<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<div class='insightly' id='vagina-ngiler'>
<a href='#main'><span/></a>
</div>
</b:if>
</div>
<div class='hero-footer'>
<svg class='waves' preserveAspectRatio='none' shape-rendering='auto' viewBox='0 24 150 28' xmlns='https://www.w3.org/2000/svg' xmlns:xlink='https://www.w3.org/1999/xlink'>
<defs>
<path d='M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z' id='gentle-wave'/>
</defs>
<g class='parallax'>
<use fill='#efefef4d' x='48' xlink:href='#gentle-wave' y='0'/>
<use fill='rgba(242, 242, 242, 0.12)' x='48' xlink:href='#gentle-wave' y='3'/>
<use fill='rgba(255,255,255,0.3)' x='48' xlink:href='#gentle-wave' y='5'/>
<use fill='#efefef' x='48' xlink:href='#gentle-wave' y='7'/>
</g>
</svg>
</div>
</div>
  <div class='clr'/>


Save template. done

Saturday, 8 August 2020

These are the types of hosting you need to know

Types of Hosting You Need to Know. After I previously made an article on the Complete Definition of Hosting and its terms, now I will show you some types of hosting that you need to know, this is important for you to know because by knowing these types of hosting you can easily choose the type of hosting package when You will buy hosting for your website or blog, below are the types of web hosting that you will often find when visiting a hosting provider service site:

10 Important Factors to Consider Before Choosing a Web Hosting Plan

10 Important Factors to Consider Before Choosing a Web Hosting - Choosing a web hosting service with so many offers from various hosting service companies will certainly make your decision in choosing a web hosting company difficult. Because most all web hosting companies promise 99% uptime, unlimited or unlimited resources, and extensive support. With such an offer, you still have to be smart in choosing the right web hosting for your website.

Website Hosting - What Features Do You Need?

Website Hosting - What Features Do You Need? - When you are looking for a web hosting company for your business or personal website, you will need to decide what features you need. Several web hosting companies offer a variety of features that are included in the cost of the hosting plan.

Avoid 5 Common Mistakes When Choosing a Hosting

Avoid 5 Common Mistakes When Choosing Hosting - Most people often feel cheated into thinking that the best hosting that offers one of the features called unlimited bandwidth means that you as a client will actually get unlimited bandwidth, but actually this is not happen. When choosing hosting for a website, there are a number of mistakes that most people make. Here are 5 common mistakes you need to avoid when choosing a hosting for your website.

Complete understanding of hosting and its terms

Complete Understanding of Hosting and Its Terms - When you are going to create a website, you will encounter new terms such as domain and hosting, which are very important components so that your website can be accessed by everyone via the internet network.

Where domain is the name of your website while hosting is a space equipped with various software and hardware that works to animate your website so that it can be accessed and works. But for beginners it will be very confusing to understand hosting and its various terms.

What is Hosting?


Hosting (also known as Web Hosting / hosting rental) is a rental place to accommodate the data needed by a website and so that it can be accessed via the Internet. The data here can be in the form of files, images, emails, applications / programs / scripts and databases.

Understanding hosting can be likened to the following example; a website is likened to a kiosk / room in a mall.

Mall management rents out space, infrastructure, electricity, telephones and other facilities so that people can open businesses. Each stall that runs it is different, has different decorations and operates each in its own way. In this case, the kiosk or room that is rented certainly has space limitations (eg 10m x 7m) and the maximum is the size of the Mall building.

Hosting companies provide hardware, network (infrastructure), email (telephone), and so on so you can open / create websites. Our server (Mall building) is occupied by many customers, each customer has a diskspace usage limit (space limitation) and of course each customer operates their own website.

Thursday, 30 July 2020

Documentation JD (Janda Design)

JD (Janda Design) is a blogger template, this template is updated from the same version to be similar to the landing page style, JD (Janda Design) is very suitable for my friend who has a blog tutorial, gallery and others. already equipped with interesting features at this time.

Tuesday, 21 July 2020

Documentation Aliva Web

Aliva Web Is a blogger template that is similar to one of the web / blog website Provider Templates and Services, namely hupweb,
While the template that is used by hupweb itself is a template for promotion only, which means there are no pages for posting like other templates.
Aliva web is already available and many interesting features in it

Sunday, 19 July 2020

Documentation Aliva Theme

Aliva is a professional, modern & fully customizable responsive blogger template. It is perfect for tutorial blogs, distribution of mockups, vectors, logos, fonts, free blogger templates, wordpress themes and other diverse niches. Aliva is also ideal if you want to monetize your website via banners, as it is one of the blogger themes with the largest number of sections for banners.

Aliva is fully customizable, which means that you can create several different blogs with the same template. Customizations are made through the blogger dedicated page for this purpose, which means that you don't need to have any coding knowledge to customize this theme.

Wednesday, 15 July 2020

Create a Whatsapp Chat Widget With Multiple Numbers and Accounts

This widget can be used on all kinds of platforms with only HTML, CSS and Javascript. Of course it is also suitable for use on Wordpress.

From the picture must have been imagined how the function and how this chatbox widget works. You can add 2 to an unlimited number of accounts that will be connected to WhatsApp. After selecting, visitors can type a message before finally entering the whatsapp application automatically. You must install this widget if you need more than 2 Customer Service.

Tuesday, 14 July 2020

Tutorial on Making Night Mode [Dark Mode] on Blogspot

The addition of the night mode feature is usually used to pamper visitors who want to see a dark appearance on the blogs they visit. There are buttons / switches to change the display from standard mode to dark mode.

The dark mode / night mode switch is then set via CSS changes. This code will then follow the commands of the script that runs this mode. Many bloggers already use this installation on their blogs, I'm also one of them. How about you, are you interested in using this trick? If so, then please continue to follow this tutorial until it's complete.

Monday, 13 July 2020

Make a Color Picker Tool on a Static Page Blog with a New Style

Changing the color in the template or other parts of the blog does not require special expertise. You can simply copy the desired color code and then attach it to the CSS code and it will automatically change the selected HTML display color. Choosing the right color also does not require special skills, you can simply copy the color code through the color picker tool that is widely available on several websites.

What if then you want to make your own color picker tool and install it on a static blog page. This has been done by many bloggers, including myself.

Here, I will share 2 different types of styles in this color picker. If you are interested in installing it on your blog, please choose the style that suits you best to pair as a color picker tool on the statistics page.

Show the number of visitors, posts and comments in one blogspot widget.

Blogger has a widget called Stats that allows you to display your blog's visitor statistics. You have. In this article, I will show you how to make the Stats Widget more fresh. Beautiful, along with the use of Font Awesome icons, not only this widget shows the total number of articles and The total number of comments contained in your blog as well.

Before Entering the Tutorial Make sure you have added the Stats widget on your blog

Hide / Show Widgets on Specified Pages on the Latest Blogger

Since there are already the latest conditional tags, then to hide or display widgets / gadgets on certain pages for Blogger / Blogspot also changes. However, using the old methods can also still be done.

If the widget / gadget that we want to hide or display is part of the header, sidebar or footer gadget, then the method is as follows.

Login to Blogger> Themes> Edit HTML.

Then select the Jump to widget dropdown, as in the following image.

The Latest Blogger Conditional Tags And Their Functions

What is a Conditional Tag? Conditional tags or commonly called Conditional tags is an HTML programming language that gives commands to load or display widgets, CSS, JS or HTML in accordance with the commands on the conditional tags.

The Latest Conditional Tags, Functions and Their Use
Below is the latest conditional tag that you can apply to your blog if you want to replace the old conditional tags in your template. This new conditional tag version is simpler. Looks shorter than the previous conditional tag.

1. Homepage Conditional Tag (Main Page)
Display CSS, Widget, Js etc. data only on the Main page

<b:if cond='data:view.isHomepage'>

2. Conditional Page Index Tags
Display widgets, css, html, js only on the index page.

<b:if cond='data:view.isMultipleItems'>

3. Tag the Conditional Page Items
Display widgets, css, html, js only on the item page

<b:if cond='data:view.isSingleItem'>

4. Conditional Tag Page Posting
Showing widgets, css, html, js only on the posting page

<b:if cond='data:view.isPost'>

5. Static Page Conditional Tags (Page)
Display widgets, css, html, js only on static pages

<b:if cond='data:view.isPage'>

6. Conditional Tag Page Label
Display widgets, css, html, js only on the label page

<b:if cond='data:view.isLabelSearch'>

7. Pages with certain labels
Only bring up certain types of labels according to the command conditional tags.

<b:if cond='data:view.search.label == &quot;One-Label&quot;'></b:if>

8. Conditional Tag Page Search
Display widgets, css, html, js only on the label page

<!-- Includes a label search page -->
<b:if cond='data:view.isSearch'>
<!-- Search page only -->
<b:if cond='data:view.isSearch and !data:view.isLabelSearch'> 


9. Tag the Conditional Page Archive
Display widgets, css, html, js only in the Archive page

<b:if cond='data:view.isArchive'>

10. Conditional Tag Page Error 404 (Page Not Found)
Showing widgets, css, html, js only on the error page

<b:if cond='data:view.isError'>

11. Conditional Tag Page Preview (Preview)
Display widgets, css, html, js only on the preview page

<b:if cond='data:view.isPreview'>

Conditional Tags Out of Condition (Exceptions)
Conditional Tags previously functioned to put code elements (HTML, CSS, JS, Widgets etc.) in a condition. So that the tags are out of a condition, then simply by changing the code == to !=  Example:

<b:if cond='data:blog.pageType != &quot;index&quot;'></b:if>

Index pages are homepage, search, label and archive pages. So with the tag above, it will be outside the index page. So pages like posts and static pages will appear.

For the latest version, you can use the code! or notes where the code placement is placed in front. Example:

<b:if cond='!data:view.isMultipleItems'></b:if> Or <b:if cond='not data:view.isMultipleItems'></b:if>


Combining Conditional Tags - Multi Tags
How to combine 2 tags at once, but the function remains the same. Here's an example:

<b:if cond='data:blog.pageType != &quot;item&quot; or data:blog.pageType != &quot;static_page&quot;'></b:if>


The tag above means it will appear on the page outside the item and static_page. The meaning of or is if one of them is true then the condition will be displayed. If you have to under certain conditions then use and.

To combine multiple page urls on certain page tags or for multiple urls:

<b:if cond='data:view.url in {&quot;Url page A&quot;,&quot;Url page B&quot;,&quot;Url page so on&quot;}'></b:if>

Notice there is a comma ,. On the other hand you can use and, which means that if the usage of the two / more conditions is correct, it will be displayed. If one is incorrect then it will not be displayed.

If it's incorrect, display another <b:else>
If displaying differently on different pages don't have to use two conditional tags.
The way

<b:if cond='data:blog.pageType == &quot;item&quot;'> 1 <b:else/> 2 </b:if>


will be found on the post page. But if the page isn't posted it will use 2. So the function is for the exception of the code above.

Tag <b:else/> whose placement is always in line with
<b:if>. <b:else> can be interpreted as "and also" or "can also" command. Then the example of application can be like this:


<b:if cond='data:view.isHomepage'>  
[...content1...]  
<b:else />  
[...content2...]
</b:if> 


Maybe the picture above can give you a little shadow about how to place conditional and b: else tags and their functions.

Special Conditional Tags Mobile Page Or /?M=1
Displays CSS, JSS views, Specifically for the mobile version

<b:if cond='data:mobile'>

Get to know the conditional tag code and its functions

Get to know the conditional tag code and its functions - This tutorial has actually been around for a long time, but it's still often used by blogger designs

When we are heading to someone's blog, it appears that the widget display on the blog is sometimes interchangeable. For example, on the front page of Wigdet A, on the other page Widgets A does not appear. What's wrong....

Actually, there are several ways that are done by bloggers to do this. This means displaying specific widgets on certain pages. Want to know?

Here's how to do it in general (these tips are intended to enhance the appearance of the blog).

1. Display the widget only on the front page (homepage)


<b:if cond = 'data: blog.url == data: blog.homepageUrl'>
................. .....................................
</ b: if>


2. Displays all pages except homepage.


<b:if cond = 'data: blog.url! = data: blog.homepageUrl'>
............................. .........................
</ b: if>


3. Display the widget only on the Archive page.


<b:if cond='data:blog.pageType == &quot;archive&quot;'>
......................................................
</b:if>


4. Displays widgets on all pages except the archive page.


<b:if cond='data:blog.pageType != &quot;archive&quot;'>
......................................................
</b:if>


5. Displays widgets only on the post page.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
......................................................
</b:if>


6. Displays widgets on all pages except the posting page.


<b:if cond='data:blog.pageType != &quot;item&quot;'>
......................................................
</b:if>


7. Display the widget only in certain posts.


<b:if cond = 'data: blog.pageType == &quot;post-address&quot;'>
............................ ..........................
</ b:if>


8. Displays widgets other than certain posts.


<b:if cond = 'data: blog.pageType! = &quot;post-address&quot;'>
............................ ..........................
</ b: if>


9. Displays widgets only on staticpages pages.


<b:if cond = 'data: blog.pageType == &quot;static_page&quot;'>
.............................. ........................
</ b: if>


10. Displays widgets on all pages, except pages staticpages.


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
.................................................. ....
</ b: if>

Note: The dot above is the widget code that needs to be placed.

For example, pay attention below.
Try you to the world of Sarah . On the front page Facebook Fan Widget does not appear. Then on the second page when clicking on an article, the Facebook Fan Widget appears. To do that please try the following steps.

Display Specific Widgets On Specific Pages
  1. Of course you have to open your own blog account.
  2.  Enter the Template Element . Then click Edit HTML
  3. Look for widgets that you hide (before you have installed widgets in your blog).
  4. For example the Facebook Fan Widget. Please look for the words "Fan Facebook" (use Ctrl + F to search quickly)
  5. Once found, the code will appear exactly as below.


  6. <b:widget id='HTML4' locked='false' title='Fan Facebook' type='HTML'> <b:includable id='main'><!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div><b:include name='quickedit'/> </b:includable> </b:widget>
    


  7. Next add the code

  8. <b:if cond='data:blog.pageType == &quot;item&quot;'>

    before the code
    <!-- only display title if it's non-empty --> 

  9. After adding then enter the code
  10. before the code
    </b:includable>
    </b:widget>


  11. Then the results will be exactly as below.

  12. <b:widget id='HTML4' locked='false' title='Fan Facebook' type='HTML'> <b:includable id='main'><b:if cond='data:blog.pageType == &quot;item&quot;'><!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div><b:include name='quickedit'/></b:if> </b:includable> </b:widget>


  13. Done. Save your blog template.


Sunday, 12 July 2020

How to Install Adsense or Features Under Title Blogspot Posts

One way to increase revenue on Google Adsense is to place ad units in a good place. And the best position is sometimes in the post. Be it under the title, in the middle of the post or at the end of the post. and one of increasing blog visitors is that it adds useful features

The best position to place AdSense ads is not always in the post. Basically, the position is absolutely perfect with the template used. There are good templates that place the top right and left sidebar.
Donate
Treat me to a glass of coffee
Ok, I get it