مدونة الزعيم تقدم لكم جديد دروس وشروحات الإنترنت، بلوجر ووردبريس، اضافات وادوات، قوالب بلوجر معربة, ادسنس، سيو SEO ، تحميل برامج مجانية وتطبيقات اندرويد، مقالات ومواقع.

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

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

ازرار للمواقع الاجتماعية

معاينة الاضافة


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

]]></b:skin>

 الان قم بوضع هذا الكود فوقه مباشرة
 .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;
}
 وبعدها ابحث عن الكود التالي
 </head>
 قم بوضع هذا الكود فوقه مباشرة

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js' type='text/javascript'/>
<script>
    $(window).load(function(){
        $(&#39;.social-buttons .social-icon&#39;).mouseenter(function(){
            $(this).stop();
            $(this).animate({width:&#39;160&#39;}, 500, &#39;easeOutBounce&#39;,function(){}); 
        });
        $(&#39;.social-buttons .social-icon&#39;).mouseleave(function(){
            $(this).stop();
            $(this).animate({width:&#39;43&#39;}, 500, &#39;easeOutBounce&#39;,function(){});
        });
    });
</script>
 واخيرا ابحث عن هذا الكود
</body>
 وضع قبله الكود التالي:

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

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

  هناك 3 تعليقات:

اترك تعليقا ... رايك يهمنا ...يسعدنا تفاعلكم بالتعليق
حريّة الرد متاحة للجميع بشرط الا تكون الردود خارج نطاق الموضوع وأن تكون خاليه من الكلمات البذيئة. يرجى عدم نشر روابط إشهار .
تذكّر قول الله عز وجل (ما يلفظ من قول إلا لديه رقيب عتيد) .

ملحوظة: يمكن لأعضاء المدونة فقط إرسال تعليق.

المشاركات الشائعة