Copyright 2010 Mas Adi . Com. All Rights Reserved.
Snowblind by Themes by bavotasan.com.
Blogger Templates by Blogger Template Place | supported by One-4-All
Mungkin kalian pernah mendengar tentang Readmore, atau Auto Readmore? tapi apakah anda menggunakan Java Script ? Banyak blogger berpendapat bahwa Java Script yang kita gunakan dalam blog dapat membuat blog menjadi lambat/berat saat loading. Untuk mengatasi masalah ini saya mempunyai solusi yang tepat bagi kalian yang merasa takut menggunakan Java Script karena akan menyebabkan blog kalian menjadi berat saat loading.
Langkah pertama yaitu pergi ke edit HTML dalam blog anda, kemudian cari kode <data:post.body/> kemudian ganti dengan kode berikut :
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
Setelah itu cari kode </b:skin>, dan letakan kode berikut di atas kode </b:skin>
thumb img {float: left; margin: 0 10px 5px 0;}
Selesai, simpan dan lihatlah hasilnya.
Source : My other blog Scooter Pilom Continue Reading
Tau ngga breadcrumbs itu apa ? kalo ngga tahu berikut contoh breadcrumb (News).
Save template :), untuk mengecek apakah sudah berfungsi dengan baik silahkan buat postingan baru dengan label tentunya.
<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType == "static_page"'>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span><data:blog.pageName/></span></div>
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<!-- breadcrumb for the post page -->
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' xmlns:v='http://rdf.data-vocabulary.org/#'>
<span typeof='v:Breadcrumb'><a expr:href='data:blog.homepageUrl' property='v:title' rel='v:url'>Home</a></span>
<b:loop values='data:post.labels' var='label'>
» <span typeof='v:Breadcrumb'><a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a></span>
</b:loop>
» <span><data:post.title/></span>
</div>
<b:else/>
<div class='breadcrumbs'><span><a expr:href='data:blog.homepageUrl' rel='tag'>Home</a></span> » <span>Unlabelled</span> » <span><data:post.title/></span></div>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<!-- breadcrumb for the label archive page and search pages.. -->
<div class='breadcrumbs'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Archives for <data:blog.pageName/></span>
</div>
<b:else/>
<b:if cond='data:blog.pageType == "index"'>
<div class='breadcrumbs'>
<b:if cond='data:blog.pageName == ""'>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>All posts</span>
<b:else/>
<span><a expr:href='data:blog.homepageUrl'>Home</a></span> » <span>Posts filed under <data:blog.pageName/></span>
</b:if></div></b:if></b:if>
</b:if>
</b:if>
</b:if>
</b:includable>
Continue Reading
<H1 class=’title’ style=’background: transparent; border-width: 0px’>
<b:include name=’title’/>
</H1>
<b:if cond=’data:blog.pageType != "item"’>
<H1 class=’title’ style=’background: transparent; border-width: 0px’>
<b:include name=’title’/>
</H1>
<b:else/>
<p class=’title’ style=’background: transparent; border-width: 0px’>
<b:include name=’title’/>
</p>
</b:if>
<H1 class=’title’>
<b:include name=’title’/>
</H1>
<b:if cond=’data:blog.pageType != "item"’>
<H1 class=’title’>
<b:include name=’title’/>
</H1>
<b:else/>
<p class=’title’>
<b:include name=’title’/>
</p>
</b:if>
CARI KODE INI:
<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>
<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>
</h3>
</b:if>
<b:if cond=’data:blog.pageType != "item"’>
<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>
<b:else/>
<H1 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>
</H1>
</b:if>
CARI KOODE INI:
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
.post h3 strong, .post h3 a:hover {
color:$textcolor;
}
.post H1, .post h2 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:$titlecolor;
}
h2 strong{
display:block;
text-decoration:none;
color:$titlecolor;
font-weight:normal;
}
color:$textcolor;
}
#header H1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
#header H1, #header p {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}
Rating: 4.5 Continue Reading
Rich Snippets sangat berguna untuk memberikan tampilan yang berbeda pada blog kita, yakni pada saat blog kita muncul di hasil pencarian Google. untuk memberikan rich snippets pada blogspot, caranya sangat mudah, dan tidak membutuhkan waktu yang sangat lama, berikut adalah langkah-langkahnya,
Sebelumnya, silahkan anda baca artikel saya sebelumnya tentang 'Menambahkan Author Information pada Hasil Pencarian Google'. Oke, sekarang saya akan membahas cara yang pertama untuk memasang rich snippets di blogspot, Ketika membuat artikel baru, Masukkan kode berikut ini,
tinggal rubah kata-kata yang saya beri warna di atas sesuai dengan isi artikel anda. Sekarang saya akan membahas cara yang kedua untuk memasang rich snippets pada blogspot, cara selanjutnya akan sedikit lebih rumit, tetapi jika sudah selesai, maka akan jadi lebih mudah dari cara sebelumnya.<div typeof="v:Review" xmlns:v="http://rdf.data-vocabulary.org/#">Ditulis oleh <span property="v:reviewer">nama anda</span><span property="v:itemreviewed">judul yang diriview - </span><span property="v:description">isi artikel</span><span property="v:rating">rating (1-5)</span></div>
jadi untuk cara yang kedua, nanti urutannya begini, judul yang direview hraus diletakkan di awal paragraf, harus pada awal kalimat.Buka Akun blogger => masuk menu rancangan => Edit HTML => centang expand template widget'.- masukkan kode <div typeof="v:Review" xmlns:v="http://rdf.data-vocabulary.org/#"> di bawah kode <body> kemudian masukkan kode </div> di atas kode </body>- cari kode <data:post.author/> kemudian masukkan kode <span property='v:reviewer'> di depan kode <span class="fn"><data:post.author></data:post.author></span> dan masukkan kode </span> di belakang kode <span class="fn"><data:post.author></data:post.author></span> nanti jadinya seperti ini => <span class='fn'><span property="v:reviewer"><data:post.author/></span></span>- save template
<span property="v:itemreviewed">judul yang diriview</span> - <span property="v:description">isi artikel...................................................................</span><span property="v:rating">rating (1-5)</span>
Continue Reading
Cara Membuat Blog di Blogger - Selamat siang, pasti udah pada tahu kan apa itu blog ? Kalo udah belum tahu ini ku kasih tahu deh, tapi ini menurut pendapatku sendiri yah. Jadi, apa itu blog? Well, untuk singkatnya, blog adalah sebuah medium untuk penyampaian informasi dengan menggunakan jaringan internet, dengan cara yang lebih egaliter dan dengan semangat globalisme, karena informasi gak cuman milik media mainstream aja, setiap individu juga bisa menyampaikan suaranya, yang sering kali lebih cepat, bebas dan variatif karena tidak berada dibawah suatu jaringan korporat. Bisa dibilang blog adalah New Media for Information and Culture.
Kehadiran blog sebagai sumber informasi baru sudah mulai menunjukan signifikansinya karena para pembacanya membutuhkan informasi yang mungkin tidak terdapat di media mainstream dan untuk mendengar suara-suara yang selama ini belum terdengar tanpa kehadiran jaringan internet. Atau dalam kata lain kalo kamu kepingin mencari tau tentang sesuatu yang agak sulit di cari di media mainstream, kemungkinannya akan sangat besar kamu akan mendapatkannya lewat blog seseorang, kalo gak dapet, yah bikin sendiri aja. Langsung aja ke cara pembuatannya.
Kalo belum punya email gmail disaranin buat dulu deh, kalo cara membuat email udah banyak tuh tutorialnya di internet. Ok kalo udah punya akun email gmail tinggal bikin langsung ke Blogger.com , sebenarnya ada dua cara yaitu secara kilat dalam artian tidak perlu mengisi data diri sendiri dan secara manual, untuk secara kilat cukup buka email gmail mu kemudian buka Blogger.com dan kamu langsung dihadapkan pada tampilan berikut

