How To Show a Visit Source Message for Visitors in Blogger

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)

Preview

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

<div id='youcamefrombywidgets4free'>
<button class='close' onclick='document.getElementById(&apos;youcamefrombywidgets4free&apos;).style=&apos;display:none;&apos;'>X</button>
<script>
var url = document.referrer;
var arr = url.split(&quot;/&quot;);
var result = arr[0] + &quot;//&quot; + arr[2];
document.write(&quot;I've just come from : <br/><div style='margin-top:10px;text-align:center;width: 100%;color: #3eff3b;'>&quot;+result+&quot;</div>&quot;)
</script>
</div>
<style>
#youcamefrombywidgets4free {
border:2px solid #ccc;
width:25%;
height:50px;
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(&quot;youcamefrombywidgets4free&quot;);
function youcame(){
var k=setTimeout(function(){ popup.style.display=&#39;block&#39;;popup.className+=&#39;animated bounceInDown&#39;; }, 2500);
var kh=setTimeout(function(){ popup.className+=&#39;animated bounceOut&#39;; }, 8000);
}
if (document.referrer==&quot;&quot; || result==&quot;https://bloggerwidgets4free.blogspot.com&quot;) {
popup.style.display=&#39;none&#39;;
}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.