Info Blogger

Saturday, January 12, 2013

Cara Membuat Tombol like, share Jejaring Sosial di sisi Blog

Tombol like dan tombol share jejaring sosial seperti facebook, twitter, dan sebagainya jangan dianggap remeh, karena tombol-tombol tersebut berfungsi untuk meningkatkan lalu lintas kunjungan ke blog kita. Proses integrasi dengan jejaring sosial tersebut diharapkan optimasi SEO semakin lebih baik.

Pada postingan sebelumnya telah dibahas tentang Cara membuat artikel terkait otomatis di blog, Cara membuat tombol like facebook di blog, dan Cara pasang tombol like dan share social bookmark di Blog. Pada kali ini saya akan memberikan penjelasan tentang Cara Membuat Tombol like, share Jejaring Sosial di sisi Blog. Cara pembuatannya sangat mudah, karena tidak perlu mengedit CSS atau menambahkan kode HTML di template.

Baik langsung saja ke topik permasalahan, ikuti langkah-langkah berikut :

Login ke blogger.com > klik design/rancangan > Tata Letak
Klik Tambah Gadget, di bagian sidebar.
Pilih HTML/Javascript, kemudian masukkan kode scriptnya.
Simpan widget dan preview Blog Anda
Jika sudah sesuai maka klik Publikasikan.

Kode script untuk background terang :

<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>
<div id='pageshare' title="bagikan ke teman anda">
<div class='sbutton' id='gb'>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div>
<br/><div style="clear: both;font-size: 8px;text-align:center;">
<a href="http://bc-pasar.blogspot.com/2013/01/cara-membuat-tombol-like-share-jejaring.html" target="blank"><font color="blue">Cara Membuat<font></font></font></a></div>
</div>

Kode script untuk background gelap :

<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#000000;padding:0 0 2px

0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>
<div id='pageshare' title="Bagikan ke teman anda">
<div class='sbutton' id='gb'>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div>
<br/><div style="clear: both;font-size: 8px;text-align:center;">
<a href="http://bc-pasar.blogspot.com/2013/01/cara-membuat-tombol-like-share-jejaring.html" target="blank"><font color="white">Cara Membuat<font></font></font></a></div>
</div>

Selamat mencoba ya.... dan jangan lupa di like ya artikel ini...
Terimakasih

Selengkapnya → Cara Membuat Tombol like, share Jejaring Sosial di sisi Blog

Cara membuat artikel terkait otomatis di blog

Adanya tambahan artikel terkait di dalam suatu blog tentunya akan memudahkan pengunjung untuk membaca artikel yang saling berhubungan satu dengan yang lainnya. Dengan fitur ini blog akan lebih terlihat profesional

Baik tanpa berpanjang lebar lagi, saya akan mencoba menjelaskan cara membuat postingan atau artikel terkait secara otomatis berdasarkan label yang dibuat. Silahkan ikuti langkah-langkah berikut :

Login ke Blogger.com
Pilih Template > Edit HTML > centang expand template widget
Cari kode <data:post.body/> dengan cara menekan tombol F3 pada keyboard.
Copy paste kan kode script di bawah ini tepat dibawah <data:post.body/>

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

<br/>

<h4>
Artikel Terkait:</h4>
<div id='data2007'/>
<br/><br/>

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>

</script>

</div>
</div>
</b:if>

Jika langkah-langkah di atas sudah dilakukan, kemudian simpan hasil kerja anda, dan lihat hasilnya.

Selamat bereksperimen ya... semoga berhasil...

Selengkapnya → Cara membuat artikel terkait otomatis di blog

Friday, January 11, 2013

Cara membuat tombol like facebook di blog

Tombol like facebook di dalam suatu blog dapat berfungsi sebagai parameter untuk mengetahui tingkat ketertarikan pengunjung terhadap artikel yang dibuat. Pengunjung di sini tentunya mempunyai akun facebook untuk bisa menekan tombol ini.

Ada beberapa pilihan penempatan tombol like facebook, diantaranya tepat dibawah judul postingan, di atas postingan, atau di bawah postingan. Masalah penempatan tombol tersebut tentunya disesuaikan dengan selera masing-masing.

Sebelum saya jelaskan masalah penempatan tombol like facebook ini, terlebih dahulu saya akan memberikan kode script tombol like facebook di bawah ini :

Adapun langkah-langkah untuk memasang tombol ini yaitu :

Login ke blogger.com
Pilih rancangan template > edit HTML > Check list expand template widget
Cari kode <div class='post-header-line-1'/> dengan menekan tombol F3, kemudian letakan kode script tepat di bawahnya. (tombol akan diletakan di bawah judul postingan)
Cari kode <data:post.body/> dengan menekan tombol F3, kemudian letakan kode script tepat di atasnya. (tombol akan diletakan di atas postingan)
Jika ingin meletakan di bawah postingan, letakan kode script tepat di bawah kode <data:post.body/>
Pilih salah satu model penempatan tersebut di atas, kemudian simpan dan lihat hasilnya

Selamat mencoba ya....

Selengkapnya → Cara membuat tombol like facebook di blog

Cara pasang tombol like dan share social bookmark di Blog

