NETRAL'ID: Design

NETRAL'ID

Do it. Click the button below to convert your link

News Update
Loading...
‏إظهار الرسائل ذات التسميات Design. إظهار كافة الرسائل
‏إظهار الرسائل ذات التسميات Design. إظهار كافة الرسائل

الأربعاء، 2 سبتمبر 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

الثلاثاء، 11 أغسطس 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

الخميس، 30 يوليو 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.

الثلاثاء، 21 يوليو 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

الأحد، 19 يوليو 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.

الأربعاء، 15 يوليو 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.

الثلاثاء، 14 يوليو 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.

الاثنين، 13 يوليو 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.


الأحد، 12 يوليو 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.

How to Make a Contact Button integrated with several options on Blogger

How to Make a Contact Button integrated with several options on Blogger - Making the Facebook Messenger, Zalo chat, Skype chat, and Email buttons with one one is very complicated especially if it will disturb the appearance of our blog for sure, why don't you just combine it into one place / menu and use the button to display the menu in one click , this is very comfortable right?

Therefore Theboegis Provides Tutorials on How to Make a Contact Button integrated with several options on Blogger

How to install google voice on your blog to be more cool


How to install google voice on your blog to be more cool - google voice: is one of the features of google that makes it easy for visitors to search, read the web with sound, this time I Netralid.com admin will share the tutorial, ok just see:

