اضافة واجهه قالب احترافية v1
*/ مميزات الواجهة
1- خلفية رائعة والوان جذابة ومتناسقة
2- سهلة جدا فى التعديل والتعامل معها
3- متجاوبة مع كل الاجهزة
الخطوة الاولى
- توجه الى القالب من خلال تحرير html
- ابحث عن <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>
- قم بتغير #forex-material-design بـ id او class الذى يحتوى على اكواد القالب كله
*ملحوظة: غالبا فى بعض القوالب يكون #outer-wrapper
- احفظ القالب
تعليقات