Home / Archive October 2012

Cara Membuat Spoiler Pada Blog

Posted by Unknown on Sunday, 28 October 2012 at 19:30

<div dir="ltr" style="text-align: left;" trbidi="on">
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 
 
 
<div class="separator" style="clear: both; text-align: center;">
</div>
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. 
<h3>
<a href="http://cara-design.blogspot.com/2012/10/cara-membuat-spoiler-pada-blog.html">Bagaimana cara membuat Spoiler?</a></h3>
Berikut ini  cara mudah membuat Spoiler pada postingan blog: 
<h4>
1. Membuat Spoiler untuk menyembunyikan teks atau artikel:</h4>
<div>
<ul>
<li>Buka Dasbor Blog kamu</li>
<li>Post > Buat Entri Baru</li>
<li>1. Klik: HTML, untuk memasukan elemen HTML seperti gambar berikut:</li>
</ul>
</div>
<div>
</div>
<div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5LoZBGeipSPcCJb-rL_7jEU7G6fNard6_pMGdvYjXan_gLmkFAWumzFjuiwo6j9cHssgi1Cp4bFT2cAlIRSyxq-RSxggaQOywxzOXUsCk0UqoBMUwBfQznWT1ysyRFGnp5rQL31mRGAXf/s1600/Cara+Membuat+Spoiler+Pada+Blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Spoiler Pada Blog" border="0" height="146" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5LoZBGeipSPcCJb-rL_7jEU7G6fNard6_pMGdvYjXan_gLmkFAWumzFjuiwo6j9cHssgi1Cp4bFT2cAlIRSyxq-RSxggaQOywxzOXUsCk0UqoBMUwBfQznWT1ysyRFGnp5rQL31mRGAXf/s1600/Cara+Membuat+Spoiler+Pada+Blog.png" title="Cara Membuat Spoiler Pada Blog" width="320" /></a></div>
 </div>
<blockquote class="tr_bq">
<div style="margin: 5px;"> <div class="smallfont" 
style="margin-bottom: 2px;">Spoiler for <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></blockquote>
<div class="separator" style="clear: both; text-align: center;">
</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 
<ul>
</ul>
 
<ul>
<li>2. Klik Compose, setelah langkah no. 1 </li>
</ul>
 
<div class="separator" style="clear: both; text-align: center;">
</div>
 
Berikut ini contoh tampilan spoiler untuk sembunyikan teks atau tulisan: 
Untuk menampilkan atau melihat teks tinggal klik Show 
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
Spoiler for 
<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;">
<a href="http://indopoptop.blogspot.com/2012/09/inilah-lirik-lagu-psy-gangnam-style.html">Inilah Liryk Lagu PSY-Gangnam Style :</a>

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

</div>
</div>
</div>
 
<h4>
2. Spoiler untuk menyembunyikan foto atau image</h4>
<blockquote class="tr_bq">
<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"> Spoiler for Novi Hot : <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/AVvXsEg5P74Ri5hoyj9vStx_894OY1GBRF8T63Zz1tttkycioYs_uV-OphauSPo6pIO-GDgdXjPHllxw-lU8tVPymg_Mt59vJDb8J882JDhhoOBGV9pncqYnmG0DmN-4TRptcIaYD0U46Zl2qYQ/s1600/Novi+Bikini.jpg" border="0" alt="<a href="http://indopoptop.blogspot.com/">indopoptop.blogspot.com</a>"> </div> </div> </div> </blockquote>
 
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 
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
Spoiler for Novi Hot : <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;">
<img alt="Hihihihi..." class="aligncenter" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5P74Ri5hoyj9vStx_894OY1GBRF8T63Zz1tttkycioYs_uV-OphauSPo6pIO-GDgdXjPHllxw-lU8tVPymg_Mt59vJDb8J882JDhhoOBGV9pncqYnmG0DmN-4TRptcIaYD0U46Zl2qYQ/s1600/Novi+Bikini.jpg" width="500" /></div>
</div>
</div>
<h4>
 </h4>
<h4>
3. Spoiler untuk menyembunyikan video</h4>
<blockquote class="tr_bq">
<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;"> Spoiler for Video PSY-Gangnam Style : <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;"></blockquote>
<blockquote class="tr_bq">
 <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></blockquote>
<blockquote class="tr_bq">
</div> </div> 
</div> </blockquote>
<div>
Keterangan:</div>
<div>
-Tulisan warna hijau silahkan diganti dengan judul spoiler video</div>
<div>
-Kode HTML warna merah ganti dengan separator video  yang akan disembunyikan 
 
 
Sebagai contoh spoiler video: 
Jika ingin membuka tinggal klik Show 
 
 
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
Spoiler for Video PSY-Gangnam Style : <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 = 'Show'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;">
<div style="display: none;">
<div class="" id="watch-video">
<script>
if (window.yt.timing) {yt.timing.tick("bf");} </script>

