Skip to content Skip to sidebar Skip to footer
Home / blogger / Widgets

Cara Mudah Memasang Kotak Widget Sosial di Blog

Post a Comment
Memasang Box Widget Sosial Media - Pada Pertemuan kali ini saya akan berbagi tutorial lagi mengenai cara memasang kotak Media Sosial. Semakin banyaknya pengguna Medsos, membuat orang selalu berfikir bagaimana agar bisa membuat sebuah hal yang bermanfaat untuk dirinya sendiri.
Begitu juga dengan kita bukan?

Cara Mudah Memasang Kotak Widget Sosial di Blog Ala Arlina Design


Nah berhubung kita juga salah satu dari orang-orang yang bergelut di dunia Blog, tidak ada salahnya jika sobat mempublikasikan akun medsos sobat agar menerangkan brend yang kita buat.

Hal-hal yang akan anda dapatkan jika sobat membuat Widget kotak Sosial media  di Blog.
  1. Menambah jaringan link
  2. Menambah View share
  3. Menambah Followers
  4. Menambah jangkauan kiriman.

Gimana sob? Anda tertarik untuk memasang Widget kotak sosial media?
Jika "ya" silakan ikuti langkah-langkah di bawah ini:

Cara Memasang Kotak Widget Sosial Media

  • Login ke blogger
  • Pada menu Dashboard Pilih Template
  • Klik Edit HTML/JavaScrpit
  • Maukkan Kode di bawah ini DI ATAS </head>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

  • Masukkan Kode di bawah ini DI ATAS </Style>

/* Sosial Media Widget */
#HTML68 .sosmedarl-info h4{background:transparent;position:relative;padding:0;margin:0;border:0;text-align:center;font-size:120%}
.sosmedarl-img{position:relative;max-height:140px;overflow:hidden}
.sosmedarl-img img {max-width:100%;width:100%;transition:all .6s;}
.sosmedarl-img:hover img{transform:scale(1.2) rotate(-10deg)}
.sosmedarl-img:before{content:'';background:rgba(0,0,0,0.3);position:absolute;top:0;left:0;right:0;bottom:0;z-index:2;transition:all .3s}
.sosmedarl-img:hover:before{background:rgba(0,0,0,0.6);}
.aboutfloat-img{width:55%;position:absolute;top:35%;bottom:35%;left:22.5%;z-index:3}
.sosmedarl-float{text-align:center;display:table;width:100%;height:100%}
.sosmedarl-float a{background:transparent;color:#fff;padding:8px 14px;z-index:2;display:table-cell;width:100%;font-size:90%;text-transform:uppercase;vertical-align:middle;border:2px solid #fefefe;border-radius:3px;transition:all .3s}
.sosmedarl-float:hover a{background:#e74c3c;color:#fff;border-color:transparent;}
.sosmedarl-float a i{font-weight:normal;margin:0 5px 0 0}
.sosmedarl-wrpicon{display:block;margin:15px auto;position:relative;}
.sosmedarl-wrpicon .extender{width:100%;display:block;}
.extender{text-align:center;font-size:16px}
.extender .sosmedarl-icon{display:inline-block;border:0;margin:0;padding:0;width:32%;}
.extender .sosmedarl-icon a{background:#ccc;display:inline-block;font-weight:400;color:#fff;padding:0 12px;line-height:32px;border-radius:3px;font-size:12px;width:100%;}
.extender .sosmedarl-icon i{font-family:fontawesome;margin:0 3px 0 0}
.sosmedarl-icon.fbl a{background:#3b5998}
.sosmedarl-icon.twitt a{background:#19bfe5}
.sosmedarl-icon.crcl a{background:#d64136}
.sosmedarl-icon.fbl a:hover,.sosmedarl-icon.twitt a:hover,.sosmedarl-icon.crcl a:hover{background:#404040}
.extender .sosmedarl-icon:hover a,.extender .sosmedarl-icon a:hover{color:#fff;}
.sosmedarl-info{margin:10px 0 0 0;font-size:13px;text-align:center;}
.sosmedarl-info p{margin:5px 0}
.sosmedarl-info h4{margin-bottom:10px;font-size:16px;text-transform:uppercase;color:#444;font-weight:700}
.sosmedarl-info h4 span {position:relative;display:inline-block;padding:0 10px;margin:0 auto;}
.sosmedarl-info h4:before,.sosmedarl-info h4:after {position:absolute;top:51%;overflow:hidden;width:50%;height:1px;content:'\a0';background-color:rgba(0,0,0,0.08);}
.sosmedarl-info h4:before {margin-left:-50%;text-align:right;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
Masukkan Kode di bawah ini tepat DI BAWAH <Body>
<b:widget id='HTML68' locked='false' title='Sosial Media' type='HTML' visible='true'>
        <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
<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/-2rwSWagjHKw/Vi4YlEYYxRI/AAAAAAAADOI/e_-tJD_tgJc/s1600/x-theme.png' title='Judul Blog' width='300'/>
<div class='aboutfloat-img'><span class='sosmedarl-float'><a href='#' rel='nofollow' target='_blank' title='Join Our Site'><i class='fa fa-user'/> Join Our Site</a></span></div>
</div>
</div>
<div class='sosmedarl-info'>
  <h4><span>Judul Blog</span></h4>
<p>Deskripsi blog tulis di sini</p>
</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'/> Like</a></li>
<li class='sosmedarl-icon twitt'><a href='#' target='_blank' title='Follow Our Twitter'><i class='fa fa-twitter fa-fw'/> Follow</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'/> Circle</a></li>
</ul>
</div>
</div>
</div>
</b:includable>
</b:widget>
Keterangan
Untuk Scrpit yang saya blog kuning silakan ganti dengan format sesuai informasi anda.

  • Lalu klik SAVE

Mudah bukan  Cara Mudah Memasang Kotak Widget Sosial di Blog Ala Arlina Design, Semoga artikel ini bermanfaat.

Post a Comment for "Cara Mudah Memasang Kotak Widget Sosial di Blog "