Widget Sosial Network Yang Tidak Biasa

noreply@blogger.com (Anonymous) — Tue, 4 Sep 2012 05:33:00 +0700

Widget ini dibuat dengan untuk bertujuan mempromosikan dan meningkatkan lalu lintas blog anda dengan berbagai cara. Ini memiliki potensi untuk meningkatkan pelanggan anda, penggemar Facebook anda dan bahkan widget ini dapat membuat "virus" terhadap berbagai jaringan sosial. Pembaca blog 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. Trik Nge-Blogspot menamainya dengan "Widget Sosial Network Yang Tidak Biasa" karena widget ini memiliki hampir semua yang anda butuhkan untuk mempromosikan blog anda dan meningkatkan penggemar dan pembaca. Memiliki kotak berlangganan, tombol berbagi, Facebook Like Box, apa lagi yang anda inginkan? 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.

PREVIEW Fitur :

Kotak berlangganan untuk meningkatkan pelanggan anda.
Tombol follow kami untuk pembaca blog anda untuk bisa terhubung pada jaringan lain.
Facebook Like Box yang akan meningkatkan penggemar anda.

Fitur utama yang cukup terlihat pada pandangan pertama tetapi ada beberapa fitur kecil yang anda tidak akan melihatnya. Salah satunya adalah cahaya keemasan atau biru. Jika anda menggunakan Google Chrome, anda akan melihat cahaya keemasan saat menggunakan kotak teks atau form login. Demikian pula, dalam versi baru dari Firefox anda melihat cahaya biru secara default. Kami telah memperbaiki widget ini agar dapat bisa dibuka di semua browser. Kami juga telah membuat tombol berlangganan terlihat sama pada kedua Firefox dan Google Chrome yang memiliki masalah dengan padding. Jika kita tidak melakukan itu, tombol akan terlihat berbeda di Google Chrome. Beberapa CSS3 efek transisi telah diselipkan di widget ini untuk memberikan perasaan halus di hover dalam kombinasi dengan bayangan kotak dan widget ini hanya berukuran sebesar 10 Kb.

Cara menggunakannya :

1) Silahkan pergi ke Blogger.com -> Template.
2) Backup template anda untuk jaga-jaga kalau ada kesalahan.
3) Kemudian klik Edit HTML -> Lanjutkan.

4) Centang Expand Template Widget.
5) Lalu cari kode berikut :

<data:post.body/>

Jika kode diatas ada 2 atau 3. Pilihlah yang paling pertama. Kemudian copy kode dibawah ini lalu paste-kan dibawah kode <data:post.body/>.

<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=tntbystc', '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='FACEBOOK URL' target='_blank' title='Join us on Facebook'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuCO-wDGJoULQbiaCv-BbGXiMbSnQAJpwU5Zk78jqRLR_M8MvHWoIt9EYVCKqLEN70KKT-6SMQo25R0f2BbIiTmJ7BVRewqH168TFwIiT-w4DiK7Vlxo1fDkQlXTNirEb55j1MMuxlkI8/s32/facebook500.png' alt='facebook'/></a> <a href='TWITTER URL' rel='nofollow' target='_blank' title='Follow us on Twitter'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEM7U2qgZ91M5E4LILfKj-k54_mpNZud1oiTorWXWdkRrUy59wnsQh0WRpkHxT4nGhOE5cK41ttxP9zluF-IP5YST8TlBt0mOHzaBPYVlk4xh877l23fQ6WF_Fzs7do7gVEQM4U_CbHAQ/s32/twitter.png' alt='twitter'/></a> <a href='GOOGLE+ URL' rel='nofollow' target='_blank' title='Follow us on Google+'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimQu3S1W1g5nFHWf-Asf7mso5LMgOY9Ndvq26meiQDDcQxYT6yaSCxaPMBdir8X5QkLctCifTRXMSxg3Ivwzmqt-lj2RBKZLH5n3Dtj7WDNt6y2Xm-Nqek1mezyKvsLSr2Gt36ET2lw2c/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/AVvXsEjBjJ1DzytqsRiJkabJpgIC78hFio8EEPOi12r9nTMfqvBHvFKcADR1xy1sXno2CYRLCZhM2_j9Nl6k0966Lywo5U8otKWebg4ab9CSP4jo0rLqXuhVZiN2zuBknk0QNEYOBdVAleVocyA/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/AVvXsEg9jIRNyRXMOtLIKMQLWAQLyw9yioG2O408ZCUr4LOA2DiJdbGq8_a9p-BhcpTxlG-IBzuW2PmL7AX_TW7BVJlZvndfSeL4GzNne-yxgLiiH8aCkpgwU6QFqyT6a9SwXfhd3bKzMRC8bvI/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=http%3A%2F%2Fwww.facebook.com%2FTrikNgeBlogspot&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>

Yang harus diganti :

Ganti Get Free Updates in your Inbox dengan kalimat anda (Opsional).

Ganti tntbystc dengan Feed Title Feedburner anda. Untuk mengetahuinya, silahkan pergi ke akun Feedburner anda -> Publicize -> Email Subscriptions.

Ganti FACEBOOK URL dengan link halaman Facebook Fanpage anda.

Ganti TWITTER URL dengan link Twitter anda.

Ganti GOOGLE+ URL dengan link halaman Google+ anda.

Ganti PINTEREST URL dengan link Pinterest anda.

Ganti RSS URL dengan link feed RSS anda.

Untuk Facebook Like Box, ikuti tutorial dibawah ini :

Ganti www.facebook.com%2FTrikNgeBlogspot menjadi link URL Facebook Fan Page anda (Jangan menyertakan http://).

Ganti semua garis miring atau yang disebut slash (/) dengan %2F

NOTES!

Jika ingin widget ini ditampilkan di homepage, silahkan hapus kode berikut.

<b:if cond='data:blog.pageType == "item"'> ....................................................
</b:if>

6) Untuk jaga - jaga lagi, silahkan klik Pratinjau.

7) Jika tidak ada masalah, silahkan lagsung klik Simpan Template.

Memang widget ini masih terdapat bug - bug atau masalah yang belum kami temukan. So, berkomentarlah setelah menggunakan widget ini!