باسم الله الرحمن الرحيم
السلام عليكم ورحمة الله تعالى وبركاته ،
تحية طيبة لكل الاخوة متابعي وأصدقاء ،وزوار واحة المعلوميات في هدا الشرح الجديد ضمن قسم البلوجر ، فبعد طلبات كثيرة على طرح الواجهة السابقة لواحة المعلوميات " واجهة الميترو " ارتأيت أن أضع لكم شرح تركيب تلك الواجهة على مدوناتكم لبلوجر طبعا الواجهة مطورة من واحة المعلوميات وحقوق التكويد للأخ حسام ، واجهة رائعة ومطورة تحتوي على نمودج اتصال خاص بها ، 12 مربع يحتوي على " راسلنا ، الدخول للمدونة ، تدويناتنا ، الهدايا ، 4 ايقونات لمواقع التواصل ، انضم للأعضاء ، مربع به مقولة ، تحميل ، وسلايدر متحرك " طبعا كل هده الاشياء يمكن تعديلها من تحرير ال HTML .
مميزات الواجهة :
* جمالية ورونق للمدونة
* احترافية ومكودة بطريقة سلسة
* متوافقة مع جميع الشاشات
* سهولة في التنقل داخل المواضيع
* أيقونات مواقع التواصل الاجتماعي " تويتر ، فيسبوك ، جوجل + ، يوتيوب "
* نمودج الاتصال احترافي
* والمزيد ......
*1 توجه للمدونة ثم لوحة التحكم
*2 القالب ثم تحرير HTML
*3 ابحث عن الكود التالي : </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/AVvXsEhmFrAuohryY6Jr2YymMzQKiZ_e-ekRMk30LwbSiBpDsHNcr7XP2Ta4N0y-vQmo3DhIx2qFRzMMirTSv76N5xOvjMAdUQQ27aHbM8J2apWqMiP05wWFU9UpymmLaM9M-lgXpxxbrooAVAc/s1600/designer-lowres.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/AVvXsEiCwvVcSiT6ZtEwNUj0drTZX3KlQT9e-v1Kqh8nYcCEpASiXDC9WOJU7GeGkAesaYSoUirvR65iqLiZ5gzPJBaWkYf13EJuY4jAD6wTOBNzbwYIBKOYUtMemFFUkL3ORUsrDfa4GP0RAw/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/AVvXsEif8DGXAJOkF-XaEJA8SI8Z9lZZ6UHZBCBYy1_sHdg81tgHvz9_n9IXPp71Hv7sg7VyCGTeV-TFS8iQCnUWE-qUP1k0ttVs73JkwBSyONcyf44IXYl8CS1YflkBERPtuAJ-FiQCnwxH4Ec/s1600/phone.png) no-repeat 100%; padding: 0 22px 0 0; } .other-cnt .emailtxt{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrTGtGqE3Ukyut8A_FhKjERCf2wqZtMm-F6lGtyZD0xE87KmCVPSlTBNPixFJTezh5x3J7BIqNo4x2854REqNZVQqzmvjOgNIz2cvcylUjoAcsw8SHjTjL-xE27uZkAI1cuKSsaMAU5tU/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>
*4 بعدها نقوم بالبحث عن الوسم التالي <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'>
<!-- 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI8oX11T04O46pT5L8IR6pvpxa7G90ebUXi1TEqKqiSxG4rGPNyclshQD0uE7cJZfF3AYvOE65nPTJg2QHNgzAsJXdGtJJ4ZPiVozut7BDI1rjtRQRdUVISK8rtzuuD1rjcKY5gyZF2weq/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinNnB0oMhgosh2p1puRifxtz_jle-9-Iky8FxeHGFDpBdZOO13vH4Se72Sd6rOVM-xOVR1meZ0_vKISzv6ixlrIwqPNM8zyTdf3O_cgskuZcqvdCM_wVrp_XESlFC_Vr9kp9-a7Fzf8Gkj/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaNE02Ot10i-LSpry3RT97Myev7sIvwbEhX3FkN4FqdMb6a7-R0mR-FpHTBQUEWhNx9VDxzt4fPectvECB8nPkC6iTDimHouHQ5IkriL5pm743FmarHR3vuj3nT0Qkzs7arnoQguKgZBwv/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPnL23EsSOwubSvn1LzWRQz6SP5v9791YmBttWYAqB_0TSGEX_TdLGrDMWPX1m5AZvIduqWvVKzrsqkLXoQRt9ROPWBGkFb1RThgHON7vCw5wlE4thB-og-yJQyS4s5dLbhFjHck040xYF/s1600/document.png'/>
</div></label></div></td>
<td><div class='metro-tile metro-tile-ri'>هدايا<a href='http://www.wahatinfo.com/p/gifts.html'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2txlvImfKDsI861Hjn3NJ-2vJ9vUJQtMuKxb_vZ12dgr2lhYssQflI6dNa25YdK4YW34NgbLSmMZoiOsZqDjw6FASZJSZ6kLbBuHnN9MMdLq4QM0zBi_rrmk4VsL0y0c2mF-jqqionNIp/s1600/gifts.png'/></a></div></td>
</tr> </table>
<table> <tr>
<td><div class='metro-tile metro-tile-msg'><p>
لماذا يجب أن أكون فرشاة وألوان وبيدي أن أكون أنا الفنان؟
"فريدريك فون شيلر"
</p>
</div></td>
<td><div class='metro-tile-player'>
<div id='photoar1web'>
<div id='maskar1web'>
<ul>
<li class='firstanimation' id='first'>
<a href='http://www.wahatinfo.com/2015/12/blog-post.html'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHNsy0k-cY9vn7C4CM6eAR_t3M0T3jd53dnsIQy2clKAoDiNUOb23sayp5zK_gEtUNn20_ibFeNaxx0dEPjlxPaEZM3pqK2oRWGhxTSGPXoW5wvGD78Cr62kDLFYjcLFpWmAlIUw2pPts/s640/freelance-tech-tools.jpg'/>
</a>
</li>
<li class='secondanimation' id='second'>
<a href='http://www.wahatinfo.com/2015/11/black-friday_30.html'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhABBb57H1SqtxHaKBJIxmFuSu3tPLE1ylfjxb4PpE4xkzvsRMCM-fKSCXpS1jWibxTwuSXgXlGv5Wf1T7kumedBS33lbiobkzrsmcv1St-xrGjWcAnmhFtzYcN3b-ZY-4OheJgcn3HW3I/s640/COLORS.png'/>
</a>
</li>
<li class='thirdanimation' id='third'>
<a href='http://www.wahatinfo.com/2015/12/template-tech-free.html'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgytEzlEx6P0rUMuzAVECx3iXBj48C0P2ecT97EWnsCPTcZgZhoai1J-zmxOvLBoN1cVkmM-5bKnNHbWaR2xWLQ5tIjNwSDG565iP3HTx0pNCUCBBOaLU2OyxNW-MOozm3fU-XBly9WZZg/s640/12305748_541281799380878_1532329665_n.jpg'/>
</a>
</li>
<li class='fourthanimation' id='fourth'>
<a href='http://www.wahatinfo.com/2015/10/news-pava.html'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk_gDBCR4-M57BkNTOR5WZKJ7T8b8jF2QdfbExtyaMiq28kVbbQClxQz5NBv4Ta9nX_U3gSYUMjsMZG-GrR2tyyooFdNrlnp7GJJWRcbomp6bmHW_6VqeqYmoJShB-y7jmqjUQ4r53go8/s640/mockup.png'/>
</a>
</li>
<li class='fifthanimation' id='fifth'>
<a href='http://www.wahatinfo.com/2015/09/blog-post.html'>
<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxbGMhRDtr4YgaeX9lfFo8EQbR7GoeGDmPuiwvS43TtCmw6WqBJsRIfsX5cxgGFMqH2KZRKnljHUc0KBqHGLHSMauQCRCBeC8Mebdl6W29qO3L62rbT4AJLnlvUc68HzQRyce-H6kQ1X0/s640/1411230283136.pn'/>
</a>
</li>
</ul>
</div></div>
</div></td>
<td><div class='metro-tile metro-tile-small metro-tile-facebook'><a href='https://www.facebook.com/wahatinfo'><i class='fa fa-facebook'> </i></a></div></td>
<td><div class='metro-tile metro-tile-small metro-tile-twitter'><a href='https://twitter.com/mohamedelbarian'><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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMO2odwi-nQDTDeukb5yt4Z4k07LfwKX7aJlX90NOHM3YEZRo0Ox3hAhgGW8GP12PAMd3zHQNKxZbdsYbyig1HHhs0VNR78b_qN3TPB-d234BSGI0yIAfXLYr9QHAt5yijnPwJVbiU7BWs/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=2632681942308940506' target='_blank'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDUEAzZmvkq8J8Hobv8Ba7R4RFcwZWAy1ldk7b_gea5RYdRPiIRYqj66kqv5vmvylH4H0l8vKBq9O82BcbOpVODguYmzGm1wWQHi8oyJnNcVJfGXkdze92QEK7my_C9dQFqDdT3Qs1ahB_/s1600/mouse.png'/></a></div></td>
<td><div class='metro-tile metro-tile-small metro-tile-gplus'><a href='https://plus.google.com/u/0/+MohamedLbarian'><i class='fa fa-google-plus'> </i></a></div></td>
<td><div class='metro-tile metro-tile-small metro-tile-youtube'><a href='https://www.youtube.com/channel/UCqYfATliKej6TUmrOQhKzHA'><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.wahatinfo.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 != ""'>
<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 + "_contact-form-name"' 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 + "_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='موقعك'/>
<input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' 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 + "_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>
<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'>wahatinfoo@gmail.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 = 'http://www.wahatinfo.com';
var minpaginas = 5;
var maxpaginas = 10;
var thumbs = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZBSrzoKutJ0fVcGxcdKU4tTFoUVSRJFed6cLMNwTsFew24UIR9-m6ETpyBQHQnXo0YEI0pGelB51KmqMSBIcwINd0MJ5AJS61xNBPMEqbapruhI2rjzkcnI1bSsgGrecWuprEb_nvyp0/s1600/iconst.png';
</script>
<script language='javascript' src='https://googledrive.com/host/0B0LkZloPKBfWSXZIN3MwcWZZT2c'>
</script></center></div></div></section></div></div></section>
</b:if>
*5 بعد الضغط على حفظ النمودج نأتي الان للتعديلات وهي سهلة جدا جدا كتعديل أي قالب ابحث على كلمة واحة المعلوميات :
<div class='welteks1'>واحة المعلوميات</div>
<div class='welteks2'>مرحبا بكم</div></div>
<div class='welpic'><div class='logoar1web'/><a href='/'><img class='logoar1web' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhI8oX11T04O46pT5L8IR6pvpxa7G90ebUXi1TEqKqiSxG4rGPNyclshQD0uE7cJZfF3AYvOE65nPTJg2QHNgzAsJXdGtJJ4ZPiVozut7BDI1rjtRQRdUVISK8rtzuuD1rjcKY5gyZF2weq/s1600/ar1weblogo.png'/></a></div>
</div></div>
* قم بتغيير ما لون بالاحمر .
* قياس اللوجو وجب ان يكون 40*40 والا فلن يتناسق مع القالب .
* لتعديل السلايدر ابحث عن الكود التالي :
* لتعديل السلايدر ابحث عن الكود التالي :
style="background: rgb(247, 247, 249); border-radius: 4px; border: 1px solid rgb(221, 221, 221); box-sizing: border-box; color: #839496; direction: ltr; font-family: Menlo, Monaco, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 1.42857; margin-bottom: 10px; margin-top: 10px; max-height: 300px; overflow: auto; padding: 0.8em 1em; text-align: left; word-break: break-all; word-wrap: break-word;"><li class='firstanimation' id='first'>
* لاضهار مواضيع مدونتك بتصفح التدوينات ابحث عن http://www.wahatinfo.com
* ثم قم بتغييره لرابط مدونتك ^^
* أي مشاكل أخرى واجهتك بالتعديل اطرحها بالتعليقات
أخي محمد نحن نريد طريقة إضافة رابط مختصر للموضوع أسفل التدونة مثلك
ردحذفشكرا لمرورك الطيب اخي ايمن ، ترقب الدرس غدا او بعد غد كأبعد تقدير ، تقبل مروري ^^ تحياتي
حذفشكرا لك أخى على الإضافة ياريت قالب المدونة لى وعدتنا به
ردحذفقريبا .... ان شاء الله
حذفأخى ممكن طريقة تغير شكل إقتباس الأكواد للمدونة
ردحذفمثل التي بمدونتي ^^
حذفنعم اخى
ردحذفبدا لو ارسلت سكرين لي أو راسلني على الفايسبوك لانني غيرت القالب
حذفxxbeymenxx73@gmail.com
ردحذفلم افهم قصدك صديقي
حذف