× İletişim Formu Blog Hazır Sosyal Paylaşım Butonları İconlu Arlina Design 3/25/2017 Etiketler : Blogger Buton Arlina Design <!DOCTYPE html> <html> <head> <title>Kodeks Editör</title> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); body { font-family: 'Fira Sans Condensed', sans-serif; -webkit-font-smoothing: antialiased; margin: 30% auto 0 auto; text-decoration: none; } ul { -webkit-padding-start: 0px!important; } /* CSS Tooltip */ .bloggereklentileri-tooltip { position: relative; display: inline-block; font-family: 'Fira Sans Condensed', sans-serif; } .bloggereklentileri-tooltip:before, .bloggereklentileri-tooltip:after { position: absolute; opacity: 0; z-index: 1000; pointer-events: none; font-family: 'Fira Sans Condensed', sans-serif; } .bloggereklentileri-tooltip:hover:before, .bloggereklentileri-tooltip:hover:after { opacity: 1; } .bloggereklentileri-tooltip:before { content: ''; position: absolute; background: transparent; border: 4px solid transparent; position: absolute; } .bloggereklentileri-tooltip:after { content: attr(data-bloggereklentileri-tooltip)!important; background: #494158; color: #fff; padding: 6px 8px; font-size: 11px!important; font-family: 'Fira Sans Condensed', sans-serif; white-space: nowrap; border-radius: 2px; -webkit-backface-visibility: hidden; margin-left: initial; } .bloggereklentileri-tooltip-top:before { bottom: 140%; left: 10%; margin: 0 0 -9px 0; border-top-color: #494158; } .bloggereklentileri-tooltip-top:after { bottom: 125%; left: 10%; margin: 0 0 3px -10px!important; } /* CSS Share Button */ .share-post { margin-bottom: 0; margin-top: 0; padding: 0; } .widget .post-body > .share-post ul { padding: 0; } .share-post li { float: left; margin: 0 1%; width: 18%; padding: 0; list-style: none; position: relative; } .share-post li a { padding: 6px 7px 6px 38px; color: #fff; display: block; border-radius: 2px; font-size: 13px; transition: all 0.6s ease-out; text-decoration: none; } .share-post li a:hover { color: #fff; } .share-post li .twitter { background-color: #19bfe5; } .share-post li .facebook { background-color: #3b5998; } .share-post li .gplus { background-color: #d64136; } .share-post li .pinterest { background-color: #cb2027; } .share-post li .tumblr { background-color: #304e6c; } .share-post li .twitter:hover, .share-post li .facebook:hover, .share-post li .gplus:hover, .share-post li .pinterest:hover, .share-post li .tumblr:hover { color: #fff; } .share-post li:last-child { margin-right: 0 } .share-post li .fa:before { position: absolute; top: 0; left: 0; display: inline-block; padding: 5.5px 12px; font-family: fontawesome; text-align: center; color: #fff; line-height: 20px; text-shadow: 2px 2px rgba(0, 0, 0, 0.1); font-size: 14px; transition: all 0.6s ease-out; } .share-post li:hover .fa:before { text-shadow: -2px 2px rgba(0, 0, 0, 0.1); } .share-post li .fa { display: initial; } @media only screen and (max-width: 640px) { .share-post li a { padding: 6px 0 6px 0; } .share-post li .fa:before { display: none; } } @media screen and (max-width: 480px) { .share-post li { width: 100% } } </style> <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'><link> </head> <body> <div class='share-post'> <ul> <li> <a class='twitter bloggereklentileri-tooltip bloggereklentileri-tooltip-top' data-bloggereklentileri-tooltip='Twitter ile paylaş' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'></i>Twitter</a> </li> <li> <a class='facebook bloggereklentileri-tooltip bloggereklentileri-tooltip-top' data-bloggereklentileri-tooltip='Facebook ile paylaş' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'></i>Facebook</a> </li> <li> <a class='gplus bloggereklentileri-tooltip bloggereklentileri-tooltip-top' data-bloggereklentileri-tooltip='Google Plus ile paylaş' expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-google-plus'></i>Google</a> </li> <li> <a class='tumblr bloggereklentileri-tooltip bloggereklentileri-tooltip-top' data-bloggereklentileri-tooltip='Tumblr ile paylaş' href='http://www.tumblr.com/share' rel='nofollow' target='_blank'><i class='fa fa-tumblr'></i>Tumblr</a> </li> <li> <a class='pinterest bloggereklentileri-tooltip bloggereklentileri-tooltip-top' data-bloggereklentileri-tooltip='Pinterest ile paylaş' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description= + data:post.title"' target='_blank'><i class='fa fa-pinterest'></i>Pinterest</a> </li> </ul> </div> </body> </html> YENİ YAYIN ÖNCEKİ YAYIN "Blog Hazır Sosyal Paylaşım Butonları İconlu" 0 Yorum yapıldı. Yorum Gönder Sonraki Kayıt Ana Sayfa Kaydol: Kayıt Yorumları (Atom) ×
Blog Hazır Sosyal Paylaşım Butonları İconlu Arlina Design 3/25/2017 Etiketler : Blogger Buton Arlina Design <!DOCTYPE html> <html> <head> <title>Kodeks Editör</title> <style type="text/css"> @import url('https://fonts.googleapis.com/css?family=Fira+Sans+Condensed'); body { font-family: 'Fira Sans Condensed', sans-serif; -webkit-font-smoothing: antialiased; margin: 30% auto 0 auto; text-decoration: none; } ul { -webkit-padding-start: 0px!important; } /* CSS Tooltip */ .bloggereklentileri-tooltip { position: relative; display: inline-block; font-family: 'Fira Sans Condensed', sans-serif; } .bloggereklentileri-tooltip:before, .bloggereklentileri-tooltip:after { position: absolute; opacity: 0; z-index: 1000; pointer-events: none; font-family: 'Fira Sans Condensed', sans-serif; } .bloggereklentileri-tooltip:hover:before, .bloggereklentileri-tooltip:hover:after { opacity: 1; } .bloggereklentileri-tooltip:before { content: ''; position: absolute; background: transparent; border: 4px solid transparent; position: absolute; } .bloggereklentileri-tooltip:after { content: attr(data-bloggereklentileri-tooltip)!important; background: #494158; color: #fff; padding: 6px 8px; font-size: 11px!important; font-family: 'Fira Sans Condensed', sans-serif; white-space: nowrap; border-radius: 2px; -webkit-backface-visibility: hidden; margin-left: initial; } .bloggereklentileri-tooltip-top:before { bottom: 140%; left: 10%; margin: 0 0 -9px 0; border-top-color: #494158; } .bloggereklentileri-tooltip-top:after { bottom: 125%; left: 10%; margin: 0 0 3px -10px!important; } /* CSS Share Button */ .share-post { margin-bottom: 0; margin-top: 0; padding: 0; } .widget .post-body > .share-post ul { padding: 0; } .share-post li { float: left; margin: 0 1%; width: 18%; padding: 0; list-style: none; position: relative; } .share-post li a { padding: 6px 7px 6px 38px; color: #fff; display: block; border-radius: 2px; font-size: 13px; transition: all 0.6s ease-out; text-decoration: none; } .share-post li a:hover { color: #fff; } .share-post li .twitter { background-color: #19bfe5; } .share-post li .facebook { background-color: #3b5998; } .share-post li .gplus { background-color: #d64136; } .share-post li .pinterest { background-color: #cb2027; } .share-post li .tumblr { background-color: #304e6c; } .share-post li .twitter:hover, .share-post li .facebook:hover, .share-post li .gplus:hover, .share-post li .pinterest:hover, .share-post li .tumblr:hover { color: #fff; } .share-post li:last-child { margin-right: 0 } .share-post li .fa:before { position: absolute; top: 0; left: 0; display: inline-block; padding: 5.5px 12px; font-family: fontawesome; text-align: center; color: #fff; line-height: 20px; text-shadow: 2px 2px rgba(0, 0, 0, 0.1); font-size: 14px; transition: all 0.6s ease-out; } .share-post li:hover .fa:before { text-shadow: -2px 2px rgba(0, 0, 0, 0.1); } .share-post li .fa { display: initial; } @media only screen and (max-width: 640px) { .share-post li a { padding: 6px 0 6px 0; } .share-post li .fa:before { display: none; } } @media screen and (max-width: 480px) { .share-post li { width: 100% } } </style> <link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'><link> </head> <body> <div class='share-post'> <ul> <li> <a class='twitter bloggereklentileri-tooltip bloggereklentileri-tooltip-top' data-bloggereklentileri-tooltip='Twitter ile paylaş' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='_blank'><i class='fa fa-twitter'></i>Twitter</a> </li> <li> <a class='facebook bloggereklentileri-tooltip bloggereklentileri-tooltip-top' data-bloggereklentileri-tooltip='Facebook ile paylaş' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-facebook'></i>Facebook</a> </li> <li> <a class='gplus bloggereklentileri-tooltip bloggereklentileri-tooltip-top' data-bloggereklentileri-tooltip='Google Plus ile paylaş' expr:href='"http://plus.google.com/share?url=" + data:blog.url' rel='nofollow' target='_blank'><i class='fa fa-google-plus'></i>Google</a> </li> <li> <a class='tumblr bloggereklentileri-tooltip bloggereklentileri-tooltip-top' data-bloggereklentileri-tooltip='Tumblr ile paylaş' href='http://www.tumblr.com/share' rel='nofollow' target='_blank'><i class='fa fa-tumblr'></i>Tumblr</a> </li> <li> <a class='pinterest bloggereklentileri-tooltip bloggereklentileri-tooltip-top' data-bloggereklentileri-tooltip='Pinterest ile paylaş' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:post.thumbnailUrl + "&amp;description= + data:post.title"' target='_blank'><i class='fa fa-pinterest'></i>Pinterest</a> </li> </ul> </div> </body> </html>
Yorum Gönder