Cara Membuat Read More

Dalam menuliskan sebuah postingan di blog, kita selalu menuangkan ide-ide apa saja yang ingin kita publikasikan. Apa saja kita tulis dan semau kita. Akibatnya, tidak jarang penulisan ide yang banyak membuat postingan kita menjadi panjang saat dipublikasikan. Masalah baru muncul ketika postingan tersebut tampil di blog. Karena satu postingan saja sudah panjang, tentu hal ini akan membuat halaman blog kita menjadi panjang karena postingan tersebut. Ingat, ini baru satu postingan saja. Biasanya kita menampilkan beberapa postingan di blog kita bukan? Nah, bagaimana hasilnya jika beberapa postingan yang panjang-panjang tersebut tampil di blog kita sekaligus? Tentu akan menyita banyak ruang bukan?

 

Bagaimana solusi untuk mengatasi masalah tersebut?

Kita perlu menggunakan trik read more guna memperpendek dengan menampilkan sebagian dari artikel yang kita postingkan tersebut. Cara kerjanya adalah dengan menyembunyikan sebagian dan menampilkan sebagian lagi artikel yang kita tulis di blog. Dengan demikian, kita pun dapat menghemat ruang dan dapat meningkatkan page views dari blog kita, karena pembaca perlu memuat ulang tampilan halaman dari postingan yang ingin mereka baca selengkapnya.

Bagaimana cara membuat read more ini?

Pertama, seperti biasa jika kit harus log in terlebih dahulu ke akun blogger kita.
Klik fitur rancangan.
Klik edit HTML.
Cari kode HTML berikut ini, <p><data:post.body/></p>.
Hapus kode di atas, lalu ganti dengan memasukan kode di bawah ini.

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Selengkapnya..</strong></a></p>
</b:if>

Klik simpan.
Setelah itu, klik pengaturan.
Klik bagian format.
Pada bagian paling bawah, ada tulisan template entri. Di sebelahnya ada kotak kosong bukan? Nah, masukan kode HTML berikut di dalamnya.

<span class="fullpost">


    </span>

Klik simpan dan selesai. Sekarang kita dapat mempublikasikan postingan artikel kita secara lebih ringkas dan hemat ruang dengan batuan read more.

Keterangan :

• Gani tulisan selengkapnya dengan kalimat atau kata yang mengindikasikan pembaca untuk membaca artikel selengkapnya sesuai selera kita.
• Saat kita hendak mempublikasikan postingan, hendaknya menulis di bagian edit HTML, bukan compose. Di bagian edit HTML tersebut akan muncul kode HTML yang tadi kita berikan. Tulisan yang tampil di halaman depan blog adalah tulisan yang ditempatkan sebelum kode <span class="fullpost">. Sementara yang ditempatkan di antara <span class="fullpost"> dan </span> adalah tulisan yang disimpan dan akan muncul ketika pembaca mengklik �selengkapnya� untuk membaca artikel secara keseluruhan.

Ada tanggapan?
Kalau ada yang ingin ditanyakan atau dikomentari silakan disampaikan saja lewat kotak komentar ya kawan..
Salam blogger!

By: el fikri13 On 15.48

Continue Reading

Membuat Related Post Dengan LinkWithin

Kemarin kita sudah membahas cara membuat related post dengan edit HTML template blog kita. Sekarang, kita akan membahas tentang bagaimana membuat related post atau membuat artikel yang berhubungan ini dengan cara yang berbeda dan relatif mudah serta lebih atraktif karena adanya thumbnails gambar. Cara membuatnya cukup mudah, kita hanya perlu menggunakan fasilitas linkwithin sebagai widgetnya. Langsung saja, yuk kita bahas bersama bagaimana caranya membuat related post dengan linkwihtin ini..

 

Pertama, kunjungin situsnya di linkwithin.com.

 

Pada halaman depan, masukan informasi yang diperlukan seperti alamat email, URL blog, platform blog, width atau jumlah related post yang akan ditampilkan, dan notifikasi apakah blog kita menggunakan tulisan yang terang pada background template yang gelap.

Setelah mengisi informasi, klik get widget.

Klik install widget untuk log in ke akun blogger kita.

Setelah log ini, kita akan dihadapkan pada halaman seperti di bawah ini. Pilih blog yang ingin kita masuki widget tersebut beri sebuah nama. Kemudian, klik menambah widget untuk memasukan widget tersebut ke dalam blog kita.

Untuk mempercantik tampilan, letakan widget linkwithin tersebut tepat di bawah posting blog.
Klik simpan dan selesai. Kini blog kita sudah terdapat widget untuk menampilkan setiap artikel yang berhubungan dari postingan blog kita.

Cukup mudah bukan?
Ada yang pernah mencobanya? Bagaimana hasilnya? Kalau belum, yuk kita coba bersama-sama! Ditunggu tanggapannya di kotak komentar ya kawan..
Salam blogger!

By: el fikri13 On 19.35

Continue Reading

Cara Membuat Related Post

Saat kita sudah banyak menulis tentang sebuah artikel dalam blog kita, biasanya kita juga ingin mempromosikan kembali artikel yang sudah lama kita buat tersebut agar mendapat kesempatan untuk dibaca oleh pengunjung. Bagaimana caranya melakukan hal itu?

 

Mudah, kita cukup menggunakan fasilitas related post untuk menampilkan artikel lama kita. Selain bersifat mempromosikan, hal ini juga akan memberikan akses lebih mudah kepada pembaca yang ingin mengetahui informasi yang berhubungan dengan informasi yang sedang dia baca dengan informasi lainnya lewat tampilan artikel yang berkaitan yang telah kita sajikan. So, menempatkan fitur artikel yang berkaitan di blog kita ini cukup memberikan manfaat bukan? Karena itu, yuk mari kita bahas bersama bagaimana cara membuat related post atau artikel yang berhubungan ini.

Pertama, tentu saja kita harus log ini dulu ke akun blogger kita.
Klik fitur rancangan.
Klik edit HTML.
Klik atau contreng expand template widget.
Masukan kode HTML di bawah ini tepat di bawah kode <data:post.body/>.

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

<div class='widget-content'>
<h3>Related Post</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;


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;data2007&#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>

</div>
</b:if>

Klik simpan template. Sekarang artikel berkaitan di blog kita sudah jadi!

Keterangan :

• Gunakan tombol Ctrl + F pada keyboard untuk mempermudah pencarian kode HTML yang diinginkan.
• Sebelum melakukan edit HTML, harap download template kita sebelumnya sebagai backup untuk berjaga-jaga jika terjadi kegagalan saat proses edit terjadi.
• Ganti tulisan related post dengan kalimat yang kita sukai.
• Ganti angka var maxNumberOfPostsPerLabel = 4; untuk mengubah jumlah artikel berkaitan yang ingin ditampilkan.

Bagaimana? Cukup mudah bukan? Yuk dipraktikan!
Kalau ada yang ingin ditanyakan silakan komen di kotak komentar di bawah ini ya kawan..
Salam blogger!

By: el fikri13 On 14.45

Continue Reading

Membuat Tampilan Blog Versi Mobile

Penyebaran jaringan internet yang tidak merata membuat sebagian pembaca mengunjungi blog kita via mobile. Dengan biaya internet mobile yang cukup mahal, tentunya ini akan menjadi masalah tersendiri jika pembaca harus mengunjungi blog kita yang memiliki halaman blog dengan ukuran yang besar. Biasanya, satuan bayar untuk akses internet via mobile dihitung per volume halaman yang diaksesnya. Bayangkan saja jika halaman blog kita memiliki ukuran yang besar, tentu hali ini akan sangat merugikan pengunjung blog kita via mobile bukan? Permasalahan lain saat pembaca mengunjungi blog kita yang besar ukurannya via mobile adalah membuat loadingnya menjadi relatif lama. Tentu hal ini akan membosankan pengunjung karena mereka harus menunggu beberapa waktu untuk melihat tampilan seluruhnya.

 

Nah, bagaimanakah solusi untuk mengatasi kedua permasalahan di atas? Salah satu solusi untuk mempermudah akses pengunjung blog via mobile ke blog kita adalah dengan mengubah tampilan blog kita menjadi versi mobile saat diakses via mobile.

Bagaimana cara mengubah tampilan blog menjadi versi mobile tersebut?

Pertama, masuk terlebih dahulu ke akun blogger kita lewat draft.blogger.com.

 

