Kamis, 01 November 2012

Memasang Widget Sharing is Caring Di Bawah Postingan Blog

Memasang Widget Sharing is Caring Di Bawah Postingan Blog
Widget Sharing is Caring
Cara Memasang Widget Sharing is Caring Di Bawah Postingan Blog-Memasang widget sharing atau membuat sosial bookmark di blog menajdi keharusan di era social media sekarang ini. Dengan tombol sharing tersebut pengunjung dapat men-share artikel blog tersebut ke akun facebook, twitter, google+ dan lainya. Pada postingan sebelumnya Cara Design Blog sudah memberika tutorial blogger cara membuat tombol share button di bawah postingan blog.

Pada kesempatan ini saya akan berikan tips blog cara membuat widget sharing is Caring di bawah postingan blog.
Apa fungsi widget sharing is caring?
Funginya sama seperti share button lainya, yaitu untuk memudahkan pengunjun untuk sharing atau berbagi artikel blog ke sosial media. Namun tampilan widget ini lebih cantik.


Bagaimana cara memasang widget sharing is caring?

Silahkan ikuti tips blogger berikut ini:

1. Login Dasbor Blog.
2. Template > EDIT HTML > Centang Expand Widget Template.
3. Cari kode <data:post.body/>

Biar lebih mudah mencari pake CTR+F

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


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='http://blazerracing.blogspot.com/'><img alt='Blazer Blog' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/s1600/best+blogger+tips.png'/></a><style>
img{border:0;}
#wrapper{width:488px; height:110px; background-image:url(http://4.bp.blogspot.com/_rKG-ziTSNUQ/TOaed31zc8I/AAAAAAAACO8/534zFFe2u_0/s1600/sharing+is+caring+hearts.jpg); position:relative; background-repeat:no-repeat; background-color:transparent;}
#wrapper ul{position:absolute; width:600px; top:42px; left:3px; list-style-type:none;}
#wrapper li{float:left;}
</style>
<div id='wrapper'>
<ul>
<li>
<!-- Facebook -->
<a expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Share On Facebook' height='48' src='http://4.bp.blogspot.com/_rKG-ziTSNUQ/TOagqwq3OGI/AAAAAAAACPI/bME2dWPpn_0/s1600/facebook.png' width='48'/></a>
</li>
<li>
<!-- Digg -->
<a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Digg This Post' height='48' src='http://4.bp.blogspot.com/_rKG-ziTSNUQ/TOaieu9vfSI/AAAAAAAACPk/78Ii_ygGBtU/s1600/digg.png' width='48'/></a>
</li>
<li>
<!-- Stumbleupon -->
<a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Stumble This Post' height='48' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TOagKuDqChI/AAAAAAAACPA/lxZJOhJENrA/s1600/stumble.png' width='48'/></a>
</li>
<li>
<!-- Twitthis -->
<a expr:href='&quot;http://twitthis.com/twit?url=&quot; + data:post.url' rel='nofollow' target='_blank'><img alt='Tweet This Post' height='48' src='http://1.bp.blogspot.com/_rKG-ziTSNUQ/TOagslBDv6I/AAAAAAAACPY/TaoVTOxzWSo/s1600/twitter.png' width='48'/></a>
</li>
<li>
<!-- Delicious -->
<a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Save Tis Post To Delicious' height='48' src='http://1.bp.blogspot.com/_rKG-ziTSNUQ/TOagvrxLHNI/AAAAAAAACPg/Qr5X9G5Frb8/s1600/delicious.png' width='48'/></a>
</li><li>
<!-- Design Float -->
<a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Float This Post' height='48' src='http://1.bp.blogspot.com/_rKG-ziTSNUQ/TOagqf-dP2I/AAAAAAAACPE/RscvMGavqlU/s1600/designfloat.png' width='48'/></a>
</li><li>
<!-- Reddit -->
<a expr:href='&quot;http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'><img alt='Share On Reddit' height='48' src='http://3.bp.blogspot.com/_rKG-ziTSNUQ/TOagrpbZVII/AAAAAAAACPQ/dngIdFG2arY/s1600/reddit.png' width='48'/></a>
</li><li>
<!-- Technorati -->
<a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url' rel='nofollow' target='_blank'><img alt='Bookmark On Technorati' height='48' src='http://4.bp.blogspot.com/_rKG-ziTSNUQ/TOagsHvPMEI/AAAAAAAACPU/dKQ9SgFZrec/s1600/technorati.png' width='48'/></a>
</li></ul></div>
</b:if>

5. Klik Preview.
Untuk melihat apa masih ada galat atau kesalahan. Bila ada kesalahan silahkan diulangi lagi dan pastikan kode diletakan sesuai petunjuk. Jika tidak ada kesalahan lanjutkan ke langkah berikutnya.

6. Save Template.
Sekarang widget sharing is caring di blog kamu sudah siap.

Minggu, 28 Oktober 2012

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:
Cara Membuat Spoiler Pada Blog

<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="http://1.bp.blogspot.com/-3elKSlDG2eo/UIyoFysyg2I/AAAAAAAACoA/_vLEj1KTywc/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 :
Hihihihi...


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 :


Sabtu, 20 Oktober 2012

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:

Cara Memasukan Gambar Pada Postingan Blog

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.

Cara Memasukan Gambar Pada 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.

Kamis, 18 Oktober 2012

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.


Rabu, 17 Oktober 2012

Cara Membuat Tombol Share Button di Atas Postingan Blog

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





Selasa, 16 Oktober 2012

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="http://lh5.ggpht.com/_15FopxVONSo/TD3yhixJLoI/AAAAAAAADaY/gk-KFA5_m7w/noimage.png";
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

Minggu, 14 Oktober 2012

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.