-->

إضافة ازرار المواقع الاجتماعية بثلاث أشكال مختلفة لمدونتك

    السلام عليكم، إن إضافة أزرار المواقع الإجتماعية إلى مدونتك تجعل من السهل لزوار مدونتك الولوج إلى جديد مدونتك كما سيكسبك زوار جدد وبالتالي زيادة شعبية مدونتك على شبكة الأنترنت.
    لذلك سوف أشرح لك كيفية إضافة تلك الأزرار بثلاث أشكال مختلفة لكي تختار المناسب لمدونتك.
    • أولا إذهب إلى صفحة التحكم الخاصة بمدونتك
    • ثم إختر التخطيط
    • ثم أنقر على إضافة أداة في المكان الذي تريد أن تضع فيه تلك الأزرار
    • بعد ذلك إختر إضافة   Html /Javascript
    إنسخ الكود الخاص بأزرار المواقع الإجتماعية حسب الشكل الذي أعجبك وغير ما باللون الأحمر لإسم حسابك في فايسبوك أو تويتر أو جوجل بلس أو موقع الخلاصات
    أخيرا أنقر على حفظ
    الشكل الأول :

    الكود:


    <div class="metro-social">
    <li><a class="fb" href="http://www.facebook.com/YOURNAME"></a></li>
    <li><a class="tw" href="http://twitter.com/YOURNAME"></a></li>
    <li><a class="gp" href="https://plus.google.com/YOURNAME"></a></li>
    <li><a class="fd" href="http://feeds.feedburner.com/YOURNAME"></a></li>
    </div>
    <style>
    /*Metro UI Social Profile Widget v2.0 by Tech Prevue Labs
    Web link to gadget code: http://www.techprevue.com/2013/02/social-profile-gadget-metro-style.html
    Distributed under license CC BY-NC-ND 3.0 INT
    Please keep license information intact while using this widget*/
    .metro-social{width:285px}
    .metro-social li{position:relative;cursor:pointer;padding:0;list-style:none}
    .metro-social .fb,.tw,.gp,.fd{z-index:7;float:left;margin:1px;position:relative;display:block}
    .metro-social .fb{background:url(//goo.gl/6xmUk) no-repeat center center #1f69b3;width:140px;height:141px}
    .metro-social .tw{background:url(//goo.gl/oyiFK) no-repeat center center #43b3e5;width:140px;height:70px}
    .metro-social .gp{background:url(//goo.gl/oT0kF) no-repeat center center #da4a38;width:140px;height:69px}
    .metro-social .fd{background:url(//goo.gl/ncoLY) no-repeat center center #e9a01c;width:282px;height:69px}
    .metro-social li:hover .fb{background:url(//goo.gl/MH8AP) no-repeat center center #1f69b3}
    .metro-social li:hover .tw{background:url(//goo.gl/hHRHv) no-repeat center center #43b3e5}
    .metro-social li:hover .gp{background:url(//goo.gl/wva4B) no-repeat center center #da4a38}
    .metro-social li:hover .fd{background:url(//goo.gl/JFGqn) no-repeat center center #e9a01c}
    </style>
    <br>
     الشكل الثاني :

    الكود:


    <div dir="rtl" style="text-align: right;" trbidi="on"> <a href="http://www.twitter.com/mmestafa" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW0jODJsQu0TDHhxCOmTmsclJVVIBjU248KxO7O9KDE04MQE7w23x9DxJuSoazXrcA1Sn2zBSkYsFKcC0UPR6Z8Cl-AFFXhMZu0yMz5tKSPSmNeqCh8AX-_eh2PjTkB5OaW3DX1TrSlq0/s1600/twitter.png" /></a><span style="text-align: center;">&nbsp;</span><a href="http://www.facebook.com/mustapha" style="text-align: center;" target="_blank"><img alt="Facebook" original-title="تابعنى على الفيس بوك" src="http://www.shy22.com/upfilpng/xbc54601.png" style="margin: 0px 2px 0px 0px; padding: 0px;" /></a><a href="http://www.youtube.com/Apptice" style="text-align: center;" target="_blank"><img alt="Youtube" original-title="تابعنى على يوتيوب" src="http://www.shy22.com/upfilpng/spi54630.png" style="margin: 0px 2px 0px 0px; padding: 0px;" /></a><span style="text-align: center;">&nbsp;</span><a href="http://www.apptice.blogspot.com/feeds/posts/default" target="_blank"><img alt="" original-title="الخلاصة rss" src="http://www.shy22.com/upfilpng/oee54655.png" style="margin: 0px 2px 0px 0px; padding: 0px; text-align: center;" /></a></div>

    الشكل الثالث :

    الكود:


    <style>
    .social-icone{ height:108px; background-image:url(http://goo.gl/2Vcbf);}
    .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/AVvXsEgRVVSiWdFvCmXpFxZGPV83AnhGYvdA8uNHcXXW1GAmXPd32KWxaJ8ZVnmKPdiOUQ_B__jppzQG8pnZBw4AuRwPfz1wqXCvPNhh-5BJtQk69JUdvuiYirdPC42aA6zm7bQyR-Rux7F_S4Q/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/AVvXsEgGhub4NoJrN3Bgil9CPSElXqrU6HWny4KjRvXADSssHxzL2My8gcpBLow82YqJbtThrgwenqHAhrdH5TJT3dgiZx_AGXs0qZK6psaSSTnOMq3bEQq3xC1Kd9kWa5l3UNnuzXb8rBzOe0Q/s1600/youtube2.png)top no-repeat;}
    .twt-icone{
    width: 50px;
    height: 32px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrCuVRJD6nfou7cRp0oI3bGRvDeMwlC1GxEp_43hxrRjonGsHdcMIpSEvsClQg9rMXJqKeLK0zIrO5lEAeLIC5Bn37WULp69KohDD2FJfrYm-JK1-yXdxOK6A0p-f2jfo3HCu9KhTjR1s/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/AVvXsEhlizj_tDUh80mLHGmfwB7B13GyxShB0HQA8Kdq4jaQC3nx1j-L3-kBCEL9tnd79U5HOXxyoAznvWxBO-rD3YcxNot85M5ALRz9rIhAMfYI7nehjcrwAzG1oj6w9NSBMiu0CntwJrrOt5o/s1600/twitter2.png)top no-repeat;}
    .face-icone{
    width: 50px;
    height: 32px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwZc9Cc-x8EZhG9hUf6HoKhidqJi9gfQ-HOBdd5rMCRJ97PdzvT4fHlXj-G4Ndf1lMJxJyzXlRhWchbtKi6BDQdjwAtKL_8V_hh4na7Se_uRUzZIMwRpBzynn-N6JZD7oLXfpM69VX9W4/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/AVvXsEivjMoGpFukkeL2vElgkdvafRKHrtiAr_BBi2fKW5KFsQcHL71yzMKKuJ6dOS4YegukuQzcDGTjEz29yKgviWDZvgyUq9mLEksldxMFtuJlMVpgQ_XDqqf4YWBmXlENo-jVJL2SWPFqSRY/s1600/facebook2.png)top no-repeat;}
    .rss-icone{
    width: 50px;
    height: 32px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpD9oGRYMqgnaMskrvvUHFZ5oQednluY5MT9od6ZC5oa4PlUiBRrlbEzi405SYhhyh4IjRGM0_LRX0Tv00dn8WHOXUA4PF_5k1_Hu_-CVCw2qkav1zXE3G9mRO98Nk5l9IGXVhDDdZO1M/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/AVvXsEh9-WljhJA7oGC4EY3gsJiVBxjTc0nDtZk2IvlHBjdAQbPOy5rqOe-lFjNKqxvdKRErLrhJZuCz93EcqiurRuCml5YxExDiNLEC_GuIZGcaVG1NBqLv4ssm7-zF1PlNfqtLKdNuXW4ZyEs/s1600/RSS2.png)top no-repeat;}
    .post-footer-line > * {
    margin-left: 0;
    }
    </style>
    <div class="social-icone">
    <a href="http://www.youtube.com/subscribe_widget?p=ProtectHacker">
    <div class="you-icone"><b>1.000</b><span>مشترك</span></div></a>
    <a href="http://www.twitter.com/mmestafa">
    <div class="twt-icone"><b>1.000</b><span>متابع</span></div></a>
    <a href="https://www.facebook.com/apptice">
    <div class="face-icone"><b>1.500</b><span>معجب</span></div></a>
    <a href="http://feedburner.google.com/fb/a/mailverify?uri=apptice">
    <div class="rss-icone"><b>1.000</b><span>مشترك</span>
    </div></a></div>
    إن أعجبك الموضوع لاتنسى مشاركته مع أصدقائك ويسعدني أيضا قراءة تعليقاتكم
    شارك المقال

    مقالات متعلقة

    تعليقات: 0

    إرسال تعليق