Cara Membuat Spoiler Pada Blog

Cara Membuat Spoiler Pada Blog-Pada kesempatan ini Cara Design Blog akan memberikan tutorial cara membuat spoiler pada postingan blog.

Apa itu Spoiler?
Pernahkah kamu mengunjungi forum online di dunia maya semisak kaskus dan lainya? Kalau sudah pernah pastinya tahu penampakan spoiler seperti berikut ini

Biasanya dalam post atau threat menyertakan spoiler. Spoiler tersebut digunakan untuk meng-hide atau menyembunyikan suatu elemen postingan baik foto, tulisan, link, maupun video. 

Prinsip spoiler sistemnya buka-tutup atau Show-Hide. Jika spoiler diklik Show maka elemen postingan akan terbuka atau ditampilkan. Bila elemen sudah terbuka dan kita ingin menutup tinggal klik Hide.

Bagaimana cara membuat Spoiler?

Berikut ini  cara mudah membuat Spoiler pada postingan blog:

1. Membuat Spoiler untuk menyembunyikan teks atau artikel:

• Buka Dasbor Blog kamu
• Post > Buat Entri Baru
• 1. Klik: HTML, untuk memasukan elemen HTML seperti gambar berikut:

<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Spoiler for </b>
<input 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
<div class="alt2" style="background: #FAFAFA; border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">ISI DENGAN ARTIKEL ATAUTEKS</div></div>
</div>

Keterangan: 
-Teks warna hijau bisa kamu ganti dengan judul spoiler yang kamu kehendaki
-Tulisan yang berwarana merah silahkan diganti dengan teks yang akan disembunyikan

• 2. Klik Compose, setelah langkah no. 1

Berikut ini contoh tampilan spoiler untuk sembunyikan teks atau tulisan:
Untuk menampilkan atau melihat teks tinggal klik Show

Spoiler for

Inilah Liryk Lagu PSY-Gangnam Style : Psy Gangnam Style (강남스타일) (Lirik Asli Versi Korean) Oppan gangnam seutail Gangnam seutail Naje neun ttasaroun ingan jeogin yeoja Keopi hanjanui yeo yureul Aneun pumgyeog itneun yeoja Bami omyeon simjangi tteugeowo jineun yeoja Geureon banjeon itneun yeoja Naneun sanai Najeneun neoman keum ttasaroun geureon sanai Keopi siggido jeone Wonsyat ttaerineun sanai Bami omyeon simjangi teojyeo beorineun sanai Geureon sanai Areumdawo sarang seureowo Geurae neo hey geurae baro neo hey Aleumdawo sarang seureowo Geurae neo hey geurae baro neo hey Jigeum buteo gal dekkaji gabolkka Oppan gangnam seutail Gangnam seutail Oppan gangnam seutail Gangnamseutail Oppan gangnam seutail Eh- Sexy Lady Oppan gangnam seutail Eh- Sexy Lady oooo Jeong sughae boijiman Nol ttaen noneun yeoja Courtesy of Spotlirik.com Ittaeda sipeumyeon mukkeotdeon Meori puneun yeoja Garyeotjiman wenmanhan Nochul boda yahan yeoja Geureon gamgag jeogin yeoja Naneun sanai Jeom janha boijiman Nol ttaen noneun sanai Ttaega doemyeon wanjeon Michyeo beorineun sanai Geunyug boda sasangi Ultungbul tunghan sanai Geureon sanai Areumdawo sarang seureowo Geurae neo hey geurae baro neo hey Aleumdawo sarang seureowo Geurae neo hey geurae baro neo hey Jigeum buteo gal dekkaji gabolkka Oppan gangnam seutail Gangnam seutail Oppan gangnam seutail Gangnamseutail Oppan gangnam seutail Eh- Sexy Lady Oppan gangnam seutail Eh- Sexy Lady oooo Ttwineun nom geu wie naneun nom Baby baby Naneun mwol jom aneun nom Ttwineun nom geu wie naneun nom Baby baby Naneun mwol jom aneun nom You know what I'm saying Oppan gangnam seutail Eh- Sexy Lady Oppan gangnam seutail Eh- Sexy Lady oooo

