Blog tentang internet dan Blogging Tips

Showing posts with label Tutorial Blog. Show all posts
Showing posts with label Tutorial Blog. Show all posts

Wednesday, 24 February 2016

Cara Membuat Fans Page Melayang Di Blog

Cara Membuat Fans Page Melayang Di Blog  >>>> Fans page FB sangat membantu trafik di Blog Kita.

Cara membuat fans page melayang di blog

Biasanya penempatan fans page FB berada pada widget yang statis, apakah itu di side bar ataupun pada footer sehingga tidak setiap waktu terlihat oleh pengunjung blog kita apabila halaman yang sedang dibaca mereka geser keatas atau kebawah.

Kali ini piper comex akan berbagi cara membuat fans page melayang di blog, artinya fans page FB tersebut akan selalu terlihat setiap waktu baik posisi halaman diatas, ditengah maupun dibawah. Sehingga memungkinkan pengunjung untuk dapat klik like pada posisi halaman apapun.

Langsung aja tidak perlu panjang lebar, karena katanya kalau terlalu "panjang" kasihan cewek nya, dan kalau terlalu "lebar" kasihan cowok nya.

Berikut panduannya:

1. Masuk ke "Rancangan" pada blog Anda
2. Tambah Gadget "HTML"
3. Copy - paste kode dibawah ini:


<style type="text/css">
#topbar{
position:absolute;
padding-left:1px;
background-color: transparancy;
width: 238px;
visibility: hidden;
z-index: 100;
}
</style>
<script type="text/javascript">
var persistclose=0 //set to 0 or 1. 1 means once the bar is manually closed, it will remain closed for browser session
var startX = 10 //set x offset of bar in pixels
var startY = 5 //set y offset of bar in pixels
var verticalpos="fromtop" //enter "fromtop" or "frombottom"
function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}
function closebar(){
if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"
}
function staticbar(){
barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;
var d = document;
function ml(id){
var el=d.getElementById(id);
if (!persistclose || persistclose && get_cookie("remainclosed")=="")
el.style.visibility="visible"
if(d.layers)el.style=el;
el.sP=function(x,y){this.style.right=x+"px";this.style.top=y+"px";};
el.x = startX;
if (verticalpos=="fromtop")
el.y = startY;
else{
el.y = ns ? pageYOffset + innerHeight : iecompattest().scrollTop + iecompattest().clientHeight;
el.y -= startY;
}
return el;
}
window.stayTopright=function(){
if (verticalpos=="fromtop"){
var pY = ns ? pageYOffset : iecompattest().scrollTop;
ftlObj.y += (pY + startY - ftlObj.y)/8;
}
else{
var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - barheight;
ftlObj.y += (pY - startY - ftlObj.y)/8;
}
ftlObj.sP(ftlObj.x, ftlObj.y);
setTimeout("stayTopright()", 10);
}
ftlObj = ml("topbar");
stayTopright();
}
if (window.addEventListener)
window.addEventListener("load", staticbar, false)
else if (window.attachEvent)
window.attachEvent("onload", staticbar)
else if (document.getElementById)
window.onload=staticbar
</script>
<br />
<div class="clear">
</div>
<div id="topbar">
<div style="text-align: right;">
<a href="" onclick="closebar(); return false"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHYc1lYa3pTihlaZOXoxPrs9V3YarJX9vmd-HLd0kh4Ap-2pdJBpUwlPzwVmLuUdkfVTmwO838Pcx6Rwzxf-FLePT2RKzrYe8OyXhJPxpOE63WA0gZuocysdMfegmDyKxKmRA7RN5XOq-C/s1600/closanku.png" /></a></div>
<center>
<div style="background: #fff;">

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FPundiOnline&amp;width=238&amp;height=360&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:238px; height:360px;" allowtransparency="true"></iframe>

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

Keterangan: Ganti kode sript iframe warna merah diatas dengan kode iframe fans page group Anda.

4. Simpan perubahan

5. Lihat hasilnya....jreng....! fans page FB Anda sudah melayang disamping kanan atas halaman blog Anda.

Demikian Cara Membuat Fans Page Melayang Di Blog, semoga bermanfaat.

"HAPPY BLOGGING"

Saturday, 10 May 2014

Membuat Judul Posting Di Depan Nama Blog


