Sosyal Medya Menü

Yerleşim / Gadget ekle diyerek aşağıdaki kodları yapıştırın...

<style> .abt-box{font: 25px/24px normal 'Denk One', sans-serif;display: inline-block;position: relative;width: 95%;max-width: 280px;margin: 0 auto 15px auto;padding: 16px;background-color: rgba(238, 238, 238, 0.1);box-shadow: 8px 8px 0 0px rgba(0, 0, 0, 0.1);-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;margin-left:15px;}.abt-social {width: 95%;max-width: 280px;padding-top: 8px;padding-left: 8px;padding-right: 8px;}.abt-social a {text-decoration: none !important;}.abt-social ul {margin: 0;padding: 0;list-style: none;}.abt-social ul li {display: inline;margin: 0;padding: 0;text-indent: 0}.abt-social ul li a.facebook {border-left: 65px solid rgba(59, 89, 152, 1);color: rgba(59, 89, 152, 1);-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}.abt-social ul li a.facebook p {margin: 2px 35px 0 -70px;display: inline-block;color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}.abt-social ul li a.facebook:hover {background: rgba(59, 89, 152, 1);border-left: 0px solid rgba(59, 89, 152, 0.1);color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}.abt-social ul li a.facebook:hover p {opacity: 0;-webkit-transition: all 1ms ease-in-out;-moz-transition: all 1ms ease-in-out;-ms-transition: all 1ms ease-in-out;-o-transition: all 1ms ease-in-out;transition: all 1ms ease-in-out;}.abt-social ul li a.twitter {border-left: 65px solid rgba(64, 153, 255, 1);color: rgba(64, 153, 255, 1);-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}.abt-social ul li a.twitter p {margin: 2px 35px 0 -70px;display: inline-block;color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}.abt-social ul li a.twitter:hover {background: rgba(64, 153, 255, 1);border-left: 0px solid rgba(64, 153, 255, 1);color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}.abt-social ul li a.twitter:hover p {opacity: 0;-webkit-transition: all 1ms ease-in-out;-moz-transition: all 1ms ease-in-out;-ms-transition: all 1ms ease-in-out;-o-transition: all 1ms ease-in-out;transition: all 1ms ease-in-out;}.abt-social ul li a.gplus {border-left: 65px solid rgba(219, 74, 57, 1);color: rgba(219, 74, 57, 1);-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}.abt-social ul li a.gplus p {margin: 2px 35px 0 -70px;display: inline-block;color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}.abt-social ul li a.gplus:hover {background: rgba(219, 74, 57, 1);border-left: 0px solid rgba(219, 74, 57, 1);color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}.abt-social ul li a.gplus:hover p {opacity: 0;-webkit-transition: all 1ms ease-in-out;-moz-transition: all 1ms ease-in-out;-ms-transition: all 1ms ease-in-out;-o-transition: all 1ms ease-in-out;transition: all 1ms ease-in-out;}.abt-social ul li a.pinterest {border-left: 65px solid rgba(174, 45, 39, 1);color: rgba(174, 45, 39, 1);-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}.abt-social ul li a.pinterest p {margin: 2px 35px 0 -70px;display: inline-block;color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}.abt-social ul li a.pinterest:hover {background: rgba(174, 45, 39, 1);border-left: 0px solid rgba(174, 45, 39, 1);color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}.abt-social ul li a.pinterest:hover p {opacity: 0;-webkit-transition: all 1ms ease-in-out;-moz-transition: all 1ms ease-in-out;-ms-transition: all 1ms ease-in-out;-o-transition: all 1ms ease-in-out;transition: all 1ms ease-in-out;}.abt-social ul li a.linkedin {border-left: 65px solid rgba(0, 123, 182, 1);color: rgba(0, 123, 182, 1);-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}.abt-social ul li a.linkedin p {margin: 2px 35px 0 -70px;display: inline-block;color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}.abt-social ul li a.linkedin:hover {background: rgba(0, 123, 182, 1);border-left: 0px solid rgba(0, 123, 182, 1);color: #fff;-webkit-transition: all 300ms ease-in-out;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;}.abt-social ul li a.linkedin:hover p {opacity: 0;-webkit-transition: all 1ms ease-in-out;-moz-transition: all 1ms ease-in-out;-ms-transition: all 1ms ease-in-out;-o-transition: all 1ms ease-in-out;transition: all 1ms ease-in-out;}</style><div class="abt-social"><ul><li><a class="abt-box facebook" href="https://www.facebook.com/BloggerWebTasarim" target="_blank"><p>15K+</p>Facebook </a></li><li><a class="abt-box twitter" href="https://twitter.com/xxxxxxxxx" target="_blank"><p>10K+</p>Twitter</a></li><li><a class="abt-box gplus" href="https://plus.google.com/u/0/b/+xxxxxxxxxxx" target="_blank"><p>5K+</p>Google+</a></li><li><a class="abt-box pinterest" href="http://www.pinterest.com/xxxxxxxxxxxxx/" target="_blank"><p>4K+</p>Pinterest</a></li><li><a class="abt-box linkedin" href="http://www.linkedin.com/company/xxxxxxxxxxxx" target="_blank"><p>10K+</p>Linkedin</a></li></ul></div>