2. Spoiler untuk menyembunyikan foto atau image

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Spoiler for Novi Hot</b> : <input 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;">
<div style="display: none;">
<imgsrc="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizl8SDvKkywCKzT8S_P9OXjWEtWjIfHh-qUkcnwfM1q-HDBr7ICDpPZr60M4FfNda82Fn3Ej1nwezCtKfnCnVqgzC57-bM9Q7L3no9hgmBPxiYd3pSpgk7CdX9yG4xezBsEYK3eAxp2js/s1600/Novi+Bikini.jpg" border="0" alt="indopoptop.blogspot.com">
</div>
</div>
</div> 

Keterangan:
-Tulisan warna hijau bisa kamu ganti dengan judul yang kamu mau
-Ganti URL yang berwarna merah dengan URL foto yang akan kamu sembunyikan

Contoh spoiler untuk foto, jika ingin melihat foto tinggal klik Show

Spoiler for Novi Hot :

3. Spoiler untuk menyembunyikan video

<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Spoiler for Video PSY-Gangnam Style</b> : <input 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;">
<div style="display: none;">

 <div class="separator" style="clear: both; text-align: center;"><object class="BLOG_video_class" contentid="209a1b1ea11d2563" height="226" id="BLOG_video-209a1b1ea11d2563" width="320"></object></div>

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

Keterangan:

-Tulisan warna hijau silahkan diganti dengan judul spoiler video

-Kode HTML warna merah ganti dengan separator video  yang akan disembunyikan


Sebagai contoh spoiler video:
Jika ingin membuka tinggal klik Show

Spoiler for Video PSY-Gangnam Style :

Read more

Cara Memasukan Gambar Pada Postingan Blog

 

Cara Memasukan Gambar Pada Postingan Blog-Untuk menambah daya tarik pengunjung blog sudah lazim di kalangan blogger menambahkan atau memasukan gambar pada postingan blog.

Bagaimana cara memasukan gambar pada postingan blog?
Kali ini Cara Design Blog akan membuat postingan cara mudah memasukan gambar atau insert image pada postingan blog.
Silahkan ikuti tutorial cara memasukan gambar pada postingan blog berikut ini:
Saya anggap Anda sudah berada di halaman Dasbor Blog Anda dan sudah di halaman Entri Baru.
Selanjutnya ikuti langkah berikut:
1. Klik ikon Insert Image 
Setelah masuk halaman edit entri baru silahkan Klik: Insert image, Seperti ditunjkan pada gambar berikut:

2. Klik Piih file
Anda akan dibawa menuju dokumen tempat anda menyumpan file di komputer. Dan pilih atau klik foto atau gambar yang Anda ingin tampilkan di postingan blog.

3. Klik: Add Selected
Klik Add Selected  untuk memasukan gambar ke halaman entri blog. Tunggu sampai proses upload selesai atau muncul di halaman edir postingan.

Demikian cara mudah memasukan gambar atau insert image pada postingan blog.

Read more

Cara Mudah Membuat Navigasi Breadcrumbs di Blogger

Cara Mudah Membuat Navigasi Breadcrumbs di Blogger-Pada kesempatan ini Cara Design Blog akan memberikan tutorial blogger cara mudahmembuat navigasi breadcrumbs pada blog.
Apa arti dan fungsi dari navigasi breadcrumbs itu?
Navigasi Breadcrumbs adalah bantuan navigasi yang digunakan dalam user interface sebuah website ataupun blog. Hal ini memungkinkan pengguna untuk melacak lokasi halaman atau dokumen dengan mudah.

Navigasi Breadcrumbs biasanya dibuat horizontal di bagian atas postingan blog maupun halaman web. Para blogger sering meletekan navigasi breadcrumbs ini di bawah bar judul atau header. Breadcrumbs yang juga di sebut Rootlink ini menyediakan link kembali ke halaman sebelumnya (beranda), setiap pengunjung menggunakan navigasi breadcrumbs ini untuk menuju ke halaman saat ini  atau di situs-hirarkis struktur-halaman induk yang sekarang.
Breadcrumbs memberikan jejak bagi pengguna untuk mengikuti kembali ke titik awal atau entri. Simbol (>) sering berfungsi sebagai pemisah hirarki. Namun banyak juga blogger yang memakai simbol (»).

