Membuat Footer 3 Kolom

Setelah lama nggak posting, karena masih sekolah sibuk, banyak pekerjaan rumah dsb, nah sekarang saya mau kasih Tutorial Blog lagi yaitu cara Membuat Footer menjadi 3 Kolom .

Apakah kalian sudah tahu yang namanya Footer?? Itu loh,,, yang ada dibawah posting blog seperti Kategori Follower, dsb... terkadang ada template yang sudah memiliki footer dan ada juga yang tidak, seperti yang ada pada template saya. Awalnya template ini tidak ada namun saya buat footernya menjadi 3 kolom. Dengan membuat footer menjadi 3 kolom, itu memungkinkan kita untuk menaruh widget lebih banyak dan lebih efisien.

Berikut ini cara Membuat Footer3 Kolom :

1. Login Blogger
2. Pilih Rancangan
3. Pilih Edit HTML ( backup template blog anda terlebih dahulu barangkali terjadi kesalahan )
4. Cari Kode ]]></b:skin>
5. Copy kode di bawab ini di atas kode ]]></b:skin>



#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}



6. Cari kode <b:section class='footer' id='footer'>  lalu ganti dengan kode dibawah ini.


<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
</div>

7. Save Template
8. Pilih Rancangan dan lihat hasilnya akan seperti ini:

Pasang Tombol Reply Komentar di Blogger / Blogspot

Bila dibandingkan dengan blog berplatform Blogger/Blogspot, salah satu kelebihan blog berplatform WordPress adalah kemudahan berinteraksi antar sesama pengunjung yang berkomentar pada sebuah artikel, yaitu dengan menggunakan tombol “Reply”, untuk mengomentari atau membalas komentar yang disampaikan oleh pengunjung lainnya.
Tapi blog berplatform Blogger/Blogspot pun sebenarnya bisa juga menampilkan tombol Reply tersebut, yaitu dengan sedikit penambahan kode tertentu pada template blog seperti yang disampaikan berikut ini.

*

Cara Menampilkan Tombol Reply di Blogger/Blogspot

• Login ke Dashboard Blogger, klik Design, lalu klik tab Edit HTML, klik Expand Widget Template, kemudian cari teks <data:commentPostedByMsg/>.
• Di bawah teks tersebut, masukkan kode berikut ini:

  <span><a expr:href='&quot;https://www.blogger.com/comment.g?blogID=NOMOR-BLOG-ID-ANDA&amp;postID=&quot; + data:post.id + &quot;&amp;isPopup=true&amp;postBody=%40%3C%61%20%68%72%65%66%3D%22%23&quot; + data:comment.anchorName + &quot;%22%3E&quot; + data:comment.author + &quot;%3C%2F%61%3E%3A%20#form&quot;' onclick='javascript:window.open(this.href, &quot;bloggerPopup&quot;, &quot;toolbar=0,location=0,statusbar=1,menubar=0,scrollbars=yes,width=450,height=450&quot;); return false;' style='padding:0px 5px; border:1px solid #999;'>Reply</a></span>

• Ganti tulisan NOMOR-BLOG-ID-ANDA dengan kode nomor Blog ID anda. Cara mengetahui nomor Blog ID: Buatlah sebuah post/artikel baru di Blogger, maka pada address bar di browser akan terlihat nomor Blog ID anda. Silahkan copy nomor Blog ID dari address bar browser tersebut dan paste ke dalam kode di atas.
  
• Bila diinginkan, silahkan edit juga kode style (tampilan) tombol Reply tersebut.

*

Hasilnya, tombol “Reply” akan terlihat pada setiap komentar. Dan, komentar reply tersebut sudah disertai link yang merujuk ke author komentar sebelumnya yang di-reply.

Memang sih, komentar Reply di Blogger ini nggak sepenuhnya bisa tampil seperti WordPress dengan bentuk threaded comment (komentar berjenjang) . Tapi lumayan kan supaya kolom komentar jadi terlihat lebih hidup dan interaktif.
Untuk melihat dan mencobanya, silahkan buka demonya di sini.