<div class="flash-player player-root" id="watch-player" style="overflow: hidden;">
</div>
<script>
 (function() {
 var swf = " \u003cembed type=\"application\/x-shockwave-flash\" s\u0072c=\"http:\/\/s.ytimg.com\/yt\/swfbin\/watch_as3-vflegwd0f.swf\" w\u0069dth=\"640\" id=\"movie_player\" h\u0065ight=\"390\" flashvars=\"account_playback_token=\u0026amp;ptk=ygent\u0026amp;enablecsi=1\u0026amp;html5_unavailable=1\u0026amp;iv_close_button=0\u0026amp;mpvid=AATJiGpSOw1kRjKF\u0026amp;aftv=True\u0026amp;autohide=2\u0026amp;csi_page_type=watch5ad\u0026amp;keywords=PSY%2C%EC%8B%B8%EC%9D%B4%2C%EA%B0%95%EB%82%A8%EC%8A%A4%ED%83%80%EC%9D%BC%2C%EB%AE%A4%EC%A7%81%EB%B9%84%EB%94%94%EC%98%A4%2CMusic+Video%2CGangnam+Style%2CKOREAN+SINGER%2CKPOP%2CKOERAN+WAVE%2CPSY+6%E7%94%B2%2C6th+Studio+Album%2C%EC%8B%B8%EC%9D%B46%EC%A7%91%2C%EC%9C%A1%EA%B0%91%2CYG+Family%2CYG+Entertainment\u0026amp;cr=ID\u0026amp;host_language=en\u0026amp;iv3_module=http%3A%2F%2Fs.ytimg.com%2Fyt%2Fswfbin%2Fiv3_module-vflpMiCz3.swf\u0026amp;ad_flags=0\u0026amp;fmt_list=46%2F1920x1080%2F99%2F0%2F0%2C37%2F1920x1080%2F9%2F0%2F115%2C45%2F1280x720%2F99%2F0%2F0%2C22%2F1280x720%2F9%2F0%2F115%2C44%2F854x480%2F99%2F0%2F0%2C35%2F854x480%2F9%2F0%2F115%2C43%2F640x360%2F99%2F0%2F0%2C34%2F640x360%2F9%2F0%2F115%2C18%2F640x360%2F9%2F0%2F115%2C5%2F320x240%2F7%2F0%2F0%2C36%2F320x240%2F99%2F0%2F0%2C17%2F176x144%2F99%2F0%2F0\u0026amp;platform=None\u0026amp;trueview=True\u0026amp;loeid=907605%2C927200%2C909918%2C901420\u0026amp;invideo=True\u0026amp;ad_preroll=1\u0026amp;afv_ad_tag=http%3A%2F%2Fgoogleads.g.doubleclick.net%2Fpagead%2Fads%3Fdescription_url%3Dhttp%253A%252F%252Fwww.youtube.com%252Fvideo%252F9bZkp7q19f0%26ht_id%3D1524583%26video_cpm%3D6000000%26ad_type%3Dvideo%26loeid%3D907605%252C927200%252C909918%252C901420%26host%3Dca-host-pub-6250169811687594%26client%3Dca-pub-6219811747049371%26hl%3Den%26max_ad_duration%3D15000%26channel%3Dafv_instream%252CVertical_36%252CVertical_211%252CVertical_593%252CVertical_613%252CVertical_1021%252CVertical_1033%252CVertical_1408%252Cyt_mpvid_AATJiGpSOw1kRjKF%252Cyt_cid_399669%252Cytexp_907605.927200.909918.901420.920917.922401.920704.912806.927201.913558.912706.900816%252Cytps_default%252Cytel_detailpage\u0026amp;tk=KatKk8zY_cYE-m63Xxm18XUrH5r2xhLzwOuDMg1yYCVvXVcMEusakQ%3D%3D\u0026amp;sffb=True\u0026amp;ad_channel_code_instream=afv_instream%2CVertical_36%2CVertical_211%2CVertical_593%2CVertical_613%2CVertical_1021%2CVertical_1033%2CVertical_1408%2Cyt_mpvid_AATJiGpSOw1kRjKF%2Cyt_cid_399669%2Cytexp_907605.927200.909918.901420.920917.922401.920704.912806.927201.913558.912706.900816%2Cytps_default%2Cytel_detailpage\u0026amp;sdetail=f%3Arelmfu%2Crv%3A1a6uyof0i80\u0026amp;url_encoded_fmt_stream_map=url%3Dhttp%253A%252F%252Fo-o---preferred---indosat-cgk1---v7---lscache5.c.youtube.com%252Fvideoplayback%253Fupn%253DtFlC-rA8MyM%2526sparams%253Dcp%25252Cgcr%25252Cid%25252Cip%25252Cipbits%25252Citag%25252Cratebypass%25252Csource%25252Cupn%25252Cexpire%2526fexp%253D907605%25252C927200%25252C909918%25252C901420%25252C920917%25252C922401%25252C920704%25252C912806%25252C924412%25252C927201%25252C913558%25252C912706%25252C900816%2526key%253Dyt1%2526itag%253D46%2526ipbits%253D8%2526signature%253D969F7EAABB654D402BA94F003B4BC03E50BF5F8F.37F8F1D44DCF46052158969A616DE92B912416AD%2526mv%253Dm%2526sver%253D3%2526mt%253D1347487571%2526ratebypass%253Dyes%2526source%253Dyoutube%2526ms%253Dau%2526gcr%253Did%2526expire%253D1347513561%2526ip%253D120.168.1.208%2526cp%253DU0hTTFVMUV9LS0NOM19NRlVGOmRxampWWTJnVU96%2526id%253Df5b664a7bab5f5fd%26quality%3Dhd1080%26fallback_host%3Dtc.v7.cache5.c.youtube.com%26type%3Dvideo%252Fwebm%253B%2Bcodecs%253D%2522vp8.0%252C%2Bvorbis%2522%26itag%3D46%2Curl%3Dhttp%253A%252F%252Fo-o---preferred---indosat-cgk1---v17---lscache7.c.youtube.com%252Fvideoplayback%253Fupn%253DtFlC-rA8MyM%2526sparams%253Dcp%25252Cgcr%25252Cid%25252Cip%25252Cipbits%25252Citag%25252Cratebypass%25252Csource%25252Cupn%25252Cexpire%2526fexp%253D907605%25252C927200%25252C909918%25252C901420%25252C920917%25252C922401%25252C920704%25252C912806%25252C924412%25252C927201%25252C913558%25252C912706%25252C900816%2526key%253Dyt1%2526itag%253D37%2526ipbits%253D8%2526signature%253DB6C361D974F7B4C68D5C2621115C2F6D835A736B.2861EFE8CB2F42C46674311769A9A12EF61ECD0F%2526mv%253Dm%2526sver%253D3%2526mt%253D1347487571%2526ratebypass%253Dyes%2526source%253Dyoutube%2526ms%253Dau%2526gcr%253Did%2526expire%253D1347513561%2526ip%253D120.168.1.208%2526cp%253DU0hTTFVMUV9LS0NOM19NRlVGOmRxampWWTJnVU96%2526id%253Df5b664a7bab5f5fd%26quality%3Dhd1080%26fallback_host%3Dtc.v17.cache7.c.youtube.com%26type%3Dvideo%252Fmp4%253B%2Bcodecs%253D%2522avc1.64001F%252C%2Bmp4a.40.2%2522%26itag%3D37%2Curl%3Dhttp%253A%252F%252Fo-o---preferred---indosat-cgk1---v18---lscache5.c.youtube.com%252Fvideoplayback%253Fupn%253DtFlC-rA8MyM%2526sparams%253Dcp%25252Cgcr%25252Cid%25252Cip%25252Cipbits%25252Citag%25252Cratebypass%25252Csource%25252Cupn%25252Cexpire%2526fexp%253D907605%25252C927200%25252C909918%25252C901420%25252C920917%25252C922401%25252C920704%25252C912806%25252C924412%25252C927201%25252C913558%25252C912706%25252C900816%2526key%253Dyt1%2526itag%253D45%2526ipbits%253D8%2526signature%253D639D2D2AE0DC44DBB82DADA64FE738AE7C121AB3.5869185C4780D209A417CCB94A5E6CDCA435DA16%2526mv%253Dm%2526sver%253D3%2526mt%253D1347487571%2526ratebypass%253Dyes%2526source%253Dyoutube%2526ms%253Dau%2526gcr%253Did%2526expire%253D1347513561%2526ip%253D120.168.1.208%2526cp%253DU0hTTFVMUV9LS0NOM19NRlVGOmRxampWWTJnVU96%2526id%253Df5b664a7bab5f5fd%26quality%3Dhd720%26fallback_host%3Dtc.v18.cache5.c.youtube.com%26type%3Dvideo%252Fwebm%253B%2Bcodecs%253D%2522vp8.0%252C%2Bvorbis%2522%26itag%3D45%2Curl%3Dhttp%253A%252F%252Fo-o---preferred---indosat-cgk1---v3---lscache1.c.youtube.com%252Fvideoplayback%253Fupn%253DtFlC-rA8MyM%2526sparams%253Dcp%25252Cgcr%25252Cid%25252Cip%25252Cipbits%25252Citag%25252Cratebypass%25252Csource%25252Cupn%25252Cexpire%2526fexp%253D907605%25252C927200%25252C909918%25252C901420%25252C920917%25252C922401%25252C920704%25252C912806%25252C924412%25252C927201%25252C913558%25252C912706%25252C900816%2526key%253Dyt1%2526itag%253D22%2526ipbits%253D8%2526signature%253DB7A0C4A20918865F0325DB89A94B1D3B173E137C.1561D3A2555C372A0F574FBCF59A30D5D6D49D79%2526mv%253Dm%2526sver%253D3%2526mt%253D1347487571%2526ratebypass%253Dyes%2526source%253Dyoutube%2526ms%253Dau%2526gcr%253Did%2526expire%253D1347513561%2526ip%253D120.168.1.208%2526cp%253DU0hTTFVMUV9LS0NOM19NRlVGOmRxampWWTJnVU96%2526id%253Df5b664a7bab5f5fd%26quality%3Dhd720%26fallback_host%3Dtc.v3.cache1.c.youtube.com%26type%3Dvideo%252Fmp4%253B%2Bcodecs%253D%2522avc1.64001F%252C%2Bmp4a.40.2%2522%26itag%3D22%2Curl%3Dhttp%253A%252F%252Fo-o---preferred---indosat-cgk1---v3---lscache5.c.youtube.com%252Fvideoplayback%253Fupn%253DtFlC-rA8MyM%2526sparams%253Dcp%25252Cgcr%25252Cid%25252Cip%25252Cipbits%25252Citag%25252Cratebypass%25252Csource%25252Cupn%25252Cexpire%2526fexp%253D907605%25252C927200%25252C909918%25252C901420%25252C920917%25252C922401%25252C920704%25252C912806%25252C924412%25252C927201%25252C913558%25252C912706%25252C900816%2526key%253Dyt1%2526itag%253D44%2526ipbits%253D8%2526signature%253DC6DF83C905F3497C5C418A5A78C6282B4E47F16D.A223469FDBA93DEF671E00B5DDA177A8A827DA93%2526mv%253Dm%2526sver%253D3%2526mt%253D1347487571%2526ratebypass%253Dyes%2526source%253Dyoutube%2526ms%253Dau%2526gcr%253Did%2526expire%253D1347513561%2526ip%253D120.168.1.208%2526cp%253DU0hTTFVMUV9LS0NOM19NRlVGOmRxampWWTJnVU96%2526id%253Df5b664a7bab5f5fd%26quality%3Dlarge%26fallback_host%3Dtc.v3.cache5.c.youtube.com%26type%3Dvideo%252Fwebm%253B%2Bcodecs%253D%2522vp8.0%252C%2Bvorbis%2522%26itag%3D44%2Curl%3Dhttp%253A%252F%252Fo-o---preferred---indosat-cgk1---v1---lscache3.c.youtube.com%252Fvideoplayback%253Fip%253D120.168.1.208%2526upn%253DtFlC-rA8MyM%2526sparams%253Dalgorithm%25252Cburst%25252Ccp%25252Cfactor%25252Cgcr%25252Cid%25252Cip%25252Cipbits%25252Citag%25252Csource%25252Cupn%25252Cexpire%2526fexp%253D907605%25252C927200%25252C909918%25252C901420%25252C920917%25252C922401%25252C920704%25252C912806%25252C924412%25252C927201%25252C913558%25252C912706%25252C900816%2526mt%253D1347487571%2526key%253Dyt1%2526algorithm%253Dthrottle-factor%2526burst%253D40%2526ipbits%253D8%2526itag%253D35%2526sver%253D3%2526signature%253DBE7C072A162435920DA4E42631B81E6C98509236.74471E21C2AA68C818780110C3F5F3A09DCCE31B%2526mv%253Dm%2526source%253Dyoutube%2526ms%253Dau%2526gcr%253Did%2526expire%253D1347513561%2526factor%253D1.25%2526cp%253DU0hTTFVMUV9LS0NOM19NRlVGOmRxampWWTJnVU96%2526id%253Df5b664a7bab5f5fd%26quality%3Dlarge%26fallback_host%3Dtc.v1.cache3.c.youtube.com%26type%3Dvideo%252Fx-flv%26itag%3D35%2Curl%3Dhttp%253A%252F%252Fo-o---preferred---indosat-cgk1---v18---lscache5.c.youtube.com%252Fvideoplayback%253Fupn%253DtFlC-rA8MyM%2526sparams%253Dcp%25252Cgcr%25252Cid%25252Cip%25252Cipbits%25252Citag%25252Cratebypass%25252Csource%25252Cupn%25252Cexpire%2526fexp%253D907605%25252C927200%25252C909918%25252C901420%25252C920917%25252C922401%25252C920704%25252C912806%25252C924412%25252C927201%25252C913558%25252C912706%25252C900816%2526key%253Dyt1%2526itag%253D43%2526ipbits%253D8%2526signature%253DAF741C9E2EE2BD011CBAE13AE313234FD86B9052.8094DD9C7391C70CDD8CE8C7AB72549EBBF4AE1F%2526mv%253Dm%2526sver%253D3%2526mt%253D1347487571%2526ratebypass%253Dyes%2526source%253Dyoutube%2526ms%253Dau%2526gcr%253Did%2526expire%253D1347513561%2526ip%253D120.168.1.208%2526cp%253DU0hTTFVMUV9LS0NOM19NRlVGOmRxampWWTJnVU96%2526id%253Df5b664a7bab5f5fd%26quality%3Dmedium%26fallback_host%3Dtc.v18.cache5.c.youtube.com%26type%3Dvideo%252Fwebm%253B%2Bcodecs%253D%2522vp8.0%252C%2Bvorbis%2522%26itag%3D43%2Curl%3Dhttp%253A%252F%252Fo-o---preferred---indosat-cgk1---v22---lscache1.c.youtube.com%252Fvideoplayback%253Fip%253D120.168.1.208%2526upn%253DtFlC-rA8MyM%2526sparams%253Dalgorithm%25252Cburst%25252Ccp%25252Cfactor%25252Cgcr%25252Cid%25252Cip%25252Cipbits%25252Citag%25252Csource%25252Cupn%25252Cexpire%2526fexp%253D907605%25252C927200%25252C909918%25252C901420%25252C920917%25252C922401%25252C920704%25252C912806%25252C924412%25252C927201%25252C913558%25252C912706%25252C900816%2526mt%253D1347487571%2526key%253Dyt1%2526algorithm%253Dthrottle-factor%2526burst%253D40%2526ipbits%253D8%2526itag%253D34%2526sver%253D3%2526signature%253D6144104648B460A57343899871904358DC0CDE1E.276C1F6578E6E9A35318A99BD1DCB367BDC78337%2526mv%253Dm%2526source%253Dyoutube%2526ms%253Dau%2526gcr%253Did%2526expire%253D1347513561%2526factor%253D1.25%2526cp%253DU0hTTFVMUV9LS0NOM19NRlVGOmRxampWWTJnVU96%2526id%253Df5b664a7bab5f5fd%26quality%3Dmedium%26fallback_host%3Dtc.v22.cache1.c.youtube.com%26type%3Dvideo%252Fx-flv%26itag%3D34%2Curl%3Dhttp%253A%252F%252Fo-o---preferred---indosat-cgk1---v20---lscache4.c.youtube.com%252Fvideoplayback%253Fupn%253DtFlC-rA8MyM%2526sparams%253Dcp%25252Cgcr%25252Cid%25252Cip%25252Cipbits%25252Citag%25252Cratebypass%25252Csource%25252Cupn%25252Cexpire%2526fexp%253D907605%25252C927200%25252C909918%25252C901420%25252C920917%25252C922401%25252C920704%25252C912806%25252C924412%25252C927201%25252C913558%25252C912706%25252C900816%2526key%253Dyt1%2526itag%253D18%2526ipbits%253D8%2526signature%253D76999129E7FBBE24EE07CCA1F7617A1CC45425E3.BDE4A4BE615DCCE1496189312179168D44A10156%2526mv%253Dm%2526sver%253D3%2526mt%253D1347487571%2526ratebypass%253Dyes%2526source%253Dyoutube%2526ms%253Dau%2526gcr%253Did%2526expire%253D1347513561%2526ip%253D120.168.1.208%2526cp%253DU0hTTFVMUV9LS0NOM19NRlVGOmRxampWWTJnVU96%2526id%253Df5b664a7bab5f5fd%26quality%3Dmedium%26fallback_host%3Dtc.v20.cache4.c.youtube.com%26type%3Dvideo%252Fmp4%253B%2Bcodecs%253D%2522avc1.42001E%252C%2Bmp4a.40.2%2522%26itag%3D18%2Curl%3Dhttp%253A%252F%252Fo-o---preferred---indosat-cgk1---v11---lscache8.c.youtube.com%252Fvideoplayback%253Fip%253D120.168.1.208%2526upn%253DtFlC-rA8MyM%2526sparams%253Dalgorithm%25252Cburst%25252Ccp%25252Cfactor%25252Cgcr%25252Cid%25252Cip%25252Cipbits%25252Citag%25252Csource%25252Cupn%25252Cexpire%2526fexp%253D907605%25252C927200%25252C909918%25252C901420%25252C920917%25252C922401%25252C920704%25252C912806%25252C924412%25252C927201%25252C913558%25252C912706%25252C900816%2526mt%253D1347487571%2526key%253Dyt1%2526algorithm%253Dthrottle-factor%2526burst%253D40%2526ipbits%253D8%2526itag%253D5%2526sver%253D3%2526signature%253DB396E8ED39B61D821E0164C64CEF940B959652C4.57C9B4FA2F089C62AFA7D808E127134FCC5E711E%2526mv%253Dm%2526source%253Dyoutube%2526ms%253Dau%2526gcr%253Did%2526expire%253D1347513561%2526factor%253D1.25%2526cp%253DU0hTTFVMUV9LS0NOM19NRlVGOmRxampWWTJnVU96%2526id%253Df5b664a7bab5f5fd%26quality%3Dsmall%26fallback_host%3Dtc.v11.cache8.c.youtube.com%26type%3Dvideo%252Fx-flv%26itag%3D5%2Curl%3Dhttp%253A%252F%252Fo-o---preferred---indosat-cgk1---v14---lscache1.c.youtube.com%252Fvideoplayback%253Fip%253D120.168.1.208%2526upn%253DtFlC-rA8MyM%2526sparams%253Dalgorithm%25252Cburst%25252Ccp%25252Cfactor%25252Cgcr%25252Cid%25252Cip%25252Cipbits%25252Citag%25252Csource%25252Cupn%25252Cexpire%2526fexp%253D907605%25252C927200%25252C909918%25252C901420%25252C920917%25252C922401%25252C920704%25252C912806%25252C924412%25252C927201%25252C913558%25252C912706%25252C900816%2526mt%253D1347487571%2526key%253Dyt1%2526algorithm%253Dthrottle-factor%2526burst%253D40%2526ipbits%253D8%2526itag%253D36%2526sver%253D3%2526signature%253DB7FC1B94A0B8C144092DC45DBD3DDD53B879A047.88145C080E7B44BF1425FD73E2F26DC81FE05AAA%2526mv%253Dm%2526source%253Dyoutube%2526ms%253Dau%2526gcr%253Did%2526expire%253D1347513561%2526factor%253D1.25%2526cp%253DU0hTTFVMUV9LS0NOM19NRlVGOmRxampWWTJnVU96%2526id%253Df5b664a7bab5f5fd%26quality%3Dsmall%26fallback_host%3Dtc.v14.cache1.c.youtube.com%26type%3Dvideo%252F3gpp%253B%2Bcodecs%253D%2522mp4v.20.3%252C%2Bmp4a.40.2%2522%26itag%3D36%2Curl%3Dhttp%253A%252F%252Fo-o---preferred---indosat-cgk1---v12---lscache4.c.youtube.com%252Fvideoplayback%253Fip%253D120.168.1.208%2526upn%253DtFlC-rA8MyM%2526sparams%253Dalgorithm%25252Cburst%25252Ccp%25252Cfactor%25252Cgcr%25252Cid%25252Cip%25252Cipbits%25252Citag%25252Csource%25252Cupn%25252Cexpire%2526fexp%253D907605%25252C927200%25252C909918%25252C901420%25252C920917%25252C922401%25252C920704%25252C912806%25252C924412%25252C927201%25252C913558%25252C912706%25252C900816%2526mt%253D1347487571%2526key%253Dyt1%2526algorithm%253Dthrottle-factor%2526burst%253D40%2526ipbits%253D8%2526itag%253D17%2526sver%253D3%2526signature%253DAD3674CF328942AA14FA9E5D4F255332F298C5D7.52E5214C9EC47EF69E3386BDDC98A81B6B8B6493%2526mv%253Dm%2526source%253Dyoutube%2526ms%253Dau%2526gcr%253Did%2526expire%253D1347513561%2526factor%253D1.25%2526cp%253DU0hTTFVMUV9LS0NOM19NRlVGOmRxampWWTJnVU96%2526id%253Df5b664a7bab5f5fd%26quality%3Dsmall%26fallback_host%3Dtc.v12.cache4.c.youtube.com%26type%3Dvideo%252F3gpp%253B%2Bcodecs%253D%2522mp4v.20.3%252C%2Bmp4a.40.2%2522%26itag%3D17\u0026amp;cafe_experiment_id=\u0026amp;sourceid=yw\u0026amp;timestamp=1347487643\u0026amp;iv_load_policy=1\u0026amp;ad_host=ca-host-pub-6250169811687594\u0026amp;ad_eurl=http%3A%2F%2Fwww.youtube.com%2Fvideo%2F9bZkp7q19f0\u0026amp;showpopout=1\u0026amp;mpu=True\u0026amp;hl=en_US\u0026amp;tmi=1\u0026amp;iv_logging_level=4\u0026amp;st_module=http%3A%2F%2Fs.ytimg.com%2Fyt%2Fswfbin%2Fst_module-vflM9cpYx.swf\u0026amp;no_get_video_log=1\u0026amp;endscreen_module=http%3A%2F%2Fs.ytimg.com%2Fyt%2Fswfbin%2Fendscreen-vflkXjWCn.swf\u0026amp;iv_read_url=http%3A%2F%2Fwww.youtube.com%2Fannotations_iv%2Fread2%3Fvideo_id%3D9bZkp7q19f0%26feat%3DCS\u0026amp;cid=399669\u0026amp;referrer=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D1a6uyof0i80%26feature%3Drelmfu\u0026amp;ad_channel_code_overlay=invideo_overlay_480x70_cat10%2Cafv_overlay%2CVertical_36%2CVertical_211%2CVertical_593%2CVertical_613%2CVertical_1021%2CVertical_1033%2CVertical_1408%2Cyt_mpvid_AATJiGpSOw1kRjKF%2Cyt_cid_399669%2Cytexp_907605.927200.909918.901420.920917.922401.920704.912806.927201.913558.912706.900816%2Cytps_default%2Cytel_detailpage\u0026amp;afv_instream_max=15000\u0026amp;pyv_in_related_cafe_experiment_id=\u0026amp;t=vjVQa1PpcFPOVZDd_BVOkpwhVxXFMbJt5uDha3ed620%3D\u0026amp;afv_ad_tag_restricted_to_instream=http%3A%2F%2Fgoogleads.g.doubleclick.net%2Fpagead%2Fads%3Fdescription_url%3Dhttp%253A%252F%252Fwww.youtube.com%252Fvideo%252F9bZkp7q19f0%26ht_id%3D1524583%26video_cpm%3D6000000%26ad_type%3Dvideo%26loeid%3D907605%252C927200%252C909918%252C901420%26host%3Dca-host-pub-6250169811687594%26client%3Dca-pub-6219811747049371%26hl%3Den%26max_ad_duration%3D15000%26channel%3Dafv_instream%252CVertical_36%252CVertical_211%252CVertical_593%252CVertical_613%252CVertical_1021%252CVertical_1033%252CVertical_1408%252Cyt_mpvid_AATJiGpSOw1kRjKF%252Cyt_cid_399669%252Cytexp_907605.927200.909918.901420.920917.922401.920704.912806.927201.913558.912706.900816%252Cytps_default%252Cytel_detailpage\u0026amp;instream=True\u0026amp;fexp=907605%2C927200%2C909918%2C901420%2C920917%2C922401%2C920704%2C912806%2C924412%2C927201%2C913558%2C912706%2C900816\u0026amp;shortform=True\u0026amp;dclk=True\u0026amp;inactive_skippable_threshold=600000\u0026amp;allow_embed=1\u0026amp;ad_host_tier=1524583\u0026amp;rvs=view_count%3D461%252C578%26feature_type%3Dfvwp%26author%3Dneowizinternet%26title%3D%25EC%2595%2584%25EC%25A0%2580%25EC%2594%25A8%2B%2528Feat.%25EC%25A0%259C%25EC%259D%25B4%25EB%25A0%2588%25EB%25B9%2597%2529%2B_%2B%25EA%25B9%2580%25EC%25A7%2584%25ED%2591%259C%26length_seconds%3D214%26featured%3D1%26id%3DZ3zkiKnYNWk%2Cview_count%3D34%252C542%252C526%26author%3Dofficialpsy%26length_seconds%3D227%26id%3DwcLNteez3c4%26title%3DPSY%2B%2528ft.%2BHYUNA%2529%2B%25EC%2598%25A4%25EB%25B9%25A4%2B%25EB%2594%25B1%2B%25EB%2582%25B4%2B%25EC%258A%25A4%25ED%2583%2580%25EC%259D%25BC%2Cview_count%3D6%252C636%252C632%26author%3Dofficialpsy%26length_seconds%3D522%26id%3D9HPiBJBCOq8%26title%3DPSY%2B-%2BGANGNAM%2BSTYLE%2B%2528%25EA%25B0%2595%25EB%2582%25A8%25EC%258A%25A4%25ED%2583%2580%25EC%259D%25BC%2529%2BM%252FV%2BMaking%2BFilm%2Cview_count%3D2%252C636%252C505%26author%3Dofficialpsy%26length_seconds%3D232%26id%3DrpYq1lSce1U%26title%3DPSY%2B-%2BKOREA%2BM%252FV%2Cview_count%3D2%252C605%252C582%26author%3Dofficialpsy%26length_seconds%3D216%26id%3D1a6uyof0i80%26title%3DPSY_0722_SBS%2BInkigayo_GANGNAM%2BSTYLE%2B%2528%25EA%25B0%2595%25EB%2582%25A8%25EC%258A%25A4%25ED%2583%2580%25EC%259D%25BC%2529%2Cview_count%3D6%252C676%252C806%26author%3DTheFineBros%26length_seconds%3D402%26id%3DuYFmxgzPP3Q%26title%3DTEENS%2BREACT%2BTO%2BGANGNAM%2BSTYLE%2Cview_count%3D1%252C490%252C358%26author%3DCubeFamilyVideos%26length_seconds%3D39%26id%3D2T8J1X1S5PU%26title%3DPSY%2B-%2B%2527Gangnam%2BStyle%2527%2BM%252FV%2BBTS%2B%2528With%2BHyuna%2529%2Cview_count%3D1%252C786%252C837%26author%3DBIGBANG%26length_seconds%3D54%26id%3DcZScKPVqJ6Q%26title%3DBIGBANG%2527s%2BSeungri%2B-%2BChallenged%2BPSY%2527s%2BGangnam%2BStyle%2Cview_count%3D1%252C433%252C269%26author%3DYoan%2BTHOMAS%26length_seconds%3D123%26id%3DBz95ahmCEGQ%26title%3DPsy%2527s%2B%2522Gangnam%2BStyle%2522%2Bspotlighted%2Bon%2BCNN%2BInternational%2B%2528Asia%2529%2Cview_count%3D5%252C457%252C352%26author%3DWonderGirlsVEVO%26length_seconds%3D279%26id%3DquE6Cq4Q2bs%26title%3DWonder%2BGirls%2B-%2BLike%2BMoney%2Bft.%2BAkon%2Cview_count%3D910%252C706%26author%3Dkunnie91%26length_seconds%3D25%26id%3Df08X7wQ3yzo%26title%3D%255B120729%255D%2BHara%252C%2BNicole%252C%2BPSY%2B-%2BGangnam%2Bstyle%2B%2540%2BInkigayo%2Cview_count%3D154%252C707%252C127%26author%3DJenniferLopezVEVO%26length_seconds%3D267%26id%3DbjgFH01k0gU%26title%3DJennifer%2BLopez%2B-%2BDance%2BAgain%2Bft.%2BPitbull\u0026amp;vq=auto\u0026amp;yt_pt=AD1B29m-7OzmA3HWkvrGezCXr_KjSPEPax6J8SI5dPtDN7288Bh39YOiZ5BvrtpKaC7YWiYDqDmXzaCIPwwX\u0026amp;ad3_module=http%3A%2F%2Fs.ytimg.com%2Fyt%2Fswfbin%2Fad3-vflCnuNVc.swf\u0026amp;gut_tag=%2F4061%2Fytpwatch%2Fmain_399669\u0026amp;ptchn=officialpsy\u0026amp;ad_logging_flag=1\u0026amp;length_seconds=253\u0026amp;feature=relmfu\u0026amp;enablejsapi=1\u0026amp;advideo=1\u0026amp;plid=AATJiGpQ9bDv9beK\u0026amp;iv_module=http%3A%2F%2Fs.ytimg.com%2Fyt%2Fswfbin%2Fiv_module-vfl-04F3t.swf\u0026amp;afv=True\u0026amp;ad_tag=http%3A%2F%2Fn4061ad.hk.doubleclick.net%2FN4061%2Fpfadx%2Fcom.ytpwatch.music%2Fmain_399669%3Bsz%3DWIDTHxHEIGHT%3Bkvid%3D9bZkp7q19f0%3Bkpu%3Dofficialpsy%3Bkpid%3D399669%3Bu%3D9bZkp7q19f0%7C399669%3Bmpvid%3DAATJiGpSOw1kRjKF%3Bplat%3Dpc%3Bkpeid%3DrDkAvwZum-UTjHmzDI2iIw%3Bafct%3Dsite_content%3Bafv%3D1%3Bdc_dedup%3D1%3Bk21%3D1%3Bk5%3D3_35_36_211_593_613_1021_1033_1408%3Bkage%3D35%3Bkar%3D5%3Bkclt%3D1%3Bkcr%3Did%3Bkga%3D1003%3Bkgg%3D-1%3Bklg%3Den%3Bkmsrd%3D1%3Bko%3Dp%3Bkr%3DF%3Bkt%3DK%3Bkvz%3D205%3Bshortform%3D1%3Btves%3D2%3Bytcat%3D10%3Bytexp%3D907605.927200.909918.901420.920917.922401.920704.912806.927201.913558.912706.900816%3Bytps%3Ddefault%3Bytvt%3Dw%3B%21c%3D399669%3Bk2%3D3%3Bk2%3D35%3Bk2%3D36%3Bk2%3D211%3Bk2%3D593%3Bk2%3D613%3Bk2%3D1021%3Bk2%3D1033%3Bk2%3D1408%3B\u0026amp;ad_video_pub_id=ca-pub-6219811747049371\u0026amp;ad_slots=0\u0026amp;watermark=%2Chttp%3A%2F%2Fs.ytimg.com%2Fyt%2Fimg%2Fwatermark%2Fyoutube_watermark-vflHX6b6E.png%2Chttp%3A%2F%2Fs.ytimg.com%2Fyt%2Fimg%2Fwatermark%2Fyoutube_hd_watermark-vflAzLcD6.png\u0026amp;oid=VyEtjbeN302yXkP3Qulrog\u0026amp;afv_video_min_cpm=6000000\u0026amp;afv_inslate_ad_tag=http%3A%2F%2Fgoogleads.g.doubleclick.net%2Fpagead%2Fads%3Fdescription_url%3Dhttp%253A%252F%252Fwww.youtube.com%252Fvideo%252F9bZkp7q19f0%26ht_id%3D1524583%26ad_type%3Duserchoice%26loeid%3D907605%252C927200%252C909918%252C901420%26host%3Dca-host-pub-6250169811687594%26client%3Dca-pub-6219811747049371%26hl%3Den%26max_ad_duration%3D15000\u0026amp;iv_queue_log_level=0\u0026amp;as_launched_in_country=1\u0026amp;title=PSY+-+GANGNAM+STYLE+%28%EA%B0%95%EB%82%A8%EC%8A%A4%ED%83%80%EC%9D%BC%29+M%2FV\u0026amp;sw=1.0\u0026amp;sk=55sJ0iyEUjvoPEztxWaCJTp5BWji-t7UC\u0026amp;pltype=content\u0026amp;video_id=9bZkp7q19f0\" allowscriptaccess=\"always\" allowfullscreen=\"true\" bgcolor=\"#000000\"\u003e\n \u003cnoembed\u003e\u003cdiv class=\"yt-alert yt-alert-default yt-alert-error yt-alert-player\"\u003e \u003cdiv class=\"yt-alert-icon\"\u003e\n \u003cimg s\u0072c=\"\/\/s.ytimg.com\/yt\/img\/pixel-vfl3z5WfW.gif\" class=\"icon master-sprite\" alt=\"Alert icon\"\u003e\n \u003c\/div\u003e\n\u003cdiv class=\"yt-alert-buttons\"\u003e\u003c\/div\u003e\u003cdiv class=\"yt-alert-content\" role=\"alert\"\u003e \u003cspan class=\"yt-alert-vertical-trick\"\u003e\u003c\/span\u003e\n \u003cdiv class=\"yt-alert-message\"\u003e\n You need Adobe Flash Player to watch this video. \u003cbr\u003e \u003ca href=\"http:\/\/get.adobe.com\/flashplayer\/\"\u003eDownload it from Adobe.\u003c\/a\u003e\n \u003c\/div\u003e\n\u003c\/div\u003e\u003c\/div\u003e\u003c\/noembed\u003e\n\n";
 document.getElementById('watch-player').innerHTML = swf;
 })()
 </script>

<div id="watch-video-extra">
</div>

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

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

Cara Memasukan Gambar Pada Postingan Blog

Posted by Unknown on Saturday, 20 October 2012 at 23:23

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div style="margin-left: 1em; margin-right: 1em;">
  </div>
 
 
<a href="http://cara-design.blogspot.com/2012/10/cara-memasukan-gambar-pada-postingan-blog.html">Cara Memasukan Gambar Pada Postingan Blog</a>-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 <a href="http://cara-design.blogspot.com/2012/10/cara-memasukan-gambar-pada-postingan-blog.html">cara memasukan gambar pada postingan blog</a> 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: 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxyiPzur6FUlxyZ2KgBfcVRmpAHfT58daodzAawGy6_FutvcXIYmr17tN6AVn13o6MZxHindSFbFbF6ciWAMmnDg6VL_BKCZ5yz3mxsnZRqNbnTIeX8u3hdsw-5c2ONT2gWe5H5baNS9vP/s1600/Cara+Memasukan+Gambar+Pada+Postingan+Blog.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Memasukan Gambar Pada Postingan Blog" border="0" height="95" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxyiPzur6FUlxyZ2KgBfcVRmpAHfT58daodzAawGy6_FutvcXIYmr17tN6AVn13o6MZxHindSFbFbF6ciWAMmnDg6VL_BKCZ5yz3mxsnZRqNbnTIeX8u3hdsw-5c2ONT2gWe5H5baNS9vP/s1600/Cara+Memasukan+Gambar+Pada+Postingan+Blog.png" title="Cara Memasukan Gambar Pada Postingan Blog" width="320" /></a></div>
 
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. 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF2xO5SFbpnu5aV300lQZl4BXXBmrKC94mjaCI0nMGsZ5sKvhAcN-qwXlkwhgBzd9ZFZhR_5WDhYedMQyDKofQUd5gb63Kb2wBqs9-XzT6SIfr-RB8GT1HDikJYssereWtzOVm_0C_aSmd/s1600/Cara+Memasukan+Gambar+Pada+Postingan+Blog+2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Memasukan Gambar Pada Postingan Blog" border="0" height="190" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF2xO5SFbpnu5aV300lQZl4BXXBmrKC94mjaCI0nMGsZ5sKvhAcN-qwXlkwhgBzd9ZFZhR_5WDhYedMQyDKofQUd5gb63Kb2wBqs9-XzT6SIfr-RB8GT1HDikJYssereWtzOVm_0C_aSmd/s1600/Cara+Memasukan+Gambar+Pada+Postingan+Blog+2.png" title="Cara Memasukan Gambar Pada Postingan Blog" width="320" /></a></div>
 
<div class="separator" style="clear: both; text-align: center;">
</div>
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 <a href="http://cara-design.blogspot.com/2012/10/cara-memasukan-gambar-pada-postingan-blog.html" target="_blank">cara mudah memasukan gambar atau insert image pada postingan blog</a>.</div>

Cara Memasukan Gambar Pada Postingan Blog -Untuk menambah daya tarik pengunjung blog sudah lazim di kalangan blogger menambahkan at...

Cara Mudah Membuat Navigasi Breadcrumbs di Blogger

Posted by Unknown on Thursday, 18 October 2012 at 19:35

<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqS5I8sEoZKb_0R3UCBAYuE5OsMU-hpT0a7eZhWFnhxzIXeZ7Wm041djuwNuY55JtJqdhzUFRebGGLoM4kHIHeT5jx3sU9NCUhlty5xCpoUSe9gfjH9soXUxDY3cQywoeC4B6ZRzuIri3H/s1600/Membuat+navigasi+breadcrumbs.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="17" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqS5I8sEoZKb_0R3UCBAYuE5OsMU-hpT0a7eZhWFnhxzIXeZ7Wm041djuwNuY55JtJqdhzUFRebGGLoM4kHIHeT5jx3sU9NCUhlty5xCpoUSe9gfjH9soXUxDY3cQywoeC4B6ZRzuIri3H/s320/Membuat+navigasi+breadcrumbs.png" width="320" /></a></div>
 
