Ivan Bachtiar: blogger

Home » Semua post berkategori blogger

Tampilkan postingan dengan label blogger. Tampilkan semua postingan

Cara Agar Postingan Blog Langsung Terkirim Ke Panpage Facebook

Sudah punya facebook ? Siapa sih yang tidak mengenal facebook. Facebook adalah jejaring sosial yang mayoritas penggunanya berasal dari negara kita tercinta ini Indonesia. Anda sudah punya akun facebook bukan ?? Tidak di pungkiri memang jejaring sosial yang satu ini banyak penggemarnya, selain mengasyikan juga membuat kita berselancar di dunia maya yang menyenangkan serta dapat bertukar informasi dengan teman-teman seakan kita sedang berkumpul langsung di satu tempat karena kita tidak terasa kalau kita sebenarnya memilki jarak yang jauh. Tapi kalau pertanyaannya apakah anda sudah punya blog ? Dan apakah postingan dari blog yang baru saja update dari blog anda bisa terkirim otomatis ke akun facebook anda? jawabannya Ya, bagi master blogger mungkin sudah tidak asing lagi
dengan yang satu ini yaitu cara agar postingan dari blog kita langsung terkirim otomatis ke facebook atau Postingan Otomatis Terkirim Ke Facebook Fan Page tanpa harus cape copy paste link judul postingan ke status facebook kita.
Cara agar Postingan Otomatis Terkirim Ke Facebook Fan Page yang pertama adalah anda harus punya facebook fan page, dan yang kedua adalah gunakan aplikasi dari pihak ketiga untuk mempublikasikan postingan blog ke facebook seperti aplikasi situs RSS Graffiti.

Silahkan simak tutorial cara membuat facebook fan page di bawah ini !

Login ke akun facebook anda masing-masing,,
Silahkan kunjungi www.facebook.com/pages/create.php,,,(saya sarankan untuk membukanya di tab baru) kemudian klik gambar Merek atau Produk

Isikan Pilih Kategori dengan cara mengklik menu dropdown disampingnya, anda pilih Situs Web
Isikan Kotak Keterangan di bawahnya sesuka anda mengenai fan page yang akan anda buat, seperti Berbagi Aneka Ragam Informasi dll,,, catatan: bila anda isi dengan misalnya Berbagi Aneka Ragam Informasi maka halaman fan page anda akan seperti ini link pagenya http://www.facebook.com/VanDePenter
Centang keterangan Saya Menyetujui Ketentuan Halaman Facebook
Klik tombol Mulai.

Sesudah anda klik Mulai maka anda akan di bawa ke tampilan seperti gambar di bawah ini,

Anda dapat mengubah foto profil fan page dari komputer ataupun anda boleh lewati, saya anggap dalam tahap ini anda pasti bisa karena tahap-tahap seperti ini sudah tidak asing lagi bagi anda yang sudah sering berinternet ria di facebook, dalam tahapan ini saya akan pilih lewati,

Isikan keterangan tambahan di Kotak Sertakan Informasi sesuka anda
Masukan alamat blog anda yang akan anda hubungkan dengan fan page yang sedang anda buat ini, ex : http://ivhants.blogspot.com/ pada Kotak Tambah Situs Web Lain
Klik Simpan Info,dan tahap terakhir adalah
Klik Atur Alamat

Selesai ,,,

Sebelum anda mengundang teman-teman anda untuk menyukai halaman fan page anda. Anda klik suka fan page anda sendiri terlebih dahulu karena saat orang lain mengunjungi halaman fan page anda mereka akan melihat bahwa setidaknya sudah ada satu orang yang pernah berkunjung atau menyukai fan page anda.

Undang teman-teman anda karena semakin banyak orang yang terhubung dengan halaman fan page anda maka akan semakin aktif dan menarik pula halaman fan page anda.

Untuk mengundang teman-teman agar menyukai fan page anda klik Kembangkan Pemirsa >> Undang Teman >> Cari Semua Teman >> Tandai satu-satu teman anda >> Kirim

Semoga berhasil, jika ada yang ingin ditanyakan silahkan komen, jika saya sempat pasti saya akan balas, terimakasih

HTML5 Web Socket

Membahas HTML5 terkesan hambar jika tidak membahas Teknologi yang melekat dengannya, yaitu WebSocket.
Menurut Wiki, WebSocket adalah Teknologi yang menyediakan kanal komunikasi bi-directional, full-duplex melalui socket Transmission Control Protocol (TCP), dan dirancang untuk diimplementasikan di web browser serta web server, dan tidak terlepas kemungkinan untuk dimanfaatkan oleh aplikasi native client-server.
SEJARAH
Membuat aplikasi web yang membutuhkan komunikasi bi-directional antara client dan server (mis. Instant Messaging dan aplikasi game) membutuhkan resource yang besar bagi protokol HTTP.
Hal tersebut menimbulkan permasalahan sebagai berikut:

Server dipaksa untuk menggunakan sejumlah koneksi TCP ke setiap client, satu untuk mengirim informasi ke client dan satunya lagi untuk pesan yang akan datang.
Protokol dengan media kabel memiliki potensi overhead yang tinggi, karena masing-masing pesan client-server memiliki HTTP-Header.
Script di sisi client dipaksa untuk mempertahankan proses mapping dari koneksi yang dikeluarkan ke koneksi yang datang untuk melacak balasan.

KEUNGGULAN
Dengan permasalahan di atas, solusi terbaik adalah dengan menggunakan koneksi single-TCP untuk melayani lalu-lintas dua arah.
HTML5 Web Socket dapat mengurangi secara signifikan gangguan pada lalu lintas jaringan. HTML5 Web Socket juga dapat diimplementasikan dengan proxy dan firewall, memungkinkan streaming untuk berjalan di koneksi apapun., dan dengan kemampuan untuk melayanani komunikasi upstream dan downstream dengan satu koneksi, aplikasi yang menggunakan HTML5 Web Socket dapat mengurangi beban pada server yang berimplikasi dengan kemampuan server untuk melayani lebih banyak lagi koneksi konkuren. Gambar di bawah ini menunjukan arsitektur WebSocket dimana Browser menggunakan sebuah koneksi WebSocket untuk full-duplex, terhubung langsung dengan remote hosts.
HTML5 Web Socket

Apakah browser Anda sudah mendukung WebSocket?
Ketikkan javascript berikut di halaman HTML Anda untuk melihat apakah browser yang Anda gunakan sudah mendukung WebSocket.

if (window.WebSocket) {
  alert("WebSockets is supported in your browser.");
} else {
  alert("WebSockets is NOT supported in your browser.");
}

atau

if ("WebSocket" in window) {
    var ws = new WebSocket("ws://echo.websockets.org/");
    ws.onopen = function() {
        console.log("WebSockets connection opened");
        ws.send("a test message");
    }
    ws.onmessage = function(e) {
        console.log("Got WebSockets message: " + e.data);
    }
    ws.onclose = function() {
        console.log("WebSockets connection closed");
    }
} else {
    alert("No WebSockets support");
}

Server Websocket
NodeJS

NodeJS adalah framework Javascript yang mengimplementasikan multiple WebSocket Servers, dengan menggunakan server-side JavaScript dengan model asynchronous event-driven. Hal tersebut memungkinkan Node.js memiliki performance terbaik untuk mendukung arsitektur di semua aplikasi internet.
Felix Geisendörfer menjelaskan dengan sederhana apa itu NodeJS:

Sebuah command line tool. Anda mengunduh tarball, melakukan proses compile dan install.
Berkerja pada program Javascript dengan mengetikkan ‘node my_app.js’ di Terminal Anda.
JS dieksekusi oleh V8 javascript engine (mesin yang membuat Google Chrome berkerja cepat).
Node menyediakan sebuah JavaScript API untuk mengakses Network dan File System.

Selain Node.js, ada beberapa pilihan Server WebSocket, antara lain:

jWebSocket (Java)
web socket Ruby (Ruby)
Socket IO-Node (NodeJS)
WebSocket-Node (Pure JS client & server implementation of the lastest draft-10)
Kaazing WebSocket Gateway (Java-based WebSocket Gateway)
mod_pyWebSocket (Python-based extension for the Apache HTTP Server)
Netty (Java network framework which includes WebSocket support)
wsproxy (WebSockets to generic TCP socket proxy)
websocket (Python)
websockify (Python, C, Node.js)
txWebSocket (Python/Twisted, hixie-76 handshake)
[plack socketio middleware] (Perl Rack/WSGI-like middleware)

Anda dapat menemukan contoh-contoh script untuk mengimplementasikan NodeJs ataupun framework lainnya yang mendukung WebSocket, bahkan Anda bisa memulainya dengan Native Script dari Websocket.org

Demikian tulisan singkat ini sebagai pendahuluan WebSocket, berharap akan ada tulisan berikutnya mengenai implementasi NodeJS dengan contoh yang sederhana.
Selamat malam temans.
Referensi:

Gambar:

Ilustrasi arsitektur dasar WebSocket => http://websocket.org/
Logo NodeJS => http://nodejs.org/

Membuat Related Post Dengan Fungsi Scrol

Pada kesempatan ini saya akan menulis sebuah artikel tentang cara membuat Related Post dengan Fungsi scrol.. kita ketahui bahwa jika postingan kita sudah terlalu banyak. maka jika hanya menggunakan related bisa.. pasti urutanya akan panjang kebawah.. dan tentunya membuat capekkk.. hehe

Langkah-langkah membuatnya:

