Merubah Warna Blok Teks │ Teks Seleksi

Merubah Warna Blok Teks │ Teks Seleksi

atau sering kita sebut dengan blok teks, adalah bagian teks yang kita seleksi (blok) bila kita akan melakukan peng-copy-an pada suatu artikel blog post, secara default warna blok atau teks yang terseleksi adalah berwana biru dengan warna teks berwarna putih.

Dengan hadirnya css3 kita bisa merubah warna background selektor dan teks selektor tersebut sesuai dengan warna yang cocok dengan keinginan dan tentu saja untuk memberikan tampilan yang baik harus disesuaikan dengan karakter warna dasar blog tersebut. Dengan css3 selection kita bisa memberi perintah kepada browser yang kita pergunakan untuk merubah warna background dan warna teks seleksi tersebut, hampir semua browser mendukung css3 selection, hanya internet explorer yang belum mendukung css3 selection, anehnya kenapa begitu ketinggalan internet explorer ini, padahal pengusung internet explorer adalah suatu perusahaan yang besar dan banyak penggunanya diluaran sana kecuali di Indonesia.

Untuk memberikan tampilan yang berbeda dengan background dan teks seleksi (blok) pada umumnya kalian bisa menambahkan kode css3 selection dibawah ini :

::selection {background:#FF0000;color:#FFFFFF;}
::-moz-selection {background:#FF0000;color:#FFFFFF;}
::-webkit-selection {background:#FF0000;color:#FFFFFF;}

Masuk Desaign - Edit HTML dan letakan kode css tersebut diatas kode ]]></b:skin>, dibeberapa template yang saya coba dengan menerapkan kode css diatas berjalan dengan baik, tapi sebagian template tidak berjalan sesuai keinginan, jika hal itu terjadi pergunakanlah kode css dibawah ini dan letakan diatas kode </head>, perbedaanya hanya harus menambahkan kode keterangan diantara kode css tersebut sehingga menjadi seperti ini :

<style type='text/css'>
::selection {background:#FF0000;color:#FFFFFF;}
::-moz-selection {background:#FF0000;color:#FFFFFF;}
::-webkit-selection {background:#FF0000;color:#FFFFFF;}
</style>

Save template kalian dan lihat hasilnya, apakah sudah sesuai.

Kalian bisa melakukan perubahan pada kode warna background dan kode warna teks seleksi, kalian bisa menggunakan Tools Kode Warna yang ada diblog ini pada bagian menu Color Tools

Semoga bermanfaat,

Cara Membuat Related Post

Jika Ada yang belum tahu artikel terkait itu apa silahkan lihat di blog ini pada bagian akhir artikel saya ini ada tulisan Artikel Terkait. Fungsinya selain untuk seo, related post / artikel terkait ini juga membantu pengunjung untuk membaca yang lain mungkin yang belum di ketahuinya. Hal ini menyebabkan pengunjung bisa betah berada di blog kita.
Langsung saja cara membuat related post / artikel terkait :

Masuk blogger > rancangan > edit html > centang expand template widget
cari kode </head> kemudian letakkan script di bawah ini tepat di atas kode </head>

<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;}}}}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];}}
relatedTitles = tmp2;
relatedUrls = tmp;}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;}
i++;}
document.write('</ul>');}
//]]>
</script>

Kemudian cari kode <data:post.body/> kemudian letakkan script berikut ini di bawah kode <data:post.body/>

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>

<b:if cond='data:blog.pageType == "item"'>
<h4>Artikel Terkait</h4>
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
</b:if>

Terakhir simpan template

Membuat Link Berubah Warna Dan Zoom

Kali ini mo bahas bagaimana cara membuat link tidak hanya berubah warna tetapi juga membesar ketika disorot dengan mouse. Mantap kan sob ? selain itu kita juga bisa mengganti mouse pointer kita sehingga bukan lagi bentuk tangan.

Langsung caranya aja :
1. Login to Blogger kemudian pilih "Layout"
2. Klik pada "Edit HTML"
3. Cari bagian a:link dan a:hover dan masing-masing ganti dengan kode dibawah ini :

a:link
{
color:#0000ff;
font-size:10px;
cursor:default;
}

a:hover
{
color:#d2691e;
font-size:19px;
font-style:italic;
cursor:wait;
}