<a href="http://cara-design.blogspot.com/2012/10/membuat-navigasi-breadcrumbs-di-blogger.html">Cara Mudah Membuat Navigasi Breadcrumbs di Blogger</a>-Pada kesempatan ini Cara Design Blog akan memberikan tutorial blogger cara mudahmembuat navigasi breadcrumbs pada blog. 
<a href="http://cara-design.blogspot.com/2012/10/membuat-navigasi-breadcrumbs-di-blogger.html">Apa arti dan fungsi dari navigasi breadcrumbs itu?</a> 
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. ) often serves as hierarchy separator, although designers may use other glyphs (such as » or ›), as well as various graphical treatments.">Simbol (>) sering berfungsi sebagai pemisah hirarki. Namun banyak juga blogger yang memakai simbol (»). 
) often serves as hierarchy separator, although designers may use other glyphs (such as » or ›), as well as various graphical treatments."> 
) often serves as hierarchy separator, although designers may use other glyphs (such as » or ›), as well as various graphical treatments.">Struktur dari Navigasi Breadcrumbs pada umumnya seperti ini: 
) often serves as hierarchy separator, although designers may use other glyphs (such as » or ›), as well as various graphical treatments.">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.  
) often serves as hierarchy separator, although designers may use other glyphs (such as » or ›), as well as various graphical treatments."> 
<a href="http://cara-design.blogspot.com/2012/10/membuat-navigasi-breadcrumbs-di-blogger.html">) often serves as hierarchy separator, although designers may use other glyphs (such as » or ›), as well as various graphical treatments.">Bagaimana cara membuat navigasi breadcrumbs itu?</a> 
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> 
 
<blockquote class="tr_bq">
.breadcrumbs {  padding:5px 5px 5px 0px;  margin: 0px 0px 15px 0px;  font-size:95%;  line-height: 1.4em;  border-bottom:3px double #e6e4e3;  }</blockquote>
5. Cari: <b:includable id='main' var='top'> 
6. Letakan kode berikut di atas kode no.:5. 
 
<blockquote class="tr_bq">
 <b:includable id='breadcrumb' var='posts'>  <b:if cond='data:blog.homepageUrl == data:blog.url'>    <b:else/>  <b:if cond='data:blog.pageType == "item"'>        <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>  » <data:post.title/>  </b:loop>      <b:else/>  <b:if cond='data:blog.pageType == "archive"'>        <a expr:href='data:blog.homepageUrl'>Home</a> » Archives for <data:blog.pageName/>      <b:else/>  <b:if cond='data:blog.pageType == "index"'>      <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>      </b:if>  </b:if>  </b:if>  </b:if>  </b:includable></blockquote>
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.

Cara Mudah Membuat Navigasi Breadcrumbs di Blogger -P ada kesempatan ini Cara Design Blog akan memberikan tutorial blogger cara mudahme...

Cara Membuat Tombol Share Button di Atas Postingan Blog

Posted by Unknown on Wednesday, 17 October 2012 at 22:46

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlBw89gYcvYB-6GgC9-fEeG5ICOcbewlu2RP3GNQCa__3AoLFSGFeOgzDwf13XnatBLEG3JTGZkpkqpr7ycwowa9CBpEsfFBdQ11m7Leybi6SiqEgWu22krbVh07FqsROfHoDz1bweqHHM/s1600/Cara+membuat+Addtis+share+button.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Cara Membuat Tombol Share Button di Atas Postingan Blog" border="0" height="176" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlBw89gYcvYB-6GgC9-fEeG5ICOcbewlu2RP3GNQCa__3AoLFSGFeOgzDwf13XnatBLEG3JTGZkpkqpr7ycwowa9CBpEsfFBdQ11m7Leybi6SiqEgWu22krbVh07FqsROfHoDz1bweqHHM/s1600/Cara+membuat+Addtis+share+button.jpg" title="Cara Membuat Tombol Share Button di Atas Postingan Blog" width="320" /></a></div>
 <a href="http://cara-design.blogspot.com/2012/10/membuat-tombol-share-button-di-atas-postingan-blog.html">Cara Membuat Tombol Share Button di Atas Postingan Blog</a>-Setelah kamu tahu <a href="http://cara-design.blogspot.com/2012/10/cara-mudah-membuat-blogger-blog-gratis-blogspot.html">cara membuat blog</a> dan sudah <a href="http://cara-design.blogspot.com/2012/10/cara-membuat-postingan-blog.html">membuat postingan blog</a> 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 <a href="http://cara-design.blogspot.com/2012/10/membuat-tombol-share-button-di-atas-postingan-blog.html">cara membuat share button</a> 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: 
 
<ul>
<li>Kode Share Button model 1:</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijSQyR6H2s4cMRe-WczHLOt7N1UWpYi7CUy3AbLzB-To4B5DeWBwTd2VSpHu93F4gJblRrJll_FxdPFEeX-_tbrS6eNmtxbhHwCo9F2m0x_2eGq6UB8V6_kfmWLpNvi-mTjEdOR_EUB2yh/s1600/Addthis+button-1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijSQyR6H2s4cMRe-WczHLOt7N1UWpYi7CUy3AbLzB-To4B5DeWBwTd2VSpHu93F4gJblRrJll_FxdPFEeX-_tbrS6eNmtxbhHwCo9F2m0x_2eGq6UB8V6_kfmWLpNvi-mTjEdOR_EUB2yh/s1600/Addthis+button-1.jpg" /></a></div>
<div>
 </div>
 
 
<blockquote class="tr_bq">
 
<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>
</blockquote>
 
 
<ul>
<li> Kode Share Button model 2:</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVluUrV37x9xtWdBdy4BGGgSgEhhFGARLR5H-3NkDUYCTftB_tYxbMtzDfMSjF6ume5rFbaMcKxiMMsyAsdBUCXCCfMhlreYoalQY1Hmbq6zKU5RvCGfANIXv8pd5paNmwgSx1AXxVY8GX/s1600/Addthis+button-2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVluUrV37x9xtWdBdy4BGGgSgEhhFGARLR5H-3NkDUYCTftB_tYxbMtzDfMSjF6ume5rFbaMcKxiMMsyAsdBUCXCCfMhlreYoalQY1Hmbq6zKU5RvCGfANIXv8pd5paNmwgSx1AXxVY8GX/s1600/Addthis+button-2.jpg" /></a></div>
<div>
 </div>
<div>
<blockquote class="tr_bq">
  
<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> 
</blockquote>
 
 
<ul>
<li> Kode Share Button model 3:</li>
</ul>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPgEXmKH2cUQJoN5WGdieMgJa7h-mRuX1yYEjk2WPB3Xa9ua7q9mldHff2mM5EaDkBlKOL7iiQ-rALV8RTh2Z6DhQCxytuIvb6_Xvcy3m5FU5nxf9iOjisoIofvfxxKbTmcK-vfNDrAE2G/s1600/Addthis+button-3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPgEXmKH2cUQJoN5WGdieMgJa7h-mRuX1yYEjk2WPB3Xa9ua7q9mldHff2mM5EaDkBlKOL7iiQ-rALV8RTh2Z6DhQCxytuIvb6_Xvcy3m5FU5nxf9iOjisoIofvfxxKbTmcK-vfNDrAE2G/s1600/Addthis+button-3.jpg" /></a></div>
<div>
 </div>
<div>
<blockquote class="tr_bq">
  
<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> 
</blockquote>
 
 
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 
 
 
 
<div class="MsoNormal" style="line-height: 150%; margin-bottom: 0.0001pt; text-align: justify;">
</div>
<div class="MsoListParagraphCxSpMiddle" style="margin: 0in 0in 0.0001pt 0.25in;">
</div>
</div>
 
<div class="MsoListParagraphCxSpMiddle" style="margin: 0in 0in 0.0001pt 0.25in;">
</div>
</div>
 
<div class="MsoNormal" style="line-height: 150%; margin-bottom: 0.0001pt; text-align: justify;">
</div>
</div>

Cara Membuat Tombol Share Button di Atas Postingan Blog -Setelah kamu tahu cara membuat blog dan sudah membuat postingan blog atau ar...

Cara Membuat Related Post With Thumbnail

Posted by Unknown on Tuesday, 16 October 2012 at 00:16

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVEpyBWJcvRoNpV6tsBq0XvgwSVRcQgxJHsYBMEai569jUrpa876pwLx1zPLZZIkhi-zWkEe2szMn_Xpd1sEvDMD8QvNX-uip77_oslI8G_a9UgGe1wr2YU0AsjJTY_0l-IyHow2FYnBC6/s1600/Membuat+related+post+with+thumbnail.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="204" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVEpyBWJcvRoNpV6tsBq0XvgwSVRcQgxJHsYBMEai569jUrpa876pwLx1zPLZZIkhi-zWkEe2szMn_Xpd1sEvDMD8QvNX-uip77_oslI8G_a9UgGe1wr2YU0AsjJTY_0l-IyHow2FYnBC6/s320/Membuat+related+post+with+thumbnail.png" width="320" /></a></div>
 
 
<div>
<a href="http://cara-design.blogspot.com/2012/10/cara-membuat-related-post-with-thumbnail.html">Cara Membuat Related Post With Thumbnail</a>-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 <a href="http://cara-design.blogspot.com/2012/10/cara-membuat-related-post.html">cara membuat related post</a> 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 <a href="http://cara-design.blogspot.com/2012/10/cara-membuat-related-post-with-thumbnail.html" style="font-family: Arial, Helvetica, sans-serif;">cara membuat related post with thumbnail</a> berikut ini:</div>
<div>
1. Masuk Dasbor Blog kamu.</div>
<div>
2. Template > Edit HTML > Lanjutkan</div>
<div>
3. Centang Exspnd Template Widget</div>
<div>
4. Cari kode: </head></div>
<div>
5. Letakkan kode berikut diatas </head> 
 
<blockquote>
 <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/AVvXsEhzqDiRRgAvXNopzd7ETtV1JNeAK7IYUNATEXWp3hbr_ACMG-R8TYMapXqfvVQ4xEC4jCoJYFCFvTt52dP0MT8yckLGEc7yQQjYA2j5sPeaXT0jBF3PT7PdPx0mD1ODU1_dmF-M2KaZ9aWZ/"; 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'/> </b:if> </blockquote>
Keterangan kode:   
<ul>
<li>Kode:#cccccc warna hijau pada kode diatas bisa kamu ganti dengan kode warna yang kamu suka. var plittercolor: garis pembatas antar <a href="http://cara-design.blogspot.com/2012/10/cara-membuat-related-post-with-thumbnail.html">related post with thumbnail</a>.</li>
<li>Tulisan Artikel Terkait warna hijau di atas bisa kamu ganti dengan kata yang kamu suka.</li>
</ul>
 
6. Cari: 
7. Letakan kode berikut ini tepat di bawah kode no.:6. 
 
 
<blockquote class="tr_bq">
 <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'/> </b:if> </blockquote>
Keterangan kode:   
<ul>
<li>Angka 6 warna hijau pada kode di atas bisa kamu ganti dengan jumlah related post yang ingin kamu tampilkan.</li>
</ul>
8. Save Template. 
Selesai, silahkan lihat blog kamu. 
 
 
Tags:<a href="http://cara-design.blogspot.com/2012/10/cara-membuat-related-post.html">cara membuat related post</a>, <a href="http://cara-design.blogspot.com/2012/10/cara-membuat-related-post-with-thumbnail.html">cara membuat related post with thumbnail</a> 
 </div>

Cara Membuat Related Post With Thumbnail -Pada postingan sebelumnya Cara Design Blog sudahk memberikan tutorial blogger cara membuat re...

Cara Membuat Related Post

Posted by Unknown on Sunday, 14 October 2012 at 23:08

<a href="http://cara-design.blogspot.com/2012/10/cara-membuat-related-post.html">Cara Membuat Related Post</a>-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 <a href="http://cara-design.blogspot.com/2012/10/cara-membuat-label-di-blog.html">cara membuat label blog</a>. 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:  
 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgFAQI61rxrSAEmy2lYfpHRTkx9eKg-dlBIgyZo44Pev4yTtXk53qN1U7nIpA_jfzJ1vpyWjjBZvCgwh_sG-E9KaUOezykr6WVwiN_YDU8HJ7vlzJUeawiZBGnZVbAYcBy2Y38QFhgiNGr/s1600/related+posts.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="152" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgFAQI61rxrSAEmy2lYfpHRTkx9eKg-dlBIgyZo44Pev4yTtXk53qN1U7nIpA_jfzJ1vpyWjjBZvCgwh_sG-E9KaUOezykr6WVwiN_YDU8HJ7vlzJUeawiZBGnZVbAYcBy2Y38QFhgiNGr/s320/related+posts.png" width="320" /></a></div>
 
 
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 <a href="http://cara-design.blogspot.com/2012/10/cara-membuat-related-post.html">cara membuat related post</a> 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> 
 
<blockquote class="tr_bq">
 #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; }</blockquote>
5. Cari kode: </head> 
6. Letakan kode berikut tepat di atas kode no.:5. 
<blockquote class="tr_bq">
<script src='http://hbhost.googlecode.com/files/Related-posts.js' type='text/javascript'</blockquote>
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/> 
 
<blockquote class="tr_bq">
<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='related-posts'> <div style='font-size:18px'>Related Posts:</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></blockquote>
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.

Cara Membuat Related Post -Dalam postingan blog kali ini Cara Design Blog akan memberika tutorial blogger cara membuat related post. Sebelum...

Cara Membuat Read More Otomatis Pada Blogger

Posted by Unknown at 18:57

<a href="http://cara-design.blogspot.com/2012/10/cara-membuat-read-more-otomatis-pada.html">Cara Membuat Read More Otomatis Pada Blogger</a>-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. 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD1UONbJix83ljWGrTRx4QmixiKS8_bfjzkKHmn96-DgTHd9ql-BLa6umokW6y34-sMTcAK1kj5OCFiNWmAppZE3GVGvZLiMYSeYqJsUDRsothylD3Qsp3mQFuVTvBJpk4kWBZIdHyibGl/s1600/readmore+otomatis.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="169" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD1UONbJix83ljWGrTRx4QmixiKS8_bfjzkKHmn96-DgTHd9ql-BLa6umokW6y34-sMTcAK1kj5OCFiNWmAppZE3GVGvZLiMYSeYqJsUDRsothylD3Qsp3mQFuVTvBJpk4kWBZIdHyibGl/s320/readmore+otomatis.png" width="320" /></a></div>
 
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 <a href="http://cara-design.blogspot.com/2012/10/cara-membuat-read-more-otomatis-pada.html">cara  membuat read more otomatis</a>?  
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> 
 
<blockquote class="tr_bq">
<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='<img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c}; //]]> </script> </b:if> </b:if</blockquote>
 
 
Keterangan kode: 
 
<ul>
<li>summary_noimg = 300 adalah jumlah karakter yang ditampilkan</li>
<li>summary_img = 250 adalah Image yang ditampilkan (jika artikel ada gambarnya)</li>
<li>img_thumb_height = 60 adalah tinggi image ditampilkan</li>
<li>img_thumb_width = 90 adalah lebar image ditampilkan</li>
<li>Angka-angka ini bisa kamu sesuaikan dalam <a href="http://cara-design.blogspot.com/2012/10/cara-membuat-read-more-otomatis-pada.html">membuat read more otomatis</a>.</li>
</ul>
 
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. 
 
<blockquote class="tr_bq">
<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> <a expr:href='data:post.url'>READ MORE - <data:post.title/></a> </b:if> <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if></blockquote>
 
7. Save Template. 
Selesai, sekarang lihat perubahan tampilan blog kamu. 
Ternyata mudah ya cara membuat read more otomatis di blogger.

Cara Membuat Read More Otomatis Pada Blogger -Kali ini Cara Design Blogger akan memberikan tutorial blogger cara membuat read more otomatis ...

Cara Menghilangkan Navbar Blogger

Posted by Unknown on Saturday, 13 October 2012 at 02:43

<a href="http://cara-design.blogspot.com/2012/10/cara-menghilangkan-navbar-blogger.html">Cara Menghilangkan Navbar Blogger</a>-Meski navbar telah di sembunyikan dengan <a href="http://cara-design.blogspot.com/2012/10/cara-menyembunyikan-navbar-blogger.html">cara menyembunyikan navbar blog</a>, namun ternyata masih navbar tersebut sebenarnya masih ada hanya disembunyikan. Terus bagaimana caranya agar navbar blogger itu bisa hilang dari blog? 
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqvr5_9a9kcX5sNXFwbCGT7Ik0Vkel1GZwc8eWqjI_1GV-LESkYNH0AIqBQBQ1kLJi6fmBjNXqEovmZNltJFLTtG3FTt0CQsZNUBKl3VCRFkHHB30SrAE-Vq8oW03phEioU6sFXC8amJVR/s1600/NAVBAR.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="295" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqvr5_9a9kcX5sNXFwbCGT7Ik0Vkel1GZwc8eWqjI_1GV-LESkYNH0AIqBQBQ1kLJi6fmBjNXqEovmZNltJFLTtG3FTt0CQsZNUBKl3VCRFkHHB30SrAE-Vq8oW03phEioU6sFXC8amJVR/s320/NAVBAR.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"> </td></tr>
</tbody></table>
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: 
 
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4sPDoHQM8BSV0AZVjPlqbI2TGEVjfPW3wRivcaFBYG8bI2RGHldQCdwr3vhM3An-7_KaBwxcCDNq0lb6bmRN3ugQNmgtBbWZc-VTawLbY88o6AyuCu1jHhhdvr6396qepcS8b2LDRQZoP/s1600/Hilangkan-navbar-blog.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="171" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4sPDoHQM8BSV0AZVjPlqbI2TGEVjfPW3wRivcaFBYG8bI2RGHldQCdwr3vhM3An-7_KaBwxcCDNq0lb6bmRN3ugQNmgtBbWZc-VTawLbY88o6AyuCu1jHhhdvr6396qepcS8b2LDRQZoP/s320/Hilangkan-navbar-blog.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Gambar-1 </td></tr>
</tbody></table>
 2. Pilih Off dengan cara meng-Klik radio button seperti pada gambar di bawah ini: 
 
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcreCYX7qPpclAnCeO6GWNqp3w5l5FludGhbi4J3gDSuFPcWyRG-TQXtV7O_JBPjKQPYG-d_Slj4HGWMJcP89qXvaxt6E5AVPvhO01b813h90KDJBCugtmIWYcRu3ropDsh1ehTzQjCzhn/s1600/Hilangkan-navbar-blog-2.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="168" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcreCYX7qPpclAnCeO6GWNqp3w5l5FludGhbi4J3gDSuFPcWyRG-TQXtV7O_JBPjKQPYG-d_Slj4HGWMJcP89qXvaxt6E5AVPvhO01b813h90KDJBCugtmIWYcRu3ropDsh1ehTzQjCzhn/s320/Hilangkan-navbar-blog-2.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Gambar-2</td></tr>
</tbody></table>
 3. Simpan 
 
Setelah meangikuti langkah-langkah <a href="http://cara-design.blogspot.com/2012/10/cara-menghilangkan-navbar-blogger.html">cara menghilangkan navbar blog</a>, akhirnya navbar blog bisa dihilangkan. Silahkan lihat perubahan blog seperti gambar-3 di bawah. 
 
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl8ZhjIU3QqZMnAzKCI1XtyjiriPIzQrQDXRr56_d-dGMvW9DLhaEgdB70zl1NYSGb9YWASL9sz6wfOpY0VCBYW5V3YemHhN3pqvHwcP4mC376ijzsAT86-C3qM6bA5mlE75RcAlmZpqdf/s1600/Hilangkan-navbar-blog-3.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="169" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl8ZhjIU3QqZMnAzKCI1XtyjiriPIzQrQDXRr56_d-dGMvW9DLhaEgdB70zl1NYSGb9YWASL9sz6wfOpY0VCBYW5V3YemHhN3pqvHwcP4mC376ijzsAT86-C3qM6bA5mlE75RcAlmZpqdf/s320/Hilangkan-navbar-blog-3.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Gambar-3</td></tr>
</tbody></table>
Ternyata sangat mudah ya cara menghilangkan navbar blog.

Cara Menghilangkan Navbar Blogger -Meski navbar telah di sembunyikan dengan cara menyembunyikan navbar blog , namun ternyata masih navbar te...

Cara Menyembunyikan Navbar Blogger

Posted by Unknown on Friday, 12 October 2012 at 20:20

<a href="http://cara-design.blogspot.com/2012/10/cara-menyembunyikan-navbar-blogger.html">Cara Menyembunyikan Navbar Blogger</a>-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: 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZIRqzhDxeumqhrA9J4zeA99zJyVq1yiKJntO-ht0PpI-bjM7cx-LJMqn7OMxUXwrcwCm0gW_aF-nP7_i_hUQSMRMByD-3FEMA0AGiokE3jTOHNm_46zsfYKWRwJL9NGR0yFc6Fa9lC4TO/s1600/menyembunyikan-navba-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="59" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZIRqzhDxeumqhrA9J4zeA99zJyVq1yiKJntO-ht0PpI-bjM7cx-LJMqn7OMxUXwrcwCm0gW_aF-nP7_i_hUQSMRMByD-3FEMA0AGiokE3jTOHNm_46zsfYKWRwJL9NGR0yFc6Fa9lC4TO/s320/menyembunyikan-navba-blogger.png" width="320" /></a></div>
 
Atau memakai salah satu konfigurasi Navbar seperti di bawah ini: 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4z98DMa0Ak7CnNgsu6duIwUQE4h8eQftca1wqbN8QQvab-wZEsIiQ_Cowqpqr86E5DJVE0DaaZ-EhGT8QusrzKf0C1Xp0lG-hK1Z2LBUVBA1pOux1nNwvrHPSsNczHbztyGyab8_iDO9H/s1600/NAVBAR.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="295" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg4z98DMa0Ak7CnNgsu6duIwUQE4h8eQftca1wqbN8QQvab-wZEsIiQ_Cowqpqr86E5DJVE0DaaZ-EhGT8QusrzKf0C1Xp0lG-hK1Z2LBUVBA1pOux1nNwvrHPSsNczHbztyGyab8_iDO9H/s320/NAVBAR.png" width="320" /></a></div>
 
Jika ingin menyembunyikan navabar blogger tersebut, <a href="http://cara-design.blogspot.com/">Cara Design Blog</a> akan memberi Tips Blogger cara menyembunyikan navbar blogger. 
Silahkan kamu ikuti langkah-langkah <a href="http://cara-design.blogspot.com/2012/10/cara-menyembunyikan-navbar-blogger.html">cara menyembunyikan navbar blogger berikut</a> 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> 
 
<div style="text-align: left;">
 </div>
<div style="text-align: left;">
#navbar-iframe {</div>
<div style="text-align: left;">
height:0px;</div>
<div style="text-align: left;">
visibility:hidden;</div>
<div style="text-align: left;">
display:none;</div>
<div style="text-align: left;">
}</div>
<div style="text-align: left;">
 </div>
<div style="text-align: left;">
8. Save Template. </div>
<div style="text-align: left;">
Selesai, sekarang coba lihat blog kamu navbarnya sudah tidak kelihatan.</div>
<div style="color: red;">
 </div>
<div>
Gimana mudahkan cara menyembunyikan navbar blogger</div>

Cara Menyembunyikan Navbar Blogger -Kalau kamu mempunyai blog yang menggunakan template blog bawaan blogger pasti pada tampilan blog kamu ad...