شرح عمل أزرار مواقع الاجتماعية مع CSS3 فقاعة تلميح أداة تأثير
المواقع الاجتماعية هي دائما مفيدة للمدون، ومهمة جدا فهي تعتبر احدى مصادر الزوار ونتشار المنشورات والمواضيع التي تمتلكها وتساعد القراء في ايجادها بسهولة عبر الانترنت ويعتبر المواقع الاجتماعية حركة مرور إلى بلوق (المدونة) الخاص بك وجلب الزوار وايضا من الممكن ان تخدم زوار الموقع ومتابعتك عبر وسائل الاعلام الاجتماعية , وايضا تبقى متابعيك على اتصال مع المدونة الخاصة فيك , واليوم مع مدونة mydocx شرح كيفية عمل ازرار تواصل المواقع الاجتماعية داخل مدونتك تابع معي اخي الكريم الشرح .في هذا المدونة سوف نوفر لك ازرار وسائل الاعلام الاجتماعية بشكل جذابة وجميل لمتابعتنا مع CSS3
الشرح كيفية اضافة الكود الخاص لعمل فقاعة بالازرار الاجتماعية
الكود الاول :
.nav-tt{
padding: 50;
width: 70%;
height: 70px;
margin: 80px auto 30px auto;
}
.nav-tt li{
float: left;
list-style: none;
}
.nav-tt li a{
display: block;
width: 40px;
height: 40px;
margin: 0 2px;
outline: none;
position: relative;
z-index: 2;
text-indent: -9000px;
text-decoration: none;
}
.nav-tt li .gplus{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB8pUxCbK4JhCwwhhWUP8lZYP2uhjhpVanuoKLZn3zQcyGkJCTEg5VMZeHprqMofMXIfl-huZyTHgFG5ArO35x_Dkc4kMFEpYlGS_qf4EFnUqCAZ5pyPtd4b2rr3n2o2YKsnTAHLB7z6N2/s128/google_plus.png) no-repeat;
}
.nav-tt li .twitter{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHhSzhevDX-xGvdO-GLz8MQKBkeEvJBTAfjF5A_SUE4kMCkgRbnIsFcJgV8DLEiQKxu0HaN6CpOXKNS7VCvF1xOSYwpkwSV7xJgaMxfHP7no5BPjhxtNVhI-yuPKO4ikOX3hFIom2P0KY3/s128/twitter_1.png) no-repeat;
}
.nav-tt li .pinterest{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu1hXbaIiwZcRTvBNCNBPSKNIy3O8YMa5C4BhwkMXe7FTnMZ2mLomz4DRWTbvg_-MW4SzxNDogvCbFWi65WNwqrPRW7wyzpcdtVAlU7fn93AgHWrWxPGL7EbzlsJ0nkCXq1rMW6oqqFOcv/s128/pinterest.png) no-repeat;
}
.nav-tt li .facebook{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE1y6P6wh9qTuwtwy7k-lkI8sFtyhvgIvLJS_MNQ0962o61r10SldSxG1auUqaqWfayNZKla-585BDrGmv2FwbKqBomtyxQy4oMu6GaoSRllGqGqdz20fktg_DnGi46IOAYJp08szR1rGd/s128/fb_1.png) no-repeat;
}
.nav-tt li .linkedin{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi93l71kn84LiySWQ0ob43Y7kQD7eu0hkLdNsxhtO5ynd5aSj5D_qfE5qNp-eBq68P1oodQXKuhKXqA0v92tQk7AbJbrrCSv3f-_Z7PgiVEt9pzcrDEzouKOwob4Xqrj1LkNCPskj6aQ9Wo/s128/linkedin.png)no-repeat;
}
.nav-tt li .tumblr{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj497SE-sk-fgPZWCk-RkCM-ApAnJHNCRB0NY-xW_WpXhbBVQmcqoIQEO8-Hucl4iADBbaK4h11WRhQ3FeJ403J8Kwymn67D50iSwsP2cE4p5Wia4Gwcuxya3mEI3rQD2-P0qwcnzUNT0Ko/s128/tumblr.png) no-repeat;
}
.nav-tt li .youtube{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixNM9BNKFul0L5uPNmZ3nmE2T9h19IudAAoSyWsW7X2M2Yu3CdGB8qp19lXcEqYyrroeR6R3w0RGfv2Q5fVPKpOmBS-lpuajGFKtJeZyi1CTSEW_2yN6ZbbDyleEoRNpliA1bbYKLEEKXL/s128/you_tube.png) no-repeat;
}
.nav-tt li .mail{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijguY0KlqkW-Ki4-q5cAQ0X1IIhkLyFZGjdo0ANSUiqE1z-fyStM0FhStEtppiDyDfpeBJsfu8AKKZ_-lbrF_S358J5r7v2MraPK8ffGOIV2hsJ3W5jKyBHzKs07YnNeLc0GOvT57Y0dVF/s32/email.png) no-repeat;
}
.nav-tt li .rss{
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4C0tnyHfcSSumymx0QFKXyCdiS_eMyLv8iFqizXF2KTwHtPXizxU_daaUO3eF5yz1tmF1-eI_RTCPlibXghOD6fHEdhwUlgZoEVaCqRQmlZ3hfocDEdq3FHcUIZghDJHbFCDbDJYBg655/s128/rss.png) no-repeat;
}
.nav-tt li a span{
width: 80px;
height: 80px;
line-height: 80px;
padding: 10px;
left: 50%;
margin-left: -60px;
font-family: 'Alegreya SC', Georgia, serif;
font-weight: 400;
font-style: italic;
font-size: 14px;
color: #719DAB;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
text-align: center;
border: 5px solid #ffffff;
background: rgba(255,255,255,0.5);
text-indent: 0px;
position: absolute;
pointer-events: none;
border-radius: 50%;
bottom: -40px;
opacity: 0;
box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.nav-tt li a span:before,
.nav-tt li a span:after{
content: '';
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 11px solid rgba(0,0,0,0.1);
}
.nav-tt li a span:after{
bottom: -13px;
margin-left: -10px;
border-top: 10px solid #ffffff;
}
.nav-tt li a:hover span{
opacity: 0.9;
bottom: 50px;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
الكود الثاني لاتنسى تغير # في رابط صفحتك على المواقع الاجتماعية :
في حالة اضافة الكود الثاني للمدونة تذهب لهذا المسار
Layout >> Add a Gadget >> Edit HTML/JavaScript
<div class="lordbuttons">
<ul class="nav-tt">
<li><a class="twitter" href="#" target="_blank"><span>Twitter</span></a></li>
<li><a class="gplus" href="#" target="_blank"><span>Google Plus</span></a></li>
<li><a class="facebook" href="#" target="_blank"><span>Facebook</span></a></li>
<li><a class="linkedin" href="#" target="_blank"><span>LinkedIn</span></a></li>
<li><a class="tumblr" href="#" target="_blank"><span>Tumblr</span></a></li>
<li><a class="pinterest" href="#" target="_blank"><span>Pinterest</span></a></li>
<li><a class="youtube" href="#" target="_blank"><span>Youtube</span></a></li>
<li><a class="mail" href="#" target="_blank"><span>Mail</span></a></li>
<li><a class="rss" href="#" target="_blank"><span>RSS</span></a></li>
</ul></div>
شكرا لكم على متابعتنا كنتم مع mydocx , الرجاء عدم نشر الموضوع من غير ذكر المصدر ورابط في حالة اعجبت بالموضوع كلمة شكر للكاتب تشجيعا .
0 تعليقات بلوجر
