Sosyal Medya simgeler widget'ı, kullanıcıların sosyal medya web sitesi profil URL'lerini koymasına olanak tanır. Blogger blogunuza sosyal medya profil widget'ı ekleyerek ziyaretçilerinizi sosyal medya ağınıza katılmaya teşvik edin.
Şimdilik size Blogger blogunuza Rollover CSS'den etkilenen Sosyal Medya Simgeleri Widget'ını nasıl ekleyeceğinizi göstereceğim.
Öncelikle Blogger Kontrol panalinize gidin.
Daha sonra Sayfalar bölümünden Yerleşim Alanı seçeneğini seçelim.
Yerleşim Alanı seçeneklerinden HTML/Javascript sekmesine tıklayalım.
Daha sonra açmış olduğumuz Gadget Alanı'na aşağıda ki Html kodlarını ekliyoruz.
<div class='post-body'>
<div class='social-wrap'>
<ul>
<li><a class='facebook1' href='https://www.facebook.com/username' target='_blank' title='Facebook' rel='nofollow'></a></li>
<li><a class='twitter1' href='https://twitter.com/username' target='_blank' title='Twitter' rel='nofollow'></a></li>
<li><a class='google-p1' href='https://plus.google.com/b/username' target='_blank' title='Google Plus' rel='nofollow'></a></li>
<li><a class='rss1' href='http://feeds.feedburner.com/username' target='_blaank' title='RSS Feed' rel='nofollow'></a></li>
<li><a class='pinit1' href='https://www.pinterest.com/username' target='_blank' title='Pinterest' rel='nofollow'></a></li>
<li><a class='linkdin1' href='https://www.linkedin.com/in/username' target='_blank' title='Linkedin' rel='nofollow'></a></li>
</ul>
</div>
<div class='credit'>
<a class='blog-link' href='https://ProBlogWorld.blogspot.com' target='_blank'></a>
</div>
</div>
Bu işlemi yaptıktan sonra Kaydet tuşuna basıyoruz.
Daha sonra Tema bölümüne geçiyoruz ve HTML-Düzenle'ye tıklıyoruz.
Html editör sayfamızda ]]></b:skin> veya </style> kodlarını arıyoruz bunu da daha hızlı şekilde Ctrl+f tuşlarını kullanarak yapabilirsiniz.
Bulduğumuz kodun üzerine gelecek şekilde aşağıda ki Css kodlarını ekliyoruz.
body {
background-color: #f9f9f9;
font-size: 16px;
color: #444;
}
.post-body {
max-width: 680px;
height: 200px;
margin: 20px auto;
border: 10px solid #f0f0f0;
padding: 15px 20px;
background-color: #ffc551;
color: #444;
}
.social-wrap {
margin:0 auto;
padding:0px;
text-decoration: none;
}
.social-wrap ul li {
list-style-type: none;
border-bottom:none;
margin:0 auto;
background: none;
padding:0px;
line-height: 0!important;
}
.social-wrap li a {
margin:5px 3px 0px 0px !important;
padding:0px;
width:50px;
height:50px;
text-indent:-99999px;
float:left;
}
.social-wrap li a.facebook1 {
background: #314d91 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRqJ15Ic1pR61vfAavA95n41gFAWsxjV4hb3JcRLP5XnALnFSpfKxomNMrUUft7-33p7XcgUgkfoLNEYEq76aMRWMTscprT_-0LpteNli1exjmwfhpXrdJii4Zjaqz3DGnc937McG9dbI/s1600/social-icons.png) no-repeat 0px 0px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.facebook1:hover {
background: #314d91 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRqJ15Ic1pR61vfAavA95n41gFAWsxjV4hb3JcRLP5XnALnFSpfKxomNMrUUft7-33p7XcgUgkfoLNEYEq76aMRWMTscprT_-0LpteNli1exjmwfhpXrdJii4Zjaqz3DGnc937McG9dbI/s1600/social-icons.png) no-repeat 0px -73px;
}
.social-wrap li a.twitter1 {
background: #07beed url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRqJ15Ic1pR61vfAavA95n41gFAWsxjV4hb3JcRLP5XnALnFSpfKxomNMrUUft7-33p7XcgUgkfoLNEYEq76aMRWMTscprT_-0LpteNli1exjmwfhpXrdJii4Zjaqz3DGnc937McG9dbI/s1600/social-icons.png) no-repeat 0px -127px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.twitter1:hover {
background: #07beed url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRqJ15Ic1pR61vfAavA95n41gFAWsxjV4hb3JcRLP5XnALnFSpfKxomNMrUUft7-33p7XcgUgkfoLNEYEq76aMRWMTscprT_-0LpteNli1exjmwfhpXrdJii4Zjaqz3DGnc937McG9dbI/s1600/social-icons.png) no-repeat 0px -204px;
}
.social-wrap li a.google-p1 {
background:#a7291b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRqJ15Ic1pR61vfAavA95n41gFAWsxjV4hb3JcRLP5XnALnFSpfKxomNMrUUft7-33p7XcgUgkfoLNEYEq76aMRWMTscprT_-0LpteNli1exjmwfhpXrdJii4Zjaqz3DGnc937McG9dbI/s1600/social-icons.png) no-repeat 0px -254px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.google-p1:hover {
background: #a7291b url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRqJ15Ic1pR61vfAavA95n41gFAWsxjV4hb3JcRLP5XnALnFSpfKxomNMrUUft7-33p7XcgUgkfoLNEYEq76aMRWMTscprT_-0LpteNli1exjmwfhpXrdJii4Zjaqz3DGnc937McG9dbI/s1600/social-icons.png) no-repeat 0px -330px;
}
.social-wrap li a.rss1 {
background:#ffaa31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRqJ15Ic1pR61vfAavA95n41gFAWsxjV4hb3JcRLP5XnALnFSpfKxomNMrUUft7-33p7XcgUgkfoLNEYEq76aMRWMTscprT_-0LpteNli1exjmwfhpXrdJii4Zjaqz3DGnc937McG9dbI/s1600/social-icons.png) no-repeat 0px -381px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.rss1:hover {
background: #ffaa31 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRqJ15Ic1pR61vfAavA95n41gFAWsxjV4hb3JcRLP5XnALnFSpfKxomNMrUUft7-33p7XcgUgkfoLNEYEq76aMRWMTscprT_-0LpteNli1exjmwfhpXrdJii4Zjaqz3DGnc937McG9dbI/s1600/social-icons.png) no-repeat 0px -454px;
}
.social-wrap li a.pinit1 {
background:#cb2027 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRqJ15Ic1pR61vfAavA95n41gFAWsxjV4hb3JcRLP5XnALnFSpfKxomNMrUUft7-33p7XcgUgkfoLNEYEq76aMRWMTscprT_-0LpteNli1exjmwfhpXrdJii4Zjaqz3DGnc937McG9dbI/s1600/social-icons.png) no-repeat 0px -508px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.pinit1:hover {
background: #cb2027 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRqJ15Ic1pR61vfAavA95n41gFAWsxjV4hb3JcRLP5XnALnFSpfKxomNMrUUft7-33p7XcgUgkfoLNEYEq76aMRWMTscprT_-0LpteNli1exjmwfhpXrdJii4Zjaqz3DGnc937McG9dbI/s1600/social-icons.png) no-repeat 0px -580px;
}
.social-wrap li a.linkdin1 {
background:#1698E3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRqJ15Ic1pR61vfAavA95n41gFAWsxjV4hb3JcRLP5XnALnFSpfKxomNMrUUft7-33p7XcgUgkfoLNEYEq76aMRWMTscprT_-0LpteNli1exjmwfhpXrdJii4Zjaqz3DGnc937McG9dbI/s1600/social-icons.png) no-repeat 0px -635px;
-webkit-transition:All 0.3s ease-out;
-moz-transition:All 0.3s ease-out;
-o-transition:All 0.3s ease-out;
}
.social-wrap li a.linkdin1:hover {
background: #1698e3 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRqJ15Ic1pR61vfAavA95n41gFAWsxjV4hb3JcRLP5XnALnFSpfKxomNMrUUft7-33p7XcgUgkfoLNEYEq76aMRWMTscprT_-0LpteNli1exjmwfhpXrdJii4Zjaqz3DGnc937McG9dbI/s1600/social-icons.png) no-repeat 0px -711px;
}
.credit{
text-align:center;
margin:20px 0;
}
.blog-link{
color:#fff;
text-decoration:none;
background:#eee;
background-size:40px;
line-height:50px;
display:inline-block;
padding:0 10px;
border-radius:4px;
border-bottom:3px solid #ddd;
color:#333;
font-family:'open sans',sans-serif;
margin:10px;
}Css kodlarını da ekledikten sonra Blogger sayfanızı kontrol edebilirsiniz. Bütün işlemler bu kadar herkese kolay gelsin.