Cobalah Pelan-Pelan Ikuti Tutorial Blog Yang Kami Tampilkan

BOS TUTORIAL - Horas (Keluar Batak saya), Selamat berjumpa lagi Kawan-kawan Semua. Sehat semuanya? Harapan MasBro kita semua dalam keadaan sehat dan okay punya. Tak lupa saya mengucapkan TERIMAKASIH yang sebesar-besarnya Anda dan saya berjumpa kembali di Blog Bos Tutorial ini.

Saya heran, membaca komentar-komentar kawan mengenai tips atau tutorial yang kami paparkan kepada kawan-kawan sekalian yang ada di Blog Tutorial ini. Ada yang mengatakan Tidak Berhasil atau Tidak Bisa dan lain sebagainya. Jujur saya katakan, bahwa sebelum saya mempublikasikan Tips atau Langkah-langkah Tutorial Blog yang kami paparkan, kami sendiri sudah melakukannya (mempraktekkannya) di blog. Dan saya sendiri berani mempertaruhkan nama saya akan hal itu.

Satu hal yang bisa saya sampaikan kepada kawan-kawan adalah Cobalah Pelan-Pelan Ikuti Tutorial Blog Yang Kami Tampilkan. Dan saya bisa jamin pasti bisa. Seperti yang saya katakan tadi, sebelum saya mempublikasikannya, saya sendiri mencobanya terlebih dahulu.

Meskipun demikian, saya sarankan kepada kawan-kawan, jangan terlalu sering utak-atik tampilan blog yang anda kelola. Ada baiknya ketika anda sudah menggunakan sebuah template blog, sebaiknya gunakan saja template itu. Tidak usah ganti-ganti template blog baru. Yang lebih penting adalah, membuat artikel sebanyak-banyaknya. Apapun itu jenis artikelnya, yang penting posting saja. (Yang positif yah artikelnya).

Sebagai contoh, lihat saja blog saya yang sederhana ini. Tampilannya ya begini-begini saja. Tidak ada yang berbeda. Dari template blog yang saya pakai (Template ini berasal dari MasKolis.com) Saya pakai apa adanya. Cuma perubahan Recent Post (lihat Bagaimana Cara Membuat Recent Post ala Bos Tutorial). Itu saja rahasianya.

Sekali lagi pesan saya, Cobalah Pelan-Pelan Ikuti Tutorial Blog Yang Kami Tampilkan. Pasti bisa. Yang penting postinglah Artikel Sebanyak-banyaknya. Semoga bermanfaat. Tuhan memberkati. Horas.***

Catatan: Mau Diskusi dengan Saya lewat Facebook? Like Halaman Facebook saya yah.

Read More

Cara Memasang Rating, Pesan Kata "Terimakasih" dan Admin di Setiap Akhir Postingan Blog

BOS TUTORIAL - Lucu juga judul Postingan Kali ini. Panjang banget. Tapi tujuannya agar gampang di mengerti dan dicerna oleh kita semua. Hehehehehe....

Ehh... sebagai basa-basi nih, Baru-baru ini kan Harga BBM dinaikkan oleh Presiden Kita, Ir. Joko Widodo. Bagaimana tanggapan Anda mengenai hal ini. Kalao menurut MasBro sih, sah-sah saja. Asal tujuannya baik dan benar-benar penempatannya (dana subsidi). Eh... malah omongin soal Harga BBM.... maaf ya cuma basa-basi saja...

Kembali ke topik permasalahan. Sebenarnya alasan MasBro membuat tulisan ini dikarenakan ada Sahabat Mas Bro yang menanyakan hal itu di dalam komentar beberapa hari yang lalu. Sebelumnya saya mohon maaf karena baru membacanya. Karena baru berkesempatan membuka blog ini. Maafin yah...

