How To Show a Visit Source Message for Visitors Using JS and CSS

How To Show a Visit Source Message for Visitors Using JS and CSS

In this post, i will share with you a beautiful widget for blogger exclusively ,this widgets is a message that contains the URL of referrer website, if you search about a page in google and you visit it ,a message will show inform the visitor that he was on google before visiting this website...you have still problems,let me show you a preview of this widgets :(This link is shrinked by T.co using twitter)
 

 

If you like it, let me show you how to add it in your blogger or website *_*
Step 1: Copy paste the code bellow before the </body> tag

<div id='youcamefrom'>
<button class='close' onclick='document.getElementById(&apos;youcamefrom&apos;).style=&apos;display:none;&apos;'>X</button>
<script>
var url = document.referrer;
var arr = url.split("/");
var result = arr[0] + "//" + arr[2];
document.write("I've just come from : <br/><div style='margin-top:10px;text-align:center;width: 100%;color: #3eff3b;'>"+result+"</div>")
</script>
</div>
<style>
#youcamefrom {
border:2px solid #ccc;
width:25%;
height:70px;
position:fixed;
top:150px;
left:7px;
color:#fff;
padding:10px;
background-color:#3683ff;
-webkit-box-shadow: -5px 0px 19px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -5px 0px 19px 0px rgba(0,0,0,0.75);
box-shadow: -5px 0px 19px 0px rgba(0,0,0,0.75);
border: 1px solid #3683ff;
font-size: 14px;
font-family: Arial;
font-weight:bold;
display:none;
z-index: 9999999;
}
.close
{
position:absolute;
background:transparent;
color:#fff;
font-size:20px;
cursor:pointer;
right:1px;
top:1px;
border:0;
transition:.7s
}
.close:hover
{
color:red;
transition:.7s
}
.animated {
-webkit-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.bounceOut {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
@-webkit-keyframes bounceInDown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}

60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}

75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}

90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}

to {
-webkit-transform: none;
transform: none;
}
}

@keyframes bounceInDown {
from, 60%, 75%, 90%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
}

0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}

60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}

75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}

90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}

to {
-webkit-transform: none;
transform: none;
}
}

.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
@-webkit-keyframes bounceOut {
20% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}

50%, 55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}

to {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
}

@keyframes bounceOut {
20% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9);
}

50%, 55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}

to {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3);
}
}

.bounceOut {
-webkit-animation-name: bounceOut;
animation-name: bounceOut;
}
</style>
<script>
var popup = document.getElementById("youcamefrom");
function youcame(){
var k=setTimeout(function(){ popup.style.display='block';popup.className+='animated bounceInDown'; }, 2500);
var kh=setTimeout(function(){ popup.className+='animated bounceOut'; }, 8000);
}
if (document.referrer=="" || result=="https://giveawaysnetworks.com") {
popup.style.display='none';
}else
{
window.onload=setTimeout(function(){ youcame(); }, 1000);
}
</script>


Change The Yellow with your text , The Red with your Blog URL , the The Blue with the time before the message show after the page load (1 Second = 1000) and The Green with time before the message close or hide(1 Second = 1000).
Step 2: Click Save Template

that's all, if you have a question,problem,feedback you can put it in comments box.



Subscribe to our Newsletter

Did you find this post useful?
67%
33%
Comments
Edward
Edward

Thank You

Giveaways Networks
Your welcome
We are moving to a new domain .net and the old one .com will not be available in the future !!.
You will be redirected to this link now : https://giveawaysnetworks.net/Posts/Details/How-To-Show-a-Visit-Source-Message-for-Visitors-Using-JS-and-CSS