Cara Membuat Recent Comment Berbagai Variasi (Feed/Javascript)

Sejauh ini, ada dua macam fungsi recent comment yang kutahu, disamping fasilitas bawaan Blogger tentunya (wah, berarti ada tiga macam ya?)
yup... benar namun kali ini kita akan membahas yang dua aja ya!

Variasi Pertama, yakni menggunakan Feed (Recent Comment via Feed)
Ikuti langkah-langkah berikut :

1. Silahkan Login ke blogger terlebih dahulu.
2. Pilih Rancangan/Layout (bagian Elemen Halaman)
3. Tambah Gadget/Add Page Gadget pada sidebar,
4. Pilih Feed dan masukkan alamat Feed URL isikan Seperti dibawah ini

•  http://NamaBlogSobat.blogspot.com/feeds/comments/default, bisa juga dengan
• http://NamaBlogSobat.blogspot.com/feeds/comments/full

(silahkan ganti  teks warna biru diatas dg alamat blog sing-masing), oke lanjut!!!

5. kemudian pilih Lanjutkan.
sehingga akan tampak seperti gambar berikut:

7. Simpan dan lihat hasilnya.
itu baru cara pertama, yuk.. lanjut ke cara kedua...!!!!

Sementara Variasi kedua, sedikkit beda dengan fariasi pertama tadi yakni dengan menggnakan fungsi Javascript. Tertarik mencoba??? , silahkan copy kode berikut di laman Add Gadget > HTML/Javascript

<div style="background-color:; border: 0px solid rgb(204, 204, 204); height: 200px; overflow: auto; padding: 5px; width: 95%;">

<script style="text/javascript" src="http://www.belajarngeblog.com/script/showrecentcomments.js">

</script><script style="text/javascript">var numcomments = 15;var showcommentdate = true;var showposttitle = true;var numchars = 30;var standardstyling = false;</script> <script src="http://zonablogging.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script>

</div>

dan, inilah penampakan setelah kode diatas kamu masukkan ke elemen HTML/Javascript:

 

Akhirnya selesai juga pembahasan kita kali ini. terserah sobat mau pake yang mana,sekedar info recent comment variasi kedua lebih cepat updatenya dibanding versi pertama..
lebih cepat update disini maksudnya ketika kita memposkan satu komentar maka saat itu juga akan tampak di widgetnya..
begitulah kawan-kawan!

Cara Agar Tampil Judul Saja Ketika Label Diklik

Ketika kita memilih/klik salah satu label pada suatu blog yang mempunyai banyak postingan, seringkali tampilan homepage menjadi amat panjang ke bawah sehingga cape dehh kalo harus scroll lama-lama hanya untuk mencari artikel yang kita inginkan...

Tapi tenang saja kawan, kali ini saya akan share tentang Cara Menampilkan Judul Postingan Saja Ketika Label Diklik agar tampilan homepage blog anda tak lagi memanjang lagi ke bawah.

Baiklah, ayo kita terapkan sama - sama!

• Pertama dan paling utama, login ke akun Blogger anda lalu masuk ke bagian Design/Rancangan kemudian pilih tab HTML/Javascript.

• Beri centeng pada opsi 'Expand Widget Templates' agar kode yg kita cari ada di template anda.

• Langsung saja cari kode  

<b:include data='post' name='post'/> atau <div class='blog-posts feed'/>

• Kemudian Timpa/ganti salah satu kode yg ditemukan seperti diatas dengan kode berikut: 

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'>
<div style='padding:6px 0 6px 5px;border-right:1px solid #000;border-bottom:1px solid #000;margin-bottom:2px;background:#0B3861;color:#F5F6CE;'>
<data:post.title/></div></a>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Penempatan kode HTML

Keterangan :
Teks/amgka yang berwarna merah adalah kode warna untuk background label, sementara teks yang berwarna biru adalah warna teks pada label. Klik di sini untuk mengetahui lebih banyak warna yang tersedia agar sesuai dengan latar blog anda.

• Terakhir, jangan lupa simpan template anda...

Dan hasilnya....

Baiklah kawan, selamat mencoba :))

