0

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

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

نلقاكم اليوم في تدوينة خاصة وكما وعدناكم بصفحتنا أننا إن وصلنا لـ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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgonbFdUvnfWf62khOk7uWJjsF-voVKCGE_6iZJGrk6sOqm5rINCK6TtZnCTKAF7aMJw7Um-2J2Df-kEKrU5UJPv61m3948s2DkQwewj-EWvL5qdUnhBCD9Ks_kR3nMWyuNoLZ48ZPpoAb1/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxA9UAXEy4COxtU64gvrr4W2rqc6i2GwE-VqHFvMTjrX6dYEFpmD4I_3RUXEe6b52JW5Lp-cdaLfZ3_mon1XOXv7wikl5Z1FnjcY-NIDQDed5UOkCUiWvX8LuTw27iEEpWkxz6E92uXg/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijBaX0vTbqv3agCWakpATtjCHV-uP4n1G5P-twWeOqI-CG3c5fJrqftQNx58OQOkHOA-l8qBaUdil8owtCmzYwbDUAJjU4t_isb8sn9D0xv-fJ7njy1eY5wL9f2ZBOBE28fDnRUVIRirs/s1600/phone.png) no-repeat 100%; padding: 0 22px 0 0; } .other-cnt .emailtxt{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLlYE1RTbM3zmJONA7PHHyNcSmOlXoxooUnsAHPLymH6nwtRGLrHlgdU6jT6CTS2mF8k25MJEF3pz48xCp2mimR2r9arVnmeG1Tg3MvSIHiNbMEUR6a9vy-ln4HHrMYoHL8h-SLWuzF0A/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizYM2MkRkI0Ap2Lce0zy1sXtv9AJ0va0TxcQvhLkmVlMmv15VXA2gHlbHJrrLEelaiX2-KFfVfh057P11UABofs3sPK2Sm8awau9Q_oqpqBU6OPkNDgOnz6tlntC-s23sCqC45HkdHBtU9/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/AVvXsEiK1pVpiHvLxnge6V-Xtrgmjui26RYquaxtir4HdKmUl1x8baPGXYWT5uQRYFjPMB78Yz0OogKZhKbjOeTdTt_2WzJnRlNCWJ-PKGS7AmRmrqurepdMazu30YA_rmFyga7stX9nsFCY0OUM/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/AVvXsEh9Tz1qRCeA3kOJsJ3uGLNq9p8ftIRPT0PR2h2Q0AysJgKHzYDfNJhIARBZjTOx3G0jZDxLKwLddlDrgjpf01JJu_bXQaMMYRsm3j-f802LojHT4KO72IpLQPi7ajxfJKRKEAMYMr8vGZJn/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/AVvXsEjMD9qBbwUO6naWjhyuQxg6FKZ3hMUfSu3V6aTll4AvPfnnVm6J6QuL3bQp0we5voP5WykOQIhFPZMqMyKKY9Zd9HHXlrapaRLM0CkznIpy3GB_rTiqXdnd7IcTjmQSgBeZVhw18KMoL1M1/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm3SGOt9xbNJH_qY3KZhPII-48pnqLl_vmCXCO_wU2KtvDtj4glubG0Stqcn7xe4K3Y2b4Nk8UfGBkBZJq3Mx0sM5-JRT_XRKINqHdMxCjxKoZadI8h1E-zQfukIBdI80FjHM1WJ2ma3ux/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikbOHCBdxtVnFpR9JuBIXhRI5Uhq3c62Wd04ozq7QMeI5mf-Lk0mzTnyutSMK5_wxO7uJv8qT4SvCaqx0CXu0UrLyb_n6dAHrL4j_vCTbD-leoXw1ooUDT99SuSydhqPt_B5Dlu9t5Rrk/s1600/mock.png'/>
            </a>
            </li>
            <li class='secondanimation' id='second'>
            <a href='#'>
            <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaXRgdRsOZRKkCo0eC1V273QUSLVGYaNgZwuby8UA7IfKUnwCJKKDeJiOSGGnThL8UwaEc4bfaVSsqlTPhmDPruf1jZnObC0RpLCiyrYfnOJ19m634oy_8nHgN1MFQAdTjvfQv42idQL4/s1600/bestwidget.png'/>
            </a>
            </li>
            <li class='thirdanimation' id='third'>
            <a href='#'>
            <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcr43FH566bk7_Hk_kD5uqQBZ5Mq1P5cQPKKwkU56us_mDQ6MHGkid8NlxNfMSn8WGBTqDMF2K7xlckfRzCEF9a7Xwp4lgC7_cFXwMKmTH59x4Qtfiz5hbGo2l-mzAnBEHH3-HCd-yBVs/s1600/code-geek-designer-wallpapers.png'/>
            </a>
            </li>
<li class='fourthanimation' id='fourth'>
  <a href='#'>
            <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6lnMvZrqBgBXbP1VNK3N5f7d-niBDchISGu7j0sHCKLmoLhGKU-1ia596tTWXkTz1LE7N43Tknp5XQEU2o7AhteXWq_JILGFYVZgwOrVeDo98_cUe3RJqARzncw-LATYQ2wg6WH9oLss/s1600/Coverlyblack.png'/>
            </a>
            </li>
<li class='fifthanimation' id='fifth'> 
  <a href='#'>
            <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3ojNpEKEqR1KE_EYtoTeDjSJsYi4QxQCPuwxz8hnjrxyiYpv7nUvXDRyqfkPrfoRla2cQ0O-rdXipenhitgcOk8g5Sxl3P7XFRr9i5vAUvQqBeujgD1RcSXrn3dtD9WpKBdFu3OUnCJ0/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNg41EQHJgzR98BXYmTZO_twQ-8GIcx0U6CBowkJEw10FDV37x2EnfrojL67ORGU19pNjyBDPXFf5lgZmAzOWGn-ZulArILwwuOHJVKOEJiRIvgFSTnBEYZNoY5jjTI3V9zRIWHcrufxmw/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioGJhymA-KM26crjZRoDQFqUwnCudN0ylQmMSXFreGXZmLbu2RfVENnYQv1y3KQ3meaD2zX5x18INmRHNsqdwnYsIeWzUEb9B_HbuEPg4r_O8ADI00W_Eulp_fhDFBzyrOXTsVTRSNjata/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;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFgiSYH214YRmOP4qzJ9LUxYoaxDQ_4MuyZqL0jamKYmvsNMR0OhhCwtRD2lHI1Sfrd5BPKakEW8Ki5Ycf_xUlscBebE1oWOx-KsgVcHm5mn99Q4lYSJ53k2qufOjW4gbeC9S7RD_zvP4/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizYM2MkRkI0Ap2Lce0zy1sXtv9AJ0va0TxcQvhLkmVlMmv15VXA2gHlbHJrrLEelaiX2-KFfVfh057P11UABofs3sPK2Sm8awau9Q_oqpqBU6OPkNDgOnz6tlntC-s23sCqC45HkdHBtU9/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikbOHCBdxtVnFpR9JuBIXhRI5Uhq3c62Wd04ozq7QMeI5mf-Lk0mzTnyutSMK5_wxO7uJv8qT4SvCaqx0CXu0UrLyb_n6dAHrL4j_vCTbD-leoXw1ooUDT99SuSydhqPt_B5Dlu9t5Rrk/s1600/mock.png'/>
            </a>
            </li>
            <li class='secondanimation' id='second'>
            <a href='#'>
            <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaXRgdRsOZRKkCo0eC1V273QUSLVGYaNgZwuby8UA7IfKUnwCJKKDeJiOSGGnThL8UwaEc4bfaVSsqlTPhmDPruf1jZnObC0RpLCiyrYfnOJ19m634oy_8nHgN1MFQAdTjvfQv42idQL4/s1600/bestwidget.png'/>
            </a>
            </li>
            <li class='thirdanimation' id='third'>
            <a href='#'>
            <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcr43FH566bk7_Hk_kD5uqQBZ5Mq1P5cQPKKwkU56us_mDQ6MHGkid8NlxNfMSn8WGBTqDMF2K7xlckfRzCEF9a7Xwp4lgC7_cFXwMKmTH59x4Qtfiz5hbGo2l-mzAnBEHH3-HCd-yBVs/s1600/code-geek-designer-wallpapers.png'/>
            </a>
            </li>
<li class='fourthanimation' id='fourth'>
  <a href='#'>
            <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6lnMvZrqBgBXbP1VNK3N5f7d-niBDchISGu7j0sHCKLmoLhGKU-1ia596tTWXkTz1LE7N43Tknp5XQEU2o7AhteXWq_JILGFYVZgwOrVeDo98_cUe3RJqARzncw-LATYQ2wg6WH9oLss/s1600/Coverlyblack.png'/>
            </a>
            </li>
<li class='fifthanimation' id='fifth'> 
  <a href='#'>
            <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3ojNpEKEqR1KE_EYtoTeDjSJsYi4QxQCPuwxz8hnjrxyiYpv7nUvXDRyqfkPrfoRla2cQ0O-rdXipenhitgcOk8g5Sxl3P7XFRr9i5vAUvQqBeujgD1RcSXrn3dtD9WpKBdFu3OUnCJ0/s1600/free-font-bundle.png'/>
            </a>
            </li>
4. لإظهار المواضيع بـ"تصفح التدوينات" ابحث عن http://www.ar1web.com/ وغيره برابط موقعك
5. الباقي يمكنك البحث عن الكلمات وتغييرها بما يناسبك ووضع بدل # الرابط

qwetq

مدونة تجيك تكنولوجي : مدونة تقنية متواضعه بها عدد كبير من المواضيع الحصرية والمثيرة فى كثير من المجالات مديرها حمزة محمد عمري 17 سنة وطنى الاردن ولكن مقيم فى مصر بلدي الثانيه اعشق التدوين والتقنية .

ليست هناك تعليقات:

إرسال تعليق

اكتشف آخر الأعمال والخدمات التي أقدمها على خمسات
طلب خدماتى