موضوع عن كيفية اضافتها طلبها الكثير
وهي واجهة جميلة ومميزة واحترافية جداا للمدونات 
قدمناها لكم يمكنك اضافتها باتباع الخطوات التالية وهي اريع خطوات 
اتمنى ان تعجبكم الواجهة
لاتنسوا ان المعاينة موجودة في السايدبار جانب المدونة ==>>
لاتنسوا ان المعاينة موجودة في السايدبار جانب المدونة ==>>
الخطوة رقم 1 الخطوة الاولى
- ابحث عن <head> وأضف الكود التالي تحته
<b:if cond='data:blog.url != data:blog.homepageUrl'>
الخطوة الثانية
- ابحث عن </head> وأضف الكود التالي فوقه
</b:if>الخطوة الثالثة
- ابحث عن <body واضف الكود التالي تحته
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<link href='https://4d1dda7134deba0f02a580cdafab5f7610179f6e.googledrive.com/host/0B1NQlV8aQ963LTJnNTJ2dFh6Mlk/font-lobster-web3-night.css' rel='stylesheet' type='text/css'/>
<link href='https://4d1dda7134deba0f02a580cdafab5f7610179f6e.googledrive.com/host/0B1NQlV8aQ963LTJnNTJ2dFh6Mlk/FontAwesome-web3-night.css' rel='stylesheet' type='text/css'/>
<link href='https://4d1dda7134deba0f02a580cdafab5f7610179f6e.googledrive.com/host/0B1NQlV8aQ963LTJnNTJ2dFh6Mlk/font-main-web3-night.net.css' rel='stylesheet' type='text/css'/>
<link href='https://b9da25aa8192fe2adbcfcc0e7d278957087e1e1f.googledrive.com/host/0BzBjERwqsOy7dExlcVVHUDlQNDg/OSAMA-AL-ROBAIE-1.css' rel='stylesheet'/>
<link href='https://b9da25aa8192fe2adbcfcc0e7d278957087e1e1f.googledrive.com/host/0BzBjERwqsOy7dExlcVVHUDlQNDg/OSAMA-AL-ROBAIE-2.css' rel='stylesheet'/>
<link href='https://b9da25aa8192fe2adbcfcc0e7d278957087e1e1f.googledrive.com/host/0BzBjERwqsOy7dExlcVVHUDlQNDg/OSAMA-AL-ROBAIE-3.css' rel='stylesheet'/>
<link href='https://b9da25aa8192fe2adbcfcc0e7d278957087e1e1f.googledrive.com/host/0BzBjERwqsOy7dExlcVVHUDlQNDg/OSAMA-AL-ROBAIE-4.css' rel='stylesheet'/>
<link href='https://b9da25aa8192fe2adbcfcc0e7d278957087e1e1f.googledrive.com/host/0BzBjERwqsOy7dExlcVVHUDlQNDg/OSAMA-AL-ROBAIE-5.css' rel='stylesheet'/>
<link href='https://b9da25aa8192fe2adbcfcc0e7d278957087e1e1f.googledrive.com/host/0BzBjERwqsOy7dExlcVVHUDlQNDg/OSAMA-AL-ROBAIE-6.css' rel='stylesheet'/>
<link href='https://b9da25aa8192fe2adbcfcc0e7d278957087e1e1f.googledrive.com/host/0BzBjERwqsOy7dExlcVVHUDlQNDg/OSAMA-AL-ROBAIE-7.css' rel='stylesheet'/>
<body data-offset='200' data-spy='scroll' data-target='.primary-navigation'>
<style>
#OSAMA-AL-ROBAIE-HOME-PAGE {display:none !important;}
</style>
<style>
.right, .left {
position: absolute;
top: 0;
height: 100%;
width: 36% !important;
right: auto;
}
.slider-section .slide-sub-title span {
display: block;
font-family: "Lobster",ge_ss_threeregular !important;
}
</style>
<a id='top'/>
<!-- 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/AVvXsEi-dcndlX1QJVja3h9bBAPOr-Duaunk1lCk5qegSAck_LB-wPQm82WaUCfnuWNTge1np7kxOnO_4ZqGxN2wiJg7JHswX8nY0oRVXh2yZW_ngyG8a5DKN3hHkSQlxONaKLl02yU4-rmzklCT/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>
OSAMA AL-ROBAIE-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; '>OSAMA</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='OSAMA AL-ROBAIE-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' style="width: 32% !important;">
<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>اسمي OSAMA AL-ROBAIE</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/AVvXsEgI_OkwWg0d8v07uy5-dc1ahLMMhaor4OUiE5SopMCTd-FDToBcLPoXPiZSTUURt02McK0AuOr_8dOIFXzgxUtMCeUOvnmiebw7loGwpYb3w-rcxKahL3OH2lhZevlFkdSFuq_j6cvgI0oV/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'/></a>
<a class='prev' href='#'><i class='fa fa-arrow-left'/></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'/>
</p>
</div>
<!-- Slider Section Over-->
<!-- jQuery Include -->
<script src='https://b9da25aa8192fe2adbcfcc0e7d278957087e1e1f.googledrive.com/host/0BzBjERwqsOy7dExlcVVHUDlQNDg/OSAMA-AL-ROBAIE-8.css'/>
<script src='https://b9da25aa8192fe2adbcfcc0e7d278957087e1e1f.googledrive.com/host/0BzBjERwqsOy7dExlcVVHUDlQNDg/OSAMA-AL-ROBAIE-9.css'/>
<script src='https://b9da25aa8192fe2adbcfcc0e7d278957087e1e1f.googledrive.com/host/0BzBjERwqsOy7dExlcVVHUDlQNDg/OSAMA-AL-ROBAIE-10.css'/><!-- Easing Animation Effect -->
<script src='https://b9da25aa8192fe2adbcfcc0e7d278957087e1e1f.googledrive.com/host/0BzBjERwqsOy7dExlcVVHUDlQNDg/OSAMA-AL-ROBAIE-11.css'/> <!-- Core Bootstrap v3.2.0 -->
<script src='https://b9da25aa8192fe2adbcfcc0e7d278957087e1e1f.googledrive.com/host/0BzBjERwqsOy7dExlcVVHUDlQNDg/OSAMA-AL-ROBAIE-12.css'/> <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<script src='https://b9da25aa8192fe2adbcfcc0e7d278957087e1e1f.googledrive.com/host/0BzBjERwqsOy7dExlcVVHUDlQNDg/OSAMA-AL-ROBAIE-13.css'/> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<!-- Font Elegant -->
<script src='https://b9da25aa8192fe2adbcfcc0e7d278957087e1e1f.googledrive.com/host/0BzBjERwqsOy7dExlcVVHUDlQNDg/OSAMA-AL-ROBAIE-14.css'/> <!-- Quicksand v1.4 -->
<script src='https://b9da25aa8192fe2adbcfcc0e7d278957087e1e1f.googledrive.com/host/0BzBjERwqsOy7dExlcVVHUDlQNDg/OSAMA-AL-ROBAIE-15.css'/> <!-- Superslides - v0.6.3-wip -->
<script src='https://b9da25aa8192fe2adbcfcc0e7d278957087e1e1f.googledrive.com/host/0BzBjERwqsOy7dExlcVVHUDlQNDg/OSAMA-AL-ROBAIE-16.css'/> <!-- service Rounded slider -->
<script src='https://b9da25aa8192fe2adbcfcc0e7d278957087e1e1f.googledrive.com/host/0BzBjERwqsOy7dExlcVVHUDlQNDg/OSAMA-AL-ROBAIE-17.css'/> <!-- service Rounded slider -->
<script src='https://b9da25aa8192fe2adbcfcc0e7d278957087e1e1f.googledrive.com/host/0BzBjERwqsOy7dExlcVVHUDlQNDg/OSAMA-AL-ROBAIE-18.css'/> <!-- Used for Animated Numbers -->
<script src='https://b9da25aa8192fe2adbcfcc0e7d278957087e1e1f.googledrive.com/host/0BzBjERwqsOy7dExlcVVHUDlQNDg/OSAMA-AL-ROBAIE-19.css'/> <!-- It Loads jQuery when element is appears -->
<script src='https://b9da25aa8192fe2adbcfcc0e7d278957087e1e1f.googledrive.com/host/0BzBjERwqsOy7dExlcVVHUDlQNDg/OSAMA-AL-ROBAIE-20.css'/> <!-- Used for Loading Circle -->
<script src='https://b9da25aa8192fe2adbcfcc0e7d278957087e1e1f.googledrive.com/host/0BzBjERwqsOy7dExlcVVHUDlQNDg/OSAMA-AL-ROBAIE-21.css'/>
<script src='https://b9da25aa8192fe2adbcfcc0e7d278957087e1e1f.googledrive.com/host/0BzBjERwqsOy7dExlcVVHUDlQNDg/OSAMA-AL-ROBAIE-22.css'/> <!-- Core Owl Carousel CSS File * v1.3.3 -->
<script src='https://b9da25aa8192fe2adbcfcc0e7d278957087e1e1f.googledrive.com/host/0BzBjERwqsOy7dExlcVVHUDlQNDg/OSAMA-AL-ROBAIE-23.css'/>
<script src='https://b9da25aa8192fe2adbcfcc0e7d278957087e1e1f.googledrive.com/host/0BzBjERwqsOy7dExlcVVHUDlQNDg/OSAMA-AL-ROBAIE-24.css'/>
<!-- Customized Scripts -->
<script src='https://b9da25aa8192fe2adbcfcc0e7d278957087e1e1f.googledrive.com/host/0BzBjERwqsOy7dExlcVVHUDlQNDg/OSAMA-AL-ROBAIE-25.css'/>
</body>
</b:if>
<div id='OSAMA-AL-ROBAIE-HOME-PAGE'>
الخطوة الاخيرة الرابعة
- أضف الكود التالي فوق </body>
</div>
في امان الله