Tukar Link

Silahkan tempatkan Link di bawah ini ke Blog sobat. Lalu bertitahu saya jika link sudah dipasang lewat komentar di bawah :)


Blogging Asyiiik !!!

<a href="http://zonablogging.blogspot.com" target="_blank"><b>Blogging Asyiiik !!!</b></a>

Saya tunggu kedatangan kawan untuk bertukar link!~

Membuat Reply Comment Pada Kotak Komentar

Kadangkala kita kesulitan membalas komentar yg masuk denganmenyebut namanya secara langsung, apalagi si komentator punya nama sepanjang gerbong kereta Argo Bromo.. :p  hehee ^^

Maka tak ada salahnya kita menerapkan trik sederhana ini. Trik membuat Comment Reply pada Kotak Komentar yang akan memudahkan kita membalas komentar yang masuk. Disamping memudahkan, ternyata  juga bagus buat kita yang memakai browser ponsel karena kolom komentar akan muncul di jendela baru (PopUp) sehingga tidak memberatkan akses loading halaman.

Baiklah, mari kita bikin Reply Commentnya!
Seperti biasa, login dulu ke akun Blogger anda, masuk ke Design > Edit HTML (Expand Widget Templates)
Temukan kode <b:include data='comment' name='commentDeleteIcon'/>  di dalam template anda.

Setelah/di bawah kode warna biru diatas, letakkan kode berikut:

<a expr:href='&quot;https://www.blogger.com/comment.g?blogID=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#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;'><img alt='Reply To This Comment' src='http://img705.imageshack.us/img705/8646/reply05.png'/></a>

Sehingga tampilannya akan seperti:

Keterangan:
BLOG-ID-ANDA : Ganti dengan id blog milik anda, caranya?
Buatlah entri baru/New Post, arahkan kursor ke address bar seperti gambar berikut:

Angka-angka yang berada di dalam persegi warna merah tersebut adalah ID Blog anda.
http://img705.imageshack.us/img705/8646/reply05.png : adalah URL gambar yang akan tampil sebagai pengganti kata [Reply]

Terakhir, jangan lupa menyimpan template anda :))

Panduan Memasang Meta Tag Di Website/Blog

Posisi blog di Search Engine sangatlah penting bagi perkembangan blog itu sendiri, terutama bagi pemilik blog yang menitik beratkan monetize sebagai misi utama membangun suatu blog atau website.

Ngomong-ngomong soal Search Engine, tentu erat sekali kaitannya dengan istilah SEO. SEO adalah salah satu strategi untuk meningkatkan ranking suatu web atau blog di Search Engine dengan menambahkan Meta Tag di setiap halaman blog kita.

Apa itu Meta Tag?
Meta Tag adalah data/informasi yang dimasukkan kedalam area 'head' dalam suatu website. Informasi tersebut berisi pokok dari suatu website yang dapat terhubung secara langsung dengan Seach Engine.
Dengan penerapan Meta Tag, maka kemungkinan blog kita akan lebih cepat terindeks dalam Search Engine sesuai dengan Keyword yang kita pasang di dalam Meta Tag tersebut.

Lantas, caranya bagaimana?
Yuk, kita praktekkan sama-sama!

Login ke akun Blogger anda masing-masing, pilih Design > Edit HTML
Temukan kode <title><data:blog.pageTitle/></title> dengan perintah F3 atau Ctrl+F


Kemudian pastekan kode berikut dibawah kode diatas:

<meta content='DESKRIPSI-BLOG-ANDA' name='description'/>
<meta content='keyword1, keyword2, keyword3, ...' name='keywords'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/> 
<meta content='NAMA-PENULIS' name='author'/>

nb:

• DESKRIPSI-BLOG-ANDA: isi dengan deskripsi blog teman
• keyword1, keyword2, keyword3, ...: ganti kata keyword1, dst dengan keyword yg anda tentukan
• NAMA-PENULIS: nama anda selaku penulis blog 

Jangan lupa simpan template anda :)


Istilah dalam Meta Tag:
Description: di dalamnya, kita diperbolehkan memasukkan ringkasan dari isi/kontent keseluruhan blog kita. Untuk penggunaan karakter, maksimal sampai 250 karakter. Bagusnya sekitar 200 karakter.
Tips: gunakanlah kata-kata yang tepat untuk memudahkan Search Engine dalam mengindeks setiap artikel yang kita posting

Keyword: bisa kita sebut sebagai kata kunci. Keyword ini biasanya diketik seseorang lewat Search Engine untuk mencari informasi yang berhubungan dengan keyword tersebut, sehingga makin bagus dan padat keyword kita makin bagus posisinya di Search Engine.
Untuk pemasanga Keywords ini, usahakan tidak lebih dari 20 kata.

Tips agar Title menjadi SEO Friendly:
masih dalam mode Edit HTML, ganti kode <title><data:blog.pageTitle/></title>
dengan kode di bawah ini:


<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>


Simpan template anda :)


Coba kita teliti kembali apakah dalam blog kita sudah terpasang Meta Tag apa belum. Oya, ini ada Tools bagus untuk menganalisa benar atau tidaknya Meta Tag yang kita pasang dalam blog kita, klik di sini

Selamat mencoba :)

Macam-macam Efek Tulisan Berjalan Dengan Marque

Sobat pasti pernah lihat di suatu situs/blog yang menampilkan kata/tulisan selamat datang atau semacamnya.Kata/tulisan tersebut bisa bergerak dengan arah dan sifat-sifat tertentu.
Dalam bahasa HTML, efek semacam itu kita kenal sebagai efek MARQUE (tulisan berjalan).
Baiklah, mari kita bahas macam-macam efek MARQUE

1. Text berjalan ke arah kiri/kanan/atas/bawah sederhana

Kode HTML yang digunakan:
T<marquee behavior="scroll" direction="right"><marquee behavior="scroll" direction="right">kamu cantik banget sih?</marquee>&htmlup=1;/marquee><br />

Maka hasilnya:
kamu cantik banget sih?

NB:

• Right bisa diganti Left/Up atau Down untuk menentukan arah gerakan dari teks yang akan kita tampilkan
• kamu cantik banget sih? ini hanya contoh saja. ganti dengan teks yang sobat inginkan

2. Text berjalan ke arah kiri/kanan/atas/bawah sederhana disertai gambar

<marquee behavior="scroll"><br /> <img height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKK5S4Z5It44Gnu383mp2VIgknq569XDX-sxMnlq13Vq4yQdd1Z3FJXl6D4CO6Q8k3d66gfgnnJwrLZXir2O_V-tM94QTMvIx54j8SAvAc3M6e0Q_-HgH1SNVNF9yrZuMSX6on9wjE_Jo/s320/stumbleupon_button_Logo.jpg" width="80" /><br /> contoh tulisan dibawah gambar<br /> </marquee>

Maka hasilnya:


contoh tulisan dibawah gambar

NB:

• Angka 50 adalah tinggi gambar
• Angka 80 adalah lebar gambar
• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKK5S4Z5It44Gnu383mp2VIgknq569XDX-sxMnlq13Vq4yQdd1Z3FJXl6D4CO6Q8k3d66gfgnnJwrLZXir2O_V-tM94QTMvIx54j8SAvAc3M6e0Q_-HgH1SNVNF9yrZuMSX6on9wjE_Jo/s320/stumbleupon_button_Logo.jpg bisa diganti dengan URL dimana gambar nanti akan muncul
• contoh tulisan dibawah gambar adalah teks yang akan muncul di bawah gambar

3. Teks Memantul
kode HTML yang digunakan:

<marquee width="300" behavior="alternate">Tulisan yang bisa memantul</marquee>

Maka hasilnya:

Tulisan yang bisa memantul

NB:

• angka 300 adalah lebar area pantulan 
• Tulisan yang bisa memantul adalah teks yang bisa sobat ganti sesuka hati

4. Teks berjalan yang akan berhenti jika tersentuh mouse
kode HTML yang digunakan

<marquee onMouseOver=this.stop() onMouseOut=this.start()>Teks ini akan berhenti jika anda menyentuhnya</marquee>

Makan hasilnya:

Teks ini akan berhenti jika anda menyentuhnya

NB: Teks ini akan berhenti jika anda menyentuhnya bisa diganti dengan teks yang diinginkan.

5. Teks Zig-zag
Kode HTML yang digunakan:

<marquee behavior="alternate" direction="up" height="50"><br /> <marquee direction="right">Zig-zag oh Zig-zag</marquee><br /> </marquee>

Maka hasilnya:
Zig-zag oh.. Zig-zag


NB:
up bisa diganti down, hasilnya sama saja
right bisa diganti sesuai dengan arah yang diinginkan (left/up/down)
Zig-zag oh Zig-zag ganti dengan teks yang akan ditampilkan

6.Text berjalan dengan background warna tertentu

Kode HTML yang digunakan:

<b><marquee behavior="alternate" bgcolor="BLUE" height="40" scrollamount="3" width="500"><br /> Contoh teks dengan background!</marquee></b>

Maka hasilnya:

Contoh teks dengan background!

NB:

• BLUE ganti dengan warna yang diinginkan
• angka 3 kecepatan gerakan. Makin besar nilainya makin cepat geraknya
• angka 40 adalah tinggi area background
• angka 500 adalah lebar area background

Sebenarnya masih banyak lagi efek-efek lainnya. Misalnya Text berupa Link, dsb..  sobat bisa mencobanya sendiri :))

Membuat Read More Dengan Thumbnail (Icon)

Sesuai judulnya, kali ini kita akan membahas tentang penggunaan Read More dengan mode Thumbnail/Icon.
Sebenarnya ini adalah versi Read More punyanya  o-om (Agus Ramadhani) yang saya modifikasi dengan tambahan thumbnail. Mohon maaf bagi beliau yang tulisannya saya comot. hihii :))

Langsung saja kita mulai.
Pertama, masuk ke mode Design > Edit HTML (Expand Widget Template) lalu temukan kode </head>
dan letakkan kode berikut tepat diatasnya:

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
/******************************************
Auto-readmore link script, version 2.0 (for blogspot)

(C)2008 by Anhvo

visit http://en.vietwebguide.com to get more cool hacks
********************************************/
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script> 

Langkah kedua,  temukan kode <data:post.body/> atau <p><data:post.body/></p>
ganti salah satu kode di atas dengan kode di bawah ini:

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'><img alt='read_more' src='http://i945.photobucket.com/albums/ad291/zeromania/read_more_biru.png'/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Keterangan: 

• summary_noimg = 250 : berarti jumlah karakter yg dipenggal tanpa gambar
• summary_img = 250 : berarti jumlah karakter yg dipenggal disertai dg gambar
• img_thumb_height = 120 dan img_thumb_width = 120 : ukuran gambar dalam satuan piksel
• http://i945.photobucket.com/albums/ad291/zeromania/read_more_biru.png : bisa sobat ganti dengan URL dimana menyimpan logo read morenya

Terakhir jangan lupa simpan template Anda dan lihat hasilnya..