Pasang Tombol Twitter, Facebook Share dan Facebook Like (3-in-1)

Saat ini situs-situs jejaring sosial terutama Facebook dan Twitter merupakan jenis situs online yang paling banyak diakses oleh pengguna internet di seluruh dunia, dengan salah satu layanan yang banyak digunakan adalah kemudahan bagi penggunanya untuk menyebarkan/membagikan aka share artikel online yang ada di berbagai website/blog.
Bagi pemilik atau pengelola website/blog, tentunya hal tersebut menjadi salah satu peluang untuk memperbesar tingkat kunjungan ke situsnya melalui Facebook dan Twitter ini, dengan memberikan kemudahan bagi pengunjung untuk share artikel yang ada di blog, salah satunya adalah dengan memasang tombol share Facebook dan Twitter.

Sebelumnya pernah disampaikan secara terpisah cara memasang tombol share Twitter dan Facebook, dan juga tombol Facebook Like. Kali ini masih soal cara memasang tombol Facebook dan Twitter, tapi sedikit berbeda dari cara sebelumnya itu. Pemasangan tombol share kali ini menggunakan layanan dari LinksAlpha, yang menyediakan tombol share yang menggabungkan ketiga tombol tersebut (Facebook Share, Facebook Like, dan Share Twitter) untuk ditampilkan menjadi satu baris saja, sehingga terlihat lebih simpel, kompak dan lebih rapi.

* Sebenarnya, tombol bernama “1-Click Retweet/Share/Like” yang disediakan oleh LinksAlpha ini bisa anda pasang dengan menggunakan kode yang diberikan di situs tersebut. Tapi sayangnya, kode tombol yang disediakan hanya untuk halaman / URL statis saja (Website), jadi tidak bisa tampil secara otomatis membaca URL/alamat setiap artikel blog. Kecuali anda install plugin untuk blog WordPress (self-hosted), atau blog TypePad.
Untuk platform blog/situs lainnya, tenang saja, bisa diakali kok. Berikut ini cara pemasangannya.

*

1. Pasang di template Blogspot/Blogger

Silahkan login, masuk ke tab Design/Layout, lalu klik Edit Template, centang pilihan Expand Widget Templates. Cari kode <data:post.body/> di template anda, lalu di atas/di bawahnya pasang kode ini:

<b:if cond='data:blog.pageType != &quot;index&quot;'>
 <b:if cond='data:blog.pageType != &quot;archive&quot;'>
 <iframe id='websites_iframe' expr:src='&quot;http://www.linksalpha.com/social?link=&quot; + data:post.url + &quot;&quot;' frameborder='0' height='25px' scrolling='no' width='320px'/>
 </b:if>
</b:if>

Demo: lihat di sini.

*

2. Pasang di template WordPress.ORG (self hosted)

Anda bisa install plugin ini, atau bila anda seperti saya yang tidak suka install terlalu banyak plugins (karena semakin banyak plugins, semakin berat beban server hosting), silahkan pasang kode berikut ini. Silahkan login, masuk ke Appearance, lalu klik Editor (Themes editor). Silahkan buka template Single Post (single.php) atau Page Template (page.php). Carilah kode <?php the_content(); ?>, lalu di atas/di bawahnya tambahkan kode ini:

<iframe id="websites_iframe" src="http://www.linksalpha.com/social?link=<?php the_permalink() ?>" scrolling="no" frameborder="0" height="25px" width="320px"></iframe>

Demo: lihat di sini.

*

3. Pasang di Sidebar/Widget/Webpage (javascript)

Ini adalah kode generik untuk semua website (tentunya yang membolehkan pemasangan kode javascript) tanpa perlu edit template/theme, seperti pada demo pemasangan di artikel ini.

