Showing posts with label Mempercantik Blog. Show all posts
Showing posts with label Mempercantik Blog. Show all posts

Sunday, June 30, 2013

Cara Membuat Read More Otomatis Tanpa Javascript

Cara Membuat Read More Otomatis Tanpa Javascript - Ketika membuat blog baru, biasanya tampilan blog masih biasa-biasa saja. Artinya kita masih menggunakan tampilan blog yang diberikan oleh Blogger sendiri. Seiring dengan waktu, muncul kebosanan dan ingin menggantinya dengan yang lain. Ada yang menggunakan template yang dinamis, atau mengutak-atik tampilan blog sesuai keinginan.

Cara Membuat Read More Otomatis Tanpa Javascript

Cara Membuat Read More Otomatis Tanpa Javascript
Read More atau baca Selanjutnya dibuat agar tampilan blog terlihat lebih rapi dan elegan. Tujuannya agar tampilan bloh ketika pertama kali dibuka bisa terlihat banyak cuplikan artikel. (Baca disini Cara mempercantik Blog). Dengan begitu, pengunjung bisa melihat cuplikan-cuplikan yang ada di dalam blog kita dan memilihnya satu persatu. Perlu diketahui, bahwa cara membuat read more dibedakan menjadi dua, yaitu read more otomatis dan manual.

Read More cara menual, dengan memanfaatkan Insert Jump Break pada posting blog, dimana setiap kali ingin posting artikel baru, kita akan mengklik icon / fasilitas Insert Jump Break. Cara ini pastinya kita harus melakukannya setiap menulis artikel (bila lupa maka read more tidak muncul) --> Baca Disini selengkapnya mengenai Membuat Read More Cara Manual.

Sementara Cara Membuat Read More Otomatis ada dua juga, yaitu dengan menggunakan Javascript dan Tanpa Javascript. Read More Otomatis dengan menggunakan Javascript biasanya memanfaatkan pihak ketiga tempat penyimpanan data script. Seperti .JS dan lain-lain. Info yang Bos Tutorial himpun, bahwa menggunakan cara ini, Google sendiri tidak menyukainya. Bisa jadi alasannya banyak. Oh iya, apabila anda menggunakan template yang dinamis, biasanya sudang menggunakan cara ini. So... tidak usah lagi anda menggantinya dengan yang baru. (abaikan saja tulisan ini).

Cara Membuat Read More Otomatis Tanpa Javascript inilah yang akan kita paparkan disini. Cara ini tidak menggunakan situs pihak ketiga, karena langsung masuk ke script HTML blog kita. Menggunakan cara ini ada manfaatnya, dimana template blog anda akan menjadi lebih SEO Friendly dan ringan. Cara atau trik ini kita akan memanfaatkan kode yang digunakan oleh tampilan mobile blogspot, yaitu post snippet. Oleh karena itu, dalam script HTML blog kita, dilakukan penambahan kode. Ikuti beberapa langkah di bawah ini.

Langkah / Cara Membuat Read More Otomatis Tanpa Javascript
1. Bukalah Akun Blog anda yang sebenarnya (jangan blog orang lain) bila anda memiliki banyak blog dalam satu akun, silahkan pilih salah satu blog saja.
2. Pilih Elemen Template, kemudian lanjutkan dengan klik Edit HTML
3. Lalu cari kode ]]></b:skin>, untuk mempermudah silahkan menggunakan ctrl+f
4. Copy / salin kode di bawah ini dan letakkan tepat di atas kode ]]></b:skin>

.post-thumbnail{float:left;margin-right:20px}

5. Jangan beranjak dulu, masih seoutar edit HTML.
6. Cari kode <data:post.body/> apabila sudah ketemu silahkan Copy kode di bawah ini.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' width='72px' height='72px'/>
</b:if>
<data:post.snippet/>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

7. Setelah di copy, gantilah kode <data:post.body/> dengan kode yang barusan di copy.
8. Selesai. Simpan template blog anda.
9. Lihat hasilnya.

Demikianlah Cara Membuat Read More Otomatis Tanpa Javascript, apabila anda sudah menggunakan Template yang dinamis, abaikan saja ini. Semoga bermanfaat yah. Selamat mencoba. Salam blogger.

