اضافة واجهه قالب احترافية v1


اهلا بكم اصدقائي الكرام😉. بعد طول انتظار وكثرة الطلبات على واجهة مدونتنا الاولى والتى هى فى الاصل لقالب فوركس ونشرها صاحبها ولكن يوجد بها بعض الاخطاء وايضا لم تعمل عند بعض الاخوة ولذلك طلبوها منى. بناء على ذلك قمت بنشر هذة التدوينة لكى يستفيد الجميع اترككم مع المعاينة 👈 وطريقة الاضافة👇

*/ مميزات الواجهة
1- خلفية رائعة والوان جذابة ومتناسقة
2- سهلة جدا فى التعديل والتعامل معها

3- متجاوبة مع كل الاجهزة


avatar طريقة التركيب
الخطوة الاولى

  1. توجه الى القالب من خلال تحرير html
  2. ابحث عن <body> واضف هذا الكود بعده مباشرة

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<link href='https://cdn.rawgit.com/MidoOops/waghav1/cn1gk/1.css' rel='stylesheet'/>
<link href='https://cdn.rawgit.com/MidoOops/waghav1/cn1gk/2.css' rel='stylesheet'/>
<link href='https://cdn.rawgit.com/MidoOops/waghav1/cn1gk/3.css' rel='stylesheet'/>
<link href='https://cdn.rawgit.com/MidoOops/waghav1/cn1gk/4.css' rel='stylesheet'/>
<link href='https://cdn.rawgit.com/MidoOops/waghav1/cn1gk/5.css' rel='stylesheet'/>
<link href='https://cdn.rawgit.com/MidoOops/waghav1/cn1gk/6.css' rel='stylesheet'/>
<link href='https://cdn.rawgit.com/MidoOops/waghav1/cn1gk/7.css' rel='stylesheet'/>
<body data-offset='200' data-spy='scroll' data-target='.primary-navigation'>
<a id='top'></a>
<!-- Slider Section -->
<div class='slider-section' id='photos-slider'>
<div class='slides-container'>
<!-- slide item 1 -->
<div class='slide-item'>
<img alt='Slide 1' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizoM8PPK1dwzyaT4ZWWFoboekTyUjWzYBrIxBqSiMZBgl2HMdkAf_5A7PIb1RIWNPG2Wkrh5uE_t0N84gaGwtCfuxgp_zonbJp1EYeD8QewmR7YANZFCmVoaFhRIVRCQs3Tt3_2uxdWcej/s1600/slide2.jpg'/>
<h2 class='slide-title' style='font-family:"Lobster",ge_ss_threeregular;    width: 440px;     height: 440px;'>
<span class='inner-circle' style='font-family:"Lobster",ge_ss_threeregular;    width: 340px;     height: 340px;'>
<style>
mido-web:hover {
    background-color: #e64c3d;
    color: #fff;
}
.slider-content {
    position: initial !important;
    top: 0;
    height: 100%;
    width: 100%;
}


</style>
<span style=' font-size:45px;  '>مرحبا</span>
<span style=' font-size:45px;  '>بك انا </span>
<span style=' font-size:45px;  '>ميدو</span>
<a href='/search/?max-results=12'>
<div class='service-box-inner animated slideInLeft'>
<div class='col-md-4 pull-right col-sm-5'>
<a href='/search/?max-results=12' id='mido-web' style='  width: 120px;     height: 120px;     background-color: #ebebeb;     border: 7px solid #fff;     border-radius: 50%;     text-align: center;     line-height: 115px;     font-size: 36px;     color: #666;     display: inline-block;     position: relative;     -webkit-transition: color 0.3s;     -moz-transition: color 0.3s;     transition: color 0.3s;     margin-right: 94px;                                                        margin-top: 6px;'>أدخل</a>
</div>
</div>
</a>
</span>
</h2>
<div class='slider-content'>
<div class='col-md-6 left'>
<h3 class='slide-sub-title wow fadeInDown' data-wow-delay='0s' data-wow-duration='1s' style='font-family:"Lobster",ge_ss_threeregular;'>
<span>أنا مصمم قوالب</span>
<span>بلوجر محترف </span>
<span>اسمى ميدو</span>
</h3>
</div>
<div class='col-md-6 right'>
<h3 class='slide-sub-title wow fadeInDown' data-wow-delay='0s' data-wow-duration='1s' style='font-family:"Lobster",ge_ss_threeregular;'>
<span> كن مهووس </span>
<span>هوسنا هو سر ابداعنا </span>
</h3>
</div>
</div>
</div><!-- slide item 1 over -->
<!-- slide item 2 -->
<div class='slide-item'>
<img alt='Slide 2' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilCOe1w3Sf78R7SOQfiauAMogqFxtkhHozsPv3-sGjJTF77Obpacmb8iOfYMKyCEFBRqrxiSZMQzElrpvmoiX0EL6RzOu5xJ1IXQfJe0TchsPASsupPbtgz3yNwrWjuUqOO7Y_VxEYvUmw/s1600/slide1.jpg'/>
<h2 class='slide-title' style='font-family:"Lobster",ge_ss_threeregular;'>
<span class='inner-circle'>
<span>اتمنى ان</span>
<span>يعجبكم</span>
<span>القالب </span>
</span>
</h2>
<div class='slider-content'>
<div class='col-md-6 left'>
<h3 class='slide-sub-title wow fadeInDown' data-wow-delay='0s' data-wow-duration='1s' style='font-family:"Lobster",ge_ss_threeregular;'>
<span>أضغط على</span>
<span>كلمة دخول</span>
<span>للمعاينة</span>
</h3>
</div>
<div class='col-md-6 right'>
<h3 class='slide-sub-title wow fadeInDown' data-wow-delay='0s' data-wow-duration='1s' style='font-family: "Lobster",ge_ss_threeregular; '>
<span>كن مهووس</span>
<span>هوسنا هو سر ابداعنا</span>
</h3>
</div>
</div>
</div><!-- slide item 2 over -->
</div>
<nav class='slides-navigation'>
<a class='next' href='#'><i class='fa fa-arrow-right'></i></a>
<a class='prev' href='#'><i class='fa fa-arrow-left'></i></a>
</nav>
<p class='goto-next' style='font-family:"Lobster",ge_ss_threeregular;    text-align: center;     line-height: 27px;'>كن مهووس<a class='arrow animated ci bounce' href='#service-section'></a>
</p>
</div>
<!-- Slider Section Over-->