Cara Memasang Rating, Pesan Kata "Terimakasih" dan Admin di Setiap Akhir Postingan Blog
Langusng saja yah ke intinya:
1. Seperti biasa, buka Akun Blog Anda sendiri.
2. Masuklah ke Elemen Template
3. Pilih Edit HTML lalu carilah kode <data:post.body/> (gunakan Ctrl+F untuk mencari kode dengan cepar)
4. Salin dan tempatkalah Kode Script di bawah ini tepat di bawah Kode <data:post.body/> tadi.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='margin-top:5px'>
<div itemscope='' itemtype='http://data-vocabulary.org/Review-aggregate'>
<div style='padding:5px; font-size:11px; float:left;'>
Terimakasih Anda telah membaca tulisan / artikel di atas tentang :<br/>
Judul: <span itemprop='itemreviewed'><b><data:post.title/></b></span><br/>
Rating: <span itemprop='rating' itemscope='' itemtype='http://data-vocabulary.org/Rating'>
<span itemprop='average'>100%</span>
</span>
based on <span itemprop='votes'>99998</span> ratings.
<span itemprop='count'>5</span> user reviews.<br/>
Ditulis Oleh <b><a href='https://plus.google.com/114981857040664646747'><data:post.author/></a></b><br/>
Semoga informasi mengenai <a expr:href='data:post.url'><data:post.title/></a> bisa memberikan manfaat bagi Anda. Jangan lupa <b>Komentar Anda</b> sangat dibutuhkan, di bawah ini.<br/>
</div>
</div>
</div>
</b:if>

5. Simpan template blog anda dengan mengklik Save Template
6. Selesai dan lihat hasilnya.

Catatan:

• Pilih kode <data:post.body/> yang tepat yah, Anda akan menemukan beberapa kode yang sama, so... pilih saja yang tepat. (bila gak tepat, nanti tidak akan muncul di dalam postingan, so... ulang lagi saja, jangan takut mencoba)
• Silahkan Anda ganti kata-kata di atas sesuai dengan keinginan Anda
• Apabila Anda tidak suka penempatannya di bawah artikel Anda atau di bawah kode <data:post.body/>, coba lihat tampilan postingan blog Anda dan bereksperimen sedikit.

Bagaimana? Gampang bukan. Sebagai hasilnya, silahkan lihat di bawah postingan ini.

Itulah tips dan trik yang bisa MasBro bagikan pada kesempatan kali ini. Harapan saya, semoga bermanfaat dan selamat mencoba yah. Salam Blogger, salam sukses. [Bos Tutorial]

Read More

Inilah Cara Memasang Kolom Komentar Facebook dan Blog Model Tab

Inilah Cara Cepat Memasang Kolom Komentar Facebook dan Blog Model Tab - Membuat Blog semanarik mungkin adalah keinginan para blogger. Semuanya bertujuan agar blog tersebut disukai dan disenangi dari segi design dan tata letak. Sehingga, penampilan dari blog tersebut bisa menarik perhatian para pengunjung blog. Tidak ketinggalan juga mempercantik tampilan kolom komentar pada blog.

Memasang Kolom Komentar Facebook dan Blog secara bersamaan merupakan salah satu cara mempercantik tampilan blog, khususnya tampilan postingan / artikel yang ada pada blog tersebut. Dimana Komentar-komentar dari pengunjung seakan-akan disembunyikan, dan komentar-komentar tersebut akan terlihat kembali apabila kita memilih berdasarkan Facebook atau Blog, bukan sepenuhnya dihilangkan (komentar tetap ada selama tidak kita hapus). Tujuannya adalah agar tampilan isi postingan terlihat ramping dan jelas (Apabila komentar artikel banyak loh).

Seperti inilah tampilan yang anda lihat bila Memasang Kolom Komentar Facebook dan Blog Model Tab

Inilah Cara Memasang Kolom Komentar Facebook dan Blog Model Tab
Langkah-langkah yang harus dilakukan adalah sebagai berikut:
1. Tentunya seperti biasa anda harus membuka akun blogger anda sendiri.
2. Pada Dasbor blog anda, masuk elemen Template, Lalu pilih Edit HTML
3. Cari Kode : <div class='comments' id='comments'>
4. Copy atau salin Kode Script yang tertera di bawah ini, dan selanjunya Pastekan tepat di bawah Kode : <div class='comments' id='comments'>

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/><fb:comments-count expr:href='data:post.url'/> Comments</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments</div>
<div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'><div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='550'/></b:if></div>
<div class='comments comments-page' id='blogger-comments-page'>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><script src='http://code.jquery.com/jquery-latest.js'/><meta content='IDFANPAGEFACEBOOK' property='fb:admins'/><script type='text/javascript'>function commentToggle(selectTab) {$(".comments-tab").addClass("inactive-select-tab");$(selectTab).removeClass("inactive-select-tab");$(".comments-page").hide();$(selectTab + "-page").show();}</script>

