Sitene Seçilmiş Sosyal Medya Butonları

Kod Resmi

Kod Açıklaması

Kod İçerisinde Gerekli Yerleri Kendinize Göre Değiştiriniz..

Kod Önizleme

Demo

Sitenize Ekliyeceğiniz Kod

Stil 1

<div id="content"> <!-- Somutkod.blogspot.com Kod Paylaşım Merkezi --><style type="text/css">.md-wrapper{padding:0;width:435px;height:70px;margin:80px auto 30px auto;}.md-wrapper li{float:left;}.md-wrapper ol,ul{list-style:none;}.md-wrapper li a{display:block;width:68px;height:70px;margin:0 2px;outline:none;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj99fVmeK_9NLmBttP9H3SYFLtnktKmlu9EjskIBhQ8hXG0Ot6VJOmEC6TzjBmHZCuWBH_Ojlp1D0fWnv-uCcJxG6nyrL0DlHyGwEqe1TRIFjJ3mgW6XkiasngI30fKWs4jg00KW7RXXdRa/s1600/sosyaliconlar.png) no-repeat top left;text-indent:5000px;position:relative;}.md-wrapper li .md-gplus{background-position:0px 0px;}.md-wrapper li .md-twitter{background-position:-65px 0px;}.md-wrapper li .md-facebook{background-position:-204px 0px;}.md-wrapper li a span{width:100px;height:auto;line-height:20px;padding:10px;left:50%;margin-left:-64px;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:4px solid #000000;background:rgba(0,0,0,0.0);text-indent:0px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;position:absolute;pointer-events:none;bottom:100px;opacity:0;/*box-shadow*/-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.1);-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.1);box-shadow:1px 1px 2px rgba(0,0,0,0.1);/*transition*/-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}.md-wrapper li a span:before,.md-wrapper 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:10px solid rgba(0,0,0,0.9);}.md-wrapper li a span:after{bottom:-14px;margin-left:-10px;border-top:10px solid #ffff;}.md-wrapper li a:hover span{opacity:0.9;bottom:70px;}.md2-wrapper{padding:0;width:435px;height:70px;margin:80px auto 30px auto;}.md2-wrapper li{float:left;}.md2-wrapper ol,ul{list-style:none;}.md2-wrapper li a{display:block;width:68px;height:70px;margin:0 2px;outline:none;position:relative;z-index:2;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj99fVmeK_9NLmBttP9H3SYFLtnktKmlu9EjskIBhQ8hXG0Ot6VJOmEC6TzjBmHZCuWBH_Ojlp1D0fWnv-uCcJxG6nyrL0DlHyGwEqe1TRIFjJ3mgW6XkiasngI30fKWs4jg00KW7RXXdRa/s1600/sosyaliconlar.png) no-repeat top left;text-indent:-9000px;}.md2-wrapper li .tt-gplus{background-position:0px 0px;}.md2-wrapper li .md2-twitter{background-position:-0px 0px;}.md2-wrapper li .md2-facebook{background-position:-100px 0px;}.md2-wrapper li a span{width:70px;height:80px;line-height:80px;padding:10px;left:50%;margin-left:-70px;font-family:'Alegreya SC', Georgia, serif;font-weight:400;font-style:italic;font-size:14px;color:#ffff;text-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);text-align:center;border:5px solid #fff;background:rgba(0,0,0,0.0);text-indent:0px;position:absolute;pointer-events:none;/*border-radius*/-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;bottom:-40px;opacity:0;/*box-shadow*/-webkit-box-shadow:0px 3px 8px rgba(0,0,0,0.8);-moz-box-shadow:0px 3px 8px rgba(0,0,0,0.1);box-shadow:0px 3px 8px rgba(0,0,0,0.1);/*transform*/-webkit-transform:scale(0.2);-moz-transform:scale(0.2);-ms-transform:scale(0.2);-o-transform:scale(0.2);transform:scale(0.2);/*transition*/-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}.md2-wrapper li a:hover span{opacity:0.9;bottom:50px;/*transform*/-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1);}.md3-wrapper{padding:0;width:435px;height:70px;margin:80px auto 30px auto;}.md3-wrapper li{float:left;}.md3-wrapper ol,ul{list-style:none;}.md3-wrapper li a{display:block;width:68px;height:70px;margin:0 2px;outline:none;position:relative;z-index:2;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj99fVmeK_9NLmBttP9H3SYFLtnktKmlu9EjskIBhQ8hXG0Ot6VJOmEC6TzjBmHZCuWBH_Ojlp1D0fWnv-uCcJxG6nyrL0DlHyGwEqe1TRIFjJ3mgW6XkiasngI30fKWs4jg00KW7RXXdRa/s1600/sosyaliconlar.png) no-repeat top left;text-indent:-9000px;}.md3-wrapper li .md3-gplus{background-position:0px 0px;}.md3-wrapper li .md3-twitter{background-position:-68px 0px;}.md3-wrapper li .md3-facebook{background-position:-204px 0px;}.md3-wrapper li a span{width:80px;height:auto;padding:10px;left:50%;margin-left:-55px;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 #fff;background:rgba(0,0,0,0.0);text-indent:0px;position:absolute;pointer-events:none;bottom:-40px;opacity:0;/*box-shadow*/-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.1);-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.1);box-shadow:0px 1px 2px rgba(0,0,0,0.1);/*transition*/-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;/*transform*/-webkit-transform:rotate(0deg) scale(0);-moz-transform:rotate(0deg) scale(0);-ms-transform:rotate(0deg) scale(0);-o-transform:rotate(0deg) scale(0);transform:rotate(0deg) scale(0);}.md3-wrapper li a:hover span{opacity:0.9;bottom:100px;/*transform*/-webkit-transform:rotate(-90deg) scale(1);-moz-transform:rotate(-90deg) scale(1);-ms-transform:rotate(-90deg) scale(1);-o-transform:rotate(-90deg) scale(1);transform:rotate(-90deg) scale(1);}.md4-wrapper{padding:0;width:435px;height:70px;margin:80px auto 30px auto;}.md4-wrapper li{float:left;}.md-wrapper ol,ul{list-style:none;}.md4-wrapper li a{display:block;width:68px;height:70px;margin:0 2px;outline:none;background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj99fVmeK_9NLmBttP9H3SYFLtnktKmlu9EjskIBhQ8hXG0Ot6VJOmEC6TzjBmHZCuWBH_Ojlp1D0fWnv-uCcJxG6nyrL0DlHyGwEqe1TRIFjJ3mgW6XkiasngI30fKWs4jg00KW7RXXdRa/h61/sosyaliconlar.png) no-repeat top left;text-indent:-9000px;position:relative;}.md4-wrapper li .md4-gplus{background-position:0px 0px;}.md4-wrapper li .md4-twitter{background-position:-68px 0px;}.md4-wrapper li .md4-facebook{background-position:-204px 0px;}.md4-wrapper li a span{width:100px;height:auto;line-height:20px;padding:10px;left:50%;margin-left:-64px;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:4px solid #00000;background:rgba(0,0,0,0.0);text-indent:0px;/*border-radius*/-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;position:absolute;bottom:70px;opacity:0;visibility:visible;pointer-events:none;/*box-shadow*/-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.1);-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.1);box-shadow:1px 1px 2px rgba(0,0,0,0.1);/*transform*/-webkit-transform:translate(35px) rotate(25deg) scale(1.5);-moz-transform:translate(35px) rotate(25deg) scale(1.5);-ms-transform:translate(35px) rotate(25deg) scale(1.5);-o-transform:translate(35px) rotate(25deg) scale(1.5);transform:translate(35px) rotate(25deg) scale(1.5);/*transition*/-webkit-transition:all 0.3s ease-in-out;-moz-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;}.md4-wrapper li a span:before,.md4-wrapper 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:10px solid rgba(0,0,0,0.1);}.md4-wrapper li a span:after{bottom:-14px;margin-left:-10px;border-top:10px solid #000000;}.md4-wrapper li a:hover span{visibility:visible;opacity:0.9;/*transform*/-webkit-transform:translate(0px) rotate(0deg) scale(1);-moz-transform:translate(0px) rotate(0deg) scale(1);-ms-transform:translate(0px) rotate(0deg) scale(1);-o-transform:translate(0px) rotate(0deg) scale(1);transform:translate(0px) rotate(0deg) scale(1);}</style><ul class="md-wrapper"><li><a class="md-gplus" href="Google profil url" _fcksavedurl="Google profil url"><span>Google Plus</span></a></li><li><a class="md-twitter" href="twitter url" _fcksavedurl="twitter url"><span>Twitter</span></a></li><li><a class="md-facebook" href="Facebook url" _fcksavedurl="Facebook url"><span>Facebook</span></a></li></ul> <!-- Somutkod.blogspot.com Kod Paylaşım Merkezi -->

Stil 2

<style>p#hb_socialicons img { /* Somutkod.blogspot.com */ -moz-transition: all 0.4s ease-in-out; -webkit-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; } p#hb_socialicons img:hover { -moz-transform: rotate(120deg); -webkit-transform: rotate(50deg); -o-transform: rotate(50deg); -ms-transform: rotate(50deg);| transform: rotate(50deg); } /* iceriklerin degistirilmesi yasaktir. */ </style> <center><p id="hb_socialicons"> <a href="Facebook link buraya" _fcksavedurl="Facebook link buraya"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLyRpFP6lWav5FreJtGzTEiF6YUrUGylBAIyTByiph3D4SHkyDHhYqS7R0qR0O3uySp_VpKjCOWuDC7BjnXja91xnts7qLmcp2YWGV7Luu5hMpbxJ3hWAYvvBg1_82Z2ZtxcO0KR4N72OQ/h120/facebook-icon.png" _fcksavedurl="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLyRpFP6lWav5FreJtGzTEiF6YUrUGylBAIyTByiph3D4SHkyDHhYqS7R0qR0O3uySp_VpKjCOWuDC7BjnXja91xnts7qLmcp2YWGV7Luu5hMpbxJ3hWAYvvBg1_82Z2ZtxcO0KR4N72OQ/h120/facebook-icon.png" /></a> <a href="Tiwitter link buraya" _fcksavedurl="Tiwitter link buraya"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj04VtCTfk_3pPqGNsOypSWFCy1ZEFeKOJ57PCZ6voVkQ1qYU2GadTKH0Mq-MIkckYyUsuXwN1nKxAr5V-Ycf6MFypnsMbwkmrc3qt_7_YntkiHWQRS7Uya8eDHemEjf62JQmjwQ2yH6px4/h120/twitter-icon.png" _fcksavedurl="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj04VtCTfk_3pPqGNsOypSWFCy1ZEFeKOJ57PCZ6voVkQ1qYU2GadTKH0Mq-MIkckYyUsuXwN1nKxAr5V-Ycf6MFypnsMbwkmrc3qt_7_YntkiHWQRS7Uya8eDHemEjf62JQmjwQ2yH6px4/h120/twitter-icon.png" /></a> <a href="Google link buraya" _fcksavedurl="Google link buraya"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEh62sTqjvFdCOqdPhNr_EDVdzB74P1_wKZ4XywmDJCX71nB0I96w2NDUzUhxIRWzQGjDeH0cO1z-Z5LJQ_aSoibvwCo5U30ym7zYCRqtBr8YTVk4mMWibpkHw9Gv-YXlo9joT_cOVNaEU/h120/google-icon.png" _fcksavedurl="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEh62sTqjvFdCOqdPhNr_EDVdzB74P1_wKZ4XywmDJCX71nB0I96w2NDUzUhxIRWzQGjDeH0cO1z-Z5LJQ_aSoibvwCo5U30ym7zYCRqtBr8YTVk4mMWibpkHw9Gv-YXlo9joT_cOVNaEU/h120/google-icon.png" /></a> <a href="Rss link buraya" _fcksavedurl="Rss link buraya"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisS4TxiP6Z3Xjf0sM6eCWI72lSX5Ke103jZyxKiBxH6kZ7lxeAuNKNzOcySvHv8R_JtKtfAddNm54QRIs9qu7nFzGXnvh04eQyJ8HPibVZFa1qa5wU-iJ3Of55DwPu7n4PomLiyth94TsP/h120/rss-icon.png" _fcksavedurl="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisS4TxiP6Z3Xjf0sM6eCWI72lSX5Ke103jZyxKiBxH6kZ7lxeAuNKNzOcySvHv8R_JtKtfAddNm54QRIs9qu7nFzGXnvh04eQyJ8HPibVZFa1qa5wU-iJ3Of55DwPu7n4PomLiyth94TsP/h120/rss-icon.png" /></a> <a href="youtube link buraya" _fcksavedurl="youtube link buraya"> <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijIT-YwfdAJAidU4zih8AGOGZpfW8Kw4brsjJs4zR1b4rTMJEZirTHewOqwXedyAbMzmOOg77aqYquk1Kf5UpwaSs3Ta4YiSax1X0Ceyb19ths_xpD3kEou29ZSqUDvAWjvnUGy_26R665/h120/youtube-icon.png" _fcksavedurl="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijIT-YwfdAJAidU4zih8AGOGZpfW8Kw4brsjJs4zR1b4rTMJEZirTHewOqwXedyAbMzmOOg77aqYquk1Kf5UpwaSs3Ta4YiSax1X0Ceyb19ths_xpD3kEou29ZSqUDvAWjvnUGy_26R665/h120/youtube-icon.png" /></a> </p></center></body></html>

Stil 3

<style> #social { margin: 15px 0 5px -15px; width: 350px; height: 40px; text-align: center; } #social img { margin-left: 3px; margin-right: 3px; } #social img:hover { opacity: 0.6; } </style> <div id='social'> <a href='buraya link' _fcksavedurl='buraya link'><img alt='Twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2E0vC-RPxtaqRuzORbmYjOvnsH7IGIBoDvL131KizLdKY629FmeqUlnD2kibIzHgNSnN0OHNY_VDbr6Zxxw9Ta6IpTz2Mg63pl_UhL5X59Xl2ctUvhr7bE-EGlzRxsMbcoI9RExbF47Jx/h120/twitter-icon.png' _fcksavedurl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2E0vC-RPxtaqRuzORbmYjOvnsH7IGIBoDvL131KizLdKY629FmeqUlnD2kibIzHgNSnN0OHNY_VDbr6Zxxw9Ta6IpTz2Mg63pl_UhL5X59Xl2ctUvhr7bE-EGlzRxsMbcoI9RExbF47Jx/h120/twitter-icon.png' title='Twitter'/></a> <a href='buraya link' _fcksavedurl='buraya link'><img alt='Facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibnT18Wi78Nv4-PlfXNdQAGgFuo2m7rU-C1ZBdHGhetLqpS5QXAWNYGgdisUT8CTiSVHkN0nL-8YfLi5YG2HONr6JYcdSa9Ns-auyiXlN3eBXdQ6vv7VG5LdkF4W7Bp6P2aNH9ZxUXgBR6/h120/facebook-icon.png' _fcksavedurl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibnT18Wi78Nv4-PlfXNdQAGgFuo2m7rU-C1ZBdHGhetLqpS5QXAWNYGgdisUT8CTiSVHkN0nL-8YfLi5YG2HONr6JYcdSa9Ns-auyiXlN3eBXdQ6vv7VG5LdkF4W7Bp6P2aNH9ZxUXgBR6/h120/facebook-icon.png' title='facebook'/></a> <a href='Buraya link' _fcksavedurl='Buraya link'><img alt='myspace' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyRvFdwu3Auuw63V11Y7AIdi04rp32cLS1EiDIKh9JLPdk4qPnXw9kP9gHLsU9sFJ3v5lMBng4djoVnCtmyBBSbXV-X3Qro5yyY-uA3Kt_hU7b-3tuNrikHvIGjEiY_9weMKEJioRw25Sv/h120/myspace-icon.png' _fcksavedurl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyRvFdwu3Auuw63V11Y7AIdi04rp32cLS1EiDIKh9JLPdk4qPnXw9kP9gHLsU9sFJ3v5lMBng4djoVnCtmyBBSbXV-X3Qro5yyY-uA3Kt_hU7b-3tuNrikHvIGjEiY_9weMKEJioRw25Sv/h120/myspace-icon.png' title='myspace'/></a> <a href='buraya link' _fcksavedurl='buraya link'><img alt='vimeo' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmX1HXO7Wk3KmLKis2oEpfrVnCLOUJ9iv4Uul7d0-Nh3NfXu7TX1klbVaUu5qeOSXvIXnMVaEi8ubGfydiIil_kCgWbABv0iiSj2dCQ-pXecEhar-pUdMlh95A0UZRuJGou_M5Wcxhyphenhyphen8mO/h120/vimeo-icon.png' _fcksavedurl='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmX1HXO7Wk3KmLKis2oEpfrVnCLOUJ9iv4Uul7d0-Nh3NfXu7TX1klbVaUu5qeOSXvIXnMVaEi8ubGfydiIil_kCgWbABv0iiSj2dCQ-pXecEhar-pUdMlh95A0UZRuJGou_M5Wcxhyphenhyphen8mO/h120/vimeo-icon.png' title='vimeo'/></a> </div>

Uyumlu Tarayıcılar

Ivır Zıvır