Widget HTML Atas

How to Install Rainbow Effect Subscription Box on Blogger



Greetings friend bloggers, on this occasion I will share a tutorial to create a  subscription box on a blog. What makes this tutorial special is the rainbow effect. How do you suggest the rainbow effect? Just watch this tutorial carefully.

From the picture above you might guess if the subscription box is just like that, and don't get me wrong! not just like the picture above you know. Subscribe box there is a rainbow effect that is the border will move which consists of 5 colors namely red, yellow, green, in the blue sky, time.

This tutorial is very easy, friends for you who are still beginners, God willing, will be easy to understand. Immediately, here are the steps.

Easy Ways to Make a Rainbow Effect Subscribe Box


1. The first step is to open my friend, blogger.com, then select Theme and click Edit HTML.

2. If you have searched for the code ]]> <b: skin>, to make it easier to find, use the CTRL + F hotkeys. If you have copied the code below and paste it directly above the code ]]> <b: skin> earlier.



/* Subscribe Box Efek Rainbow from Konten Ajaib */
@keyframes rotate{100%{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}
.rainbow{position:relative;z-index:0;overflow:hidden;padding:3px}.rainbow::before{content:'';position:absolute;z-index:-2;left:-50%;top:-50%;width:200%;height:200%;background-color:#2ecc71;background-repeat:no-repeat;background-size:50% 50%,50% 50%;background-position:0 0,100% 0,100% 100%,0 100%;background-image:linear-gradient(#2ecc71,#2ecc71),linear-gradient(#fbb300,#fbb300),linear-gradient(#e74c3c,#e74c3c),linear-gradient(#3498db,#3498db);animation:rotate 8s linear infinite}.rainbow::after{content:'';position:absolute;z-index:-1;left:5px;top:5px;width:calc(100% - 10px);height:calc(100% - 10px);background:#fff}
#HTML99{padding:0}#HTML99 h2{color:#222;padding:0}#HTML99 h2:before{display:none}.subscriber-wrapper{color:#222;line-height:20px;margin:0;padding:20px}.subscribe-form{clear:both;display:block;margin:10px auto;overflow:hidden}.subscriber-wrapper p{margin:0;font-size:14px}form.subscribe-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}.subscribe-css-email-field{background:#fff;color:#222;margin:0 0 18px;padding:12px;width:100%;border:1px solid rgba(0,0,0,0.1);outline:0;font-size:14px;text-indent:10px;line-height:20px;border-radius:3px;transition:all .6s}.subscribe-css-email-field:hover,.subscribe-css-email-field:focus{border-color:rgba(0,0,0,0.3)}.subscribe-css-button{background:#2c3e50;color:#fff;cursor:pointer;font-weight:500;padding:7px;text-transform:none;width:100%;border:none;font-size:16px;border-radius:3px;transition:all .3s}.subscribe-css-button:hover{background:#34495e}


3. Click Save Theme.

4. Next, we move on to the Layout and create a new gadget to select the type of HTML / Javascript. Enter the following code into it, just leave the title field blank.


<div class="rainbow">
<div id="subscribe-css">
<div class="subscriber-wrapper">
<h2>Newsletter</h2>
<p>If you like articles on this blog, please subscribe for free via email.</p>
<div class="subscribe-form">
<form action='https://feedburner.google.com/fb/a/mailverify?uri=Stressthinking' class="subscribe-form" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=Stressthinking', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="seoindzign" />
<input name="loc" type="hidden" value="en_US" />
<input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="Enter your email"/>
<input class="subscribe-css-button" title="" type="submit" value="Submit" />
</form>
</div>
</div></div></div>
</div>

5. Click Save and Finish.

The result will be like the following gif image, cool or not? Cool, wow.

No comments for "How to Install Rainbow Effect Subscription Box on Blogger"