Kayıt olmadan da soru sorabilirsiniz.

Blogger İçin Sosyal Medya Widget'i Ekleme

+3 oy
43 gösterim
14 Ekim Webmaster kategorisinde misafir sordu
14 Ekim düzenledi

Blogger, en kullanışlı web sitesi yapmamızın altyapısına sahip bir ücretsiz sitedir.Bunun yanında bir çok Widget ve eklenti eklememiz için olanak sağlıyor.Şuan ki konumuzda ise Blogger sitemiz için sosyal medya widgetini nasıl sitemize ekleyebiliriz konusu olacaktır.

Blogger İçin Sosyal Medya Widget'ı

Öncelikle;

image

/* Social Media with counter by www.bloggerspice.com */
.list-unstyled {
  padding-left: 0;
  list-style: none;
  margin: 2px
}

.list-inline li {
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
  margin-bottom: 10px
}

.bs-colored-social .fa,
.bs-social-icons .fa {
  font-size: 16px
}

.bs-colored-social .fa,
.bs-social-icons .fa {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out
}

.bs-colored-social .fa,
.bs-social-icons .fa {
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #FFF;
  color: rgba(255, 255, 255, 0.8)
}

.bs-colored-social.icon-circle .fa,
.bs-social-icons.icon-circle .fa {
  border-radius: 50%
}

.bs-colored-social.icon-rounded .fa,
.bs-social-icons.icon-rounded .fa {
  border-radius: 2px
}

.bs-colored-social.icon-flat .fa,
.bs-social-icons.icon-flat .fa {
  border-radius: 0
}

.bs-colored-social .fa:hover,
.bs-colored-social .fa:active,
.bs-social-icons .fa:hover,
.bs-social-icons .fa:active {
  color: #FFF
}

.bs-colored-social.icon-zoom .fa:hover,
.bs-colored-social.icon-zoom .fa:active,
.bs-social-icons.icon-zoom .fa:hover,
.bs-social-icons.icon-zoom .fa:active,
.bs-social-sidebar li:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1)
}

.bs-colored-social.icon-rotate .fa:hover,
.bs-colored-social.icon-rotate .fa:active,
.bs-social-icons.icon-rotate .fa:hover,
.bs-social-icons.icon-rotate .fa:active {
  -webkit-transform: scale(1.1) rotate(360deg);
  -moz-transform: scale(1.1) rotate(360deg);
  -ms-transform: scale(1.1) rotate(360deg);
  -o-transform: scale(1.1) rotate(360deg);
  transform: scale(1.1) rotate(360deg)
}

.bs-colored-social .fa-dribbble,
.bs-social-icons .fa-dribbble:hover,
.bs-socialicons .bs-dribbble:hover .bs-sicon {
  background-color: #F46899
}


.bs-colored-social .fa-stumbleupon,
.bs-social-icons .fa-stumbleupon:hover,
.bs-socialicons .bs-stumbleupon:hover .bs-sicon {
  background-color: #eb4924
}

.bs-colored-social .fa-reddit,
.bs-social-icons .fa-reddit:hover {
  background-color: #5f99cf
}

.bs-colored-social .fa-facebook,
.bs-social-icons .fa-facebook:hover,
.bs-socialicons .bs-facebook:hover .bs-sicon {
  background-color: #3C599F
}

.bs-colored-social .fa-rss,
.bs-social-icons .fa-rss:hover,
.bs-socialicons .bs-rss:hover .bs-sicon {
  background-color: #f26522
}

.bs-colored-social .fa-flickr,
.bs-social-icons .fa-flickr:hover,
.bs-socialicons .bs-flickr:hover .bs-sicon {
  background-color: #d51007
}

.bs-colored-social .fa-flickr,
.bs-social-icons .fa-flickr:hover {
  background-color: #FF0084
}

.bs-colored-social .fa-instagram,
.bs-social-icons .fa-instagram:hover,
.bs-socialicons .bs-instagram:hover .bs-sicon {
  background-color: #685243
}

.bs-colored-social .fa-foursquare,
.bs-social-icons .fa-foursquare:hover,
.bs-socialicons .bs-foursquare:hover .bs-sicon {
  background-color: #0086BE
}

.bs-colored-social .fa-github,
.bs-social-icons .fa-github:hover,
.bs-socialicons .bs-github:hover .bs-sicon {
  background-color: #070709
}

.bs-colored-social .fa-google-plus,
.bs-social-icons .fa-google-plus:hover,
.bs-socialicons .bs-googleplus:hover .bs-sicon {
  background-color: #CF3D2E
}

.bs-colored-social .fa-instagram,
.bs-social-icons .fa-instagram:hover {
  background-color: #A1755C
}

.bs-colored-social .fa-linkedin,
.bs-social-icons .fa-linkedin:hover,
.bs-socialicons .bs-linkedin:hover .bs-sicon {
  background-color: #0085AE
}

.bs-colored-social .fa-pinterest,
.bs-social-icons .fa-pinterest:hover,
.bs-socialicons .bs-pinterest:hover .bs-sicon {
  background-color: #CC2127
}

