NETRAL'ID

Wednesday, 2 September 2020

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

Nikami September 02, 2020 Comment

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

Nikami August 11, 2020 Comment

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


: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