Cara membuat tanda Copyright di blogger

Berikut ini saya akan membagikan cara membuat tanda copyright di blogger, seperti ini © atau lengkapnya bisa anda lihat di bagian paling bawah dari blog ini.
Cara yang pertama, memasukan kode © di widget HTML/Javascript.

1. Ke pengaturan tata letak, lalu klik add widget dan pilih HTML/Javascript
2. Untuk mengeluarkan kode © coba tekan Alt dikeyboard dan tekan angka 0169(number pad yang ada disebelah kanan keyboard), pastikan angka 0169 semuanya ditekan begitu juga dengan Alt.
3. Setelah itu lepas semuanya, maka kode © akan keluar.
4. Contoh penggunaannya di blog saya, kodenya seperti ini.
<style>#copyrights ul{float:left}#copyrights ul li{float:left;list-style:none;padding:5px 5px 0 0;margin:0}#copyrights ul li a{font-weight:bold;color:#000}#tran ul{float:right}#tran ul li{list-style:none;padding:5px 0 0 0}#tran ul li a{color:#000}</style>

<div id='copyrights'>
<ul>
<li>Copyright © 2014.</li>
<li><a href='http://fandrajuani.blogspot.com/' title='Fandra Juani'>Fandra Juani</a></li>
<li> | Template Simple | Diberdayakan oleh </li>
<li><a href='http://www.blogger.com/' title='Blogger'>Blogger</a> </li></ul>
</div>
<div id="tran">
<ul>
<li><a href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&amp;langpair=id%7Cen&amp;hl=en');return false">Translate to English</a></li>
</ul></div>
5. Selesai.

Untuk memasukan kode © di halaman posting seperti yang sedang anda baca ini. Caranya sama seperti diatas, tekan Alt+0169 atau bisa juga mengetikan kode &copy; dihalaman HTML disebelah Compose.
Contoh: &copy; 2011
maka hasilnya akan seperti ini.
© 2011
Bisa juga dengan menggunakan kode &#169; dan &#xA9; hasilnya sama akana mengeluarkan kode ©.
Itulah sedikit cara tentang membuat tanda ©Copyright di blogger. Semoga bisa bermanfaat untuk anda

Read More

Cara mengisi artikel di menu bar

Cara mengisi artikel di menu bar blog dengan satu atau banyak artikel di dalamnya. Jadi ada 2 cara disini yang akan saya jelaskan, yang pertama mengisi menu bar dengan satu halaman post artikel dan yang kedua mengisi menu bar dengan banyak artikel. Contoh menu bar yang di isi dengan banyak artikel, bisa di lihat di menu Desain blog yang ada di bagian atas blog ini.

Cara yang pertama, mengisi menu bar blog dengan satu halaman artikel.

1. Silakan buka salah satu artikel kamu. Lalu copi alamat URL yang ada di address bar, letaknya dibagian atas. Contoh: URL dari salah satu artikel di blog saya.
http://fandrajuani.blogspot.com/2014/01/cara-desain-blog-sendiri.html
2. Dan pastekan URL di menu bar kamu. Ada 2 cara.
Memasukan URL di menu Laman Blog. Caranya:

• Ke pengaturan Laman > pilih Laman Baru > Alamat Web
• Lalu masukan URL tadi ke bagian Alamat web(URL), selanjutnya isi judul Laman. Contohnya:

• Dan klik Simpan.
Memasukan URL di menu HTML

• Silakan buka menu HTML kamu, lalu isi dengan url dari halaman artikel. Contohnya seperti ini bentuk dari menu HTML:
<div id="menu">
<ul>
<li><a href="http://fandrajuani.blogspot.com/2014/01/cara-desain-blog-sendiri.html">Desain Blog</a></li>
</ul>
</div>
3. Selesai.

Cara yang kedua, memasukan banyak artikel di menu bar

1. Buatlah label dan pasang widget label di blog kamu. Caranya baca di artikel Cara membuat label atau kategori di blog.
2. Jika sudah, silakan buka halaman awal blog kamu. Dan klik Kanan >Copy link Location pada Nama label yang akan di masukan ke menu bar. Contoh:

3. Dan Pastekan di Notepad. Contoh URL dengan nama Label Desain Blog.
http://fandrajuani.blogspot.com/search/label/Desain%20Blog
4. Sekarang, silakan masukan URL label ke menu kamu, contoh penempatan URL, lihat kembali pada cara pertama, pada langkah 2.
5. Selesai.