Di bagian dasbor jika ada notifikasi template seluler, maka klik aktifkan template seluler.

 

Jika di bagian dasbor tidak ada notifikasi tersebut, maka kita perlu mengubah setting tampilan blog versi mobilenya terlebih dahulu. Caranya adalah klik pengaturan dan pilih bagian email dan seluler. Kemudian pada pilihan tampilkan template seluler, pilih ya, pada perangkat seluler, tampilkan versi seluler template saya.

Kemudian klik simpan hingga muncul notifikasi setting telah berhasil disimpan.

 

Sekarang, saat kita mengakses blog kita via mobile, maka tampilannya akan berubah secara otomatis ke versi mobilenya. Wao, cukup mudah bukan? Ada yang tertarik mencobanya?

Kalau ada yang ingin ditanyakan atau ingin memberi tanggapan, silakan di share lewat kotak komentar ya kawan? Mari kita saling berbagi untuk hidup yang lebih berarti.
Salam blogger!

By: el fikri13 On 17.21

Continue Reading

Cara Menghapus Blog

Pernah tepikir untuk menghapus blog yang kita punya? Tapi tidak tahu cara menghapusnya? Mungkin dilatarbelakangi karena beberapa alasan pribadi dan bukan karena blog kita mengandung konten yang bisa di banned oleh google. So, bagaimana cara menghapus blog kita tersebut?

 

Pertama kita masuk dulu ke akun blogger milik kita.

Selanjutnya klik fitur pengaturan.

Klik bagian dasar.

Pada halaman tersebut di bagian alat blog akan terlihat beberapa pilihan, yaitu impor blog, ekspor blog, dan hapus blog. Pilih hapus blog.

 

Sebelum proses penghapusan dimulai akan muncul konfirmasi terlebih dahulu, apakah kita benar-benar ingin menghapus blog tersebut. Jika kita telah menghapusnya, maka kita dapat memulihkan kembali blog yang baru saja terhapus tersebut dalam tenggang waktu 90 hari. Kita juga diberikan pilihan apakah ingin mengekspor file-file postingan yang mungkin berguna dan perlu kita simpan. Mengekspor file merupakan proses download file postingan yang pernah kita publikasikan sebelumnya di blog yang akan kita hapus tersebut dalam bentuk file berekstensi .xml. fungsinya adalah saat kita ingin memasukan kembali postingan kita terdahulu, kita dapat mengimpor blog dengan cara memasukan file yang baru saja kita download tadi. Jadi, fungsinya di sini lebih bersifat pada backup data.

Klik hapus blog ini.

Sekarang blog kita pun sudah terhapus dan saat kita mengetikan URL blog kita maka akan muncul keterangan jika blog kita telah terhapus. Alamat yang baru saja kita hapus tersebut tidak dapat kita pergunakan lagi untuk beberapa waktu. Biasanya kita harus menunggu sampai kurang lebih satu tahun sebelum bisa menggunakan alamat blog itu kembali.

Bagaimana cara kita mengembalikan blog yang sudah kita hapus tersebut?

Selama masih dalam masa tenggang (kurang dari 90 hari dari waktu menghapus blog), kita masih dimungkinkan untuk memperbaiki dan memunculkan kembali blog kita. Akan tetapi, jika sudah lewat dari 90 hari maka blog kita pun sudah terhapus dan tidak dapat lagi dikembalikan seperti semula.

 

Cara memperbaikinya adalah pergi ke bagian dasbor. Pada dasbor akan terlihat blog yang kita hapus tersebut dan ini menandakan kalau blog tersebut masih mungkin untuk diperbaiki. Klik urungkan penghapusan blog ini. Dan kini blog yang telah kita hapus tersebut akan pulih kembali seperti semula.

Ada yang ingin menanggapi? Kalau ada yang masih ingin ditanyakan atau diragukan harap disampaikan lewat komentar ya kawan? Mari kita berbagi pengetahuan!
Salam blogger!

By: el fikri13 On 16.52

Continue Reading

Cara Membuat Search Box