Struktur dari Navigasi Breadcrumbs pada umumnya seperti ini:
Home page > Section page > Subsection page
Manfaat dari membuat navigasi breadcrumbs adalah membuat blog lebih SEO Friendly. Blog yang sudah menggunakan navigasi breadcrumbs memiliki daya untuk  SEO dan SERP di Google Search Engine dibanding blog yang tidak memakai breadcrumbs. 

Bagaimana cara membuat navigasi breadcrumbs itu?
Untuk menjawab pertanyaan ini perkenankan Cara Design Blog memberikan tutorial blogger cara mudah membuat navigasi breadcrumbs. 
Berikut ini tutorial cara mudah mudah membuat navigasi breadcrumbs :

1. Masuk Dasbor Blog Kamu
2. Template > Edit HTML > Lanjutkan > Exspand Widget Template
3. Cari: ]]></b:skin>
4. Letakan kode beikut tepat diatas ]]></b:skin>

.breadcrumbs {
 padding:5px 5px 5px 0px;
 margin: 0px 0px 15px 0px;
 font-size:95%;
 line-height: 1.4em;
 border-bottom:3px double #e6e4e3;
 }

5. Cari: <b:includable id='main' var='top'>
6. Letakan kode berikut di atas kode no.:5.

 <b:includable id='breadcrumb' var='posts'>
 <b:if cond='data:blog.homepageUrl == data:blog.url'>
 <!-- No breadcrumb on home page -->
 <b:else/>
 <b:if cond='data:blog.pageType == "item"'>
 <!-- breadcrumb for the post page -->
 <p class='breadcrumbs'>
 <span class='post-labels'>
 <a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
 <b:loop values='data:posts' var='post'>
 <b:if cond='data:post.labels'>
 <b:loop values='data:post.labels' var='label'>
 <b:if cond='data:label.isLast == "true"'> »
 <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
 </b:if>
 </b:loop>
 <b:else/>
 »Unlabelled
 </b:if>
 » <span><data:post.title/></span>
 </b:loop>
 </span>
 </p>
 <b:else/>
 <b:if cond='data:blog.pageType == "archive"'>
 <!-- breadcrumb for the label archive page and search pages.. -->
 <p class='breadcrumbs'>
 <span class='post-labels'>
 <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>
 </span>
 </p>
 <b:else/>
 <b:if cond='data:blog.pageType == "index"'>
 <p class='breadcrumbs'>
 <span class='post-labels'>
 <b:if cond='data:blog.pageName == ""'>
 <a expr:href='data:blog.homepageUrl'>Home</a> » All posts
 <b:else/>
 <a expr:href='data:blog.homepageUrl'>Home</a> » Posts filed under <data:blog.pageName/>
 </b:if>
 </span>
 </p>
 </b:if>
 </b:if>
 </b:if>
 </b:if>
 </b:includable>

6. Preview/pratinjau untuk melihata apakah ada kesalahan dalam input kode kode tersebut. Kalau tidak ada kesalahan lanjutkan langkah no.:7.

7. Save Template.
Selesai, Sekarang lihat blog kamu.

Read more

Cara Membuat Tombol Share Button di Atas Postingan Blog

Cara Membuat Tombol Share Button di Atas Postingan Blog-Setelah kamu tahu cara membuat blog dan sudah membuat postingan blog atau artikel blog, tentunya kamu berharap artikel blog yang kamu buat ingin di ketahui dan dikunjungi banyak orang. Salah satu cara meningkatkan pengunjung adalah dengan sharing artikel blog kamu ke social media. 
Artikel blog bisa kamu share ke facebook, twitter, google+ dan social media lainya.
Dengan memasang share button di halaman blog, akan memudahkan pengujung atau pembaca untuk men-share artikel tersebut ke sosial media dengan share buttun tersebut yang membuat halaman blog kamu semakin banyak pengunjung.
Dan itulah salah satu keuntungan memasang share button di blog yaitu meningkatkan traffic blog.

