Membuat SiteMap Cantik

Kebanyakan Blogger pasti sudah paham betul apa itu sitemap, yang mana halaman sitemap akan mempermudah para pengunjung untuk menelusuri label demi label yang ada di seluruh isi blog atau website. karena manfaatnya yang begitu besar maka hampir sebagian besar para blogger menanamkan halaman sitemap di halaman kesayangannya. bermacam-macam corak dan bentuk Membuat sitemap cantik bertebaran di internet, ada yang kesan minimalis sampai yang beraneka warna hiasan di sana-sini.

Di sini saya terinspirasi oleh postingan sahabat saya bang rohis yang mana mas rohis juga dapet dari temannya juga :) , jadi berantai alias door to door ilmu sitemap-nya...hehehe. disini saya menambahkan sedikit pengaturan pada sitemap sobat saya agar dapat menyesuaikan tinggi dan lebar suatu halaman sesuai keinginan kita. Sitemap ini sangat cantik menurut hemat saya, tentunya dengan tampil cantik akan semakin membuat kerasan tamu di blog kita. Contoh hasil sitemap ini ada pada halaman sitemap di blog ini ,Yuk langsung saja prakteknya....

• 1. Masuk ke akun blogger sobat dulu
• 2. Masuk ke menu halaman dan buat halaman baru
• 3. Silahkan kasih judul SiteMap atau terserah sobat saja :)
• 4. Kemudian dalam keadaan mode edit html silahkan copy paste script di bawah ini, jangan lupa linknya juga dirubah ke site sobat :

<div 1px="1px" solid="solid" style="height: 1200px; overflow: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; width: auto;"> <style type="text/css"> /*Outer Border ------------------*/ #toc{width:99%;margin:5px auto;border:1px solid #2D96DF; -webkit-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); -moz-box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2); box-shadow:4px 4px 8px 2px rgba(0,0,0, 0.2);} /*Label Color and Background ------------------*/ .labl{color:#FF5F00;font-weight:bold;margin:0 -5px;padding:1px 0 2px 11px; background:-moz-linear-gradient(right,#C2EAFE 0%,#055A85 40%); background:-webkit-gradient(linear,left 10,right 80,color-stop(0.20,#055A85),color-stop(1,#C2EAFE)); border:1px solid #2D96DF;border-radius:4px;-moz-border-radius:4px; -webkit-border-radius:4px;box-shadow:3px 3px 1px #bbb; -moz-box-shadow:3px 3px 1px #bbb;-webkit-box-shadow:3px 3px 1px #bbb;display:block;} .labl a{color:#fff;} .labl:first-letter{text-transform:uppercase;} /*Latest Post Info ------------------*/ .new{color:#FF5F00;font-weight:bold;font-style:italic} /*Post Title List ------------------*/ .postname{font-weight:normal;background:-moz-linear-gradient(right,#C2EAFE 0%,#fff 40%); background:-webkit-gradient(linear,left 80,right 10,color-stop(0.60,#fff),color-stop(1,#C2EAFE));} .postname li{border-bottom: #ddd 1px dotted;margin-right:5px} </style><br /> <br /> <br /> <div id="toc"> <script src="http://dvslabs.googlecode.com/files/customizable-TOC.js" type="text/javascript"> </script><br /> <script src="http://bertautan.com/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"> </script></div> </div>

• 5. Untuk setting lebar dan tingginya silahkan ubah script nilai height dan width-nya. dibawah ini contoh tinggi saya buat 1200px dan lebar saya buat auto alias menyesuaikan lebar halaman sitemap

<div 1px="1px" solid="solid" style="height: 1200px; overflow: auto; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; padding-top: 10px; width: auto;">

• 6. Simpan perubahan dan taraaa...cantik kan ?

Semoga Tips membuat SiteMap Cantik diatas dapat bermanfaat bagi sobat semua, selamat mengutak atik dan sukses selalu.

Read more »

Membuat Scroll Pada Archive

