عمل بنر إعلاني إحترافي لموقعك في دقائق و بدون أي خبرة

اليوم مع درس جديد سأطرح لكم طريقة تركيب صفحة خاصة بتحديثات تطبيق مدونتك والصفحة تمتاز بعدة مميزات كتصميمها الأنيق وتجاوبها وتوفرها على أزرار التحميل للاندرويد والايفون ويمكنك المعاينة لتتفحص الصفحة وان اعجبك هذا الدرس فلا تنسى وضع تعليق تحفيزي يتضمن رأيك من أجل التحفيز ولكي نقدم اكثر ما في جهدنا من اجل تقديم الأفضل.

معاينة

اضغط هنا لمعاينة الأضافة

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

1. أول خطوة عليك الذهاب الى انشاء صفحة جديدة.
2. ثم عليك الانتقال من وضع تأليف الى HTML كما في الصورة.

1. ثم الصق بها الكود التالي :

<div dir="rtl" style="text-align: right;" trbidi="on">صفحة تحديثات تطبيق المدونة<br />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" rel="stylesheet"></link>
<style>
.blog-logo img {
    width: 30%;
    height: 30%;
    border-radius: 50%;
}
.blog-app {
    background: url(http://news.portech.co.uk/wp-content/uploads/2015/11/sdk-android-ios.png) no-repeat center;
}
.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: 100%;
    display: inline-block;
    float: right;
    text-align: center;
    margin: 15px 0px 0px 0px;
    border-radius: 30px;
    padding: 10px 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: 150px;
    HEIGHT: 25px;
    line-height: 25px;
    text-align: center;
    margin-right: -85px;
    margin-top: -34px;
    font-size: 13px;
    background: #02ADD4;
    border-radius: 4px;
    color: #FFFFFF;
    opacity: 0;
}
.download-app a:hover .tooltip {
    opacity: 1;
    z-index: 9999;
}
   .post-body h3 {
   margin: 6px 0px 10px 2px;
    font-size: 20px;
    line-height: 42px;
    border-radius: 5px;
    color: #ffffff;
    background-color: rgba(0,0,0,0.8);
    border-top: 3px solid #ff5722;
    border-bottom: 3px solid #ff5722;
}
</style>
<br />
<div class="blog-app">
<div class="blog-logo">
<center>
<a href="http://h2shtag.blogspot.com/"><img src="http://b.top4top.net/p_302v50uu1.png" /></a></center>
<div>
<div class="blog-app-text">
<h3 class="blog-app-title">
يمكنك الأن تحميل اخر اصدار للتطبيق من هنا</h3>
<div class="blog-app-description">
اخر اصدار للتطبيق V1
</div>
</div>
<div class="download-app">
<a class="android" href="http://up.top4top.net/downloadf-302hk0xq1-apk.html"><i class="fa fa-android"></i><span class="tooltip">حمل الآن ! مذا تنتظر ؟</span></a>
<a class="ios" href="#"><i class="fa fa-apple"></i><span class="tooltip">قريبا على iOS</span></a>
</div>
</div>
</div>
</div>
<div dir="rtl" style="position: fixed; text-align: center;" trbidi="on">
<a class="Mahmoud" href="http://h2shtag.blogspot.com/" rel="dofollow" target="_blank"><i aria-hidden="true" class="fa fa-code"></i> تصميم : مدونة هاشتاج للمعلوميات</a>
</div>
</div>

1. ثم عدل عليها كما تريد.
2. ثم قم بنشر الأضافة ومبروك عليك صفحة تحديثات تطبيق المدونة.