<style>.comments-page { background-color: #f2f2f2;}#blogger-comments-page { padding: 0px 5px; display: none;}.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}.comments-tab:hover { background-color: #eeeeee;}.inactive-select-tab { background-color: #d1d1d1;}</style>

5. Apabila sudah selesai, Simpanlah Template Blog anda.
6. Lihat hasilnya.

Catatan:

• Ganti IDFANPAGEFACEBOOK dengan Kode / No / Id Fan Page Facebook yang anda punya.
• Cara melihat IDFANPAGEFACEBOOK adalah: Masuklah ke Halaman Facebook Anda, lalu masuk lagi ke Pengaturan, Lihat Info Halaman, lalu lihat paling bawah sekali ada tulisan ID Halaman Facebook : 10026565009xxxx
• Anda tidak punya Halaman Facebook saat ini? Anda tidak perlu mengganti tulisan IDFANPAGEFACEBOOK di atas (saran sih gunakan Halaman Facebook) abaikan saja. Gunakan saja Kode Script di atas apa adanya.
• Ukuran atau panjang Kolomo Komentar FB sesuaikan dengan Ukuran Blog anda. Silahkan ganti angka yang berwana Ungu di atas. (width='550')
• Apabila kode <div class='comments' id='comments'> ada 2, pilih saja salah satu.

Bagaimana, gampang bukan. Demikianlah tips tutorial kali ini mengenai "Inilah Cara Memasang Kolom Komentar Facebook dan Blog Model Tab". Selamat mencoba dan salam sukses selalu. [Bos Tutorial]

Read More

Inilah Cara Penempatan Iklan Yang Tepat di Blog

Inilah Cara Penempatan Iklan Yang Tepat di Blog - Postingan MasBro sebelumnya adalah Bagaimana Cara Mendapatkan Uang / Pendapat di Blogger (baca disini lebih lanjut). Pada point yang ketiga dan seterusnya berhubungan erat dengan Penempatan Iklan di blog.

Penempatan iklan di blog yang dimaksud disini adalah meletakkan iklan pada blog secara strategis dan bisa menarik pengunjung agar mengklik atau tertarik untuk mengklik iklan yang kita pasang. Lebih bagusnya apabila iklan yang dipasang sesuai dengan isi postingan.

Oh iya, masih tertarik membaca tulisan ringan Bos Tutorial? Harapan MasBro sih demikian (sambil berdoa agar pengunjung selalu berlama-lama dan selalu hadir... hehehee.... Amin...).

Inilah Cara Penempatan Iklan Yang Tepat di Blog
Isi dari postingan ini bukanlah menggurui anda, ini hanya sekedar berbagi saja. Plus pengalaman MasBro ketika berkunjung ke beberapa blog-blog sobat sekalian dan beberapa situs portal berita. Dan satu lagi, kita sama-sama belajar.

1. Perhatikan Template Blog
Ketika kita ingin memasang iklan di blog, jangan pernah lupa untuk memperhatikan template atau tampilan dari blog kita. Baik tampilan awal maupun tampilan di dalam postingan. Dengan memperhatikan hal tersebut, blog anda akan terlihat keren. Artinya, tempatkanlah iklan tanpa merusak keindahan dari tampilan blog anda.

2. Perhatikan Iklan Yang dipasang
Ini hanya sekedar saran saja yah (bukan harus). Pilihlah iklan yang sesuai dengan konten blog anda. Sehingga terlihat MIX. Dari sisi tampilan bila kita lihat akan terlihat menarik. (Biasanya, iklan yang sesuai dengan postingan berasal dari Google Adsense) Point yang kedua ini bukanlah menjadi patokan, tapi kalao bisa kenapa gak. Betul... betul... betul...

3. Tata Letak Iklan
Jangan pernah membuat pengunjung kabur dari blog anda. Jangan pernah membuat isi postingan anda tertutup iklan tanpa dibarengi dengan tombol Tutup (Close / atau X). Dalam hukum dagang, bahwa pembeli adalah raja. Demikian halnya dengan blog (website/situs). Dimana visitor adalah raja, jadi layanilah sebaik mungkin.
Lakukan penawaran iklan sesuai dengan tempat yang anda tawarkan. Letakkan lah iklan di sebelah kanan atau kiri postingan (sidebar), di atas atau di bawah postingan, atau menggunakan iklan melayang (fload) yang diberi tombol tutup. Mengenai hal ini nanti kita bahas lebih lanjut (Baca DISINI)

4. Perhatikan kecepatan / Loading Blog
Pasang saja iklan sebanyak mungkin asal... Loading blog anda cepat. Tapi kebiasaan, semakin banyak iklan terpasang maka semakin berat pula loading blog.

5. Anda punya pandangan lain?

Mungkin tips ke 4 dan ke 5 Cara Penempatan Iklan Yang Tepat di Blog di atas sudah cukup rasanya. Semoga bermanfaat yah. Salam sukses menyertai kita. Salam Blogger. [Bos Tutorial]

Read More

Cara Cepat dan Mudah Mengganti Template Blog

Cara Cepat dan Mudah Mengganti Template Blog - Sebenarnya tulisan mengenai Mengganti Template Blog sudah banyak bertebaran dimana-mana (khusus blog yang berisikan tutorial blog). Anda sudah pernah membaca tulisan Bos Tutorial mengenai Cara Mengganti Template Blog Pada Blogspot di blog kesayangan kita ini bukan. Itu adalah cara yang lama. Meskipun demikian, itu masih bisa dilakukan, tapi hasilnya tidak sesuai keinginan kita. Karena tampilan blog akan terlihat amburadul. So... sebaiknya jangan pakai lagi cara itu. Bos Tutorial akan memberikan Cara Cepat dan Mudah Mengganti Template Blog.

Mungkin anda bertanya memangnya ada cara yang lain? Jawabnya tidak. Caranya hampir sama kok. Hanya cara yang akan kita paparkan sekarang adalah cara yang cepat dan mudah tanpa embel-embel lainnya.

Cara Cepat dan Mudah Mengganti Template Blog
Ada dua cara atau langkah yang harus kita lakukan,

Langkah Pertama

• Anda harus memiliki sebuah blog
• Anda sudah mempersiapkan Script / atau file template blog yang baru. Biasanya file tersebut bertype / ekstensinya *.XML atau *.TXT

Langkah Kedua
1. Bukalah akun blog anda (Dasbor Blog) pilihlah elemen Template lalu Pilih Edit HTML

2. Tinggalkan blog anda sejenak, lalu bukalah File / Script Template Blog yang baru anda simpan. Gunakan Program WORDPAD atau NotePad. (disarankan pakai WORDPAD) lihat gambar di bawah ini.

3. Masih di WORDPAD, Salinlah / Copy semua script template baru itu (gunakan CTRL + A lalu Copy)

4. Kembali lagi ke Blog Anda (lihat Gambar b pada langkah kedua bagian 1)

5. Arahkan mouse anda ke Script Template Blog, lalu tekan CTRL + A (pastikan semua tersorot / terblok)

6. Selanjutnya pastekanlah script template baru yang sudah di copy tadi (atau gunakan CTRL + V)

7. Simpanlah Template Blog anda (Klik Simpan Template)

8. Selesai dan lihat hasilnya.

Bagaimana, gampang bukan. Begitulah Cara Cepat dan Mudah Mengganti Template Blog pada blogspot. Selamat mencoba. Salam Blogger. [Bos Tutorial]

Catatan :

• Klik Gambar-gambar di atas bila ingin melihat ukuran yang besar.
• Bila anda ragu-ragu, simpan dahulu Template Blog lama anda (untuk jaga-jaga).
• Mengganti Template Blog merupakan salah satu untuk mempercantik blog.

Read More

Menampilkan Widget Tertentu Di Halaman Tertentu

Menampilkan Widget Tertentu Di Halaman Tertentu - Ketika kita sedang menuju blog seseorang, terlihat tampilan widget blog tersebut kadang ganti-ganti. Misalnya, di halaman depan Wigdet A, di halalaman lainnya Widget A tidak muncul. Ada apa gerangan....

Sebenarnya, ada beberapa cara yang dilakukan oleh blogger untuk melakukan hal tersebut. Maksudnya Menampilkan Widget Tertentu Di Halaman Tertentu. Mau tahu?

Beginilah caranya secara umum (tips ini tujuannya adalah mempercantik tampilan blog).

1. Menampilkan widget hanya di halaman depan saja (homepage)

<b:if cond='data:blog.url == data:blog.homepageUrl'>
......................................................
</b:if>

2. Menampilkan di semua halaman kecuali homepage.

<b:if cond='data:blog.url != data:blog.homepageUrl'>
......................................................
</b:if>

3. Menampilkan widget hanya di halaman Archive saja.

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

4. Menampilkan widget di semua halaman kecuali halaman archive.

<b:if cond='data:blog.pageType != &quot;archive&quot;'>
......................................................
</b:if>

5. Menampilkan widget hanya di halaman posting.

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

6. Menampilkan widget di semua halaman, kecuali halaman posting.

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

7. Menampilkan widget hanya di postingan tertentu saja.

<b:if cond='data:blog.pageType == &quot;alamat-postingan&quot;'>
......................................................
</b:if>

8. Menampilkan widget selain di postingan tertentu.

<b:if cond='data:blog.pageType != &quot;alamat-postingan&quot;'>
......................................................
</b:if>

9. Menampilkan widget hanya di halaman staticpages.

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

10. Menampilkan widget di semua halaman, kecuali halaman staticpages.

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
......................................................
</b:if>

Catatan : Tanda Titik - titik di atas adalah kode widget yang harus di tempatkan

Sebagai Contoh perhatikan di bawah ini.
Coba anda menuju Dunia Sarah. Di halaman depan Widget Fan Facebook tidak muncul. Lalu di halaman kedua ketika klik sebuah artikel, maka Widget Fan Facebook muncul. Untuk melakukan hal itu silahkan coba ikuti langkah berikut.

Menampilkan Widget Tertentu Di Halaman Tertentu
1. Tentunya anda harus buka akun blog anda sendiri.
2. Masuklah ke Elemen Template. Lalu klik Edit HTML
3. Carilah widget yang anda sembunyikan (sebelumnya anda sudah memasang widget di dalam blog anda).
4. Misalnya Widget Fan Facebook. Silahkan cari tulisan "Fan Facebook" (gunakan Ctrl + F untuk mencari secara cepat)
5. Setelah ketemu, maka akan muncul kode persis seperti dibawah ini.

<b:widget id='HTML4' locked='false' title='Fan Facebook' type='HTML'> <b:includable id='main'><!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if><div class='widget-content'><data:content/></div><b:include name='quickedit'/> </b:includable> </b:widget>

6. Selanjutnya tambahkan kode

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

sebelum kode

<!-- only display title if it's non-empty -->

7. Setelah ditambahkan lalu masukkan kode </b:if> sebelum kode

</b:includable>
</b:widget>

8. Maka hasilnya akan persis seperti di bawah ini.

<b:widget id='HTML4' locked='false' title='Fan Facebook' type='HTML'> <b:includable id='main'><b:if cond='data:blog.pageType == &quot;item&quot;'><!-- only display title if it's non-empty --><b:if cond='data:title != &quot;&quot;'><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>

9. Selesai. Simpan Template blog anda.

Catatan : Huruf yang berwarna biru adalah Kode yang ditambahkan. Ingat satuhal, penempatannya jangan salah yah. Harus pas. Kalao gak pas, maka eror. Untuk mengantisipasinya, sebaiknya sebelum memulai langkahlangkah di atas, Simpan Template Blog anda terlebih dahulu.

Okay sudah yah... Bos kira sudah cukup dulu mengenai Menampilkan Widget Tertentu Di Halaman Tertentu. Semoga bisa dipergunakan sebaik mungkin. Salam blogger semoga bermanfaat dan selamat mencoba.

Read More

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

Read More

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

Read More

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

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]

Read More

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]

Read More

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]

Read More

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]

Read More