Wednesday, December 7, 2016
Cara Membuat Widget Social Media “ All in One “ di bawah Postingan Blog
Cara Membuat Widget Social Media “ All in One “ di bawah Postingan Blog
Salam Blogger, Artikel Bloggingpasuruan kali ini tentang Cara Membuat Widget Social Media “ All in One “ di bawah Postingan Blog. Widget ini meliputi Subscribe ke Email Sobat, Facebook Fan page, Social media sharing, Profile Google Plus milik Sobat.
Sobat Tertarik untuk memasang di Blog Sobat ? Silahkan ikuti tutorial Cara Membuat Widget Social Media “ All in One “ di bawah Postingan Blog
1.Masuk ke Akun Blogger Sobat
2. dari Dashboard pilih Menu TEMPLATE >> EDIT HTML
Catatan Penting…!!!
Sebelum Sobat melakukan perubahan pada HTML, Silahkan BACKUP Template Sobat, guna menghindari kesalahan yang tidak di inginkan ( kerusakan pada template ).
3. Cari kode <data:post.body> Gunakan Ctrl+F untuk pencarian cepat
4.Kalau sudah ketemu, letakkan kode di bawah ini di bawah kode <data:post.body>
5. Berikut ini kode yang dipasang dibawah kode <data:post.body>
5. Berikut ini kode yang dipasang dibawah kode <data:post.body>
HTML
<!-- All-in-one Social Widget Blogger Oleh Bloggingpasuruan -->
<;style>
.dsgbox {
background: #fff;
border: 1px solid #ddd;
height: 355px;
margin: 10px auto;
padding: 10px;
width: 650px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.dsgsubscribe {
border: 1px solid #D3D3D3;
padding: 8px;
width: 340px;
height:172px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.dsgsubscribe:hover {
-moz-box-shadow: inset 1px 1px 20px 1px rgbaundefined91,148,253, 1);
-webkit-box-shadow: inset 1px 1px 20px 1px rgbaundefined91,148,253, 1);
box-shadow: inset 1px 1px 10px 1px rgbaundefined91,148,253, 1, 1);
}
.dsgmailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgbaundefined255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgbaundefined0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgbaundefined0, 0, 0, 0.4) inset;
color: #666;
font: 14px "trebuchet ms", sans-serif;
padding: 7px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.dsgmailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.dsgsubmit {
font: bold 18px Segoe UI,RobotoTahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #5b94fd;
border: 1px dashed #ffffff;
border-radius: 10px 10px 10px 10px;
padding: 4px 15px;
cursor: pointer;
margin: 0 auto;
}
.dsgsubmit:active, .dsgsubmit:hover {
cursor: pointer;
color:#5b94fd;
border: 1px dashed #fff;
background:#000;
position: relative;
top: 1px;
}
.dsgsubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
.dsgsharebox {
border: 1px solid #D3D3D3;
margin: -157px 0 0 350px;
padding: 8px;
height:130px;
width: 273px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.gplusholder {
margin: -157px 0 0 350px;
}
.dsgsharebox:hover {
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: inset 1px 1px 20px 1px rgbaundefined91,148,253, 1);
box-shadow: inset 1px 1px 20px 1px rgbaundefined91,148,253, 1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
</style>
<div class="dsgbox">
<div class="dsgsubscribe">
<div style="color: #666666; font-weight: bold; font: 22px Segoe UI, Roboto, cursive; margin: 0px 0px 10px 15px;">
Suka dengan Artikel ini ? Kirim Langsung ke Inbox Email Anda!
</div>
<div style="margin: 10px 0 0 6px;">
<form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.openundefinedhttp://feedburner.google.com/fb/a/mailverify?uri=YOUR_ACCOUNT, popupwindow, scrollbars=yes,width=550,height=520);return true" style="margin: 0pt;" target="popupwindow">
<input name="uri" type="hidden" value="YOUR_ACCOUNT"/>
<input name="loc" type="hidden" value="en_US"/>
<input class="dsgmailbox" name="email" onblur="if undefinedthis.value == "") {this.value = "Enter your email...";}" onfocus="if undefinedthis.value == " Masukkan Email disini...") {this.value = ""}" type="text" value="Masukkan Email disini "/>
<input alt="" class="dsgsubmit" title="" type="submit" value="Subscribe"/>
</form>
</div>
<div style="border: none; color: #666666; font: 19px Segoe UI, Roboto; margin: 25px 0 0 5px;">
Follow us on:
</div>
<div style="margin: -32px 0 0 120px;">
<a href="https://www.facebook.com/YOUR_ACCOUNT" target="_blank" title="Join us on Facebook"><img alt="facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTmmMy3et6PqVcf1XTl5hqtsG1JJWWX9fd32WIxpJu1KnZ_-Qdoer9vJt-gIA9AvaKlQmg1f3sAqfpzft3LBGzK5IezM8U_HsiHSwdaRRreEOzTxX8wpPN30PcwBHykjsmI3JzkcptvQ/s32/facebook500.png style="border: 0px; padding:2px;""/></a>
<a href="https://www.twitter.com/YOUR_ACCOUNT" rel="nofollow" target="_blank" title="Follow us on Twitter"><img alt="twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBawXTlfV2763zD6C7U6WUMnVKVjs48cYMKb8oCkoUAneS2_3i5m1ol45Y-F1BNL5lWxIQJl5YV2pQZWoDtg5tF82-Br2htHiHh9tJZRsKsBJ7F1Uj56ThxezhXm5Bkl8u0Jdq0nicyA/s32/twitter.png" style="border: 0px; padding: 2px;"/></a>
<a href="https://plus.google.com/+YOUR_ACCOUNT" rel="nofollow" target="_blank" title="Follow us on Google+"><img alt="gplus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB2MVDdzOP24cTIQduKo2xmVnACAYP16gRS74v0uvksz6p39P_vNPMQk4UKEPWadwSSTec8lODbvr7i1JuobR-yR1cM1uyV8xweX3pLcPgupjoWSnIma74yRjp5qkwvscbIH8bCEuOeg/s32/googleplus-revised.png" style="border: 0px; padding: 2px;"/></a>
<a href="http://pinterest.com/YOUR_ACCOUNT" rel="nofollow" target="_blank" title="Follow us on Pinterest"><img alt="pinterest" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Y8JDr2r4n81kdWrfCapwLvNLV4hwHTWk7C26FLxznhXmpG4DGauc1-s0gE7db3cI36PJNLN2tL1-HH02ZXj5dK8Y3cUB7jmQcdiPYST_L6dDMlnKGbJqYlJTIo1eRsaunYUOW2RtQQ/s32/pinterest.png" style="border: 0px; padding: 2px;"/></a>
<a href="http://www.YOUR_ACCOUNT.com/feeds/posts/default?alt=rss" rel="nofollow" target="_blank" title="Subscribe to RSS"><img alt="rss" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht47XTdQVLGz7WLbvFf-FLFMI9-J8RWse-bRLIBGNoFeDu_h5q9Z9KYChRqbzdk8hhiaGrVfxZ3q5xPaRUO2jXaPOCK_8cKqDFKWDnMXjtny75q4IkWzm4g70lXo44PVPE4lSKYtR76Q/s32/rss.png" style="border: 0px; padding: 2px;"/></a>
</div>
</div>
<div class="dsgsharebox">
<script type="text/javascript">
var switchTo5x = true;
</script>
<script src="//s7.addthis.com/js/300/addthis_widget.js" type="text/javascript"></script>
<br/>
<div style="margin: -15px 5px;">
<a class="addthis_button_facebook_like" fb:like:layout="button_count">
</a>
</div>
Available link for download
