Jumat, 29 November 2013

Browse Manual » Wiring » » » » » » » Cara membuat Widget social subscription Box

Cara membuat Widget social subscription Box

membuat Widger 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 == &quot;item&quot;>   
 <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(&apos;http://feedburner.google.com/fb/a/mailverify?uri=tipstrikbloging&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);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 == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}   
 onfocus=if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}   
 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/AVvXsEi8cpO9pO5wYQ-WP46PkgiPeot1pSz5YD53pCI6GDR4cpTzV-ll-4xkAHFs33THFYiCcFVi7Dgf_6EwqvkQHINRgJwzZdmZTXwg-n554fETxQkZ4_ZsmGu3AmD1qmQAGgSrLpgDepAqrcY/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/AVvXsEggLq2p65ohpEco0u8KJHHFLLTX14YpzLYBxtnU-uUADYUFw0i3eoYKyOhYdAJR9S3quEyHD4BjNU_TYA8ZXH1EGiA6LhrSebREBHgquKVUxJ89GAlXN5yKDDua5UXUgQcXv_iWD1TVzFc/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/AVvXsEhe6PTf_g0LwbSIjt9Tuh2-PJalXr4jQxQKqXJ4MHkahMwum1t-2x6cae3WiGQejYqng0gTlJL5LGJLiEIsFw2IFe-SqP05zuHEi8BUsvGPC1uHmut_u7nT8HXq-TlBh6a-txk3i1bMyts/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/AVvXsEiS_HdjnYulEkMVnwYgO7xJxcYzP6bFQdnIPpK2KFUD4o9J-xKXVWbxTzvQShMa-LJs8kLXDSv-TY7jjyg-nomQR_U1BhQRpuEAQiPQViOzW1WSeKu-FzcagojOVA-7faPeo-XtNmhMPMc/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/AVvXsEjIo1F0TmdfONRZqnB_NInmN988VI2vVxIbglzlUcXyu4grpCVgs6Kp6K8dppYH6zTZC8aaX39edz9rxYN7DOcx3_nlcEV1tAuXkA_13eCsbZHpcOIq_GGR1ljtG-Q-vlnO83XtqEYwUJI/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&amp;width=570&amp;colorscheme=light&amp; show_faces=true&amp;stream=false&amp;header=false&amp;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

Diposting oleh di
Label: , , , , ,

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)