السلام عليكم ورحمة
الله وبركاته
--
في هذه التدوينة سوف اقدم لكم اضافة يحتاجها المدونين وهي التعريف بصاحب المدونة لكن بشكل اروع الاضافة متناسقة مع جميع القوالب وبالوان مريحة
تبرز للزوار جمالية القالب وبتاثير مخفي لتجنب كثرة الاضافات اذ يصبح القالب مشوها
سوف اترككم مع المعاينة التالية
____________
طريقة التركيب:
- ابحث عن هذا الوسم
]]></b:skin> - وضع فوقه الكود التالي :
.boxinner{z-index: 99;
width: 652px;
height: 599px;
position: absolute;
left: 40%;
margin-left: -253px;
background-color: #2c3e50;
top: 30px;
font-family: Droid Arabic Naskh,sans-serif;}
.contentbox{position:absolute;background-color:#fff;top:30px;right:0;left:0;bottom:0;box-shadow:0 1px 5px rgba(0,0,0,.1)}
.circle{float:left;height:7px;width:7px;margin:10px 0 0 10px;border-radius:50%}
.circle:first-child,.circle:nth-child(2),.circle:nth-child(3){background:#e74c3c}
kepala{background:#d03f42;height:50px;width:100%;position:inherit;left:0}
#textlogo{background:#d03f42;color:#fff;padding-top:15px;text-align:center;font-weight:700;font-size:15px;position:inherit;height:70%;width:39%;box-sizing:initial; right: 0;}
#left{background:#2c3e50;color:#fff;top:50px;bottom:0;right:0;width:250px;position:inherit}
#left a{color:#bdc3c7;}#left a:hover{color:#fff;}
.taber1,.taber2,.taber3,.taber4,.taber5,.taber6,.taber7{cursor:pointer;font-size:14px;padding:15px 25px;color:#bdc3c7;text-align: center;}
.taber1:hover{background:#f88c00;color:#fff}.taber2:hover{background:#e74c3c;color:#fff}.taber3:hover{background:#2980b9;color:#fff}.taber4:hover{background:#27C9E9;color:#fff}.taber5:hover{background:#3ca9d0;color:#fff}
.taber6:hover{background:#1abc9c;color:#fff}.taber7:hover{background:#f39c12;color:#fff}
#left .taber1:hover a,#left .taber2:hover a,#left .taber3:hover a,#left .taber4:hover a,#left .taber5:hover a,#left .taber6:hover a,#left .taber7:hover a{color:#fff}
#aboutus{top:50px;width:59%;padding:10px;color:#444;text-align:right;position:inherit;float:left;line-height:normal;font-size:13px}
#aboutus img{margin:10px auto 0 auto;display:table;box-shadow:0 0 0 5px rgba(0,0,0,.03)}
div#mortilex {
margin: 20px 104px 2px 98px;
font-family: gesstwolight;
font-size: 21px;
background: #D03F42;
color: white;
padding: 4px 13px 4px 0px;
border-radius: 5px 5px;
}
div#ortechno1 {
padding: 5px 0;
font-size: 14px;
color: #2C3E50;
padding: 10px 0 10px;
font-weight: 700;
border-bottom: solid 2px #eee;
right: 16px;
font-family: GESSTwoLight;
width: 96%;
position: relative;
text-align: center;
margin: 29px -6px 0px 0px;
}
div#ortechno1:after {
content: " ";
width: 159px;
height: 0;
position: absolute;
right: 105px;
bottom: -2px;
border-bottom: 2px solid #D03F42;
}
.scrollbarbox{overflow:hidden;text-align:justify;margin-top:45px}
.scrollbarbox .innerone{height:480px;overflow:auto}}
a.popup-link{border-bottom:3px solid #e2e2e2;border-radius:3px;padding:8px 40px!important;background:#fff;color:#555!important;text-align:center;letter-spacing:1px;margin-right:10px}
#popup{display:none;}
#popup:target{display:block;position:fixed;top:0;left:0;right:0;bottom:0;margin:0;z-index:999;transition:all .3s}
.popup-container{position:relative;margin:0 auto;padding:20px}
a.popup-close{position:relative;top:10px;border-radius:50px;float:left;left:5px;margin:0 auto;padding:4px 7px;font-weight:bold;font-size:30px;text-decoration:none;line-height:1;color:#fff}
.popup-wrapper:before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(58, 57, 57); -webkit-transition: all 0s ease; }
a.popup-close:hover{color:#fff}
.totalposts{margin:auto;display:table;text-align:center}
.totalposts .totalnumber{display:inline;font-weight:700;font-size:400%;color:#999}
.totalposts .totallabel{display:block;text-transform:uppercase;color:#2980b9}
li.infoortilex{border:0;float:right;list-style:none}
li.infoortilex a{color:#fff;display:block;margin:0px -1px 0px 0;padding:10px 20px;line-height:100%;border-radius:3px;font-size:90%;font-weight:bold;text-transform:uppercase;font-family:Droid Arabic Naskh,sans-serif;transition:background-color .3s;text-decoration: none;}
i.infoortilex a:hover{background:#e67e22;color:#fff;}
@media (min-width:768px){.popup-container{width:600px}}
@media (max-width:767px){.popup-container{width:100%}}
- بعدها ابحث عن هذا الوسم </head>
وضع فوقه الكود التالي :
<script type='text/javascript'>
//<![CDATA[
// Total Posts
function getposts(json){var totalposts=json.feed.openSearch$totalResults.$t;document.write('<div class="totalposts"><span class="totalnumber">'+totalposts+'</span><span class="totallabel">عدد المواضيع</span></div>');}
//]]>
</script>
- بعدها ابحث عن هذا الوسم <body>
- و ضع فوقه الكود التالي :
<div class='popup-wrapper' id='popup'>
<div class='popup-container'>
<div class='boxinner'>
<div class='circle'/>
<div class='circle'/>
<div class='circle'/>
<div class='contentbox'>
<kepala><span id='textlogo'><data:blog.title/></span>
<a class='popup-close' href='#closed' title='أغلق'>×</a>
</kepala>
<br/>
<div class='scrollbarbox'>
<div class='innerone'>
<div id='aboutus'>
<img expr:alt='data:blog.title' expr:title='data:blog.title' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicrXYSWnVbA-6SXC-sgVk5O-R5X4flE1ix9ut-Pybn_Td-1Q00rS-zikbuiOy6iyK-E1I-HfqVi_NqX260T5uV3R6xJL4n_v03mbgFJslxu6yD9UhdXKoF1oqkRgb4S1BxxcUiVQgoh4E/s1600/ar1web.jpg'/><br/>
<script src='/feeds/posts/default?alt=json-in-script&callback=getposts'/><br/><br/>
الوصف
</div></div></div>
<div id='left'>
<div class='taber1'><a expr:title='data:blog.title' href='/' rel='nofollow' target='_blank'><data:blog.title/></a></div>
<div class='taber2'><a href='#' rel='nofollow' target='_blank'>Google+</a></div>
<div class='taber3'><a href='#' rel='nofollow' target='_blank'>Facebook</a></div>
<div class='taber4'><a href='#' rel='nofollow' target='_blank'>Twitter</a>
</div>
<div class='taber6'><a href='#' rel='nofollow' target='_blank' >إنضم للموقع</a></div>
<div class='taber7'><a href='/' target='_blank'> ifno@ar1web.com</a></div>
</div></div></div></div></div>
- توجه الى التخطيط ثم اضف اداة html/javascript
- وضع داخل الاداة الكود التالي :
<style>
#Holla-ar1web {
margin: -800px;
position: absolute;
}
.leowidget {
background:#EF5353;
top:-5px;
color:#fff;
float:right;
height:17px;
margin-right:552px;
font-family: cursive;
overflow:hidden;
padding:6px 10px;
position:fixed;
width:120px;
z-index:9;
transition:all 1s ease-in-out
}
.leowidget:hover {
background: #5C5A5A;
color: #000;
height: 600px;
margin-right: 442px;
opacity: 1;
width: 600px;
}
.leowidget-body{
margin-top:10px;
transition:all 1s ease-in-out
}
.leowidget h1 {
cursor: pointer;
font-size: 14px;
text-align: center;
font-weight: normal;
font-family: gesstwolight;
margin-top: 2px;
}
.leowidget h1:hover{
#F7F7F7}
</style>
<div id='Holla-ar1web'>
<div class='leowidget'>
<h1>صاحب المدونة</h1>
<div class='leowidget-body'>
<center>
<div class="boxinner">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="contentbox">
<kepala><span id="textlogo">مدونة تجريبية | test</span>
<a class="popup-close" href="#closed" title="أغلق">×</a>
</kepala>
<br />
<div class="scrollbarbox">
<div class="innerone">
<div id="aboutus">
<img alt="مدونة تجريبية | test" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiN2KpZEIL9Qn4sqG3YvB1GiDwucI8tCKckyZ1e4RTSCG466B6r5L9Xs_bDyANEYP90hFgbLzQCKs1yExPFHzEJcODpZGY32dirx2Y30V-hu0hTzuGke75gv0IhRAr7TzCB4zQKl8SpJh8c/s1600/logocarre.png" title="مدونة تجريبية | test" /><br />
<script src="/feeds/posts/default?alt=json-in-script&callback=getposts"></script><br /><br />
<div id="mortilex">اورتيلكس عصام
</div>
<div id="ortechno1">معلومات شخصية عن صاحب المدونة
</div>
<div id="ortileximg">
<img alt="مدونة تجريبية | test" h="244" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinyvOnjUpRUOjl3jKbNia6DQnX0n_EA8APIguyrFDdqhdAx9MveqkKCffIuzvK50oT_VFv18QlwkThX73NLSLAZGWYB_kdJramOlKQqU-T72hlBUZM2Br6JkgbDdRNyY-bCojelTAa31A/h120/text.png" style="margin: 21px 24px 0px 0px; width: 331px; height: 189px;border-bottom: 2px solid #D03F42;" w="317" />
</div>
</div>
</div>
</div>
<div id="left">
<div class="taber1"><a href="/" rel="nofollow" target="_blank" title="مدونة تجريبية | test">مدونة تجريبية | test</a></div>
<div class="taber2"><a href="#" rel="nofollow" target="_blank">Google+</a></div>
<div class="taber3"><a href="*" rel="nofollow" target="_blank">Facebook</a></div>
<div class="taber4"><a href="#" rel="nofollow" target="_blank">Twitter</a>
</div>
<div class="taber6"><a href="#" rel="nofollow" target="_blank">راسلنا</a></div>
<div class="taber7"><a href="www.ortech.tk" target="_blank"> ifno@ortech.com</a></div>
</div></div></div>
</center>
</div>
</div>
</div>
