Data Firmware

Cara Menambahkan Fanspage FB pada Blog

Kali ini saya akan membagikan cara menambahkan fanspage pada blog, bagi kalian yang menginginkan fanspage FB kalian tampil pada blog. memberi FP pada blog sangat bermanfaat bagi yang mempunyai blog sekaligus dapat berkomunikasi sesama pengunjung blog setia anda dan menambah like fanspage tentunya.

Selain itu menambahkan fanspage widget pada blogger juga akan membantu mempromosikannya dan agar blog kalian terlihat lebih dinamis dan responsive memberi kesan blog kalian profesional, hehe.

Oke langsung saja inilah cara menambahkan widget Fanspage facebook pada blog :

1. Buka draft blogger kalian lalu login seperti biasa
2. Lalu klik Tata Letak
3. Tambahkan widget HTML/Javascript
4. Lalu beri nama sesuai keinginan
5. Tambahkan kode dibawah ini pada bagian isi konten

<style type="text/css">
.seocipsfbox {background:#efefef;padding:10px;margin:0 auto;border-radius:3px;overflow:hidden;}
</style>
<div class="seocipsfbox">
<div class="fb-like-box" data-href="https://www.facebook.com/mememetalheadindo" data-rel="nofollow" data-width="280" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>
    </div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/id_ID/sdk.js#xfbml=1&version=v2.5&appId=1439296419615573";
  fjs.parentNode.insertBefore(js, fjs);
}(document, script, facebook-jssdk));</script>

Note : ganti link berwarna merah dengan link fanspage kalian
6. Lalu klik simpan
7. Letakkan atau pindahkan widget tadi sesuai keinginan lalu klik simpan lagi.

Gimana? mudah kan.. demikian cara menambahkan widget fanspage pada blog blogger (blogspot) dengan mudah. Semoga bermanfaat.

Get

Blogger Map widget for showing geotagged blog posts on a map

This post will show you how to add a side-bar widget to your Blogger/Blogspot blog. The map will display pushpins at each of your location-tagged posts locations. Click the pins, and a small card appears with the title, date, and a link to the post.
If youd like the cards/pins to show the full post entries, click here for my other post.

UPDATED June 2015
You can embed the map in a page too, not just as a widget. 

Location-tagged Blogger posts

I like using Blogger, and I always geotag the posts on my travel blog using the "Location" setting in the right-hand side of the Blogger compose page.

Bloggers "Location" tag feature

This adds a nice "Location" line under my posts that displays the address of my blog posts geotag, and clicking it opens a Google Map of that location.

Until today, I thought that was all you could do with this feature, which seemed a bit disappointing. Ideally, I was hoping there was a way to display, on one single map, the locations of all my blog posts. Sort of like how you can visualize all your Foursquare checkins with its KML feed, I wanted to treat my Blogger blog posts as "Check-ins" and see where all Ive been.

It turns out that this is not only possible, but also very easy to do. The technology behind it seems ancient (2008) but I just tested it out (2014) and it works beautifully!

Adding the widget from the original source (easy)

The most simple way is just to follow the directions from this old "Blogger in Draft" post:

1. Go to Bloggers "Layout" editing section
2. Add a new Gadget
3. Add by URL
4. Paste this URL in the box:
    http://blogmap-gadget.googlecode.com/svn/trunk/blogmap.xml