<script type="text/javascript">
document.write('<ifr'+'ame id="websites_iframe" src="http://www.linksalpha.com/social?link=' + escape(location.href) + '" scrolling="no" frameborder="0" height="25px" width="320px"></ifr'+'ame>');
</script>

*

Untuk blog WordPress.COM (atau blog lainnya yang tidak mendukung pemasangan kode script atau pun iframe, alternatifnya bisa menggunakan layanan dari situs GetSocialLive (klik di sini). Tapi terpaksa pasang tombol satu-satu di setiap artikel , UPDATE: sudah disediakan secara build-in, silahkan login ke dashboard, masuk ke bagian Setting, lalu ke bagian Sharing.
Demo: lihat di sini.

Membuat Related Post di blogspot

Related Post atau post yang berkaitan atau artikel terkait di gunakan untuk memudahkan pembaca di blog kita menemukan artikel yang mungkin sama dengan artikel yang sedang di bacanya. Related Post yang berbentuk link-link ini biasa di letakan bawah kotak komentar.

Untuk membuat Related Post dibutuhkan beberapa langkah berikut:

Langkah Pertama

1. Log in --> Click Layouts --> Click EDIT HTML dan cari kode di ini </head>

2. Copy kode di bawah ini dan letakan di atas kode </head>

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>

3. Save Template

Langkah Kedua

1. Klik Edit HTML lagi dan beri centang pada Expand Widget Template.

2. Cari kode di bawah ini

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
</b:loop>
</b:if>

3. Masukan kode merah diantara kode-kode di atas. Lihat di bawah ini.

<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

4. Save Template

Langkah ketiga

1. Di dashboard menu --> Klik Layouts --> Add A Gadget dan pilih HTML/Javascript

2. Copy kode di bawah ini dan masukan di kotak yang tersedia

<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>

3. Beri Judul, misalnya Related Post atau Post yang berkaitan atau sejenisnya.

4. Jangan lupa Simpan

Langkah ke empat

Untuk tidak membuat Related Post muncul di halaman utama dari blog tapi muncul di halaman postingan atau single page, kita harus menambahkan beberapa kode.

1. Cari kode di bawah ini. Fokus saja pada tulisan Related Post atau Post yang berkaitan (tergantung dari judul yang kalian buat di step 3 pada langkah ke 3)

<b:widget id='HTML13' locked='false' title='related post' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

2. Kode merah diatas adalah kode yang harus di tambahkan.

3. Save template dan Sekarang lihat hasilnya. Klik disini untuk melihat contohnya.

Thanks To Kang O-OM for information

Cara Mengganti Icon Pada Address Bar Blog / Favicon

Jika kita membuka suatu website atau blog maka seringkali kita menjumpai ada sebuah gambar atau icon pada address bar (kotak untuk mengetikkan alamat web). Dan jika kita punya blog di Blogspot maka icon default yang akan tampil adalah gambar seperti ini :
Bagi kamu yang tidak puas dengan icon/gambar tersebut, kamu bisa menggantinya dengan gambar sesuai dengan keinginanmu. caranya sangat mudah, yaitu dengan membuat gambar (gif, jpg, ico, dan lain2) dengan ukuran kira2 24x42 pixel sampai 32x32 pixel (sebenarnya ukurannya bebas sih, tapi biar filenya kecil dan proses membukanya cepat). Setelah itu .....
masuk ke "Layout --> Edit HTML" trus tempatkan script berikut sebelum kode </head>

<link href='http://img87.imageshack.us/img87/5862/image1an1.gif' rel='SHORTCUT ICON'/>

ganti huruf yang dicetak tebal dengan lokasi gambar dimana kamu menyimpannya. Kamu bisa menyimpan gambarmu di 000webhost atau bisa juga di photobucket dan juga di imageshack atau kalo kamu tidak mau pusing dibawah ini ada beberapa contoh icon/gambar beserta dengan linknya.

Berikut Beberapa Contah Gambar :
http://img87.imageshack.us/img87/5862/image1an1.gif
http://img110.imageshack.us/img110/6218/image2ie0.gif
http://img98.imageshack.us/img98/9617/image3cr0.gif
http://img134.imageshack.us/img134/633/image4hx4.gif
http://img139.imageshack.us/img139/83/image5oa7.gif
http://img509.imageshack.us/img509/6449/image6fu0.gif
http://img527.imageshack.us/img527/6543/image7go9.gif
http://img507.imageshack.us/img507/5774/image8wn8.gif
http://img150.imageshack.us/img150/5784/image9qo1.gif
http://img412.imageshack.us/img412/3808/image11pc0.gif
http://img100.imageshack.us/img100/4658/image12du2.gif
http://img132.imageshack.us/img132/4733/image13lj1.gif
http://img145.imageshack.us/img145/7793/image14zg9.gif
http://img412.imageshack.us/img412/4403/image15jc7.gif
http://img264.imageshack.us/img264/7575/image16kn8.gif

Selamat Mencoba....

Membuat Salam Pembuka Pada Blog

Bagi anda blogger pemula yang ingin membuat salam pembuka pada blog.
Langsung saja kita kupas Trik Blogger cara membuat salam pembuka pada blog.
Berikut caranya:
Anda harus login ke Blogger kemudian klik Rancangan klik Elemen Laman klik Tambah Gadget klik HTML/JavaScript lalu copy kode script berikut dan paste kedalamnya

<script type='text/javascript'>
var name = prompt("Welcome!! Nama anda siapa", "Nama Anda");
alert("Salam Kenal Ya "+name)
alert("Selamat Browsing ")
</script>

Keterangan : Text yang berwarna biru bisa anda ganti dengan text yang anda inginkan
Jika sudah Simpan dan lihat hasilnya

Selamat mencoba

Hacking Alexa Rank Secara Cepat Tanpa Software

Sebenarnya ini trik sudah lama, tapi berhubung teman2 banyak yang request, jadi sekalian saja saya post disini. Untuk bisa menjalankan trik ini pastikan widget alexa sudah terpasang diblog kalian. Dijamin setelah kalian menggunakan cara ini alexa web/blog sobat akan cepat langsing. Trik ini hanya menggunakan proxy yang ada dalam script, asalkan sobat teratur menjalankan trik ini mungkin alexa rank sobat akan cepat langsing. Lalu bagaimana caranya???? coba simak hati-hati....

Metode ini hanya menggunakan script! untuk menjalankan sbb:
1. Pastinya alexa widget sudah terpasang dengan baik pada blog kalian.
2. Buka script dari link ini http://doorwaypage.com/C527-139.php atau klik disini pada browser kalian
3. Isi url dengan alamat web/blog kalian mis: http://seputarcom.blogspot.com
4. Isi nama setiap selesai sesi, pakai nama terserah
5. Wait for notify from server: centang
6. Unique Proxy Servers List (silahkan gunakan list proxy server yang ada bahkan kalian bisa menggunakan beberapa list ini secara bersamaan tanpa harus menunggu proses yang lain selesai)
7. Ketik beberapa User per hours mis: 1000 maksudnya yang masuk ke blog kalian ada 1000 orang perjam (terserah aja, yang penting jangan terlalu banyak)
8. Ketik juga Max Users mis: 3000 (terserah lagi)
9. Terakhir klik Generate usersr, maka jendela/tab baru akan terbuka. prosespun dimulai
10. Gunakan script ini selama 1-2 jam perhari dan lihat hasilnya seminggu.
11 Jangan Lupa untuk setting browser seperti ini:


catatan: Ijinkan Pop up untuk situs http://doorwaypage.com/C527-139.php (pilih pengecualian blokir jendela pop up, dan masukkan url situsnya kemudian izinkan deh)
selesai, Tunggu saja. semoga tips ini berguna, segala hal yang terjadi saya tidak tanggung...

Membuat Shoutbox Jadi AutoHide

Mungkin sobat bertanya-tanya, gimana bisa membuat Shoutbox yang bisa di AutoHide alias tersembunyi secara otomatis???. Setelah saya walking-walking , akhirnya ane temuin juga ntu kode buat shoutbox yang bisa di AutoHide. Sebenarnya cara ini sudah lama untuk para blogger kelas nila kakap. Namun bagi para newbie seperti saya?? Itu hal yang baru. Selain lebih cepat saat proses loading, ini juga bisa menghemat layout blog sobat yang lumayan sempit. Selain itu juga bisa mempercantik blog sobat yang lebih menyukai blog dari segi kemewahan / elegannya. to the point, langsung aja berhubung kode script cukup banyak mendingan sobat download dulu kodenya disini
Yang pasti sobat harus uda punya kode shoutbox-nya,, kalau udah buka tu file yang uda di download. Trus cari kalimat “PASTE KODE HTML SHOUTBOX SOBAT DISINI” pada hasil download-an tadi, lebih cepatnya pake ctrl+F untuk mencari kalimat tsb pastekan kode shoutbox sobat pada kalimat di atas. Setelah jadi copy semua kode script tadi ke widget HTML/ java script pada blog kalian tentunya. Save dan jika berhasil akan tampil seperti gambar disamping.

Selamat mencoba......!!!! ?

Tips Meningkatkan Alexa Traffic

Bagi para sobat SeputarCom yang memiliki blog mungkit sudah tidak asing lagi dengan Alexa. ya Alexa adalah pemeringkat yang menggunakan banyaknya traffic diblog kita. semakin banyak traffic yang kita hasilkan maka angka traffic rank alexa kita semakin kecil. semakin kecil angka peringkat alexa kita, berarti semakin bagus suatu situs atau blog dimata Alexa. cukup ceritanya, berikut ada tips meningkatkan alexa traffic:
1. Pasang Alexa widget di blog kalian
Kode alexa widget bisa didapatkan dari situsnya alexa.com, tulis nama blog kalian lalu klik "build widget" trus pilih layout yang kalian mau, copy kodenya paste-kan di widget HTML/Java script blog kalian.
2. Pasang alexa toolbar untuk browser mozilla firefox bisa dipasang dengan menambahkan addons "Sparky". addons bisa didownload disini.
dengan memasang alexa toolbar pada browser kalian, setiap kalian membuka blog kalian maka kredit poin untuk blog kalian akan bertambah, dengan alexa toolbar juga dapat langsung melihat ranking alexa pada setiap situs yang kalian kunjungi.
3. Buat artikel ttentang alexa
adanya artiket tentang alexa traffic rank diblog kamu selain dapat memberikan informasi pada pengunjung situs juga dapat menambah kredit poin dari alexa dan alexa akan berbaik hati dengan meningkatkan traffic blog kita.
dan tentunya dengan artikel yang berkualitas dan bukan hasil dari copy paste.
4. submit artikel kalian ke situs-situs social bookmarking
jadkan situs-situs social bookmarking seperti digg atau mister wong sebagaitempat backlink situs kalian, simpan juga tulisan kalian pada link favorite technorati.

ada baiknya sebelum menggunakan tips di atas coba catat baik-baik traffic rank blog kalian masing-masing, dan bandingkan setelah menggunakan tips diatas.
selamat mencoba,,,, pasti bisa!!  

Cara Menghilangkan Navbar di Blogdetik

Kali ini saya akan jelaskan hilangin navbar Blogdetik.
1. Login ke Blogdetik.com
2. Pilih Appearance kemudian klik Widget.
3. Tambahkan Text (atau sisipkan di widget Text yang sudah ada)
4. Masukkan (copy-paste) kode berikut:

<style type='text/css'>
#wp-admin-bar {display:none;}
</style>
<style type='text/css'>
#wp-admin-bar-right {display:none;}
</style>

5. Simpan (save changes) jika sudah selesai.
6. Lihat blog anda, refresh