Untuk Postingan kali ini saya ingin berbagi trik kepada para sobat blogger tentang bagaimana membuat kotak archive berbentuk scroll. yang mana fungsi scroll disini tentu saja menghemat tempat agar tampilan widget blog sobat lebih tampak rapi dan elok untuk dinikmati pemirsa. dari postingan mengenai tips dan trik di bertautan dotcom ini saya buat murni dari bentuk-bentuk template yang tertempel di blog saya. jadi nanti mengenai ukuran dan bentuk bisa sobat utak dan atik sendiri ya... :). yuk kita simak tipsnya.

• 1. Pertama lakukan langkah awal seperti biasa,  dashboard > Design > Edit html > Expand widget templates. o iya, untuk menjaga hal-hal yang tidak diinginkan maka seyogyanya di back-up dulu ya template sobat.

• 2. Gunakanlah fungsi find (ctrl + F) untuk mempermudah mencari code berikut , Carilah code ini  :   <div id='ArchiveList'>

• 3. Setelah ketemu kode diatas maka sobat akan menemui kode <div class='widget-content'> sebelum kode  <div id='ArchiveList'>

• 4. Selanjutnya sobat Ganti Kode <div class='widget-content'>  dengan kode di bawah ini :

<div class='widget-content' style='overflow:auto; height:200px'>

• 5. untuk tinggi kotak maka yang perlu diganti adalah pada bagian Height-nya, sobat bisa atur sesuai selera.

Bagaimana, mudah bukan ?.... selamat mengutak atik widget templatenya ya. semoga di postingan yang singkat ini bisa memberi manfaat pada sobat-sobat saya. aamiin.

Read more »

Trik Membuat Scrollbar pada Komentar

Di kesempatan ini saya ingin membagi tips pada sobat-sobat yang ingin kotak komentarnya bisa sedikit hemat tempat alias gak panjang menjulur ke bawah. tentunya hal ini memudahkan para pengunjung agar tak kesulitan memutar scroll mouse untuk menyeret halaman sampai ke bawah bila komentar blognya banyak banget.

Walau Tips ini sudah banyak yang memposting tapi gak salah pula kalo saya juga sedikit mereview hal ini, yuk kita simak tipsnya di bawah ini

Pada dashboard bloger masuklah ke menu edit html lalu ceklis Expand Template Widget dan temukan kode dibawah, cari yang agak mirip-mirip begini :

<div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
        <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
          <b:loop values='data:post.comments' var='comment'>
            <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
              <b:if cond='data:comment.favicon'>
                <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
              </b:if>"

Bila tidak ada script diatas maka cari yang seperti di bawah ini :

<dl id='comments-block'>
    <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
          <b:loop values='data:post.backlinks' var='backlink'>
            <div class='collapsed-backlink backlink-control'>
              <dt class='comment-title'>
                <span class='backlink-toggle-zippy'>&#160;</span>
                <a expr:href='data:backlink.url'><data:backlink.title/></a> "

Bila sudah ketemu maka tambahkan kode di bawah ini persis diatas kode yang dicari tadi / kode diatas :

<div style='overflow:auto; width:ancho; height:300px;'> 

Jangan di Save dulu ya sob, coba Scroll ke bawah sedikit cari kode </dl> jika sudah ketemu beri kode penutup </div> setelah kode </dl> , jika tidak maka akan terjadi eror karena belum ada tag penutupnya.

Sekarang coba di preview, bila udah maka Save template sobat... selamat sekarang komentar-komentar sobat sudah ada scrollnya.  

Read more »

Membuat Auto Readmore

 Jika kemarin saya posting tentang membuat autoscroll pada komentar blog , sekarang saatnya memposting bab membuat Auto Readmore. tentu sobat semua yang mempunyai postingan panjang akan sangat bermanfaat sekali, selain membuat tampilan lebih rapi tentu saja membuat template kita terlihat keren dan SeoFriendly . yuk kita simak tips di bawah ini.

Berikut cara membuat autreadmore:

1. masuk ke rancangan >> Edit Html

2. beri tanda centang pada "Expand Widget Templates"

3. lalu copy kode dibawah, letakkan tepat diatas </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 300; summary_img = 301; img_thumb_height = 100; img_thumb_width = 150; </script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
if(img.length<1) {
imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPdlTwP7-QDxGrGtI_g-QbOaT569YTF3RKIpiz9qsYmFDGmtFDxCPS8mDU6hM-7M9B0i-nzA9sGRs-Tqvvmh9KLLENAZsSqcIETch7de7tsJCEOVTsePyhVQlqCoyoBPbNjsb_5ODeAg/s1600/def-thumb.png" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
var summ = summary_noimg;
}
if(img.length>=1) {
imgtag = '<span style="float:right; padding:0px 0px 5px 10px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Perhatikan dan edit sesuai selera sobat:
summary_noimg = 300 ---- jumlah karakter yang ditampilkan tanpa gambar
summary_img = 301 ---- jumlah karakter yang ditampilkan termasuk gambar
img_thumb_height = 150 ----tinggi gambar thumbnail
img_thumb_width = 150 ---- lebar gambar thumbnail
float:right ---- posisi gambar thumbnail di kanan. Jika anda ingin gambar thumbnail berada di kiri ganti right menjadi left
4. lalu cari kode <data:post.body/> atau <p><data:post.body/></p>

5. Selanjutnya sobat ganti dengan kode dibawah :

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

6. Jika sudah SAVE template sobat

Nah, mudah bukan...semoga bermanfaat yah.... :)

Read more »

Membuat Link di Status Bar Sembunyi

Setelah kemarin bertautan dotcom lagi senang dengan adanya update resmi pagerank bulan mei 2012 , walau masih nongkrong di kelas satu tapi alhamdulillah saya panjatkan. sekarang saya ingin berbagi tips kepada sobat yang masih belum tahu cara membuat link di status bar sembunyi waktu di sorot mouse. Tips ini mungkin sudah banyak sobat blog yang paham betul, tapi ini upaya bertautan dotcom agar mempunyai dokumen yang suatu saat pas lupa scrip bisa saya gunakan lagi.

mungkin ada sobat yang merasa aneh sewaktu jalan-jalan di blog teman lain kemudian waktu kita menyorot umpama iklannya tapi di status bar link-nya gak nongol, itu sengaja dibuat karena si empu-nya link mempunyai seabreg maksud di dalamnya. nah, bagi sobat yang belum tahu cara buatnya silahkan simak tutorial singkat di bawah ini

( coba sorot dengan mouse gambar diatas, pasti di status bar tidak terlihat link-nya )

Langkah membuat seperti diatas adalah :

1. Seperti biasa, masuk ke tata letak di akun blog sobat
2. Masuk dalam mode html di widget yang ingin sobat oprek :)
3. Masukkan script seperti di bawah ini, link url silahkan diganti dengan link tujuan milik sobat , dan setelah itu simpan setelan sobat.

<a onclick="window.open('http://i46.tinypic.com/6e3nus.jpg'); return false;" target="_blank"  style="cursor: pointer;"><img src="http://i46.tinypic.com/6e3nus.jpg"/></a>

Gimana sobat, mudah bukan.... semoga postingan singkat ini memberi manfaat buat sobat semua. Semangat selalu buat blogger indonesia, saling memberi manfaat semoga menjadi lebih baik di kemudian hari. aamiin.

Read more »

CARA MEMBUAT TV ONLINE STREAMING

Banyaknya obral Bandwidth internet menjadi ladang tersendiri bagi penyedia layanan streaming TV online over internet. Bagi yang sering bepergian maupun yang ingin simple dalam menonton acara televisi tentu berbagai cara ditempuh salah satunya lewat koneksi internet. kelebihan streaming salah satunya yaitu tanpa hambatan cuaca dan kekurangannya bila bandwidth internet kita pas-pasan tentu akan terjadi delay alias ' ngentet-ngentet ( bhs. jawa ). bagaimana cara membuat TV online streaming di blog pasti banyak dijumpai di postingan sahabat blogger, tidak salah pula saya ikut andil menyebar ilmu-nya sahabat blogger agar semakin tumbuh subur ilmu para blogger tanah air. :)

Tanpa berpanjang lebar yuk ikuti cara membuat TV streaming yang kali ini hasil streaming dari pihak mivo tv yang sudah terkenal sebagai penyedia tv online sejak lama. ikuti langkahnya step by step ya ... 

• 1. Berdo'a dulu ... ^_^
• 2. Buka entri baru di blog sobat ( caranya pasti sudah tahu ) kemudian copy paste kode HTML di bawah ini, ingat harus dalam mode HTML bukan di compose lho ya !

<center> <embed allowfullscreen="true" allowscriptaccess="sameDomain" bgcolor="#ffffff" devicefont="false" menu="true" name="MivoTV" pluginspage="http://www.macromedia.com/go/getflashplayer" quality="high" scale="noscale" scroll="auto" src="http://id.imediabiz.com/MivoTV.swf?r=%27%20+%20Math.round%28Math.random%28%29%20*%2099999%29%20+%20%27" type="application/x-shockwave-flash" wmode="transparent" width="500" align="top" height="800"></embed></center>

• 3. simpan /  pratinjau dulu hasil copy paste tadi.
• 4. sedikit tambahan, bila ingin mengubah panjang, lebar dan warna latar sobat coba berkreasi dengan mengubah script ' width, height dan bgcolor ' -nya .
• 5. Nah selamat, sobat sudah mempunyai saluran TV online sendiri di blog sobat, keren bukan ^_^ .

Mudah bukan cara membuatnya ?, semoga postingan ini bisa membantu para sobat blogger untuk lebih berkreasi membuat tampilan blognya makin ceria dan ramai pengunjung dengan hadirnya tv online. contoh jadi tv online streaming bisa sobat lihat  >>>disini. 

Read more »

Menghilangkan Auto Readmore di Static Page

Masih ingat cara membuat auto readmore ?, mungkin cara ini banyak sekali bertebaran di halaman web sobat-sobat saya. tapi sebagai dokumentasi saya mencoba memposting cara menghilangkan auto readmore di static page agar nanti bila saya dan teman-teman ada yang butuh akan mudah melacak dan tinggal menerapkannya.  Mungkin pada postingan saya terdahulu auto readmore-nya ada yang bermasalah dengan halaman static, maka disini saya akan mencoba berbagi tips agar pada halaman statis tidak muncul auto readmore - nya.

Bagi yang sudah menerapkan kode pada postingan saya terdahulu dan menemukan kejanggalan waktu membuka tab lain di blog-nya yaitu muncul auto readmore yang tidak kita kehendaki alias semua halaman blog kita yang tidak ingin dikasih auto readmore ikut ketempelan readmore, maka ikuti tips saya berikut ini.

1. Buka perancang template (backup dulu ! ) dan cari tag yang mirip seperti di bawah ini

   <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;

    </script>
    <span class='rmlink' style='float:left'><a expr:href='data:post.url'><b>Read more &#187; 

    </b></a>

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

2. Setelah ketemu maka ganti script kode diatas dengan script di bawah ini :

    <b:if cond='data:blog.pageType == "static_page"'>
    <data:post.body/>
    <b:else/>
    <b:if cond='data:blog.pageType != "item"'>
    <div expr:id='"summary" + data:post.id'><data:post.body/></div>
    <script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
    <span class='more' style='float:left'>
    <a expr:href='data:post.url'>Read more</a>
    </span>
    </b:if> </b:if>
    <b:if cond='data:blog.pageType == "item"'>
    <data:post.body/>
    </b:if>

3. Setelah itu save template sobat.

Mudah bukan, bila penggunaan script auto readmore tidak mengalami permasalahan maka script diatas tidak diperlukan lagi . biasanya setiap template berbeda dalam menangani kasus seperti diatas. kasus diatas saya aplikasikan di blog-blog saya dan alhamdulillah berhasil sempurna.

Read more »

Rahasia Approve Google Adsense Bertautan DotCom

Mungkin sudah banyak cerita tentang Google Adsense di post-kan oleh sobat-sobat kita, mulai di forum, board community ataupun para blogger di seluruh penjuru dunia. Disini tidak salah pula saya sedikit memberi tips pada sobat kita yang ingin mendapat simpati alias Approve dari rajanya Iklan dunia Advertising Online yaitu Google adsense. yang kita tahu banyak para webster ataupun blogger yang ingin meraup Dolar dari kantong Raja Iklan tersebut. tentu, bukan perkara mudah untuk dapat diterima menjadi partner si GA.