Tuesday, February 26, 2013

Cara Membuat Related Post Pada Blog

BOS TUTORIAL - Cara Membuat Related Post Pada Blog. Artikel Terkait itu bahasa Indonesianya. Namun para blogger lebih familiar dengan sebutan RELATED POST. Blog ini menggunakan bahasa RELATED ARTICLE, kebenaran bawaan dari template yang diberikan oleh mas kolis secara cuma-cuma. Tujuan cuma satu membantu para Pembaca / Pengunjung / Visitor agar bisa lebih gampang mencari postingan /artikel kita yang menyerupai atau satu Kategori / Label dengannya (postingan).

Cara Membuat Related Post Pada Blog

Cara Membuat Related Post Pada Blog
Disamping membantu para pengunjung, membuat Related Post / Related Article / Artikel Terkait / Kamu Harus Menyukai Ini / You Must Like This (ntah apalagi istilahnya... hehehe) juga Mempercantik Blog, sehingga terlihat Elegan/Profesional.

Tutorial ini berlaku bagi kawan-kawan yang menggunakann Related Post di dalam blognya. Apalbila sudah ada, silahkan jangan digubris yah... abaikan saja (baca-baca boleh dong).

Ada beberapa Cara Membuat Related Post Pada Blog
1. Dengan membuat Related Post tanpa gambar
2. Dengan membuat Related Post dengan gambar (thumbail)

Saya jelasin dulu yah satu-satu biar lebih paham.
1. Membuat Related Post tanpa gambar
Membuat Related Post tanpa gambar pada blog biasanya dilakukan di bawah Postingan. Meskipun ada yang ditempatkan di sidebar, namun lebih sering kita temukan di bawah postingan.

Ada banyak cara para blogger membuat related post di dalam blog yang mereka kelola. Antara lain dengan menggunakan Scroll dan tanpa menggunakan Scroll. Semua tergantung selera masing-masing. Pada blog Bos Tutorial ini sementara menggunakan Related Post tanpa Scroll. Terlihat lebih simpel sih. Tanpa menggunakan Scroll biasanya paling banyak artikel terkaitnya 10 artikel (lebih banyak juga tidak apa-apa), dan hanya di kaitkan pada 1 label atau kategori. Apabila Label / Kategori yang anda buat didalam blog anda lebih dari 1 Label/Kategori biasanya yang di kaitkan hanya 1 label / kategori saja. Sedangkan yang menggunakan Scroll bisa lebih dari 1 kategori / label.

2. Membuat Related Post dengan gambar (thumbail)
Penjelasannya hampir sama saja dengan diatas, bedanya ya related post menggunakan Gambar. Kelemahannya adalah apabila dalam postingan kawan-kawan tidak menggunakan Gambar, maka gambarnya tidak muncul.

Membuat Related Post dengan gambar (thumbail) ada 2 cara juga, pertama dengan menyatukan script (kode) related post pada blog kita. Cara kedua adalah dengan memanfaatkan pihak ketiga. Yang paling populer adalah menbuat related post dengan Linkwithin. Linkwithin adalah salah satu penyedia script untuk memasang related post di dalam blog kita. Masih ada lagi situs-situs pihak ketiga yang menyediakan cara ini, tapi Linkwihtin lebih familiar di mata para blogger.

Menggunakan related post ini semua tergantung anda mau pilih yang mana. Yang penting anda paham apa fungsi dan kegunaan related post.

Kelanjutannya simak Cara Membuat Related Post Pada Blog : (Bos Tutorial akan posting satu-persatu, yang sabar yah)
1. Cara Membuat Related Post di bawah Postingan (KLIK DISINI)
2. Cara Membuat Related Post Dengan Scroll (KLIK DISINI)
3. Cara Membuat Related Post Dengan Gambar (KLIK DISINI)
4. Cara Membuat Related Post Dengan Linkwithin.(KLIK DISINI)

Monday, February 18, 2013

Tampilan Template Baru Lagi di Blog

