إضافة ازرار للمواقع الاجتماعية jQuery بشكل عائم في بلوجر

اليوم اقدم لكم اضافة جميلة وخفيفة وذات مظهر جميل ولا تاخذ مساحة من مدونتك علي البلوجر انها ازرار للمواقع الاجتماعية بشكل عائم ومنظر جميل علي يمين الشاشة في بلوجر بتقنية jQuery.

من لوحة التحكم بمدونتك قم بالضغط علي قالب
ثم تحرير HTML
ثم قم بالبحث عن الكود التالي :

الان قم بوضع هذا الكود فوقه مباشرة

.social-buttons {
    position: fixed; 
    top: 130px;
    width: 45px;
    z-index: 9999;
}
.button-left {
    left: 0;
}
.button-right {
    right: 0;
}
.social-buttons #twitter-btn .social-icon, 
.social-buttons #facebook-btn .social-icon, 
.social-buttons #google-btn .social-icon, 
.social-buttons #rss-btn .social-icon,
.social-buttons #pinterest-btn .social-icon,
.social-buttons #youtube-btn .social-icon {
    background-color: #33353B;
    background-image: url(http://1.bp.blogspot.com/-KOzIiYFlBAk/UUmLwwZSs-I/AAAAAAAAAnA/h6G772N3cpI/s1600/mas-icons.png);
}
.button-left #facebook-btn span {
    background-position: right 10px;
}
.button-left #twitter-btn span {
    background-position: right -35px;
}
.button-left #google-btn span {
    background-position: right -127px;
}
.button-left #rss-btn span {
    background-position: right -80px;
}
.button-left #pinterest-btn span {
    background-position: 11px -177px;
}
.button-left #youtube-btn span {
    background-position: 11px -223px;
}
.button-right #facebook-btn span {
    background-position: 12px 10px;
}
.button-right #twitter-btn span {
    background-position: 11px -35px;
}
.button-right #google-btn span {
    background-position: 10px -127px;
}
.button-right #rss-btn span {
    background-position: 11px -80px;
}
.button-right #pinterest-btn span {
    background-position: 11px -177px;
}
.button-right #youtube-btn span {
    background-position: 11px -223px;
}
.social-buttons #facebook-btn:hover .social-icon {
    background-color: #3B5998;
}
.social-buttons #twitter-btn:hover .social-icon {
    background-color: #62BDB2;
}
.social-buttons #google-btn:hover .social-icon {
    background-color: #DB4A39;
}
.social-buttons #rss-btn:hover .social-icon {
    background-color: #FF8B0F;
}
.social-buttons #pinterest-btn:hover .social-icon {
    background-color: #D43638;
}
.social-buttons #youtube-btn:hover .social-icon {
    background-color: #C4302B;
} 
.social-buttons a:hover .social-text {
    display: block;
}
.button-left .social-icon { 
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: left;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-left .social-text {
    display: none;
    float: right;
    font-size: 1em;
    font-weight: bold;
    margin: 11px 40px 11px 0px;
    white-space: nowrap;
}
.button-right .social-icon { 
    -moz-transition: background-color 0.4s ease-in 0s;
    -webkit-transition: background-color 0.4s ease-in 0s;
    background-repeat: no-repeat;
    display: block;
    float: right;
    height: 43px;
    margin-bottom: 2px;
    width: 43px;
}
.button-right .social-text {
    display: none;
    float: left;
    font-size: 80%;
    font-weight: bold;
    margin: 11px 0 11px 40px;
    white-space: nowrap;
}
.social-buttons .social-text {
    color: #FFFFFF;
}

وبعدها ابحث عن الكود التالي

قم بوضع هذا الكود فوقه مباشرة

واخيرا ابحث عن هذا الكود

وضع قبله الكود التالي:

<div class='social-buttons button-right hidden-phone hidden-tablet'>
<a class='itemsocial' href='https://www.facebook.com/#' id='facebook-btn' target='_blank'>Suivez moi sur Facebook</a>
<a class='itemsocial' href='https://twitter.com/Ton twitter' id='twitter-btn' target='_blank'>Suivez moi sur Twitter</a>
<a class='itemsocial' href='https://plus.google.com/#' id='google-btn' target='_blank'>Suivez moi sur Google</a>
<a class='itemsocial' href='http://pinterest.com/#' id='pinterest-btn' target='_blank'>
Follow via Pinterest</a>
<a class='itemsocial' href='https://www.youtube.com/user/#' id='youtube-btn' target='_blank'>Suivez moi sur Youtube</a>
<a class='itemsocial' href='http://feeds.feedburner.com/#' id='rss-btn' target='_blank'>Abonnez vous RSS</a>
</div>

غير

غير ما بالون الازرق بروابط صفحاتك علي المواقع الاجتماعية وأخيرا،قم بحفظ النموذج.

عن الكاتب محترف البلوجر

أحمد التونسي : من تونس, اهتمامي وحبي لتدوين هو ما جعلني أستمر ليس فقط لتقديم المواضيع بل أيضا لمساعدة الأشخاص المبتدئين ، كما كنت سابقا إلا أني لم أجد من يساعدني ! مع ذلك كافحة وواضبة على ما أحبه من عمل لأصل إلى ما أريده ، ليس كمستقبل لكن كهدف حققته ,لدي إهتمامات اخرى منها الرياضة ، ألعاب الفيديو ، والتصميم بحد ذاته ومدونة محترف البلوجر الافضل لكم تعبر عما أهواه .

إضافة ازرار للمواقع الاجتماعية jQuery بشكل عائم في بلوجر

عن الكاتب محترف البلوجر

مواضيع ذات صلة