اضافة ازرار شبكات التواصل بمظهر جديد احترافي

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

اضافتنا اليوم مختلفة عن اضافات السابقة التي قد طرحت هنا وربما في اماكن اخرى ما يميز هذي اضافة انها ذو مظهر بسيط وبنفس الوقت احترافي على شكل صندوق سايدبار ب6 ازرار مثلما تشاهدون في صورة وبتأثير رائع 

طريقة التركيب صالحة لأي موقع :

كود Css

.socialize { width: 161px; height: 190px; margin: 0 auto 30px;}.socialize-title { background: #0088ac; text-align: center; font-size: 14px; height: 62px; padding: 9px 0 0 0; color: #fff;}.socialize-title h6 { line-height: 22px;}.socialize ul { width: 161px; margin: 0; padding: 0; border-right: 1px solid #dadada;}.socialize ul li { float: left;}.socialize ul li a { display: block; width: 80px; height: 42px; border-bottom: 1px solid #dadada; border-left: 1px solid #dadada;}.socialize ul li a:hover {}.fb { background: url(http://www.colorslab.net/wp-content/themes/colorslabv-3/images/socials.png) 31px 11px no-repeat;}.fb:hover { background: url(http://www.colorslab.net/wp-content/themes/colorslabv-4/images/socials.png) 31px -31px no-repeat #1c659e;}.tw { background: url(http://www.colorslab.net/wp-content/themes/colorslabv-3/images/socials.png) -17px 11px no-repeat;}.tw:hover { background: url(http://www.colorslab.net/wp-content/themes/colorslabv-3/images/socials.png) -17px -32px no-repeat #009cc0;}.go { background: url(http://www.colorslab.net/wp-content/themes/colorslabv-3/images/socials.png) 33px -72px no-repeat;}.go:hover { background: url(http://www.colorslab.net/wp-content/themes/colorslabv-3/images/socials.png) 33px -114px no-repeat #dd4b39;}.pin { background: url(http://www.colorslab.net/wp-content/themes/colorslabv-3/images/socials.png) -18px -76px no-repeat;}.pin:hover { background: url(http://www.colorslab.net/wp-content/themes/colorslabv-3/images/socials.png) -18px -115px no-repeat #cb2027;}.inn { background: url(http://www.colorslab.net/wp-content/themes/colorslabv-3/images/socials.png) 33px -153px no-repeat;}.inn:hover { background: url(http://www.colorslab.net/wp-content/themes/colorslabv-3/images/socials.png) 33px -195px no-repeat #256ca7;}.rss { background: url(http://www.colorslab.net/wp-content/themes/colorslabv-3/images/socials.png) -18px -153px no-repeat;}.rss:hover { background: url(http://www.colorslab.net/wp-content/themes/colorslabv-3/images/socials.png) -18px -193px no-repeat #fc8c00;}

كود html

                <div class="socialize">
                    <div class="socialize-title">
                        <h6 class="font-n">الشبكات الإجتماعية</h6>
                        <h6>للتواصل</h6>
                    </div>
                    <ul>
                        <li><a href="https://www.facebook.com/اسم صفحه" class="fb"></a></li>
                        <li><a href="https://www.twitter.com/اسم صفحة" class="tw"></a></li>
                        <li><a href="https://plus.google.com/+معرف" class="go"></a></li>
                        <li><a href="http://www.pinterest.com/اسم صفحه/" class="pin"></a></li>
                        <li><a href="http://www.linkedin.com/company/اسم صفحه" class="inn"></a></li>
                        <li><a href="feeds.feedburner.com/معرف" class="rss"></a></li>
                        <div class="clearfix"></div>
                    </ul>
                </div>
            </div>