Widget Social Sharing and Subscribe Paling Komplit
Widget Social Sharing and Subscribe Paling Komplit ini dibuat dengan tujuan untuk memudahkan anda dalam mempromosikan dan meningkatkan lalu lintas blog Anda dengan berbagai cara. Saya yakin widget ini memiliki potensi yang sangat baik untuk meningkatkan pelanggan Anda, penggemar Facebook dan penggemar di berbagai jaringan sosial. Pembaca Anda juga akan mendapatkan kesempatan untuk terhubung dengan Anda di jaringan lain dan semua fitur ini hanya dalam satu widget dengan cara yang kompak dan rapi. Widget ini memiliki hampir semua yang Anda butuhkan untuk mempromosikan blog Anda dan meningkatkan penggemar dan pembaca. Memiliki kotak berlangganan, kotak berbagi, Like Facebook. Hal ini dapat menggantikan tombol sosial lainnya, widget atau plugin yang Anda gunakan di blog Anda. Bersiaplah untuk melihat keindahan yang menakjubkan dalam tindakan yang akan memelihara blog Anda.
Gambar diatas adalah Screen shot dari project widget yang akan kita buat, untuk demonya silahkan click Demo Social Sharing and Subscribe. Fitur utama yang cukup terlihat pada pandangan pertama tetapi ada beberapa fitur kecil yang Anda tidak akan dapat melihat. Salah satunya adalah efect hover dari widget tersebut berupa cahaya keemasan apabila pada kotak subscribe disorot dengan mouse. Beberapa efek transisi CSS3 telah digunakan untuk memberikan kesan halus di hover dalam kombinasi dengan kotak-bayangan. Dari semua fitur yang ada pada widget tunggal ini telah disajikan secara rapi dan kompak dengan ukuran hanya sekitar 10KB yang saya rasa tidak begitu mempengaruhi berat loading blog.
Cara Pemasangan
- Log-in ke blog anda.
- Tata Letak >> Tambah Gadget / Add Gadget >> HTML Javascript
- Copy kode di bawah ini dan pastekan pada HTML Javascript tadi.
<!--No Ordinary Social Subscription Widget-->
<b:if cond='data:blog.pageType == "item"'>
<style>
.tbibox {
background: #fff;
border: 1px solid #ddd;
height: 360px;
margin: 10px auto;
padding: 10px;
width: 572px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.tbisubscribe {
border: 1px solid #D3D3D3;
padding: 8px;
width: 300px;
-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;
}
.tbisubscribe:hover {
-moz-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
-webkit-box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 10px 1px rgba(249, 215, 126, 1);
}
.tbimailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 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;
}
.tbimailbox: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;
}
.tbisubmit {
font: bold 12px Tahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #ff5714;
border: 0px solid #ffffff;
text-shadow: 0px -1px 1px #222222;
box-shadow: 2px 2px 5px #000000;
-moz-box-shadow: 2px 2px 5px #000000;
-webkit-box-shadow: 2px 2px 5px #000000;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
padding: 8px 15px;
cursor: pointer;
margin: 0 auto;
}
.tbisubmit:active {
cursor: pointer;
position: relative;
top: 2px;
}
.tbisubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
.tbisharebox {
border: 1px solid #D3D3D3;
margin: -157px 0 0 330px;
padding: 8px;
width: 225px;
-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;
}
.tbisharebox:hover {
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 1);
box-shadow: inset 1px 1px 55px 1px rgba(249, 215, 126, 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>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
<div class='tbibox'>
<div class='tbisubscribe'>
<div style='color: #666666; font-weight: bold; font: 22px Oswald, cursive; margin: 0px 0px 10px 15px;'>Get Free Updates in your Inbox</div>
<div style='margin: 10px 0 0 6px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform'
method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=ibnoeinfo', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='tntbystc' />
<input name='loc' type='hidden' value='en_US' />
<input class='tbimailbox' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}'
onfocus='if (this.value == "Enter your email...") {this.value = ""}'
type='text' value='Enter your email...' />
<input alt='' class='tbisubmit' title='' type='submit' value='Subscribe'/>
</form>
</div>
<div style='border: none; color: #666666; font: 22px Oswald, cursive; margin: 25px 0 0 5px;'>Follow us on:</div>
<div style='margin: -32px 0 0 120px;'>
<a href='http://www.facebook.com/ibnoec' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTPvRrxk7E9MvJ7Tbbp34ZTSLDE_l_miZsk2z-eldSkjCwY_sTuHfkCYckv0IwTu2KwhVvEheG5oOwqxZK_dlvLiDgXNP07aBILcg3nb7qcgWvG_sSuji4hJmf5cB6DfSWLMKgTOarWa4/s32/facebook500.png' alt='facebook'/></a>
<a href='http://twitter.com/ibnoecahyadie' rel='nofollow' target='_blank'
title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinJVlNjSuuWU8_SKA_92GTk2YXbxoqf2FWP0JT9ZmPN5-7jyjowvEIFPKEkuVqnd_5TNoJZqyiBomx87Yxpg6U3-nRbHVlnYQb4hTEiU8AEJmfFSm4bQ0TY1QI8Ls_xx1Vo-HbuMzF554/s32/twitter.png' alt='twitter'/></a>
<a href='https://plus.google.com/112120349328854462468/posts' rel='nofollow' target='_blank'
title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7Hcd-qNLqSR-2qn1Hsxnzr1o_a-7-oNoMy8m2CJSzEKZpFLpAoGPiJUPsKfBQ-b_2k94WvCSqC49cg3VDnN1UEC0fiWAIpDKj40cW8oA15B-jcDxI7cnWLxc_Rg_tLHY-5Y0_i0zNPhA/s32/googleplus-revised.png' alt='gplus'/></a>
<a href='PINTEREST URL' rel='nofollow' target='_blank'
title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKTYll2FclwhyZi6gkAgbZYWOMolRyqdWHKPQCiTYymGrRIhe4d-3kwWE-vnwkDqjlb1Xoxv0B_GzvouIL3rN9mXSKiHBryqgGJ5SoG9s-l0KkYwipLlmw02v-a9p-acU7zrN04HjME2U/s32/pinterest.png' alt='pinterest'/></a>
<a href='RSS URL' rel='nofollow' target='_blank'
title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjiJ0bO2oZzI3d_WfaKj678IT0H-u3NTyBnrqsC6s4qi552wA-85QMpeTrvNufXhJv0eR-OMYPVFQQk7S_V1g0PkWsb3pxkzGp71bqTJpYJWkTuFx-q8zsniMKwnsfyBNuxosIme3DgtBs/s32/rss.png' alt='rss'/></a>
</div>
</div>
<div class='tbisharebox'>
<script type='text/javascript'>
var switchTo5x = true;
</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>
stLight.options({
onhover: false
});
</script>
<div style='margin: 5px 5px;'>
<span class='st_fblike_hcount' displaytext=''></span>
</div>
<div style='margin: -30px -20px 0 0; float: right;'>
<a href='http://twitter.com/share' rel='nofollow' class='twitter-share-button'
expr:data-url='data:post.canonicalUrl' expr:data-text='data:post.title'
data-count='horizontal' data-lang='en'></a>
<b:if cond='data:post.isFirstPost'>
<script type='text/javascript' src='http://platform.twitter.com/widgets.js'></script>
</b:if>
</div>
<div class='addthis_toolbox addthis_default_style' style='margin: 10px 0 12px 85px;'>
<a class='addthis_counter'></a>
<script type='text/javascript' src='http://s7.addthis.com/js/250/addthis_widget.js'></script>
</div>
<div style='margin: 5px 5px;'>
<su:badge layout='1'></su:badge>
<script type='text/javascript'>
(function () {
var li = document.createElement('script');
li.type = 'text/javascript';
li.async = true;
li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(li, s);
})();
</script>
</div>
</div>
<div style='float: right; margin: -40px -5px 0 0;'>
<div class='g-plusone' data-size='medium' expr:data-href='data:post.url'></div>
<script type='text/javascript'>
(function () {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div style='margin-top: 20px;'>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fibnoe.info&width=570&colorscheme=light& show_faces=true&stream=false&header=false&height=180'
style='border:none; overflow:hidden; width:570px; height:180px;' /></iframe>
</div>
</div>
</b:if>
<!--No Ordinary Social Subscription Widget-->
Kostumusasi Widget
Ganti ibnoeinfo dengan feedburner TITLE FEED Anda.
Ganti 'http://www.facebook.com/ibnoec' dengan URL Facebook Anda.
Ganti 'http://twitter.com/ibnoecahyadie' dengan URL Twitter Anda
Ganti 'https://plus.google.com/112120349328854462468/posts' dengan laman Google+ Anda.
Ganti 'PINTEREST URL' dengan link Pinterest Anda.
Ganti 'RSS URL' dengan link feed RSS.
Ganti 'http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fibnoe.info' dengan URL Halaman Fan Page Facebook anda, hanya bagian yang saya tandai saja yang harus anda ganti.
Ganti 'http://www.facebook.com/ibnoec' dengan URL Facebook Anda.
Ganti 'http://twitter.com/ibnoecahyadie' dengan URL Twitter Anda
Ganti 'https://plus.google.com/112120349328854462468/posts' dengan laman Google+ Anda.
Ganti 'PINTEREST URL' dengan link Pinterest Anda.
Ganti 'RSS URL' dengan link feed RSS.
Ganti 'http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fibnoe.info' dengan URL Halaman Fan Page Facebook anda, hanya bagian yang saya tandai saja yang harus anda ganti.
Jika Anda masih memerlukan bantuan atau memiliki beberapa pertanyaan atau mendapatkan kesalahan dalam memasang Widget Social Sharing and Subscribe Paling Komplit ini, maka jangan ragu untuk bertanya pada kotak komentar yang telah disediakan.
0 komentar: