Cara Memasukkan Gambar pada Postingan Blog

Cara Memasukkan Gambar di Postingan Blog - Melengkapi tutorial yang telah diterbitkan, kali ini kita akan berbagi soal cara menyisipkan atau memasukkan gambar pada postingan blog. Untuk membuat postingan klik link ini "cara membuat atau memasukkan tulisan ke dalam blog", untuk memasukkan video silahkan klik link ini "cara memasukkan atau menyisipkan video ke dalam blog".

Membuat posting dengan menyisipkan gambar di dalamnya sama halnya ketika kita berurusan dengan program Microsoft Office Word, kita hanya perlu untuk mengklik tombol browse, yang bertujuan untuk mengambil gambar dari PC komputer/ flash disk kita. langkah-langkahnya adalah sebagai berikut:

a. Klik icon Tambah Gambar:

b. Akan Muncul Kotak dialog BROWSE:

Keterangan:

1. Tombol Browse, untuk mengambil gambar di PC kompuiter, 2. Untuk menyipkan gambar dengan metode URL, 3. Menu pengaturan letak gambar, 4. Menu pengaturan Ukuran gambar, 5. Kotak "Gunakan Tata Letak Ini" harus anda centang, 6. Tombol untuk mulai mengunggah gambar, 7. Tombol untuk membatalkan pengunggahan.

Karena kita sedang ingin mengunggah/ menyisipkan gambar dari komputer, maka bagian yang ditandai dengan no.2 kita abaikan.

c. Mulai langsung dengan meng-klik tombol Browse (yang ditandai dengan no.1, di gambar atas), dan akan muncul kotak browse ke explore:

Keterangan:

1. File yang anda pilih, 2. dan namanya akan muncul di kotak "File Name", 3. Selanjutnya untuk memulai menyisipkan gambar, klik "Open". Dan kli tombol:

d. Tunggu proses pengunggahan selesai sampai muncul tulisan "gambar anda telah selesai". Selanjutnya klik tombol "selesai"

Dan sekarang, gambar telah tersisipi ke dalam postingan anda.

e. Cara lain memosting gambar dengan Kode HTML.

Ada cara lain untuk memosting gambar, yaitu dengan menggunakan kode HTML:

<img src='http://savepageaspdf.pdfonline.com/pdfonline/img/save_as_pdf.gif' alt='Save as PDF' />

Dan seperti ini hasilnya:

Jadi, apabila anda ingin memosting suatu gambar, tinggal menyesuaikan dengan URL gambar yang ingin anda posting dengan mengganti URL yang berwarna Hijau. Tulisan yang ditebalkan itu adalah keterangan dari gambar anda. Apabila anda memosting gambar masjid, maka keterangannya 'masjid', seperti itu contohnya.

*) Tulisan ini diambil (telah diedit) dari blog blogger senior t4belajarblogger.blogspot.com.

Merubah Ukuran Halaman Posting Blogspot

Artikel ini saya tulis untuk menjawab pertanyaan sobat saya soal Cara Merubah Ukuran Halaman Posting Blogspot ketika postingan di klik. Ini juga sekaligus sebagai pelengkap artikel sebelumnya. Jadi, artikel kali untuk membahas Cara Merubah Ukuran Halaman Posting Blogspot ketika postingan di klik. Misalnya pada halaman home, tampilan blog kita terdiri dari 2 sidebar, yaitu kiri dan kanan dan halaman posting berada di tengah, maka pada saat salah satu artikel blog kita di klik oleh pembaca, maka tampilan tersebut berubah, sidebar kanan atau kiri menghilang kemudian ukuran halaman posting berubah menjadi lebar (sesuai lebar maksimum body blog kita).

Akan tetapi, sobat harus tahu bahwa tidak semua template blogger memiliki id elemen yang sama, itu tergantung pembuat template tersebut. Jadi agak repot untuk menjelaskannya. Untuk mentaktisinya, berikut saya berikan contoh blog yang menggunakan template bawaan blogger (Template Blog ini telah saya ganti, tapi Insya Allah Fungsinya masih berjalan, kebetulan saya masih admin di sana, hihi) silahkan klik di sini. Saya memberikan contoh blog saya tersebut agar lebih mudah dipahami karena sepengetahuanku, semua template milik blogger memiliki id elemen yang sama.

Coba perhatikan blog Situs Fakta Islam (setelah tutorial ini diperbaharui, blog DEMO sudah diganti, insya Allah modelnya sama, dan ini hanya sekedar gambaran, jika agan bingung, silahkan bertanya di kotak komentar). Pada halaman home, terdiri dari halaman posting dan sidebar kiri dan kanan. Coba klik salah satu postingan, maka sidebar kiri akan hilang dan halaman postingan menjadi lebar (mudah-mudahan itulah yang dimaksud sobat saya, Kang Fahrur). Triknya sangat sederhana, hanya menggunakan kode berikut ini (kode ini berlaku untuk template blog lain):

<style type='text/css'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

#sidebar-right-1 {display:none;}

.post {width:884px;border:2px solid #952842;}

.blog-pager {background: $(paging.background); width:884px;}

</b:if>
</style>

Keterangan:

• Yang berwarna merah adalah perintah yang kira-kira maksudnya "jika halaman single page atau halaman postingan dikli, maka..."
• Sidebar Kanan jangan ditampilkan atau tidak akan muncul, #sidebar-right-1 adalah id sidebar kanan (yang berwarna hijau)
• Postingan akan berubah ukuran menjadi 884px, garis bordernya 2px dengan kode warna #952842 (lihat kode warna biru di atas)
• Blog pager (yang bertuliskan postingan lama atau postingan baru; berada di bawah postingan) juga ikut bertambah lebar, yaitu 884px (perhatikan kode berwarna ungu di atas). Kenapa blog pager ikut dilebarkan? Agar serasi dengan halaman postingan yang juga lebar :)

Nah, ternyata Cara Merubah Ukuran Halaman Posting Blogspot ketika postingan di klik cukup simple... Mohon maaf jika saya tidak mampu menjelaskan dengan baik, soalnya butuh kasus untuk hal ini sebab sekali lagi, id elemen template blogger berbeda-beda, terutama jika kita menggunakan custom template (template yang didownload melalui penyedia template). Jika sobat ingin berdiskusi, bisa menghubungi facebook saya. Semoga Kang Fahrur dan juga sobat lainnya terbantu. Terima Kasih :)

Cara Memasukkan / Menyisipkan Video dalam Postingan Blog

Berhubung beberapa waktu yang lalu ada sobat yang bertanya melalui email, "bagaimana cara memasukkan video dalam postingan?", nah, mudah-mudahan tutorial ini membantu :) Langsung saja ya sob, g usah bertele-tele, hihi. Silahkan sobat perhatikan langkah di bawah ini.

Memasukkan Video dalam postingan sebenarnya hampir sama dengan cara memasang gambar dalam postingan. Kita cukup masuk dalam halaman edit posting atau buat posting baru. Coba perhatikan gambar di bawah, itu adalah tombol untuk memasukkan video. 

Lalu akan muncul ini:

Dan seperti langkah peng-upload-an gambar, namun proses peng-upload-an vidio ini memerlukan waktu banyak yaaa bisa dikatakan prosesnya relatif lama, apalagi kalau koneksi internet kita tidak terlalu mendukung. Akan tetapi, bagi anda yang memang ingin benar-benar meng-upload vidio di postingan anda, anda tidak perlu khawatir dengan masalah ini. Karena kita bisa menggunakan jasa youtube.com

Bagaimanakah caranya? Untuk memulai mari kita simak langkah-langkahnya:

1. Kunjungi situs youtube.com.

2. Cari Vidio yang ingin anda tampilkan di postingan anda melalui kotak "search" di youtube, di dalam postingan ini sebagai contoh, kita menggunakan keyword "Ipin dan Upin". Setelah semua vidio yang kita cari tadi tampil semua, maka kita pilih salah satu. Selanjutnya di manakah letak Kode HTML vidio tersebut? Perhatikan gambar di bawah ini:

Nah, seperti pada gambar di ataslah letak Kode HTML-nya. Pilih yang Embed bukan yang URL.

3. Maka Kode yang kita dapat itu adalah ini:

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/OYwoFurb4_8&hl=en&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/OYwoFurb4_8&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

4. Maka selanjutnya, sisipkanlah kode di atas ke dalam postingan anda. Maka nanti akan tampil seperti di bawah ini: (video ini hanya contoh tampilan sob)

Al Hamdulillah, cara memasukkan video dalam postingan pun telah selesai. Apabila ada masalah bisa ditanyakan melalui kotak komen di bawah posting.

*) Tulisan ini diambil (telah diedit) dari blog blogger senior t4belajarblogger.blogspot.com.

Cara Memasang Iklan di bawah postingan Blogspot

Aritkel "Cara Memasang Iklan di bawah Postingan Blogspot" diterbitkan atas pertanyaan sobatku melalui SM dua hari yang lalu. Dia baru saja mendaftar pada salah satu bisnis online dan ingin memasang iklannya di bawah setiap postingan. Sebelum sobat melanjutkan artikel ini, sebaikanya membaca tutorial berikut, Memodifikasi Related Post / Artikel yang Berkaitan pada Blog Blogspot. Jika sobat telah memahami artikel tersebut, Insya Allah tidak akan sulit memasang iklan di bawah postingan.

Sebenarnya mudah saja, cukup menambahkan gadget HTML kemudian pastekan kode iklannya, setelah itu seret gadget tersebut ke bawah halaman posting. Namun, kekurangannya adalah iklan tersebut tidak tepat berada di bawah postingan, melainkan berada di bawah kolom komentar. Nah, bagaimana cara memasang Iklan di bawah postingan Blogspot (benar-benar berada di bawah postingan, setelah kalimat terakhir artikel kita)? Nah, silahkan agan cermati langkah-langkah berikut:

1. Login ke account blogger sobat,
2. Pada dashboard, pilih edit layout atau Rancangan –> edit HTML (Sebaiknya backup templatenya)
3. Centang Expand widget template
4. Cari kode seperti ini: <data:post.body/>
5. Letakkan Kode Iklannya tepat di bawah kode nomer 4

Tips: tekan CTRL F atau F3 pada keyword sobat untuk mencari kode.
Biasanya, kode <data:post.body/> ada dua, coba pastekan kode iklannya pada kode <data:post.body/> yang lebih dulu ditemukan (yang atas), tapi jika tidak berfungsi, kita gunakan kode <data:post.body/> yang di bawah.

6. Terakhir adalah Save Template

Nah, demikianlah cara Memasang Iklan di bawah postingan Blogspot. Jika sobat mengalami masalah dengan artikel di atas, jangan ragu untuk berkomentar :) Semoga bermanfaat.

*Tutorial ini pernah di publish di blog saya yang lama (Soe86)

Memodifikasi Related Post / Artikel yang Berkaitan pada Blog Blogspot

Memodifikasi Related Post / Artikel yang Berkaitan pada Blog Blogspot - Lagi-lagi saya harus me-review postingan / artikel dari blog lain. Selain karena saya tidak punya ide baru, ini juga karena permintaan sahabat saya.  Sahabat saya tersebut menemukan artikel yang menarik tentang "Cara membuat "Related Post" dibawah Posting". Setelah saya membuka postingan tersebut, rupanya itu adalah artikel sobat blogger saya yang baik :), silahkan klik di sini jika penasaran membukanya (sekedar info, "artikel terkait" yang saya pasang di blog ini juga sumbernya dari sana). 

Saya tidak bermaksud meng-copy paste artikel sobat saya tersebut, saya hanya bermaksud menjelaskan "Cara Memodifikasi Related Post atau Artikel yang Berkaitan pada Blog Blogspot", sesuai permintaan sahabat saya.  Sebelum kita memodifikasi, sebaiknya kita terlebih dahulu memasangnya di blog kita, langkah-langkahnya sebagai berikut:

1. Login ke account blogger sobat,
2. Pada dashboard, pilih edit layout atau Rancangan –> edit HTML
3. Centang Expand widget template

