الإضافات بلوجر

                              الإضافات بلوجر

شرح طريقة التركيب
1 . من التخطيط أضف أداة Html/Javascript وضع بها كود الإضافة

<style type='text/css'> /* About Me */ .sidebar_about_author { height: 200px; } .aboutpro-img:before { content: ''; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA89sono00eQhbwVYRH2yBs8rQkJzGRzv4c5xCMoArFlGtcZYxVwKMSLvgqXE7sNzHFRl17SbFaC856fvQLrRAAypXW_z7c9kqhw_-ayKMJQoIr0qz0mDa0tKXQe_dsuzjO9NcCB8_qgvp/s1600/pattern-overlay.png)center top repeat; opacity: .3; position: absolute; left: 0; right: 0; bottom: 0; top: 0; z-index: 2; } .aboutpro-img {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj164FQfMOVQ0h9v2MhU3daQmAHw_iIaX_g2LCBHV6umC15lbvcP8W_4cXwfdsj-Ow3KItbHVmzz-Mdz9H6QCjf3hXbFVbe-Tqi3Zit_9YxtyZuTbuGMYzHAPcrnNXXtNDDUZmeo8vWWim6/s1600/66.jpg); height: 200px; display: block; width: 100%; position: relative; right: 0; bottom: 0;background-size: cover; } .sidebar_about_author { height: 200px; } .aboutpro-wrapicon{display:block;margin:-225px auto 0;position:relative;z-index:3;} .aboutpro-wrapicon .extender{width:100%;display:block;} .extender{text-align:center;font-size:18px} .extender .aboutpro-icon{display:inline-block;margin:0 .5px;padding:0;border:0;} .extender .aboutpro-icon a{display:inline-block;font-family:fontawesome;height:32px;width:32px;line-height:32px;font-weight:normal;color:#fff;font-size:80%;transition:all .5s} .extender .aboutpro-icon:hover a,.extender .aboutpro-icon a:hover{color:rgba(255,255,255,.7);} .aboutpro-info{font-size:12px;position: relative; bottom: 200px; z-index: 99999;} .aboutpro-info h4{display:table;background:rgba(255,255,255,1);margin:10px auto;font-family:'Playfair Display',serif;font-size:220%;font-weight:normal;text-transform:capitalize;color:#454545;border:4px double #2e2e2e;z-index:3;padding:5px 10px} .aboutpro-info p{position:relative;display:block;color:#fff;z-index:4;font-size:110%;text-align:center;font-family: Droid Arabic Naskh,sans-serif;line-height: 1.7em; padding: 1px; } </style> <div class="sidebar_about_author"> <div class="inner_wrapper"> <div class="aboutpro-img"> </div> </div> <div class="aboutpro-info"> <h4> iHussam</h4> <p> حسام بها، مغربي الجنسية ، مهتم ومتابع لكل ما يتعلق بالتقنية، محب للتصميم والألعاب أيضاً، هاوٍ بجمع شخصيات ديزني،لا تنسى متابعتي عبر المواقع الاجتماعية.</p> </div> <div class="aboutpro-wrapicon"> <ul class="extender"> <li class="aboutpro-icon"><a href="facebook" rel="nofollow" target="_blank" ><i class="fa fa-facebook"></i></a></li> <li class="aboutpro-icon"><a href="twitter" rel="nofollow" target="_blank" ><i class="fa fa-twitter"></i></a></li> <li class="aboutpro-icon"><a href="googleplus" rel="nofollow" target="_blank" ><i class="fa fa-google-plus"></i></a></li> <li class="aboutpro-icon"><a href="youtube" rel="nofollow" target="_blank" ><i class="fa fa-youtube"></i></a></li> <li class="aboutpro-icon"><a href="rss" rel="nofollow" target="_blank" ><i class="fa fa-rss"></i></a></li> </ul> </div> </div>

                                 تخصيص الإضافة :
               غير كل ما هو محدد بالأحمر بالروابط الاجتماعية
               المحدد بالوردي يغير بالكلمات
               المحدد بالأخضر يخص رابط الصورة

<style> .widget-content { overflow: hidden; } #likeme ul li a.likeme-yt { background-color: #E62117; border-bottom: 4px solid #D01D14;float: left; } #likeme-msg {font-family: 'Droid Arabic Naskh'; text-align: center; position: relative; padding: 0; margin: -10px 0; bottom: 10px; }#likeme { margin: 0 0; padding: 0; line-height: 1.3em; }#likeme-msg:before{content:" تابعنا عبر المواقع الإجتماعية";font-weight:bold;display:table;text-align:center;color:#555;font-size:15px;bottom:0;margin:10px auto}#likeme ul{padding: 0; text-align: center; width: 100%; position: relative; bottom: 25px;}#likeme ul li{display:inline-block;margin:40px 0 0;position:relative;width: 32%;}#likeme ul li a{display:inline-block;color:#fff;padding:11px 0;font-size:15px;border-radius:2px!important;width:100%;}#likeme ul li a.likeme-gp{background-color:#f65543;border-bottom:4px solid #e13522;margin-right:4px;float:left}#likeme ul li a.likeme-tw{background-color:#4fc4f6;border-bottom:4px solid #35aadc;float:right} </style> <div id="fan-go"> <div class="fb-page" data-href="https://www.facebook.com/arabe1web" data-width="300" data-height="250" data-hide-cover="false" data-show-facepile="false" data-show-posts="false"> </div> <div id="fb-root"> </div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ar_AR/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> </div> <div class="clear"> </div> <div id="likeme"> <ul> <li><a class="likeme-gp" href="https://plus.google.com/u/0/+iHussam" target="_blank" rel="nofollow">Google+</a></li> <li><a class="likeme-tw" href="http://twitter.com/" target="_blank" rel="nofollow">Twitter</a></li> <li><a class="likeme-yt" href="http://youtube.com" target="_blank" rel="nofollow">Youtube</a></li> </ul> </div> <div id="likeme-msg"> </div>
غير كل ما هو محدد  بالروابط الاجتماعية