Cara membuat judul posting di depan nama blog:
  • Login ke akun Blogger.
  • Masuk ke Dashboard > Template > Edit HTML.
  • Cari kode berikut ini, letaknya setelah <head> dan sebelum <b:skin> ( tekan CTRL+F secara bersamaan lalu masukan code yang ingin dicari ).
<title><data:blog.pageTitle/></title>
  • Ganti code tersebut dengan code berikut ini:
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>

  • Tanda "|" berwarna merah digunakan sebagai pembatas antara judul postingan dan nama blog. Sobat dapat mengganti tanda pembatas tersebut sesuai dengan selera masing-masing.
  • Simpan template dan lihat hasilnya, caranya buka salah satu postingan artikel. Lihat ke bagian atas browser. Arahkan kursor ke bagian tab browser sobat dan diamkan sebentar. Perhatikan tooltip yang muncul, judul postingan seharusnya sudah berada di depan nama blog.

Cara Memasang Scroll Pada Blog 2

Cara Memasang Scroll Pada Blog 2

Tutorial kali ini membahas mengenai cara memasang scroll pada blog untuk widget custom, lanjutan pada posting sebelumnya yaitu cara memasang scroll pada blog untuk widget bawaan blogspot.

Untuk menambah fungsi scroll pada widget custom caranya lebih mudah dari pada menambah fungsi scroll pada widget bawaan blogspot.

Penambahan kode fungsi scroll pada widget custom bisa langsung ditambahkan didalam kotak html widget tersebut.

Berikut cara memasang scroll pada blog untuk widget custom:

Masuk ke tata letak blog, klik edit pada kotak html widget yang akan ditambahkan fungsi scrollnya.

Tambahkan kode berikut ini pada bagian depan dan bagian belakang script widget tersebut:
<div style='overflow:auto; width:100%;height:200px;'>

======== Isi kode didalam widget html =======

</div>

Perhatikan kode yang di tandai warna merah dan biru (<div style='overflow:auto; width:105%;height:200px;'>) dan (</div>) di atas. 

Kode itulah yang harus ditambahkankan sebelum dan setelah kode script didalam widget tadi. 

Untuk kode yang berwarna biru (height:200px;) untuk mengatur tinggi fungsi scroll.

Simpan/Save template dan silahkan lihat hasilnya.

Wednesday, 7 May 2014

Cara Memasang Scroll Pada Blog

Cara Memasang Scroll Pada Blog

Widget yang dipasang di Blog terkadang ukurannya bisa terlalu tinggi jika dipaksakan untuk menampilkan semua isi dari widget tersebut.


Untuk mengatasinya kita bisa menambahkan fungsi scroll pada widget tersebut untuk menyesuaikan ketinggian dari widget yang kita pasang.

Widget pada blog (blogspot) terbagi dua, yaitu widget bawaan  dan widget custom.

Widget bawaan adalah widget yang memang sudah disediakan oleh Blogspot itu sendiri. Sedangkan widget custom maksudnya adalah widget yang dibuat/dipasang sendiri oleh user dengan menambahkan dan mengedit kode HTML/Javascript, karena widget tersebut tidak disediakan oleh Blogspot. 

Untuk dapat menambahkan scroll pada kedua jenis widget ini caranya akan berbeda.

Pada postingan kali ini saya ingin membahas cara memasang scroll pada blog untuk widget standar/bawaan blogspot. Untuk contoh kali ini, widget yang akan ditambahkan scroll adalah widget Populer Post bawaan Blogspot.

Tambahkan dulu widget Popular Posts seperti contoh dibawa ini:

Cara Memasang Scroll Pada Blog

Setelah widget Popular Posts terpasang pada blog, selanjutnya kita buka menu Template pada blog untuk menambahkan script didalam widget popular posts tersebut.

Selanjutnya cari widget popular posts yang sudah dibuat tadi, gunakan CTRL+F agar lebih cepat, kemudian akan muncul kode html seperti berikut (ini contoh di dalam template blog saya):
<b:widget id='PopularPosts3' locked='false' title='Populer Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>
<div style='overflow:auto; width:105%;height:200px;'>
====== kode script lainnya pada widget =======
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
Perhatikan kode yang di tandai warna merah dan biru (<div style='overflow:auto; width:105%;height:200px;'>) dan (</div>) di atas. 
Kode itulah yang harus disisipkan kedalam script widget popular posts yang telah dibuat tadi. Untuk kode yang berwarna biru (height:200px;) untuk mengatur tinggi fungsi scroll.