Live Demo


  1. Please login to blogger, and enter the dashboard.
  2. Enter the menu Theme, then click EDIT HTML.
  3. Search Code ]]></b:skin>, Put the CSS code below just above ]]></b:skin> code.


  4. /* google voice */
    .btnvoice{margin:0;overflow:hidden;position:relative}
    .btnvoice button.voice-button,.btnvoice button.voice-stop{padding:0 5px;font-size:13px;background:none;outline:0;cursor:pointer}
    .btnvoice button.voice-button{color:#555;border:none;border-radius:0}
    .btnvoice button.voice-stop{color:#ff5f02;border:none;border-radius:0}


  5. Now add the following JS script just avobe </body> code


  6. <script>
    //<![CDATA[
    /* option font voice js*/
    function loadCSS(e,t,o){"use strict";var i=window.document.createElement("link"),s=t||window.document.getElementsByTagName("script")[0];i.rel="stylesheet",i.href=e,i.media="only x",s.parentNode.insertBefore(i,s),setTimeout(function(){i.media=o||"all"})}loadCSS("https://kit-pro.fontawesome.com/releases/v5.11.2/css/pro.min.css"),loadCSS("https://fonts.googleapis.com/css?family=Anton|Roboto:300,300i,400,400i,500,500i,700"),"undefined"==typeof jQuery&&document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"><\/script>'),"undefined"==typeof jQuery&&document.write('<script src="https://code.responsivevoice.org/responsivevoice.js?key=IpsVaOl2"><\/script>');
    //]]>
    </script>


  7. Install the Html code, here you adjust, but good advice is placed above or below the post title (You can see here the tutorial)


  8. <span class='btnvoice'>
    <button class='voice-button' onclick='responsiveVoice.speak(document.querySelector(&#39;.post-body&#39;).textContent, &#39;Indonesian Female&#39;);' title='Play'><i aria-hidden='true' class='fa fa-play-circle'></i> Voice</button>
    <button class='voice-stop' onclick='responsiveVoice.cancel();' title='Stop'><i aria-hidden='true' class='fa fa-stop-circle'></i></button>
    </span>



Live Demo

How to make a Convert Html Code on a Static Page Blogspot


How to make a Convert Html Code on a Static Page Blogspot - HTML Converter or HTML Parse is a tool that can be used to convert HTML code into unique code, there are times when we need the HTML code that we make converted first, for example when entering adsense ad code and for other purposes.

how to enter HTML Converter / HTML Parse into a Blog is as follows:

1. Create a new page, fill in the page title
2. Between Compose and HTML, select HTML and then paste the following code:
To enter the AdSense code into the blog via <kbd>Edit HTML</kbd>, You can't copy paste directly. The way to copy your Adsense is good <kbd>Google Adsense</kbd> or even <kbd>Kode Javascript</kbd> the other, then click the button <kbd>Conversion</kbd>. After that copy and paste on your blog.<br /><br />
<textarea id="codes" placeholder="Write / paste the code here then click 'Conversion'" spellcheck="false">
</textarea><br /><br /><div class="button-group"><button id="cvrt" onclick="cdConvert();this.disabled = true;" class="ripplelink">Conversion</button><button onclick="cdClear();" class="ripplelink">Clean up</button>
</div>
<ul id='wrapin'>
<li><input checked="true" class="option-input checkbox" id="opt1" type="checkbox" />Conversion <code>&amp;</code> Becomes <code>&amp;amp;</code></li>
<li><input id="opt2" class="option-input checkbox" type="checkbox" />Conversion <code>'</code> Becomes <code>&amp;#039;</code></li>
<li><input id="opt3" class="option-input checkbox" type="checkbox" />Conversion <code>"</code> Becomes <code>&amp;quot;</code></li>
<li><input checked="true" class="option-input checkbox" id="opt4" type="checkbox" />Conversion <code>&lt;</code> Becomes <code>&amp;lt;</code></li><li><input checked="true" class="option-input checkbox" id="opt5" type="checkbox" />Conversion <code>&gt;</code> Becomes <code>&amp;gt;</code></li>
</ul>
<script type="text/javascript">
function cdClear(){var a=document.getElementById("codes");a.value="",a.focus(),document.getElementById("cvrt").disabled=!1}function cdConvert(){var a=document.getElementById("codes"),b=a.value,c=document.getElementById("opt1"),d=document.getElementById("opt2"),e=document.getElementById("opt3"),f=document.getElementById("opt4"),g=document.getElementById("opt5");b=b.replace(/\t/g,"    "),c.checked&&(b=b.replace(/&/g,"&amp;")),d.checked&&(b=b.replace(/'/g,"&#039;")),e.checked&&(b=b.replace(/"/g,"&quot;")),f.checked&&(b=b.replace(/</g,"&lt;")),g.checked&&(b=b.replace(/>/g,"&gt;")),a.value=b,a.focus(),a.select()} </script>
<br />
<div style='clear: both;'></div>
<style scoped="" type="text/css">
#main-wrapper{padding:0;width:100%;border:0} code{font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;color:#2a5ead;font-size:13px;padding:2px 4px;color:#d14;} 
#codes{border:1px solid rgba(0,0,0,0.08);width:68%;height:250px;margin:0 auto;display:block;background-color:#fff;color:#999;padding:15px;border-radius:3px;font-size:13px;font-family:monospace;transition:all .3s} #codes:hover,#codes:focus{background-color:#fff;color:#222;border-color:rgba(0,0,0,0.2)} .button-group{width:100%;max-width:78.5%;float:none;margin:0 auto 0;text-align:center} button,button[disabled]:active{width:42.3%;border:none;padding:14px 12px;text-align:center;color:#fff;display:inline-block;white-space:nowrap;background-color:#3498db;cursor:pointer;font-size:13px;position:relative;top:-20px;margin:0 8px;letter-spacing:.5px;border-radius:3px;transition:all 0.2s} button:hover,button:focus{background:#43a9ed;color:#fff} button[disabled],button[disabled]:active{background:#43a9ed;color:#fff;} 
#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;margin:0 10px 0 0;vertical-align:middle;border:none;outline:none} 
#outer-wrapper {margin:0 auto;text-align:left;float:none;background-position:center!important;} 
#post-wrapper {width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important;} .post-body,.post{background-position:center!important;} 
.post-body p{margin:0} #blog1,#artikel,.blog-posts{background-position:center!important;} 
#comments,#sidebar-wrapper,#menu-wrap {display:none;margin-top:0;margin:0;} 
.post-inner {padding:0 0 0 0;margin:20px auto;} .post-body ul#wrapin{width:100%;max-width:68.5%;display:table;position:relative;margin:0 auto;font-size:13px} 
.post-body ul#wrapin li {display:block;margin:0 auto;text-align:left;} 
.post-body ul#wrapin br {display:none;} 
.option-input{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;position:relative;right:0;bottom:0;left:0;height:16px;width:16px;transition:all 0.15s ease-out 0s;background:#f0f0f0;border:none;color:#fff;cursor:pointer;display:inline-block;margin-right:0.5rem;outline:none;position:relative;border-radius:10%;} 
.option-input:hover{background:#eee} .option-input:checked{background:#2ecc71} .option-input:checked::before{height:16px;width:16px;position:absolute;content:'\f00c';font-family:fontawesome;display:inline-block;font-size:12.66667px;text-align:center;line-height:16px} 
.option-input:checked::after{-webkit-animation:click-wave 0.65s;-moz-animation:click-wave 0.65s;animation:click-wave 0.65s;background:#40e0d0;content:'';display:block;position:relative;z-index:100}
.option-input.radio{border-radius:50%} 
.option-input.radio::after{border-radius:50%} 
</style>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

3. Publish
4. finished

Live DEMO - Click Here

Here's How to Create a Cool Contact Form Page on Blogspot


Installing Contact Forms on Static Pages - Okay, here I am not going to discuss the functions and reasons for the Contact Form widget regarding roles on blogs, but here I will share tips on how to install contact forms. on the blogger statistics page, see.

Live DEMO - Click Here


First you have entered the Contact preparation widget on the blog.

السبت، 11 يوليو 2020

Here's How to Make a cool Whatsapp Chat Button Widget on Blogger


By installing WhatsApp chat on a blog, it is very useful for visitors to contact you directly through WhatsApp. Whatsapp mostly uses the application and almost everyone has installed it on their mobile.

Live DEMO - Click Here

How to Make Awesome Whatsapp Chat Widget on Blogger

  1. Please login to blogger, and enter the dashboard.
  2. Enter the menu Theme, then click EDIT HTML.
  3. Search Code ]]></b:skin>, Put the CSS code below just above ]]></b:skin> code.
/* WA Chat */
#whatsapp-chat,.nabil-live{background:white;position:fixed;z-index:100;right:30px}
#whatsapp-chat{width:350px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 8px 25px -5px rgba(45,62,79,.15);-moz-box-shadow:0 8px 25px -5px rgba(45,62,79,.15);box-shadow:0 8px 25px -5px rgba(45,62,79,.15);bottom:80px;overflow:hidden;}
#btn-chat,#tooltip i,.nabil-live svg{vertical-align:middle}
.nabil-live{color:white;background:linear-gradient(45deg,#029abd 0,#05c537 100%);background:-webkit-linear-gradient(45deg,#029abd 0,#05c537 100%);bottom:25px;line-height:30px;font-size:15px;padding:0;-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px;-webkit-box-shadow:0 1px 5px rgba(154,154,154,.2);-moz-box-shadow:0 1px 5px rgba(154,154,154,.2);box-shadow:0 1px 5px rgba(154,154,154,.2);}
.nabil-live .svg{margin:0;position:absolute;top:0;padding:5px 8px;-webkit-border-radius:0 50px 50px 0;-moz-border-radius:0 50px 50px 0;border-radius:0 50px 50px 0;right:-10px;background-color:white;color:#31c73a;width:39px;height:39px;line-height:30px;overflow:hidden;text-align:center;z-index:10}
.box-live,.goomwhats,.info-avatar{position:relative}
.box-live a,.info-chat{color:white}
.box-live{padding:4px 20px}
.box-live span{margin-right:40px;font-size:13px}
.info-chat{padding-top:3px}
.info-chat span.chat-label{font-size:15px;font-weight:700}
.info-chat span.chat-text{font-size:13px;line-height:1.3;color:#d7ffee}
.info-avatar{width:48px;height:48px;float:left;margin:5px 15px 0 0}
.info-avatar img{-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;width:100%;height:auto}
.informasi{padding:15px;overflow:hidden;position:relative;background:linear-gradient(45deg, 0,#05c537 100%);background:-webkit-linear-gradient(45deg,#029abd 0,#05c537 100%);z-index:1;-webkit-box-shadow:0 1px 5px rgba(0, 0, 0, 0.35);-moz-box-shadow:0 1px 5px rgba(0, 0, 0, 0.35);box-shadow:0 1px 5px rgba(0, 0, 0, 0.35);}
.goomwhats{color:#444;padding:5px 15px;background-color:white;font-size:14px;display:flow-root}
.goomwhats a{color:#1856c7}
.boxmsg{margin:8px 0 0;float:left;width:74%;display:block}
.goophone{position:absolute;right:45px;top:10px;font-size:13px;z-index:10}
.goophone a{color:#e6f9d2;margin-left:15px}
.goophone a svg,a.close-chat svg{width:16px;height:auto;fill:#e6f9d2}
.jamwa{display:block;float:right;font-size:11px;color:#717171}
.jamwa div{display:inline-block}
#btn-chat{float:right;margin-top:15px}
.first-msg{background-color:#e6ddd4;position:relative;padding:20px 20px 20px 10px}
.first-msg::before{display:block;position:absolute;content:"";left:0;top:0;height:100%;width:100%;z-index:0;opacity:.08;background-image:url(https://goomsite.github.io/img/wa-min.webp)}
#tooltip:after,.box-msg:before{content:''}
.box-msg{background:#e4fec8;box-shadow:0 1px 5px rgba(0,0,0,.13);color:#333;font-size:14px;line-height:1.7;border-radius:0 7.5px 7.5px;position:relative;margin-left:30px;padding:10px 20px;z-index:1;display:inline-block}
.box-msg:before{position:absolute;border-width:17px;border-style:none solid solid none;border-color:#e4fec8 #e4fec8 transparent transparent;top:0;left:-16px}
.box-msg span{display:block}
.box-msg span.chat-nama{font-size:13px;line-height:18px;color:rgba(0,0,0,.4)}
.box-msg span.chat-cript{margin-bottom:5px}
#tooltip{text-align:center;color:#fff;background:#333;position:absolute;z-index:100;padding:10px 20px;border-radius:4px;font-size:90%;box-shadow:0 1px 10px rgba(0,0,0,.6)}
#tooltip i{display:inline-block;margin:5px}
#tooltip:after{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #333;position:absolute;left:50%;bottom:-10px;margin-left:-10px}
#tooltip.top:after{border-top-color:transparent;border-bottom:10px solid #333;top:-20px;bottom:auto}
#tooltip.left:after{left:10px;margin:0}
#tooltip.right:after{right:10px;left:auto;margin:0}
.formtamv *{outline:0;text-decoration:none}
.formtamv .focus{box-shadow:inset 0 0 0 1px #36c83f}
.formtamv label{position:relative;display:block;width:100%;margin:0;padding:0}
.formtamv label>input,.formtamv label>select,.formtamv label>textarea{position:relative;z-index:1;border:none;background:#f9f9f9;box-shadow:inset 0 0 0 1px rgba(0,0,0,.02),inset 1px 1px 5px rgba(0,0,0,.05);width:100%;border-radius:50px;padding:10px 20px 0}
.formtamv label>i{position:absolute;z-index:0;display:inline-block;vertical-align:top;width:40px;text-align:center;font-size:20px;height:auto;background:none;box-shadow:none;top:3px;left:0;color:rgba(0,0,0,.2)}
.formtamv label small{position:relative;display:block;margin-top:10px;z-index:3}
.formtamv label small>a.tooltip{margin-left:10px;font-size:20px;vertical-align:middle;display:inline-block;color:rgba(0,0,0,.4)}
.formtamv label small>a.tooltip:hover{color:rgba(0,0,0,.6)}
.formtamv label small a{font-weight:700}
.formtamv select::-ms-expand{display:none}
.formtamv select{-moz-appearance:none;-webkit-appearance:none;appearance:none}
.formtamv select option{font-size:18px;background:#edf8f5;color:rgba(0,0,0,.7);text-shadow:none}
.formtamv .nomor_whatsapp[type=number]::-webkit-inner-spin-button,.formtamv .nomor_whatsapp[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.nomor_whatsapp[type=number]{-moz-appearance:textfield}
.formtamv label> :focus{background:none}
.formtamv label textarea{min-height:20px;resize:none;margin-bottom:0}
.formtamv label .validasi{position:absolute;z-index:2;right:-30px;background:#36c83f;color:#fff;padding:5px 10px;border-radius:3px;font-size:80%;box-shadow:0 5px 10px rgba(0,0,0,.1);transition:.4s;visibility:hidden;opacity:0;display:inline-block!important}
.formtamv label .validasi.show{visibility:visible;opacity:1;bottom:100%}
.formtamv label .validasi:after{position:absolute;top:100%;right:10px;content:"";border:8px solid;border-color:#36c83f transparent transparent}
a.close-chat{position:absolute;top:10px;right:13px;color:#c3ffc7;font-size:18px;z-index: 10;}
.nime{position:absolute;display:block;width:10px;height:10px;border-radius:100%;background-color:#05d436;right:-2px;bottom:8px}
.nime:after,.nime:before{content:"";position:absolute;width:24px;height:24px;opacity:0;border-radius:100%;top:-8px;left:-8px;background:#05d436}
.nime:before{-webkit-animation:nime 2s ease-out infinite;animation:nime 2s ease-out infinite}
.nime:after{z-index:1;-webkit-animation:nime 2s .4s ease-out infinite;animation:nime 2s .4s ease-out infinite}
@-webkit-keyframes nime{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}
5%{opacity:1}
100%{opacity:0}}
@keyframes nime{0%{opacity:0;-webkit-transform:scale(0);transform:scale(0)}
5%{opacity:1}
100%{opacity:0}}
@keyframes showhide{from{transform:scale(.5);opacity:0}}
@keyframes showchat{from{transform:scale(0);opacity:0}}
.hide,.show{animation-name:showhide;animation-duration:1.5s;transform:scale(1);opacity:1}
@media screen and (max-width:480px){#whatsapp-chat{width:auto;left:5%;right:5%;font-size:80%}}
.postmeta a,.sidebar-wrapper{font-size:14px;overflow:hidden}
.hide{display:none}
.show{display:block}

Information : can be adjusted if the icon is enlarged
.nabil-live .svg{margin:0;position:absolute;top:0;padding:5px 8px;-webkit-border-radius:0 50px 50px 0;-moz-border-radius:0 50px 50px 0;border-radius:0 50px 50px 0;right:-10px;background-color:white;color:#31c73a;width:39px;height:39px;line-height:30px;overflow:hidden;text-align:center;z-index:10}
  • Still on EDIT HTML. Now we make the Whatsapp Chat button. Please put the code above </body>. you can adjust the location yourself in css.

  • 
    <div class='hide' id='whatsapp-chat'>
    <div class='home-chat'>
    <!-- Info Contact Start by bloggerbyte.net -->
    <div class='informasi'>
    <div class='info-avatar'><img alt='avatar' src='https://1.bp.blogspot.com/-kpjhY-o_YCg/XnV_BN6r2OI/AAAAAAAACdw/ghX2E8nUDpwrOyJ7VNi08okrvSSXcwjMwCLcBGAsYHQ/s1600/cs.png' title='avatar'/>
    <span class='nime'></span>
    </div>
    <div class='info-chat'>
    <span class='chat-label'>Admin</span>
    <span class='chat-text'>Welcome to Netralid Theme, if you have anything to ask please via our WhatsApp</span>
    </div>
    </div>
    <div class='goophone'>
    <a href='tel:+62 XXXXXXXXXX' title='call us'><svg viewBox='0 0 384 384'><path d='M353.188,252.052c-23.51,0-46.594-3.677-68.469-10.906c-10.719-3.656-23.896-0.302-30.438,6.417l-43.177,32.594 c-50.073-26.729-80.917-57.563-107.281-107.26l31.635-42.052c8.219-8.208,11.167-20.198,7.635-31.448 c-7.26-21.99-10.948-45.063-10.948-68.583C132.146,13.823,118.323,0,101.333,0H30.813C13.823,0,0,13.823,0,30.813 C0,225.563,158.438,384,353.188,384c16.99,0,30.813-13.823,30.813-30.813v-70.323C384,265.875,370.177,252.052,353.188,252.052z'></path>
    </svg></a>
    <a href='mailto:youemail@gmail.com' title='sent to mail'>
    <svg viewBox='0 0 512 512'>
    <path d='M10.688,95.156C80.958,154.667,204.26,259.365,240.5,292.01c4.865,4.406,10.083,6.646,15.5,6.646     c5.406,0,10.615-2.219,15.469-6.604c36.271-32.677,159.573-137.385,229.844-196.896c4.375-3.698,5.042-10.198,1.5-14.719     C494.625,69.99,482.417,64,469.333,64H42.667c-13.083,0-25.292,5.99-33.479,16.438C5.646,84.958,6.313,91.458,10.688,95.156z'></path>
    <path d='M505.813,127.406c-3.781-1.76-8.229-1.146-11.375,1.542c-46.021,39.01-106.656,90.552-152.385,129.885 c-2.406,2.063-3.76,5.094-3.708,8.271c0.052,3.167,1.521,6.156,4,8.135c42.49,34.031,106.521,80.844,152.76,114.115     c1.844,1.333,4.031,2.01,6.229,2.01c1.667,0,3.333-0.385,4.865-1.177c3.563-1.823,5.802-5.49,5.802-9.49V137.083     C512,132.927,509.583,129.146,505.813,127.406z'></path>
    <path d='M16.896,389.354c46.25-33.271,110.292-80.083,152.771-114.115c2.479-1.979,3.948-4.969,4-8.135     c0.052-3.177-1.302-6.208-3.708-8.271C124.229,219.5,63.583,167.958,17.563,128.948c-3.167-2.688-7.625-3.281-11.375-1.542     C2.417,129.146,0,132.927,0,137.083v243.615c0,4,2.24,7.667,5.802,9.49c1.531,0.792,3.198,1.177,4.865,1.177     C12.865,391.365,15.052,390.688,16.896,389.354z'></path>
    <path d='M498.927,418.375c-44.656-31.948-126.917-91.51-176.021-131.365c-4-3.26-9.792-3.156-13.729,0.24     c-9.635,8.406-17.698,15.49-23.417,20.635c-17.563,15.854-41.938,15.854-59.542-0.021c-5.698-5.135-13.76-12.24-23.396-20.615     c-3.906-3.417-9.708-3.521-13.719-0.24c-48.938,39.719-131.292,99.354-176.021,131.365c-2.49,1.792-4.094,4.552-4.406,7.604     c-0.302,3.052,0.708,6.083,2.802,8.333C19.552,443.01,30.927,448,42.667,448h426.667c11.74,0,23.104-4.99,31.198-13.688     c2.083-2.24,3.104-5.271,2.802-8.323C503.021,422.938,501.417,420.167,498.927,418.375z'></path>
    </svg>
    </a>
    </div>
    </div>
    <div class='first-msg'>
    <div class='box-msg'>
    <span class='chat-nama'>Netralid</span>
    <span class='chat-cript'>Hi there!</span>
    <span>Hello, Can I help you?</span>
    <div class='jamwa'>
    <div id='hours'></div>:<div id='minutes'></div>
    </div>
    </div>
    </div>
    <div class='goomwhats'>
    <div class='poptamv' id='konsultasi'>
    <div class='formtamv formWA'>
    <div class='boxmsg'>
    <label><textarea class='pesan wajib' placeholder='Type a message'></textarea></label>
    </div>
    <div id='btn-chat'>
    <a class='submit' href='javascript:void;'>
    <svg height='24' viewBox='0 0 24 24' width='24'><path d='M1.101 21.757L23.8 12.028 1.101 2.3l.011 7.912 13.623 1.816-13.623 1.817-.011 7.912z' fill='#263238' fill-opacity='.45'></path></svg></a>
    </div>
    </div>
    </div>
    </div>
    <a class='close-chat' href='javascript:void' title='close'><svg viewBox='0 0 413.348 413.348'><path d='m413.348 24.354-24.354-24.354-182.32 182.32-182.32-182.32-24.354 24.354 182.32 182.32-182.32 182.32 24.354 24.354 182.32-182.32 182.32 182.32 24.354-24.354-182.32-182.32z'></path></svg></a>
    </div>
    <div class='nabil-live'>
    <div class='box-live'>
    <a href='javascript:void' title=''>
    <span>Chat WhatsApp</span>
    <span class='svg'>
    <svg viewBox='0 0 418.135 418.135'>
    <path d='M198.929,0.242C88.5,5.5,1.356,97.466,1.691,208.02c0.102,33.672,8.231,65.454,22.571,93.536   L2.245,408.429c-1.191,5.781,4.023,10.843,9.766,9.483l104.723-24.811c26.905,13.402,57.125,21.143,89.108,21.631   c112.869,1.724,206.982-87.897,210.5-200.724C420.113,93.065,320.295-5.538,198.929,0.242z M323.886,322.197   c-30.669,30.669-71.446,47.559-114.818,47.559c-25.396,0-49.71-5.698-72.269-16.935l-14.584-7.265l-64.206,15.212l13.515-65.607   l-7.185-14.07c-11.711-22.935-17.649-47.736-17.649-73.713c0-43.373,16.89-84.149,47.559-114.819   c30.395-30.395,71.837-47.56,114.822-47.56C252.443,45,293.218,61.89,323.887,92.558c30.669,30.669,47.559,71.445,47.56,114.817   C371.446,250.361,354.281,291.803,323.886,322.197z' style='fill:#7AD06D;'></path><path d='M309.712,252.351l-40.169-11.534c-5.281-1.516-10.968-0.018-14.816,3.903l-9.823,10.008   c-4.142,4.22-10.427,5.576-15.909,3.358c-19.002-7.69-58.974-43.23-69.182-61.007c-2.945-5.128-2.458-11.539,1.158-16.218   l8.576-11.095c3.36-4.347,4.069-10.185,1.847-15.21l-16.9-38.223c-4.048-9.155-15.747-11.82-23.39-5.356   c-11.211,9.482-24.513,23.891-26.13,39.854c-2.851,28.144,9.219,63.622,54.862,106.222c52.73,49.215,94.956,55.717,122.449,49.057   c15.594-3.777,28.056-18.919,35.921-31.317C323.568,266.34,319.334,255.114,309.712,252.351z' style='fill:#7AD06D;'></path>
    </svg>
    </span>
    </a>
    </div>
    </div>
    

    Note: Change The Following
    -Change your logo
    -Admin Name
    -Admin Text
    -WhatsApp Number with your numbers, respectively,
    -Please Change your Email
  • Now add the following JS script just avobe </body> code

  • <script type='text/javascript'>
    //<![CDATA[
    function kirimWA(e){var t=!0;if(jQuery("#"+e+" .wajib").each(function(){""!=$.trim(jQuery(this).val())&&"default"!=$.trim(jQuery(this).val())||jQuery(this).addClass("focus")}),jQuery("#"+e+" .wajib").each(function(){return""==$.trim(jQuery(this).val())?(t=!1,jQuery(this).parents("label").find(".validasi").addClass("show"),jQuery(this).focus(),!1):"default"==$.trim(jQuery(this).val())?(t=!1,jQuery(this).parents("label").find(".validasi").addClass("show"),!1):void 0}),t===!0){var i="",a="https://web.whatsapp.com/send";if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)&&(a="whatsapp://send"),"konsultasi"===e)var s=62,r=8123456789,n="Admin",o="Hello",l=(jQuery("#"+e+" .title-content").text(),jQuery("#"+e+" .pesan").val()),i=a+"?phone="+s+r+"&text=*"+o+" "+n+"...* %0A%0A"+l;jQuery(this).attr("href",i);var u=960,h=540,c=Number(screen.width/2-u/2),d=Number(screen.height/2-h/2),y=window.open(this.href,"","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=1, copyhistory=no, width="+u+", height="+h+", top="+d+", left="+c);return y.focus(),!1}}window.addEventListener("load",function(){var e=jQuery("title").text();jQuery(".waFix").on("click",function(){jQuery(this).removeClass("show"),jQuery("title").text(e)}),jQuery(".formWA input, .formWA textarea").on("keypress",function(){13===event.keyCode&&jQuery(this).parents(".formWA").find(".submit").trigger("click")}),jQuery(".formWA .wajib").each(function(){title=jQuery(this).attr("placeholder"),label=jQuery(this).parents("label"),jQuery('<span class="validasi">(Required)</span>').appendTo(label)}),jQuery(".formWA .wajib").keyup(function(){""!=jQuery(this).val()&&(jQuery(this).removeClass("focus"),jQuery(this).parents("label").find(".validasi").removeClass("show"))}),jQuery(".formWA select").change(function(){jQuery(this).removeClass("focus"),jQuery(this).parents("label").find(".validasi").removeClass("show")})},!1),jQuery(".formWA .submit").on("click",function(){return kirimWA(jQuery(this).parents(".poptamv").attr("id")),!1}),$(document).on("click",".close-chat",function(){$("#whatsapp-chat").addClass("hide").removeClass("show")}),$(document).on("click",".nabil-live",function(){$("#whatsapp-chat").addClass("show").removeClass("hide")});
    //]]>
    </script>

    Warning — Change Your Country Code +62 and Whatsapp No. 8123456789
  • Then Save Theme

  • Live DEMO - Click Here

    Donate
    Treat me to a glass of coffee
    Ok, I get it