القالب AS الشخصي


قالب بوجر شخصي أو لتعريف بالمدونات والاشخاص قمت بتصيص قائمة جانبية للقالب لوضع صفحات موقعك بسهولة
قالب خفيف واحترافي تعديل سهل جدا بتغير روابطك بما تراه مناسباً.






1. من لوحة التحكم >> التخطيط>>أضف أداة "HTML/Javascript "جديدة وضع بها الكو التالي:

#HTML68 .aboutind-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%} .aboutind-img{position:relative;max-height:170px; width: 73%;overflow:hidden} .aboutind-img img {max-width:100%;width:100%;transition:all .6s;} .aboutind-img:hover img{transform:scale(1.2) rotate(-10deg)} .aboutind-img:before{content:'';background:rgba(0,0,0,0.3);position:absolute;top:0;right:0;left:0;bottom:0;z-index:2;transition:all .3s} .aboutind-img:hover:before{background:rgba(0,0,0,0.6);} .aboutfloat-img{width:55%;position:absolute;top:35%;bottom:35%;right:22.5%;z-index:3} .aboutind-float{text-align:center;display:table;width:100%;height:100%} .aboutind-float a{background:rgba(88, 230, 126, 0.95);color:#fff;padding:8px 14px;z-index:2;display:table-cell;width:100%;font-size:67%;font-weight: 700;text-transform:uppercase;vertical-align:middle;border-radius:3px;transition:all .3s} .aboutind-float:hover a{background:#404040;color:#fff;} .aboutind-float a i{font-weight:normal;margin:0 0 0 5px} .aboutind-wrpicon{display:block;margin:15px auto;position:relative;} .aboutind-wrpicon .extender{width:100%;display:block;} .extender{text-align:center;font-size:16px} .extender .aboutind-icon{display:inline-block;border:0;margin:0;padding:0;width:32%;} .extender .aboutind-icon a{background:#ccc;display:inline-block;font-weight:400;color:#fff;padding:0 12px;line-height:32px;border-radius:3px;font-size:12px;width:100%;} .extender .aboutind-icon i{font-family:fontawesome;margin:0 0 0 3px} .aboutind-icon.fbl a{background:#3b5998} .aboutind-icon.twitt a{background:#19bfe5} .aboutind-icon.crcl a{background:#d64136} .aboutind-icon.fbl a:hover,.aboutind-icon.twitt a:hover,.aboutind-icon.crcl a:hover{background:#404040} .extender .aboutind-icon:hover a,.extender .aboutind-icon a:hover{color:#fff;} .aboutind-info{margin:10px 0 0 0;font-size:13px;text-align:center;} .aboutind-info p{margin:5px 0} .aboutind-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700} .aboutind-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;} .aboutind-info h4:before,.aboutind-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0,0,0,0.08);} .aboutind-info h4:before {margin-right:-50%;text-align:left;} #HTML68 .aboutind1-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%} .aboutind1-img{position:relative;max-height:200px; width: 36%;overflow:hidden;margin:8px 12px 23px -384px} .aboutind1-img img {max-width:100%;width:100%;transition:all .6s;margin:} .aboutind1-img:hover img{transform:scale(1.2) rotate(-10deg)} .aboutind1-img:before{content:'';background:rgba(0,0,0,0.3);position:absolute;top:0;right:0;left:0;bottom:0;z-index:2;transition:all .3s} .aboutind1-img:hover:before{background:rgba(0,0,0,0.6);} .aboutfloat-img{width:55%;position:absolute;top:35%;bottom:35%;right:22.5%;z-index:3} .aboutind1-float{text-align:center;display:table;width:100%;height:100%} .aboutind1-float a{background:rgba(228, 23, 116, 0.95);color:#fff;padding:8px 14px;z-index:2;display:table-cell;width:100%;font-size:67%;font-weight: 700;text-transform:uppercase;vertical-align:middle;border-radius:3px;transition:all .3s} .aboutind1-float:hover a{background:#404040;color:#fff;} .aboutind1-float a i{font-weight:normal;margin:0 0 0 5px} .aboutind1-wrpicon{display:block;margin:15px auto;position:relative;} .aboutind1-wrpicon .extender{width:100%;display:block;} .extender1{text-align:center;font-size:16px} .extender1 .aboutind-icon{display:inline-block;border:0;margin:0;padding:0;width:32%;} .extender1 .aboutind-icon a{background:#ccc;display:inline-block;font-weight:400;color:#fff;padding:0 12px;line-height:32px;border-radius:3px;font-size:12px;width:100%;} .extender1 .aboutind-icon i{font-family:fontawesome;margin:0 0 0 3px} .aboutind1-icon.fbl a{background:#3b5998} .aboutind1-icon.twitt a{background:#19bfe5} .aboutind1-icon.crcl a{background:#d64136} .aboutind1-icon.fbl a:hover,.aboutind-icon.twitt a:hover,.aboutind-icon.crcl a:hover{background:#404040} .extender1 .aboutind-icon:hover a,.extender .aboutind-icon a:hover{color:#fff;} .aboutind1-info{margin:10px 0 0 0;font-size:13px;text-align:center;} .aboutind1-info p{margin:5px 0} .aboutind1-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700} .aboutind1-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;} .aboutind1-info h4:before,.aboutind-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0,0,0,0.08);} .aboutind1-info h4:before {margin-right:-50%;text-align:left;} /* About Me */ #HTML68 .aboutind2-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%} .aboutind2-img{position:relative;max-height:200px; width: 36%;overflow:hidden;margin: -223px 145px 25px 999px} .aboutind2-img img {max-width:100%;width:100%;transition:all .6s;} .aboutind2-img:hover img{transform:scale(1.2) rotate(-10deg)} .aboutind2-img:before{content:'';background:rgba(0,0,0,0.3);position:absolute;top:0;right:0;left:0;bottom:0;z-index:2;transition:all .3s} .aboutind2-img:hover:before{background:rgba(0,0,0,0.6);} .aboutfloat2-img{width:55%;position:absolute;top:35%;bottom:35%;right:22.5%;z-index:3} .aboutind2-float{text-align:center;display:table;width:100%;height:100%} .aboutind2-float a{background:rgba(210, 28, 42, 0.95);color:#fff;padding:8px 14px;z-index:2;display:table-cell;width:100%;font-size:67%;font-weight: 700;text-transform:uppercase;vertical-align:middle;border-radius:3px;transition:all .3s} .aboutind2-float:hover a{background:#404040;color:#fff;} .aboutind2-float a i{font-weight:normal;margin:0 0 0 5px} .aboutind2-wrpicon{display:block;margin:15px auto;position:relative;} .aboutind2-wrpicon .extender{width:100%;display:block;} .extender{text-align:center;font-size:16px} .extender .aboutind2-icon{display:inline-block;border:0;margin:0;padding:0;width:32%;} .extender .aboutind2-icon a{background:#ccc;display:inline-block;font-weight:400;color:#fff;padding:0 12px;line-height:32px;border-radius:3px;font-size:12px;width:100%;} .extender .aboutind2-icon i{font-family:fontawesome;margin:0 0 0 3px} .aboutind2-icon.fbl a{background:#3b5998} .aboutind2-icon.twitt a{background:#19bfe5} .aboutind2-icon.crcl a{background:#d64136} .aboutind2-icon.fbl a:hover,.aboutind-icon.twitt a:hover,.aboutind-icon.crcl a:hover{background:#404040} .extender .aboutind-icon:hover a,.extender .aboutind-icon a:hover{color:#fff;} .aboutind2-info{margin:10px 0 0 0;font-size:13px;text-align:center;} .aboutind2-info p{margin:5px 0} .aboutind2-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700} .aboutind2-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;} .aboutind2-info h4:before,.aboutind-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0,0,0,0.08);} .aboutind2-info h4:before {margin-right:-50%;text-align:left;} </style> <b:widget id='HTML68' locked='false' mobile='no' title='إنضم إلينا' type='HTML'> <b:includable id='main'> <!-- only display title if it's non-empty --> <b:if cond='data:title != &quot;&quot;'> <h2 class='title'><data:title/></data:title></h2> </b:if> <div class='widget-content'> <div class='sidebar_about_author'> <div class='inner_wrapper'> <div class='aboutind-img'> <img alt='شاركنا' class='img-responsive' height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFr_RvOkJ82U6VkMeVZbQvfKT89yEAE1Usp47wWfiunB-DjdO7jTEj-CCxbOzBpRg9LpxOWgN0lwka9VHlzYMGqRt5QhJapmFHoSFCyszR-L_XAyB9j7WMhoIKebAa3s8sdyvjts2C_wup/s1600/indz.jpg' title='Indzign' width='300'/> <div class='aboutfloat-img'><span class='aboutind-float'><a href='https://www.blogger.com/follow-blog.g?blogID=3993913318934434710' rel='nofollow' target='_blank' title='انضم لأصدقاء الموقع'><i class='fa fa-user'/> انضم لأصدقاء الموقع</i></a></span></div> </div> </div> </div> </div> <div class='contact-button widget-content'> <div class='contact-button sidebar_about_author'> <div class='contact-button inner_wrapper'> <div class='contact-button aboutind1-img'> <img alt='شاركنا' class='img-responsive' height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFr_RvOkJ82U6VkMeVZbQvfKT89yEAE1Usp47wWfiunB-DjdO7jTEj-CCxbOzBpRg9LpxOWgN0lwka9VHlzYMGqRt5QhJapmFHoSFCyszR-L_XAyB9j7WMhoIKebAa3s8sdyvjts2C_wup/s1600/indz.jpg' title='Indzign' width='300'/> <div class='contact-button aboutfloat-img'><span class='contact-button aboutind1-float'><a href='#' rel='nofollow' title='اتصل بنا'><i class='fa fa-envelope'/> إتصل بنا</i></a></span></div> </div> </div></div></div></b:includable></b:widget> <div class='widget-content'> <div class='sidebar_about_author'> <div class='inner_wrapper'> <div class='aboutind2-img'> <img alt='شاركنا' class='img-responsive' height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFr_RvOkJ82U6VkMeVZbQvfKT89yEAE1Usp47wWfiunB-DjdO7jTEj-CCxbOzBpRg9LpxOWgN0lwka9VHlzYMGqRt5QhJapmFHoSFCyszR-L_XAyB9j7WMhoIKebAa3s8sdyvjts2C_wup/s1600/indz.jpg' title='Indzign' width='300'/> <div class='aboutfloat-img'><span class='aboutind2-float'><a href='https://www.blogger.com/follow-blog.g?blogID=6023018209771894916&#039; rel='nofollow' target='_blank' title='أعمالي'><i class='fa fa-picture-o'/> أعمالي</i></a></span></div> </div> </div></div></div>