سوبر تقني: كود ايقونات مواقع التواصل الاجتماعي بشكل جذاب

اهلا بكم اليوم حبيت اقدم لكم ايقونات لمواقع التواصل الاجتماعي بشكل جذاب جدا
لا اريد ان اطول عليكم نبدة الان

لمعينة الاداة

اولا ان ارت ان تضعها في اي مكان

الخطوات

سجل دخولك الي المدونة
اذهب الي التخطيط
اختر اضافة ادات HTML/JavaScript
لا تضع عنوان لان الاداة لها عنوان
ضع الكود التالي

.facebook-9:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: 0 0px 20px #000;
background:#FEFEFE;
box-shadow: 0 0 0 4px #3B5998;
border:1px solid #3B5998;
border-radius:100%;
-moz-border-radius:100%;
-webkit-border-radius:100%;
-moz-transition:all 1.2s ease-in-out;
transition:all 1.2s ease-in-out;
-webkit-transition:all 1.2s ease-in-out;s
}
.google_plus-9{
transition: all 0.8s ease-in-out;
    width: 65px;
}
.google_plus-9:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: 0 0px 20px #000;
background:#FEFEFE;
    box-shadow: 0 0 0 4px #D23E2B;
border:1px solid #3B5998;
border-radius:100%;
-moz-border-radius:100%;
-webkit-border-radius:100%;
-moz-transition:all 1.2s ease-in-out;
transition:all 1.2s ease-in-out;
-webkit-transition:all 1.2s ease-in-out;s
}
.twitter-9{
    transition: all 0.8s ease-in-out;
    width: 65px;
}
.twitter-9:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: 0 0px 20px #000;
background:#FEFEFE;
    box-shadow: 0 0 0 4px #4CC2FF;
border:1px solid #3B5998;
border-radius:100%;
-moz-border-radius:100%;
-webkit-border-radius:100%;
-moz-transition:all 1.2s ease-in-out;
transition:all 1.2s ease-in-out;
-webkit-transition:all 1.2s ease-in-out;s
}
.youtube-9{
    transition: all 0.8s ease-in-out;
    width: 65px;
}
.youtube-9:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: 0 0px 20px #000;
background:#FEFEFE;
    box-shadow: 0 0 0 4px #C4302B;
border:1px solid #3B5998;
border-radius:100%;
-moz-border-radius:100%;
-webkit-border-radius:100%;
-moz-transition:all 1.2s ease-in-out;
transition:all 1.2s ease-in-out;
-webkit-transition:all 1.2s ease-in-out;s
}
.sobertgueni-9{
    border: 2px dotted #FF0000;
    width: 297px;
    height: 143px;
}
</style>

<div class="sobertgueni-9">
<div class="social-9">
تابعنا على صفحاتنا الاجتماعية
    </div>
<div class="social-communication-9">
<div class="facebook-9">
<center>
<a href="https://www.facebook.com/sobertgueni" rel="nofollow" target="blank">     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicIWCePHMVLsP-r7jnGLwuwKyCECunJe7ARIRR2aGlGvhj_c_D2l5Xkoo1CEUPibHHfN-itpLcDXz0LJgp9FRcGOsMBxONaUZQfjK5-KWCqZZJ0mPmK5i5lvdS9RDMfDsP35JR6HNdIP_i/s1600/facebook.png" class="rotate" title="انضم الى صفحتنا  على الفيسبوك"></a>
</center>
</div>
<div class="google_plus-9">
                <center>
            <a href="https://plus.google.com/u/0/109581876997842379399" rel="nofollow" target="blank">     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDVN8K83LamfTd6LVcYeuRHMWM_1J6JiZ0Hji0mXYctqieHUdwB3glZcKLTlvFJDgE5dGD43o-iepkdWgSi_176cZoxwuq6II4bYxJO72TWTbwqshTHiRZzAC6It8zD3333VxlSGG2qpsc/s1600/google_plus.png" class="rotate" title="انضم الى صفحتنا  على جوجل بلس"></a>
                </center>
</div>
<div class="twitter-9">
                <center>
            <a href="https://twitter.com/sobertgueni" rel="nofollow" target="blank">     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG3OKCn6PRScs-ozSUi_uuga19wldppFxclhBhro_48CpHw7Awrmb_0gc8soBrwAiUq2ExmDSvv_uXDgtK9vaOQhIRUfXudRwCrm_q7PFNgk6w64LEmMGr0OWI-6x3IOieKPf-wIVz5n_F/s1600/twitter.png" class="rotate" title="انضم الى صفحتنا  على التويتر"></a>
                </center>
</div>
<div class="youtube-9">
                <center>
            <a href="https://www.youtube.com/channel/UCK_SnXgLvoNX0f_7U5qqb-g" rel="nofollow" target="blank">     <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhvW-SlCeLQIvFuUmIGV-GYwa94QBIZbW7amxmuTWxqnH8zTkiTh5taJIL95yXzohj_j7T1raUt2t32AXGmgYTYjJ212v4E66w8YLpgFkValRSqWUA67XLT5UVxy-5xmvmLmhlA2bD_TvXX/s1600/youtube.png" class="rotate" title="انضم الى صفحتنا  على التويتر"></a>
                </center>
</div>
</div>
</div>

لوضع الكود اسفل المشاركة

ابحث من CTRL+F

ثم ضع الكود التالي اسفل الكود السابق

<b:if cond='data:blog.pageType == "item"'>

وهكذا يكون الدرس انتهاء

شارك الموضوع مع اصدقائك: