اضافة اداة انضم لموقعنا مع مواقع التواصل

اضافة اداة انضم لموقعنا مع مواقع التواصل - شرح جديد و اضافة جديدة على مدونة كورد ويب طريقة اضافة اداة انضم لموقعنا في السايدبار في مدونة بلوجر بشكل جميل و احترافي و معها مواقع التواصل الاجتماعي اضافة جميلة و رائعة و من الاضافات الجديدة لعام 2016 في بلوجر .

• معاينة

طريقة اضافة اداة انضم لموقعنا 

اذهب الى لوحة التحكم > قالب > تحرير HTML 

و ابحث عن  </style>   وضع قبله هذا الكود

 /* اداة انضم لموقعنا by th3kurdi.blogspot.com */
.about_blog {padding: 0; overflow: hidden; background: #FFFFFF;}
.about-ar1web-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%}
.about-ar1web-img{position:relative;max-height:140px;overflow:hidden}
.about-ar1web-img img {max-width:100%;width:100%;transition:all .6s;}
.about-ar1web-img:hover img{transform:scale(1.2) rotate(-10deg)}
.about-ar1web-img:before{content: ''; background: #000; position: absolute; top: 0; right: 0; left: 0; bottom: 0; z-index: 2; transition: all .3s; opacity: .3;}
.about-ar1web-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}
.about-ar1web-float{text-align:center;display:table;width:100%;height:100%}
.about-ar1web-float a{color: #fff; padding: 8px 14px; z-index: 2; display: table-cell; width: 100%; text-transform: uppercase; vertical-align: middle; transition: all .3s; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.23); font: normal normal 18px Droid Arabic Naskh,sans-serif;}
.about-ar1web-float:hover a{color:#F7F4F4!important;}
.about-ar1web-float a i{font-weight:normal;margin-left:5px}
.about-ar1web-wrpicon{display:block;margin:15px auto;position:relative; width: 96%;}
.extender{text-align:center;font-size:16px;    margin: 0 0;}
.extender .about-ar1web-icon{display:inline!important;border:0;margin:0;padding:0;    border: none!important;}
.extender .about-ar1web-icon a{background: #ccc; display: inline-block; font-weight: 400; color: #fff; line-height: 32px; font-size: 14px; width: 100%; text-shadow: 0 1px 0 rgba(0,0,0,0.15); margin: 3px 0;    border-radius: 1em 0 1em 0;}
.extender .about-ar1web-icon i{font-family:fontawesome;margin:0 3px 0 0}
.about-ar1web-icon.fbl a{background:#3b5998}
.about-ar1web-icon.twitt a{background:#19bfe5}
.about-ar1web-icon.crcl a{background:#d64136}
.about-ar1web-icon.fbl a:hover,.about-ar1web-icon.twitt a:hover,.about-ar1web-icon.crcl a:hover{    opacity: .7;}
.extender .about-ar1web-icon:hover a,.extender .about-ar1web-icon a:hover{color:#fff;}
.about-ar1web-info{margin:10px 0 0 0;font-size:13px;text-align:center;}
.about-ar1web-info h4{color: #95A5A6;}
.about-ar1web-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}
.about-ar1web-info h4:before,.about-ar1web-info h4:after {position: absolute; top: 51%; overflow: hidden; width: 50%; height: 2px; content: '\a0'; background-color: #E8EDEF;}
.about-ar1web-info h4:before {margin-right:-50%;text-align:left;}
 

الخطوة الثانية
اذهب الى لوحة التحكم > التخطيط > اضافة اداة
وضع فيها الكود التالي

<div class="about_blog">
<div class="inner_wrapper">
<div class="about-ar1web-img">
<img alt="alwan may" class="img-responsive" height="auto" src="https://d13yacurqjgara.cloudfront.net/users/976037/screenshots/2612975/facebook.png" width="300" />
<div class="aboutfloat-img"><span class="about-ar1web-float"><a href="#" rel="nofollow" target="_blank"> انضم لموقعنا</a></span></div>
</div>
</div>
<div class="about-ar1web-info">
<h4><span>كورد ويب</span></h4>
</div>
<div class="about-ar1web-wrpicon">
<ul class="extender">
<li class="about-ar1web-icon fbl"><a href="#" rel="nofollow" target="_blank"><i class="fa fa-facebook fa-fw"></i> صفحتنا</a></li>
<li class="about-ar1web-icon twitt"><a href="#" rel="nofollow" target="_blank"><i class="fa fa-twitter fa-fw"></i> تابعنا</a></li>
<li class="about-ar1web-icon crcl"><a href="#" rel="nofollow" target="_blank"><i class="fa fa-google-plus fa-fw"></i> جوجل</a></li>
</ul>
</div>
</div>

غير ما باللون البرتقالي ليتناسب معك ثم اضغط على حفظ
و انتهى شرح اليوم لا تنسى دعمنا بتعليق