Di sini saya sedikit memberi tips bagi yang sudah saya alami dari liku-liku mendapatkan simpati berupa Approved dari si mbah Google yang mana dari sekian banyak lamaran yang saya tujukan kepada si Mbah Iklan selalu tertolak dengan alasan kurang ini-lah kurang itu-lah :) . sayapun sebagai si pelamar tentunya ho'oh saja dan ada sedikit kecewa waktu lamaran ditolak, tapi tak apalah... yang penting sekarang si 'Bos' sudah jinak sama saya...hehehe... yuk disimak tips dari saya pribadi

•  Bila sobat pernah mengalami kegagalan dalam melamar di Google Adsense, maka lamaran selanjutnya gunakan Akun email yang berbeda. kalo yang ini sudah rahasia umum...hehehe... 

•  Ada pendapat bahwa supaya menggunakan sedikit trik dalam mengubah alamat atau nomor Hp umpamanya, tapi menurut saya tips tersebut kurang dapat dipertanggung jawabkan. karena saya sendiri memakai isian yang sama waktu mendaftar dengan akun berbeda dan akhirnya goal juga.

• Umur website kita / blog minimum sudah mencapai 3 bulan. saya membuktikannya waktu di bulan-bulan sebelum itu mendaftar selalu nihil hasilnya.

• Tingkatkan terus jejak kita di web atau blog kunjungan, hal ini sering disepelekan oleh para blogger. biasanya kalo sudah mengisi daftar hadir / chat pasti kabur entah kemana. jangan, lakukan komentar di blog kunjungan, karena secara tidak langsung komentar dan link yang kita tanam di blog kunjungan akan dinilai sebagai backlink yang tentu saja si mbah google akan makin senang dengan web / blog kita.

• Selalu update terus postingan sobat minimal 1 minggu sekali, karena halaman yang statis tanpa update akan dinilai buruk oleh si mbah google.

•  Dan yang terakhir, Berdo'a.... ya cukup berdo'a saja semoga diterima lamaran kita :)

Gimana, sudah siap menerima kucuran dolar dari Rajanya Iklan si Google Adsense ?, yuk kita buktikan tips diatas. semoga tips singkat diatas dapat memberi segumpal pencerahan bagi penayang-penayang iklan seperti saya. Salam sukses selalu.

Read more »

Membuat Spoiler di KASKUS dan Blog

Apa kabar sobat semua, kali ini saya ingin membagi tips pada sobat semua tentang cara membuat spoiler. mungkin sudah banyak artikel atau postingan di blog teman kita yang membahas hal ini tapi nggak salah juga kan kalau saya juga ikutan menaruh banyak-banyak postingan agar oleh mbah google bisa disayang..hehehe.

Fungsi spoiler sendiri akan sangat membantu kita dalam menghemat space tempat ataupun membantu mempercepat load dari suatu halaman yang mana user akan mempunyai pilihan nantinya akan membuka atau tidak tampilan yang di 'simpan / tersembunyi' di bawah tombol spoiler. Saking banyaknya kegunaan spoiler maka di forum-forum seperti kaskus semua membernya pasti sudah akrab dengan Spoiler.

Bentuk Pengkodean Spoiler untuk di forum semacam kaskus dan di blogspot caranya berbeda, yuk kita tengok caranya :

1. Spoiler Forum di KASKUS dapat menggunakan kode seperti di bawah ini:
[spoiler=judul spoiler]isi spoiler[/spoiler]

2. Spoiler untuk di blog / web dapat mempergunakan script seperti di bawah ini :
 _______________________________________________________


<div><div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><i><span style="font-weight: bold;">Ini tentang Cara Buat spoiler </span></i><input value="Show" style="margin: 0px; padding: 0px; width: 60px; " 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'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">

Isi Spoiler ditaruh disini ( bisa gambar, link ataupun teks )

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

 Kode diatas pada prakteknya akan seperti di bawah ini :

CIII...LUUUKKK...BAAAAA :)

Nah..mudah bukan sobat... silahkan dipraktekkan ya... , sekian dulu postnya yang singkat. walau singkat asal ada manfaatnya... hehehee.

Read more »