Social bookmark button merupakan salah satu Widget yang digunakan para blogger. Dengan memasang tombol share ini, pengunjung atau bahkan blogger sendiri dapat dengan mudah membagi postingan artikel mereka ke situs jejaring sosial seperti Facebook, Twitter, dan lain sebagainya. Selain mempermudah proses sharing dengan adanya social bookmark button akan menghiasi blog anda sehingga lebih terlihat menarik.
Sebenarnya cara memasang social bookmark button tidaklah sulit dan tidak memakan waktu yang lama. Adapun langkah-langkah memasukan kode social bookmark button yaitu

Klik www.addthis.com, untuk mendapatkan kode bookmark
Pilih Style sesuai selera, Copy kode yang ada
Login ke blogger.com, Pilih rancangan template > edit HTML > check list expand template widget.
Cari Kode <data:post.body/> dengan cara menekan tombol F3 pada keyboard.
Copy paste kan kode didapat dari addthis.com tadi tepat diatas kode <data:post.body/>
Kemudian klik Simpan Template (tapi jika ingin melihat hasilnya terlebih dulu, maka klik Pratinjau, jika sudah sesuai maka klik Simpan template)

Selamat mencoba ya...

Selengkapnya → Cara pasang tombol like dan share social bookmark di Blog

Cara membuat kotak text area di blog

Text area merupakan suatu ruang yang digunakan untuk menempatkan text tertentu yang relatif panjang biasanya digunakan sebagai tempat penyimpanan kode-kode HTML/Javascript. Kotak text area juga bisa digunakan untuk menaruh pesan kepada pengunjung blog atau kepada diri sendiri.

Sebagai contoh

Kebanyakan blogger meletakan Text area tersebut di sidebar blog dan di postingan blog. Oleh karenanya saya akan mencoba menjelaskan cara membuat text area di kedua tempat tersebut.

Membuat text area di sidebar blog

Login ke blogger, pilih Tata Letak
Klik Tambah Gadget, lalu pilih HTML/Java Script
Copy dan paste kode di bawah ini :
<div align="center">
<textarea cols="40" name="code" rows="10">Tulisan / Pesan Anda</textarea></div>
Sebelum disimpan anda bisa mengatur ukuran kotak, yaitu dengan merubah angka pada cols untuk lebar kotak dan rows untuk tinggi kotak.
Klik simpan dan lihat hasil akhirnya.

Membuat text are di postingan

Cara membuat text area di postingan blog sangat mudah sekali. Anda cukup memasukan kode yang telah disebutkan tadi atas ke dalam sebuah entri atau postingan dengan Edit HTML. Kemudian klik Pratinjau, jika sudah sesuai harapan, maka klik Publikasikan.

Semoga bermanfaat dan selamat mencoba...

Selengkapnya → Cara membuat kotak text area di blog

Thursday, January 10, 2013

Cara Pasang TV Online di Blog

Memasang TV Online di blog tidaklah sulit, anda cukup melakukan copy paste kode script dari penyedia TV Online tersebut. Salah satu penyedia layanan TV Online yang akan dipasang disini yaitu MIVO TV.
Berbagai macam acara televisi bisa kita lihat di Mivo TV, karena mivo TV tidak hanya menyiarkan saluran mereka sendiri namun juga siaran TV lokal lain seperti RCTI, SCTV, Trans TV, TV one, Trans 7, AnTV, Indosiar dan lain-lain. Bagi yang suka film kartun ada juga spacetoon.

Kode Script MIVO TV

Untuk cara memasangnya sebaiknya anda pasang di postingan blog atau halaman statis. Jangan lupa saat memasukkan kode di atas pastikan klik menu HTML (lihat kiri atas) saat membuat postingan.

Selamat Mencoba ya...

Selengkapnya → Cara Pasang TV Online di Blog

Cara membuat daftar isi / index di halaman atau postingan blog

Adanya daftar isi atau index dalam suatu blog, tentunya akan mempermudah pengunjung dalam melihat secara keseluruhan artikel yang ada. Pengunjung bisa bebas memilih artikel mana yang hendak mereka baca.

Pada kali ini saya akan memberikan 2 cara sederhana untuk membuat daftar isi atau index di entri/postingan atau di suatu halaman blog.

Pertama-tama buatlah entri baru atau halaman kosong, dan beri judul Daftar isi atau Index, kemudian copy code salah satu model daftar isi di bawah ini (Jangan lupa paste-nya di mode HTML).

Model 1
<script src="https://sites.google.com/site/ryukimaruryo/ryuki/aaaaaa.js?attredirects=0&d=1"></script><script src="http://URL-BLOGANDA/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
Model 2
<script src="http://script-bamz-us.googlecode.com/files/blogtocftp.js"></script><script src="http://URL-BLOGANDA/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>

Jika sudah selesai, silahkan simpan, tapi jangan lupa pula untuk menganti http://URL-BLOGANDA dengan url anda

Selengkapnya → Cara membuat daftar isi / index di halaman atau postingan blog

Menu

Saturday, January 12, 2013

Friday, January 11, 2013

Thursday, January 10, 2013