Ku Ingin

Tampilkan postingan dengan label membuat. Tampilkan semua postingan

Sabtu, 07 Desember 2013

Membuat Efek Stabilo Background Tulisan

Kalau sebelumnya anaa pernah membuat postingan cara membuat background pada postingan, kali ini anaa ingin sharing lagi cara membuat efek stabilo atau cara membuat background pada tulisan. Seperti ini:
Contoh tulisan Dengan Efek Stabilo

Contoh tulisan Dengan Efek Stabilo
Bagaimana cara membuatnya? Mudah saja hanya dengan menambahkan code berikut

<span style="background-color:#FFFFB3;"> Disini letak tulisan yang ingin diberi efek stabilo </span>

Untuk menambahkan code tersebut anda harus dalam edit HTML.
Untuk melihat code warna dapat merujuk disini

ReadFull Article ..

Jumat, 06 Desember 2013

Membuat Daftar Isi Sitemap Berdasarkan Kategori Label

Membuat Daftar Isi (Sitemap) Berdasarkan Kategori label - Sudah tau kan apa itu daftar isi atau sitemap? Menurut kesimpulan saya sendiri daftar isi atau sitemap adalah halaman yang memberikan informasi daftar atau list semua artikel yang terdapat dalam blog.

Lalu bagaimana jika anda ingin membuat daftar isi hanya berdasarkan 1 kategori label blog saja? Untuk lebih jelasanya silahkan klik salah satu menu diatas pada blog ini, anda akan menemukan daftar atau list artikel hanya berdasarkan 1 kategori saja.

Bagaimana sudah mengerti sekarang? Langsung aja Cara Membuat Daftar Isi/Sitemap Berdasarkan Kategori Label

Login Ke Blog
Buat Postingan baru .
Beri judul sesuai kategori label yang anda buat.
Ubah Postingan anda ke "Format HTML"
Lalu Copy kode berikut didalamnya
<ol><script>
var numposts = 100;
var standardstyling = true;
</script> <script src="http://mr-form.googlecode.com/files/label-post.js" type="text/javascript"></script> <ol><script src="http://www.blogger.com/feeds/posts/default/-/NAMALABEL?orderby=published&alt=json-in-script&callback=showrecentposts&max-results=999"></script> </ol>
</ol>
Selesai, lalu simpan

Catatan :
Ganti http://www.blogger.com dengan alamat blog anda
Ganti NAMALABEL dengan nama label anda
Jika nama label 2 kata (Contoh : Download Software). Ganti spasi dengan %20 sehingga menjadi Download%20Software

Bagaimana, mudah kan membuat halaman sitemap berdasarkan 1 kategori label?
Demikian artikel Membuat Daftar Isi/Sitemap Berdasarkan Kategori Label, akhir kata saya ucapkan terima kasih.

ReadFull Article ..

Minggu, 24 November 2013

Cara Membuat Tag Heading Dinamis SEO Friendly

Membuat Tag Heading H1 dan H2 SEO Friendly – Heading merupakan elemen sangat penting yang menjadi tanda pengenal bagi sebuah blog berdasarkan title atau judul. Pengaturan tag heading agar menjadi seo friendly di blogspot mutlak diperlukan agar blog terindeks dengan baik di search engine dan mendapatkan posisi SERP yang baik pula. Nah berhubung saya baru ganti template, akhirnya dapat kerjaan baru lagi ngoprek tag heading blog Share With Irfan ini. Namun kali ini saya mencoba menerapkan tag heading dinamis dimana pada saat berada di homepage maka title blog akan diindeks sebagai H1 dan judul artikel diindeks sebagai H2. Kemudian apabila kita membuka halaman posting (single post) maka secara otomatis judul artikel berubah menjadi H1. Konsep perubahan yang otomatis seperti inilah yang disebut dengan tag heading dinamis seo friendly. Ada banyak sekali memang model penataan tag heading H1 dan H2 ini yang mungkin pernah anda baca di blog-blog lain. Tapi pada dasarnya tujuan akhir tetap sama yaitu jangan sampai terjadi ada banyak H1 saat kita membuka halaman blog atau halaman posting. Seperti apa penataan tag heading dinamis yang seo friendly ini, ikuti langkah-langkah dibawah ini :