4. Cari kode seperti ini: <p><data:post.body/></p>
5. Lalu paste kode berikut tepat dibawah kode tersebut diatas :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<H2>Artikel Terkait:</H2>
<DIV class='rbbox'>
<DIV style='margin:0; padding:10px;height:150px;overflow:auto;border:1px solid #ccc;'>
<DIV id='albri'/>
<SCRIPT type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 15;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
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 &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
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 = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</SCRIPT>
</DIV>
<script type="text/javascript">RelPost();</script>
</DIV>
</b:if>

6. Simpan Template Sobat

Keterangan; Setelah kode di atas (nomor 5) terpasang, langkah selanjutnya adalah memodifikasinya. Caranya sangat mudah, perhatikan kode yang berwarna Merah dan Biru di atas kemudian lihat keterangannya di bawah ini:

Artikel Terkait:= Bisa diganti dengan "Related post" atau tulisan lain yang diinginkan
margin:0; = batas pinggirnya berapa, kalau saya menggunakan 0
padding:10px; = jarak dari pinggir, jika sobat perhatikan pada blog saya ini, kotaknya agak sedikit ke dalam, nah, itulah fungsinya.
height:150px; = Ketinggiannya berapa, bisa diganti dengan 100, atau sesuai keinginan
overflow:auto; overflow maksudnya, jika isi related post lebih panjang dari kotak, maka secara otomatis akan berubah jadi model scroll
border:1px = ini maksudnya garis pinggirnya, ketebalan berapa, bisa 2, bisa juga 3
solid = ini adalah kode untuk membuat garis lurus, jika ingin berubah menjadi garis putus-putus, ganti kode tersebut dengan "dotted"
#ccc = ini adalah kode warna garis pembatasnya, bisa diganti dengan warna lain dalam bahasa inggris, misalnya black, white, red, dan seterusnya.
maxNumberOfLabels = 15; = ini adalah jumlah label atau kategori yang akan dimunculkan, boleh 7, 8, 10, sesuaikan dengan jumlah kategori atau label pada blog sobat.

Nah, Sampai di situ tampilan related post kita sudah dapat kelihatan cantik, sobat juga dapat melakukan atau menambahkan kode yang lain. Semoga bermanfaat! 

Cara Memasukkan/Membuat Tulisan di Blogspot

Cara Memasukkan/Membuat Tulisan di Blogspot - Bagi sobat yang baru menggunakan fasilitas blogger untuk ngeblog, mungkin postingan ini bisa bermanfaat. Jangan lupa, setelah membaca tutorial ini, sebaiknya  membaca tulisan lain yang berkaitan dengan tulisan ini dengan mengklik link berikut, "Cara Memasukkan atau Menyisipkan Gambar dalam Postingan" serta "Cara Memasukkan atau Menyisipkan Video dalam Postingan".

Tulisan ini saya persembahkan khusus buat sobatku yang baru memulai bergabung di blogger (seperti saya). Setelah sobat mendaftar atau membuat blog di blogger, maka hal penting lainnya yang harus dilakukan adalah membuat tulisan. Bagaimana cara membuat tulisan di Blogspot? Terlebih dahulu kita mengenal fitur-fitur dalam halaman posting/menulis.

Keterangan Gambar:

1. Tempat menulis judul postingan yang akan ditulis. Misalnya "Cara membuat tulisan di Blogspot.

2. Untuk mengatur ukuran huruf, merubah menjadi besar atau kecil

3. b= Untuk membuat huruf tebal.

4. i= Untuk membuat huruf miring.

5. Mengatur Warna Huruf.

6. Untuk menyisipkan link/ hyper link, contoh: kata "Soe86" kita sisipi dengan link http://www.anekanews.com, maka jadinya seperti ini: "AnekaNEWS.com"

7. Untuk mengatur rataan tulisan. Rata kiri, rata tengah, kanan, dan rata penuh.

8. Untuk membuat format nomor dan tanda, contoh: kata "saya" anda blok, lalu klik salah satu dari tool tersebut, maka akan menjadi seperti ini: "1. Saya" atau akan didahului oleh tanda kotak kecil.