4. Simpan Template.
+ warna biru menunjukkan warna link
+ warna merah menunjukkan ukuran+ warna cokelat menunjukkan font miring ketika link disorot+ warna hijau menunjukkan style mouse pointer+ Kamu bisa modif menjadi hand, crosshair, wait, move, text, help dll sesuai dengan pilihanmu.

Langsung praktekkan aja sob ...

Cara Membuat Navigasi Breadcrumbs

Cara Membuat Navigasi Breadcrumbs

Untuk contoh, Breadcrumbs bisa dilihat diatas judul Posting, jika ada yang tertarik
Berikut cara memasangnya :

Login ke Blogger
Klik Rancangan → Edit HTML
Klik tulisan Download Template Lengkap
Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
Beri tanda centang pada kotak di samping tulisan Expand Template Widget
Lalu sobat cari kode ]]></b:skin>

Tips : Untuk mempercepat pencarian sobat bisa gunakan tombol Ctrl + F atau (F3)

Kalau sudah ketemu, Copy kode berikut dan Paste diatasnya

.breadcrumbs {
padding: 5px 5px 5px 0;
margin: 0 0 5px;
font-size: 95%;
line-height: 1.4em;
border-bottom: 1px solid #ccc;
}

Kemudian cari kode seperti berikut :

<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>

Jika sudah ketemu Copy kode berikut dan Paste diatasnya

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='breadcrumbs'>
You Are Here &#187; <a expr:href='data:blog.homepageUrl'>Home</a> &#187; <b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'> , </b:if>
</b:loop>
</b:if> &#187; <data:post.title/>
</div>
</b:if>
</b:if>

Keterangan : kode yang berwarna biru bisa sobat ganti.
Contoh : You Are Here → Browser dan Home → Beranda
jika sudah selesai SIMPAN TEMPLATE dan lihat hasilnya

sukses gan

Merubah Warna Blok Teks│Teks Seleksi

Teks seleksi atau sering kita sebut dengan blok teks, adalah bagian teks yang kita seleksi (blok) bila kita akan melakukan peng-copy-an pada suatu artikel blog post, secara default warna blok atau teks yang terseleksi adalah berwana biru dengan warna teks berwarna putih.

Dengan hadirnya css3 kita bisa merubah warna background selektor dan teks selektor tersebut sesuai dengan warna yang cocok dengan keinginan dan tentu saja untuk memberikan tampilan yang baik harus disesuaikan dengan karakter warna dasar blog tersebut. Dengan css3 selection kita bisa memberi perintah kepada browser yang kita pergunakan untuk merubah warna background dan warna teks seleksi tersebut, hampir semua browser mendukung css3 selection, hanya internet explorer yang belum mendukung css3 selection, anehnya kenapa begitu ketinggalan internet explorer ini, padahal pengusung internet explorer adalah suatu perusahaan yang besar dan banyak penggunanya diluaran sana kecuali di Indonesia.

Untuk memberikan tampilan yang berbeda dengan background dan teks seleksi (blok) pada umumnya kalian bisa menambahkan kode css3 selection dibawah ini :