Diantara sosial bookmark yang biasa dipasang pada blog antara lain; facebook, Twitter, Google+, Digg, Google  Buzz dan masih banyak lagi. Namun jika kita harus menambahkan share button untuk masing-masing social media itu akan memakan waktu.
Terus bagaimana cara memsang share button yang mudah dimana  bisa mencakup seluruh social media bookmarking yang ada?
Caranya dengan membuat share button dari Addthis di blog. Untuk memberi kemudahan memasang share button dari Addthis, maka pada kesempatan ini Cara Design Blog akan memberikan tutorial blogger tentang cara membuat share buttun pada blogger. 
Sudah siap menyimak?
Berikut ini langkah-langkah cara membuat share button pada blogger:
1. Masuk Dasbor Blog kamu.
2. Template > Edit HTML > Lanjutkan > Exspand Template Widget
3. Cari: <data:post.body/> 
3. Silahkan pilih salah satu model kode share button berikut:

• Kode Share Button model 1:

 <!-- AddThis Button BEGIN --><b:if cond='data:blog.pageType == &quot;item&quot;'><div class="addthis_toolbox addthis_default_style "><a class="addthis_button_facebook_like" fb:like:layout="button_count"></a><a class="addthis_button_tweet"></a><a class="addthis_button_google_plusone" g:plusone:size="medium"></a><a class="addthis_counter addthis_pill_style"></a></div></b:if><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e71fdea5bff8d67"></script><!-- AddThis Button END -->

•  Kode Share Button model 2:

 <!-- AddThis Button BEGIN -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div></b:if>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e71feed783c3890"></script>
<!-- AddThis Button END -->

•  Kode Share Button model 3:

 <!-- AddThis Button BEGIN -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div></b:if>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4e71ff8750bee738"></script>
<!-- AddThis Button END -->

4. Letakan kode share button yang kamu pilih diatas <data:post.body/> Jika kamu ingin meletakan share button di atas postingan blog. Letakan dibawah <data:post.body/> jika ingin meletakan share button di bawah postingan blog.

5. Save template.
Selesai, sekarang lihat blog kamu.

Related Search:cara membuat tombol share button,cara membuat tombol share button di atas postingan,cara memasang tombol share button,cara memasang tombol share button di atas postingan,cara membuat tombol share button di bawah postingan, cara memasang tombol share button di bawah postingan

Read more

Cara Membuat Related Post With Thumbnail

Cara Membuat Related Post With Thumbnail-Pada postingan sebelumnya Cara Design Blog sudahk memberikan tutorial blogger cara membuat related post. Namun related Post itu tanpa thumbnails atau tanpa gambar atau image. Related post with thumbnail ini karena menyertakan gambar maka akan menarik pengunjung untuk mengunjungi halaman terkait. Fungsi dari related post silahkan simak pada artikel cara membuat related post sebelumnya.

Tampilan related post with thumbnail silahkan lihat screenshoot di atas.
Kali ini ijinkanlah Cara Design Blog memberikan tutorial cara membuat related post with thumbnail. 
Sudah siap menyimak tutorial blogger yang akan saya sampaikan?
Oke, Mari kita simak bersama cara membuat related post with thumbnail berikut ini:

1. Masuk Dasbor Blog kamu.

2. Template > Edit HTML > Lanjutkan

3. Centang Exspnd Template Widget

4. Cari kode: </head>

5. Letakkan kode berikut diatas </head>

<!--Related Posts with thumbnails Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts {
float:center;
height:100%;
min-height:100%;
padding-top:10px;
padding-left:15px;
padding-right:15px;
}
#related-posts h2{
font-size: 1.3em;
color: black;
font-family: Arial;
margin-bottom: 0.75em;
}
#related-posts a{
color:black;
}
#related-posts a:hover {
background-color:#eeeeee;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBb2p8vrSNq8Q85vcn8Q4FPdx4EFtZlpNWoBk9VNWgBow7zVfE5L6BF0ZBEmwaKHnUbaz_t0Iko2pHxUVag_i2yhIbfyNXmV2WcVZpElXrA58KmMUkt_M1Dvk3IdIt5aErnWdiPDIE8lYD/";
var maxresults=5;
var splittercolor="#cccccc";
var relatedpoststitle="Artikel Terkait:";
</script>
<script src='http://hbhost.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails End-->

Keterangan kode:  