5. Save it and edit the gadget, using your blogs feed URL as the source
   (http://yourblog.blogger.com/feeds/posts/default)

Adding the widget from your own source (optional)

The widget source-code is coming from a very old "Blogger in Draft" post, and you might worry that it could be deleted or lost, especially since this seems to be the only location on the net for it. Ill repost it here, so that you could potentially self-host the file if need-be.

In that case:

1. Copy the code from the box below and save it in a plain text document, giving it the extension .xml
2. Upload the document to a place that allows public full access to the document. Dont paste it into a blog post. It has to be accessible as text. Google Sites sometimes works, as can your Dropbox Public folder, or any other file hosting site that lets you link directly to the file. Google Drive can also do this.  
3. Use this new URL, the location of the file you just uploaded, as the URL when you add the widget via the "Adding by URL" option.

<?xml version="1.0" encoding="UTF-8" ?> <Module> <ModulePrefs title="Blog Map" description="Display blog posts on a map." height="250" author="Brian Ngo" author_email="briancse+blogmap@gmail.com"> <Require feature="dynamic-height" /> <Require feature="setprefs" /> </ModulePrefs> <UserPref name="feedUrl" display_name="Blogs GeoRSS feed URL. Save as empty to reset." /> <UserPref name="height" display_name="Height in pixels" required="true" default_value="250" /> <Content type="html"> <![CDATA[ <style type="text/css"> .inputBox { border-color: #777777 #AAAAAA #AAAAAA #777777; border-style: solid; border-width: 1px; padding: 2px; width: 100%; } .inputBox-hint { border-color: #777777 #AAAAAA #AAAAAA #777777; border-style: solid; border-width: 1px; padding: 2px; width: 96%; color: #999; font-style: italic; } .statusMsg { font-size: small; color: #333; font-style: italic; } .statusMsg-error { font-size: small; color: red; font-weight: bold; } </style> <script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAn138JcpDQexRxBMx-GYAehTZqGWfQErE9pT-IucjscazSdFnjBS4hjjTEOYU89NegWNS5Bv9cZZO8g" type="text/javascript"></script> <div id="instructions" style="display: none; font-size: 14px;"> <p> To display your blog posts on a map, enter your <b>blogs URL</b> below. Alternatively, you can also enter your blogs <b>RSS or Atom feed URL</b>. </p> <input type="text" id="feedUrl" name="feedUrl" class="inputBox-hint" value="Example: http://your-blog-url.blogspot.com" /> <div style="padding: 5px 10px 0 0;"> <input type="button" id="okButton" name="okButton" value="Fetch my blog!" /> </div> <div id="statusMsg" class="statusMsg"></div> </div> <div id="map"></div> <script type="text/javascript"> var PREFS = new gadgets.Prefs(); var MAP = null; var WIDTH = gadgets.window.getViewportDimensions().width; var HEIGHT = PREFS.getInt(height); var FEEDURL = PREFS.getString(feedUrl); var XML = null; var BLOGSPOT_REGEX = new RegExp(blogspot.com/?$); var inputBoxActivated = false; function init() { gadgets.window.adjustHeight(HEIGHT); var container = document.getElementById(map); container.style.height = HEIGHT + px; container.style.width = WIDTH + px; if (!FEEDURL) { document.getElementById(instructions).style.display = ; document.getElementById(feedUrl).onclick = activateInput; document.getElementById(okButton).onclick = validateFeedUrl; } else { fetchFeed(); } } function activateInput() { if (!inputBoxActivated) { document.getElementById(feedUrl).className = inputBox; document.getElementById(feedUrl).value = ; inputBoxActivated = true; } } function validateFeedUrl() { document.getElementById(statusMsg).className = statusMsg; document.getElementById(statusMsg).innerHTML = Validating feed...; var feedUrl = maybeFixUrl(document.getElementById(feedUrl).value); var params = {}; params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.FEED; params[gadgets.io.RequestParameters.NUM_ENTRIES] = 1; params[gadgets.io.RequestParameters.GET_SUMMARIES] = false; gadgets.io.makeRequest(feedUrl, handleValidateFeed, params); } /** * Will attempt to detect a blogspot.com url without the feed suffix * (e.g., http://ginternfoodblog.blogspot.com/). If detected, adds * the feed suffix ("/feeds/posts/default"). Also, adds an http:// * protocol if one isnt present. */ function maybeFixUrl(url) { // trim whitepsace. url = url.replace(/^s*(S*(s+S+)*)s*$/, "$1"); // test blogspot url fix if (BLOGSPOT_REGEX.test(url)) { if (url[url.length - 1] != /) { url += /; } url += feeds/posts/default; } // test http protocol fix if (url.indexOf(http://) != 0) { url = http:// + url; } return url; } function handleValidateFeed(response) { if (response && response.data && response.data.Entry) { var feedUrl = response.data.URL; PREFS.set(feedUrl, feedUrl); FEEDURL = feedUrl; fetchFeed(); } else { document.getElementById(statusMsg).className = statusMsg-error; document.getElementById(statusMsg).innerHTML = Couldn find feed. Is the URL correct?; } } function fetchFeed() { var params = {}; params[gadgets.io.RequestParameters.CONTENT_TYPE] = gadgets.io.ContentType.DOM; params[gadgets.io.RequestParameters.METHOD] = gadgets.io.MethodType.GET; gadgets.io.makeRequest(FEEDURL, handleFetchFeed, params); } function handleFetchFeed(response) { document.getElementById(instructions).style.display = none; var data = response.data; var points = data.getElementsByTagName(georss:point); // We werent able to get any georss:point nodes, this might be a // Webkit browser and just wants "point" as the tag name. if (points.length == 0) { points = data.getElementsByTagName(point); } var geoposts = []; for (var i = 0; i < points.length; i++) { var latlngPair = points[i].firstChild.nodeValue.split( ); var title = points[i].parentNode.getElementsByTagName(title)[0] .firstChild.nodeValue; var date; var link; var pubDate = points[i].parentNode.getElementsByTagName(pubDate); if (pubDate.length > 0) { // This is an RSS feed. var tempDate = new Date(); tempDate.setTime(Date.parse(pubDate[0].firstChild.nodeValue)); date = tempDate.toLocaleDateString(); link = points[i].parentNode.getElementsByTagName(link)[0] .firstChild.nodeValue; } else { // This is an Atom feed. date = points[i].parentNode.getElementsByTagName(updated)[0] .firstChild.nodeValue.substring(0, 10); var links = points[i].parentNode.getElementsByTagName(link); for (var n = 0; n < links.length; n++) { if (links[n].getAttribute(rel) == alternate) { link = links[n].getAttribute(href); break; } } } geoposts.push({ title: title, point: new google.maps.LatLng(latlngPair[0], latlngPair[1]), date: date, link: link }); } createMap(geoposts); } // Doing two loops here... non-ideal.. too tired to optimize. function createMap(geodata) { var bounds = new google.maps.LatLngBounds(); for (var i = 0; i < geodata.length; i++) { bounds.extend(geodata[i].point); } MAP = new google.maps.Map2(document.getElementById(map)); MAP.setCenter(bounds.getCenter(), MAP.getBoundsZoomLevel(bounds)); MAP.addControl(new google.maps.SmallZoomControl()); for (var i = 0; i < geodata.length; i++) { var marker = new google.maps.Marker(geodata[i].point, { title: geodata[i].title }); MAP.addOverlay(marker); var infoHtml = <div style="font-size: small"> + <b> + geodata[i].title + </b> + <div style="color: #666;"> + Posted on + geodata[i].date + </div> + <div style="font-size: small"> + <a href=" + geodata[i].link + " target="_blank"> + View post</a></div> + </div>; marker.bindInfoWindowHtml(infoHtml); } } gadgets.util.registerOnLoadHandler(init); </script> ]]> </Content> </Module>

Blog Map widget in action

Here is a screenshot of this beautiful, underutilized, and probably forgotten feature. The map that is now displayed in your blogs sidebar shows pins at your posts geotagged locations. You can click the pins for a small pop-up dialog that contains a link to the blog post that was tagged at that location.

Blog Map sidebar widget

This relies on your blogs RSS feed, so it might not display your older location-tagged entries. In this case, just add the parameter ?max-results=200 to the end of your blog feed URL. (Note: see my other post for a potentially better blog URL format to ensure all posts are pulled in.)

Embedding the map in a Blogger Page

You dont have to just use this as a side-bar widget. The map can also be embedded on one of your Blogger pages (it works better on a "page" not a "post").

This is very easy. Just create a new Blogger page, switch to HTML editing, and paste this code, changing the URL for your blog:

<iframe frameborder="0" height="250" id="map" name="map" src="//www-blogger-opensocial.googleusercontent.com/gadgets/ifr?url=http://blogmap-gadget.googlecode.com/svn/trunk/blogmap.xml&amp;container=blogger&amp;view=default&amp;lang=en&amp;country=ALL&amp;sanitize=0&amp;v=38841e006da8e2dd&amp;libs=core:dynamic-height:setprefs&amp;parent=http://testofpyojina2.blogspot.com/&amp;up_feedUrl=http://testofpyojina2.blogspot.com/feeds/posts/default&amp;up_height=250&amp;mid=1#up_height=250&amp;up_feedUrl=http://testofpyojina2.blogspot.com/feeds/posts/default&amp;st=e%3DAFlCd0Vr5Ehr8RmECOHLq0S%252F20Y33QUXiflbjKfRMJKtj9KwkD9YS3Uq3Xezr3ffRqOsHwYznsMMLJL1lzdH2mGi20gGUDm6kZZjf5a%252F1QQDC%252B%252B6NPHmoRqokx%252BjvN6pekTyBhptzGC9%26c%3Dblogger&amp;rpctoken=2160341050058157284" style="display: block; width: 100%;"></iframe>

It does not seem to work if your blogs feed is redirected through Feedburner, and the script can sometimes hang if you have too many entries. If anyone has any solution to these issues, let me know in the comments!


If you use Blogger, please add the widget to your Blogger blog, and demonstrate its usefulness to the masses! Id love for this wonderful bit of code to be revived, and for Google to be more active in supporting Blogger. In the crazy world of Google+ checkins and Swarm checkins and Facebook checkins and all the other checkin services, its nice to see location-tags on Blogger still being supported. Its a great way to revisit old memories and see your blog journey in a new way.

Get

Firefox Versi Berikutnya Konten Web Blog Berisi Konten Flash Akan Terblok Secara Default

Dimulai pada bulan Agustus 2016 yang akan datang, browser Mozilla Firefox akan memblokir konten flash yang tak penting bagi pengguna.

Dengan langkah yang telah diambil oleh Firefox ini, Mozilla mengikuti kepemimpinan dari Google, dengan membuat keputusan yang sama pada tahun lalu dan sekarang, rencana itu hampir sepenuhnya terealisasi dengan memblokir konten Flash dalam browser Google Chrome.
Flash, merupakan salah satu teknologi mendasar dari sebuah web karena memungkinkan bagi para pengembang dalam menciptakan pengalaman pengguna bersama dengan browser yang tengaH digunakan.

Namun, flash kini menjadi hal yang kontroversial. Seperti yang dilansir dari laman Tech Crunch, Kamis (21/7/2016), konten flash membuat masalah keamanan, baterai menjadi berkurang dan juga loading halaman yang sangat lambat.

Datang di tahun 2017, Mozilla Firefox yang akan beralih ke model “click-to-play” untuk semua konten yang mengandung flash.

“Perubahan ini menjadi bagian dari upaya kami yang terus berlanjut untuk membuat browsing dengan lebih aman dan lebih cepat tanpa harus merugikan pengguna kami.” ungkap Manajer Firefox Quality Engineering, yang bernama Benjamin Smedberg.

Flash adalah browser independen vektor dan grafis teknologi animasi yang dimiliki oleh Macromedia Inc (sekarang Adobe). Sebagian besar browser mendukung teknologi Flash dan satu animasi flash terlihat sama pada semua browser.  Flash juga berguna untuk memainkan video di sebuah web/blog yang sedang dikunjungi.

Masih dari catatan yang sama, para pengembang web disarankan untuk segera beralih ke teknologi HTML5. Selain lebih aman, teknologi HTML5 juga lebih hemat baterai dan tentunya membuat pengguna dapat menikmati akses internet dengan waktu lebih lama.


references by jatimtech

Get