NETRAL'ID

NETRAL'ID

Do it. Click the button below to convert your link

Featured Post

Recommended

Affiliate Marketing: Staying Away From Scams

Many of us are upset and frustrated with our current jobs. The low pay and sense of being undervalued drive many of us to dream of our ow...

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

السبت، 8 أغسطس 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.
Donate
Treat me to a glass of coffee
Ok, I get it