9. Block Quote, atau tanda kutipan bisa anda gunakan untuk menekankan sesuatu dengan maksud mengingatkan para pembaca bahwa itu penting atau sebagainya.berikut contoh hasilnya:

contoh yang saya kutip Block Quote, atau tanda kutip bisa anda gunakan untuk menekankan sesuatu dengan maksud mengingatkan para pembaca bahwa itu penting atau sebagainya.

10. Untuk memeriksa ejaan (saya sendiri tidak pernah menggunakannya)

11. Tombol untuk memasukkan atau menyisipkan gambar ke posting/tulisan.

12. Tombol untuk memasukkan atau menyisipkan video ke posting/tulisan.

13. Untuk menghapus format dari bidang pilihan.Misalnya, tadinya kita telah mengutip sebuah kalimat, tapi kemudian kita berpikir untuk tidak mengutipnya. Untuk melakukannya, silahkan block tulisan yang telah dikutip tadi kemudia klik tombol nomor 13, maka formatnya akan berubah seperti format biasa.

14. Pratinjau, untuk melihat bagaimanakah tampilan postingan kita di blog kita nantinya (setelah kita publish). Atau biasa dengan istilah "preview"

15. Untuk mengisi atau membuat label / kategori postingan.

16. Tombol penyimpan postingan, apabila anda telah menulis suatu posting, lalu diakhiri dengan menekan tombol ini, maka postingan anda akan tersimpan di akun blogger anda dan tidak tampak di blog, sehingga orang lain/ publik tidak bisa melihat/ membacanya. Biasanya ini digunakan tatkala anda ingin menulis sesuatu namun memerlukan waktu yang relatif lama, maka anda dapat menyimpan hasil kerjaan anda untuk dilanjutkan kapan saja anda mau.

17. Terbitkan Entri: (Entri adalah bahasa blogger yang berarti tulisan atau postingan [ini saya simpulkan sendiri]) Apabila anda telah selesai menulis suatu posting, lalu ingin menerbitkannya di blog anda, maka anda bisa langsung meng-klik tombol ini, otomatis postingan anda bisa dilihat/ dibaca oleh orang lain.

Nah, itu adalah fitur-fitur dalam halaman posting blogger. Dengan memahami fitur tersebut, diharapkan sobat dapat membuat tulisan sendiri. Semoga Bermanfaat. Kalau ada pertanyaan atau ingin diskusi, silahkan berkomentar di bawah postingan / tulisan ini.

*) Tulisan ini diambil (telah diedit) dari blog blogger senior t4belajarblogger.blogspot.com.

Memanfaatkan Fasilitas "Read More" Milik Blogger

Memanfaatkan Fasilitas "Read More" Milik Blogger - Artikel kali ini membahas tentang fasilitas read more pada blogger. Bagaimana cara memasang "Read More" di Blogger? Sebenarnya sangat mudah, saya sendiri menemukannya bukan dari om google, tapi dari bakat saya yang kadang kurang kerjaan, asal klik aja, hahaha.

Sebenarnya ini adalah salah satu fasilitas yang tergolong baru di blogger, biasanya blogger senior menggunakan cara yang manual (mereka itu [blogger senior] orang hebat) dengan menggunakan kode yang ribet. Nah, karena ini adalah fasilitas baru yang sengaja disiapkan, maka kita tidak usah repot membuat read more.

Sudah mengerti yang dimaksud dengan "Read More"? Jika belum, perhatikan contohnya pada gambar di bawah:

Yang dilingkari dengan lingkaran merah, itulah yang dimaksud dengan "read more". Jika kurang jelas, silahkan klik gambarnya. Judul tulisan pada contoh di atas adalah "Suatu Hari dalam Kehidupan Seorang Antropolog". Tulisan tersebut sebenarnya panjang, tapi yang muncul pada halaman utama hanya beberapa kalimat saja kemudian diakhiri dengan tulisan "selengkapnya>>>". Maksudnya, jika tertarik membaca tulisan tersebut, maka pembaca tinggal mengklik tulisan "selengkapnya>>>" tadi.

