Cara Membuat Content Slider Carousel Otomatis

Content slider carousel otomatis yang saya lihat dari blog nya maskolis.com ada dua macam, yang pertama adalah content slider carousel dengan image dan judul artikel ada dibagian bawah gambar, sedangkan yang kedua adalah content slider carousel dengan judul artikel ada disamping gambar seperti yang anda lihat di home page blog saya, atau seperti gambar diatas.

Artikel ini memang sumbernya dari maskolis.com, saya membuat artikel ini tujuan utamanya adalah untuk dokumentasi saja, agar suatu saat nanti kalau ingin memasang pada blog saya yang lain gampang mencarinya. Terima kasih buat maskolis yang sudah bersedia berbagi ilmunya.

Berikut panduan cara membuat content slider carousel otomatis versi 2 (dengan judul artikel disamping gambar)

1. Masuk ke template >> Edit HTML, kemudian centang expand widget templates
Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
Setelah semua langkah diatas anda lakukan, cari kode: ]]></b:skin>, kemudian masukkan kode berikut ini diatasnya.

#carousel{width:980px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#5599e6;margin-bottom:8px} #carousel h5{color:#555;margin:2px} #carousel .container{position:absolute;left:24px;width:960px;height:125px;overflow:hidden} #carousel .thumb{float:left;margin-right:5px;} #carousel #previous_button{position:absolute;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtxdaoqzndVLbh1GCVXmlI3eE51RUS5-2wXce9e-wRcC8-BWBMbv4DB_huYZh7Uk3bRRrS0hbFqS1FIQssMXK5HmcKEZli7-jCV-oPQvY-nTA1lyijTcfm4qb_0VuQs3dH5CRnnmAXru92/s1600/previous.png) center;z-index:100;cursor:pointer;} #carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqY_miMSRu4zEPP5MQdGKcnBxxq55V1oD5lXjt2bfkQSEKI2kfy3lRQgrNkzenxEVx3jVad4ZxBhPiR_quVFOgppoybmrfassyOhFmCxP0lZLHIjrMWG68MKTiSQyUtm-QOXbRYTreoCxE/s1600/next.png) center;z-index:100;cursor:pointer;} #carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7} #carousel ul{width:100000px;position:relative;margin-top:10px} #carousel ul li{background:#ebebeb;display:inline;float:left;text-align:left;font:bold 11px Arial;border:0px solid #ccc;width:212px;height:90px;margin:0 2px 20px 6px;padding:6px} #carousel ul li a.slider_title{color:#222;display:block;margin-top:0;padding-top:0} #carousel ul li a.slider_title:hover{color:#1b5d97} #carousel a img{display:block;background:#fff;margin-top:0}

Perhatikan kode: width:980px;height:125px diatas, itu adalah lebar dan tinggi slider pada blog yang saya buat, silahkan Anda sesuaikan dengan ukuran template Anda.

2. Langkah selanjutnya masih pada posisi Edit HTML, cari kode: </head>,  kemudian masukkan kode berikut ini diatasnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/><script src='https://masolis-javascript.googlecode.com/svn/trunk/carousellite.js' type='text/javascript'/> <script type='text/javascript'>//<![CDATA[ imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglM39mmiPHf1redg3wTDvAD3_EAjdb-0ikfv9tmLUML2AAiVbX1Ao2sNz05aKyqmbwVWS9uz3lg5lbAiyvO_PbTWZrGUipoW4-QuBvxmzB0Qe6jOHWrBbEWWqMbcJLHykBf5xql-VGIZY/s1600/no+image.jpg"; showRandomImg = true; aBold = true; summaryPost = 140; summaryTitle = 25; numposts1 = 12; function removeHtmlTag(strx,chop){ 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); } } s = s.join(""); s = s.substring(0,chop-1); return s; } function showrecentposts(json) { j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; img = new Array(); document.write('<ul>'); for (var i = 0; i < numposts1; i++) { var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var pcm; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; } } for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') { pcm = entry.link[k].title.split(" ")[0]; break; } } if ("content" in entry) { var postcontent = entry.content.$t;} else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; postdate = entry.published.$t; if(j>imgr.length-1) j=0; img[i] = imgr[j]; s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d; //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : ''; var month = [1,2,3,4,5,6,7,8,9,10,11,12]; var month2 = ["January","February","March","April","May","June","July","August","September","October","November","December"]; var day = postdate.split("-")[2].substring(0,2); var m = postdate.split("-")[1]; var y = postdate.split("-")[0]; for(var u2=0;u2<month.length;u2++){ if(parseInt(m)==month[u2]) { m = month2[u2] ; break; } } var daystr = day+ ' ' + m + ' ' + y ; var trtd = ' <li class="car"><div class="thumb"><a href="'+posturl+'"><img width="100" height="90" class="alignnone" src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>'; document.write(trtd); j++; } document.write('</ul>'); } //]]></script>

Perhatikan URL script: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat slider ini. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode tersebut diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru.
Kode: numposts1 = 12; diatas adalah jumlah slider yang ditampilkan. Sedangkan kode: img width="100" height="90" adalah panjang dan lebar image yang ada di slider.

3. Langkah selanjutnya adalah memanggil slider tersebut agar muncul di blog kita. Cari kode: <div id='main-wrapper'> atau yang mirip dengan kode itu, kemudian letakkan kode berikut ini diatasnya.

<div id='carousel'><div id='previous_button'/><div class='container'><script>document.write("<script src=\"/feeds/posts/default/-/sport?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); </script> <div class='clear'/></div><div id='next_button'/></div><script type='text/javascript'>(function($) { $(document).ready(function(){ $("#carousel .container").jCarouselLite({ auto:4000, scroll: 1, speed: 800, visible: 5, start: 0, circular: true, btnPrev: "#previous_button", btnNext: "#next_button" }); })})(jQuery) </script>

Perhatikan kode: script src=\"/feeds/posts/default/-/sport?max-results diatas, sport adalah label yang ditampilkan pada slider nantinya (ingat besar kecil huruf harus sama dengan label yang sudah Anda buat). Jika Anda ingin menampilkan postingan atau artikel terbaru pada slider, tinggal hapus kode /-/sport. Kode diatas bisa juga anda letakkan dibawah atau diatas navigasi menu Anda atau bisa juga diletakkan diatas footer.

4. Langkah terakhir, save templates dan lihat hasilnya.

Jika Anda ikuti langkah diatas dengan benar, slider Carousel itu akan muncul di blog Anda.
Jika ada yang kurang jelas silahkan tinggalkan pesan di kotak komentar. Selamat mencoba dan semoga bermanfaat.

Read More

Cara Membuat Tab View Widget Berdasarkan Label

Apa itu tab view widget?

Tab view widget yang saya ketahui adalah widget yang terdiri dari beberapa tab (biasanya 3 tab) dan diletakkan di sisi blog atau di side bar.

Untuk apa kita pasang tab view widget di blog?

Tab view widget kita pasang biasanya untuk meringkas beberapa widget menjadi satu halaman, sehingga tampilan blog akan menjadi lebih langsing karena cukup menggunakan satu halaman di sidebar sudah bisa kita letakkan beberapa widget.

Berikut ini piper comex akan berbagi pengalaman bagaimana cara membuat tab view widget berdasarkan label.

Untuk demo nya bisa anda liat dibawah postingan ini, atau gambarnya bisa dilihat diatas.

Beberapa hal yang harus diperhatikan dalam membuat tab view widget ini adalah:

• Apabila pada template anda sudah dilengkapi dengan widget slider animasi, agar diperhatikan kode script nya, jangan sampai ada lebih dari satu script dengan ektensi: min.js.
• Kemudian juga untuk kode: numposts dan showrecentposts jangan sampai sama dengan widget animasi sebelumnya (salah satu harus diberi tambahan kode, menjadi: numposts1 dan showrecentposts1, atau terserah anda yang penting tidak sama).
• Jangan lupa untuk mem-backup terlebih dahulu template anda, untuk jaga-jaga apabila terjadi kesalahan dapat dikembalikan ke kondisi semula.

Ok, langsung saja kita ke TKP.

Sebelumnya saya ingin menyampaikan terima kasih dulu kepada maskolis.com yang sudah bersedia berbagi tutorial mengenai cara membuat tab view widget kategori mantab banget. Tutorial ini memang sumbernya dari beliau, saya mencoba berbagi kepada anda dengan cara saya sendiri.

1. Masuk ke template >> edit HTML >> centang expand template widget.

2. Cari kode: ]]></b:skin> , kemudian masukkan kode berikut ini diatasnya.

#tabber-wrapper{width:630px;float:left;word-wrap:break-word;overflow:hidden} ul.tab-view{float:left;list-style:none;height:32px;border-bottom:1px solid #aaa;border-left:1px solid #aaa;width:628px;margin:0;padding:0} ul.tab-view li{float:left;height:31px;line-height:31px;border:1px solid #aaa;border-left:none;overflow:hidden;position:relative;background:#eee;margin:0 0 -1px;padding:0} ul.tab-view li a{text-decoration:none;color:#26231c;display:block;border:1px solid #eee;outline:none;font-weight:700;padding:0 15px} html ul.tab-view li.active,html ul.tab-view li.active a,html ul.tab-view li.active a:hover{background:#eee;color:#026ab5;border-bottom:1px solid #eee} .tab-wrapper{border:1px solid #aaa;border-top:none;overflow:hidden;clear:both;float:left;width:628px;background:#eee;margin-bottom:15px} .tabber{padding:10px 0} .tabber .column{float:left;display:inline;width:143px;margin:0 0 0 11px} .tabber h2{font:bold 12px Arial;line-height:15px;margin:7px 0 5px} .tabber h2 a{color:#222} .tabber h2 a:hover{color:#026ab5}

Karena lebar halaman postingan blog saya 640px, maka lebarnya widget ini saya sesuaikan dengan saya beri nilai: 630px. Nanti di blog anda bisa disesuaikan kembali dengan kondisi lebar area posting blog anda dengan merubah nilai tersebut.