Untuk pilihan icon Read More, bisa menggunakan beberapa tombol berikut:

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEOmwr09bRs2OCyUJm9RG8Qb9oB3h89x4Yj-U4CDf6qnB9PLx8-2K6iFkav-OfBcUr7QTJtaNeaC2kEMCNAF6F_EvtIw2HdxAFILR0bIMO-6IBn4iCTfSRLj6STm77G0mZrgWNshqh9SM/s1600/readmor5.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhw0uD-bTaah2jRZBL-SomDuAefSS1fyB0Rt6EwRJsBxJwj9uPIwFSDAaaU7lSQpFoknWWLqbADSbAVQXXI40tE78fVK670kyyQKD-IQnlcpwgAO_Jtkjq1AiC_a7CmL2YG0HdaquVdVM4/s1600/readmor6.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSdSRUPNaNiQHE26N-u7CQVUCZg5LFNw_yHzYHw6lry4JC52HqbGj34zHk05nar8paYuYGWoxRmLFXujAn6nodRPjWD-DQWcgYyYpCUh1Q08pupPUyj7jAvkbWaDGc5pKCHj9kjl812MU/s1600/readmor7.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgez7tg0fAMpe91Tz5bn0xMLzxZO2dnH663amNL_OGNOQNhbygqLB3UXfV5YHPdnVJkMUSTW-QCxWAOAtTEGdp-BpvM2QdpbLk9hUzcUbxwnVZbKlRu8EcnDGQazpgUL1Tz4nj4mPE29sE/s1600/readmor8.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkHHo2Wev6Fv6NGKse8LlvSo7lPbaZDWO6hdyFLtK3kOsXJtNSBFIkzNPXHJY4TkD9n7_JbPA0x52c0QSSTXkI_CRF3gx3FMUpY5EAE6sUGi-HVnIuGjuvxKExC1gGsg7EvtmKtw1O0O0/s1600/readmore2.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0V5IDuwH6RXiuaoMpWWCUMEND3_lhdo4XOp9YAV34pFyNDCXSv3OfmKj__g6XZ3bJ6F9JMNgcpDiD56BMhG-5PwhsMzjwTkny8OuJVeyBVtWL8waIWoFF0pUdHZj7niI7vA0W8KHAMuc/s1600/readmor10.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidSt4DSTNwYjsrza3bypZMsjfS5PZmtIrPvoopH0gjopP0iMTF-ReX6kK5U7n-rNdPUOluonqCDGE_iBJOPd8PTVf-pDeexeOxBPWAk96u6fqTOmfmpuOSO3k9TY-IRB9VqvSftrJRBAE/s1600/readmore1.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkHHo2Wev6Fv6NGKse8LlvSo7lPbaZDWO6hdyFLtK3kOsXJtNSBFIkzNPXHJY4TkD9n7_JbPA0x52c0QSSTXkI_CRF3gx3FMUpY5EAE6sUGi-HVnIuGjuvxKExC1gGsg7EvtmKtw1O0O0/s1600/readmore2.png

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_BCC7pYKxi18HwvuzenMEoOBcl-WWZog-63Emhmy3p1RVmi2K3-RrFv2WNArKEx__CHQXz8MzU4eWXoPDGd7E-9REI-AemupHWy8XAEwoRaZnrRvuSEGlIjhQdnAwrcAuFb_TO0up6bc/s1600/readmore3.png

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-FUuDNPxRt9xKjyfSncRMIC6MjnnVf2o9KAUpzxrGB_YswqRkE5Yeacsgl0Wq0_mXrRPazDzvaC0VBEpOGCxqfecPQnzJWorDNeZIrkC4VBbF6CNsw_qZYXtXe5ZFutwHEsQuv7FeGGo/s1600/readmore4.png


Selamat mencoba :))
 

Panduan Mengganti Icon Default Blogger (Favicon)

Favicon. Apa itu?

Yap, Favicon adalah sebuah icon yang muncul disamping kiri Address Bar ketika kita mengunjungi situs/blog tertentu. Sedangkan Blogger sendiri punya Favicon default seperti gambar diatas. sebuah logo warna orange yang mirip huruf B itu.

Logo tersebut bisa kita ubah dengan logo lain yang kita inginkan. Misalnya foto, atau gambar lain bahkan bisa berupa animasi gif (gambar bergerak).

Baiklah, mari kita mulai!

Pertama, kita harus memiliki gambar yang akan kita pasang sebagai Favicon. Gambar bisa berformat *JPG, *GIF, *PNG, atau eksetensi gambar lainnya. Usahakan ukuran Favicon tidak lebih dari 50 x 50 piksel.

Upload gambar yang sudah jadi ke Photobucket atau situs penyimpan file lain yang Anda miliki.

Sekarang kita coba memasang gambar ini sebagai Favicon.

Login ke Blogger > Design > Edit HTML.

Letakkan kode berikut tepat di atas kode </head> (gunakan perintah Ctrl + F3 untuk memudahkan pencarian)

<link rel="shotcut icon" href="alamat link/gambar"/>

Penempatan Kode

Sekarang ganti kode yang berwarna merah dengan link dimana sobat menyimpan gambar.

