2 yıl önce İnternet kategorisinde misafir tarafından soruldu

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

1 cevap

0 oy
2 yıl önce misafir tarafından cevaplandı

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">
 

2 yıl önce misafir tarafından yorumlandı

 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

1 cevap
7 ay önce İnternet kategorisinde misafir tarafından soruldu
0 cevap
2 yıl önce İnternet kategorisinde Ted tarafından soruldu
0 cevap
2 yıl önce İnternet kategorisinde Ted tarafından soruldu
1 cevap
2 yıl önce İnternet kategorisinde misafir tarafından soruldu
1 cevap
2 yıl önce İnternet kategorisinde Ted tarafından soruldu
0 cevap
1 yıl önce İnternet kategorisinde Ted tarafından soruldu
0 cevap
2 yıl önce İnternet kategorisinde Ted tarafından soruldu
0 cevap
2 yıl önce İnternet kategorisinde Ted tarafından soruldu
1 cevap
2 yıl önce İnternet kategorisinde misafir tarafından soruldu
0 cevap
1 yıl önce Sosyal Ağlar kategorisinde Ted tarafından soruldu
0 cevap
1 yıl önce Telefon ve Aksesuar kategorisinde Ted tarafından soruldu
1 cevap
1 cevap
1 yıl önce İnternet kategorisinde misafir tarafından soruldu
0 cevap
1 yıl önce İnternet kategorisinde Ted tarafından soruldu
2 cevap
2 yıl önce İnternet kategorisinde misafir tarafından soruldu
0 cevap
2 yıl önce İnternet kategorisinde Ted tarafından soruldu
3 cevap
2 yıl önce İnternet kategorisinde misafir tarafından soruldu
...