Simpan/Save template dan silahkan lihat hasilnya.

Saturday, 30 November 2013

Cara Membuat Scroll Blog Popular Post

Cara Membuat Scroll Widget Popular Post

Setelah beberapa kali gagal saat menerapkan tutorial mengenai cara membuat scroll blog popular post dari tutorial rekan rekan blogger, akhirnya saya mendapatkan cara yang cukup praktis dan gampang untuk diterapkan di blog saya dan berhasil saya pasang pada widget popular post, widget recent post maupun widget lainnya di blog saya ini.

Yang baru saya tahu ada dua cara untuk membuat scroll atau menambahkan fungsi scroll pada widget, yang pertama yaitu dengan cara menambahkan kode CSS langsung didalam widget html dan yang kedua dengan cara menambahkan kode CSS pada bagian dalam kode template (edit template).

Cara yang pertama sudah saya coba dan berhasil, tetapi hasilnya saya kurang puas, karena bagian tepi scroll nya tidak pas sejajar dengan batas side bar widget bagian luar (padahal pengaturan "width" nya sudah saya set "auto").

Akhirnya saya pakai cara yang kedua, yaitu dengan edit html dan hasilnya bagian tepi scroll dapat sejajar secara otomatis dengan bagian tepi side bar widget.

Selain itu cara yang kedua ini menurut saya sangat praktis untuk diterapkan didalam blog saya, apabila rekan-rekan mau mencoba silahkan dicoba sendiri dan rasakan sensasinya....

Berikut caranya:
  1. Login ke blogger dengan akun rekans
  2. Masuk ke halaman Template
  3. Klik Edit HTML Lalu Lanjutkan
  4. Cari kode ]]></b:skin>
    (gunakan Ctrl+F)
  5. Copy dan paste kode di bawah ini tepat di atas kode ]]></b:skin>
     6. Simpan template dan lihat hasilnya

Demikian tutorial dari saya mengenai cara membuat scroll blog popular post, semoga bermanfaat dan happy blogging buat rekans semua.

Keterangan:
  • #PopularPosts1 : adalah id untuk widget popular post yang akan dibuatkan scroll nya, untuk widget yang lain rekan-rekan bisa cari sendiri id nya, biasanya untuk widget selain popular post menggunakan nama HTML1, HTML2, HTML3 dan seterusnya.
  • height:200px : adalah tinggi scroll, bisa rekan-rekan rubah sesuai keinginan atau kebutuhannya.

Friday, 5 April 2013

Cara menghapus link aktif dalam komentar blog secara otomatis

Cara menghapus link aktif dalam komentar blog

Link aktif dalam komentar blog ditautkan oleh pengunjung blog biasanya untuk mendapatkan backlink dari blog kita (maksud pembuat komentar sih prmosi gitu), tetapi cara ini kurang adil karena kita sendiri sebagai pemilik blog tidak mendapatkan backlink dari mereka yang menautkan link aktifnya didalam blog.

Google sendiri tidak menyukainya hal ini, apa lagi kita.

Menurut saya akan lebih adil dan lebih santun apabila ingin mendapat backlink menggunakan media tukaran link.

Seperti apa link aktif itu ? kurang lebih begini, apabila ada pengunjung yang berkomentar pada sebuah artikel di blog kita dan kemudian mereka menempatkan sebuah kata atau kalimat yang ditautkan pada link yang mereka sudah siapkan.

Kira-kira begini link yang mereka tautkan :

<a href='http://catatan-piper-comex.blogspot.com/'>Contoh Link Aktif</a> --->> Contoh Link Aktif

Ada beberapa cara menghapus link aktif dalam komentar blog, pertama tentunya dengan memoderasi setiap komentar yang masuk dan fitur ini sudah disediakan oleh blogger sendiri. 

Yang kedua dengan menggunakan script sehingga setiap Link Aktif yang disisipkan oleh pembuat komentar akan dihapus dengan sendirinya secara otomatis (kita tidak dibuat repot). Ini yang kita akan bahas dalam postingan kali ini yaitu cara yang kedua Cara menghapus link aktif dalam komentar blog secara otomatis.

Ok, langsung aja kita praktekan...

1. Login di blogger.

2. Pilih Template - Edit HTML - Expand Template Widget.