BOS TUTORIAL - Tampilan Template Baru Lagi di Blog. Ini yang kesekian kalinya saya mengganti template blog ini. Oh iya, kembali lagi saya update artikel di blog ini, setelah sekian lama tak pernah buka. Sebelumnya saya minta maaf kepada kawan-kawan karena baru bisa menyapa dan memberikan info terbaru.

Tampilan Template Baru Lagi di Blog

Tampilan Template Baru Lagi di Blog
Tampilan blog ini sebelumnya memang bagus. Cuma setelah saya pikir-pikit kok masih lambat. Akhirnya saya mencoba menggunakan template blog buatan Mas Kolis yang lumayan terkenal di jajaran perbloggeran. Memang terlihat sederhana. Namun untuk standar penulisan tutor cocok. Karena menurut saya, bahwa tampilan blog disesuaikan dengan isinya. Jadi singkron.

Tampilan template blog saya yang lama bisa anda lihat di bawah ini.

Tampilan Lama Template Blog Bos Tutorial

Demikian sekilas info mengenai Tampilan Template Baru Lagi di Blog yang hanya sekedar pemberitahuan saja. Oh iya bila ingin mengetahui Cara Mengganti Template Blog Pada Blogspot, silahkan KLIK SAJA DISINI. Salam dari kami. [Bos Tutorial]

Sunday, July 15, 2012

Tampilan Template Blog Bos Tutorial Yang Baru

Tampilan Template Blog Bos Tutorial Yang Baru | Bos Tutorial - Tampilan Template Blog Bos Tutorial Yang Baru. Akhirnya memperbaikin dan merubah Tampilan Blog Bos Tutorial selesai juga. Walau sepertinya sederhana dan simpel, tapi dipandang mata sangat menyejukkan (hahahah kayak pemandangan saja yah).

Tampilan Template Blog Bos Tutorial

Tampilan Template Blog Bos Tutorial Yang Baru
Template blog Bos Tutorial yang baru ini diambil dari mesin pencarian google dengan kata kunci Template Freed Blog, tempalate ini bernama BACEN, karena memang namanya di tulis begitu sih. Hehehe. Lalu Bos Tutorial modifikasi dengan menambahkan elemen-elemen lain seperti Related Post, Komentar dengan menggunakan Facebook. Perlu diketahui bahwa penggantian tampilan template blog bos tutorial adalah untuk mempercantik tampilan blog saja. (baca Cara mempercantik Tampilan Blog).

Mengenai elemen-elemen yang di dalam blog Bos Tutorial seperti Membuat Related Post, Membuat Kolom Komentar dengan Menggunakan Facebook serta lain-lainnya, nanti kita bahas yah.

Oh iya, bagaimana menurut kawan-kawan dengan Tampilan Template Blog Bos Tutorial Yang Baru ini. Berat kah atau lelet kah. Suka dengan Template Blog ini, tuliskan pesan anda dikomentar. Diharapkan saran dan kritikan kawan-kawan yah. Sampaikan saja di kolom komentar yah kawan. Terimakasih. Salam blogger. [Bos Tutorial]

Cara Membuat Read More Pada Blog Secara Otomatis

Cara Membuat Read More Pada Blog Secara Otomatis | Bos Tutorial - Cara Membuat Read More Pada Blog Secara Otomatis. Kawan-kawan masih menggunakan template bawaan dari blogspot? Tapi menginginkan tampilan seperti template yang dinamis dengan memasang Read More pada blog!. Jangan kwatir, Bos Tutorial akan membagikan tutorialnya yang Bos Tutorial beri judul Cara Membuat Read More Pada Blog Secara Otomatis.

Cara Membuat Read More Pada Blog Secara Otomatis
Tutorial ini ditujukan kepada kawan-kawan yang masih menggunakan template bawaan blogger. Bila sudah menggunakan template dinamis, ini diabaikan saja yah. Kelebihan menggunakan template bawaan blogger adalah kita tidak hutang budi sama penyedia template blog gratisan sehingga menanamkan link/URL-nya di dalam blog kita. Oleh karena itu, Cara Membuat Read More Pada Blog Secara Otomatis ini sangat perlu digunakan. Oh iya, Cara Membuat Read More Pada Blog Secara Otomatis merupakan salah satu cara mempercantik tampilan blog.