3. Selanjutnya cari kode: </head>,  kemudian masukkan kode berikut ini diatasnya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/><script src='https://masolis-javascript.googlecode.com/svn/trunk/tabview.js' type='text/javascript'/><script type='text/javascript'>//<![CDATA[ imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglM39mmiPHf1redg3wTDvAD3_EAjdb-0ikfv9tmLUML2AAiVbX1Ao2sNz05aKyqmbwVWS9uz3lg5lbAiyvO_PbTWZrGUipoW4-QuBvxmzB0Qe6jOHWrBbEWWqMbcJLHykBf5xql-VGIZY/s1600/no+image.jpg";showRandomImg=true;aBold=true;summaryPost=80;numposts=4;Title1="Basic Engine";Title2="Power Train";Title3="Kategori1";Title4="Kategori2";Title5="Kategori3";Title6="Bebas";function removeHtmlTag(strx,chop){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)}}s=s.join("");s=s.substring(0,chop-1);return s}function showrecentposts(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<div class="column"><a href="'+posturl+'"><img width="143" height="95" src="'+img[i]+'"/></a><h2><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div>';document.write(trtd);j++}} //]]></script>

Seperti saya jelaskan diatas, apabila di template anda sudah ada kode min.js. Maka kode: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> tidak perlu dipasang lagi.

Kemudian untuk kode title: Title1="Basic Engine";Title2="Power Train";Title3="Kategori1";Title4="Kategori2";Title5="Kategori3";Title6="Bebas", ganti label atau kategori warna biru tersebut dengan label atau kategori pada blog anda.

4. Berikutnya cari kode: </body>, kemudian masukkan kode berikut ini diatasnya.

<script type='text/javascript'> //<![CDATA[ jQuery(document).ready(function(){$(".tabber").hide();$("ul.tab-view li:first").addClass("active").show();$(".tabber:first").show();$("ul.tab-view li").click(function(){$("ul.tab-view li").removeClass("active");$(this).addClass("active");$(".tabber").hide();var activeTab=$(this).find("a").attr("href");$(activeTab).fadeIn();return false})}); //]]></script>

5. Langkah selanjutnya adalah bagaimana cara menempatkan widget ini didalam blog anda. Jika kita ingin meletakkan widget tersebut diatas postingan, cari kode: <div id='main-wrapper'> ( atau yang mirip misalkan: area-posting, content-area dll. Kemudian letakkan kode berikut ini dibawahnya :

<div id='tabber-wrapper'><ul class='tab-view'><li><a href='#tab1'><script>document.write(Title1);</script></a></li><li><a href='#tab2'><script>document.write(Title2);</script></a></li><li><a href='#tab3'><script>document.write(Title3);</script></a></li><li><a href='#tab4'><script>document.write(Title4);</script></a></li><li><a href='#tab5'><script>document.write(Title5);</script></a></li><li><a href='#tab6'><script>document.write(Title6);</script></a></li></ul><div class='clear'/><div class='tab-wrapper'><div class='tabber' id='tab1'><script>document.write(" <script src=\"/feeds/posts/default/-/Basic Engine?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); </script></div><div class='tabber' id='tab2'><script>document.write(" <script src=\"/feeds/posts/default/-/Power Train?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); </script></div><div class='tabber' id='tab3'><script>document.write(" <script src=\"/feeds/posts/default/-/Kategori1?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); </script></div><div class='tabber' id='tab4'><script>document.write(" <script src=\"/feeds/posts/default/-/Kategori2?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); </script></div><div class='tabber' id='tab5'><script>document.write(" <script src=\"/feeds/posts/default/-/Kategori3?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); </script></div><div class='tabber' id='tab6'><script>document.write(" <script src=\"/feeds/posts/default/-/Kategori4?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); </script></div><div class='clear'/></div></div>

Yang harus diperhatikan pada langkah ini adalah kode-kode label atau kategori: Basic Engine, Power Train, Kategori1, Kategori2, Kategori3 dan Bebas pada kode diatas anda harus ganti sesuai dengan label atau kategori yang ada pada blog anda.

Apabila anda ingin meletakkan widget tersebut dibawah postingan seperti pada blog saya ini, cari kode: </div> <!-- end content-wrapper -->, atau yang mirip. Letakkan kode pada langkah 5 tadi diatasnya.

6. Simpan template, dan lihat hasilnya.

Jika masih ada yang kurang jelas, silahkan tinggalkan pesan pada kolom komentar.
Selamat mencoba dan semoga bermanfaat.

Read More

Cara Posting Code HTML di Blog

Piper comex pernah mengalami masalah gagal dalam membuat postingan yang berisi kode kode HTML, padahal sebelum sebelum nya lancar lancar saja. Setelah browsing sana sini, akhirnya dapat solusi bagaimana cara posting code HTML di Blog.

Berikut ini salah satu cara posting code HTML di Blog dengan menggunakan text area. Menggunakan text area mempunyai beberapa kelebihan dibanding dengan cara lain, diantaranya:

• kita dapat meringkas area posting sehingga tidak terlalu luas, 
• selain itu area postingan akan terlihat lebih rapi, 
• juga kita dapat menambah scroll pada text area tersebut
• kita bisa meletakkan dikiri, kanan atau tengah posting
• kita dapat menambahkan perintah sorot semua untuk di copy.
• kode html yg di copy tdk akan ada yg tertinggal.

Untuk tutorial kali ini piper comex akan sharing cara membuat text area untuk code HTML dibagian tengah posting dengan efek scroll dan sorot semua untuk di copy, berikut panduannya:

Tambahkan sedikit kode html, pada kode html yang akan kita posting. Kode yang digunakan untuk membuat teks area otomatis ini adalah :

<div>
<form name="copy">
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Highlight All" /> </div>
<div align="center">
<textarea cols="30" name="txt" rows="5" wrap="VIRTUAL">Ganti tulisan ini dengan tulisan atau Kode HTML yang akan anda tampilkan di dalam text area</textarea></div>
</form>
</div>

 Hasilnya :

Ganti tulisan ini dengan tulisan atau Kode HTML yang akan anda tampilkan di dalam text area

Silahkan klik pada tulisan HIGHLIGHT ALL, maka semua text yang ada di  dalam Text Area akan langsung ter-HIGHLIGHT / ter-PILIH.

Semoga artikel cara posting code html di blog ini bermanfaat. Jangan lupa tuliskan komentar atau pertanyaan bila masih ada yang kurang jelas. Terima kasih

Read More

Cara Membuat Content Slider Image Otomatis

Sekedar untuk dokumentasi saja, piper comex membuat artikel mengenai cara membuat content slider image otomatis yang piper comex copas dari blog maskolis.com.

Content slider image otomatis ini adalah hanya salah satu dari sekian banyak content slider image otomatis yang ada di internet, karena menurut piper comex content slider ini cukup mudah untuk diterapkan, maka piper comex pilih untuk dipasang pada blog piper comex. Terima kasih buat blog maskolis.com yang bersedia berbagi tutorial tersebut.

Berikut cara pembuatannya:

1. Login ke blogger
2. Pilih blog yang ingin kita tambah content slider image otomatis
3. Masuk ke "template" >> edit "html" >> centang "expand widget templates"
4. Jika perlu di "backup" dulu, untuk jaga-jaga apabila ada kesalahan edit html.
5. Selanjutnya cari kode: ]]></b:skin>, letakkan kode berikut ini diatas kode tersebut.