Sekarang kita litat perbedaan sebelum dan sesudah Favicon diubah:

Sebelum

Sesudah

Nah, bagaimana? sangat mudah bukan?
Sok mangga atuh dicoba di blog masing-masing :))

Memasang Search Engine Di Blog

Kadangkala beberapa template hasil instalan tak dilengkapi dengan fitur Search Engine. Lalu bagaimana, apakah kita bisa membuat sendiri? Ya, tentu saja bisa. berikut langkah-langkahnya:

Masuk ke mode Design > Add Gadget > HTML/JavaScript. Pastekan kode berikut di dalamnya:

<form id="searchform" action="http://NamaBlogAnda.blogspot.com /search" name="searchform" method="get"><input id="s" value="" name="q" type="text"> <input id="searchsubmit" value="Search" type="submit"> </form>

Jangan lupa mengubah kata NamaBlogAnda dengan alamat blog sobat serta  Search dengan kata yang akan muncul di samping kolom search.
Simpan Gadget anda.

Selamat mencoba :))
Zona Blogging

Memasang Tombol Share Di Bawah Setiap Postingan

Keberadaan tombol share di blog sangat berarti demi perkembangan blog kita. dengan tombol sahre tersebut kita bisa menyebarkan artikel yang telah kita psting ke berbagai social media seperti Facebook, Twitter dan masih banyak lagi.

Untuk itu, marilah kita coba sama-sama memasang tombol share button di blog masing-masing.
Terlebih dahulu silahkan login ke akun Blogger masing-masing.

Pilih Design > Edit HTML. Jangan lupa beri tanda centang pada Expand Widget Template..

Temukan kode berikut:

<div class='post-footer-line post-footer-line-1'>

Letakkan kode berikut tepat di bawah kode berwarna biru di atas:

<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">
<a href="http://www.addthis.com/bookmark.php?v=250&amp;username=xa-4ca5cb001917823d" class="addthis_button_compact">Share</a>
<span class="addthis_separator">|</span>
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=xa-4ca5cb001917823d"></script>
<!-- AddThis Button END -->


Jangan lupa untuk menyimpannya. Kita lihat  contoh di bawah ini:

Penempatan Kode

Dan hasil akhir akan seperti ini. Tombol Share sudah muncul di bawah setiap postingan .

Sebelum

Sesudah

NB: untuk mendapatkan jenis dan gaya tombol share yang lain sobat bisa ke situs www.addthis.com,
beri centang pada salah satu gaya yang diinginkan, lalu klik tombol Get Widget.

Selamat mencoba! Semoga bermanfaat :))
zona blogging

Mengirim Posting Via Email

Dengan fasilitas email untuk mengirimkan posting, Blogger akan semakin memudahkan kita sebagai penggunanya. Seperti yang telah ketahui, untuk membuat posting yang mengharuskan login ke Blogger terlebih dahulu bagi sebagian orang cenderung merepotkan. Karena itu, Anda dapat memanfaatkan fitur Blogger yang satu ini. Posting lewat email.

Bagaimana caranya?
Ayo kita mulai dari awal.
Pertama-tama, kita harus mengkonfigurasi settingan di blogspot.
Loginlah ke akun Anda masing-masing kemudian pilih opsi Setting > Email and Mobile.

Dibawahnya masih ada beberapa sub kolom lagi.

• BlogSend Address: (dengan mengisikan alamat email, maka update dari setiap posting yang kita buat akan diarahkan ke alamat yang kita cantumkan. Kita bisa mencantumkan maksimal 10 alamat email)Fasilitas BlogSend ini juga bisa kita manfaatkan sebagai media Backup setiap content/postingkita jika suatu saat terjadi masalah pada blog kita.

• Email Posting Address : (inilah yang akan kita setting untuk posting via email). Masukkan kalimat acak di kolom yang disediakan. Misal pada contoh diatas saya memasukkan kata sayaganteng. Maka alamat tujuan kita posting via email adalah 123ajah.sayaganteng@blogger.com

 Dibawahnya lagi masih ada 3 opsi lagi

#) Publish Emails Immediately: jika kita mencentang ini maka email akan segera dipublikasikan dalam bentuk posting