Beginilah Cara Membuat Read More Pada Blog Secara Otomatis
1. Tentunya kawan-kawan harus membuka akun blog kawan sendiri.
2. Bila sudah masuk blogger (dasbor) pilihlan elemen Template lalu klik Edit HTML lalu klik Lanjutkan.(klik disini bila belum paham tampilan blog)
3. Centang Expand Template Widget (ada tanda kotak disamping tulisan itu)
4. Lalu carilah kode </head> (gunakan Ctrl + F, untuk mempercepat pencarian) lalu salin/copylah Kode di bawah ini (klik Spoiler berikut) dan tempatkan pas diatas kode </head> tadi.
Klik Spoiler Berikut:
<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 150;
summary_img = 150;
img_thumb_height = 100;
img_thumb_width = 120;
</script>

<script type='text/javascript'>
//<![CDATA[

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>
5. Sudah ditempatkan kode di atas bukan. Selanjutnya cari kode <data:post.body/>  kemudian hapus kode <data:post.body/> tersebut dan gantikan kode scrip di bawah ini
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script>
<span style='float:right'><a expr:href='data:post.url'>Read More..</a></span>
<b:else/>
<data:post.body/>
</b:if>
6. Lalu simpan template blog anda kawan. Lihat hasilnya.

Klik disini untuk melihat contohnya.

Bagaimana Cara Membuat Read More Pada Blog Secara Otomatis di atas, gampang bukan. Sebenarnya menggunakan read more bisa kok secara manual, namun akan melakukan itu tiap memposting artikel yang baru. Penasaran dengan membuat read more secara manual, klik disini. Oh iya, selamat mencoba yah. Salam sukses. [Bos Tutorial]

Sunday, July 1, 2012

Membuat Daftar Isi di Blog

Membuat Daftar Isi di Blog | Bos Tutorial - Membuat Daftar Isi di Blog. Pada dasarnya, Daftar Isi di Blog hampir sama dengan arsip blog (baca : Memasang Widget Arsip Blog di Blogspot untuk membuat arsip blog). Perbedaannya adalah arsip blog disediakan langsung oleh blogger sementara membuat daftar isi di blog merupakan kreasi dari si pembuat blog dengan sedikit membuat script.
Membuat Daftar Isi di Blog juga merupakan salah satu untuk mempercantik tampilan blog. Walaupun demikian, membuat daftar isi di blog sangat memberikan kemudahan kepada pengunjung untuk menjelajahi blog anda.

Ada 2 cara membuat daftar isi di blog.
1. Membuat Daftar Isi di Blog dengan Manual
2. Membuat Daftar Isi di Blog dengan scroll
3. Membuat Daftar Isi di Blog berdasarkan Kategori / Label

Untuk kali ini Bos Tutorial akan memaparkan bagaimana cara Membuat Daftar Isi di Blog dengan Manual.

Langkah-langkah Membuat Daftar Isi di Blog dengan Manual:
1. Bukalah akun blog anda sendiri.
2. Buatlah sebuah postingan baru atau laman baru atau bisa juga buka widget baru (tergantung kesukaan anda) Bos tutorial sebaiknya buka postingan baru, karena disamping membuat daftar isi, postingan anda pun bertambah.. hehehehe.
3. Copylah Judul postingan yang pernah anda posting sebelumnya lalu buatlah link ke judul postingan itu.
4. Lakukanlah itu berulang-ulang sampai selesai.
5. Simpan atau publikasikanlah Daftar Isi blog anda.

Gampang bukan? Yah... tidak rumit. Kelemahan Membuat Daftar Isi di Blog dengan Manual adalah kita melakukannya berulang-ulang tiap kita membuat artikel / postingan baru. Kelebihannya adalah kita bisa mengatur posisi / letak / nomor urut saat membuat daftar isi.

Demikianlah postingan kali ini mengenai Membuat Daftar Isi di Blog dengan Manual. Jangan lewatkan untuk membaca postingan selanjutnya yah. Salam blogger. Salam sukses. [Bos Tutorial]