#featuredContent{float:left;width:360px;margin-right:10px;display:inline} #featured-slider{position:relative;overflow:hidden;width:360px;height:245px} #featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:360px;min-height:30px;height:auto!important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6zz-Pf6jbNi6CkE7aq9zEKyGOlM31N2fHThxvxyT7h4Q-Srp1Zoef8uv8CZPEFpnVP-FVEVxE6ppALfsnct8Cu5G3qq82KyOvR2Ggtd9ZhYBMNDagoW168rayH_UA5R9D_XZGZkGz-QlS/s1600/transparant.png);padding:5px 5px 0 5px} #featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding-right:5px} #featured-slider .featuredTitle a{color:#ff9900;font:bold 14px Tahoma;text-transform:none;} #featured-slider .featuredTitle a:hover{color:#fff} #featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1} #paginate-featured-slider{display:block;background-color:#ebe8e1;margin-bottom:0;padding:0 0 5px} #paginate-featured-slider ul{width:368px;padding-bottom:0;list-style:none} #paginate-featured-slider ul li{display:inline;width:84px;float:left;margin-left:0;margin-right:8px;margin-bottom:3px} #paginate-featured-slider img{padding-top:5px;background:#ebe8e1} #paginate-featured-slider a img{border-top:4px solid #ebe8e1} #paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #554931}

