شرح تركيب واجهة احترافية لقوالب بلوجر

نقدم لكم اجهة مطورة ومخصصة لكافة المواقع تضم الواجهة 12 مربع كل واحد له دور يمكنك أن تخصصه حسب ذوقك كما أنه يحتوي على نموذج الاتصال وصفحة بها جميع المواضيع المتوفرة بموقعك وبعض المزايا التي ستكتشفونها بالمعاينة. الآن وكما عودناكم سنضع شرح كامل لإضافتهالذا فالمرجو متابعة الشرح جيدا وإن ناسبك فيمكنك أن تجربه على مدونة تجريبية بها نفس قالبك حتى إن واجهتك مشاكل فمرحب أن تضع الرابط بالتعليق مع توضيح المشكل
* ملاجظة مهمة : ينبغي حذف نموذج الاتصال إن كان مضاف

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

1. ابحث داخل القالب باستعمال Ctrl+F عن </head> ثم ضع الكود التالي فوقه

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<script type='text/javascript'>

$(function(){

$(".Bmesage").click(function(){

$(".mesageeror").slideToggle('slow');

});

});

</script>

<style>

.container.wrapper { display: none; }

body {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivYjwP9OyowTWPMTIZS5Z19u_8IXlOa2i-gOVU_XaZvfJCGJGw_0SHKB8eoUo2kaoJFmiBbSWYGZOFh4_f2ULqDgARRFBGN-PnWskB07OnUdc7GkEBCTZE3B3maDU_JJz8epb-0hf_rEYl/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: ""; 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5xr9h3Wwn2CV8wsApm6-mJIYoyHhZCHCi3f1Qct-PLL3KkCiy8ovv0E2aDh1ALVaZKGC5FyBzk8IJbvDrus5EkxbxWp8KlVuUUu8_OIzDonen1RB0O6WwcwOEBvPRy7e1fS6BDiHKxQ/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,'Adobe Arabic'; font-size: 20px; background-size: cover; position: relative; margin: 7px 0;}

