اضافة تابعنا عبر الشبكات الاجتماعية - شكل مميز وجذاب

  بسم الله الرحمان الرحيم 

متابعين مدونة بٍنْكو  اليوم لقد اتيت لكم باضافة تابعنا عبر الشبكات الاجتماعية بشكل جميل وجذاب :)
صورة الاضافة:

شرح تركيب الإضافة:

اولا : توجه الى لوحة تحكم مدونتك ثم القالب ثم تحرير
html

 واضغط على متابعة و علم  على خانة توسيع عناصر واجهة المستخدم ثم ابحث عن

]]></b:skin>

واضف قبلها هذا الكود :

.social-icone{ height:108px;}

.social-icone div{ margin: 8px 12px;}

.social-icone a{ text-decoration:none;}

.you-icone b, .twt-icone b,.face-icone b,.rss-icone b{ font:14px tahoma; color:#8c8b8b;}

.you-icone span,.twt-icone span,.face-icone span,.rss-icone span{font:11px tahoma; color:#a3a3a3; }

.you-icone{

width: 50px;

height: 32px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyFFp3gT5u2PwHg6zNcXWkmbgT7E8ScI2oeMEqiolzOYDRL0e_RWOTpqzvyREJjMEncCJEWudd74zd-TQOd3INP4AO43KKvRI05IaSt48uIaGkErxt5BSexg2AtahwS9YgB7MMu0j6Q10/s1600/youtube.png)top no-repeat;

text-align: center;

padding-top: 56px;

float:right;

}

.you-icone:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig6ifDzaiZJg5x-8FOCbomOMgpnDs0dg1UnTQ87QbAe1EF7Qh0gU82GtgjUeynLtlgFvzHGdtS8rlkVN05l5YLltLaFPzS5UhohAg1tdIF7yssuTvIDRWux2XLx9SCAhp_06D3HIzi3qc/s1600/youtube2.png)top no-repeat;}

.twt-icone{

width: 50px;

height: 32px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwYgD6YG-kBpsc2fhFwZewo48Gj1Fz1w7jxAq6xtTsJ_7LWwQ7NrEeYR51fImOZYmcWv7-WQLHsfwdPQbjisMa8UMAvo3n2nVOacIqIZW2v2MhA7X2X1nhxS9UiI_bx8M1dd9JISSKYEU/s1600/twitter.png)top no-repeat;

text-align: center;

padding-top: 56px;

float:right;

}

.twt-icone:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilsPZczYWzotXfC0CnsEg00-chPgV3T3PewmPKwdxfvml0-YdfvNfOU1a8X9BsLHCDP7mVdjIqqJ9FQYcvOM61k4VxzrNzJ8Opz7rSdWvj3Qq6cIRLvSqtTVe9WBh820IbqbBLZwn82OA/s1600/twitter2.png)top no-repeat;}

.face-icone{

width: 50px;

height: 32px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhH0XoT-Qpiv_wDCNZAIuzMUmxavwttvUdgXXvkEE1WFq2prNl2l4PO_REAZIppQESCU-hpYqWXATJMHvFGCh8rfKG2ZRIamR1WX1SxIQMLjqej5oZ9PfT4xwkw4ZnP58mc794mRKFwWBE/s1600/facebook.png)top no-repeat;

text-align: center;

padding-top: 56px;

float:right;

}

.face-icone:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb0vCoSTayw8jEeFM45HvxQGxQGR0uAMtAOSgZTDoR9oyIdxDbin9C2j4hPwYaqRpmOLcNEd4wtWltP3JJ70L3HdXd1WN8iEIo8U9Bp_LnJvMLRUpTBEs0VuXbO-CAaj9FNpkVjy2W5Ek/s1600/facebook2.png)top no-repeat;}

.rss-icone{

width: 50px;

height: 32px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Gta3fGm0c0NGoHkmvv7Db-YUfNTnumRa_iXqfTHRBhRHb9FH38DDakpoXkOt2JsFEqqqgijYfOgGIJUpqj4I8fgPxyV1KlE6fz3TftnvaVANCisKt2J6ObpG8OCQM0oZFG-gv2isHWc/s1600/RSS.png)top no-repeat;

text-align: center;

padding-top: 56px;

float:right;

}

.rss-icone:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhF9UHAq10pFwvRBJk5zHlH7ptAFks8eSTUXsdZsDoOvPLp1z0vBMJ80-4EHn3hcDEYQW8vGYgBUPRsNkx15c-ttnNuvjUochwXJeI2MM9VvCQw_wtc4OulZ9aAthhbu4lFpOtp1mbbQI/s1600/RSS2.png)top no-repeat;}

.post-footer-line > * {

margin-left: 0;

}

ثم اضغط على حفظ :)

 

ثانيا :  نذهب للوحة التحكم , التخطيط  , ثم اضافة اداة جديدة جافا اسكربت وتضيف الكود التالي

<div class="social-icone">
<a href="http://www.youtube.com/user/pincosecurity">
<div class="you-icone">
<b>99.000</b>
<span>مشترك</span>
</div>
</a>
<a href="http://www.twitter.com/pincoweb">
<div class="twt-icone">
<b>4500</b>
<span>متابع</span>
</div>
</a>
<a href="https://www.facebook.com/pincos3">
<div class="face-icone">
<b>250 ألف</b>
<span>معجب</span>
</div>
</a>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=Pincos3curity">
<div class="rss-icone">
<b>10.000</b>
<span>مشترك</span>
</div>
</a>
</div>

لا تنس تغيير ما هو مكتوب بالأحمر

أنتظر تعليقاتكم المشجعة :)

لا تنسوا التقييم