6. Kemudian masih di dalam edit html, cari kode: </head>, letakkan kode berikut diatas nya.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/><script src='https://masolis-javascript.googlecode.com/svn/trunk/contentslider.js' type='text/javascript'/> <script type='text/javascript'>//<![CDATA[ imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglM39mmiPHf1redg3wTDvAD3_EAjdb-0ikfv9tmLUML2AAiVbX1Ao2sNz05aKyqmbwVWS9uz3lg5lbAiyvO_PbTWZrGUipoW4-QuBvxmzB0Qe6jOHWrBbEWWqMbcJLHykBf5xql-VGIZY/s1600/no+image.jpg"; showRandomImg = true; aBold = true; summaryPost = 100; summaryTitle = 25; numposts3 = 5; function removeHtmlTag(strx,chop){ 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); } } s = s.join(""); s = s.substring(0,chop-1); return s; } function showrecentposts3(json) { j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; img = new Array(); for (var i = 0; i < numposts3; i++) { var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var pcm; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; } } for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') { pcm = entry.link[k].title.split(" ")[0]; break; } } if ("content" in entry) { var postcontent = entry.content.$t;} else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; postdate = entry.published.$t; if(j>imgr.length-1) j=0; img[i] = imgr[j]; s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d; //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : ''; var month = [1,2,3,4,5,6,7,8,9,10,11,12]; var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; var day = postdate.split("-")[2].substring(0,2); var m = postdate.split("-")[1]; var y = postdate.split("-")[0]; for(var u2=0;u2<month.length;u2++){ if(parseInt(m)==month[u2]) { m = month2[u2] ; break; } } var daystr = day+ ' ' + m + ' ' + y ; var trtd = '<div class="contentdiv"><a href="'+posturl+'"><img width="407" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>'; document.write(trtd); j++; } } function showrecentposts4(json) { j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0; img = new Array(); for (var i = 0; i < numposts3; i++) { var entry = json.feed.entry[i]; var posttitle = entry.title.$t; var pcm; var posturl; if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { posturl = entry.link[k].href; break; } } for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') { pcm = entry.link[k].title.split(" ")[0]; break; } } if ("content" in entry) { var postcontent = entry.content.$t;} else if ("summary" in entry) { var postcontent = entry.summary.$t;} else var postcontent = ""; postdate = entry.published.$t; if(j>imgr.length-1) j=0; img[i] = imgr[j]; s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5); if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d; //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : ''; var month = [1,2,3,4,5,6,7,8,9,10,11,12]; var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]; var day = postdate.split("-")[2].substring(0,2); var m = postdate.split("-")[1]; var y = postdate.split("-")[0]; for(var u2=0;u2<month.length;u2++){ if(parseInt(m)==month[u2]) { m = month2[u2] ; break; } } var daystr = day+ ' ' + m + ' ' + y ; var trtd = ' <li><a class="toc" href="#"><img width="75" height="50" class="alignnone" src="'+img[i]+'"/></a></li>'; document.write(trtd); j++; } } //]]></script>

7. Setelah langkah diatas, save template terlebih dulu, kemudian buka tata letak / layout, add gadget, html, masukkan kode berikut pada kotak HTML/javascript.

<div id='featuredContent'><div class='sliderwrapper' id='featured-slider'><script>document.write("<script src=\"/feeds/posts/default?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>"); </script></div><div id='paginate-featured-slider'><ul><script>document.write("<script src=\"/feeds/posts/default?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>"); </script></ul><div class='clear'></div></div><script type='text/javascript'>featuredcontentslider.init({ id: "featured-slider", //id of main slider DIV contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"] toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc] nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide. revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover" enablefade: [true, 0.4], //[true/false, fadedegree] autorotate: [true, 5000], //[true/false, pausetime] onChange: function(previndex, curindex){ //event handler fired whenever script changes slide //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc) //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc) } }) </script></div>

8. Selesai.

Catatan:
Jika didalam template sudah ada script "min.js", cukup dipasang satu kode saja.
Jika ingin merubah isi slider berdasarkan "label/kategori", cari kode: script src=\"/feeds/posts/default?max-results (ada dua), ganti dengan kode: script src=\"/feeds/posts/default/-/LABEL?max-results

Read More

Cara Membuat Show Hide Komentar Blog

Banyak tutorial yang membahas bagaimana cara membuat show hide komentar blog. Berikut ini salah satu tutorial dari pelajaran-blog blogspot.com, saya terapkan pada blog piper comex ini karena caranya sangat sederhana.

Fungsi "Show Hide komentar blog", salah satunya adalah untuk memperingkas tampilan blog dibawah posting. Apalagi untuk blog yang banyak pengunjung dan banyak komentarnya. Selain itu show hide komentar juga dapat mempercepat loading.

Berikut panduan cara membuat show hide komentar blog.

Pertama,sobat pergi ke Dashboard lalu pilih Tata Letak kemudian contreng tulisan Expand Widget Templates, dan cari kode berikut (Gunakan Ctrl+F):
 ======
</head>

Jika sudah menemukannya, letakkan script berikut diatasnya:
=======
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
var panelSelector = '#comments',
openPanelText = "Tampilkan Komentar",
closePanelText = "Tutup Komentar",
slideDownPanelSpeed = 600,
slideUpPanelSpeed = 400;
//]]>
</script>
<script type='text/javascript'>
</script>
<script src='http://membuatgempar.net23.net/comment.js' type='text/javascript'/>

Setelah itu,cari kode berikut:
=====
]]></b:skin>

Jika sudah sobat temukan, letakkan barisan kode ini diatasnya:
=====
a.openpanel {display:block;width:100%;height:40px;padding:0px 0px;text-align:center;font-weight:bold;line-height:30px;background:#ffffff; url()repeat-x;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;position:relative;
}a.openpanel em {width:0px;height:0px;display:block;position:absolute;top:15px; right:15px;border:6px solid transparent;border-top-color:white;
}a.openpanel.active {background-color:#ffffff;}a.openpanel.active em {top:6px;border color:#222222;
}div.paneline {height:0px;-webkit-transition: all .15s ease-in-out;-webkit-transform-origin: 50% 1px;}div.hompiPanel {padding:10px 20px 20px;margin:0px 0px !important;}

Setelah itu simpan template sobat.