Sebenarnya cara ini bukan berarti kita menulis artikel di menu bar, tapi hanya mengisi menu bar dengan URL dari artikel2 yang sudah kita buat. Cara menulis artikelnya sama saja seperti kita membuat entri baru. Seperti cara yang pertama, menu bar di isi dengan URL dari halaman blog. Dan cara yang kedua, menu bar di isi dengan URL dari Label.

Itulah sedikit tips trik cara mengisi artikel di menu bar. Silakan dibaca juga artikel tentang Cara membatasi jumlah artikel di label dan juga artikel2 lainnya. Semoga artikel diatas bisa bermanfaat untuk anda.

Read More

Cara membuat label atau kategori di blog

Cara membuat label atau kategori di blog. Label atau kategori maksudnya adalah pengelompokan artikel dalam satu nama yang sama atau artikel dengan pokok pembahasan yang berkaitan kita kelompokan menjadi satu. Label atau kategori ini berfungsi untuk memudahkan pengunjung untuk melihat artikel-artikel dengan pembahasan yang sama.

Contohnya: Kita punya 3 artikel dengan judul seperti dibawah ini.

1. Cara membuat motor roda dua
2. Cara memperbaiki motor yang rusak
3. Cara merawat motor agar tetap awet

Dari ketiga judul artikel di atas, semuanya berhubungan dengan motor. Maka buatlah LABEL  dengan nama Motor. Jadi ketika orang klik label dengan nama MOTOR. Ketiga artikel diatas akan keluar. Untuk melihat contoh label, bisa di klik dibagian menu desain blog atau tips trik yang ada di blog ini, letaknya di bagian atas.

Itulah sedikit penjelasan apa yang dimaksud dengan label atau kategori. Sekarang ke bagian cara membuat label atau kategori di blog.

1. Silakan edit 3 artikel lama kamu. Lalu klik Label pada bagian Setelan Entri. Contohnya:

2. Selanjutnya isi dengan nama label yang sama pada ke tiga artikel kamu. Contoh: gambar diatas itu di isi dengan nama label Tips dan Trik. Lalu klik Selesai.
3. Dan klik perbarui.
4. Setelah itu ke pengaturan tata letak > klik tambahkan gadget > Pilih Label. Seperti gambar dibawah ini. Dan simpan.

5. Masih pada bagian tata letak, klik simpan setelan. Dan silakan buka halaman awal blog kamu. Maka akan ada widget atau gadget di blog kamu . Contohnya:

6. Sekarang coba klik label yang sudah kamu buat tadi, maka ketiga artikel yang sudah  kamu beri nama label yang sama tadi, akan keluar. Selesai.

Lakukan cara yang sama, jika ingin membuat label dengan nama yang berbeda. Dalam satu artikel kita juga bisa memberinya dengan nama label yang berbeda. Misalkan Satu artikel kita beri 2 nama label, contoh: pertama label dengan nama tips trik dan yang kedua desain blog. Caranya cukup dengan menambahkan tanda , untuk memisahkan label yang pertama dan yang kedua. Contohnya:

Jika sudah memberikan satu artikel dengan 2 nama label, contohnya: tips trik dan desain blog. Maka setiap kita klik label tips trik maka artikel tadi akan keluar. Begitu juga jika kita klik label desain blog, maka artikel itu pun akan keluar.

Tidak hanya dua, tiga atau empat sekalipun kita bisa berikan pada satu artikel. Saran saya, satu artikel cukuplah diberi nama label paling banyak 3 nama saja. Tapi itu terserah anda, jika ingin memberikan banyak nama label dalam satu artikel, silakan.

Silakan dibaca juga artikel saya yang lainnya seperti Cara membatasi jumlah artikel di label atau artikel tentang Cara membuat dan mengisi menu blog dan juga artikel lainnya. Semoga artikel di atas bisa bermanfaat untuk anda.

Read More

Cara membuat tulisan link berputar

Artikel kali ini saya akan coba bagikan artikel desain blog tentang cara membuat tulisan link berputar di blog. Maksudnya adalah tulisan yang didalamnya tertanam link url dari alamat dari blo kita, akan berputar ketika di sentuh oleh mouse. Biasanya disebut dengan link hover style. Disini link hover style nya saya buat dengan efek berputar ketika disentuh mouse.

Contohnya: coba arahkan mouse anda ke link tulisan berputar dibawah ini.

Tulisan Berputar

