0
Cara Memasang Kotak Widget Sosial Media di Blogger -  Sebuah blog tanpa sosial media apalah artinya ? Tidak ada hubungan yang sosial serta relation yang bagus blog tidak akan viral. Maka dari itu kali Coretan Jawa akan membuka rahasia cara memasang kotak widget sosial media di blogger.


https://coretanjawa.blogspot.com



Cara Memasang Kotak Widget Sosial Media di Blogger

Spesial widget ini menggunakan font awesome silahkan tambahkan style di bawah ini di atas kode </head>


<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

Seperti biasa masuk ke akun blogger sobat salin kode di bawah ini taruh sebelum kode ]]></b:skin> or </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}

Lalu tambahkan 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/AVvXsEgmLlNEBY7sDPftxDY0FCJh2FB24Jx3fmNdJ59KWv3ehui9CcwaU1rJcOU-lFuv5wQ8hwrL2GXKLLuxGFaaLGoS3aHHFeLJ-_dNStSbJKBLxPP7Vogj39o9OvzVkR-Dri6xg801aiWCbyod/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&lt;/span></h4>

<p>Deskripsi blog tulis di sini&lt;/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>

Semisal widget di taruh di sidebar makan akan seperti di bawah SS ini ⇙


Cara Memasang Kotak Widget Sosial Media di Blogger

Nice ganti kode yang saya tandai di atas dengan gambar, judul, deskripsi, dan link sosial media sobat.





Demikian  Cara Memasang Kotak Widget Sosial Media di Blogger, Semoga bermanfaat.

Post a Comment

 
Top