Membuat Floating Social Media Share di Blogspot

Sebenarnya postingan saya ini ada di blog axazax.com, tapi script sudah saya modifikasi dengan menambahkan tool Google Buzz dan Google+. Jadi terserah anda mau pakai yang aslinya atau hasil modifikasi dari saya.

Silahkan copy-paste code dibawah ini.

<br /><!-- Mulai Floating Social Media Share --><br /><style>#floatingbuttons { background: #C15F24; background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F54F4F), color-stop(1, #C12424)); background: -moz-linear-gradient(top, #F54F4F, #C12424); border: 1px solid #B31919; color: #fff; float: left; font-weight: normal; font-size: 13px; padding:0 0 3px 0; position: fixed; text-decoration: none; bottom:15%; left:0; z-index:10; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.3); }#floatingbuttons .floatbutton { float:left; clear:both; margin:5px 5px 0 4px; }.addbuttons { clear:both; color:#fff; font-size:7px; text-align:center; padding-top:5px; font-family:tahoma, verdana, helvetica, arial, sans-serif; font-weight:bold; line-height:1.4; }.addbuttons a { color:#fff; background:none; }.addbuttons a:hover { color:#fff; background:none; }.sharebuttons { font-size:7px; }</style><br /><div id='floatingbuttons' title="Share this post!"> <div class='floatbutton' id='facebook'> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><br /><fb:like layout="box_count" show_faces="false" font=""></fb:like><br /></div> <div class='floatbutton' id='stumbleupon'> <script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script><br /></div> <div class='floatbutton' id='digg'> <script> (function() { var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0]; s.type = 'text/javascript'; s.async = true; s.src = 'http://widgets.digg.com/buttons.js'; s1.parentNode.insertBefore(s, s1); })(); </script><br /><a class="DiggMedium DiggThisButton"></a><br /></div> <div class='floatbutton' id='twitter'> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a> <script src='http://platform.twitter.com/widgets.js'></script><br /></div> <div class='floatbutton' id='linkedin'> <script src="http://platform.linkedin.com/in.js"></script><br /><script data-counter="top"></script><br /></div> <div class='floatbutton' id='gplusone'> <script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script><br /><g:plusone size="tall"></g:plusone><br /></div> <div class='floatbutton' id='gb'> <a class='google-buzz-button' data-button-style='normal-count' href='http://www.google.com/buzz/post' title='post on google buzz'><br /><script src='http://www.google.com/buzz/api/button.js' type='text/javascript'></script><br /></a></div> <div class="addbuttons"> <a href="http://http://imherry.blogdetik.com/2011/07/25/membuat-floating-social-media-share-di-blogdetik/" title="Get This Widgets">Get Widgets<br /><span class="sharebuttons">www.herry.tk</span></a><br /></div> </div> <!– Akhir Floating Social Media Share –><br />

Masukkan code tersebut di Widgets HTML/Javascript.
Untuk contoh tampilan seperti yang ada di samping blog ini.
Selamat mencoba...
(script dari blog Official)

Read more »

Membuat Recent Comment di Blogger

Untuk membuat Recent Comments di Blogger (blogspot) sebenarnya banyak caranya, salah satunya menggunakan FEED yaitu dengan menambahkan Widgets Feed dan memasukkan URL Feed Comment.

http://username.blogspot.com/feeds/comments/default

Huruf yang dicetak tebal diganti dengan URL blog anda.

Bisa juga anda menggunakan cara dibawah ini.

1. Buka Dashboard Blogger anda. Pilih Rancangan >> Edit HTML kemudian cari code (gunakan ctrl+F ).
2. Centang terlebih dahulu Expand Template Widget. Paste kan code dibawah ini Tepat di Bawah setelah itu Save/Simpan.