1.Masuk ke:

Untuk Dashboard Baru Masuk : Blogger » Edit HTML » Centang Expand Widget
Untuk Dashboard Lama Masuk : Blogger » Rancangan » Edit HTML » Centang Expand Widget

2.Cari kode <p><data:post.body/></p> atau <data:post.body/>

3.Jika kamu sudah memasang ReadMore biasanya akan terdapat 2 kode<p><data:post.body/></p> atau <data:post.body/> pilih kode yang ke 2 dan pastekan dibawah ini tepat dibawah kode tadi

<b:if cond='data:blog.pageType == "item"'><H2>Related Post:</H2>
<div class='bitrelatedpost'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='bitxp'/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 50;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('bitxp').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>

4.Cari kode ]]></b:skin> lalu pastekan kode dibawah ini tepat diatas kode tersebut

.bitrelatedpost{border: 1px solid #CCCCCC;background-color: #FFF;-moz-border-radius:2px; -webkit-border-radius:2px; margin:4px;}

5.Yang terakhir jangan lupa di Simpan

Membuat Related Post Dengan Thumblain

Sebelumnya saya udah nge share cara buat related post tapi itu sih yang masih biasa... dan sekarang saya akan coba nge share Related Post dengan Thumbnail.. bedanya tuh yang ini ada gambarnya aja sih.. tapi kegunaan masih sama kok. tapi jika di antara sobat blogger ada yang mau pakai ini dia caranya. :

Pastikan postingan blog anda sudah dikelompokan berdasarkan label karena related post/postingan terkait ini muncul berdasarkan label yang anda buat.
Masuk ke blogger.com
Masuk ke menu Design - Edit HTML
Checklist Expand Widget Templates
Cari kode </HEAD>
Kemudian tempatkan kode berikut tepat di bawah kode tadi :

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}

#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}

#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4BKOBCTtFwwSqJ6FzhfkPBdwfctQVhK8OmJTMrn7ddQiLIdd81O6CuJCMUqrPyOf5naB8T8-qe36GjeymgvLChczL6GN5Lgu8vWLa5F2r1getr-LbfppXSmU-KraUMaTnEFVrrWdChW0/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
</b:if>

Note :

var maxresults=5; angka 5 adalah jumlah related post yang ditampilkan
var relatedpoststitle="Related Posts" Sobat bisa mengganti related post dengan kata-kata Sobat sendiri
vardefaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4BKOBCTtFwwSqJ6FzhfkPBdwfctQVhK8OmJTMrn7ddQiLIdd81O6CuJCMUqrPyOf5naB8T8-qe36GjeymgvLChczL6GN5Lgu8vWLa5F2r1getr-LbfppXSmU-KraUMaTnEFVrrWdChW0/s400/noimage.png"; adalah gambar thumnail jika pada postingan Sobat tidak ada gambarnya, Sobat bisa mengganti dengan gambar Sobat sendiri.

4. Kemudian cari kode ini :
<div class='post-footer-line post-footer-line-1'>

atau ini (mana saja yang dapat):
<p class='post-footer-line post-footer-line-1'>

Kopikan kode ini tepat dibawahnya (salah satu diatas mana yamg ketemu):

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" data:label.name "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger gadgets</a>
</b:if></b:if>

proses selsai, selamat mencoba yah dan semoga berhasil

Membuat Related Post

Ok teman, kali ini saya akan membuat artikel yang judulnya sih, "Artikel berhubungan" kalo lebih terkenalnya dengan related post.. ya meskipun saya tau juga sih.. dan banyak banget yang nulis artikel kayak gitu.. ya tapi saya akan coba juga deh nulis artikel kayak gitu.. kali-kali ajah berguna banget buat agan2 semuanya.. hehehe
ok berikut adalah langkah-langkah yang bisa agan-agan lakuin :

Pastikan postingan blog anda sudah dikelompokan berdasarkan labelkarena related post/postingan terkait ini muncul berdasarkan label yang anda buat.
Masuk ke blogger.com
Masuk ke menu Design - Edit HTML
Checklist Expand Widget Templates
Cari kode <data:post.body/> </b:if></p>
Kemudian tempatkan kode berikut tepat di bawah kode tadi :

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>

<div class='widget-content'>
<h3>Related Post</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;

function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;

for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
a.href = alturl;

if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('data2007').appendChild(div1);
}
}
}
function search10(query, label) {

var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
}

var labelArray = new Array();
var numLabel = 0;

<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = "<data:label.name/>";

var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>

</div>
</b:if>

Ivan Bachtiar

Iklan

Cara Agar Postingan Blog Langsung Terkirim Ke Panpage Facebook

HTML5 Web Socket

Membuat Related Post Dengan Fungsi Scrol

Membuat Related Post Dengan Thumblain

Membuat Related Post

Entri Populer