::selection {background:#FF0000;color:#FFFFFF;}
::-moz-selection {background:#FF0000;color:#FFFFFF;}
::-webkit-selection {background:#FF0000;color:#FFFFFF;}

Masuk Desaign - Edit HTML dan letakan kode css tersebut diatas kode ]]></b:skin>, dibeberapa template yang saya coba dengan menerapkan kode css diatas berjalan dengan baik, tapi sebagian template tidak berjalan sesuai keinginan, jika hal itu terjadi pergunakanlah kode css dibawah ini dan letakan diatas kode </head>, perbedaanya hanya harus menambahkan kode keterangan diantara kode css tersebut sehingga menjadi seperti ini :

<style type='text/css'>
::selection {background:#FF0000;color:#FFFFFF;}
::-moz-selection {background:#FF0000;color:#FFFFFF;}
::-webkit-selection {background:#FF0000;color:#FFFFFF;}
</style>

Save template kalian dan lihat hasilnya, apakah sudah sesuai.

Cara Blog Agar Cepat Terindek

Blog cepat terindek search engine tentu menjadi harapan kita semua. Buat apa capek-capek bikin postingan kalau tidak dikenali oleh google, akan menjadi pekerjaan yang sia-sia.  Meskipun cara perayapan robot google sudah terjadwal namun akan lebih diprioritaskan kepada postingan yang ramah dan dicintai mesin sang robot.

Seperti halnya kenyataan di kehidupan kita yang nyata, ambil contoh saja semisal kita terjebak dalam antrian yang panjang, tentu kita harus sabar menunggu kapan giliran kita.  Berbeda dengan orang yang sudah dikenal oleh petugas yang jaga antrian, tidak akan mengalami hal yang sangat menjemukan menunggu dan menunggu.

Blog yang notabene sudah mempunyai jam terbang tinggi menjadi prioritas dalam perayapan search engine alias lebih cepat terindeks google.  Lantas bagaimana nasibnya blog-blog rencekan yang belum terkenal?  Jangan bersedih dulu, karena ada cara yang dapat ditempuh agar blog cepat terindeks yaitu dengan melakukan Ping ke Google.

Tapi perlu diperhatikan juga, ada rambu-rambu yang harus dipatuhi yaitu janganlah melakukan ping secara berlebihan karena bisa dianggap spam. Cukup hanya pada saat setelah membuat postingan baru.

Bagaimana cara melakukan ping?

1. Kunjungi http://blogsearch.google.com/ping
2. Masukkan alamat url blog anda (alamat postingan juga boleh)
3. klik Submit Blog
4. Bila berhasil  akan muncul pesan “Thanks for sharing your blog” seperti gambar di bawah ini.

Selamat mencoba melakukan Ping Google agar cepat terindeks

Cara Mengirim Foto Melalui Email

Untuk mengirim foto lewat email caranya :

1. masuk ke imel kamu
2. pilih new mail / tulis pesan
3. pilih attachment / lampirkan
4. truz pilih choose file/browse ke my computer, removable disk
5. pilih file gambar yg ingin dilampirkan (*.jpg / *.gif) total ukuran gambar tidak lebih dari 10MB
6. truz tunggu filenya di attach sampe selesai
7. abis itu di send (jgn lupa masukin alamat email teman kamu jg)

Selamat mencoba.

Cara Menampilkan Judul Posting Pada Label Tertentu

Langsung saja kita mulai tutorialnya:

1. Add new gadget (Tambah gadget baru)
2. HTML/JavaScript
3. Copy paste script ini

 <script style="text/javascript"> var numposts = 50; var standardstyling = true; </script> <script type='text/javascript' src='http://kodecode.googlecode.com/files/judullabel_tertentu.js'></script> <ul> <script src="http://Seringcopas.blogspot.com/feeds/posts/default/-/Tutorial?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script> </ul>

4. Simpan (Save)

Perlu Diperhatikan:

1. Ganti teks yang berwarna merah dengan url blog anda.
2.  Teks yang berwarna biru adalah nama label, gantilah dengan nama label milik anda.
3. Penulisan nama label harus sama persis, tidak boleh salah.
4. Bila terdapat spasi pada nama label maka penulisannya  %20  sebagai pengganti spasi, misalnya nama label Tutorial Blog, maka penulisannya menjadi Tutorial%20Blog
5. Angka 50 menyatakan jumlah judul yang akan ditampilkan (ganti sesuka anda)
   
6. Lebih bagus bila dipasang di halaman static Blogger (Caranya: bikin postingan pada page static, publikasikan, setelah sukses lalu copy linknya kemudian pasang link tadi pada sidebar atau tab menu)
7. Selamat mencoba.

Demikian cara membuat widget menampilkan judul posting pada label tertentu

Efek Transparan Pada Gambar Posting

Membuat efek taransparan atau tembus pandang pada gambar-gambar (image) pada postingan (post image) akan menghasilkan tampilan yang lembut, apalagi ditambah dengan efek bias warna box pada gambar, untuk mewujudkan itu yang penting kita mengetahui letak atau bagian mana yang perlu kita modifikasi.

Pada umumnya setiap template menggunakan kode css .post img { untuk bagian gambar posting, mudah-mudahan pengkodeannya sama jadi tidak susah untuk menemukan bagian gambar posting (post image), untuk menemukan posisi kode .post img {, kalian masuk pada Design - Edit HTML, jika sudah ketemu, kalian tambahkan kode perintah transparan untuk post image, yaitu opacity seperi ilustrasi kode post image dibawah ini :

.post img {
opacity: 0.3;
}

Kode perintah opacity menunjukan perintah transparan yang di ukur dengan angka didepannya yang menunjukan tingkat transparansi-nya, semakin kecil semakin transparan dan sebaliknya.

Dengan kode opacity tersebut, gambar atau image dalam postingan secara otomatis akan transparan semua, sesuai dengan transparansi yang telah ditentukan angkanya dalam template, tapi efeknya belum kelihatan walaupun mouse melewati gambar tersebut, untuk menjadikan efeknya lebih kelihatan, kalian bisa tambahkan hover supaya terjadi perbedaan jika mouse melewati gambar posting tersebut, penerapan kodenya seperti ini :

.post img:hover {
opacity: 1.0;
}

Penambahan kode hover dengan opacity 1.0 menerangkan pada awal post image yang transparansi 0.3 jika mouse mendatangi gambar atau image akan menjadi jelas (sesuai gambar aslinya)

Semoga dengan penggunaan opacity dalam post image, bisa menjadikan bagian post kalian menjadi lebih baik.

Cara Perbesar / Perkecil Ukuran Gambar Di Blog

Gambar bagi sebuah blog memang dibutuhkan. Baik itu sebagai accessories blog maupun sebagai illustrator bagi tulisan. Di area postingan, ukuran gambar mungkin tidak menjadi soal, karena tersedianya ruang yang cukup luas untuk menempatkan gambar dan juga pengaturannya pun sangat mudah, tinggal kik and click.

Caranya setelah gambar berhasil diupload, kemudian klik gambar tersebut dan akan muncul menu untuk mengatur gambar.  Namun pengaturannya hanya dibatasi 5 ukuran saja yaitu small, medium, large, x-large dan original size.

Memang walau hanya 5 ukuran saja tapi sudah cukup mewakili dan membantu kita khususnya untuk gambar yang akan dipasang di dalam postingan.

Bagiamana jika ingin membuat gambar menjadi ukuran yang sesuai dengan kemauan kita? Seperti misalnya ingin membuat gambar dengan ukuran panjang 100px dan tinggi 80px.

Untuk memperbesar atau memperkecil ukuran gambar, tidak perlu repot-repot mengedit pakai software editor image tetapi dengan menggunakan kode script kita dapat mengatur ukuran gambar sesuai keinginan kita.

Gambar yang akan dipasang di halaman blog tentu harus melalui proses upload terlebih dahulu. Setelah gambar selesai diupload maka akan didapat link gambar sebagai berikut:

<img src='URL gambar">
Apabila ingin membuat gambar tadi menjadi link yang mengarah ke blog anda, maka susunannya menjadi :
<a href='URL Blog Anda'><img src='URL gambar "></a>

Dari susunan kode seperti tersebut di atas, gambar yang muncul masih menampilkan ukuran yang sebenarnya. Sehingga bila tempat yang tersedia di blog lebih sempit dari gambar akan menimbulkan masalah baru.

Cara mengatasinya, gambar harus diatur.  Kode yang diperlukan adalah kode weight dan height (weight=lebar, height=tinggi).
Sedangkan penempatan kodenya seperti ini :

<img src='URL gambar' width='100' height='80'>

atau bila ingin membuat gambar tadi menjadi link yang mengarah ke blog anda, maka susunannya menjadi :

<a href='URL Blog Anda'><img src='URL gambar' width='100' height='80'></a>

Catatan:
Untuk mengatur (memperbesar/memperkecil) ukuran gambar, ubahlah angkanya sesuai yang dikehendaki.

Dengan cara itu, gambar yang akan dipasang di blog dapat kita perbesar / perkecil dengan menggunakan kode script.

Pelacak Jumlah Pengunjung Yang Online

Jumlah pengunjung yang sedang membuka blog kita pada saat sekarang, dituliskan dalam angka dan diikuti dengan kata online. Widget ini sangat simple dan praktis tidak perlu mendaftar atau registrasi, cukup dengan mengcopy paste kode yang disediakan kemudian ditempatkan di dalam anda.
          Anda juga bisa mendesain sendiri tampilannya, tinggal pilih dan juga warnanya bisa kita tentukan sendiri disesuikan dengan theme blog anda.

Kalau mau mencoba silahkan ikuti petunjuknya di bawah ini:

1. Kunjungi http://www.radarurl.com/
2. Klik GET A RADAR
3. Choose the widget’s format and colors: (klik salah satu dari 2 pilihan style untuk ditampilkan di blog anda)
4. Beri checklist pada “As Sidebar Button” (menempatkan di sidebar kanan bawah blog). Bila ingin ditempatkan di tempat lain (selain di sidebar kanan bawah blog), maka kosongkan saja kotak checklist tersebut.
5. Copy kode yang berada di bawah tulisan “As Sidebar Button”
6. Tambah gadget, pilih html/javascript.
7. Save
8. Selesai dan lihat hasilnya.

Menghias Link Jadi Warna-warni

Tips ini saya berikan sebagai jawaban dari sobat bloger yang menanyakan bagaimana cara membuat link agar ketika mouse pointer nempel pada link tersebut warnanya jadi berubah berwarna-warni seperti pelangi.

Untuk melihat hasil dari tips yang akan saya uraikan, silahkan tempelkan mouse pointer pada setiap link di blog ini http://legendaraya.blogspot.com/.

Disini saya akan memberikan dua macam cara untuk menghias link di blog sehingga link jadi berwarna-warni bak pelangi di langit yang biru.

1. Cara pertama

Dengan memasang kode yang berwarna merah ke dalam gadget, langkah-langkahnya:

a. login ke blog anda
b. layout
c. add a gadget
d. html/javascript
e. masukkan kode yang berwarna merah
f. save

kodenya seperti ini:

<!-- start link animasi --> <script src="
http://kodecode.googlecode.com/files/rainbowlink.js?attredirects=0"></script>
<!-- end link animasi -->

2. Cara kedua
Dengan memasang kode yang berwarna biru ke dalam template blog, langkah-langkahnya:
a. login ke blog anda
b. layout
c. edit html
d. cari kode </head>
e. masukkan kode yang berwarna biru, sebelum kode </head>

kodenya seperti ini:

<script src='http://kodecode.googlecode.com/files/rainbowlink.js' type='text/javascript'/>

Dari kedua cara yang saya sebutkan diatas, hasil akhirnya sama yaitu memberi efek pelangi pada link. Terserah anda mau memakai cara yang mana? Toh hasilnya sama saja.

Itulah tadi dua cara menghias link pada blog. Dengan sentuhan warna-warni diharapkan para pengunjung blog akan selalu teringat dan berniat untuk mengunjunginya lagi.
Selamat berkarya.

Mengganti cursor dengan bulu

Bila kamu tidak suka dengan tampilan cursor yang biasa, kamu bisa ganti tampilan cursornya dengan sehelai bulu. Silahkan yang mau ganti cursor dengan bulu bisa ikuti tips berikut ini :

• Pertama : Save gambar bulu di bawah ini ke komputer kamu

• upload gambar bulunya ke hosting gambar semisal photobucket. Kkalau belum punya, registrasi dulu ke http://photobucket.com/
• Setelah gambar diupload, copy URL imagenya

Kemudian ikuti langkah berikut ini :
1. Login ke Blog.
2. Layout, Edit HTML.
3. Kalau sudah masuk, beri tanda centang pada "expand template widget"
4. Kalau sudah cari kode ini body {
5. Copas kode dibawah ini tepat di bawah kode tadi.

cursor: url("URL image kamu"), default;

Contohnya seperti ini:

body {
cursor: url("http://i873.photobucket.com/albums/ab299/handi_05/Downloada.gif"), default;
margin:0; padding:0;
line-height:1.5em;
font-size:12px; font-family:Georgia, "Times New Roman", Times, serif;
color:#47443e; background:#4C1010;
}

6. Save, selesai

Lihat hasilnya di blog kamu ada sehelai bulu yang bergerak sesuai dengan gerakan mouse. Tidak cuman itu, masih banyak koleksi cursor yang lain. Kalau penasaran silahkan kunjungi http://www.123cursors.com/
Demikianlah cara mengganti cursor dengan sehelai bulu

Peringatan :

Teks yang berwarna merah jangan digunakan, hanya sebuah contoh saja.

Menghapus kode readmore yang tidak perlu

Readmore istilah kerennya adalah baca selengkapnya, yaitu sebuah link untuk memenggal paragraf. Postingan tidak ditampilkan secara penuh melainkan hanya sebagian kalimat saja yang muncul di halaman depan. Cara menggunakannya tidaklah sulit karena pada posting editor telah tersedia tombol untuk memenggal paragraf dan readmore pun segera tercipta.

Dengan kepintarannya banyak ahli blogger telah berhasil membuat readmore menjadi otomatis. Readmore yang seperti ini biasa disebut dengan auto readmore. Kalau sobat blogger mau tau apa itu auto readmore, baca saja. Namanya saja otomatis sehingga kita tidak perlu lagi repot-repot menentukan di kalimat mana dalam sebuah paragraf yang akan dipenggal.

Jika anda salah satu dari banyak pemilik blog yang memasang auto readmore, berarti readmore asli bawaan blogger yang masih melekat di dalam template menjadi mubazir keberadaannya. Oleh karena itu daripada tidak terpakai lebih baik dihapus saja. Penghapusan kode readmore yang tidak terpakai ini berdasarkan pengalaman saya tidak berakibat fatal karena sudah tergantikan oleh kode auto readmore.

Kode readmore yang tidak perlu tersebut adalah :

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

Karena sekarang sudah tidak lagi memerlukan kode readmore, dan sudah diganti dengan kode auto readmore, maka tinggal dihapus saja kode tersebut di atas. Selamat belajar dan mencoba, semoga berhasil.

Buka Tutp Komentar Blogger / jQuery Slide Blogger Comment

Hi gan,ketemu lagi ya,hehehe (kangen ma kite kite ya :D)
Kali ini Pelajaran Blog akan sharing bagaimana membuat show/hide comment box di blogger dot com,pingin tahu lebih lanjut? ikuti ya :D

Bentuk fisik dari 'sliding komentar blogger yang bisa sobat buka juga sobat tutup untuk menghemat tempat' yang sudah berhasil saya terapkan,sobat bisa lihat di komentar salah satu blog milik saya
Untuk screenshotnya lihat gambar ini gan:

Lihat Gambar lebih Besar di SINI

Nah,gimana gan? tertarik ingin menciptakan 'show hide blogger comment' ini?

Langkah dan Cara Membuat Show Hide Komentar / Expand Collapse Blogger Comment Box

Pertama,sobat pergilah ke Dashboard lalu pilih Tata Letak kemudian contreng tulisan Expand Widget Templates,dan cari kode berikut (Gunakan Ctrl+F): </head>
Jika sobat sudah menemukannya, tepat diATASnya letakkan script berikut:

<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 ketemukan,tepat diATASnya letakkan barisan kode ini:

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 tentu jika sobat mengaktifkan komentar di blogger,baik dalam komentar posting maupun settingan secara universalnya.Selamat mencoba ya :D

Cara membuat Background Blog Berubah Warna Saat Refress

cara mengganti background blog berubah ketika di refress, kali ini berkaitan juga dengan hal tersebut, tetapi warna yang akan berubah pada tutorial kali ini bisa kamu atur sesuai dengan warna yang sesuai dengan blog kamu, maksudnya jangan sampai sama dengan warna text maupun link dalam blog kamu, agar tidak bertubrukan dan akhirnya artikel blogmu tidak bisa dibaca.
Cara membuat background blog berubah warna saat di refress sebagai berikut:

• Silahkan kamu login ke blog kamu.
• Klik rancangan.
• Tambah gadget.
• Lalu pilih HTML/javascript.
• Masukkan kode dibawah ini:
  

  <script type='text/javascript'>
  //CDATA[
  /* JavaScript Kit (http://ageboy.blogspot.com/)*/
  //Created Ageboy:
  var bgcolorlist=new Array("#FFFFFF", "#B30000", "#EEFF00", "#11FF00", "#FF8A14", "#0008FF", "#4AFFF3", "#000")
  document.body.style.background=bgcolorlist[Math.floor(Math.random()*bgcolorlist.length)]
  //]]>
  </script>

  kode yang berwarna merah adah kode warna-warni blog kamu,sesuaikan atau dengan blogmu.
  
• Simpan.

Nah mudah kan caranya? silahkan test di blog kamu, semoga bermanfaat!

Cara Membuat Komentar Admin Berbeda

Komentar Admin Berbeda – Tips ini sudah banyak dijelaskan oleh para blogger.

Cara membuat komentar admin berbeda, sebagai berikut :

1. Login ke blogger, masuk ke dashboard, design, dan edit html. Lalu centang expand widget template. Jangan lupa anda backup terlebih dahulu template anda.

2. Cara kode berikut ini  <data:comment.author/>
Lebih lengkapnya seperti ini, dan paste code yang berwarna merah di dalamnya

<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
           
<b:if cond='data:comment.author == data:post.author'>
<dd class='author-comments'>
<p><data:comment.body/></p>
</dd>
<b:else/>
           
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
</b:if>
<dd class='comment-footer'>

3. Paste kode berikut sebelum ]]></b:skin>

.author-comments {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpwxftxS6QxVAujyWVR1P-STtomEnZt-E0ZUAEBKbnPW6LEg5v0wZ-KN-FfBdpP5FQHjFWPOOK47yEotfN6jAN3YzXB8Lj7FZrkTHHLP_cEFLP9FDS9ZnlOAV1o5M_xzy8HjijKKTgnmk/s288/logo_admin.gif") no-repeat scroll right top #F9F9FC;
padding: 5px 5px 10px 5px;
}

Selesai, dan jangan lupa anda simpan. Lihat hasilnya. Semoga berhasil.

Cara Menampilkan Widget Hanya pada Homepage Postingan Saja

Cara Menampilkan Widget Hanya pada Homepage Postingan Saja. Yups buat sobat-sobat blogger yang ingin memberikan kesan yang berbeda pada halaman homepage dengan halaman postingan. Mungkin cara ini adalah cara yang tepat untuk sobat.

Trik ini sebenernya selain memberikan tampilan yang berbeda saat di homepage dengan di postingan, tp sobat juga bisa menyiasatinya agar blog sobat tidak terlalu berat saat dibuka pada homepagenya.



ok mari kita simak Cara Menampilkan Widget Hanya pada Homepage Postingan Saja.

1. Cara Menampilkan Widget Hanya pada Homepage Saja

<b:if cond='data:blog.url == data:blog.homepageUrl'>

content widget

</b:if>

2. Cara Menampilkan Widget Hanya pada Postingan Saja

<b:if cond='data:blog.pageType == &quot;item&quot;'>

content widget

</b:if>

Untuk cara penggunaannya masuk pada menu
Rancangan -> edit HTML (centang Expand Template Widget)
lalu cari kode <b:widget id=

Masih bingung kan??? hehehe ok deh akan saya kasih sedikit contoh.

<b:widget id='HTML3' locked='false' title='Statistik' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

kode yang berwarna merah adalah kode yang wajib sobat tambahkan pada widget yang ingin sobat tampilkan pada homepage atau postingan saja. Sedangkan kode yang berwarna biru adalah nama gadget sobat, (misal : label, arsip blog, populer post dll)

Gimana?? mudahkan?? klo sobat ada masalah, sobat bisa tinggalkan komentar dibawah.

Good LUCK ^_^

Cara membuat Follower Twitter Box pada Blogspot

twitter

Hal yang sangat dinantikan oleh para blogger, tentu saja memiliki pengunjung blog yang banyak. Karena tanpa pengunjung, apa artinya sebuah blog atau website. Menurut para blogger yang sudah lama malang melintang di dunia blogging, peranan situs jejaring social sangat menunjang sekali pada peningkatan traffic. Sehingga kita perlu sebuah sarana untuk mendatangkan pengunjung dari situs jejaring social. Dengan tujuan setiap artikel atau konten yang kita publikasikan, akan langsung diketahui oleh temen-temen kita di sana. Pada kesempatan ini ane akan coba membahas mengenai cara membuat follower twitter box pada blogspot. Hal ini akan mempermudah pengunjung untuk follow twitter kita dan setiap blog kita di update akan langsung diketahui olehnya. Oke sobat maya, berikut ini adalah cara pasang widget twitter follower box pada blogspot
1. Login ke akun blogger
2. Masuk rancangan > elemen laman > tambah gadget Paste kode berikut ini dan jika anda mau berilah judul widgetnya

<!-- Twitter Follower Box -->
<script type='text/javascript'>
function fanbox_init(screen_name){document.getElementById('twitterfanbox').innerHTML='\<iframe name=\"fbfanIFrame_0\" frameborder=\"0\" allowtransparency=\"true\" src=\"http://s.moopz.com/connect.html?user='+screen_name+'\" class=\"FB_SERVER_IFRAME\" scrolling=\"no\" style=\"width: 200px; height: 250px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; \"\>\<\/iframe\>';}
</script>
<div id="twitterfanbox"></div><script
type="text/javascript">fanbox_init("sobatduniamaya");</script
type="text></div>
<!-- End Twitter Follower Box -->

Klik save