3. Cari kode ]]></b:skin> dan letakkan kode berikut tepat diatasnya :

#comments p a {display:none;}

4. Cari kode </head> dan letakkan salah satu kode berikut tepat diatas nya :

    |> Untuk mengganti link aktif dengan kalimat :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
 jQuery("#comments p").find("a").replaceWith("<span>Peringatan: Link aktif otomatis dihapus</span>");
});
</script>

    |> Untuk mengganti link aktif dengan link temen-temen :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function(){
 jQuery("#comments p a").attr("href", "http://URL-anda.com/");
});
</script>

5. Simpan Template.

6. Enjoy.

Terima kasih, semoga bermanfaat dan jangan lupa tinggalkan komentar temen-temen.

Saturday, 23 March 2013

Cara Membuat Widget Recent Post Keren

Cara Membuat Widget Recent Post Keren

Widget recent post adalah widget yang diperlukan agar pengunjung dapat melihat artikel apa saja yang terbaru atau yang sering dibaca oleh pengunjung lainnya. Widget recent post ini hampir sama dengan widget popular post bawaan blogger. Lalu apa kerennya ?

Seperti kita ketahui bahwa widget popular post bawaan blogger hanya bisa kita rubah untuk ditampilkannya gambar, judul artikel dan summary posting. Untuk merubah besar - kecil nya gambar tidak ada option nya. Begitu juga untuk merubah berapa banyak huruf yang akan ditampilkan pada summary post juga tidak bisa.

Widget recent post yang saya sharing disini dapat mengatasi semua kekurangan tersebut.
Diantaranya:
  • Ukuran gambar / avatar  bisa kita atur sesuai keinginan
  • Jumlah karakter huruf isi artikel bisa kita atur sesuai keinginan
  • Jumlah komentar yang masuk bisa kita tampilkan
  • Jumlah artikel yang ingin kita tampilkan bisa lebih dari 10 artikel
Cara menampilkan atau menghilangkan nya cukup dengan merubah parameter: true atau false pada script tersebut.
Untuk merubah yang lainnya, silahkan Anda explore sendiri. Jangan takut rusak.

Bagaimana cara membuat widget recent post keren tersebu, ikuti petunjuknya berikut ini.

1. Login ke Blogger, pilih blog yang ingin Anda edit. Untuk keamanan bila terjadi kesalahan edit, buat tempalte cadangan dengan mengklik "cadangkan/pulihkan", simpan file template cadangan tersebut.

2. Kemudian masuk ke Tata letak ==> Tambah gadget ===> Html/javascript

3. Masukkan semua kode dibawah ini:


4. Sebelum disimpan Anda ganti dulu alamat url saya (catatan-piper-comex.blogspot.com) dengan alamat url blog Anda, setelah diganti dengan alamat url blog Anda, kilk save / simpan.
Anda bisa lihat hasilnya sebentar, apabila masih belum cocok bisa Anda modifikasi lagi sesuai keinginan Anda.

Apabila ada yang masih kurang jelas, silahkan tinggalkan pesan pada kolom komentar.
Semoga bermanfaat.

Friday, 22 March 2013

Cara Membuat Widget Recent Comment

Cara Membuat Widget Recent Comment

Widget recent comment adalah widget yang diperlukan agar pengunjung tetap berada di halaman blog. Widget recent comment ini selain menaruh link dan isi komentar juga terdapat avatar yang bulat di sampingnya.

Dan tentu saja, Agan juga dapat mengubah avatar defaultnya, menambahkan scroll dll.

Bagaimana cara membuat widget recent comment dilengkapi dengan avatar dan isi komentarnya, silahkan ikuti petunjuk dibawah ini.

1. Login ke Blogger, pilih blog yang ingin Anda edit. Untuk keamanan bila terjadi kesalahan edit, buat tempalte cadangan dengan mengklik "cadangkan/pulihkan", simpan file template cadangan tersebut.

2. Kemudian masuk ke Tata letak ==> Tambah gadget ===> Html/javascript

3. Masukkan semua kode dibawah ini:

4. Sebelum disimpan Anda ganti dulu alamat url saya (catatan-piper-comex.blogspot.com) dengan alamat url blog Anda, setelah diganti dengan alamat url blog Anda, kilk save / simpan. Lihat artikel Anda yang sudah berisi komentar, atau Anda bisa uji coba membuat komentar dengan akun blog untuk melihat hasilnya.

