Cara Memasang Ultimate Social Media Counter Pada Blog

Cara Memasang Ultimate Social Media Counter Pada Blog - Assalamualaikum Sobat semua, kembali lagi dengan saya di Andrie Brader. Dalam Kesempatan kali ini saya akan membagikan Tutorial Blog Keren, yakni Ultimate Social Media. Sesuai Namanya, Tutorial yang saya bagikan kali ini adalah memasang Widget dengan Berbagai Social Media. Social Media merupakan salah satu jitu meningkatkan pengunjung blog.

Dengan Social Media, Pengunjung dapat mengenal lebih dekat dengan blog kita dari social media yang kita punya. Widget Social Media yang akan saya bagikan kali ini berisi macam social media, seperti, Facebook, Google+, Twitter, Pinterest, dan Sebagainya.

Bagi kalian yang penasaran bagaimana tampilan social medianya, kalian bisa melihatnya dibawah ini.

Gimana ? Keren Bukan!. Bagi kalian yang ingin memasangnya di blog kalian, kalian bisa memasangnya dengan mengikuti tutorialnya dibawah.

Cara Memasang Ultimate Social Media Counter Pada Blog

Langkah #1 : Log In Blogger dan Masuk Ke Dasbor Blogger.

Langkah #2 : Masuk Ke Menu Template >> Edit HTML.

Langkah #3 : Setelah Itu Cari kode <./head>.

Langkah #4 : Setelah ketemu, Tempelkan kode dibawah ini tepat diatas kode yang disebutkan tadi.

Langkah #5 : Setelah itu Cari kode ]]></b:skin dan Tempelkan kode dibawah ini tepat diatasnya.

/* Ultimate Social Media By Andriebrader.blogspot.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-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;
}

Langkah #6 : Setelah Itu Simpan template.

Langkah #7 : Masuk Ke Menu Tata Letak >> Tambahkan Gadget >> HTML/JavaScript..

Langkah #8 : Tempelkan Kode dibawah ini di kotak Konten >> Simpan.

Ganti kode # pada kode <a href='#' target='_blank' tibse dengan Link Social Media Kalian Dan Ubah Jumlah Counter pada kode <span class="bs-scount">2.9K</span>.

Dan Langkah Terakhir Mengecek Hasilnya. Gimana ? Keren Bukan. Apabila kalian Menemukan masalah, kalian bisa konsultasi dengan saya dengan berkomentar dibawah. OK.

Demikan Artikel mengenai Cara Memasang Ultimate Social Media Counter Pada Blog. Semoga Artikel yang saya bagikan kali ini bermanfaat. Sekian, Wassalamualaikum Wr.Wb