Seperti contoh diatas, tulisan akan berputar ketika di sentuh oleh mouse. Sekarang, saya akan coba beri contoh penerapannya di blog. Seperti yang masih/pernah saya gunakan. Efek link hover berputar itu saya terapkan di link yang ada di widget blog. Contohnya coba lihat di widget label atau ketegori yang ada disebelah kiri blog ini(jika masih saya gunakan).

Dan untuk cara membuatnya, silakan ikuti langkah-langkah dibawah ini.

1. Silakan login ke blogger, dari halaman dasbor piih pengaturan tata letak.
2. Lalu klik desainer template > tingkat lanjut > Tambakan Css.
3. Lalu masukan kode berikut ini kedalamnya. Atau cari kode ]]></b:skin> dan masukan kode ini didalamnya.
#Label1 a{
font-weight:bold;
Color:black;
position:relative;
display:inline-block;

-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style:preserve-3d;

-webkit-transition:all 300ms ease;
-moz-transition:all 300ms ease;
transition:all 300ms ease}

#Label1 a:hover{
-webkit-transform:rotate(-720deg);
-moz-transform:rotate(-720deg);
transform:rotate(-720deg)}
Keterangan kode:

• 300 itu adalah waktu berputarnya tulisan ketika disentuh mouse.
• -720 kode ini digunakan untuk membuat tulisan berputar sebanyak 720 derajat atau 2x putaran melawan arah jarum jam. Jika ingin dibuat searah jarum jam, hapus saja tanda minusnya.
4. Terakhir, klik terapkan ke blog. Selesai.

Penjelasan sedikit tentang kode diatas, sebenarnya hanya dengan menggunakan kode singkat seperti dibawah ini.

#Label1 a{
font-weight:bold;
Color:black;
position:relative;
display:inline-block;
transform-style:preserve-3d;
transition:all 300ms ease}

#Label1 a:hover{
transform:rotate(-720deg)}

Itu sudah cukup untuk membuat tulisan pada link bisa berputar. Tapi, efek berputarnya hanya bisa di browser mozilla. Sedangkan di browser yang lain efek berputar itu tidak bisa berjalan. Karena itu di tambahkanlah kode -webkit-transform dan -moz-transition, agar efek berputar juga bisa berjalan di browser lain.

Sehingga membuat kode-kode diatas agak sedikit panjang. Tapi tidak sulit mengatur waktu putar dan jumlah putarannya. Karena hanya mengganti angaka 300 untuk waktu, dan -720 untuk jumlah putaran. Ketiga-tiganya harus sama. contohnya:

-webkit-transition:all 600ms ease;
-moz-transition:all 600ms ease;
transition:all 600ms ease;

-webkit-transform:rotate(-360deg);
-moz-transform:rotate(-360deg);
transform:rotate(-720deg)

Untuk pengaturan waktu semakin besar angkanya, maka akan semakin lama waktu berputarnya, sama juga dengan jumlah putaran. 360 untuk satu putaran 720 untuk 2 putaran. Bisa juga dibuat 90, jadi tulisan berputar tapi bergerak 90derajat.

Ada kekurangan dari cara membuat tulisan link berputar ini, yaitu ketika mouse menyentuh bagian ujung dari tulisan. Maka rotasi putarnya menjadi tidak sempurna, terkadang seperi nyangkut2. Jadi harus disentuh di bagian tengah tulisan, maka tulisan akan berputar dengan baik.

Contoh diatas itu hanya saya terapkan di bagian tulisan link yand ada di widget label. Bisa juga digunakan pada bagian yang lain, seperti bagian judul header kita buat berputar-putar saat disentuh mouse, sidebar dan juga bagian yang lain2nya. Silakan di coba sendiri, dan baca juga artikel tentang cara membuat link terbuka di tab baru. Masih berhubungan juga dengan link, dan juga artikel2 lainya. Semoga artikel diatas bisa bermanfaat untuk anda.

Read More

Title otomatis pada link label blogger

Cara menambahkan title di setiap link label yang ada di blogger. Title merupakan attribute yang digunakan untuk memberikan keterangan dari sebuah link. Untuk melihat link yang ada titlenya, coba arahkan mouse ke link label, maka akan ada tulisan dengan background putih yang keluar.

Gambar disamping adalah contoh link label yang telah diberi title. Tulisan Tips dan Trik yang berwarna hitam dengan background putih itu akan keluar ketika link label di sentuh oleh mouse. Untuk melihat contoh lainnya, coba anda arahkan mouse anda ke label/kategori yang ada di blog ini.

Sebelumnya saya juga sudah membuat artikel title link disetiap judul posting blog. Fungsinya sama agar link diposting blog ada titlenya, bedanya hanya pada kode yang digunakan.