Apabila ada yang masih kurang jelas, silahkan tinggalkan pesan pada kolom komentar.
Semoga bermanfaat.

Thursday, 21 February 2013

Waveguide Antenna Atau Cantenna Kalkulator

Waveguide antenna kalkulator

Waveguide Antenna kalkulator

Waveguide Antenna kalkulator

 Informasi dari ARRL Antenna handbook


Diameter Paralon / Kaleng (inches)

Frequency Mhz
TE11 Cutoff Frequency MHz
TM01 Cutoff Frequency MHz
Guide Wavelength inches
1/4 Guide Wavelength inches
3/4 Guide Wavelength inches
Masukkan diameter (inches) dari paralon atau kaleng yang akan dibuat sebagai antena, masukkan frekuensi dari jaringan yang dinginkan (GSM / CDMA / WiFi) kemudian klik tombol calculate.

Diameter Paralon / Kaleng (cm.)

Frequency Mhz
TE11 Cutoff Frequency MHz
TM01 Cutoff Frequency MHz
Guide Wavelength cm
1/4 Guide Wavelength cm
3/4 Guide Wavelength cm
Masukkan diameter (cm.) dari paralon atau kaleng yang akan dibuat sebagai antena, masukkan frekuensi dari jaringan yang dinginkan (GSM / CDMA / WiFi) kemudian klik tombol calculate.
Apabila keluar keterangan NaN (Not a number) artinya bahwa paralon atau kaleng yang akan dibuat sebagai waveguide antenna diameternya terlalu kecil untuk bekerja pada frekuensi dari jaringan yang diinginkan.

Keterangan pada gambar:
D    = Diameter Waveguide
Lo  = Panjang Gelombang (diambil nilai tengah spektrum)
Lg  = Panjang Gelombang spektrum terukur yang dapat digunakan

Keterangan pada tabel:
Frequency = Frekuensi yang bekerja pada jalur GSM / CDMA / WiFi
TE11 Cutoff Frequency = Frekuensi Cut-off Bawah
TM01 Cutoff Frequency = Frekuensi Cut-off Atas
Guide Wavelength = Panjang gelombang (diambil nilai tengah spektrum)

Wednesday, 3 October 2012

Cara Menggabung Komentar Facebook Dan Komentar Blog

menggabung komentar facebook dan komentar blog

Pada artikel sebelumnya piper comex sudah membahas bagaimana cara sederhana memasang FB comment di blogger. Artinya didalam blog kita nanti akan ada kolom komentar, selain kolom komentar blog juga ada kolom komentar facebook.

Untuk artikel kali ini piper comex akan membahas mengenai bagaimana cara menggabung komentar facebook dan komentar blog menjadi satu tempat. Artinya kita hanya memerlukan satu kolom komentar saja untuk menempatkan dua komentar facebook dan komentar blog.

Kenapa harus dijadikan satu kolom?
Untuk template yang sudah terlalu penuh dengan widget, penempatan kolom komentar facebook dan komentar blog menjadi satu bisa menjadi solusi. Selain itu pengunjung bisa bebas memilih apakah mereka ingin berkomentar menggunakan akun google atau akun facebook.

Langsung saja kita menuju ke TKP.

1. Login ke Blogger, pilih blog yang ingin Anda edit. Untuk keamanan bila terjadi kesalahan edit, buat tempalte cadangan dengan mengklik "cadangkan/pulihkan", simpan file template cadangan tersebut.

2. Kemudian klik Template ==> Edit HTML ===> Lanjutkan ==> Centang kotak kecil "Expand Templates Widget " 

3. Cari kode: <div class='comments' id='comments'>, pada template saya ada dua kode dan saya pilih kode yang pertama. Kemudian masukkan kode berikut ini dibawah kode tersebut.

Catatan:

witdh='400' dapat disesuaikan dengan lebar halaman artikel blog Anda.
Untuk menambah efek scroll pada kolom komentar Anda bisa mengganti kode:
<div class='comments-page' id='fb-comments-page'>
dengan kode:
<div class='comments-page' id='fb-comments-page' style='max-height:230px;overflow:auto;'>
Tetapi jika tidak ingin menambah scroll, abaikan saja.

4. Selanjutnya cari kode: </head>, lalu letakkan kode dibawah ini diatasnya.

Catatan:
Ganti tulisan MASUKKAN ID FB SOBAT BLOGGER dengan ID Facebook Anda.