Catatan:
Trik ini akan bekerja jika sobat mengaktifkan komentar di blogger, baik dalam komentar posting maupun settingan secara universalnya.
 
Jika didalam template sobat sudah ada kode: <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>, atau seri jquery berapapun, sebaiknya pakai kode tersebut salah satunya saja, agar script nya tidak bentrok.

Selamat mencoba  :D
HAPPY BLOGGING...!!

Read More

Basic HTML Code

Belajar Basic HTML Code

Di bawah ini ada beberapa kode-kode untuk mewakili pemformatan text maupun mebuat berbagai object dalam halaman anda, meskipun sekarang sudah banyak pembuatan halamanHTML dengan software instant seperti Dreamweaver dll.

---

Membuat Center,gunakan kode : <p align="center">Belajar</p> hasilnya seperti:

Belajar

---

Membuat Posisi kekanan gunakan kode : <p align="right">Belajar</p> hasilnya seperti :

Belajar

---

Membuat Posisi kekiri gunakan kode: <p align="left">Belajar</p> hasilnya seperti :

Belajar

---

Membuat Huruf Tebal gunakan kode: <b>Belajar</b> hasilnya seperti :

Belajar

---

Membuat Huruf Garis Bawah gunakan kode : <u>Belajar</u> hasilnya seperti :

Belajar

---

Membuat Huruf bercetak Miring gunakan kode : <i>Belajar</i> hasilnya seperti :

Belajar

---

Membuat Kombinasi huruf tebal,miring,garisbawah,gunakan kode :

<b><i><u>Belajar</u></i></b> hasilnya seperti :

Belajar

---

Membuat Huruf tebal strong gunakan kode : <srong>Belajar</strong> hasilnya seperti :

Belajar

---

Membuat Huruf Hidden gunakan kode : <span style="visibility: hidden">Belajar</span>hasilnya seperti :

Namanya juga hidden..ya..ga keliatan..

---

Membuat Huruf Besar semua (uppercase) gunakan kode :

<span style="text-transform: uppercase">Belajar</span> hasilnya seperti :

BELAJAR

---

Membuat Huruf Small caps gunakan kode:

<span style="font-variant: small-caps">Belajar</span> hasilnya seperti ini:

Belajar

---

Membuat Huruf Subscribe / kecil di bawah gunakan kode:

<p>4₂</p>hasilnya seperti ini:

4₂

---

Membuat Huruf Superscribe / pangkat gunakan kode:

<p>4²</p> hasilnya seperti ini:

4²

---

Membuat Huruf bergaris atas gunakan kode:

<span style="text-decoration: overline">Belajar</span> hasilnya seperti ini:

Belajar mengganti huruf

---

Membuat Huruf bergaris tengah gunakan kode:

<strike>Belajar</strike> hasilnya seperti ini:

Belajar

---

Menentukan jenis huruf gunakan kode:

<p><font-family="Arial" >Belajar</font></p> hasilnya seperti ini:

Belajar

---

Menentukan ukuran huruf gunakan kode:

<p><font-size="3" >Belajar</font></p> hasilnya seperti ini:

Belajar

---

Menentukan warna huruf gunakan kode:

<p style="color: green; >Belajar</p> hasilnya seperti ini:

Belajar

---

Membuat bullet dot bolong gunakan kode:

<ul type="circle">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>

hasilnya seperti ini:

• DOT 1
• DOT 2
• DOT 3

---

Membuat bullet dot kotak gunakan kode:

<ul type="square">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>

hasilnya seperti ini:

• DOT 1
• DOT 2
• DOT 3

---

Membuat bullet dot bulat gunakan kode:

<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>

hasilnya seperti ini:

• DOT 1
• DOT 2
• DOT 3

---

Mengatur posisi bullet gunakan kode:

<blockquote>
<blockquote>
<blockquote>
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
</blockquote>
</blockquote>
</blockquote>

hasilnya seperti ini:

• DOT 1
• DOT 2
• DOT 3

---

Menentukan kombinasi warna,jenis,dan ukuran huruf gunakan kode:

<p><font style="color: red; font-family: courier new; font-size: 15px;" >Belajar</font></p>

hasilnya seperti ini:

Belajar

---

Membuat tabel border solid gunakan kode:

<table border="1" width="200">
<tr>
<td style="border-style: solid">Text</td>
</tr>
</table>

hasilnya seperti :

Text

---

Membuat tabel border dot gunakan kode:

<table border="1" width="200"
style="border-style: dotted">
<tr>
<td border="2" style="border-style:
dotted">Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

---

Membuat tabel border dashed gunakan kode:

<table border="1" width="200" style="border-style: dashed">
<tr>
<td style="border-style: dashed">Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

---

Membuat tabel border groove gunakan kode:

<table border="1" width="200" style="border-style: groove">
<tr>
<td>Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

---

Membuat tabel border Ridge gunakan kode:

<table border="1" width="200" style="border-style: ridge">
<tr>
<td>Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

---

Membuat tabel border Insert gunakan kode:

<table border="1" width="200" style="border-style: inset">
<tr>
<td>Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