Untuk lebih jelasnya cara membuat title otomatis pada link label blogger. Silakan ikuti langkah-langkah dibawah ini.

1. Silakan login ke blogger, dari halaman dasbor pilih pengaturan template.
2. Dan klik edit html, lalu cari kode expr:href='data:label.url'
3. Setelah ketemu tambahkan kode attribute title tag seperti ini disampingnya expr:title='data:label.name'.
Contoh penambahan kode attrbute title di widget label asli blogger

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='data:label.name'><data:label.name/></a>
Contoh penambahan attribute title yang lain, seperti di Breadcrumb.
<a expr:href='data:label.url' expr:title='data:label.name'>
<data:label.name/></a>
4. kode expr:href='data:label.url' ini biasanya ada 2 atau mungkin lebih yang ada ditemplate blogger, silakan dicari semuanya dan tambahkan kode expr:title='data:label.name' disampingnya. Setelah itu, save template. Selesai.

Cara diatas merupakan contoh pemberian title tag di dalam template. Adapun contoh lain pemberian kode attribute title tag pada link label pada kode HTML yaitu dengan menambahkan kode title="Title yang akan diberi". Contohnya:

<a href="http://fandrajuani.blogspot.com/search/label/Header" title="Desain Header">

Fungsi menambahkan title di link label blog ini sebenarnya untuk menambah optimasi seo dari blog, agar google lebih mudah untuk membaca semua link yang ada di blog kita. Tidak di gunakan juga tidak apa-apa, karena mungkin efeknya juga tidak terlalu besar untuk blog kita.

Tapi tidak ada salahnya mencoba, kebanyakan blog atau website yang mempunyai pagerank besar juga memberikan attribute title di setiap link yang ada diblog atau website mereka. Itulah sedikit tips trik seo tentang menambahkan title otomatis pada link label blogger. Semoga bisa bermanfaat untuk anda.

Read More

Penyempurnaan html di google webmaster

Cara penyempurnaan html blog di google webmaster, mulai dari mengatasi duplikasi deskripsi meta, deskripsi meta panjang dan deskripsi singkat meta. Seperti keterangan yang tertulis diatasnya berbunyi kinerja dan pengalaman pengguna situs anda dapat terbantu jika hal berikut di atasi. Seperti contoh gambar dibawah ini.

---

Mengatasi duplikasi deskripsi meta

---

1. Silakan login ke blogger, dari halaman dasbor pilih pengaturan Setelan.
2. Lalu pilih Preferensi penelusuran, dan klik edit pada bagian Tag tajuk robot khusus. Lalu beri tanda all pada bagian beranda, tandai noindex dan noarchive pada bagian laman arsip dan penelusuran. Terakhir beri tanda all di default untuk pos dan laman. Seperti gambar dibawah ini.

3. Simpan perubahan, selesai.

---

Mengatasi Deskripsi meta panjang

---

1. Ke pengaturan Setelan > Preferensi penelusuran > dan klik pada bagian deskripsi.
2. Pilih ya pada Aktifkan deskripsi penelusuran, lalu Kosongkan isi di dalamnya. Lalu klik simpan perubahan.

3. Selanjutnya ke pengaturan template, klik edit html dan cari kode <head>
4. Lalu masukan meta deskripsi kamu dibawah <head>. Contoh:
<head>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta content='Fandra Juani,Desain blog,blogger,blogspot,tutorial,cara,membuat,mengganti,merubah,modifikasi,belajar,Tips,Trik,edit template,css,html' name='keywords'/>
<meta content='Fandra Juani kumpulan tutorial tentang cara desain blog sendiri di blogspot, serta tips dan trik edit template asli blogger.' name='description'/>
</b:if>
5. Save template, maka deskripsi meta panjang hanya akan ada di halaman awal blog saja, agar tidak ada duplikasi desckripsi meta panjang. selesai.

---

Mengatasi Deskripsi singkat meta

---

1. Pertama, login ke blogger, lalu kunjungi situs google webmaster.
2. Dan pilih pada bagian tampilan penelusuran > penyempurnaan html > lalu klik Deskripsi meta. 
3. Setelah itu akan ada halaman2 dari blog kita yang mempunyai deskripsi singkat meta. Contohnya.

4. Sekarang, kembali ke halaman blogger, lalu pilih pengaturan Post dan cari artikel yang sesuai dengan URL laman dari google webmaster. Seperti gambar diatas, judulnya cara menghapus akun google analytics.
5. Setelah ketemu artikelnya, edit artikel itu, lalu klik pada bagian Deskripsi Penelusuran. Seperti gambar dibawah ini.