5. Kemudian untuk berikutnya cari kode:   /* Comment atau kode:  #comments
Bila tidak sama dengan kode diatas, Anda bisa sesuaikan dengan kode yang ada di template Anda. Cari kode yang semirip mungkin.
Setelah ketemu kode tersebut, masukkan kode berikut ini dibawahnya.

6. Sebelum disimpan Anda bisa klik Pratinjau dulu untuk memastikan tidak terjadi kesalahan edit. Setelah ok tidak ada masalah, kilk save/ simpan template. Lihat artikel Anda yang sudah berisi komentar, atau Anda bisa uji coba membuat komentar dengan akun blog dan akun facebook untuk melihat hasilnya.

Apabila ada yang masih kurang jelas, silahkan tinggalkan pesan pada kolom komentar.
Semoga bermanfaat.

Monday, 1 October 2012

Cara Encode dan Decode Atau Parse Code HTML

cara encode dan decode atau parse code html

Parse HTML atau Parse Kode HTML adalah tool atau perangkat yang digunakan untuk mem-parse atau konvert kode HTML atau kode script/javascript secara otomatis sehingga mempermudah dalam pemasangan atau instalasi di blog atau halaman posting.

Umumnya Parse HTML diperlukan untuk konvert atau parsing kode HTML pada kode-kode script iklan, seperti script iklan AdSense atau yang lain. Atau juga bagi Anda yang banyak menulis atau posting artikel dengan banyak menggunakan kode javascript yang perlu di parse atau konvert sebelum dipublish agar tidak ada problem error.

Jika ingin menampilkan tulisan kode: <b> about HTML Parse <b> pada halaman post maka Anda harus menulisnya seperti ini: &lt;b&gt about HTML Parse &lt;bgt;

Untuk convert atau parse kode HTML, Anda hanya memasukan atau copy paste kode HTML ke dalam area tool Parse HTML kemudian klik Convert.

Dengan parse kode ini kita dapat menambahkan kode HTML dalam kotak komentar. Berikut ini adalah kode-kode HTML dasar yang akan dirubah kedalam bentuk sederhananya secara otomatis supaya bisa di masukkan kedalam postingan, kotak komentar, dll seperti yang sudah dijelaskan sebelumnya.

'<' menjadi '&lt;'
'>' menjadi '&gt;'
'"' (double quote) menjadi '&quot;'
''' (single quote) menjadi '&#039;'
'&' menjadi '&amp;'

Keterangan:
Encodeing = Mengkonvert/ memparse ke format biasa
Decoding = Mengembalikan ke format html nya

Insert Your Text Below

Powered by: WebToolHub.com

Cara Mengukur Kecepatan Loading Blog

cara mengukur kecepatan loading blog

Cara mengukur kecepatan loading blog atau website dapat menggunakan tool dari Google, dengan mengunjungi alamat berikut ini: https://developers.google.com/speed/pagespeed/insights.

Selain menggunakan tool dari Google tersebut, anda juga dapat menggunakan tools.pingdom.com. Tool tersebut dapat Anda digunakan dengan gratis.

Kecepatan loading dari sebuah blog atau website merupakan salah satu hal yang dibutuhkan untuk berhasilnya SEO efforts. Kita semua tahu bahwa halaman blog yang memerlukan waktu loading yang lama akan membuat pengunjung blog menjadi jenuh sehingga dapat saja langsung menutup halaman tersebut sebelum halaman blog terbuka semua. Google sendiri tidak suka dengan halaman blog yang waktu loadingnya lama.

Untuk mengetahui berapa lama waktu loading blog anda menggunakan tool Pingdom caranya sangat mudah. Masukkan alamat url blog anda, kemudian klik test now.
Semakin besar nilai test yang dihasilkan, semakin baik kecepatan loadingnya.


Semoga bermanfaat.

Saturday, 29 September 2012

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.


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.


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.


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.

Friday, 28 September 2012

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.

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.

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.

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 :

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.

Wednesday, 26 September 2012

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 :

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

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.



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



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



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

Friday, 7 September 2012

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...!!

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<sub>2</sub></p>hasilnya seperti ini:
42

Membuat Huruf Superscribe / pangkat gunakan kode:
<p>4<sup>2</sup></p> hasilnya seperti ini:
42

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)

Popular Posts

Powered by Blogger.