إضافة رسالة ترحيب بزر عائم تحوي على زرين إتصــل بنــا و تابعنــا

إضافة رسالة ترحيب بزر عائم

تركيب الأضافة

<name="txt" rows="100" wrap="VIRTUAL" cols="55">
<b:if cond="data:blog.pageType == "item"">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" />
<a onclick="showblogmahir()" class="mahir" href="#"><div class="fa fa-bell">
</div>
</a>
<div class="blogmahir">
<div class="content">
<div style="text-align: center;">
<p>
مرحبا بك في موقعنا</p>
<br />
<a class="mahir1" href="#"><div class="fa fa-envelope">
  اتصل بنا</div>
<a class="mahir1" href="#"><div class="fa fa-users">
  تابعنا </div>
</a></a></div>
<div onclick="hideblogmahir()" class="hide fas fa-times">
</div>
</div>
<style type="text/css">
.blogmahir{width:300px;    z-index: 999;
border-radius:4px;height:250px;overflow:hidden;background:#0f6dce;position:fixed;top:-300px;right:30px;transition:1s;}.blogmahir .content{width:300px;    z-index: 999;
padding:20px;box-sizing:border-box;float:right;color:white;}.hide{position:absolute;z-index:9999;top:10px;right:14px;font-size:20px;color:black;opacity:0.7;transition:0.3s;cursor:pointer;}.hide:hover{transform:rotate(90deg);opacity:1;}.mahir{background:#0f6dce;color:#fff;left: 4px;bottom:25px;cursor:pointer;z-index:99999;position:fixed;font-size:24px;margin:10px 10px 0;padding:10px;border-radius:3px;}.mahir1{display:block;background:#fff;color:#111;font-size:14px;margin:10px 10px 0;padding:10px;border-radius:3px;}
</style>
<script type="text/javascript">
var blogmahir = document.getElementsByClassName("blogmahir")[0];function showblogmahir(){blogmahir.style.top = "20px";}function hideblogmahir(){blogmahir.style.top = "-300px";}
</script></div></b:if></name="txt">

التعديلات التي يجب عليك عملها