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.openundefined'http://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/AVvXsEj46Dpxq52M7oSsFbQd53ZQhU_RqSLA1yCevSH8_2HfJ0pe1jNwFAtSVxxjOVJuYej9Mxs1WLcX7zOLoqCay0zGRAlGeAig4q3crTTePU-ceLeZ3MQUjvijeE1S4BkWeKa38sUqmsbyokc/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/AVvXsEjaptlZP57oMwKhiKFwRy5_RPiqkn9o0kQrmTsF_-5tI32yB0I0yniJzPW_0ZuVD170SzzICA1QkNVy2MV9R3-0D1leZ_QOENz-Y4QZpqfYIJT6vwSgmq_FDHcAXXMqvyVtr4FYNdqLaUw/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/AVvXsEid4YhRW_hEyC4bKrPsqqCJut2QheFLQYG8x6qjq7q96VUltQhHwgYUJi4ma0dDobh_UV9Wfjy7nWi8tLI_uRpjh6PJJfzm16shB6T9xuWhyphenhyphenNHu11iAMsYyA38CwB2Fmtgo-R99zUMMn-w/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/AVvXsEgnVwomO0stKc2kuiTZyvo5Mi4EPJJ3ajOCGG4DUX5ijvPr3yLeIbsm9gHKILdQrCrFisy4XRm2yvYfalap6Qdj3YN98LwL_vunJAr7EBm7J02mw-UJD_Ul1U_u_xkb4M_fFEDcw0ZcTaw/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/AVvXsEjIWYxJQvzvzT8iCnakyk40Mdhi8CvFQ6uD16nYwAcxPRfCWDCxF6yx-1xdRJMQ5JmOKZIpik9hIz7iy4EZpVCJoQthcgkQQSX71BtkhtT7U6Yya47NoSP4rtXnSKvXxzIFNGY5LhY1IBo/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>
<div
style="float: right; margin: -15px -5px 0 0;">
<a
class="addthis_button_stumbleupon_badge">
</a>
</div>
<div
class="addthis_toolbox addthis_default_style " style="margin:
16px 0 10px 98px;">
<a
class="addthis_button_google_plusone"
g:plusone:size="inline">
</a>
</div>
<div
style="margin: 5px 5px;">
<a
class="addthis_button_tweet">
</a>
</div>
<div
style="float: right; margin: -30px -60px 0 0;">
<a
class="addthis_button_pinterest_pinit"
pi:pinit:layout="horizontal"></a>
</div>
</div>
<div style="margin-top:
35px;">
<iframe
allowtransparency="true" frameborder="0"
scrolling="no"
src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FYOUR_ACCOUNT&width=340&colorscheme=light&
show_faces=true&stream=false&header=false&height=170"
style="border: none; height: 160px; overflow: hidden; width:
340px;">
</iframe>
</div>
<div
class='gplusholder'>
<div
class='g-person' data-href='https://plus.google.com/YOUR_ACCOUNT'
data-layout='landscape' data-showcoverphoto='false' data-showtagline='false'
data-width='225'>
</div>
</div>
</div>
<!-- All-in-one Social Widget Blogger Oleh Bloggingpasuruan-->
" Kustomisasi “
Gantikan YOUR_ACCOUNT dengan ID ( facebook fan page,twitter,google plus,feedberner ) milik Sobat.
Catatan Penting !
Jika Widget tidak bekerja, silahkan merubah letak ( kode ) pada <data:post.body> yang kedua atau yang ketiga. Jika masih ada masalah silahkan kontak Admin untuk bantuan.
Jika Widget tidak bekerja, silahkan merubah letak ( kode ) pada <data:post.body> yang kedua atau yang ketiga. Jika masih ada masalah silahkan kontak Admin untuk bantuan.
Saya akan
sangat berterima kasih jika sobat Blogger berkenan meninggalkan komentar, saran
atau tambahan informasi serta pertanyaan seputar artikel Cara
Membuat Widget Social Media “ All in One
“ di bawah Postingan Blog. Semoga bermanfaat dan terima
kasih..
keren gan, izin coba...
ReplyDeletehttp://koetoe-id.blogspot.com/