#) Save as Draft: jika kita memilih opsi ini maka email sementara akan tersimpan di Draft sehingga kita bisa mengeditnya kembali ketika login ke Blogger nanti.

#) Reject : tolak semua kiriman.

Terakhir, jangan lupa simpan perubahan/Save Settings.

Untuk mengetes berhasil tidaknya konfigurasi yang kita buat, yuk sama-sama mencoba.
login ke email anda > buat sebuah email yg ditujukan ke alamat diatas. Lalu kirim.

Login ke Blogger > pilih Edit Post.

Dan, disana sudah nampak sebuah draft dari email yang kita kirim sebelumnya.
Selamat mencoba....
Semoga bermanfaat :))

Panduan Mengganti Template Blogger

Pilihan template Blogger memang banyak, apalagi kini sudah disediakan fitur Template Designer untuk mengotak-atik template bawaan. Namun adakalanya kita kurang puas dengan tampilah template sekarang.
Jawabannya adalah menggantinya dengan template baru. Di internet, banyak sekali website penyedia template gratisan yang sangat bagus.

Beberapa diantaranya:
- http://www.zoomtemplate.com
- http://www.blogtemplate4u.com
- http://www.deluxetemplates.net
- http://www.dhetemplate.com
- http://btemplates
- http://www.premiumbloggertemplates.com
Dan masih banyak lagi, semua template diatas bisa didownload gratis tissss :))

Baiklah, mari kita mulai mengganti template blogspot kita
Sebelumnya pastikan sobat sudah mendownload salah satu template uang dirasa cocok dan bagus di salah satu situs diatas lalu ekstract. Bagaimana cara mengekstrack template?
Perhatikan gambar berikut:

Mengekstract Template Blogger

Klik kanan pada file *zip > ekstract here > ok
Sehingga muncul folder baru hasil ekstrack file zip tadi.

Folder Baru 

Selanjutnya masuklah ke Dashboard > Design > Edit HTML > Browse. Kemudian pilih template hasil ekstract tersebut disimpan lalu klik Upload.

Mengupload Template Baru

Jika ada pesan seperti ini, maka klik saja Keep Widget Template untuk mempertahankan agar widget/gadget yang telah kita tambahkan tidak hilang begitu template diganti.

 

Klik view blog untuk melihat hasil template kita. Bagaimana? Apakah sudah berubah tampilannya?

Selamat mencoba.. ^^

Memanfaatkan Fasilitas Template Designer Untuk Mengedit Template Bawaan Blogger

Template Blogger memang sudah disediakan, apalagi baru-baru ini pihak Blogger menghadirkan fitur khusus untuk mengedit template sendiri yang bernama Template Designer.

Bagaimana memfungsikannya?
Sobat tinggal menuju ke Dashboard > Design, lalu pilih tab Template designer.

Namun kadang template custom yang diinstal dari pihak luar tidak berfungsi untuk fitur Template Designer ini.

Baiklah, saya anggap sobat sedang memakai template bawaan blogger.
yuk kita sama-sama menerapkan fasilitas Template Designer ini.

- Untuk memilih jenis template, warna background, Layout (penempatan sidebar kanan atau kiri serta footer) perhatikan gambar berikut (Klik gambar untuk memperbesar):

Memilih Template

Warna Background Template

Layout Sidebar dan kolom Footer

Sementara tab Advanced berfungsi untuk merubah warna font, Judul. jenis font, dan masih banyak lagi.

Jangan lupa megklik Apply To Blog di sebalah kanan atas untuk menyimpan semua perubahan yang anda lakukan, dan lihat hasilnya

Berikut ini perbedaan sebelum dan sesudah template kita desain dengan Template Designer:

sebelum didesain 

sesudah didesain 

Cukup mudah bukan, disana terlihat ada penambahan dua sidebar, dan tiga footer kanan dan kiri sehingga blog kita kelihatan lebih professional dan tentu saja bisa kita letakkan bermacam-macam widget dan gadget baru.
Jadi tunggu apa lagi, silahkan diterapkan di blog sobat masing-masing :))