IT Amateur: Web Service

WEB SERVICE

Web service adalah suatu proses yang terjadi pada web tersebut dengan algoritma tertentu yang memberikan pelayanan terhadap user. pemerograman dari web service ini biasanya berada disisi server. tanpa kita ketahui proses kerjanya, web service sangat membantu user untuk melakukan hal hal tertentu. untuk lebih memahami apa itu web service, saya akan memberi contoh dengan share postingan kita ke jejaring social seperti facebook atau twitter agar pembaca dapat lebih memahami maksud atau makna dari web service.

Langkah - langkah mengimplementasikan salah satu web service ( share button facebook dan twitter ) pada blog

kali ini kita akan membuat share button postingan kita ke facebook dan twitter. langsung saja berikut adalah langkah langkah yang harus diikuti untuk membuat share button seperti gambar diatas pada blogspot.

1. kita dapat menuju ke script css pada template kita, caranya klik menu template lalu pilih edit HTML

2. pertama yang harus anda lakukan adalah mencari keyword ini berada ]]></b:skin> / </style>. dengan cara tekan ctrl+f kemudian masukan keyword berikut

3. setelah menemukan keyword tersebut, anda dapat meletakan script berikut ini tepat diatas keyword </b:skin>

/*Share Button*/.sharebutton{display:block;list-style:none;margin:10px 0;padding:0}.sharebutton a{color:#FFFFFF!important;display:block;text-decoration:none!important}.sharebutton li{float:left;margin-right:5px;}.share{font-weight:bold;margin-right:10px;padding:7px 0}.fb a{background:#306199;padding:7px 15px}.fb a:hover{background:#244872}.linkedin a{background:#007bb6;padding:7px 15px}.linkedin a:hover{background:#005983}.twitter a{background:#26c4f1;padding:7px 15px}.twitter a:hover{background:#0eaad6}.gplus a{background:#e93f2e;padding:7px 15px}.gplus a:hover{background:#ce2616}.pinterest a{background:#b81621;padding:7px 15px}.pinterest a:hover{background:#8a1119}.pinterest{margin-right:0}

4. setelah script css nya selesai, maka kita harus mencari script seperti contoh dibawah ini dengan ctrl+f

<b:includable id='post' var='post'>
<article class='post hentry' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
.....
<data:post.body/>
.....
</article>
</b:includable>

5. Jika sudah ketemu, kita dapat memasukan script untuk facebook dan twitter share buttonnya dan kita sisipkan dibawah keyword <data:post.body/>. berikut adalah script dari share buttonnya

<ul class='sharebutton'> <li class='share'>Share :</li><li class='fb'><a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=700,resizable=0,top=50,left=100");return false;' target='_blank' title='Share on Facebook'>Facebook</a></li>
<li class='twitter'><a expr:href='"http://twitter.com/share?url=" + data:post.url' onclick='window.open(this.href,"popupwindow","status=0,height=500,width=700,resizable=0,top=50,left=100");return false;' target='_blank' title='Share on Twitter'>Twitter</a></li></ul>

6. Setelah script share buttonnya sudah disisipkan, kita dapat menyimpan templatenya. dan berikut adalah tampilan dari share button tersebut