<!-- jQuery Include -->
<script src='https://cdn.rawgit.com/MidoOops/waghav1/cn1gk/1.js'></script>
<script src='https://cdn.rawgit.com/MidoOops/waghav1/cn1gk/2.js'></script>
<script src='https://cdn.rawgit.com/MidoOops/waghav1/cn1gk/3.js'></script>
<!-- Easing Animation Effect -->
<script src='https://cdn.rawgit.com/MidoOops/waghav1/cn1gk/4.js'></script>
<!-- Core Bootstrap v3.2.0 -->
<script src='https://cdn.rawgit.com/MidoOops/waghav1/cn1gk/5.js'></script>
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<script src='https://cdn.rawgit.com/MidoOops/waghav1/cn1gk/6.js'></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<!-- Font Elegant -->
<!--[if lte IE 7]><script src="libraries/fonts/elegant/lte-ie7.js"></script><![endif]-->
<script src='https://cdn.rawgit.com/MidoOops/waghav1/cn1gk/7.js'></script>
<!-- Quicksand v1.4 -->
<script src='https://cdn.rawgit.com/MidoOops/waghav1/cn1gk/8.js'></script>
<!-- Superslides - v0.6.3-wip -->
<script src='https://cdn.rawgit.com/MidoOops/waghav1/cn1gk/9.js'></script>
<!-- service Rounded slider -->
<script src='https://cdn.rawgit.com/MidoOops/waghav1/cn1gk/1.js'></script>
<!-- service Rounded slider -->
<script src='https://cdn.rawgit.com/MidoOops/waghav1/cn1gk/11.js'></script>
<!-- Used for Animated Numbers -->
<script src='https://cdn.rawgit.com/MidoOops/waghav1/cn1gk/12.js'></script>
<!-- It Loads jQuery when element is appears -->
<script src='https://cdn.rawgit.com/MidoOops/waghav1/cn1gk/13.js'></script>
<!-- Used for Loading Circle -->
<script src='https://cdn.rawgit.com/MidoOops/waghav1/cn1gk/14.js'></script>
<script src='https://cdn.rawgit.com/MidoOops/waghav1/cn1gk/15.js'></script>
<!-- Core Owl Carousel CSS File * v1.3.3 -->
<script src='https://cdn.rawgit.com/MidoOops/waghav1/cn1gk/16.js'></script>
<script src='https://cdn.rawgit.com/MidoOops/waghav1/cn1gk/17.js'></script>
<!-- Customized Scripts -->
<script src='https://cdn.rawgit.com/MidoOops/waghav1/cn1gk/18.js'></script>
</body>
<style>

  #forex-material-design 
{display:none;}
</style>
    </b:if>
  1. قم بتغير #forex-material-design بـ id او class الذى يحتوى على اكواد القالب كله
*ملحوظة: غالبا فى بعض القوالب يكون #outer-wrapper

  1. احفظ القالب

تعليقات

الوجوه التعبيرية
إنسخ ثم إلصق الوجوه التعبيرية في صندوق التعليقات

الأرشيف

نموذج الاتصال

إرسال