<script style='text/javascript'><br />function showrecentcomments(json) {<br />for (var i = 0; i < 6; i++) {<br />var entry = json.feed.entry[i];<br />var ctlink;<br />if (i == json.feed.entry.length) break;<br />for (var k = 0; k < entry.link.length; k++) {<br />if (entry.link[k].rel == 'alternate') {<br />ctlink = entry.link[k].href;<br />break;<br />}<br />}<br />ctlink = ctlink.replace("#", "#comment-");<br />var ptlink = ctlink.split("#");<br />ptlink = ptlink[0];<br />var txtlink = ptlink.split("/");<br />txtlink = txtlink[5];<br />txtlink = txtlink.split(".html");<br />txtlink = txtlink[0];<br />var pttitle = txtlink.replace(/-/g," ");<br />pttitle = pttitle.link(ptlink);<br />if ("content" in entry) {<br />var comment = entry.content.$t;}<br />else<br />if ("summary" in entry) {<br />var comment = entry.summary.$t;}<br />else var comment = "";<br />var re = /<S[^>]*>>/g;<br />comment = comment.replace(re, "");<br />if (i==0) {<br />document.write('<li class="clear" style="border-top: 0pt none;">');<br />}<br />else{<br />document.write('<li class="clear">');<br />}<br />document.write('<a href="' + ctlink + '"><strong>' + entry.author[0].name.$t + '</strong></a> says:');<br />if (comment.length < 100) {<br />document.write('<a target="_blank" href="' + ctlink + '">'+comment+ '</a>');<br />}<br />else<br />{<br />comment = comment.substring(0, 100);<br />var quoteEnd = comment.lastIndexOf(" ");<br />comment = comment.substring(0, quoteEnd);<br />document.write('<a target="_blank" href="' + ctlink + '">'+comment + '...</a>');<br />}<br />}<br />document.write('</li>');<br />}<br /></script>

3. Kemudian pilih Elemen Halaman >> Tambag Gadget >> HTML/JavaScript setelah itu paste code dibawah ini lalu Save/Simpan.

<ul id='recentcomments'><br /><script src='/feeds/comments/default?alt=json-in-script&callback=showrecentcomments'/><br /></script></ul>

Nah selesai sudah, silahkan anda lihat blog anda.
Semoga sukses dan bermanfaat...

Read more »

Membuat Recent Post dengan Thumbnail

Dalam BLOGGER biasanya terlihat dari "Recent Posts" dalam bentuk link saja, tanpa gambar atau thumbnail.

Kali ini saya akan memberikan tips untuk membuat "Recent Post" dengan gambar thumbnail tambahan di pos.

Berikut ini adalah kode nya.
<style> img.recent_thumb {padding-right:5px;padding-left:padding-bottom:0px;0px;width:55px;height:40px;border:0;float:left;margin:0 0 5px 0px;} .recent_posts_with_thumbs {float: left;width: 100%;min-height: 50px;margin: 0px 0px 5px 0px;padding: 0;font-size:15px;font-color:black;font-family:calibri;} ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs normal {font-size:13px;} </style><br /><script style="text/javascript" src="http://bloggerplugins.org/scripts/recentpostswiththumbs.js"></script><br /><script style="text/javascript"> var numposts = 8; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 75; </script><br /><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

Buka Dashboard Blogger, pilih "Rancangan >> Elemen Halaman>> Tambah Gadget". Kemudian akan membuka jendela baru, pilih "HTML / JavaScript"



Masukkan kode di atas lalu Save.

====00O00====

In BLOGGER usually look of "Recent Posts" in the form of a link only, without images or thumbnails.

This time I will give you tips to make "Recent Post" with an additional thumbnail image in the post.

Here is his code
<style> img.recent_thumb {padding-right:5px;padding-left:padding-bottom:0px;0px;width:55px;height:40px;border:0;float:left;margin:0 0 5px 0px;} .recent_posts_with_thumbs {float: left;width: 100%;min-height: 50px;margin: 0px 0px 5px 0px;padding: 0;font-size:15px;font-color:black;font-family:calibri;} ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs normal {font-size:13px;} </style><br /><script style="text/javascript" src="http://bloggerplugins.org/scripts/recentpostswiththumbs.js"></script><br /><script style="text/javascript"> var numposts = 8; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 75; </script><br /><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script>

Open your Blogger Dashboard, select the "Design >> Page Elements >> Add Widget". Later will open a new window, select the "HTML / JavaScript"



Enter the code above then Save.

Read more »