.metro-tile-msg:after { content: "\f10d"; 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: "\f019"; 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,'Droid Arabic Naskh', 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: 'Tahoma', 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: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidm-FSnquSbzSUZXVKaMMs59HBntlVKg7REuMOCzDq0aM3KFfqRfX0Pt-nGiXKrPYtjGu-PnU35Lg3zavE6SKBJipFIwiYG0yelLJO3Kma5zs1SfYE7hDftpfKOZDUAI3FD9e9xgaUHeM/s1600/phone.png) no-repeat 100%; padding: 0 22px 0 0; } .other-cnt .emailtxt{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2NUenDyzllsKUeKPM73inuGNdApuzZ7AT0uDQbp8doImd_40oMw17EqLkp9kod2TtYFMQPs5LHaB0wFAjNyhH799KHUG2O3zIr_jS7mMmpfHVyJI_t-QOfZDtsqzbvK1rt-bKKj2ZUfI/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;'>

إن كنت من مشرفي المدونة فيمكنك تحميله &#x1F636;<br/>

<a href='#' id='buttonar1web' target='_blank'>تحميل</a>

</div>

</div>

<section id='wrapper-ar1web'>

<div id='slideshow'>



<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'/>



<div id='slidecanvas'>



<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 class='welteks2'>الأفضل لكم</div></div> <div class='welpic'><div class='logoar1web'/><a href='/'><img class='logoarmr-deboo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjukkG3UCPpFKd0zgyA-nClfPuq6OQKlrclUl_EJoO7qQxF688gtm9H5UxaTBhKywHzS2h1xvMPQJKf6H_yfu6I1sWJ20R2T9Wz91nh4WTWrJ5k4yRIsb2NdZK89fDw7TdqO3B_-k5YGwQj/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'>
<td><div class='metro-tile metro-tile-small metro-tile-net'>الدخول للمدونة<a href='/search/?max-results=6'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi44PvyKlmt5M2ugCD1tS-CEJ9zwBkmXqzoPdj2DbTSA18d1sNlbbrW80TshYbi88JtLg6BdPcF_tFcDghRwtzQD_-61pn9X8cYMvHBQoi2K-R9-h7MdtZkAR-eJnPla5Vb04h6oJhyT2Az/s1600/flat-apple-computer.png'/></a></div></td>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjM8UREPe-b7x1TAl3cDeJI5IveRHT87383rETPaBJTCaHxwOnaCZRo_KFbsZ54PPvR5hPmdBVAC7Ijd-wPyMlxDIUOoQ7-HkKDjdNLSZMBFz81Kg3mTMUxK6STIiveSjqfthjjSsSPPFm0/s1600/flat-mail-icon.png'/> </div></label></div></td> <td><div class='metro-tile metro-tile-post'>تصفح التدوينات <label for='s3-chk'><div class='baten'>
<td><div class='metro-tile metro-tile-ri'>هدايا<a href='http://www.mr-deboo.cf/p/gifts.html'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJtobkiGjwXR2sBHCLXB-oohaDNzCamSwce1vxXwukh1UKTQjG_4f7Y351gBKh_KvbgmjMqGC1jHowewx3kxuM135xV5tNiQhhoV1XofYnCtqVybhcU2KCRJF1-9XvSBl0boeaVYgiIEBm/s1600/gifts.png'/></a></div></td>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe4yST1GOxetHJQGMdF2iUcz9rzm1eUuczpakMc9wnqDlrwOtKTHH6WWlwJ4QWG0svJj_USucSCdVBrexy_AdTKd-USpgjSuPEkaw93FMWC-I5W41GLoFrcnM3p7VRqWssQd51nIyyT_Jb/s1600/document.png'/> </div></label></div></td>
</tr> </table>
<table> <tr>
<td><div class='metro-tile metro-tile-msg'><p>

لماذا يجب أن أكون فرشاة وألوان وبيدي أن أكون أنا الفنان؟
"فريدريك فون شيلر" </p> </div></td>
<div id='maskar1web'>
<td><div class='metro-tile-player'> <div id='photoar1web'> <ul>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQPIsxQmwMOpK6Vl2DcPdPDjda1ETYyfTnVb6PzPrirHpDrqDXEN6YE_R4hhUbTj4sKtZ8qZzqimuO33nHCGBj8nf4C5HZs_xdSE-W-CPn95sQ_n4zF6E4cTUMOySBrWggteP8qjRI1Tc/s1600/mock.png'/>
<li class='firstanimation' id='first'> <a href='#'> </a> </li>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJmHoZUVUktuWGKlgKj9VmFeGy_6HyWujlgP0PAonjASXOUbeQ5eNayOFkpxF5gENDLyIgVF_U-TbiBwYsnoNPenSeGOx1duI5YmFDxJj-5TVVrX0ufvOJyF4JA7q3erq0Kpj6mcxUUps/s1600/bestwidget.png'/>
<li class='secondanimation' id='second'> <a href='#'> </a> </li> <li class='thirdanimation' id='third'>
</a>
<a href='#'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKbcva6g6SRDEqAsZGh-GXztiodfnwc3PfH7n1pCCzy2mcSAEmCmJFlWCkVNA8dBJSu-b90PUclxDtaINW5P1BZ3QRHDI1TQn0B8W4bdzxnj9Jd8IrO80fFgKqKjKS58aNWpjG3N4HI08/s1600/code-geek-designer-wallpapers.png'/> </li>
</a>
<li class='fourthanimation' id='fourth'> <a href='#'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggyjyHi1-7bJKso02LYOLr-TXWAsgqn7SP5byS7UZ4pAtln3sIbyRdr5VaVPfi9EdTUwVLDL5uy99KXtExUJRMWd2iVNVXKebhv_aIiGVx7o0yLcrS83LxVjBe0kr6IAIQ9cvWBvVVvUU/s1600/Coverlyblack.png'/> </li>
</div></div>
<li class='fifthanimation' id='fifth'> <a href='#'> <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYQn66UuAKjcbgTl2b4R8W3cSIL2q6B51MChSxqqMhI6JrjB89H2oLfz1_bXD1yfDeHLlg_j-d9A85gPt-pD00vWQCnkKVooBrugpEFXDGmJVnzt8xoFlIxyqs1XsIcH2i-Tzvf1OJxYM/s1600/free-font-bundle.png'/> </a> </li> </ul> </div></td>
<td><div class='metro-tile metro-tile-small metro-tile-twitter'><a href='#'><i class='fa fa-twitter'> </i></a></div></td>
<td><div class='metro-tile metro-tile-small metro-tile-facebook'><a href='#'><i class='fa fa-facebook'> </i></a></div></td> </tr> </table> <table> <tr> <td><div class='metro-tile metro-tile-down'>تحميل<span class='Bmesage'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5ATUhMto-wirfKpn4Gl21B7SJDr0J7b3rCm_WDm2ChJOhDKln3LV6Z7Sv9eCj5fW_cUHGSOBtHh7vsipJE84cBsh8iPfzg7e0U22WekkAutP9-6WZEq6SxvIQ9WWO8Oleoxuxn_B_JH-r/s1600/preview.jpg'/></span></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-gmail'>إنضم للأعضاء<a class='selected' href='https://www.blogger.com/follow-blog.g?blogID=6109045480426282985' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1Am7tq9IrMa9v15lIgHHMxabnZT4eleI4OwW4M7LIiELQIwT-6WxlLvJhNYhyMSdfOMWsWp5ld-lP7R423umKbbZTnjFEzyr5M3rpTmKZSst-P9wM_lt5X_MwXDpOK0Bvl5WNoS-oEBl9/s1600/mouse.png'/></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>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' placeholder='الاسم الكريم' size='30' type='text' value=''/>
 <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 != ""'> <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-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
<p/> <span style='font-weight: bolder;'/> <br/> <input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' 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 + "_contact-form-email-message"' name='email-message' placeholder='الرسالة' rows='5'/> <p/> <input class='web' name='website' placeholder='موقعك'/> <p/>
<li class='sorting-01 facebook' ><a href='#' target='_blank'><i class='fa fa-facebook'/><span class='inv'/></a></li>
<div style='text-align: center; max-width: 222px; width: 100%'> <p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/> <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/> </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>
<div id='map'/>
<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>
<script language='javascript' src='https://googledrive.com/host/0B0LkZloPKBfWSXZIN3MwcWZZT2c'>
</center></div></div></section>  <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 = 'http://www.ar1web.com/'; var minpaginas = 5; var maxpaginas = 10; var thumbs = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdu6aAbskdyxfMPxuvoaV_Wn28a30twhYIV6iBC2HBUa6jdtM0y5KljTmhlxAVLJOIqI3vnM9z1w86zLiuELObwMMTsGLulBWn6-Ej3-Uh7WdPQphyphenhyphenKeEFHhkGriv8LnfJ2r9WveuImLY/s1600/iconst.png'; </script>
</script></center></div></div></section></div></div></section>

التغييرات الاساسية

1. لتغيير شعار المدونة ابحث عن : مدونة مستر ديبو ستجد مثل الكود التالي

<div class='welteks1'>مدونة مستر ديبو</div>

<div class='welteks2'>

<div class='welteks2'>الأفضل لكم</div></div>

<div class='welpic'><div class='logoarmr-deboo'/><a href='/'><img class='logoar1web' src='

<div class='welpic'><div class='logoarmr-deboo'/><a href='/'><img class='logoar1web' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjukkG3UCPpFKd0zgyA-nClfPuq6OQKlrclUl_EJoO7qQxF688gtm9H5UxaTBhKywHzS2h1xvMPQJKf6H_yfu6I1sWJ20R2T9Wz91nh4WTWrJ5k4yRIsb2NdZK89fDw7TdqO3B_-k5YGwQj/s1600/mr-deboo.png'/></a></div>

* غير الكلمات ورابط الشعار المحدد بالأحمر

* ملاحظة : يجب أن يكون مقاس الشعار 40x40

2. لتغيير صورة صندوق الاقتباس ابحث عن :

http://i.imgur.com/GuohKnF.jpg

3. لنعدل على صور السلايدر ابحث عن slider-ar1web سيظهر لك الكود التالي غير ما هو محدد بالأحمر برابط الصور ووضع بدل الهاشتاج رابط الموضوع

<li class='firstanimation' id='first'>

<a href='#'>

<img src='

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQPIsxQmwMOpK6Vl2DcPdPDjda1ETYyfTnVb6PzPrirHpDrqDXEN6YE_R4hhUbTj4sKtZ8qZzqimuO33nHCGBj8nf4C5HZs_xdSE-W-CPn95sQ_n4zF6E4cTUMOySBrWggteP8qjRI1Tc/s1600/mock.png'/>

</a>

</li>

<li class='secondanimation' id='second'>

<a href='

</a>

</li>

<li class='secondanimation' id='second'>

<a href='#'>

<img src='

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJmHoZUVUktuWGKlgKj9VmFeGy_6HyWujlgP0PAonjASXOUbeQ5eNayOFkpxF5gENDLyIgVF_U-TbiBwYsnoNPenSeGOx1duI5YmFDxJj-5TVVrX0ufvOJyF4JA7q3erq0Kpj6mcxUUps/s1600/bestwidget.png'/>

</a>

</li>

<li class='thirdanimation' id='third'>

<a href='

</a>

</li>

<li class='thirdanimation' id='third'>

<a href='#'>

<img src='

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKbcva6g6SRDEqAsZGh-GXztiodfnwc3PfH7n1pCCzy2mcSAEmCmJFlWCkVNA8dBJSu-b90PUclxDtaINW5P1BZ3QRHDI1TQn0B8W4bdzxnj9Jd8IrO80fFgKqKjKS58aNWpjG3N4HI08/s1600/code-geek-designer-wallpapers.png'/>

</a>

</li>

<li class='fourthanimation' id='fourth'>

<a href='

</a>

</li>

<li class='fourthanimation' id='fourth'>

<a href='#'>