---

Membuat tabel border Outset gunakan kode:

<table border="1" width="200" style="border-style: outset">
<tr>
<td>Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

---

Membuat Tabel Biasa gunakan kode :

<table border="1"width="200"><td>Text</td></table>

hasilnya seperti:

Text

---

Membuat Tabel berwarna gunakan kode :

<table border="1"width="200"bgcolor="green"><td>Text</td></tabel> hasilnya seperti :

Text

---

Membuat Tabel berwarna tak berbingkai gunakan kode :

<table border="0"width="200"bgcolor="blue"><td>Text</td></tabel> hasilnya seperti:

Text

---

Untuk kode-kode HTML yang lain anda bisa mengulik lewat software-software web designer atau situs-situs penyedia layanan HTML.

**Tabel-tabel diatas,akan terlihat sempurna jika dibuka pada browser IE (Internet Explorer)

Read More

Cara Membuat Sitemap Otomatis Ping Untuk Blogspot

Berikut ini panduan Cara Membuat Sitemap Otomatis Ping Untuk Blogspot.

Membuat Sitemap Otomatis Ping Untuk Blogspot / Blogger.com adalah usaha mendekatkan blog kita di mata Search Enginge seperti Google. Sitemap blogger ini berfungsi untuk menginformasikan kepada Google (Bukan daftar isi untuk pembaca) agar artikel baru kita segera di indeks oleh Google. Seperti kita tahu bahwa akhir-akhir ini peringkat artikel sering tidak menentu.

Menurut Digital Inspiration pentingnya membuat sitemap untuk blogspot adalah :

"Memiliki sebuah Google Sitemap tidak menjamin daftar tinggi untuk halaman web Anda dan ini dimaksudkan untuk menguntungkan pemilik situs, pengguna dan mesin pencari Google Dengan mengaktifkan situs Pemilik atau pengelola web untuk meng-upload dan. Memprioritaskan halaman halaman Google bisa spider lebih cepat daripada mengandalkan Googlebot menemukan halaman baru atau diperbarui.

Dengan milyaran halaman ke indeks dapat memakan waktu dan Google mungkin akan ketinggalan atau tidak halaman indeks secara tepat waktu. Menggunakan teknologi Sitemap Google berharap untuk memberikan pencarian yang lebih baik untuk penggunanya.

Masuk akal total untuk mendorong link baru untuk pengguna dengan cepat. Kami tidak ingin menunggu pada mesin untuk memberikan hasil - kami ingin mendapatkan konten ke dalam mesin lebih cepat. Setiap kali hal itu mungkin, kami memilih untuk mendorong konten daripada memilikinya ditarik. Yang memberi kita pengalaman yang lebih interaktif dengan Google. " 

Pernyataan di atas dikemukakan Marshall Simmonds, Search / Kepala SEO di The New York Times / About.com (melalui PDF).

Dengan referensi tersebut jelas bahwa penggunaan sitemap untuk blogger adalah penting untuk memperkuat SEO Blog kita. Untuk membuat sitemap khusus google ini kita menggunakan Sitemap Generator. 

Adapun cara yang kita lakukan untuk membuat sitemap otomatis Ping untuk blogger adalah :
1. Buka Blogger Sitemap Generator
2. Hasilnya seperti gambar di atas, maka kita tinggal memasukkan alamat blog kita. Contoh : http://catatan-piper-comex.blogspot.com/
3. Klik Create Sitemap
4. Copy paste semua kode yang diberikan oleh Tools tersebut
5. Masuk ke Blogger (Tampilan Baru Blogger)
6. Setting
7. Klik Search Preference
8. Klik Custom Robots.TXT
9. Klik Yes jika belum diaktifkan
10. Akan muncul kotak/teks area dan pastekan semua kode di sana

Contoh :

User-agent: *

Disallow: /search
Allow: /
Sitemap: http://catatan-piper-comex.blogspot.com/atom.xml?redirect=false&start-index=1&max-results=500

11. Klik save dan membuat sitemap otomatis ping untuk blogger sudah selesai.

Keuntungan menggunakan sitemap untuk blogger/blogspot ini adalah kita tidak perlu menggunakan ping manual lagi. Semakin mudah dan praktis menggunakan blogger baru ini. :D. Akhir kata semoga penggunaan sitemap ini lebih memperkuat SEO blog kita. Bagi sahabat yang sudah dari bulan lalu menggunakan trik membuat sitemap untuk blogger/blogspot ini silakan beri masukannya di kotak komentar!

Sumber: sugengcido.blogspot.com

Read More

Cara Daftar Blog Ke Dmoz Directory

Setelah kemaren posting cara daftar blog ke Yahoo directory. Kali ini piper comex akan posting cara daftar blog ke Dmoz directory.

Dmoz adalah salah satu alat directory terbesar selain Bing, Yahoo dan Google. Kenapa?, Karena hampir semua mesin pencari terkenal memanfaatkan situs directory dmoz ini untuk mereview blog atau website untuk di crawl, dan memberi patokan google untuk memberi peringkat suatu blog atau website. Perlu diketahui,Tidak sembarang blog atau website yang bisa terdaftar di dmoz. Kenapa lagi?, karena yang menyeleksinya adalah manusia, bukan robot seperti search engine pada umumnya.