Tujuan read more itu sendiri adalah untuk memotong atau memenggal tulisan yang panjang pada halaman utama (home) atau ketika label / kategori di klik sehingga yang muncul hanya sedikit saja, yaitu hanya tulisan yang tidak dipenggal. Keuntungannya, pembaca blog kita tidak akan 'puyeng' melihat tulisan yang terlalu panjang, cukup dengan melihat judul kemudian sedikit penjelasan, kalau tertarik pembaca akan mengklik "read more" atau "baca selengkapnya" pada bagian bawah tulisan. Itu yang pertama, yang kedua, kecepatan loading blog kita juga lebih bagus dibanding jika tidak menggunakan fasilitas ini.

Oke, langsung saja ya,,,
Cara memasang read more di blogger adalah sebagai berikut:
1. Silahkan masuk di blog sobat kemudian buat tulisan baru atau edit tulisan yang akan dipasangi fasilitas read more.
2. Pada kotak penulisan, perhatikan bagian kanan atas, di situ terdapat 2 tulisan atau tombol "edit HTML" dan "Compose". Silahkan klik pada tulisan atau tombol "Compose". Perhatikan gambar berikut:

Keterangan:
1. Klik Compose
2. Klik gambar yang ditunjuk panah 2. Sebelumnya, letakkan kursor tepat berada pada awal tulisan yang hendak kita penggal atau akhir tulisan yang akan kita munculkan. Misalnya, jika yang akan kita munculkan pada halaman utama hanya paragraf I, maka letakkan kursor di bawah paragraf I kemudian klik gambar seperti panah 2  di atas. Bagian mana yang akan kita potong, itu terserah kehendak sobat.

3. Langkah terakhir, tinggal mengklik "Terbitkan Entri".

Semoga bermanfaat !!!!

Cara Membuat Fungsi Scroll pada Kotak Komentar

Cara membuat fungsi scroll pada kotak komentar - Fungsi scroll ini dibuat jika kita "menduga" atau "mengantisipasi" suatu saat blog kita memiliki banyak komentar, artinya butuh tempat yang banyak atau panjang agar dapat menampung semua komentar yang ada. Jadi intinya adalah penghematan atau pemanfaatan ruang yang sempit (wah kayak ahli tata ruang, hehe). Kalau sobat tertarik membuatnya, caranya adalah seperti berikut ini:

1. Log in seperti biasanya ke blogger.com
2. klik tata letak atau lay out atau edit html, trus ke edit html
3. Lalu Cari kode yang seperti ini (jika menggunakan fire fox atau mozila, gunakan Ctrl + F untun mencari)

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;

4. Setelah ketemu kode yang diatas tambahkan kode berikut di bawahnya

height:400px;
overflow:auto;
border:1px solid grey;

     Jika sudah ditambahkan, maka hasilnya akan seperti di bawah ini:

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
height:400px;
overflow:auto;
border:1px solid grey;

5. Jika sudah, jangan lupa Save Template (fungsi scroll ini baru akan berfungsi jika komentar pada postingan kita sudah banyak).


Referensi: Buwel

Cara Membuat Tombol Spoiler/Hide Show

Cara Membuat Tombol Spoiler/Hide Show - Apa itu tombol spoiler? Saya juga tidak mengerti definisinya, tapi saya mengerti maksudnya apa (maklum, saya juga otodidak, hehehe). Yang saya pahami, tombol spoiler itu berfungsi untuk menyembunyikan sebuah tulisan atau apa saja yang akan disembunyikan, termasuk scipt html. Jika tombol tersebut diklik, maka akan muncul semua tulisan atau fitur lain yang disembunyikan.

Sebagai contoh, coba klik tombol di bawah ini:

Silahkan diisi apa saja di sini, yang memang dirasa perlu tuk disingkat

Nah, kalau sudah tau, sekarang kita melangkah pada tahap pembuatannya. Silahkan Copy kode di bawah ini kemudian pastekan pada postingan atau gadget di mana kita akan menggunakannya/menampilkannya.

<div><div style="margin: 5px;">
<div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px; " value="Tampilkan" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" type="button"/>
</div>
<div style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2">
<div style="display: none;">

Silahkan diisi apa saja di sini, yang memang dirasa perlu tuk disingkat

</div></div></div></div>

Keterangan:

Warna merah dan biru silahkan diganti dengan kata yang di inginkan. Misalnya "show" untuk mengganti kata "tampilkan" dan "Hidden" untuk mengganti kata "Sembunyikan"

Warna Kuning silhkan diganti dengan kalimat atau script/kode atau foto yang akan kita sembunyikan.

Cara Menampilkan Kode HTML dalam Postingan (Parsing Kode)

Cara Menampilkan Kode HTML dalam Postingan (Parsing Kode) - Untuk menampilkan kode atau script html dalam postingan sobat, kode atau script html tersebut harus diparse terlebih dahulu. Di bawah ini saya sudah menyiapkan alat untuk memparse kode yang disediakan oleh om google. 

Caranya, copy kode atau script html yang akan ditampilkan dalam postingan kemudian paste pada form atau kotak di bawah ini. Jangan lupa klik "Convert". Nah, kode atau script html sobat sudah siap diposting, silahkan copy dan paste di dalam tulisan sobat.

Cara Membuat Related Posts atau Artikel yang Berkaitan di Bawah Postingan

Cara Membuat Related Posts atau Artikel yang Berkaitan di Bawah Postingan - Related Posts atau biasa disebut "link yang bekaitan", "artikel pada kategori yang sama", "artikel yang bertautan", "postingan terkait" atau apa aja namanya, merupakan bagian judul posting terkait dan biasanya ditampilkan berdasarkan penamaan label (kategori), Realated Post ini biasanya berupa link yang tampilkan dibawah postingan tunggal tepatnya di bawah kolom komentar. Keuntungan dengan pemasangan post yang berkaitan tentu saja akan mempermudah pengunjung blog kita untuk menemukan artikel terkait tanpa harus menuju dan membuka satu persatu halaman dalam link label. Agar gak bingung lihat gambar dibawah ini:

Kayaknya gak usah dibahas panjang lebar ya, pasti rekan semua dah ngerti maksudnya. OK langsung aja ke proses pemasangan :)

Langkah I:

Masuk pada Template -> Edit HTML -> kemudian masukan kode javascript dibawah ini diantara kode <head>..</head> atau lebih mudahnya cari kode </head> saja, kemudian letakan kodenya diatas kode  </head> -> jangan lupa disimpan

<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>

Langkah II:

Masuk pada Template -> Edit HTML -> jangan lupa beri tanda centang pada Expand Widget Template -> cari kode dibawah 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>

Jika sudah ketemu, masukan kode berwarna merah dibawah diantara kode diatas.

     <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>

Pada proses ini pengeditan pada kode HTML sudah selesai, Jangan lupa disimpan


Langkah III:

Masuk pada Template -> Elemen halaman -> kemudian buat elemet baru atau klik "Tambahkan sebuah Elemen Halaman" -> copy-paste kode dibawah ini dan jangan lupa memberikan nama judul misal, "Artikel pada kategori yang sama" -> kemudian jangan lupa disimpan.

<script type="text/javascript">

 removeRelatedDuplicates();

 printRelatedLabels();

</script>

Langkah IV:

Agar related post ini tidak tampil pada halaman utama dan hanya tampil pada halaman posting tunggal maka kita perlu penambahan beberapa kode, caranya:

Masuk pada Template -> Edit HTML -> jangan lupa beri tanda centang pada Expand Widget Template -> cari kode dibawah ini, sebisanya cari sesuai dengan title yang kita masukan, sebagai contoh, tadi saya memberi mana dengan  Artikel pada kategori yang sama, jika sudah ditemukan masukan ke dua kode berwarna merah dibawah.

Catatan: dibawah ini ada kode HTML13 ini jangan dijadikan patokan pencarian, sebaiknya abaikan saja karena setiap elemen pasti berbeda-beda, cukup cari title saja.

<b:widget id='HTML13' locked='false' title='Artikel pada kategori yang sama' 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>

Artikel ini saya ambil dari Blog O-OM tanpa dirubah sedikit pun.