• Kode:#cccccc warna hijau pada kode diatas bisa kamu ganti dengan kode warna yang kamu suka. var plittercolor: garis pembatas antar related post with thumbnail.
• Tulisan Artikel Terkait warna hijau di atas bisa kamu ganti dengan kata yang kamu suka.

6. Cari:<p class='post-footer-line post-footer-line-1'/>
7. Letakan kode berikut ini tepat di bawah kode no.:6.

<!-- Related Posts with ThumbnailsCode Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></b:if>
<!-- Related Posts with Thumbnails Code End-->

Keterangan kode:  

• Angka 6 warna hijau pada kode di atas bisa kamu ganti dengan jumlah related post yang ingin kamu tampilkan.

8. Save Template.
Selesai, silahkan lihat blog kamu.


Tags:cara membuat related post, cara membuat related post with thumbnail

Read more

Cara Membuat Related Post

Cara Membuat Related Post-Dalam postingan blog kali ini Cara Design Blog akan memberika tutorial blogger cara membuat related post. Sebelum memberikan tutorial membuat related post pada blog. 
Perlu dijelaskan dahulu apa itu related post dan apa fungsi dari related post.
Related post diartikan sebagai sekumpulan link artikel yang terkait dengan artikel yang sedang dikunjungi. Artikel ini terkait karena kesamaan tema. Dalam postingan terdahulu Cara Design Blog membuat tutorial blog cara membuat label blog. Disinilah peran label blog. Label blog menghubungkan halaman yang kita kunjungi dengan halaman lain yang terkait atau memiliki label yang sama.
Lihat tampilan screenshoot related post Cara Design Blog berikut: 

Sekarang apa fungsi atau manfaat dari related post tersebut. Realated post memudahkan pengujung blog untuk mencari dan menemukan artikel yang terkait dengan halaman yang dikunjungi. Fungsi lain dari related post lainya membuat blog lebih SEO friendly. 

Bagaimana cara mudah membuat related post?
Mari simak tutorial blogger cara membuat related post berikut ini:
1. Masuk Dasbor Blog kamu.
2. Klik: Template >> Edit HTML > Lanjutkan >  Expand Widget Template.
3. Cari kode: ]]></b:skin>
Cara mudah mencari: CTR+F, Find: ]]></b:skin>

4. Letakan kode berikut Tepat di atas kode ]]></b:skin>

 #related-posts { float : left; width : 468px; margin-left : 5px; font-size: 12px; line-height : 1.8em; margin-bottom:10px; }
#related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; }
#related-posts a { text-decoration : none; }
#related-posts a:hover { text-decoration : none; }
#related-posts ul { margin : 10px 5px 5px 20px; padding : 0; }

5. Cari kode: </head>
6. Letakan kode berikut tepat di atas kode no.:5.

<script src='http://hbhost.googlecode.com/files/Related-posts.js' type='text/javascript'

7. Cari kode: <data:post.body/>
Jika kode itu ada dua, pilih yang ke dua.

8. Letakan kode berikut tepat dibawah kode  <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<div style='font-size:18px'><b>Related Posts:</b></div>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if>
</b:loop>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
</b:if>

Keterangan: Tulisan "Related Post" yang saya tulis hijau di atas bisa kamu ganti dengan More About, Baca Selengkapnya atau More. Terserah kamu mana yang kamu sukai.

9. Save Template.
Selesai, silahkan lihat tampilan blog kamu.

Read more

Cara Membuat Read More Otomatis Pada Blogger

Cara Membuat Read More Otomatis Pada Blogger-Kali ini Cara Design Blogger akan memberikan tutorial blogger cara membuat read more otomatis pada blogger. Sebenarnya apa fungsi read more otomatis itu? Mengapa para blogger menerapkan read more otomatis pada blog mereka?
Coba perhatikan screen shoot dari blog Cara Design Blog ini yang menggunakan read more otomatis.

Fungsi dari read more adalah untuk memenggal artikel blog di halaman Beranda atau Home. Dengan menerpkan read more otomatis setiap postingan artikel blog hanya ditampilkan Judul dan satu paragraf saja. Penggunaan read more otomatis ini juga membuat tampilan blog  menjadi lebih cantik dan mempercepat loading blog. Jika pengunjung ingin membaca postingan blog secara keseluruhan tinggal klik read more. 
Read more sendiri artinya Baca selengkapnya. Untuk menampilkan semua artikel rekan blogger yang lain ada yang memakai More about, More atau memakai Bahasa Indonesia; Baca Selengkapnya atau Selengkapnya.