Tips Membuat Tag Heading Dinamis SEO Friendly

1. Login ke dashboard blogger anda.

2. Pilih Rancangan > Edit HTML, centang Expand widget template.

3. Jangan lupa backup dulu template anda sebelum melakukan perubahan.

4. Cari kode seperti dibawah ini :

<div id=’header-inner’>
<div class=’titlewrapper’>
<h1 class=’title’>
<b:include name=’title’/>
</h1>
</div>
<b:include name=’description’/>
</div>

5. Kemudian ganti dengan kode berikut ini :

<div id=header-inner>
<div class=blogtitle>
<b:if cond=data:blog.url == data:blog.homepageUrl>
<h1 id=blogtitle><a expr:href=data:blog.homepageUrl><data:title/></a></h1>
<b:else/>
<b:if cond=data:blog.pageType == "item">
<h2 id=blogtitle><a expr:href=data:blog.homepageUrl><data:title/></a></h2>
<b:else/>
<h1 id=blogtitle><a expr:href=data:blog.homepageUrl><data:title/></a></h1>
</b:if>
</b:if>
</div>
<b:include name=description/>
</div>

6. Selanjutnya cari lagi kode seperti dibawah ini :

<a expr:name=’data:post.id’/>
<b:if cond=’data:post.title’>
<H2 class=’post-title entry-title’>
<b:if cond=’data:post.link’>
<a expr:href=’data:post.link’><data:post.title/></a>
<b:else/>
<b:if cond=’data:post.url’>
<a expr:href=’data:post.url’><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</H2>
</b:if>

7. Dan ganti dengan kode berikut ini :

<a expr:name=data:post.id/>
<b:if cond=data:blog.url == data:blog.homepageUrl>
<b:if cond=data:post.title>
<h2 class=post-title entry-title>
<b:if cond=data:post.link>
<a expr:href=data:post.link expr:title=data:post.title><data:post.title/></a>
<b:else/>
<b:if cond=data:post.url>
<a expr:href=data:post.url expr:title=data:post.title><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
<b:else/>
<b:if cond=data:blog.pageType == "item">
<b:if cond=data:post.title>
<h1 class=post-title entry-title style=font-size:1.3em;>
<b:if cond=data:post.link>
<a expr:href=data:post.link expr:title=data:post.title><data:post.title/></a>
<b:else/>
<b:if cond=data:post.url>
<a expr:href=data:post.url expr:title=data:post.title><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>
</b:if>
<b:else/>
<b:if cond=data:post.title>
<h2 class=post-title entry-title>
<b:if cond=data:post.link>
<a expr:href=data:post.link expr:title=data:post.title><data:post.title/></a>
<b:else/>
<b:if cond=data:post.url>
<a expr:href=data:post.url expr:title=data:post.title><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>
</b:if>
</b:if>

8. Save/Simpan template anda.

Menanggapi komentar beberapa sahabat yang meminta supaya diberikan tutorial tambahan untuk editing bagian CSS template, maka saya tanggapi dengan memberikan tutorial edit CSS seperti yang saya lakukan. Meskipun pada template yang saya gunakan sekarang tidak ada kendala dengan perubahan tag heading tanpa mengedit bagian CSS, namun saya sangat berterima kasih atas masukan sobat blogger, karena SEMESTINYA memang ada perubahan yang harus dilakukan terutama untuk bagian CSS post H1 dan H2.

Dibawah ini adalah kode CSS awal khusus pengaturan bagian .post :

.post {
margin:.5em 0 0.5em;
border-bottom:1px solid $bordercolor;
padding-bottom:0.5em;
}
.post h3 {
margin:2px 0 0px 0;
font-size:131%;
font-weight:bold;
line-height:1.3em;
color:$titlecolor;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:bold;
}

.post h3 strong, .post h3 a:hover {
color:$textcolor;text-decoration:underline;
}

.post-body { font:normal 13px Arial;
margin:8px 0 .75em;
line-height:1.6em;
}

.post-body blockquote {
line-height:1.3em;
}

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:none;
letter-spacing:.01em;
font: $postfooterfont;
line-height: 1.4em;
}

Perhatikan perubahan yang saya lakukan pada bagian CSS dibawah ini yaitu ada penambahan khusus untuk kode .post h1 dan .post h2. Sedangkan kode h3 pada template sudah saya rubah menjadi tag heading widget.

.post{
border-bottom:1px solid #f2f2f2;
padding-bottom:.5em;margin:.5em 0
}

.post h1,.post h2{font:normal 12px Arial;
font-weight:700;line-height:1.3em;
color:#333;margin:2px 0 0
}

.post h1 a,.post h1 a:visited,.post h1 strong,.post h2 a,.post h2 a:visited, .post h2 strong{
display:block;text-decoration:none;
color:#333;font-weight:700
}

.post h1 strong,.post h1 a:hover,.post h2 strong,.post h2 a:hover{
color:#222;text-decoration:underline
}

.post-body{
font:normal 12px Arial;
line-height:1.6em;margin:8px 0 .75em
}

.post-body blockquote{
line-height:1.3em
}

.post-footer{
color:#444;text-transform:none;
letter-spacing:.01em;font:normal 11px Arial, sans-serif;
line-height:1.4em;margin:.75em 0
}

Untuk mengubah tag heading h2 menjadi h3 (widget) silahkan sobat baca lagi di Cara Pengaturan Tag Heading yang sudah pernah saya posting sebelumnya. Semoga dengan Tips Membuat Tag Heading Dinamis SEO Friendly ini dapat membantu meningkatkan nilai skor SEO blog anda. Selamat mencoba..!!

ReadFull Article ..

Senin, 11 November 2013

Cara Membuat Bubur Kacang Hijau Lezat dan Mudah

Cara Membuat Bubur Kacang Hijau Lezat dan Mudah - Menyantap bubur kacang hijau di sore hari apalagi saat cuaca dingin merupakan pilihan yang tepat, selain menghangatkan tubuh, kandungan gizi pada kacang hijaujuga bagus untuk meningkatkan daya tahan tubuh. Selain itu, bubur kacang hijau juga sangat megenyangkan sehingga pas disantap sebagai hidangan selingan antara makan siang dan makan malam.

Cara Membuat Bubur Kacang Hijau
Lezat dan Mudah

Membuat bubur kacang hijautidaklah sulit. Dengan penanganan yang tepat, kacang pada bubur kacang hijau akan terasa enak tanpa mengurangi nilai gizi yang terkandun dalam kacang hijau itu sendiri.

Berikut ini akan dijelaskan cara membuat bubur kacang hijau yang praktis :

CARA MEMBUAT BUBUR KACANG HIJAU LEZAT DAN MUDAH:

BUBUR KACANG HIJAU

Bahan:

• 250 gr kacang hijau

• 175 gr gula pasir

• 1 ltr air

• 1/2 sdt garam

• 1/2 sdt vanili

• 200 ml santan kental

• 1/4 sdt garam

• 2 lbr daun pandang

CARA MEMBUAT BUBUR KACANG HIJAU LEZAT DAN MUDAH

1. Rendam kacang hijau selama 6 jam

2. Kemudian cuci bersih dan tiriskan

3. Rebus air beserta garam dan vanili bubuk sampai mendidih

4. Masukkan kacang hijau sampai kacang hijau empuk dan air berkurang

5. Masukkan gula pasir. Aduk terus sampai mengental dan kacang hijau matang. Angkat dari atas api

6. Rebus santan beserta garam dan daun pandan sampai mendidih.

7. Sajikan bubur kacang hijau beserta rebusan santan saat akan di konsumsi untuk menghindari kacang hijau cepat basi,

Cara Membuat Bubur Kacang Hijau Lezat dan Mudah ini bisa anda praktekkan di rumah yah, bisa disajikan sebagai makanan cemilan.

ReadFull Article ..

Kamis, 07 November 2013

Membuat Kata Penutup Blog

Membuat Kata Penutup Blog
1. Login ke account blogger anda.
2. Klik Layout--> Edit HTML.
3. Cari kode </head> di dalam template anda.
4. Copy pastekan script di bawah ini tepat dibawah kode </head> :
<script type=text/javascript>
// goodbye alert
function goodbye(){
alert(Terima Kasih Atas Kunjungannya!!!);
}
parent.window.onunload=goodbye;

</script>

ReadFull Article ..

Sabtu, 02 November 2013

Cara Membuat Link

Aku yakin bahwa link adalah di atas segala-galanya dan wajib hukumnya bagi seorang blogger, berbeda dengan website pada umumnya, seorang blogger untuk bertukar link (link exchange) dengan blog lain itu suatu hal yang umum dan suatu keharusan, kalau tidak bisa membuat link jelas akan dicuekin oleh blogger lain karena dianggap pelit dalam memberi link. Ok deh mari kita belajar sama-sama;

Cara Membuat Link di Blogger
Sekarang coba mengetik postingan dalam mode COMPOSE begini kalimatnya “kalau pingin kenalan sama Mbah Djojo klik disini” cara buatnya blok kata disini yang akan dijadikan sebagai link, kemudian klik icon tulisan link (yang dilingkari merah),

Kemudian ketik pada Web Address URL dari blognya mbah djojo yaitu http://.blogspot.com/ yang akan di link

Kemudian klik "OK"
Maka hasilnya akan seperti ini;
“kalau pingin kenalan sama mbah djojo klik disini”

Pada saat mengetik postingan dalam mode edit HTML cara ketik kodenya seperti dibawah ini;

<a href="http://.blogspot.com/">disini</a>

Maka hasilnya akan seperti ini;
“kalau pingin kenalan sama mbah djojo klik disini”

Membuat Link Window Baru (tab baru)
Pada mode edit COMPOSE tinggal centang Open this in a new window

Pada mode edit HTML cara menulis kode seperti ini;

<a href="http://.blogspot.com/"target="_blank">disini</a>

Maka hasilnya akan seperti ini;
“kalau pingin kenalan sama mbah djojo klik disini”

Membuat Link pada Gambar

Link ini biasanya aku buat untuk link download biar keren ada gambarnya
Kodenya seperti ini;

<a href="http://.blogspot.com/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ124JDrwcJgmE4hzeM5XkkCEkql7fJWBPAde7_FPMpzyIW82UacH-bKuBlruzqqRkIxnezxhcjeeCJIdS28JPq3RroSvLYc69vdURWcPsPPywZbA_GHocFoTSXPAlh1mCZs4furmnHvI/s1600/demo2.png" /></a>

hasilnya seperti dibawah ini;

Membuat Link Window Baru pada Gambar
Link ini berupa gambar yang akan tampil pada window atau jendela baru
Aku ketik kodenya seperti ini;

<a href="http://.blogspot.com/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ124JDrwcJgmE4hzeM5XkkCEkql7fJWBPAde7_FPMpzyIW82UacH-bKuBlruzqqRkIxnezxhcjeeCJIdS28JPq3RroSvLYc69vdURWcPsPPywZbA_GHocFoTSXPAlh1mCZs4furmnHvI/s1600/demo2.png" /></a>

Merah = Alamat URL link
Biru = Alamat URL gambar (yang lain juga begitu)
hasilnya seperti dibawah ini;

Membuat Link Tersembunyi

Aku membuat link tersembunyi ini maksudnya alamat URL tidak tampak pada status bar yang letaknya di bawah kiri browser, link ini cocok untuk yang berbau iklan biar pengunjung penasaran hehehe.. begini kodenya;

<a target="_blank" onclick="window.open(http://.blogspot.com/); return false;" style="cursor:pointer;">disini</a>

Hasilnya seperti ini;
Coba anda sorot dengan mouse kata disini tidak tampak kan link-nya!

Membuat Link Tersembunyi pada Gambar

Biar pengunjung lebih penasaran lagi aku buat link tersembunyi pada gambar, seperti ini kodenya

<a target="_blank" onclick="window.open(http://.blogspot.com/); return false;" style="cursor:pointer;"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ124JDrwcJgmE4hzeM5XkkCEkql7fJWBPAde7_FPMpzyIW82UacH-bKuBlruzqqRkIxnezxhcjeeCJIdS28JPq3RroSvLYc69vdURWcPsPPywZbA_GHocFoTSXPAlh1mCZs4furmnHvI/s1600/demo2.png" border="0"/></a>

Hasilnya seperti ini (coba deh disorot mouse, tidak tampak kan alamat link di pojok kiri bawah layar monitor, kalau penasaran coba aja di klik... )

Mari kita coba bareng-bareng....

ReadFull Article ..