BREAKING NEWS

Post Ads

Senin, 20 Mei 2019

Kumpulan Widget Social Media

- Widget Social Media adalah sebuah widget yang banyak dipakai oleh para bloger dunia. Fungsi dari widget tersebut yakni tak lain sebagai perlengkap untuk mendemonstrasikan social media kita. Dari banyak sekali tampilan widget social media, berikut beberapa tampilan widget yang sedang tren atau sering dipakai di banyak sekali blog seluruh dunia.

Widget social media yakni sarana daerah sobat untuk terhubung dengan pengunjung secara transparan dan mengumpulkan banyak pengunjung serta berafiliasi baik dengan para pembaca blog sobat.
Dibawah ini beberapa arahan widget yang mjungkin sobat suka :

Tampilan widget social media yang pertama :
Kode widgetnya : 
<div class='sidebar_about_author'>
<div class='inner_wrapper'>
<div class='sosmedarl-img'>
<img alt='Judul Blog' class='img-responsive' height='auto' src='http://4.bp.blogspot.com/-7pWJpJ09ct0/VnpUJoqNvKI/AAAAAAAAANw/2KR6NOt6GnE/h200-w320-c/captain_jack_sparrow___vector.png' title='Judul Blog' width='300'/>

</div>
</div>
<div class='sosmedarl-info'>
  <h4><span>Aplha Blog</span></h4>
<p>Our flagship theme is highly customizable through the options panel, so you can modify the design, layout and typography.</p>
</div>
<div class='aboutfloat-img'><span class='sosmedarl-float'><a href='#' rel='nofollow' target='_blank' title='Join Our Site'><i class='fa fa-user'></i> Join Our Site</a></span></div>
<div class='sosmedarl-wrpicon'>
<ul class='extender'>
<li class='sosmedarl-icon fbl'><a href='#' target='_blank' title='Follow Our Facebook'><i class='fa fa-facebook fa-fw'/></i></a></li>
<li class='sosmedarl-icon twitt'><a href='#' target='_blank' title='Follow Our Twitter'><i class='fa fa-twitter fa-fw'/> </i></a></li>
<li class='sosmedarl-icon crcl'><a href='#' rel='nofollow' target='_blank' title='Follow Our Google+'><i class='fa fa-google-plus fa-fw'/></i></a></li>
</ul>
</div>

</div>

Note :
Silahkan sobat ganti yang saya kasih warna merah dengan link foto sobat dan sobat ganti tanda pagar berwarna hijau dengan link social media sobat ya.


Tampilan widget social media yang kedua :