Dalam mendesain tata letak blog, kadang kita membutuhkan kotak penelusuran yang harus kita tempatkan untuk mempermudah akses pengunjung dalam mencari informasi apa saja yang ada di blog kita. Kalau memang begitu, kita dapat memberikan kotak penelusuran bawaan yang sudah di sediakan oleh blogger. Akan tetapi, adanya pesan powered by google juga kadang membuat kita merasa kurang profesional dalam mendesain blog. Apalagi jika kotak penelusuran ini kita tempatkan pada posisi yang memang membutuhkan search box yang rapi, singkat, dan terlihat memiliki kesan yang profesional. Bagaimana cara membuat search box ini?

 

Mudah saja, ikuti langkah-langkah di bawah ini ;

Pertama seperti biasa langsung saja masuk ke akun blogger kita.
Klik fitur rancangan.
Klik add gadget dan pilih HTML/JavaScript.
Masukan kode HTML di bawah ini.

<form action="http://nama-blog-kita.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="40" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

Klik simpan dan jadi.

Keterangan :

• Ganti http://nama-blog-kita.blogspot.com dengan alamat URL blog kita masing-masing.
• Size="40" merupakan ukuran panjang search box. Ganti angkanya sesuai dengan selera dan lebar side bar atau posisi di mana kita meletakan search box tersebut di blog kita.

Sekarang blog kita sudah memiliki kotak penelusuran atau search box yang elegan dan terkesan profesional dari yang diberikan oleh google. Mudah bukan?

Ada tanggapan? Kalau ada yang belum jelas bisa ditanyakan lewat kotak komentar. Mari kita berbagi kawan..
Salam blogger!

By: el fikri13 On 23.11

Continue Reading

Membuat Label Blog Model Scroll

Label sangat penting dibutuhkan dalam sebuah blog. Karena dengan labeling yang baik akan semakin mempermudah pembaca dalam menemukan informasi yang mereka butuhkan dalam blog kita dengan cepat. Pemberian label untuk setiap postingan blog juga bermanfaat untuk mengarahkan pembaca agar lebih mudah dalam menyimpulkan tema seperti apakah yang diusung oleh blog kita. Karena peran label yang sangat penting inilah biasanya membuat label sering dipergunakan dan ditempatkan di halaman depan blog kita masing-masing.

 

Masalah akan muncul layaknya arsip blog yang kita bahas kemarin. Jika kita sudah blogging dalam waktu yang lama dan tema blog kita cenderung membutuhkan label yang banyak, pasti mau tidak mau penempatan label ini akan banyak memakan tempat. Lalu, bagaimana solusinya? Kita akan membungkus untuk meringkasnya dengan model scroll layaknya arsip blog dengan model scroll seperti kemarin.

Bagaimana caranya membuat label blog dengan model scroll ini?

Pertama seperti biasa kita log in dahulu ke akun blogger kita masing-masing.
Klik fitur rancangan.
Klik edit HTML.
Klik atau contreng kotak expand template widget.
# pada keyboard, tekan Ctrl + F untuk memunculkan kotak pencarian dalam edit HTML agar pencarian lebih mudah dilakukan.
Perhatikan kode HTML di bawah ini.

<b:widget id='Label1' locked='false' title='NAMA LABEL' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:100px;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Tambahkan kode yang berwarna merah untuk mengaktifkan fungsi scrolling pada blog kita.
Klik simpan dan kini blog kita pun sudah menampilkan label dengan model scroll.

Keterangan :

• Sebelum melakukan edit HTML template blog, selalu back up dengan cara download terlebih dahulu template blog kita untuk mengantisipasi kegagalan saat proses edit HTML berlangsung.
• Pada kode berikut, <div style='overflow:auto; width:ancho; height:100px;'>, angka 100px menunjukan tinggi scroll yang digunakan untuk membungkus label blog kita. Ubah sesuai selera.

Bagaimana? Cukup mudah kan? Dibutuhkan ketelitian dan kehati-hatian dalam melakukan edit HTML template blog ini. Karena jika tejadi kesalahan sedikit saja, maka bukan tidak mungkin hal ini akan membuat template blog tidak dapat bekerja dengan baik atau bahkan tidak bisa digunakan sama sekali.

Ada tanggapan? Kalau ada pengalaman silakan di share dengan yang lainnya ya kawan?
Salam blogger!

By: el fikri13 On 15.57

Continue Reading