صندوق الهدايا Javascript

لوحة تحكم بلوجر
إضافة أداة
HTML/Javascript
يمكنك المعاينه من هنا

<div class="widget-content">
<div class="Gifts_tuhfawebsrev">
<div class="Gifts_tuhfawebsrev_header">
    أغتنم الفرصه
  </div>
<div class="Gifts_tuhfawebsrev_ArticleBox">
    <div class="Gifts_tuhfawebsrev_content">
      <div class="Gifts_tuhfawebsrev_tagline">
هدايا عديدة<svg class="svg-inline--fa fa-gift fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="gift" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M488 192h-64.512C438.72 175.003 448 152.566 448 128c0-52.935-43.065-96-96-96-41.997 0-68.742 20.693-95.992 54.15C226.671 50.192 199.613 32 160 32c-52.935 0-96 43.065-96 96 0 24.566 9.28 47.003 24.512 64H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h8v112c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V320h8c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zm-208-32c24-56 55.324-64 72-64 17.645 0 32 14.355 32 32s-14.355 32-32 32h-72zM160 96c16.676 0 48 8 72 64h-72c-17.645 0-32-14.355-32-32s14.355-32 32-32zm48 128h96v184c0 13.255-10.745 24-24 24h-48c-13.255 0-24-10.745-24-24V224z"></path></svg>

</div>
<p class="Gifts_tuhfawebsrev_creative">
أحصل<b>على العديد من الهدايا المجانية</b> المقدمة من مدونة تحفه | لخدمات الويب، هدايا رائعه تساعدك في التصميم وتطوير موقعك!</p>
</div>
<div class="Gifts_tuhfawebsrev_cta">
      <a class="btn btn-gifts" href="/p/page25.html" data-toggle="tooltip" data-placement="top" title="" data-original-title="هدايا مميزة بانتظاركـ">
       صفحة الهدايا 
      <svg class="svg-inline--fa fa-gift fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="gift" role="img" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M488 192h-64.512C438.72 175.003 448 152.566 448 128c0-52.935-43.065-96-96-96-41.997 0-68.742 20.693-95.992 54.15C226.671 50.192 199.613 32 160 32c-52.935 0-96 43.065-96 96 0 24.566 9.28 47.003 24.512 64H24c-13.255 0-24 10.745-24 24v80c0 13.255 10.745 24 24 24h8v112c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V320h8c13.255 0 24-10.745 24-24v-80c0-13.255-10.745-24-24-24zm-208-32c24-56 55.324-64 72-64 17.645 0 32 14.355 32 32s-14.355 32-32 32h-72zM160 96c16.676 0 48 8 72 64h-72c-17.645 0-32-14.355-32-32s14.355-32 32-32zm48 128h96v184c0 13.255-10.745 24-24 24h-48c-13.255 0-24-10.745-24-24V224z"></path></svg>
    </a></div>
</div>
</div>
<style>
.Gifts_tuhfawebsrev {
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzi6PWP6sXT506mwgBUCp8XaBK8DQSIYxsiqHmt24VdR2JYJur3Nhz-q_AxoJX7O9c8U_oE9oZbvmk0G9utcMWpbWSMpywzYJQPm0MWjetrULM6pNQuYAmTBLmBb05c4dAaS8raRzvytw/s400/%25D8%25AE%25D9%2584%25D9%2581%25D9%258A%25D8%25A7%25D8%25AA-%25D9%2584%25D9%2584%25D8%25AA%25D8%25B5%25D9%2585%25D9%258A%25D9%2585-hd+%252856%2529.jpg) 50% no-repeat;
    background-size: cover;
    color: #fff;
    text-align: center;
    padding: 25px 20px 20px;
    
}
svg.svg-inline--fa.fa-gift.fa-w-16 {
    margin-right: 10px;
    margin-left: 10px;
}
.Gifts_tuhfawebsrev_header {
    display: inline-block;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    border:1px solid #d9534f;
    border-radius: 12px!important;
    padding: 5px 20px;
}
.Gifts_tuhfawebsrev_ArticleBox {
    position: relative;
    padding: 10px 20px 20px;
}
.Gifts_tuhfawebsrev_content {
    text-align: center;
    line-height: 1.5;
    padding-top: 10px;
}
.Gifts_tuhfawebsrev_icon.glyphicon.glyphicon-gift {
    color: #d9534f;
    margin-right: 8px;
}
.Gifts_tuhfawebsrev_tagline {
    font-weight: 700;
    font-size: 25px;
    padding-bottom: 5px;
}
p.Gifts_tuhfawebsrev_creative {
    margin-bottom: 0;
    text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.Gifts_tuhfawebsrev_cta {
    text-align: center;
    padding-top: 30px;
    width: 100%;
}
.btn.btn-gifts {
    display: inline-block;
    background-color: #3993c3;
    font-weight: 400;
    padding-top: .75em;
    padding-bottom: .75em;
    padding-right: 18px;
    padding-left: 12px;
    border-radius: 2px!important;
    margin: 0;
    color: #FFF;
    letter-spacing: 1px;
}
.Gifts_tuhfawebsrev_cta i.glyphicon.glyphicon-gift {
    margin-right: 95px;
}
.popover {
    color: #000;
    text-align: center;
}
.popover-title{
    background-color: #dddfe2;
    border-bottom: 1px solid #aaa;
    border-radius: 5px 5px 0 0!important;
    }
.Gifts_tuhfawebsrev {height: 622px;}

</style>

0 تعليقات