Judul: Berbagi Info Seputar Cara membuat Widget social subscription Box Full Update Terbaru
link: Cara membuat Widget social subscription Box
Berbagi Cara membuat Widget social subscription Box Terbaru dan Terlengkap 2017
Cara membuat Widget social subscription Box
Membuat Widget social subscription Box di blog salah satu cara meningkatkan popularitas blog kita. Dimana box subscribe yang memanfaatkan fasilitas feed burner miliki google bertujuan untuk memberikan informasi terbaru sebuah blog kepada para pengunjung yang berlangganan feed blog. Dengan adanya kotak subscribe feed burner di blog kita, maka kita dapat meningkatkan jumlah kunjungan pada blog kita.
Sesuai dengan fungsinya Widger social subscription Box sebagai media pemberi kabar dan informasi terbaru dari blog kita, maka tentunya semaksimal mungkin kita membuat isi blog kita bermanfaat bagi para pengunjung.
Widger social subscription Box yang akan kita buat sudah dilengkapi dengan fitur yang menghubungkan blog kamu dengan sosial media atau jejaring sosial seperti facebook, twitter, stumbleupon dan google plus.
Berikut langkah cara membuat Widger social subscription Box
1. Login ke dashbor blog kamu lalu pilih template dan edit html
2. Pada barisan kode di html template kamu cari kode <data:post.body/> jika terdapat lebih dari satu kode yang sama maka pilihlah kode yang paling atas.
3. Selanjut copy kode dibawah ini dan pastekan di atas kode <data:post.body/>.
<!--Social Subscription Box Tipstrikblogging.com-->
<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=tipstrikbloging', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true'
style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='TipsTrikBlogging-Amatullah' />
<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/amatullah.syukur’target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhH6QAVYsya0Aj8bCCeTxAcYeOoNEyHmCCfGWS-mN60TeyfFdm8kRYrWFvtKq_jB_-XfNyElj6YK68WZH3RdSPSOxA4YY1NhW-ONkaW7S8EH6NPKu6RfDu_fCaV0KKq7cJCM45dyO_0f8/s32/facebook500.png' alt='facebook'/></a>
<a href='http://twitter.com/amatullahsyukur' rel='nofollow' target='_blank'
title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgtACHZUJSZf6yajK40ur6VSYeS8e-BrDhdhhlDl3iFVDAMACh_5DKsxnQbuXyKkJP3R287Qc08YMZJpMrmZln6RpqMOezk66mk1cQwHeVRv9N9yskFlTdgyYet9VVGxuQAjMvSb918wM/s32/twitter.png' alt='twitter'/></a>
<a href='https://plus.google.com/116382152511220195182#116382152511220195182/' rel='nofollow' target='_blank'
title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGXrZPJxtxi_ZhY9K20IjsPi3HZ2C2-Z_ZOWd3udeKos_4tHPd7aOI-RTzVYWjvMH3Jp5rWq4L5B9eJCgWnwhjbiZ3e0LHGjbC59589e22B72ex_ZLjpBBxIKZvZ4Ka-USnKb1E5Q17FE/s32/googleplus-revised.png' alt='gplus'/></a>
<a href='http://pinterest.com/amatullahsyukur/' rel='nofollow' target='_blank'
title='Follow us on Pinterest'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdmjWG3yaKDarqcRfEwax-G4r-W3CNeDmnFswIpb3_s1IHJg9_u1FR1ifajuw90QNzgH4jHBhrfPoH-ADMumog0DyecIdByHf2cLOxWVb_RbwjOxB8wkC9Qb_jda3G2cpZZxCHMKvC1mE/s32/pinterest.png' alt='pinterest'/></a>
<a href='http://feeds.feedburner.com/TipsTrikBlogging-Amatullah' rel='nofollow' target='_blank'
title='Subscribe to RSS'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiZdmXIH6deGSduovHtAA3IVAm_4-eCgC0J8OTso0cxkrJ8BcYy0m4fUho_x0yoi9qsa9qLGZg_-hmAdOx9d3TrvcHb8JKbur4C7DcGOopDUciKmG-tHYyaykw4-EPK2rxb60eHmo-91M/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-related='topbloggingidea:Get latest Blogger Widgets, Blogging Tips, Blogging Ideas, Blogger Gadgets, Free Blogger Templates, Plugins and SEO tips to Optimize Your Blogs.'
data-count='horizontal' data-via='topbloggingidea' 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=http%3A%2F%2Fwww.facebook.com%2FTopBloggingIdeas&width=570&colorscheme=light& show_faces=true&stream=false&header=false&height=180'
style='border:none; overflow:hidden; width:570px; height:180px;' />
</div>
</div>
</b:if>
<!--Social Subscription Box Tipstrikblogging.com—>
<small><div style='font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;'><a href='http://www.tipstrikblogging.com/2012/12/cara-membuat-widget-social-subscription.html' target='_blank' title='Widget Social Subscription'>+ Get This Widget Here</a></div></small>
4. Lalu simpan hasil pekerjaan kamu dan lihat hasilnya.
Perlu di ingat barisan kode yang baru kamu pastekan masih berisi informasi yang merujuk pada blog demo, jadi sebaiknya anda mengganti terlebih dahulu informasi sebagai berikut.
- Ganti kode uri tipstrikbloging dengan values akun feedburner kamu
- Ganti semua link sosial media dengan link milik kamu
- Ganti URL fanspage facebook dengan Url fanspage facebook kamu. Gunakan format html pada kode url seperti tanda garis miring (/) kau ganti dengan %2f serta hapus awalan url yang berisi http:// sehingga hanya menghasilkan url dengan awalan www.
Selanjutnya simpan kembali perubahan yang kamu lakukan dan silahkan refresh halaman blog kamu untuk melihat hasilnya
Itulah sedikit Artikel Cara membuat Widget social subscription Box terbaru dari kami
Semoga artikel Cara membuat Widget social subscription Box yang saya posting kali ini, bisa memberi informasi untuk anda semua yang menyukai Warung Game Android. jangan lupa baca juga artikel-artikel lain dari kami.
Terima kasih Anda baru saja membaca Cara membuat Widget social subscription Box