.bs-colored-social .fa-twitter,
.bs-social-icons .fa-twitter:hover,
.bs-socialicons .bs-twitter:hover .bs-sicon {
  background-color: #32CCFE
}

.bs-colored-social .fa-vk,
.bs-social-icons .fa-vk:hover,
.bs-socialicons .bs-vk:hover .bs-sicon {
  background-color: #375474
}

.bs-colored-social .fa-soundcloud,
.bs-social-icons .fa-soundcloud:hover,
.bs-socialicons .bs-soundcloud:hover .bs-sicon {
  background-color: #FF4100
}

.bs-colored-social .fa-vine,
.bs-social-icons .fa-vine:hover,
.bs-socialicons .bs-vine:hover .bs-sicon {
  background-color: #35B57C
}


.bs-colored-social .fa-youtube,
.bs-social-icons .fa-youtube:hover,
.bs-socialicons .bs-youtube:hover .bs-sicon {
  background-color: #C52F30
}

.top-social ul li {
  margin: 0;
  padding: 0
}

div#socialicons-top {
  float: left
}

.top-social .list-unstyled {
  margin: 0
}

.bs-socialicons {
  text-align: center;
  overflow: auto;
  font-size: 22px;
  margin: 0 -8px
}

.bs-socialicons .bs-socialInner {
  position: relative;
  overflow: hidden;
  padding-left: 8px
}

.bs-socialicons .bs-social {
  float: left;
  width: 25%
}

.bs-socialicons .bs-sinn {
  padding-right: 8px
}

.bs-socialicons .bs-sinn:hover .bs-sicon {
  color: #fff
}

.bs-socialicons .bs-sicon {
  display: block;
  padding: 10px 0;
}

.bs-socialicons .bs-facebook .bs-sicon {
  color: #3B5998
}

.bs-socialicons .bs-googleplus .bs-sicon {
  color: #DD4B39
}

.bs-socialicons .bs-twitter .bs-sicon {
  color: #2AA9E0
}

.bs-socialicons .bs-instagram .bs-sicon {
  color: #685243
}

.bs-socialicons .bs-pinterest .bs-sicon {
  color: #CC2028
}

.bs-socialicons .bs-youtube .bs-sicon {
  color: #DE1829
}

.bs-socialicons .bs-vine .bs-sicon {
  color: #35B57C
}

.bs-socialicons .bs-soundcloud .bs-sicon {
  color: #FF4100
}

.bs-socialicons .bs-vk .bs-sicon {
  color: #45668e
}

.bs-socialicons .bs-foursquare .bs-sicon {
  color: #f94877
}

.bs-socialicons .bs-github .bs-sicon {
  color: #333333
}

.bs-socialicons .bs-dribbble .bs-sicon {
  color: #ea4c89
}

.bs-socialicons .bs-stumbleupon .bs-sicon {
  color: #eb4924
}

.bs-socialicons .bs-linkedin .bs-sicon {
  color: #0085AE
}

.bs-so

Reklamlar

1 cevap

0 oy
14 Ekim misafir cevapladı

Devamı ve kodun devamı :)

.bs-socialicons .bs-linkedin .bs-sicon {
  color: #0085AE
}

.bs-socialicons .bs-rss .bs-sicon {
  color: #f26522
}

.bs-socialicons .bs-flickr .bs-sicon {
  color: #FF0084
}

.bs-socialicons .bs-sicon {
  background: #F5F5F5;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease
}

.bs-socialicons .bs-scount {
  display: block;
  color: #FFFFFF;
  background: #007ABE;
  padding: 5px 0;
  position: relative;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600
}

.bs-socialicons .bs-scount:after {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(238, 238, 238, 0);
  border-bottom-color: #007ABE;
  border-width: 4px;
  margin-left: -4px
}

.bs-socialicons .bs-scount:hover {
  background: #222222;
}

Yerleşim > Gadget Ekle >  HTML/Javascript seçeneğini işaretleyip, aşağıdaki kodları yapıştırınız.

<div class="bs-socialicons">
<div class="bs-socialInner">
  <!--Facebook-->
    <div class="bs-social">
  <div class="bs-facebook bs-sinn">
      <a href='#' target='_blank' tibse="Facebook">
      <span class="bs-sicon"><i class="fa fa-facebook"></i></span>
      <span class="bs-scount">3.1K</span>
      </a>
      </div>
      </div>
  <!--Google Plus-->
    <div class="bs-social">
  <div class="bs-googleplus bs-sinn">
      <a href='#' target='_blank' tibse="Google Plus">
      <span class="bs-sicon"><i class="fa fa-google-plus"></i></span>
      <span class="bs-scount">2K</span>
      </a>
    </div>
    </div>
  <!--Twitter-->
  <div class="bs-social">
  <div class="bs-twitter bs-sinn">
      <a href='#' target='_blank' tibse="Twitter">
      <span class="bs-sicon"><i class="fa fa-twitter"></i></span>
      <span class="bs-scount">1.4K</span>
      </a>
    </div>
    </div>
  <!--Instagram-->
  <div class="bs-social">
  <div class="bs-instagram bs-sinn">
      <a href='#' target='_blank' tibse="Instagram">
      <span class="bs-sicon"><i class="fa fa-instagram"></i></span>
      <span class="bs-scount">2K</span>
      </a>
    </div>
    </div>
  <!--Pinterest-->
  <div class="bs-social">
  <div class="bs-pinterest bs-sinn">
      <a href='#' target='_blank' tibse="Pinterest">
      <span class="bs-sicon"><i class="fa fa-pinterest"></i></span>
      <span class="bs-scount">4.5K</span>
      </a>
    </div>
    </div>
  <!--Youtube-->
  <div class="bs-social">
  <div class="bs-youtube bs-sinn">
      <a href='#' target='_blank' tibse="YouTube">
      <span class="bs-sicon"><i class="fa fa-youtube"></i></span>
      <span class="bs-scount">2.8K</span>
      </a>
    </div>
    </div>
  <!--Vine-->
  <div class="bs-social">
  <div class="bs-vine bs-sinn">
      <a href='#' target='_blank' tibse="Vine">
      <span class="bs-sicon"><i class="fa fa-vine"></i></span>
      <span class="bs-scount">3.3K</span>
      </a>
    </div>
    </div>
  <!--SoundCloud-->
  <div class="bs-social">
  <div class="bs-soundcloud bs-sinn">
      <a href='#' target='_blank' tibse="SoundCloud">
      <span class="bs-sicon"><i class="fa fa-soundcloud"></i></span>
      <span class="bs-scount">3.9K</span>
      </a>
    </div>
    </div>
    
      <!--VK-->
      <div class="bs-social">
  <div class="bs-vk bs-sinn">
      <a href='#' target='_blank' tibse="VK">
      <span class="bs-sicon"><i class="fa fa-vk"></i></span>
      <span class="bs-scount">3.9K</span>
      </a>
    </div>
    </div>
      <!---->
      <div class="bs-social">
  <div class="bs-foursquare bs-sinn">
      <a href='#' target='_blank' tibse="Foursquare">
      <span class="bs-sicon"><i class="fa fa-foursquare"></i></span>
      <span class="bs-scount">3.9K</span>
      </a>
    </div>
    </div>
      <!--GitHub-->
      <div class="bs-social">
  <div class="bs-github bs-sinn">
      <a href='#' target='_blank' tibse="GitHub">
      <span class="bs-sicon"><i class="fa fa-github"></i></span>
      <span class="bs-scount">3.9K</span>
      </a>
    </div>
    </div>
      <!--Dribbble-->
      <div class="bs-social">
  <div class="bs-dribbble bs-sinn">
      <a href='#' target='_blank' tibse="Dribbble">
      <span class="bs-sicon"><i class="fa fa-dribbble"></i></span>
      <span class="bs-scount">3.9K</span>
      </a>
    </div>
    </div>
    
     <!--Stumbleupon-->
      <div class="bs-social">
  <div class="bs-stumbleupon bs-sinn">
      <a href='#' target='_blank' tibse="Stumbleupon">
      <span class="bs-sicon"><i class="fa fa-stumbleupon"></i></span>
      <span class="bs-scount">3.4K</span>
      </a>
    </div>
    </div>

     <!--Linkedin-->
      <div class="bs-social">
 

14 Ekim misafir yorumladı
14 Ekim düzenledi

 Yukarıdaki kodun ilevesi :)

<div class="bs-linkedin bs-sinn">
      <a href='#' target='_blank' tibse="Linkedin">
      <span class="bs-sicon"><i class="fa fa-linkedin"></i></span>
      <span class="bs-scount">1.5K</span>
      </a>
    </div>
    </div>

     <!--Rss-->
      <div class="bs-social">
  <div class="bs-rss bs-sinn">
      <a href='#' target='_blank' tibse="Rss">
      <span class="bs-sicon"><i class="fa fa-rss"></i></span>
      <span class="bs-scount">1.9K</span>
      </a>
    </div>
    </div>

     <!--Flickr-->
      <div class="bs-social">
  <div class="bs-flickr bs-sinn">
      <a href='#' target='_blank' tibse="flickr">
      <span class="bs-sicon"><i class="fa fa-flickr"></i></span>
      <span class="bs-scount">2.9K</span>
      </a>
    </div>
    </div>

    </div>
</div>
</div>

image 

<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

İşlem Bukadar :) kusura bakmayın konular sığmadığı için böyle oldu.soru ve görüşlerinizi alt kısıma yazabilirsiniz.

İlgili sorular

+4 oy
1 cevap
+1 oy
1 cevap
+1 oy
0 cevap
4 Kasım Webmaster kategorisinde Ted (22,080 puan) sordu
+2 oy
0 cevap
2 Kasım Webmaster kategorisinde Ted (22,080 puan) sordu
0 oy
0 cevap
9 Kasım Webmaster kategorisinde Ted (22,080 puan) sordu

1,025 soru

263 cevap

17 yorum

74 üye

Tüm Sorunlarınızın cevaplanması için bir ortam sağlamaktayız. Kayıt olmadan da sorunuzu sorabilirsiniz veya sorulara cevap verebilirsiniz.

Sponsorlu Bağlantılar

...