Kode widgetnya : 
<div class="kt-social-buttons-widget"><ul class="sidebar-social clearfix"><li><a href="#!" class="social-btn-twitter">Follow on Twitter <i class="fa fa-twitter"></i> </a></li><li><a href="#!" class="social-btn-facebook">Like on Facebook <i class="fa fa-facebook"></i> </a></li><li><a href="#!" class="social-btn-youtube">Subscribe on Youtube <i class="fa fa-youtube"></i> </a></li><li><a href="#!" class="social-btn-instagram">Follow on Instagram <i class="fa fa-instagram"></i> </a></li></ul></div>
<style>
.kt-social-buttons-widget ul {
list-style: none;
padding-left: 0;
}
.kt-social-buttons-widget li a {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 2px;
text-decoration: none;
display: block;
color: #0a0a0a;
padding: 10px 1px 10px 10px;
    -webkit-box-shadow: 2px 2px 0px #f4e6c9;
    -moz-box-shadow: 2px 2px 0px #f4e6c9;
    box-shadow: 2px 2px 0px #f4e6c9;
    background: url(http://1.bp.blogspot.com/-ObtNnI3H0BM/WbavfUJH1oI/AAAAAAAAD20/YLmNdnASSugJ9mVn-p3SmLAC1DavYVuHgCK4BGAYYCw/s400/widget-bg.jpg) repeat;
}
.kt-social-buttons-widget ul li {
width: 100%;
margin-bottom: 10px;
}
.kt-social-buttons-widget li:hover a.social-btn-twitter {
background: #1da1f2;
color:#fff;
}
.kt-social-buttons-widget li a i {
float: right;
width: 35px;
height: 14px;
line-height: 14px;
text-align: ;
margin: 0;
padding: 0 0 0 10px;
font-size: 14px;
}
.kt-social-buttons-widget li a i {
border-left: 1px solid #666;
line-height: 14px;
}
.kt-social-buttons-widget li:hover a.social-btn-facebook {
background: #3b5998;
color:#fff;
}
.kt-social-buttons-widget li:hover a.social-btn-youtube {
background: #cd201f;
color:#fff;
}
.kt-social-buttons-widget li:hover a.social-btn-instagram {
background: #405de6;
color:#fff;
}

</style>

Note :
Silahkan sobat ganti tanda #! dengan link media umum sobat.


Tampilan widget social media yang ketiga :
Kode widgetnya : 
<style>
a.social_item {
position: relative;
display: block;
height: 50px;
line-height: 50px;
overflow: hidden;
border-radius: 4px;
}
li.social_item-wrapper {
float: left;
width: 48%;
text-align: center;
margin-right: 4% !important;
margin-bottom: 10px !important;
color: #fff;
}
.social_item-wrapper:nth-child(2n+2) {
margin-right: 0 !important;
}
.social_icon {
float: left;
line-height: 50px;
width: 41px;
font-size: 1.3rem;
}
a.social_item.social_facebook {
background: #5d82d1 !important;
}
.fa-facebook.social_icon {
background: #2E4372;
}
li.social_item-wrapper:hover .fa-facebook.social_icon {
background: #3F5B9B;
}
li.social_item-wrapper:hover .social_facebook {
background: #2E4372;
}
a.social_item.social_twitter {
background: #40bff5 !important;
}
.fa-twitter.social_icon {
background: #1571A5;
}
li.social_item-wrapper:hover .fa-twitter.social_icon {
background: #1C97DE;
}
li.social_item-wrapper:hover .social_twitter {
background: #1571A5;
}
a.social_item.social_youtube {
background:#ef4e41 !important;
}
.fa-youtube.social_icon {
background: #B31919;
}
li.social_item-wrapper:hover .fa-youtube.social_icon {
background: #E22020;
}
li.social_item-wrapper:hover .social_youtube {
background: #B31919;
}
a.social_item.social_dribbble {
background: #f7659c !important;
}
.fa-dribbble.social_icon {
background: #B51A45;
}
li.social_item-wrapper:hover .fa-dribbble.social_icon {
background: #E82159;
}
li.social_item-wrapper:hover .social_dribbble {
background: #B51A45;
}
a.social_item.social_rss {
background:#ff7e30 !important;
}
.fa-rss.social_icon {
background: #C2521B;
}
li.social_item-wrapper:hover .fa-rss.social_icon {
background: #E86321;
}
li.social_item-wrapper:hover .social_rss {
background: #C2521B;
}
a.social_item.social_google-plus {
background: #eb5e4c !important;
}
.fa-google-plus.social_icon {
background: #BF2424;
}
li.social_item-wrapper:hover .fa-google-plus.social_icon {
background: #E82C2C;
}
li.social_item-wrapper:hover .social_google-plus {
background: #BF2424;
}
a.social_item.social_linkedin {
background: #3897f0 !important;
}
.fa-linkedin.social_icon {
background: #02669E;
}
li.social_item-wrapper:hover .fa-linkedin.social_icon {
background: #0275B6;
}
li.social_item-wrapper:hover .social_linkedin {
background: #02669E;
}
a.social_item.social_instagram {
background: #3f91cb !important;
}
.fa-instagram.social_icon {
background: #6F583C;
}
li.social_item-wrapper:hover .fa-instagram.social_icon {
background: #8E714D;
}
li.social_item-wrapper:hover .social_instagram {
background: #6F583C;
}
a.social_item.social_pinterest {
background: #CA2027;
}
.fa-pinterest.social_icon {
background: #AB1B21;
}
li.social_item-wrapper:hover .fa-pinterest.social_icon {
background: #CA2027;
}
li.social_item-wrapper:hover social_pinterest {
background: #AB1B21;
}
ul.social-counter a {
color: #fff;
}
</style><div class="socialcounter"><ul class="social-counter"><li class="social_item-wrapper"><a href="#" class="social_item social_facebook"><i class="fa fa-facebook social_icon"></i><span class="social_num">230,000</span></a></li><li class="social_item-wrapper"><a href="#" class="social_item social_twitter"><i class="fa fa-twitter social_icon"></i><span class="social_num">230,000</span></a></li><li class="social_item-wrapper"><a href="#" class="social_item social_youtube"><i class="fa fa-youtube social_icon"></i><span class="social_num">230,000</span></a></li><li class="social_item-wrapper"><a href="#" class="social_item social_dribbble"><i class="fa fa-dribbble social_icon"></i><span class="social_num">230,000</span></a></li><li class="social_item-wrapper"><a href="#" class="social_item social_rss"><i class="fa fa-rss social_icon"></i><span class="social_num">230,000</span></a></li><li class="social_item-wrapper"><a href="#" class="social_item social_google-plus"><i class="fa fa-google-plus social_icon"></i><span class="social_num">230,000</span></a></li><li class="social_item-wrapper"><a href="#" class="social_item social_linkedin"><i class="fa fa-linkedin social_icon"></i><span class="social_num">230,000</span></a></li><li class="social_item-wrapper"><a href="#" class="social_item social_instagram"><i class="fa fa-instagram social_icon"></i><span class="social_num">230,000</span></a></li></ul></div>

Note :
Silahkan sobat ganti tanda pagar yang diberi warna merah # dengan link media umum sobat.




Tampilan widget social media yang keempat :


Kode widgetnya : 
<div class="trendy_counters"><ul class="sc_vertical"><li class="count-twitter"><a data-color-hover="#0084b4" style="background-color: rgb(51, 204, 255); padding: 10px;" class="icon" href="Link twitter"><span class="fa fa-fw fa-twitter" style="font-size:24px; color:#fff" data-color-hover="#fff"></span><span class="items"><span data-color-hover="#fff" class="count" style="font-size:16px; color:#fff">114</span><span data-color-hover="#fff" class="label" style="font-size:12px; color:#fff">followers</span></span></a></li><li class="count-googleplus"><a data-color-hover="#dc493c" style="background-color:#dc493c; padding:10px;" class="icon" href="Link googel+"><span class="fa fa-fw fa-google-plus" style="font-size:24px; color:#fff" data-color-hover="#fff"></span><span class="items"><span data-color-hover="#fff" class="count" style="font-size:16px; color:#fff">0</span><span data-color-hover="#fff" class="label" style="font-size:12px; color:#fff">followers</span></span></a></li><li class="count-facebook"><a data-color-hover="#5E80BF" style="background-color:#3B5998; padding:10px;" class="icon" href="Link Facebook"><span class="fa fa-fw fa-facebook-official" style="font-size:24px; color:#fff" data-color-hover="#fff"></span><span class="items"><span data-color-hover="#fff" class="count" style="font-size:16px; color:#fff">0</span><span data-color-hover="#fff" class="label" style="font-size:12px; color:#fff">likes</span></span></a></li><li class="count-vimeo"><a data-color-hover="#0088cc" style="background-color:#00adef; padding:10px;" class="icon" href="Link Viemo"><span class="fa fa-fw fa-vimeo" style="font-size:24px; color:#fff" data-color-hover="#fff"></span><span class="items"><span data-color-hover="#fff" class="count" style="font-size:16px; color:#fff">0</span><span data-color-hover="#fff" class="label" style="font-size:12px; color:#fff">followers</span></span></a></li><li class="count-youtube"><a data-color-hover="#90030c" style="background-color:#bf2626; padding:10px;" class="icon" href="Link Youtube"><span class="fa fa-fw fa-youtube" style="font-size:24px; color:#fff" data-color-hover="#fff"></span><span class="items"><span data-color-hover="#fff" class="count" style="font-size:16px; color:#fff">0</span><span data-color-hover="#fff" class="label" style="font-size:12px; color:#fff">subscribers</span></span></a></li><li class="count-instagram"><a data-color-hover="#8a3ab9" style="background-color:#cd486b; padding:10px;" class="icon" href="Link instagram"><span class="fa fa-fw fa-instagram" style="font-size:24px; color:#fff" data-color-hover="#fff"></span><span class="items"><span data-color-hover="#fff" class="count" style="font-size:16px; color:#fff">266</span><span data-color-hover="#fff" class="label" style="font-size:12px; color:#fff">followers</span></span></a></li></ul></div>

Note :
Silahkan sobat ganti yang saya kasih tanda merah dengan link media umum sobat.


Nah itu tadi diatas beberapa tampilan widget media umum yang mungkin salah satu ada yang sobat suka. Langsung saja sobat gunaka dengan cara sebagai berikut:

1. Masuk ke dashabor blog sobat
2. kemudian ke tata letak
3. Tambahkan gatget - Javascrip - tempel arahan diatas yang sudah sobat tentukan/sobat pilih.
4. Save kemudian lihat hasilnya.


Baiklah sobat, mungkin itu yang dapat sundaku sampaikan. Semoga bermanfaat dan jangan lupa share artikel ini keteman dan media umum sobat. Berbagi gosip itu GRATIS.


Terima kasih

www.sundaku.com

Share this:

Posting Komentar

 
Back To Top
Copyright © 2014 Federico Blog. Shared by Themes24x7