Terus bagaimana cara  membuat read more otomatis? 
Baiklah, mari kita simak bersama tutorial blogger cara membuat read more otomatis berikut ini:

1. Masuk ke Dasbor Blog kamu.
2. Klik Template >> Edit HTML >> Lanjutkan >> Centang Exspand Template Widget
3. Cari </head>
Cara mudah mencari: Tekan CTR+F, Find:</head>

4. Masukan kode berikut letakan Tepat di atas kode </head>

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 280;
summary_img = 250;
img_thumb_height = 70;
img_thumb_width = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+"..."}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 2px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>
</b:if>
</b:if

Keterangan kode:

• summary_noimg = 300 adalah jumlah karakter yang ditampilkan
• summary_img = 250 adalah Image yang ditampilkan (jika artikel ada gambarnya)
• img_thumb_height = 60 adalah tinggi image ditampilkan
• img_thumb_width = 90 adalah lebar image ditampilkan
• Angka-angka ini bisa kamu sesuaikan dalam membuat read more otomatis.

5. Cari <data:post.body/>
Jika ditemukan ada dua <data:post.body/> pilih kode yang pertama.

6. Letakan kode berikut ini Tepat di bawah kode no.:5.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script
type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE -
<data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

7. Save Template.
Selesai, sekarang lihat perubahan tampilan blog kamu.
Ternyata mudah ya cara membuat read more otomatis di blogger.

Read more

Cara Menghilangkan Navbar Blogger

Cara Menghilangkan Navbar Blogger-Meski navbar telah di sembunyikan dengan cara menyembunyikan navbar blog, namun ternyata masih navbar tersebut sebenarnya masih ada hanya disembunyikan. Terus bagaimana caranya agar navbar blogger itu bisa hilang dari blog?

Untuk itu dalam postingan kali ini Cara Design Blog membuat artikel blog tutorial blogger cara menghilangkan navbar blogger. Sudah siap menyimak langkah-langkah menghlangkan navbar blogger?
Mari kita simak bersama cara menghilangkan navbar blog berikut ini;
1. Masuk ke Dasbor Blog kamu
2. Klik Tata letak 
3. Arahkan ke Navbar
4. Klik: Edit. Lihat petunjuknya pada gambar-1 di bawah ini:

Gambar-1 

 2. Pilih Off dengan cara meng-Klik radio button seperti pada gambar di bawah ini:

Gambar-2

 3. Simpan

Setelah meangikuti langkah-langkah cara menghilangkan navbar blog, akhirnya navbar blog bisa dihilangkan. Silahkan lihat perubahan blog seperti gambar-3 di bawah.

Gambar-3

Ternyata sangat mudah ya cara menghilangkan navbar blog.

Read more

Cara Menyembunyikan Navbar Blogger

Cara Menyembunyikan Navbar Blogger-Kalau kamu mempunyai blog yang menggunakan template blog bawaan blogger pasti pada tampilan blog kamu ada navbar atau navigator bar bawaan blogger seperti di bawah ini:

Atau memakai salah satu konfigurasi Navbar seperti di bawah ini:

Jika ingin menyembunyikan navabar blogger tersebut, Cara Design Blog akan memberi Tips Blogger cara menyembunyikan navbar blogger.
Silahkan kamu ikuti langkah-langkah cara menyembunyikan navbar blogger berikut ini:

1. Masuk ke Dasbor Blogger kamu
2. Klik: Template
3. Klik: Edit HTML
4. Klik: Lanjutkan
5. Klik: Expand Template Widget
6. Cari kode: ]]></b:skin>
Cara mudah mencari: CTR+F , Masukan: ]]></b:skin>
7. Masukan kode berikut tepat diatas ]]></b:skin>

#navbar-iframe {

height:0px;

visibility:hidden;

display:none;

}

8. Save Template. 

Selesai, sekarang coba lihat blog kamu navbarnya sudah tidak kelihatan.

Gimana mudahkan cara menyembunyikan navbar blogger

Read more