Cara Mudah Memasang Kotak Widget Sosial di Blog

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?

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.

Menambah jaringan link
Menambah View share
Menambah Followers
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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj446qanuWZnDbg4AmcE4tlF-wrcAsnAKXdBtNFCCA8TToSMXfPeNjsp1pkOLkeJzsJZMAT8qNiSwyFmEHLvkiPXBcRig6PBjuhudtFkFhAHdotneVqNudEZoNvQnNIL-VEctapw5iKUmiK/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.

ALGOFIXS

Cara Mudah Memasang Kotak Widget Sosial di Blog

Cara Memasang Kotak Widget Sosial Media

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

Menu Halaman Statis