24‏/09‏/2015

تحية طيبة أعزائي أصدقاء مدونة عرب ويب
كل عام وأنتم بخير بمناسبة عيد الأضحى المبارك، أعاده الله علينا وعليكم بالخير واليمن والبركات، وتقبل الله منا ومنكم صالح الأعمال.

نلقاكم اليوم في تدوينة خاصة وكما وعدناكم بصفحتنا أننا إن وصلنا لـ200 اعجاب على المنشور الخاص بهذه التدوينة فسنطرحه لكم وها قد وفينا بوعدنا واجهة مطورة ومخصصة لكافة المواقع تضم الواجهة 12 مربع كل واحد له دور يمكنك أن تخصصه حسب ذوقك كما أنه يحتوي على نموذج الاتصال وصفحة بها جميع المواضيع المتوفرة بموقعك وبعض المزايا التي ستكتشفونها بالمعاينة. الآن وكما عودناكم سنضع شرح كامل لإضافتهالذا فالمرجو متابعة الشرح جيدا وإن ناسبك فيمكنك أن تجربه على مدونة تجريبية بها نفس قالبك حتى إن واجهتك مشاكل فمرحب أن تضع الرابط بالتعليق مع توضيح المشكل
* ملاجظة مهمة : ينبغي حذف نموذج الاتصال إن كان مضاف
شرح طريقة التركيب
1. ابحث داخل القالب باستعمال Ctrl+F عن </head> ثم ضع الكود التالي فوقه
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
$(function(){
$(&quot;.Bmesage&quot;).click(function(){
$(&quot;.mesageeror&quot;).slideToggle(&#39;slow&#39;);
});
});
</script>
<style>
.container.wrapper { display: none; }
body {background: url(http://1.bp.blogspot.com/-_6FSKX-aee4/VfAbRUTz12I/AAAAAAAAIxk/RSpA4AO315E/s1600/bg-w8.jpg); background-size: cover; background-attachment: fixed; position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; z-index: 0;}
body:before { content: &quot;&quot;; display: block; opacity: .80; position: absolute; top: 0; bottom: 0; width: 100%; background:linear-gradient(to right,rgb(56, 56, 56) 0%,rgb(213, 52, 52) 100%)}
center { width: 870px; margin: -50px auto; }
@keyframes Cokifram{
0%{transform:translate(0px,0px) scale(0.0);opacity:0.2}
40%{transform:translate(0px,0px) scale(0.50);opacity:0.6;}
60%{transform:translate(0px,0px) scale(0.50);opacity:0.7;}
100%{transform:translate(0px,0px) scale(1);opacity:1;}
}
/*--  Menu Ar1web--*/
#menu {position:fixed;left:0px;top:0px;width:100%;height:48px;border-bottom:solid 1px #cccccc;
background:#0088FF;padding: 0 0 0 0;z-index:100;}
#menu ul {float: left;margin: 0px;padding: 0 0 0 0;width: 960px;list-style: none;}
#menu ul li {display: inline;}
#menu ul li a {font-family:Century Gothic,Helvetica,Arial;-webkit-transition:All 0.5s ease-in-out;-moz-transition:All 0.5s ease-in-out;text-transform:none;float: left;padding: 14px 20px;text-align: left;text-decoration: none;background: #transparent center right no-repeat;font-size:15px;outline: none;color: #ffffff;}
#menu li a:hover{ color:#cccccc}
#menu_bottom{bottom:0px;position:fixed;}
#menu_bottom{  bottom: 0;  left: 0;  float:left; width:100%; height: 26px;padding:0px;margin:0 auto; overflow:auto;overflow:hidden;border-top: 1px solid #cccccc;background:#0088FF;z-index:100; }
#menu_bottom ul{ margin:0; padding:0; list-style:none}
#menu_bottom ul li{padding:0px;  margin:0px;  display:inline;}
#menu_bottom ul li a{border:solid 1px transparent;float:left; display:block; margin:3px; padding:0px;font:normal bold 15px Arial,Sans-Serif;text-align:center;text-decoration:none; color:#fff;  font-weight:bold; outline:none;}
#menu_bottom ul li a:hover {color:#B8B7B7}
#clock { font:normal bold 13px Arial,Sans-Serif; color:#fff;}
.log {  right: 90px; z-index:9999; }
/* clearfix */
.clearfix {
 clear:both;
}
#wrap-ar1web1{width:95%;height:40px;top:10px;margin-bottom:40px;}
#metroku {width:980px; height:40px;  display:block;}
#welcome { width:980px; height:40px; margin-bottom:35px;}
.boxar1web {width: 200px; float: right; background-color: rgba(255, 255, 255, 0.26); margin: 30px -15px}
.welteks {float:left; width:150px; color:#484646;}
.welteks1 { text-align: right; font-size: 15px; font-weight: bold;    font-family: droid arabic kufi;color: #FFFFFF}.welteks2 {font-size:10px; text-align:right; color: #F1F1F1;font-family: droid arabic kufi;}.welpic { float:right;padding:0; width:40px; height:40px; }
.logoar1web{ opacity:1;}
.nama_app{margin: 0 0; font-size: 25px;color: #fff;display: inline-block; padding: 5px; border-radius: 2px!important;text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.36);}
/* slideshow */
.s-input{position:relative;visibility:hidden;}
#slidecanvas {position: absolute;top: 0;left: 0;width: 400%;height: 100%;
 transition: all 2s cubic-bezier(0.785, 0.135, 0.150, 0.860);
 -moz-transition: all 2s cubic-bezier(0.785, 0.135, 0.150, 0.860);
 -webkit-transition: all 2s cubic-bezier(0.785, 0.135, 0.150, 0.860);
 -ms-transition: all 2s cubic-bezier(0.785, 0.135, 0.150, 0.860);
 -o-transition: all 2s cubic-bezier(0.785, 0.135, 0.150, 0.860);}
.slide-holder {position: relative;float:left;width: 25%;height: 100%;}
.slide {width:90%;position: relative;margin: 40px auto;height: 500px; height: -moz-calc(100% - 160px);
height: -webkit-calc(100% - 160px);height: calc(100% - 160px);min-height: 500px;}
.sub-slide {margin-top: 160px;}
.front-slide h2, .front-slide .endtxt {margin:10px 0 20px;font-size:40px;font-family:Century Gothic,Helvetica,Arial;
padding:5px 0;color:#fff;}
.front-slide h2 span{color:#00D2F7;}
.slide-content h2 {margin:10px 0 20px;font-size:40px;font-family:Century Gothic,Helvetica,Arial;padding:5px 0;color:#fff;}
.slide-content {font-size: 18px;}
input.s1-chk:checked ~ #slidecanvas{left: 0;opacity: 1.7;  float: left;-webkit-transition:All 0.5s ease-in-out;-moz-transition:All 0.5s ease-in-out;overflow:hidden;}
input.s2-chk:checked ~ #slidecanvas{left: -100%;overflow:hidden;
opacity: 1.7;  float: left;-webkit-transition:All 0.5s ease-in-out;-moz-transition:All 0.5s ease-in-out;}
input.s3-chk:checked ~ #slidecanvas{left: -200%;overflow:hidden;
opacity: 1.7;  float: left;-webkit-transition:All 0.5s ease-in-out;-moz-transition:All 0.5s ease-in-out;}
input.s4-chk:checked ~ #slidecanvas{left: -300%;overflow:hidden;
opacity: 1.7;  float: left;-webkit-transition:All 0.5s ease-in-out;-moz-transition:All 0.5s ease-in-out;}
input.main-chk:checked , #slidecanvas{top: 0;overflow:hidden;
opacity: 1.7;  float: left;-webkit-transition:All 0.5s ease-in-out;-moz-transition:All 0.5s ease-in-out;}
input.sub1-chk:checked ~ #slidecanvas{top: -100%;}
input.sub2-chk:checked ~ #slidecanvas{top: -200%;}
.home-btn{position:absolute;top:0;float:left;width:50px;height:50px;margin-bottom:10px;
background:url(http://2.bp.blogspot.com/-41ojo3vhh58/UUX5aEJ9PpI/AAAAAAAAINQ/6aelOOye8bg/s1600/close.png) 0 0 no-repeat;text-indent:-999999px;cursor:pointer;z-index:9;}
.home-btn:hover{opacity:0.7}
.baten{cursor: pointer;}
#sitetitle {float: left;display: inline-block;margin: 0 180px 0 90px;}
#photoar1web{background:transparent;height:147px;width:271px;overflow:visible;}
#maskar1web {display:block;overflow:hidden;height:145px;width:271px;}
#photoar1web ul {margin:0;padding:0;position:relative;}
#photoar1web li {width:273px;height:140px;position:absolute;top:0px;list-style:none;}
#photoar1web li.firstanimation {-moz-animation:cycle 25s linear infinite;-webkit-animation:cycle 25s linear infinite;}
#photoar1web li.secondanimation {-moz-animation:cycletwo 25s linear infinite;-webkit-animation:cycletwo 25s linear infinite;}
#photoar1web li.thirdanimation {-moz-animation:cyclethree 25s linear infinite;-webkit-animation:cyclethree 25s linear infinite;}
#photoar1web li.fourthanimation {-moz-animation:cyclefour 25s linear infinite;-webkit-animation:cyclefour 25s linear infinite;}
#photoar1web li.fifthanimation {-moz-animation:cyclefive 25s linear infinite;-webkit-animation:cyclefive 25s linear infinite;}
#photoar1web .tooltip {color#fff;background:#fff;width:200px;height:20px;position:relative;bottom:0px;left:-80px;-moz-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;  }
#photoar1web.tooltip h1 {color:#fff;
 font-size:11px;
 font-weight:10;
 line-height:10px;
 padding:0 0 0 20px;
}
#photoar1web li#first:hover .tooltip, 
#photoar1web li#second:hover .tooltip, 
#photoar1web li#third:hover .tooltip, 
#photoar1web li#fourth:hover .tooltip, 
#photoar1web li#fifth:hover .tooltip {
 left:0px;}
#photoar1web:hover li, 
#photoar1web:hover .progress-bar {-moz-animation-play-state:paused;-webkit-animation-play-state:paused;
}
@-moz-keyframes cycle {
 0%  { top:0px; }
 4%  { top:0px; } 
 16% { top:0px; opacity:1; z-index:0; } 
 20% { top:180px; opacity:0; z-index:0; } 
 21% { top:-180px; opacity:0; z-index:-1; }
 92% { top:-180px; opacity:0; z-index:0; }
 96% { top:-180px; opacity:0; }
 100%{ top:0px; opacity:1; }

}
@-moz-keyframes cycletwo {
 0%  { top:-180px; opacity:0; }
 16% { top:-180px; opacity:0; }
 20% { top:0px; opacity:1; }
 24% { top:0px; opacity:1; } 
 36% { top:0px; opacity:1; z-index:0; } 
 40% { top:180px; opacity:0; z-index:0; }
 41% { top:-180px; opacity:0; z-index:-1; } 
 100%{ top:-180px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
 0%  { top:-180px; opacity:0; }
 36% { top:-180px; opacity:0; }
 40% { top:0px; opacity:1; }
 44% { top:0px; opacity:1; } 
 56% { top:0px; opacity:1; } 
 60% { top:180px; opacity:0; z-index:0; }
 61% { top:-180px; opacity:0; z-index:-1; } 
 100%{ top:-180px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
 0%  { top:-180px; opacity:0; }
 56% { top:-180px; opacity:0; }
 60% { top:0px; opacity:1; }
 64% { top:0px; opacity:1; }
 76% { top:0px; opacity:1; z-index:0; }
 80% { top:180px; opacity:0; z-index:0; }
 81% { top:-180px; opacity:0; z-index:-1; }
 100%{ top:-180px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
 0%  { top:-180px; opacity:0; }
 76% { top:-180px; opacity:0; }
 80% { top:0px; opacity:1; }
 84% { top:0px; opacity:1; }
 96% { top:0px; opacity:1; z-index:0; }
 100%{ top:180px; opacity:0; z-index:0; }
}

@-webkit-keyframes cycle {
 0%  { top:0px; }
 4%  { top:0px; }
 16% { top:0px; opacity:1; z-index:0; } 
 20% { top:180px; opacity:0; z-index:0; }
 21% { top:-180px; opacity:0; z-index:-1; }
 50% { top:-180px; opacity:0; z-index:-1; }
 92% { top:-180px; opacity:0; z-index:0; }
 96% { top:-180px; opacity:0; }
 100%{ top:0px; opacity:1; }
 
}
@-webkit-keyframes cycletwo {
 0%  { top:-180px; opacity:0; }
 16% { top:-180px; opacity:0; }
 20% { top:0px; opacity:1; }
 24% { top:0px; opacity:1; } 
 36% { top:0px; opacity:1; z-index:0; } 
 40% { top:180px; opacity:0; z-index:0; }
 41% { top:-180px; opacity:0; z-index:-1; }  
 100%{ top:-180px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
 0%  { top:-180px; opacity:0; }
 36% { top:-180px; opacity:0; }
 40% { top:0px; opacity:1; }
 44% { top:0px; opacity:1; } 
 56% { top:0px; opacity:1; z-index:0; } 
 60% { top:180px; opacity:0; z-index:0; } 
 61% { top:-180px; opacity:0; z-index:-1; }
 100%{ top:-180px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
 0%  { top:-180px; opacity:0; }
 56% { top:-180px; opacity:0; }
 60% { top:0px; opacity:1; }
 64% { top:0px; opacity:1; }
 76% { top:0px; opacity:1; z-index:0; }
 80% { top:180px; opacity:0; z-index:0; }
 81% { top:-180px; opacity:0; z-index:-1; }
 100%{ top:-180px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
 0%  { top:-180px; opacity:0; }
 76% { top:-180px; opacity:0; }
 80% { top:0px; opacity:1; }
 84% { top:0px; opacity:1; }
 96% { top:0px; opacity:1; z-index:0; }
 100%{ top:180px; opacity:0; z-index:0; }
}
.metro-surface{padding: 40px 0px 0px 0px;}
.metro-tile { 
    animation: zoomnav 2s;
    width: 260px;
    height: 135px;
    padding: 5px;
    color: #FFF;
    font-size: 15px;
    cursor: default;
    transition: 0.1s all;}
.metro-tile-small { margin: 0 auto; width: 140px; height: 135px; animation: zoomnav 2s;}
.metro-tile-google {background-position:center;background-color: #009719;}
.metro-tile-mail {background-position: center; background-color: #ECE641;}
.metro-tile-mail img { width: 70%; margin-right: 20px; margin-top: 10px; }
.metro-tile-net {background-position:center; background-color:#F7743A;}
.metro-tile-post { background-position: center; background-color: #E88A2D;  }
i.fa.fa-gift { color: #fff; }
.metro-tile-net img { width: 80%; margin-right: 14px; margin-top: 18px; }
.metro-tile-ri {background-color: #382632;background-position:center}
.metro-tile-msg { background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Friedrich_Schiller_by_Ludovike_Simanowiz.jpg/241px-Friedrich_Schiller_by_Ludovike_Simanowiz.jpg); font-family: cursive,&#39;Adobe Arabic&#39;; font-size: 20px; background-size: cover; position: relative;     margin: 7px 0;}
.metro-tile-msg:after { content: &quot;\f10d&quot;; font-family: FontAwesome; float: left; font-size: 30px; color: rgba(255, 255, 255, 0.89); }
.metro-tile-ri img { margin-top: -20px; margin-right: 7px; }
.metro-tile-player {margin: 0 0;
    animation: zoomnav 2s;
    position: relative;
    display: block;
    width: 271px;
    height: 145px;
    color: #FFF;
    font-size: 15px;
    cursor: default;
    transition: 0.1s all;    overflow: hidden;}

.metro-tile-facebook {background-color: #3B5998;}
.metro-tile-twitter{background-color: #55ACEE;}
.metro-tile-gplus {background-color: #E82626;}
.metro-tile-youtube {background-color:#CC181E;}
.metro-tile-facebook,.metro-tile-twitter,.metro-tile-gplus,.metro-tile-youtube{color: #FFF; text-align: center; font-size: 45px; line-height: 3.2; text-shadow: 2px 2px 0px rgba(76, 75, 75, 0.36);}
.metro-tile-down {background: #2D3E50;}
.metro-tile-down img { width: 80%; margin-right: 25px; }
.metro-tile-down:before { content: &quot;\f019&quot;; font-family: FontAwesome; font-size: 30px; color: rgba(255, 255, 255, 0.89); margin-left: 10px; float: right; line-height: 1;}
.metro-tile-gmail {background-position:center;background-color:#67D093;}
.metro-tile-gmail img {width: 55%; margin-right: 119px; margin-top: -25px;}
#wrapper-ar1web {
    font-family: electrolize,&#39;Droid Arabic Naskh&#39;, serif;
}
div.metro-tile:active {
-webkit-transform: scale(0.97) perspective(400px) rotateY(0deg) rotateX(0deg);
 -moz-transform: scale(0.97) perspective(400px) rotateY(0deg) rotateX(0deg);
 -ms-transform: scale(0.97) perspective(400px) rotateY(0deg) rotateX(0deg);
 transform: scale(0.97) perspective(400px) rotateY(0deg) rotateX(0deg);}
#footer p { font-size: 12px; margin: 10px 0; padding: 10px; text-align: center; color: #fff; }
#footer { background-color: rgba(255, 88, 38, 0.67); margin: 0 auto; width: 98.6%; border-radius: 1px!important; visibility: hidden; }

/*ANIMASI METRO*/
@-webkit-keyframes zoomnav{from{-webkit-transform:translate(-1000px,0px);opacity:0}
to{-webkit-transform:translate(0px,0px);opacity:1.1;}}
@-moz-keyframes zoomnav{from{-moz-transform:translate(-1000px,0px);opacity:0}
to{-moz-transform:translate(0px,0px);opacity:1.1;}}
@-ms-keyframes zoomnav{from{-ms-transform:translate(-1000px,0px);opacity:0}
to{-ms-transform:translate(0px,0px);opacity:1.1;}}
@keyframes zoomnav{from{transform:translate(-1000px,0px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}}

#totales{color: #FFFFFF; font-family: Electrolize,ge_ss_threeregular; font-size: 13px; background-color: rgba(232, 63, 73, 0.4); width: 26%; border: 1px solid rgba(206, 57, 59, 0.33); margin-top: -40px;}
span.nextprev-link { color: #FFFFFF; text-decoration: none; margin-left: 20px; background-color: rgba(218, 88, 88, 0.5); padding: 2px; border: 2px solid #ECECEC; font-family: droid arabic kufi; font-size: 12px; }
span.actual { font-family: electrolize; letter-spacing: 0.3em; }
a:hover { color: #FFFFFF; text-decoration: underline; }
a { color: #E0DEDD; }
  #paginacion {
    color: #FFFFFF;position: relative;
        bottom: 50px;    font-family: &#39;Tahoma&#39;, arial;
}a.nextprev-link {     margin-left: 30px;
    color: #FFFFFF;
    text-decoration: none;
    margin-right: 20px;
    background-color: rgba(255, 255, 255, 0.58);
    padding: 2px;
    border: 2px solid #ECECEC;
    font-family: droid arabic kufi;
    font-size: 12px;}

#daftar-isi-body{width:990px; height:100%; margin-top:10%;} 
#daftar-isi-wrap{ margin:0 auto}
 .box-posting{text-align: right; cursor: pointer; float: right; height: 140px; width: 310px; margin: -80px 20px 0 0;}
 .box-posting img {padding:5px;padding-right:285px;background:rgba(80, 77, 77, 0.62) ;height:40px; width:35px; margin:20px 0 0 25px; float:left;    box-shadow: 0 0 3px #151414;}
 .box-posting .judul-posting {text-align:left; float:left; height:10px;width:300px}
 .box-posting .judul-posting a{text-align: right;text-decoration: none;color: #FFFFFF; margin: -33px 0 0 0; display: block; font-size: 10px !important; font-weight: bold !important;direction: rtl;} 
i.fa.fa-facebook,i.fa.fa-twitter,i.fa.fa-google-plus,i.fa.fa-youtube { color: #fff; }
 
* {
    -webkit-box-sizing: inherit!important;
}
.metro-tile-post img {
    width: 40%;
    margin-right: 130px;
}

#maskar1web img {
   width: 100%;
    height: 110%;
    overflow: hidden;
    max-width: 1000px;
}

table {
    border-spacing: 5px!important;
    border-collapse: initial!important;
}

.mesageeror{z-index:999999;width:100%;height:auto;position:fixed; top:0px;right:0;display:none; background:rgba(45, 62, 80, 0.91);-moz-transition:All 0.5s ease-in-out;padding:10px;}
.Bmesage {background:transparent;overflow:hidden;cursor: pointer;
  -ms-filter: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=100)&quot;filter: alpha(opacity=100);    color: #fff;
opacity: 1.7;}
@keyframes Cokifram{
0%{transform:translate(0px,0px) scale(0.0);opacity:0.2}
40%{transform:translate(0px,0px) scale(0.50);opacity:0.6;}
60%{transform:translate(0px,0px) scale(0.50);opacity:0.7;}
100%{transform:translate(0px,0px) scale(1);opacity:1;}
}
h3.cnt-title { color: #fff; }
.social_network { background: rgba(86, 84, 84, 0.33); margin: 0 0; padding: 10px; overflow: hidden; float: right; width: 344px; height: 254px; box-shadow: 0 0 7px #4E4D4D;} i.fa.fa-skype { color: #fff; } #social_networks{ text-align: center;display: block;clear: both;padding: 15px; margin: 20px 0;} #social_networks ul {display:block;margin:0 auto;padding:0;list-style:none;} #social_networks li{text-align:center;display:inline-block;margin:0 5px;width:36px; height:36px;transition:All 0.6s ease-out;} #social_networks li:hover{color:#eee;cursor:pointer;} #social_networks li:hover a{color:#fff;} #social_networks li a{display:inline-block;color:#aaa;line-height:36px;font-size:1.2em;transition:All 0.3s ease-out;} #social_networks li a:hover{color:#fff;} #social_networks li a span{display:none;} #social_networks li.facebook,#social_networks li.twitter,#social_networks li.youtube,#social_networks li.googleplus,#social_networks li.skype{text-align: center; background: rgba(53, 51, 51, 0.35); cursor: pointer; border-radius: 50%!important; font-size: 12px;} #social_networks li a.facebook:hover,#social_networks li a.twitter:hover,#social_networks li a.youtube:hover,#social_networks li a.googleplus:hover,#social_networks li a.skype:hover{color:#fff;} #social_networks li.skype:hover,#social_networks li.twitter:hover { color: #fff; box-shadow: 0 0 0 1px #51B2EC; background-color: #54B9F5; } #social_networks li.googleplus:hover,#social_networks li.youtube:hover { color: #fff; box-shadow: 0 0 0 1px #EC5151; background-color: #F14949; } #social_networks li.facebook:hover { color: #fff; box-shadow: 0 0 0 1px #2E7BF1; background-color: #3B8CEC; } .contactme{float:right;} #map-wrapper{width:97.2%;margin-top:15px;float:left;background:rgba(86, 84, 84, 0.33);padding:10px;overflow:hidden;    box-shadow: 0 0 7px #3E3C3C;} .other-cnt { font: normal 12px tahoma; line-height: 1.8em; padding: 5px; margin: 50px auto; color: #FFF; width: 90%;} .other-cnt .phone { background: url(http://1.bp.blogspot.com/-V_DloDDdIXY/U0Kit9aALyI/AAAAAAAACso/_x38DF7Gpwg/s1600/phone.png) no-repeat 100%; padding: 0 22px 0 0; } .other-cnt .emailtxt{ background: url(http://4.bp.blogspot.com/-wlTIF2gBejc/U0Kit3qFbHI/AAAAAAAACsk/slQdddMYBS8/s1600/inbox.png) no-repeat 100%; padding: 0 22px 0 0; }
#buttonar1web { border: #EBF535 solid 2px; color: #FFFFFF; display: inline-block; font-size: 0.545em; font-weight: bold; padding: 5px 20px; text-transform: uppercase; text-decoration: none; margin: 20px 0; }#buttonar1web:hover { border: #FFFFFF solid 2px; color: #EBF535; }

@media (max-width: 767px) {
    .slide {
    width: 100%;
}
#contact-form { float: none; margin: 0 auto; width: 100%; }
center {
    width: 50%;
    margin: 0 auto;
}

.boxar1web {
    float: none;
    background-color: rgba(255, 255, 255, 0.26);
    margin: 0 auto;
}
#wrap-ar1web1 {
    width: 120%;
    height:0;
    margin:0 0;
}
.metro-tile-player { position: relative; left: 63px; }
    .metro-tile-msg,.metro-tile-ri,.metro-tile-gmail,#map-wrapper,.social_network,#daftar-isi-body,.metro-tile-facebook, .metro-tile-twitter, .metro-tile-gplus, .metro-tile-youtube,.metro-tile-down,.metro-tile-post,.metro-tile-mail{ display: none!important; }
}


</style>
</b:if>
2. ابحث عن <body> ثم ضع الكود التالي اسفله
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<link href='//ar1web-com.googlecode.com/svn/trunk/animate.css' rel='stylesheet'/>
<div class='mesageeror'> 
<div style='float: right; margin-right: 10px;'> 
<span class='Bmesage'>X</span></div> 
<div style='color: white; font-family: droid arabic kufi; font-size: 26px; text-align: center;'> 
إن كنت من مشرفي المدونة فيمكنك تحميله &amp;#x1F636;<br/> 
<a href='#' id='buttonar1web' target='_blank'>تحميل</a>
</div> 
</div>

<section id='wrapper-ar1web'>
<div id='slideshow'>
 <!-- radio button for each presentation slide -->
 <input class='s1-chk main-chk s-input' id='s1-chk' name='slide' type='radio'/>
 <input class='s2-chk main-chk s-input' id='s2-chk' name='slide' type='radio'/>
 <input class='s2-chk sub1-chk s-input' id='s2-sub1-chk' name='slide' type='radio'/>

  <input class='s3-chk main-chk s-input' id='s3-chk' name='slide' type='radio'/>
 <input class='s3-chk sub1-chk s-input' id='s3-sub1-chk' name='slide' type='radio'/>

 <!-- A slideshow canvas -->
 <div id='slidecanvas'>
  <!-- Slide 1 -->
  <section class='slide-holder' id='s1'>
   <div class='main-slide slide'>
    <div class='front-slide'>
<center>
<div id='wrap-ar1web1'>
<div class='boxar1web'>
<div class='welteks'>
<div class='welteks1'>مدونة عرب ويب</div>
<div class='welteks2'>الأفضل لكم</div></div>
<div class='welpic'><div class='logoar1web'/><a href='/'><img class='logoar1web' src='http://1.bp.blogspot.com/-pr4Ejjq6fLI/Ve2VPBhu_oI/AAAAAAAAIvk/A6uv34DHTx4/s1600/ar1weblogo.png'/></a></div>
</div></div>
<div id='welcome'>
</div>
<div style='margin-top:-5%;'>
<table><tr><td>
<div class='metro-tile metro-tile-small metro-tile-mail'>راسلنا
<label for='s2-chk'><div class='baten'>
<img src='http://2.bp.blogspot.com/-Ak3EhfQaFqA/Ve7IpaeHGcI/AAAAAAAAIxM/WnhMYvDueTo/s1600/flat-mail-icon.png'/>
</div></label></div></td>

   <td><div class='metro-tile metro-tile-small metro-tile-net'>الدخول للمدونة<a href='/search/?max-results=6'><img src='http://2.bp.blogspot.com/-5ML7rey21cg/Ve3bWIqoL8I/AAAAAAAAIwM/AuiK8r7rFGs/s1600/flat-apple-computer.png'/></a></div></td>

  <td><div class='metro-tile metro-tile-post'>تصفح التدوينات
<label for='s3-chk'><div class='baten'>
<img src='http://3.bp.blogspot.com/-sKkpmAgGwoU/Ve3gK0BTknI/AAAAAAAAIwc/4nznIBcvVqs/s1600/document.png'/>
</div></label></div></td>

<td><div class='metro-tile metro-tile-ri'>هدايا<a href='http://www.ar1web.com/p/gifts.html'><img src='http://1.bp.blogspot.com/-Nzxxl5_okEE/Ve3RC3ztHPI/AAAAAAAAIv8/l8z4sIHjAL4/s1600/gifts.png'/></a></div></td>
     </tr> </table>
<table> <tr>
 <td><div class='metro-tile metro-tile-msg'><p>
لماذا يجب أن أكون فرشاة وألوان وبيدي أن أكون أنا الفنان&#1567; 


&quot;فريدريك فون شيلر&quot;
</p>

</div></td>
    
   <td><div class='metro-tile-player'>
<div id='photoar1web'>
         <div id='maskar1web'>
            <ul>
            <li class='firstanimation' id='first'>
            <a href='#'>
            <img src='http://4.bp.blogspot.com/-VR5FTaGnv3c/Vdi_BcUzcsI/AAAAAAAAIds/7LyvbWVnoc0/s1600/mock.png'/>
            </a>
            </li>
            <li class='secondanimation' id='second'>
            <a href='#'>
            <img src='http://2.bp.blogspot.com/-l8qOwCShc_Q/Vd8c4LKqtEI/AAAAAAAAIiU/zQyo5CnSZ0o/s1600/bestwidget.png'/>
            </a>
            </li>
            <li class='thirdanimation' id='third'>
            <a href='#'>
            <img src='http://2.bp.blogspot.com/-L4Aen-EDUYU/VUSkVkJex_I/AAAAAAAAHpU/M3Av5iJaOjQ/s1600/code-geek-designer-wallpapers.png'/>
            </a>
            </li>
<li class='fourthanimation' id='fourth'>
  <a href='#'>
            <img src='http://4.bp.blogspot.com/-jFtmkg6VkQE/Vem-VFe0oJI/AAAAAAAAIsk/o1cg_NFMH-8/s1600/Coverlyblack.png'/>
            </a>
            </li>
<li class='fifthanimation' id='fifth'> 
  <a href='#'>
            <img src='http://4.bp.blogspot.com/-lIM3TfL-KTg/VcNCukoyoBI/AAAAAAAAIOY/iE084_fZ5Fc/s1600/free-font-bundle.png'/>
            </a>
            </li>
</ul>
</div></div>
</div></td>

   <td><div class='metro-tile metro-tile-small metro-tile-facebook'><a href='#'><i class='fa fa-facebook'> </i></a></div></td>
     
   <td><div class='metro-tile metro-tile-small metro-tile-twitter'><a href='#'><i class='fa fa-twitter'> </i></a></div></td>
 </tr> </table>
 <table> <tr>
   <td><div class='metro-tile metro-tile-down'>تحميل<span class='Bmesage'><img src='http://1.bp.blogspot.com/-FUMyyg9nJjU/Ve7JtJVIr3I/AAAAAAAAIxU/scXijaD1lfQ/s1600/preview.jpg'/></span></div></td>

   <td><div class='metro-tile metro-tile-gmail'>إنضم للأعضاء<a class='selected' href='https://www.blogger.com/follow-blog.g?blogID=6109045480426282985' target='_blank'><img src='http://4.bp.blogspot.com/-XIUsWdjXFxM/VfA2FrMEagI/AAAAAAAAIyM/Q9WpJDq-Wes/s1600/mouse.png'/></a></div></td>
    
   <td><div class='metro-tile metro-tile-small metro-tile-gplus'><a href='#'><i class='fa fa-google-plus'> </i></a></div></td>
    
  <td><div class='metro-tile metro-tile-small metro-tile-youtube'><a href='#'><i class='fa fa-youtube'> </i></a></div></td>
 </tr> </table> </div> 

<div id='footer'>
<div class='copyhm'>
 <p class='link'>تطوير مدونة <a href='http://www.ar1web.com/' id='wwwar1webcom'>عرب ويب</a></p> 
</div>
</div>
</center></div></div>
</section>

<!-- Slide Musik-->
<section class='slide-holder' id='s2'>
<div class='main-slide slide'>
<div class='slide-content'>
<div class='nama_app'/>
<label for='s1-chk'><div class='home-btn'>الرئيسية</div></label> 
<center>
   <div class='wow bounceInLeft' id='contact-form'>
   <b:section id='contact-ar1web' maxwidgets='1'>
<b:widget id='ContactForm1' locked='false' title='ارسال' type='ContactForm'>
  <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' placeholder='الاسم الكريم' size='30' type='text' value=''/>
        <p/>
         <span style='font-weight: bolder;'/>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' placeholder='البريد الإلكتروني' size='30' type='text' value=''/>
        <p/>
        <span style='font-weight: bolder;'/>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' placeholder='الرسالة' rows='5'/>
        <p/>

        <input class='web' name='website' placeholder='موقعك'/>

        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
            </div>
      <div class='social_network wow bounceInDown'>
              <h3 class='cnt-title'>وسائل اتصال اخرى</h3>

<div id='social_networks'>
<ul>
<li class='sorting-01 facebook' ><a href='#' target='_blank'><i class='fa fa-facebook'/><span class='inv'/></a></li>
<li class='sorting-02 youtube' ><a href='#' target='_blank'><i class='fa fa-youtube'/><span class='inv'/></a></li>
<li class='sorting-03 twitter' ><a href='#' target='_blank'><i class='fa fa-twitter'/><span class='inv'/></a></li>
<li class='sorting-05 googleplus'><a href='#' target='_blank'><i class='fa fa-google-plus'/><span class='inv'/></a></li>
<li class='sorting-04 skype' title='الرئيسية'><a href='/'><i class='fa fa-skype'/><span class='inv'/></a></li>
</ul>
          <div class='other-cnt'>
            <p class='phone'>90 24 31 70 6 212+ </p>
            <p class='emailtxt'>info@ar1web.com</p>
          </div>
            </div></div>

<div id='map-wrapper'>
  <div id='map'/>
    </div>
          
</center></div></div></section>


<!-- Slide 2 with sub slide -->
<section class='slide-holder' id='s3'>
<div class='main-slide slide'>
<div class='slide-content'>
<div class='nama_app'>تدويناتنا</div>
<center>
<label for='s1-chk'><div class='home-btn'>الرئيسية</div></label>
<script type='text/javascript'> 
                  var jumlahposting = 21;
                  var urlblog = &#39;http://www.ar1web.com/&#39;;
                  var minpaginas = 5;
                  var maxpaginas = 10;
                  var thumbs = &#39;http://3.bp.blogspot.com/-Uns9Va0vULA/UNAFKYBy7jI/AAAAAAAAGDU/KIzKGN6Ts90/s1600/iconst.png&#39;;
</script> 
<script language='javascript' src='https://googledrive.com/host/0B0LkZloPKBfWSXZIN3MwcWZZT2c'> 
</script></center></div></div></section></div></div></section>

  </b:if>
التغييرات الاساسية
1. لتغيير شعار المدونة ابحث عن : مدونة عرب ويب ستجد مثل الكود التالي
<div class='welteks1'>مدونة عرب ويب</div>
<div class='welteks2'>الأفضل لكم</div></div>
<div class='welpic'><div class='logoar1web'/><a href='/'><img class='logoar1web' src='http://1.bp.blogspot.com/-pr4Ejjq6fLI/Ve2VPBhu_oI/AAAAAAAAIvk/A6uv34DHTx4/s1600/ar1weblogo.png'/></a></div>
* غير الكلمات ورابط الشعار المحدد بالأحمر
* ملاحظة : يجب أن يكون مقاس الشعار 40x40
2. لتغيير صورة صندوق الاقتباس ابحث عن :
http://i.imgur.com/GuohKnF.jpg
3. لنعدل على صور السلايدر ابحث عن slider-ar1web سيظهر لك الكود التالي غير ما هو محدد بالأحمر برابط الصور ووضع بدل الهاشتاج رابط الموضوع
<li class='firstanimation' id='first'>
            <a href='#'>
            <img src='http://4.bp.blogspot.com/-VR5FTaGnv3c/Vdi_BcUzcsI/AAAAAAAAIds/7LyvbWVnoc0/s1600/mock.png'/>
            </a>
            </li>
            <li class='secondanimation' id='second'>
            <a href='#'>
            <img src='http://2.bp.blogspot.com/-l8qOwCShc_Q/Vd8c4LKqtEI/AAAAAAAAIiU/zQyo5CnSZ0o/s1600/bestwidget.png'/>
            </a>
            </li>
            <li class='thirdanimation' id='third'>
            <a href='#'>
            <img src='http://2.bp.blogspot.com/-L4Aen-EDUYU/VUSkVkJex_I/AAAAAAAAHpU/M3Av5iJaOjQ/s1600/code-geek-designer-wallpapers.png'/>
            </a>
            </li>
<li class='fourthanimation' id='fourth'>
  <a href='#'>
            <img src='http://4.bp.blogspot.com/-jFtmkg6VkQE/Vem-VFe0oJI/AAAAAAAAIsk/o1cg_NFMH-8/s1600/Coverlyblack.png'/>
            </a>
            </li>
<li class='fifthanimation' id='fifth'> 
  <a href='#'>
            <img src='http://4.bp.blogspot.com/-lIM3TfL-KTg/VcNCukoyoBI/AAAAAAAAIOY/iE084_fZ5Fc/s1600/free-font-bundle.png'/>
            </a>
            </li>
4. لإظهار المواضيع بـ"تصفح التدوينات" ابحث عن http://www.ar1web.com/ وغيره برابط موقعك
5. الباقي يمكنك البحث عن الكلمات وتغييرها بما يناسبك ووضع بدل # الرابط
تحية طيبة أعزائي أصدقاء مدونة عرب ويب
كل عام وأنتم بخير بمناسبة عيد الأضحى المبارك، أعاده الله علينا وعليكم بالخير واليمن والبركات، وتقبل الله منا ومنكم صالح الأعمال.

نلقاكم اليوم في تدوينة خاصة وكما وعدناكم بصفحتنا أننا إن وصلنا لـ200 اعجاب على المنشور الخاص بهذه التدوينة فسنطرحه لكم وها قد وفينا بوعدنا واجهة مطورة ومخصصة لكافة المواقع تضم الواجهة 12 مربع كل واحد له دور يمكنك أن تخصصه حسب ذوقك كما أنه يحتوي على نموذج الاتصال وصفحة بها جميع المواضيع المتوفرة بموقعك وبعض المزايا التي ستكتشفونها بالمعاينة. الآن وكما عودناكم سنضع شرح كامل لإضافتهالذا فالمرجو متابعة الشرح جيدا وإن ناسبك فيمكنك أن تجربه على مدونة تجريبية بها نفس قالبك حتى إن واجهتك مشاكل فمرحب أن تضع الرابط بالتعليق مع توضيح المشكل
* ملاجظة مهمة : ينبغي حذف نموذج الاتصال إن كان مضاف
شرح طريقة التركيب
1. ابحث داخل القالب باستعمال Ctrl+F عن </head> ثم ضع الكود التالي فوقه
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
$(function(){
$(&quot;.Bmesage&quot;).click(function(){
$(&quot;.mesageeror&quot;).slideToggle(&#39;slow&#39;);
});
});
</script>
<style>
.container.wrapper { display: none; }
body {background: url(http://1.bp.blogspot.com/-_6FSKX-aee4/VfAbRUTz12I/AAAAAAAAIxk/RSpA4AO315E/s1600/bg-w8.jpg); background-size: cover; background-attachment: fixed; position: absolute; top: 0; bottom: 0; right: 0; left: 0; width: 100%; z-index: 0;}
body:before { content: &quot;&quot;; display: block; opacity: .80; position: absolute; top: 0; bottom: 0; width: 100%; background:linear-gradient(to right,rgb(56, 56, 56) 0%,rgb(213, 52, 52) 100%)}
center { width: 870px; margin: -50px auto; }
@keyframes Cokifram{
0%{transform:translate(0px,0px) scale(0.0);opacity:0.2}
40%{transform:translate(0px,0px) scale(0.50);opacity:0.6;}
60%{transform:translate(0px,0px) scale(0.50);opacity:0.7;}
100%{transform:translate(0px,0px) scale(1);opacity:1;}
}
/*--  Menu Ar1web--*/
#menu {position:fixed;left:0px;top:0px;width:100%;height:48px;border-bottom:solid 1px #cccccc;
background:#0088FF;padding: 0 0 0 0;z-index:100;}
#menu ul {float: left;margin: 0px;padding: 0 0 0 0;width: 960px;list-style: none;}
#menu ul li {display: inline;}
#menu ul li a {font-family:Century Gothic,Helvetica,Arial;-webkit-transition:All 0.5s ease-in-out;-moz-transition:All 0.5s ease-in-out;text-transform:none;float: left;padding: 14px 20px;text-align: left;text-decoration: none;background: #transparent center right no-repeat;font-size:15px;outline: none;color: #ffffff;}
#menu li a:hover{ color:#cccccc}
#menu_bottom{bottom:0px;position:fixed;}
#menu_bottom{  bottom: 0;  left: 0;  float:left; width:100%; height: 26px;padding:0px;margin:0 auto; overflow:auto;overflow:hidden;border-top: 1px solid #cccccc;background:#0088FF;z-index:100; }
#menu_bottom ul{ margin:0; padding:0; list-style:none}
#menu_bottom ul li{padding:0px;  margin:0px;  display:inline;}
#menu_bottom ul li a{border:solid 1px transparent;float:left; display:block; margin:3px; padding:0px;font:normal bold 15px Arial,Sans-Serif;text-align:center;text-decoration:none; color:#fff;  font-weight:bold; outline:none;}
#menu_bottom ul li a:hover {color:#B8B7B7}
#clock { font:normal bold 13px Arial,Sans-Serif; color:#fff;}
.log {  right: 90px; z-index:9999; }
/* clearfix */
.clearfix {
 clear:both;
}
#wrap-ar1web1{width:95%;height:40px;top:10px;margin-bottom:40px;}
#metroku {width:980px; height:40px;  display:block;}
#welcome { width:980px; height:40px; margin-bottom:35px;}
.boxar1web {width: 200px; float: right; background-color: rgba(255, 255, 255, 0.26); margin: 30px -15px}
.welteks {float:left; width:150px; color:#484646;}
.welteks1 { text-align: right; font-size: 15px; font-weight: bold;    font-family: droid arabic kufi;color: #FFFFFF}.welteks2 {font-size:10px; text-align:right; color: #F1F1F1;font-family: droid arabic kufi;}.welpic { float:right;padding:0; width:40px; height:40px; }
.logoar1web{ opacity:1;}
.nama_app{margin: 0 0; font-size: 25px;color: #fff;display: inline-block; padding: 5px; border-radius: 2px!important;text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.36);}
/* slideshow */
.s-input{position:relative;visibility:hidden;}
#slidecanvas {position: absolute;top: 0;left: 0;width: 400%;height: 100%;
 transition: all 2s cubic-bezier(0.785, 0.135, 0.150, 0.860);
 -moz-transition: all 2s cubic-bezier(0.785, 0.135, 0.150, 0.860);
 -webkit-transition: all 2s cubic-bezier(0.785, 0.135, 0.150, 0.860);
 -ms-transition: all 2s cubic-bezier(0.785, 0.135, 0.150, 0.860);
 -o-transition: all 2s cubic-bezier(0.785, 0.135, 0.150, 0.860);}
.slide-holder {position: relative;float:left;width: 25%;height: 100%;}
.slide {width:90%;position: relative;margin: 40px auto;height: 500px; height: -moz-calc(100% - 160px);
height: -webkit-calc(100% - 160px);height: calc(100% - 160px);min-height: 500px;}
.sub-slide {margin-top: 160px;}
.front-slide h2, .front-slide .endtxt {margin:10px 0 20px;font-size:40px;font-family:Century Gothic,Helvetica,Arial;
padding:5px 0;color:#fff;}
.front-slide h2 span{color:#00D2F7;}
.slide-content h2 {margin:10px 0 20px;font-size:40px;font-family:Century Gothic,Helvetica,Arial;padding:5px 0;color:#fff;}
.slide-content {font-size: 18px;}
input.s1-chk:checked ~ #slidecanvas{left: 0;opacity: 1.7;  float: left;-webkit-transition:All 0.5s ease-in-out;-moz-transition:All 0.5s ease-in-out;overflow:hidden;}
input.s2-chk:checked ~ #slidecanvas{left: -100%;overflow:hidden;
opacity: 1.7;  float: left;-webkit-transition:All 0.5s ease-in-out;-moz-transition:All 0.5s ease-in-out;}
input.s3-chk:checked ~ #slidecanvas{left: -200%;overflow:hidden;
opacity: 1.7;  float: left;-webkit-transition:All 0.5s ease-in-out;-moz-transition:All 0.5s ease-in-out;}
input.s4-chk:checked ~ #slidecanvas{left: -300%;overflow:hidden;
opacity: 1.7;  float: left;-webkit-transition:All 0.5s ease-in-out;-moz-transition:All 0.5s ease-in-out;}
input.main-chk:checked , #slidecanvas{top: 0;overflow:hidden;
opacity: 1.7;  float: left;-webkit-transition:All 0.5s ease-in-out;-moz-transition:All 0.5s ease-in-out;}
input.sub1-chk:checked ~ #slidecanvas{top: -100%;}
input.sub2-chk:checked ~ #slidecanvas{top: -200%;}
.home-btn{position:absolute;top:0;float:left;width:50px;height:50px;margin-bottom:10px;
background:url(http://2.bp.blogspot.com/-41ojo3vhh58/UUX5aEJ9PpI/AAAAAAAAINQ/6aelOOye8bg/s1600/close.png) 0 0 no-repeat;text-indent:-999999px;cursor:pointer;z-index:9;}
.home-btn:hover{opacity:0.7}
.baten{cursor: pointer;}
#sitetitle {float: left;display: inline-block;margin: 0 180px 0 90px;}
#photoar1web{background:transparent;height:147px;width:271px;overflow:visible;}
#maskar1web {display:block;overflow:hidden;height:145px;width:271px;}
#photoar1web ul {margin:0;padding:0;position:relative;}
#photoar1web li {width:273px;height:140px;position:absolute;top:0px;list-style:none;}
#photoar1web li.firstanimation {-moz-animation:cycle 25s linear infinite;-webkit-animation:cycle 25s linear infinite;}
#photoar1web li.secondanimation {-moz-animation:cycletwo 25s linear infinite;-webkit-animation:cycletwo 25s linear infinite;}
#photoar1web li.thirdanimation {-moz-animation:cyclethree 25s linear infinite;-webkit-animation:cyclethree 25s linear infinite;}
#photoar1web li.fourthanimation {-moz-animation:cyclefour 25s linear infinite;-webkit-animation:cyclefour 25s linear infinite;}
#photoar1web li.fifthanimation {-moz-animation:cyclefive 25s linear infinite;-webkit-animation:cyclefive 25s linear infinite;}
#photoar1web .tooltip {color#fff;background:#fff;width:200px;height:20px;position:relative;bottom:0px;left:-80px;-moz-transition:all 0.3s ease-in-out;-webkit-transition:all 0.3s ease-in-out;  }
#photoar1web.tooltip h1 {color:#fff;
 font-size:11px;
 font-weight:10;
 line-height:10px;
 padding:0 0 0 20px;
}
#photoar1web li#first:hover .tooltip, 
#photoar1web li#second:hover .tooltip, 
#photoar1web li#third:hover .tooltip, 
#photoar1web li#fourth:hover .tooltip, 
#photoar1web li#fifth:hover .tooltip {
 left:0px;}
#photoar1web:hover li, 
#photoar1web:hover .progress-bar {-moz-animation-play-state:paused;-webkit-animation-play-state:paused;
}
@-moz-keyframes cycle {
 0%  { top:0px; }
 4%  { top:0px; } 
 16% { top:0px; opacity:1; z-index:0; } 
 20% { top:180px; opacity:0; z-index:0; } 
 21% { top:-180px; opacity:0; z-index:-1; }
 92% { top:-180px; opacity:0; z-index:0; }
 96% { top:-180px; opacity:0; }
 100%{ top:0px; opacity:1; }

}
@-moz-keyframes cycletwo {
 0%  { top:-180px; opacity:0; }
 16% { top:-180px; opacity:0; }
 20% { top:0px; opacity:1; }
 24% { top:0px; opacity:1; } 
 36% { top:0px; opacity:1; z-index:0; } 
 40% { top:180px; opacity:0; z-index:0; }
 41% { top:-180px; opacity:0; z-index:-1; } 
 100%{ top:-180px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclethree {
 0%  { top:-180px; opacity:0; }
 36% { top:-180px; opacity:0; }
 40% { top:0px; opacity:1; }
 44% { top:0px; opacity:1; } 
 56% { top:0px; opacity:1; } 
 60% { top:180px; opacity:0; z-index:0; }
 61% { top:-180px; opacity:0; z-index:-1; } 
 100%{ top:-180px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefour {
 0%  { top:-180px; opacity:0; }
 56% { top:-180px; opacity:0; }
 60% { top:0px; opacity:1; }
 64% { top:0px; opacity:1; }
 76% { top:0px; opacity:1; z-index:0; }
 80% { top:180px; opacity:0; z-index:0; }
 81% { top:-180px; opacity:0; z-index:-1; }
 100%{ top:-180px; opacity:0; z-index:-1; }
}
@-moz-keyframes cyclefive {
 0%  { top:-180px; opacity:0; }
 76% { top:-180px; opacity:0; }
 80% { top:0px; opacity:1; }
 84% { top:0px; opacity:1; }
 96% { top:0px; opacity:1; z-index:0; }
 100%{ top:180px; opacity:0; z-index:0; }
}

@-webkit-keyframes cycle {
 0%  { top:0px; }
 4%  { top:0px; }
 16% { top:0px; opacity:1; z-index:0; } 
 20% { top:180px; opacity:0; z-index:0; }
 21% { top:-180px; opacity:0; z-index:-1; }
 50% { top:-180px; opacity:0; z-index:-1; }
 92% { top:-180px; opacity:0; z-index:0; }
 96% { top:-180px; opacity:0; }
 100%{ top:0px; opacity:1; }
 
}
@-webkit-keyframes cycletwo {
 0%  { top:-180px; opacity:0; }
 16% { top:-180px; opacity:0; }
 20% { top:0px; opacity:1; }
 24% { top:0px; opacity:1; } 
 36% { top:0px; opacity:1; z-index:0; } 
 40% { top:180px; opacity:0; z-index:0; }
 41% { top:-180px; opacity:0; z-index:-1; }  
 100%{ top:-180px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclethree {
 0%  { top:-180px; opacity:0; }
 36% { top:-180px; opacity:0; }
 40% { top:0px; opacity:1; }
 44% { top:0px; opacity:1; } 
 56% { top:0px; opacity:1; z-index:0; } 
 60% { top:180px; opacity:0; z-index:0; } 
 61% { top:-180px; opacity:0; z-index:-1; }
 100%{ top:-180px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefour {
 0%  { top:-180px; opacity:0; }
 56% { top:-180px; opacity:0; }
 60% { top:0px; opacity:1; }
 64% { top:0px; opacity:1; }
 76% { top:0px; opacity:1; z-index:0; }
 80% { top:180px; opacity:0; z-index:0; }
 81% { top:-180px; opacity:0; z-index:-1; }
 100%{ top:-180px; opacity:0; z-index:-1; }
}
@-webkit-keyframes cyclefive {
 0%  { top:-180px; opacity:0; }
 76% { top:-180px; opacity:0; }
 80% { top:0px; opacity:1; }
 84% { top:0px; opacity:1; }
 96% { top:0px; opacity:1; z-index:0; }
 100%{ top:180px; opacity:0; z-index:0; }
}
.metro-surface{padding: 40px 0px 0px 0px;}
.metro-tile { 
    animation: zoomnav 2s;
    width: 260px;
    height: 135px;
    padding: 5px;
    color: #FFF;
    font-size: 15px;
    cursor: default;
    transition: 0.1s all;}
.metro-tile-small { margin: 0 auto; width: 140px; height: 135px; animation: zoomnav 2s;}
.metro-tile-google {background-position:center;background-color: #009719;}
.metro-tile-mail {background-position: center; background-color: #ECE641;}
.metro-tile-mail img { width: 70%; margin-right: 20px; margin-top: 10px; }
.metro-tile-net {background-position:center; background-color:#F7743A;}
.metro-tile-post { background-position: center; background-color: #E88A2D;  }
i.fa.fa-gift { color: #fff; }
.metro-tile-net img { width: 80%; margin-right: 14px; margin-top: 18px; }
.metro-tile-ri {background-color: #382632;background-position:center}
.metro-tile-msg { background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/74/Friedrich_Schiller_by_Ludovike_Simanowiz.jpg/241px-Friedrich_Schiller_by_Ludovike_Simanowiz.jpg); font-family: cursive,&#39;Adobe Arabic&#39;; font-size: 20px; background-size: cover; position: relative;     margin: 7px 0;}
.metro-tile-msg:after { content: &quot;\f10d&quot;; font-family: FontAwesome; float: left; font-size: 30px; color: rgba(255, 255, 255, 0.89); }
.metro-tile-ri img { margin-top: -20px; margin-right: 7px; }
.metro-tile-player {margin: 0 0;
    animation: zoomnav 2s;
    position: relative;
    display: block;
    width: 271px;
    height: 145px;
    color: #FFF;
    font-size: 15px;
    cursor: default;
    transition: 0.1s all;    overflow: hidden;}

.metro-tile-facebook {background-color: #3B5998;}
.metro-tile-twitter{background-color: #55ACEE;}
.metro-tile-gplus {background-color: #E82626;}
.metro-tile-youtube {background-color:#CC181E;}
.metro-tile-facebook,.metro-tile-twitter,.metro-tile-gplus,.metro-tile-youtube{color: #FFF; text-align: center; font-size: 45px; line-height: 3.2; text-shadow: 2px 2px 0px rgba(76, 75, 75, 0.36);}
.metro-tile-down {background: #2D3E50;}
.metro-tile-down img { width: 80%; margin-right: 25px; }
.metro-tile-down:before { content: &quot;\f019&quot;; font-family: FontAwesome; font-size: 30px; color: rgba(255, 255, 255, 0.89); margin-left: 10px; float: right; line-height: 1;}
.metro-tile-gmail {background-position:center;background-color:#67D093;}
.metro-tile-gmail img {width: 55%; margin-right: 119px; margin-top: -25px;}
#wrapper-ar1web {
    font-family: electrolize,&#39;Droid Arabic Naskh&#39;, serif;
}
div.metro-tile:active {
-webkit-transform: scale(0.97) perspective(400px) rotateY(0deg) rotateX(0deg);
 -moz-transform: scale(0.97) perspective(400px) rotateY(0deg) rotateX(0deg);
 -ms-transform: scale(0.97) perspective(400px) rotateY(0deg) rotateX(0deg);
 transform: scale(0.97) perspective(400px) rotateY(0deg) rotateX(0deg);}
#footer p { font-size: 12px; margin: 10px 0; padding: 10px; text-align: center; color: #fff; }
#footer { background-color: rgba(255, 88, 38, 0.67); margin: 0 auto; width: 98.6%; border-radius: 1px!important; visibility: hidden; }

/*ANIMASI METRO*/
@-webkit-keyframes zoomnav{from{-webkit-transform:translate(-1000px,0px);opacity:0}
to{-webkit-transform:translate(0px,0px);opacity:1.1;}}
@-moz-keyframes zoomnav{from{-moz-transform:translate(-1000px,0px);opacity:0}
to{-moz-transform:translate(0px,0px);opacity:1.1;}}
@-ms-keyframes zoomnav{from{-ms-transform:translate(-1000px,0px);opacity:0}
to{-ms-transform:translate(0px,0px);opacity:1.1;}}
@keyframes zoomnav{from{transform:translate(-1000px,0px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}}

#totales{color: #FFFFFF; font-family: Electrolize,ge_ss_threeregular; font-size: 13px; background-color: rgba(232, 63, 73, 0.4); width: 26%; border: 1px solid rgba(206, 57, 59, 0.33); margin-top: -40px;}
span.nextprev-link { color: #FFFFFF; text-decoration: none; margin-left: 20px; background-color: rgba(218, 88, 88, 0.5); padding: 2px; border: 2px solid #ECECEC; font-family: droid arabic kufi; font-size: 12px; }
span.actual { font-family: electrolize; letter-spacing: 0.3em; }
a:hover { color: #FFFFFF; text-decoration: underline; }
a { color: #E0DEDD; }
  #paginacion {
    color: #FFFFFF;position: relative;
        bottom: 50px;    font-family: &#39;Tahoma&#39;, arial;
}a.nextprev-link {     margin-left: 30px;
    color: #FFFFFF;
    text-decoration: none;
    margin-right: 20px;
    background-color: rgba(255, 255, 255, 0.58);
    padding: 2px;
    border: 2px solid #ECECEC;
    font-family: droid arabic kufi;
    font-size: 12px;}

#daftar-isi-body{width:990px; height:100%; margin-top:10%;} 
#daftar-isi-wrap{ margin:0 auto}
 .box-posting{text-align: right; cursor: pointer; float: right; height: 140px; width: 310px; margin: -80px 20px 0 0;}
 .box-posting img {padding:5px;padding-right:285px;background:rgba(80, 77, 77, 0.62) ;height:40px; width:35px; margin:20px 0 0 25px; float:left;    box-shadow: 0 0 3px #151414;}
 .box-posting .judul-posting {text-align:left; float:left; height:10px;width:300px}
 .box-posting .judul-posting a{text-align: right;text-decoration: none;color: #FFFFFF; margin: -33px 0 0 0; display: block; font-size: 10px !important; font-weight: bold !important;direction: rtl;} 
i.fa.fa-facebook,i.fa.fa-twitter,i.fa.fa-google-plus,i.fa.fa-youtube { color: #fff; }
 
* {
    -webkit-box-sizing: inherit!important;
}
.metro-tile-post img {
    width: 40%;
    margin-right: 130px;
}

#maskar1web img {
   width: 100%;
    height: 110%;
    overflow: hidden;
    max-width: 1000px;
}

table {
    border-spacing: 5px!important;
    border-collapse: initial!important;
}

.mesageeror{z-index:999999;width:100%;height:auto;position:fixed; top:0px;right:0;display:none; background:rgba(45, 62, 80, 0.91);-moz-transition:All 0.5s ease-in-out;padding:10px;}
.Bmesage {background:transparent;overflow:hidden;cursor: pointer;
  -ms-filter: &quot;progid:DXImageTransform.Microsoft.Alpha(Opacity=100)&quot;filter: alpha(opacity=100);    color: #fff;
opacity: 1.7;}
@keyframes Cokifram{
0%{transform:translate(0px,0px) scale(0.0);opacity:0.2}
40%{transform:translate(0px,0px) scale(0.50);opacity:0.6;}
60%{transform:translate(0px,0px) scale(0.50);opacity:0.7;}
100%{transform:translate(0px,0px) scale(1);opacity:1;}
}
h3.cnt-title { color: #fff; }
.social_network { background: rgba(86, 84, 84, 0.33); margin: 0 0; padding: 10px; overflow: hidden; float: right; width: 344px; height: 254px; box-shadow: 0 0 7px #4E4D4D;} i.fa.fa-skype { color: #fff; } #social_networks{ text-align: center;display: block;clear: both;padding: 15px; margin: 20px 0;} #social_networks ul {display:block;margin:0 auto;padding:0;list-style:none;} #social_networks li{text-align:center;display:inline-block;margin:0 5px;width:36px; height:36px;transition:All 0.6s ease-out;} #social_networks li:hover{color:#eee;cursor:pointer;} #social_networks li:hover a{color:#fff;} #social_networks li a{display:inline-block;color:#aaa;line-height:36px;font-size:1.2em;transition:All 0.3s ease-out;} #social_networks li a:hover{color:#fff;} #social_networks li a span{display:none;} #social_networks li.facebook,#social_networks li.twitter,#social_networks li.youtube,#social_networks li.googleplus,#social_networks li.skype{text-align: center; background: rgba(53, 51, 51, 0.35); cursor: pointer; border-radius: 50%!important; font-size: 12px;} #social_networks li a.facebook:hover,#social_networks li a.twitter:hover,#social_networks li a.youtube:hover,#social_networks li a.googleplus:hover,#social_networks li a.skype:hover{color:#fff;} #social_networks li.skype:hover,#social_networks li.twitter:hover { color: #fff; box-shadow: 0 0 0 1px #51B2EC; background-color: #54B9F5; } #social_networks li.googleplus:hover,#social_networks li.youtube:hover { color: #fff; box-shadow: 0 0 0 1px #EC5151; background-color: #F14949; } #social_networks li.facebook:hover { color: #fff; box-shadow: 0 0 0 1px #2E7BF1; background-color: #3B8CEC; } .contactme{float:right;} #map-wrapper{width:97.2%;margin-top:15px;float:left;background:rgba(86, 84, 84, 0.33);padding:10px;overflow:hidden;    box-shadow: 0 0 7px #3E3C3C;} .other-cnt { font: normal 12px tahoma; line-height: 1.8em; padding: 5px; margin: 50px auto; color: #FFF; width: 90%;} .other-cnt .phone { background: url(http://1.bp.blogspot.com/-V_DloDDdIXY/U0Kit9aALyI/AAAAAAAACso/_x38DF7Gpwg/s1600/phone.png) no-repeat 100%; padding: 0 22px 0 0; } .other-cnt .emailtxt{ background: url(http://4.bp.blogspot.com/-wlTIF2gBejc/U0Kit3qFbHI/AAAAAAAACsk/slQdddMYBS8/s1600/inbox.png) no-repeat 100%; padding: 0 22px 0 0; }
#buttonar1web { border: #EBF535 solid 2px; color: #FFFFFF; display: inline-block; font-size: 0.545em; font-weight: bold; padding: 5px 20px; text-transform: uppercase; text-decoration: none; margin: 20px 0; }#buttonar1web:hover { border: #FFFFFF solid 2px; color: #EBF535; }

@media (max-width: 767px) {
    .slide {
    width: 100%;
}
#contact-form { float: none; margin: 0 auto; width: 100%; }
center {
    width: 50%;
    margin: 0 auto;
}

.boxar1web {
    float: none;
    background-color: rgba(255, 255, 255, 0.26);
    margin: 0 auto;
}
#wrap-ar1web1 {
    width: 120%;
    height:0;
    margin:0 0;
}
.metro-tile-player { position: relative; left: 63px; }
    .metro-tile-msg,.metro-tile-ri,.metro-tile-gmail,#map-wrapper,.social_network,#daftar-isi-body,.metro-tile-facebook, .metro-tile-twitter, .metro-tile-gplus, .metro-tile-youtube,.metro-tile-down,.metro-tile-post,.metro-tile-mail{ display: none!important; }
}


</style>
</b:if>
2. ابحث عن <body> ثم ضع الكود التالي اسفله
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<link href='//ar1web-com.googlecode.com/svn/trunk/animate.css' rel='stylesheet'/>
<div class='mesageeror'> 
<div style='float: right; margin-right: 10px;'> 
<span class='Bmesage'>X</span></div> 
<div style='color: white; font-family: droid arabic kufi; font-size: 26px; text-align: center;'> 
إن كنت من مشرفي المدونة فيمكنك تحميله &amp;#x1F636;<br/> 
<a href='#' id='buttonar1web' target='_blank'>تحميل</a>
</div> 
</div>

<section id='wrapper-ar1web'>
<div id='slideshow'>
 <!-- radio button for each presentation slide -->
 <input class='s1-chk main-chk s-input' id='s1-chk' name='slide' type='radio'/>
 <input class='s2-chk main-chk s-input' id='s2-chk' name='slide' type='radio'/>
 <input class='s2-chk sub1-chk s-input' id='s2-sub1-chk' name='slide' type='radio'/>

  <input class='s3-chk main-chk s-input' id='s3-chk' name='slide' type='radio'/>
 <input class='s3-chk sub1-chk s-input' id='s3-sub1-chk' name='slide' type='radio'/>

 <!-- A slideshow canvas -->
 <div id='slidecanvas'>
  <!-- Slide 1 -->
  <section class='slide-holder' id='s1'>
   <div class='main-slide slide'>
    <div class='front-slide'>
<center>
<div id='wrap-ar1web1'>
<div class='boxar1web'>
<div class='welteks'>
<div class='welteks1'>مدونة عرب ويب</div>
<div class='welteks2'>الأفضل لكم</div></div>
<div class='welpic'><div class='logoar1web'/><a href='/'><img class='logoar1web' src='http://1.bp.blogspot.com/-pr4Ejjq6fLI/Ve2VPBhu_oI/AAAAAAAAIvk/A6uv34DHTx4/s1600/ar1weblogo.png'/></a></div>
</div></div>
<div id='welcome'>
</div>
<div style='margin-top:-5%;'>
<table><tr><td>
<div class='metro-tile metro-tile-small metro-tile-mail'>راسلنا
<label for='s2-chk'><div class='baten'>
<img src='http://2.bp.blogspot.com/-Ak3EhfQaFqA/Ve7IpaeHGcI/AAAAAAAAIxM/WnhMYvDueTo/s1600/flat-mail-icon.png'/>
</div></label></div></td>

   <td><div class='metro-tile metro-tile-small metro-tile-net'>الدخول للمدونة<a href='/search/?max-results=6'><img src='http://2.bp.blogspot.com/-5ML7rey21cg/Ve3bWIqoL8I/AAAAAAAAIwM/AuiK8r7rFGs/s1600/flat-apple-computer.png'/></a></div></td>

  <td><div class='metro-tile metro-tile-post'>تصفح التدوينات
<label for='s3-chk'><div class='baten'>
<img src='http://3.bp.blogspot.com/-sKkpmAgGwoU/Ve3gK0BTknI/AAAAAAAAIwc/4nznIBcvVqs/s1600/document.png'/>
</div></label></div></td>

<td><div class='metro-tile metro-tile-ri'>هدايا<a href='http://www.ar1web.com/p/gifts.html'><img src='http://1.bp.blogspot.com/-Nzxxl5_okEE/Ve3RC3ztHPI/AAAAAAAAIv8/l8z4sIHjAL4/s1600/gifts.png'/></a></div></td>
     </tr> </table>
<table> <tr>
 <td><div class='metro-tile metro-tile-msg'><p>
لماذا يجب أن أكون فرشاة وألوان وبيدي أن أكون أنا الفنان&#1567; 


&quot;فريدريك فون شيلر&quot;
</p>

</div></td>
    
   <td><div class='metro-tile-player'>
<div id='photoar1web'>
         <div id='maskar1web'>
            <ul>
            <li class='firstanimation' id='first'>
            <a href='#'>
            <img src='http://4.bp.blogspot.com/-VR5FTaGnv3c/Vdi_BcUzcsI/AAAAAAAAIds/7LyvbWVnoc0/s1600/mock.png'/>
            </a>
            </li>
            <li class='secondanimation' id='second'>
            <a href='#'>
            <img src='http://2.bp.blogspot.com/-l8qOwCShc_Q/Vd8c4LKqtEI/AAAAAAAAIiU/zQyo5CnSZ0o/s1600/bestwidget.png'/>
            </a>
            </li>
            <li class='thirdanimation' id='third'>
            <a href='#'>
            <img src='http://2.bp.blogspot.com/-L4Aen-EDUYU/VUSkVkJex_I/AAAAAAAAHpU/M3Av5iJaOjQ/s1600/code-geek-designer-wallpapers.png'/>
            </a>
            </li>
<li class='fourthanimation' id='fourth'>
  <a href='#'>
            <img src='http://4.bp.blogspot.com/-jFtmkg6VkQE/Vem-VFe0oJI/AAAAAAAAIsk/o1cg_NFMH-8/s1600/Coverlyblack.png'/>
            </a>
            </li>
<li class='fifthanimation' id='fifth'> 
  <a href='#'>
            <img src='http://4.bp.blogspot.com/-lIM3TfL-KTg/VcNCukoyoBI/AAAAAAAAIOY/iE084_fZ5Fc/s1600/free-font-bundle.png'/>
            </a>
            </li>
</ul>
</div></div>
</div></td>

   <td><div class='metro-tile metro-tile-small metro-tile-facebook'><a href='#'><i class='fa fa-facebook'> </i></a></div></td>
     
   <td><div class='metro-tile metro-tile-small metro-tile-twitter'><a href='#'><i class='fa fa-twitter'> </i></a></div></td>
 </tr> </table>
 <table> <tr>
   <td><div class='metro-tile metro-tile-down'>تحميل<span class='Bmesage'><img src='http://1.bp.blogspot.com/-FUMyyg9nJjU/Ve7JtJVIr3I/AAAAAAAAIxU/scXijaD1lfQ/s1600/preview.jpg'/></span></div></td>

   <td><div class='metro-tile metro-tile-gmail'>إنضم للأعضاء<a class='selected' href='https://www.blogger.com/follow-blog.g?blogID=6109045480426282985' target='_blank'><img src='http://4.bp.blogspot.com/-XIUsWdjXFxM/VfA2FrMEagI/AAAAAAAAIyM/Q9WpJDq-Wes/s1600/mouse.png'/></a></div></td>
    
   <td><div class='metro-tile metro-tile-small metro-tile-gplus'><a href='#'><i class='fa fa-google-plus'> </i></a></div></td>
    
  <td><div class='metro-tile metro-tile-small metro-tile-youtube'><a href='#'><i class='fa fa-youtube'> </i></a></div></td>
 </tr> </table> </div> 

<div id='footer'>
<div class='copyhm'>
 <p class='link'>تطوير مدونة <a href='http://www.ar1web.com/' id='wwwar1webcom'>عرب ويب</a></p> 
</div>
</div>
</center></div></div>
</section>

<!-- Slide Musik-->
<section class='slide-holder' id='s2'>
<div class='main-slide slide'>
<div class='slide-content'>
<div class='nama_app'/>
<label for='s1-chk'><div class='home-btn'>الرئيسية</div></label> 
<center>
   <div class='wow bounceInLeft' id='contact-form'>
   <b:section id='contact-ar1web' maxwidgets='1'>
<b:widget id='ContactForm1' locked='false' title='ارسال' type='ContactForm'>
  <b:includable id='main'>
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='contact-form-widget'>
    <div class='form'>
      <form name='contact-form'>
        <p/>
        
        <br/>
        <input class='contact-form-name' expr:id='data:widget.instanceId + &quot;_contact-form-name&quot;' name='name' placeholder='الاسم الكريم' size='30' type='text' value=''/>
        <p/>
         <span style='font-weight: bolder;'/>
        <br/>
        <input class='contact-form-email' expr:id='data:widget.instanceId + &quot;_contact-form-email&quot;' name='email' placeholder='البريد الإلكتروني' size='30' type='text' value=''/>
        <p/>
        <span style='font-weight: bolder;'/>
        <br/>
        <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + &quot;_contact-form-email-message&quot;' name='email-message' placeholder='الرسالة' rows='5'/>
        <p/>

        <input class='web' name='website' placeholder='موقعك'/>

        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + &quot;_contact-form-submit&quot;' expr:value='data:contactFormSendMsg' type='button'/>
        <p/>
        <div style='text-align: center; max-width: 222px; width: 100%'>
          <p class='contact-form-error-message' expr:id='data:widget.instanceId + &quot;_contact-form-error-message&quot;'/>
          <p class='contact-form-success-message' expr:id='data:widget.instanceId + &quot;_contact-form-success-message&quot;'/>
        </div>
      </form>
    </div>
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
            </div>
      <div class='social_network wow bounceInDown'>
              <h3 class='cnt-title'>وسائل اتصال اخرى</h3>

<div id='social_networks'>
<ul>
<li class='sorting-01 facebook' ><a href='#' target='_blank'><i class='fa fa-facebook'/><span class='inv'/></a></li>
<li class='sorting-02 youtube' ><a href='#' target='_blank'><i class='fa fa-youtube'/><span class='inv'/></a></li>
<li class='sorting-03 twitter' ><a href='#' target='_blank'><i class='fa fa-twitter'/><span class='inv'/></a></li>
<li class='sorting-05 googleplus'><a href='#' target='_blank'><i class='fa fa-google-plus'/><span class='inv'/></a></li>
<li class='sorting-04 skype' title='الرئيسية'><a href='/'><i class='fa fa-skype'/><span class='inv'/></a></li>
</ul>
          <div class='other-cnt'>
            <p class='phone'>90 24 31 70 6 212+ </p>
            <p class='emailtxt'>info@ar1web.com</p>
          </div>
            </div></div>

<div id='map-wrapper'>
  <div id='map'/>
    </div>
          
</center></div></div></section>


<!-- Slide 2 with sub slide -->
<section class='slide-holder' id='s3'>
<div class='main-slide slide'>
<div class='slide-content'>
<div class='nama_app'>تدويناتنا</div>
<center>
<label for='s1-chk'><div class='home-btn'>الرئيسية</div></label>
<script type='text/javascript'> 
                  var jumlahposting = 21;
                  var urlblog = &#39;http://www.ar1web.com/&#39;;
                  var minpaginas = 5;
                  var maxpaginas = 10;
                  var thumbs = &#39;http://3.bp.blogspot.com/-Uns9Va0vULA/UNAFKYBy7jI/AAAAAAAAGDU/KIzKGN6Ts90/s1600/iconst.png&#39;;
</script> 
<script language='javascript' src='https://googledrive.com/host/0B0LkZloPKBfWSXZIN3MwcWZZT2c'> 
</script></center></div></div></section></div></div></section>

  </b:if>
التغييرات الاساسية
1. لتغيير شعار المدونة ابحث عن : مدونة عرب ويب ستجد مثل الكود التالي
<div class='welteks1'>مدونة عرب ويب</div>
<div class='welteks2'>الأفضل لكم</div></div>
<div class='welpic'><div class='logoar1web'/><a href='/'><img class='logoar1web' src='http://1.bp.blogspot.com/-pr4Ejjq6fLI/Ve2VPBhu_oI/AAAAAAAAIvk/A6uv34DHTx4/s1600/ar1weblogo.png'/></a></div>
* غير الكلمات ورابط الشعار المحدد بالأحمر
* ملاحظة : يجب أن يكون مقاس الشعار 40x40
2. لتغيير صورة صندوق الاقتباس ابحث عن :
http://i.imgur.com/GuohKnF.jpg
3. لنعدل على صور السلايدر ابحث عن slider-ar1web سيظهر لك الكود التالي غير ما هو محدد بالأحمر برابط الصور ووضع بدل الهاشتاج رابط الموضوع
<li class='firstanimation' id='first'>
            <a href='#'>
            <img src='http://4.bp.blogspot.com/-VR5FTaGnv3c/Vdi_BcUzcsI/AAAAAAAAIds/7LyvbWVnoc0/s1600/mock.png'/>
            </a>
            </li>
            <li class='secondanimation' id='second'>
            <a href='#'>
            <img src='http://2.bp.blogspot.com/-l8qOwCShc_Q/Vd8c4LKqtEI/AAAAAAAAIiU/zQyo5CnSZ0o/s1600/bestwidget.png'/>
            </a>
            </li>
            <li class='thirdanimation' id='third'>
            <a href='#'>
            <img src='http://2.bp.blogspot.com/-L4Aen-EDUYU/VUSkVkJex_I/AAAAAAAAHpU/M3Av5iJaOjQ/s1600/code-geek-designer-wallpapers.png'/>
            </a>
            </li>
<li class='fourthanimation' id='fourth'>
  <a href='#'>
            <img src='http://4.bp.blogspot.com/-jFtmkg6VkQE/Vem-VFe0oJI/AAAAAAAAIsk/o1cg_NFMH-8/s1600/Coverlyblack.png'/>
            </a>
            </li>
<li class='fifthanimation' id='fifth'> 
  <a href='#'>
            <img src='http://4.bp.blogspot.com/-lIM3TfL-KTg/VcNCukoyoBI/AAAAAAAAIOY/iE084_fZ5Fc/s1600/free-font-bundle.png'/>
            </a>
            </li>
4. لإظهار المواضيع بـ"تصفح التدوينات" ابحث عن http://www.ar1web.com/ وغيره برابط موقعك
5. الباقي يمكنك البحث عن الكلمات وتغييرها بما يناسبك ووضع بدل # الرابط
47 Blogger تعليقات
Disqus
47 التعليقات
المشرف
avatar

شكراااا اخي انت رائع

المشرف
avatar

جميل جدا تسمل ايدك وكل عام وانت بخير ارجو ان تنزل موضوع حول سكربت الزيارات كما فى قالبك واذا من الممكن ان درس حول اضافغة البوستراب الى بلوجر

المشرف
avatar

شكرا اخي
عيد مبارك سعيد
ارجووك مممكن قالب مدونتك الحالي

المشرف
avatar

رائع اخي حسام

أزال أحد مشرفي المدونة هذا التعليق. - حذف
المشرف
avatar

علينا وعليك، للأسف اخي لا يمكن مشاركة القالب

المشرف
avatar

العفو، مرورك اروع

المشرف
avatar

اخى انا عندى مشكله فى قالب رسالتى هو لا يظهر التعليقات ما انا عدد التعليقات ظهاره
واستخدمت قالب اخر ظهرت التعليقات هل يوجد حل اخى

المشرف
avatar

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

المشرف
avatar

حسنا شكرا اخي على اي حال
شكرا

المشرف
avatar

وةللة لاهعرف تخير صور فلى لوكر كيف اوخير او اوحملة

المشرف
avatar

مرحبا اخي حسام ممكن سوال كيف اضافت الابتسامات في تعليقات وال مواضيع

المشرف
avatar

أهلا يمكنك إضافة تعليقات بها ابتسامات بالتدوينات التالية :
http://www.ar1web.com/2015/06/threaded-comment-hack-v1.html
http://www.ar1web.com/2015/07/threaded-comment-hack-v2.html
للمواضيع من هنا : http://www.ar1web.com/2015/06/emoticons-in-post-blogger.html

المشرف
avatar

يا اخى بعد اذنك اريد مساعده منك ارجوك ان رايت التعليق ان تساعدنى ارجوك واسف على وضع هذا الطلب هنا
هذا القالب http://www.mrkzgulf.com/do.php?id=57226
ولكن عند وضعه على المدونة يقولى حدث خطاء ارجوك ساعدنى واسف على ازعاجك
ارجو الرررررررد

المشرف
avatar

القالب ممتلئ أخطاء وليس صالح للتدوين بتاتا آسف لا يمكنني تضيع الوقت في اصلاحه... لماذا لا تطلب ممن حملته عنده!؟

المشرف
avatar

انا اخذت القالب بهذا الطريقة التى فى الصورة http://www.mrkzgulf.com/do.php?img=57694
لنا صاحب القالب يريد من حصل على القالب يدفع له فلوس وانا لا املك اى فلوس وعندما جربت وضع القالب فى المدونة لم يقبل
فجات اطلب منك المساعده هذا ما حصل اخى فهل يمكنك انا تساعدنى ارجوك ارجوك
ولن اطلب منك شئ اخر اعدك ولكن ساعدنى ارجوك

المشرف
avatar

للأسف اخي لا يمكنني المساعدة فتلك ليست طريقتي للعمل، اعتذر

المشرف
avatar

تركيب الواجهة
حصلة لي مشكله بتركيب القالب تداخل الواجهه
تركيب الواجهة

المشرف
avatar
المشرف
avatar

أرسل قالبك للبريد الذي بالموضوع

المشرف
avatar

لا أستطيع تركيب الواجهة لانها تختلط مع القالب عند تركيبها
القالب:http://www.mediafire.com/view/ss3dmd5w6cmmkm1/%D9%82%D8%A7%D9%84%D8%A8_%D9%85%D8%AC%D9%84%D8%A9_%D9%88%D9%81%D8%A7%D9%82_%D9%85%D9%86_%D9%88%D9%8A%D8%A8_%D9%86%D8%A7%D9%8A%D8%AA.xml

أرجو إرسال القالب بعد تركيب الواجهة هنا :Www.fb.com/ahmedelemam4
أو ahmedelemam2028@gmail.com
وشكرا أخى حسام وبالتوفيق

المشرف
avatar

شكراااا اخي

المشرف
avatar

wa walo a sadi9i 7laf Mydrol Wa9tma Ndir Kikhrb9 Liya Kolchiii Mais Mrc khoyaa

المشرف
avatar

hanta chof fl bedaya dyal had lwasm : <style>
7et had les codes men t7to o radi iban mzyan:

#menu,#header-wrapper,.navcontainer,#container,#menu-wrap{display: none!} img{border: none!important;}

المشرف
avatar

فى مشكلة الواجهه بتظهر اوك مفيش مشاكل وللكن بتظهر خلفها المدونة

المشرف
avatar

ممكن قالب متوافق معها من قوالبكم لأنه يختلط مع القالب

المشرف
avatar

يجب إخفاء الأدوات لأن كل قالب وأكواده، أترك رابط للمعاينة

المشرف
avatar

لن يتوافق مع القالب 100% لأن الأكواد تختلف حسب كل قالب سأساعدك بإظهارها بالشكل الطبيعي أترك رابط للمعاينة

المشرف
avatar

استمر والله مدونه اكثر من رائعه

المشرف
avatar

مرحبا فيك يامن نورت المدونه بتعليقك شكرا

المشرف
avatar

اخي انا بيظهر ليا هاد الكلام More than one widget was found with id: ContactForm1. Widget IDs should be unique.

المشرف
avatar

لديك نموذج الاتصال متكرر أحذفه أول وأعد تركيب الواجهة

المشرف
avatar

هناك مشكلة تخرج هاذي الرسالة
More than one widget was found with id: ContactForm1. Widget IDs should be unique

المشرف
avatar

عليك بحذف اداة نموذج الاتصال بالتخطيط قبل التركيب

المشرف
avatar

Khoya makatbghi ga3 Tkhrej !!!

المشرف
avatar

كيف اغير تدويناتك بتدويناتي في تصفح التدوينات

المشرف
avatar

ابحث عن http://www.ar1web.com/ وغيره برابط موقعك

المشرف
avatar

عندما أقوم بحفظ القالب يعطيني هكذا
More than one widget was found with id: ContactForm 1. Widget IDs should be unique.

المشرف
avatar

لديك نموذج الاتصال متكرر أحذفه أول وأعد تركيب الواجهة

المشرف
avatar

ما الحل أخىhttp://emo-3rbey.blogspot.com.eg/

المشرف
avatar

جرب اضافة الأكواد التالية في كود الستايل أسفل <style

.ar1web-wrapper,.top-ar1web,#footer-wrapper{display: none;}

المشرف
avatar

emo-3rbey.blogspot.com.eg عند الدخول للمدونة لا تظهر وهناك عدم توافق فى الواجهة (السيلايدر )♥

المشرف
avatar

هل أضفت الكود في داخل أكواد الواجهة؟

المشرف
avatar

لم يتفعل مع مدونتي

المشرف
avatar

السلام عليكم يا أخي ، لدي مدونة خاصة ، لكن أريد أن أقوم عمل خلفية فقط كما فعلتم مع المدونة التي استعملتم في المعاينة ، وشكرا لكم

المشرف
avatar

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

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق
1أن يكون التعليق خاص بمحتوى التدوينة
2أن لا تضع أي روابط خارجية
3لإضافة كود حوله أولاً بمحول الأكواد
4أي سؤال خارج محتوى التدوينة يرجى استخدام ركن الأسئلة