أضافة أداة تطبيق الموقع بشكلين مختلفين.

إعلان أدسنس

آخر المواضيع

breaking/قوالب بلوجر/9
مقالات

الجمعة، 18 أغسطس، 2017

8:42 ص

تكبير النص تصغير النص أعادة للحجم الطبيعي
السلام عليكم معكم فيصل من مدونة فيصل ويب

  , يوم لدينا اصافة رائعة ،  و هي مميزة  لاتحتاج لوصف ، و هي أداةتطبيق الموقع بشكلين مختلفين  
و هي أصافة أدا كان لك تطبيق على متجر غوغل ستور او على اب ستور و تريد مشاركته مع جمهورك 
و دون أن أطيل عليك أتركك مع معاينة
معاينة



     طريقة التركيب 

ماعليك سوى نسخ هدا الكود و توجه الى التخطيط 
وتختار المكان الدي يناسبك


<div class="widget-content">
<div id="lebbihi_1">


<img src="https://c.top4top.net/p_593114hp1.png">

<p>حمل تطبيقنا على الاندرويد</p>

<div class="lebbihi_2">
 <a href="#">تحميل<i class="fa fa-android" aria-hidden="true"></i></a>

</div>
</div>




<style type="text/css">
 #lebbihi_1{
    height: 150px;
    background: #fff;
    text-align: center;

 }
.lebbihi_2 a{
       color: #ffffff;
    background: #30506d;
    padding: 4px 10px;
    border-radius: 3px;
    cursor: not-allowed;
    margin-bottom: -2px;
}
.lebbihi_2 i {
    background: #ffffff;
    color: #3077b8;
    border-radius: 50%;
    height: 20px;
    width: 20px;
    line-height: 20px;
    font-size: 14px;
    margin-top: 2px;
}

#lebbihi_1 p{
  color: #30506d;
    margin: 0 0 10px;
}

#lebbihi_1 img{
  width: 55px !important;
    border: 1px solid #2bca75;
    text-align: center;
    overflow: hidden;
    margin: 0 auto 21px;
    background: #ffffff;
    border-radius: 50%;
    line-height: 33px;
    margin-bottom: 10px;
    color: #fff;
}

</style>
</div>
<div class="widget-content">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" rel="stylesheet">
<style>
.blog-logo img {
    width: 30%;
    height: 30%;
    border-radius: 20%;
}
.blog-app {
    background: url(#);
}
.blog-app-text {
    text-align: center;
}
.blog-app-title {
    background: #3598DC;
    color: #fff;
    width: 50%;
    display: inline-block;
    padding: 3px;
    text-align: center;
}
.blog-app-description {
    padding: 5px 2px;
    color: #4f4f4f
}
.download-app {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.download-app a {
    width: 97%;
    display: inline-block;
    float: right;
    text-align: center;
    margin: 3px;
    border-radius: 30px;
    padding: 4px 0;
    color: #fff;
}
.android {
    background: #74C043;
}
.ios {
    background: #808080;
}
.tooltip {
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    -ms-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
    position: absolute;
    display: inline-block;
    width: 130px;
    HEIGHT: 23px;
    line-height: 23px;
    text-align: center;
    margin-right: -71px;
    margin-top: -30px;
    font-size: 13px;
    background: #02ADD4;
    border-radius: 2px;
    color: #FFFFFF;
    opacity: 0;
}
.download-app a:hover .tooltip {
    opacity: 1;
    z-index: 9999;
}
</style>
<div class="blog-app">
<div class="blog-logo">
  <center><a href="http://www.fayssalweb.net"><img src="https://d.top4top.net/p_594lpe3w1.jpg"></a></center>
<div>
<div class="blog-app-text">
<h3 class="blog-app-title">حمل تطبيق المدونة</h3>
<p class="blog-app-description">
حمل تطبيق مدونتنا على هاتفك لتتوصل بكل جديدنا، وحتى لا يفوتك اي شيء ، فماذا تنتظر !
</p>
</div>
<div class="download-app">
<a class="android" target="_blank" href="#"><i class="fa fa-android"></i><span class="tooltip">تحميل على الاندرويد</span></a>
</div>
</div></div></div>
</div>
  1. ممكن مساعدة حول الخط لمستعمل في هذا اللوجو من فضلك
    https://3.bp.blogspot.com/-ceRJp-iWnV8/VyUCk6HUxpI/AAAAAAAAGM8/fP_qNFIcWZEOFJ8uJXmhsuRiq2KSwxZSwCK4B/s1600/logo-JW.png

    ردحذف
    الردود
    1. الأسف أخي لكن لاأعرف الأسمه

      حذف

مقالات