Berdasarkan fakta yang telah merasakan manfaatnya, blog atau website yang telah terindex di dmoz trafik pengunjungnya sangat drastis diakibatkan karena situs atau blog sobat telah terindex di beberapa mesin pencari mesin pencari terbesar. Jadi sebelum kita mendaftarkan blog/web ke berbagai mesin pencari, pastikan sobat sudah mendaftarkannya ke Dmoz.

Berikut adalah panduan cara daftar blog ke Dmoz directory  :

• Buka link http://www.dmoz.org. Jika isi kontent blog sobat berbahasa indonesia pilih world kemudian pilih bahasa indonesia setelah mengklik world.

• Setelah selesai, lanjut ke pilihan kategori dan sub kategori. bila kategori dan sub kategori telah sesuai dengan kategori blog sobat, silahkan pilih menu Menyarankan Url yang letaknya berada pojok kanan paling atas disamping menu Dmoz blog. Contoh seperti gambar dibawah ini.

• Untuk selanjutnya masukkan data blog sobat. seperti

1. Site URL = Isi dengan URL sobat 
2. What Type Of Link In This = Reguler
3. Title Of Site = tuliskan judul dari blog atau website sobat
4. Site Description = uraian ringkas tentang blog atau web sobat
5. Your Email Addres = alamat email sobatSetelah itu klik tombol SUBMIT. 

Selesai, namun blog atau website sobat tidak langsung terdaftar butuh waktu beberapa minggu untuk terdaftar. ingat yang menyeleksi bukanlah robot tapi manusia.

Demikian panduan cara daftar blog ke Dmoz directory, semoga bermanfaat. Apabila ingin mendaftarkan blog ke Yahoo directory bisa lihat caranya disini.

Read More

Cara Daftar Blog Ke Yahoo Directory

Kalau kita search di mesin pencari dengan kata kunci cara daftar blog ke yahoo directory pasti sangat banyak sekali yang sudah posting.

Berikut ini saya ambil salah satu artikel tersebut dari blog Bang Mirza, http://direktori-indonesia.blogspot.com/2011/09/submit-url-ke-yahoo-directory.html.

Tutorial ini sudah saya praktekkan dan berhasil, untuk dokumentasi saya posting kembali artikel ini agar saya mudah mencarinya di blog saya. Dan juga siapa tau ada pengunjung yang datang ke blog saya membutuhkan artikel ini.

Berikut ini langkah-langkah nya:

Langkah pertama:
- Masuk ke halaman Yahoo! Directory Suggest a Site: 

Langkah Kedua:
- Setelah masuk di halaman itu, anda pilih saja Standard Consideration 

Langkah ke Tiga:

• Di halaman ini Anda dapat mengecek apakah website/blog Anda memang belum terdaftar pada Yahoo Directory.
• Di sini juga Anda harus memilih email Anda yang akan dijadikan sebagai Security Email ID 

"Please be prepared to provide a Site Security Email ID as well as the site title, URL, and a brief description".

IMPORTANT: On the " Suggest a Site" form, the Security Email ID can be any email address you choose to associate with your site. This ID helps to ensure that listings in the Directory cannot be changed by unauthorized persons. Please keep a record of the Security Email ID to reference when contacting us about this site."

Bila memang blog/website Anda belum terdaftar dan anda sudah menentukan security email ID anda, langsung saja Anda klik Continue
Anda harus login dulu ke akun Yahoo Anda untuk meneruskan ke langkah selanjutnya

Langkah ke Empat:

• Setelah login secara otomatis anda akan masuk ke halaman formulir submit URL Yahoo Directory.
• Isi formulir dengan data blog/website anda.

Langkah ke Lima:

• Ketik alamat email dan nama Anda pada formulir Security Email ID
• IMPORTANT: You will need to retain this email ID for your records as we will ask you to identify it when you contact us about your listing.
• Selanjutnya ketik kalimat pendek berupa informasi pelengkap tentang blog/website Anda pada kotak Additional Information. Misalnya pada kategori apa blog anda ingin dipasang, sarankan kategori baru bila perlu.
• Setelah selesai, klik SUBMIT

Selesai sudah semua langkah demi langkah dalam mendaftarkan blog atau website ke Yahoo Directory.
 
Perlu diingat sekali lagi bahwa layanan Yahoo! Directory Sugget a Site Standard / Free ini hanya terbuka untuk mendaftarkan blog atau website non komersial saja. Itupun tanpa jaminan waktu permohonan Anda akan disetujui seperti yang tertulis pada halaman Yahoo! Directory Submit Standard:
"No time guarantee Due to the volume of suggestions, we cannot guarantee a timely consideration of your site."

Semoga tips ini bermanfaat dan selamat mencobanya.

 

Apabila Anda ingin mendaftarkan blog Anda ke "Technorati" bisa baca panduannya disini.

Read More