6. Nah disitu terlihat tulisan yang sama dengan yang di google webmaster tadi, contoh disini adalah cara menghapus akun google analytics, disitulah masalahnya. Cara mengatasunya tambahkan kata di dalamnya, kira-kira 20 sampai 30 kata dari keseluruhan kalimat di deskripsi penelusuran.Klik selesai. Dan klik perbarui. Selesai.

Setelah melakukan cara-cara diatas, untuk melihat hasilnya tunggu 4 - 7 hari  atau sampai google memperbarui penyempurnaan html dari blog kita. Setelah diperbarui google, maka tampilan html yang sudah disempurnakan akan seperti gambar dibawah ini.

Itulah sedikit tips trik penyempurnaan html di google webmaster, yaitu dengan cara mengatasi masalah dari ke tiga deskripsi meta. Semoga bisa bermanfaat untuk anda.

Read More

Widget blog melayang setelah di scroll

Artikel kali ini tentang widget blog melayang setelah halaman blog kita di scroll ke bawah. Dan akan kembali pada posisinya semula, jika halaman blog kembali di scoll ke atas. Widget tidak akan melayang atau mengambang jika halaman blog belum di scroll ke bawah.

Contohnya: Bisa dilihat di halaman blog ini, coba scroll ke bawah dan lihat pada widget Artikel Populer(jika masih saya gunakan). Widget tersebut akan melayang setelah widget mendekati halaman atas blog. Dan akan kembali seperti semula setelah halaman blog kembali di scroll ke atas.

Posisi widget pada saat melayang dapat kita atur sesuai dengan keinginan kita. Untuk lebih jelasnya tentang cara membuat widget melayang setelah di scroll, silakan ikuti langkah-langkah dibawah ini.

1. Silakan login ke blogger, dari halaman dasbor pilih pengaturan template.
2. Dan klik edit HTML dan cari kode </body>
3. Selanjutnya masukan kode berikut ini di atas </body>
<script type='text/javascript'>
$(window).scroll(function(){
if ($(window).scrollTop() &gt;= 560){
$(&#39;#PopularPosts1&#39;).css({position:&#39;fixed&#39;,top:30});
} else {
$(&#39;#PopularPosts1&#39;).css({position:&#39;relative&#39;,top:0});
}
});
</script>
Keterangan kode:

• 560 Untuk mengatur jarak widget akan melayang, makdsudnya setelah halaman blog di scroll 560px ke bawah, maka widget baru akan melayang.
• fixed code yang digunakan untuk membuat blog melayang.
• top:30 posisi widget setelah di scroll 30px dari halaman atas blog.
• relative dan top:0 agar widget kembali ke posisi semula, setelah halaman blog di scroll ke atas.
• #PopularPosts1 kode id dari widget Artikel Populer. Silakan diganti dengan kode id dari widget yang akan dibuat melayang. Cara mencari kode id widget, lihat dibawah.
4. Setelah itu save template. Dan buka salah satu halaman artikel blog kamu, jika belum berjalan, coba masukan kode berikut ini diatas </body>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
5. Save template, selesai.

---

 Cara mencari kode id widget

---

1. Tentukan widget mana yang akan di buat melayang, judul widgetnya apa?contoh: Artikel Populer.
2. Lalu ke pengaturan template, klik edit html dan cari kode Artikel Populer,  Contoh kodenya seperti dibawah ini.
<b:widget id='PopularPosts1' locked='false' title='Artikel Populer' type='PopularPosts'>
3. Kode merah PopularPosts1 itu adalah kode id dari widget Artikel Populer.

Silakan diatur sesuai dengan yang kalian inginkan, saran saya widget yang akan dibuat melayang, sebaiknya letakan dibagian paling bawah sidebar, agar tidak menutupi widget² yang lain. Kode script pada langkah 4 itu merupakan kode script yang paling ringan menurut saya, karena sudah saya bandingkan dengan kode script yang lain. Kode script diatas itu kira2 sekitar 51.0 kb, jadi tidak terlalu memberatkan loading blog. 

Itulah sedikit cara desain blog agar lebih menarik yaitu dengan membuat widget melayang setelah di scroll. Untuk cara widget melayang yang lebih simpel, silakan baca di artikel fungsi fixed dan cara menggunakannya dan juga artikel membuat menu menempel di dingding blog. Semoga artikel diatas bisa bermanfaat untuk anda.

Read More