ngga nyampe 3 menit kan ?. Sekarang tinggal cara manual, perhatikan langkah berikut :
- Buka blogger.com
- Kemudian klik Memulai,
- Setelah itu isi data-data untuk blog anda nantinya

- Setelah semuanya terisi jangan lupa centang "Saya menerima bla bla bla......."

- Selanjutnya isi alamat blog dan judul blogmu
- Selanjutnya tinggal pilih template blog kamu, tak saranin jangan pilih yang dinamis (yang paling pojok kiri atas) mendingan pilih yang mudah dulu, nanti diatur sendiri,

- Selesai deh blog buatan mu ... ;)

Continue Reading
Seperti judulnya kali ini saya akan membagi bagaimana caranya mengetahui peforma blog maupun website.
Kecepatan blog/website saat loading mungkin menjadi hal yang penting bagi setiap Blogger, bagaimana tidak apabila ada seorang pengunjung mengunjungi blog yang terasa berat dan lama saat melakukan loading pastinya pengunjung tersebut akan merasa bosan dan tak betah di blog tersebut. Oleh karena itu anda perlu mengecek kecepatan blog anda maupun peforma seperti kombinasi eksternal CSS, kombinasi JavaScript eksternal.
Untuk melakukan kegiatan anda perlu masuk ke GTmetrix di atas silahkan masuk disini
Setelah itu masukan urlblog/website anda
Untuk raport blog ini tidak begitu mengecewakan berikut hasilnya
Oh iya untuk nila maksimal yaitu 100(A) dan minimum yaitu 0(F).
Anda juga dapat mengecek Valid atau tidakah HTML dan XHTML blog anda di W3C Validator
Dan juga anda dapat mengetahui kecepatan blog anda melalui Google Page Speed. Continue Reading
Ada 3 cara dalam menempatkan file CSS pada dokumen HTML yaitu: External Style Sheet (file CSS berbeda dari file HTML), Internal Style Sheet (Kode CSS dipasang di dalam tag head HTML) dan Inline Style Sheet (Kode CSS langsung dipasang di tag HTML).
Pada umunya ada empat bagian yang sering ada dalam layout sebuah web yaitu:
Header : berisi Deskripsi web/ judul.
Menu : menu link web.
Content : isi dari web.
Footer : identitas/hak cipta.
Ada dua cara menempatkan dokumen CSS dalam web yaitu :
1.Posisi (Position)
- Absolute, Posisi elemen berpatokan pada jendela browser.
- Fixed, Posisi elemen tetap walaupun digeser.
- Static, Posisi normal (default).
- Relative, Posisi elemen tergantung dari elemen yang lain.
2.Menempel (Float)
- Clear:left, Elemen akan menempel pada sebelah kiri dan berada di bawah.
- Clear:right, Elemen akan menempel pada sebelah kanan dan berada dibawah.
- Clear:both, Elemen akan berada pada posisi bawah elemen diatasnya.
- Float:left, Elemen akan menempel pada sebelah kiri elemen induk.
- Float:right, Elemen akan menempel pada sebelah kanan elemen induk.
Margin, jarak/batas elemen dengan elemen lain.
Border, border/gari tepi elemen.
Padding, jarak elemen dengan isi elemen.
Contoh menulis,
Tanpa CSS :
<html>
<head>
<title>Apa Itu CSS ?</title>
</head>
<body>
<h1><font face="Verdana">Apa Itu CSS ?</font></h1>
</body>
</html>
Menggunakan Internal CSS,
<html>
<head>
<title>Belajar CSS</title>
<style type="text/css">
h1 { font-family: verdana; }
</style>
</head>
<body>
<h1>Belajar CSS</h1>
</body>
</html>
Selanjutnya apabila kita ingin menggunakan external CSS maka kita harus membuat file CSS, dengan eksistensi .css, kita coba membuatnya dengan nama style.css
h1 { font-family: verdana; }
Sekarang kita menulis kode HTML-nya seperti ini
<html>
<head>
<title>Apa Itu CSS ?</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Apa Itu CSS ?</h1>
</body>
</html>
Diatas hanya akan mengubah tag <h1> yakni akan mengubah font menjadi Verdana, maka akan menjadi seperti ini
Apa Itu CSS ?
Dalam dokumen HTML kita perlu memanggil file CSS dengan menggunakan tag
<link> yang harus anda letakan diantara tag <head>.Kode CSS mempunyai dua bagian utama yaitu: Selector, dalam hal ini h1 dan yang kedua terdapat diantara kurung kurawal
{font-family: verdana}. Didalam deklarasi juga terbagi menjadi dua bagian yaitu property dalam hal ini font-family dan value yakni verdana.Tidak semua browser dapat menampilkan jenis font yang kita letakan didalam CSS. Sebagai contoh anda ingin menampilkan dari keluarga font Serif dan fontnya Times yaitu Times New Roman. Anda dapat menuliskannya dari yang paling spesifik sampai yang umum, sehingga jika browser tidak mengenal fontnya, maka browser akan otomatis melihat font yang umum.Seperti ini :
<h1 style="font-family: 'Times New Roman', Times, serif">Serif font</h1>
CSS
- Secara umum kode CSS ditandai dengan sebuah tag pembuka <style type=”text/css”> dan diakhiri dengan tag penutup </style>.
- Setiap bagian kode dikenal dengan istilah syntax. Contoh #header-wrapper {
width: 940px;
margin:10px auto;
padding:10px 0;
} - Kode CSS bisa disimpan di antara tag pembuka <head> dan tag penutup </head> tetapi dapat juga disimpan di antara tag pembuka <body> dan tag penutup </body>.
- Apabila anda memasang kode CSS secara eksternal maka flie tersebut harus bereksistensi .css dan uploadlah di file hosting dan memanggilnya (misalkan style.css) maka kodenya
Javascript<link rel="stylesheet" type="text/css" href="style.css">
- Kode Javascript biasanya diletakan di antara tag pembuka <script> dan tag penutup </script> atau dalam bentuk yang berbeda dengan tag pembuka <script type=”text/javascript”> dan tag penutup </script>.
- Javascript dapat disimpan di template biasanya diantara tag pembuka <body> dan tag penutup </body> atau di antara tag pembuka <head> dan tag penutup </head> .
Ok, kali ini saya ingin share tutorial untuk menyembunyikan ataupun menampilkan widget pada halaman tertentu. Langsung aja berikut kodenya :
Menampilkan widget hanya di homepage
<b:if cond='data:blog.url == data:blog.homepageUrl'>
..........................
</b:if>
Menampilkan widget selain di homepage
<b:if cond='data:blog.url != data:blog.homepageUrl'>
.....................................
</b:if>
Menampilkan widget hanya di archivepages
<b:if cond='data:blog.pageType == "archive"'>
......................................
</b:if>
Menampilkan widget selain di achivepages
<b:if cond="data:blog.pageType != "archive"">
....................................................
</b:if>
Menampilkan widget hanya di itempages / postingan
<b:if cond='data:blog.pageType == "item"'>
............................................
</b:if>
Menampilkan widget selain di itempages
<b:if cond='data:blog.pageType != "item"'>
....................................
</b:if>
Menampilkan widget hanya di staticpage
<b:if cond='data:blog.pageType == "static_page"'>
..................................
</b:if>
Menampilkan widget selain di staticpages
<b:if cond='data:blog.pageType != "static_page"'>
............................
</b:if>
Menampilkan widget pada URL postingan tertentu
<b:if cond='data:blog.url == "Alamat Posting"'>
.........................................
</b:if>
Note : pada "Alamat Posting", ganti dengan url posting anda
Menampilkan widget selain di URL postingan tertentu
<b:if cond='data:blog.url != "Alamat Posting"'>
................................................
</b:if>
catatan: pada "Alamat Posting", ganti dengan url posting anda
Sekarang cara mengimplementasikannya adalah dengan menaruh kodenya dengan susunan sebagai berikut:
example :
<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 != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
Demikian tutorial untuk Cara Menampilkan Widget atau Menyambunyikan Widget pada Halaman Tertentu semoga bermanfaat.
Artikel ini saya peroleh dari
http://cwiter.blogspot.com/2011/10/cara-menampilkan-dan-menyembunyikan.htmlContinue Reading
Perlu sobat ketahui,bahwa template dinamis blogger ini tercipta adalah dengan mengambil dari screenshot feed blog anda,jadi jika feed yang sobat miliki belum dirubah menjadi 'Full' atau 'Penuh' maka template dinamis ini tidak dapat bekerja,dan justru yang akan terjadi nantinya sobat akan melihat notif seperti ini:

Nah, sebetulnya cukup gampang dan mudah untuk membuat/menerapkan template dinamis blogger tanpa kita mengubah template asli yang sudah melekat pada blog anda.
Sekarang tinggal bagaimana kita mengaktifkan tampilan dinamis blogger ini yakni dengan menambahkan url sesuai dengan tapilan dinamis yang anda inginkan. Berhubung Blogger menyediakan beberapa tampilan berikut diantaranya:
1. Tampilan Classic
Klik demonya
2. Tampilan Flipcard
Klik demonya
3. Tampilan Magazine
Klik demonya
4. Tampilan Mosaic
Klik demonya
5. Tampilan Sidebar
Klik demonya
6. Tampilan Snapshot
Klik demonya
7. Tampilan Timeslide
Klik demonya
Terimakasih, untuk mana yang akan di pilih terserah anda. Continue Reading
Hai, apa kabar ? Setiap situs
Gambar di bawah menunjukkan bagaimana menu akan terlihat jika CSS3 tidak didukung dan didukung.
Saya tidak akan menjelaskan garis CSS demi baris. Gambar di bawah menjelaskan poin kunci tentang bagaimana hal ini dropdown kode.
Popular Posts
-
Berikut adalah istilah dari penyajian data diagram yang diperoleh Mamka, A.Piktogram Piktogram adalah suatu cara untuk menampilkan besar dat...
-
Apa kata yang tepat untuk protes terhadap waktu Rhyme style apa yang pas untuk demo sedih diriku Air mataku sanggup katakan lebih banyak dar...
-
sepinya hari yang ku lewati tanpa ada dirimu menemani sunyi ku rasa dalam hidupku tak mampu ku tuk melangkah masih ku ingat indah senyummu y...
-
Daftar Peserta Lulus Hasil UKA SERTIFIKASI GURU 2012 Klik link SERTIFIKASI GURU , Pilih Propinsi yang ingin anda tampilkan, misalnya Jawa ...
-
Sinopsis singkat Lie to Me Pemain Lie to Me Daftar sinopsis Sekilas Sinopsis Singkat Lie to Me Gong Ah-jung yang diperankan oleh (Yoon Eun-h...
-
Selain murah, dan enak, sayur juga mudah didapatkan di pasar atau swalayan, tapi banyak orang yang meremehkan sayur, padahal banyak manfaat ...
-
Diskusi Blogger Pemula - Tidak ada belajar yang lebih bagus selain belajar bersama-sama dan praktek langsung, daripada belajar otodidak y...
-
Tuhan menciptakan makhluk hidup mulai dari Manusia, hewa, dan tumbuhan. manusia adalah makhluk Allah yang paling sempurna, seharusnya kita b...
-
Banyak hal yang membuat kita tidak percaya diri, salah satunya adalah bau kaki, ya.. bau kaki tidak cuma mengganggu kita saja tetapi bau kak...
-
Daftar isi sangatlah penting bagi blog, dengan adanya daftar isi pengunjung blog tidak akan kebingungan untuk mencari artikel yang sudah ter...
Blog Archive
-
▼
2012
(161)
-
▼
May
(23)
- Hasil Kelulusan Ujian SMA/MA/SMK 99 Persen LULUS
- Contoh CV Lamaran Kerja (Curriculum Vitae)
- Contoh Surat Lamaran Kerja yang Baik
- Harga dan Spesifikasi Nokia C6
- Harga dan Spesifikasi Nokia X2
- Harga dan Spesifikasi Nokia N8
- Harga dan Spesifikasi Samsung Galaxy Pocket
- Harga dan Spesifikasi Nokia Lumia 610
- Klasemen Liga Spanyol Update
- Klasemen Liga Super Indonesia Update
- Lirik Lagu Super Junior Way Lyrics
- Kumpulan Puisi Cinta
- Kata-kata Mutiara dan Motivasi Sukses
- Kata-kata Bijak dan Motivasi Mario Teguh
- Kata-kata Mutiara dan Motivasi Cinta
- Klasemen Liga Inggris Update
- Spesifikasi dan Harga Nokia Asha 303
- Harga Nokia Asha 303, Ponsel Cerdas Nokia
- Dampak Globalisasi
- 5 Hewan dengan Kelebihan yang Menakjubkan
- Koboy Palmerah
- Sinopsis Skip Beat Episode 1-15
- Foto Patung Liberty Disambar Petir
-
▼
May
(23)












