Cara membuat game full screen

Lama sudah g'update, kali ini saya akan bagikan trik sederhana yaitu cara agar tampilan layar game menjadi full screen atau layar penuh. Dibeberapa game memang tidak memberikan pengaturan tampilan layar secara penuh. Secara otomatis game akan menyesuaikan lebar aslinya, dan yang tidak enaknya, klo maen game, gambarnya tidak penuh. Maka dari itu kita harus mengaturnya sendiri di graphics properties yang ada dikomputer kita.
Caranya:

• Klik kanan pada layar desktop, dan pilih graphics properties. Maka akan terbuka halaman pengaturan intel hd.
• Selanjutnya pilih pengaturan display, lalu pada bagian resolution.
• Ubah menjadi 800x600.
• Selanjutnya kembalikan lagi ke pengaturan awal resolutionnya, misalkan 1360x768.
• Terakhir klik apply, tutup pengaturan graphics properties.
• Dan buka game yang akan kamu mainkan, selesai.

Itulah sedikit trik sederhana tentang cara membuat game full screen atau layar penuh. Silakan dibaca juga artikel-artikel saya yang lainnya. Semoga bisa bermanfaat untuk anda.

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

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.

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.

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.

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.

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.

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.

Cara membuat tombol back to top

Cara membuat tombol back to top atau kembali ke atas di blog, yang akan muncul ketika halaman blog di scroll kebawah. Letaknya berada di bawah sebelah kanan dan jika tombol itu di klik, maka halaman blog akan kembali keatas dengan pelan, dan tombol itu pun akan menghilang.

Seperti contoh gambar diatas, gambar cicak itu akan keluar jika halaman blog sudah di scroll ke bawah dan akan kembali menghilang ketika halaman blog yang dibuka sudah diatas lagi. Cara membuatnya silakan ikuti langkah-langkah dibawah ini.

1. Silakan login ke blogger, dan pilih pengaturan template.
2. Klik edit html dan cari kode </body>
3. Lalu masukan kode berikut ini diatas </body>
<div id='ScrollToTop'>
<img alt='Kembali Ke Atas' height='68' src='https://lh3.googleusercontent.com/-DqAYBDzBDTc/UsG2Zlef7kI/AAAAAAAABos/HM8BLePVmwI/s148/ke%2520atas.png' title='Kembali Ke Atas' width='148'/>
<figcaption>Kembali Ke Atas</figcaption>
</div>

<script type='text/javascript'>
$(function() { $(window).scroll(function() {if($(this).scrollTop()>500) { $('#ScrollToTop').fadeIn()}
else { $('#ScrollToTop').fadeOut();}});$('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},700);
return false})});
</script>
4. Selanjutnya cari kode ]]></b:skin> dan masukan kode berikut ini ke atasnya.
#ScrollToTop{
text-align:center;
z-index:9999;
position:fixed;
bottom:40px;
right:30px;
cursor:pointer;
display:none;
opacity:0.7;
padding-top:4px}

#ScrollToTop:hover{opacity:1;}
figcaption {
text-align:center;
color:white;
text-shadow: 5px 5px 10px #000;
font-weight:bold;
font-size:10px;}
5. Save template, dan coba buka salah satu halaman blog kamu. Lalu scroll ke bawah, sudah ada atau belum tombol back to top nya. Jika sudah silakan disave template.
6. Jika Belum, coba masukan kode berikut ini diatas </head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'/>
7. Lalu save template. Selesai.

Keterangan kode langkah 3:

• Tulisan ini Kembali Ke Atas bisa diganti dengan kata yang kamu inginkan.
• Nilai 500 ini, fungsinya ketika halaman blog discroll ke bawah sebanyak 500px maka tombol back to top akan muncul.
• Dan yang ini 700 fungsinya digunakan untuk mengatur kecepatan loading scroll ke atas, ketika tombol back to top ditekan.

 Keterangan kode langkah 4:

• #ScrollToTop{ gunanya untuk mengatur posisi dan tampilan tombol back to top
• #ScrollToTop:hover{ ini untuk mengatur gambar ketika disentuh mouse
• figcaption { mengatur posisi dan warna dari tulisan Kembali Ke Atas.

Jika ingin hanya menggunakan tulisan back to top tanpa gambar, ganti kode dari langkah 3 dengan kode dibawah ini.

<div id='ScrollToTop'>Kembali Ke Atas</div>
<script type='text/javascript'>
$(function() { $(window).scroll(function() {if($(this).scrollTop()>500) { $('#ScrollToTop').fadeIn()}
else { $('#ScrollToTop').fadeOut();}});$('#ScrollToTop').click(function(){$('html,body').animate({scrollTop:0},700);
return false})});
</script>

Save template, selesai. Semoga bisa bermanfaat untuk anda.

Title di setiap judul posting blog

Tips trik seo kali ini saya akan coba bagikan tentang cara menambahkan title atau keterangan di setiap judul posting blog secara otomatis, ketika judul posting disentuh oleh mouse. Contohnya seperti gambar dibawah ini.

Seperti contoh gambar diatas, tulisan dengan warna background putih itu adalah title atau keterangan yang akan muncul ketika judul disentuh mouse. Cara membuatnya, silakan ikuti langkah-langkah dibawah ini.

1. Login ke blogger, pilih pengaturan template.
2. Klik edit HTML dan cari kode <a expr:href='data:post.link'><data:post.title/></a>
3. Setelah ketemu, tambahkan kode expr:title='data:post.title' kedalamnya. Contoh:
<a expr:href='data:post.link' expr:title='data:post.title'><data:post.title/></a>
4. Kode ini <a expr:href='data:post.link'><data:post.title/></a> biasanya ada 2 diblog, lakukan hal yang sama seperti langkah 3.

Setelah melakukan cara diatas, jangan di save template dulu, karena masih ada kode yang harus diedit. Sengaja saya pisah biar lebih mudah mengikutinya.

1. Cari kode <a expr:href='data:post.url'><data:post.title/></a>
2. Setelah itu tambahkan kode expr:title='data:post.title' kedalamnya. Contoh:
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
3. Kode ini <a expr:href='data:post.link'><data:post.title/></a> biasanya ada 3 diblog, lakukan hal yang sama seperti langkah 2.
4. Nah, baru save template. Selesai.

Setelah melakukan cara diatas, silakan lihat blog kamu. Jika  melakukannya dengan benar, insyaallah title disetiap judul posting blog akan keluar ketika disentuh mouse. Sebenarnya saya juga tidak terlalu mengerti tentang seo, tapi yang saya tau disetiap website² besar dengan pagerank tinggi seperti facebook, menggunakan title atau tulisan keterangan di setiap URL dari halaman websitenya.

Tapi banyak juga website yang tidak menggunakan title di url nya. Seperti google, yahoo, twitter, ya mungkin mereka tidak membutuhkan lagi cara seperti diatas, tanpa menambahkan titlle di setiap url nya pun, masih juga rame websitenya.

Bagi saya yang masih awam tentang seo website atau blog. Tidak ada salahnya menggunakan title disetiap judul posting, namanya juga masih belajar. Seperti keterangan di website check seo http://chkme.com/ mengatakan (translate:Meskipun tidak penting dan tidak digunakan untuk menghitung skor akhir, kita menganggap bahwa untuk link judul dapat benar-benar berguna. Mencoba memperbaiki kesalahan, jika diperlukan).

Demikianlah sedikit tips trik seo dari saya tentang title di setiap judul posting blog. Dan silakan dibaca juga artikel tentang title otomatis pada link label blogger. Fungsinya sama agar link ada titlenya, tapi pada bagian label blogger. Semoga artikel diatas bisa bermanfaat untuk anda.

Membuat widget hanya tampil dihalaman tertentu

Tips dan trik kali ini saya akan bagikan artikel tentang cara membuat widget hanya tampilan dihalaman tertentu di blog. Ada 4 cara yang akan saya bagikan, pertama membuat widget hanya tampil dihalaman awal blog saja. Kedua, membuat widget hanya tampil dihalaman posting.

Ketiga, menampilkan widget dihalaman awal blog dan juga dihalaman Label Blog. Dan yang keempat adalah Menampilkan widget hanya tampil pada halaman URL yang ditentukan. Sebenarnya 4 cara tersebut menggunakan cara yang sama, hanya saja kode yang digunakan yang berbeda. Berikut caranya:

Disini widget yang akan dijadikan contoh adalah widget Follow by email.

---

Pertama: Membuat widget hanya tampil/terlihat dihalaman awal blog saja

---

1. Silakan login ke blogger, dan pilih pengaturan Template.
2. Klik edit HTML dan cari kode follow by email(gunakan Ctrl+f untuk memudahkan pencarian).
<b:widget id='FollowByEmail1' locked='false' title='Follow by Email' type='FollowByEmail'>
3. Setelah ketemu Tambahkan kode <b:if cond='data:blog.url == data:blog.homepageUrl'> dan juga kode </b:if> Contohnya:
<b:widget id='FollowByEmail1' locked='false' title='Follow by Email' type='FollowByEmail'>
<b:includable id='main'><b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:title != &quot;&quot;'><h2 class='title'><data:title/></h2></b:if>
<div class='widget-content'>
...................dan kode2 panjang lainnya..........
<span class='item-control blog-admin'>
<b:include name='quickedit'/>
</span></b:if>
</b:includable>
</b:widget>
4. Dan kode2 panjang lainnya itu maksudnya agar lebih pendek saja tampilannya di artikel ini. Kode aslinya lebih panjang. Setelah itu save template. Selesai.

---

Kedua: Nah sekarang kebalikannya, membuat widget hanya tampil dihalaman posting atau artikel blog saja. Sedangkan dihalaman awal homepage blog widget tersebut akan hilang.

---

1. Sama seperti cara yang pertama, hanya mengganti kode <b:if cond='data:blog.url == data:blog.homepageUrl'> dengan kode berikut ini.
<b:if cond='data:blog.pageType == "item"'>
2. Save template, selesai.

---

Ketiga: Menampilkan widget dihalaman awal blog dan juga dihalaman Label Blog.

---

1. Sama seperti cara yang pertama, hanya mengganti kode <b:if cond='data:blog.url == data:blog.homepageUrl'> dengan kode berikut ini.
<b:if cond='data:blog.pageType != &quot;item&quot;'>
2. Save template, selesai.

---

Keempat: Menampilkan widget hanya tampil pada halaman URL yang ditentukan

---

1. Sama seperti cara yang pertama, hanya mengganti kode <b:if cond='data:blog.url == data:blog.homepageUrl'> dengan kode berikut ini.
<b:if cond='data:blog.url == "Ganti dengan URL Halaman disini"'>
2. Save template, selesai.

Silakan dicoba keempat cara diatas, dan silakan baca juga artikel saya sebelumnya tentang cara menghilangkan widget dihomepage fungsinya sama dengan cara kedua seperti artikel diatas, hanya caranya saja yang berbeda. Dan juga artikel tentang membuat background berbeda dihalaman berbeda diblog. Atau Menghilangkan sidebar pada halaman tertentu. Semoga artikel diatas bisa bermanfaat untuk anda.

Cara merubah warna block di blog

Cara merubah warna block di blog. Block disini maksudnya, warna tulisan dan juga background pada saat kita klik tulisan lalu kita tahan dan tarik sehingga ada warna yang terlihat. Block biasanya digunakan untuk mengcopy tulisan yang ada diwebsite atau blog.

Block sederhananya berwarna biru langit di backgroundnya dan juga warna hitam ditulisannya. Disini kita akan mencoba merubah warna dari background dan warna tulisannya dengan warna yang kita inginkan. Contohnya seperti gambar dibawah ini.

Seperti contoh gambar diatas. Background tulisan saat di block berwarna hitam dan juga warna tulisannya berwarna putih. Dan kamu bisa menggantinya dengan warna yang kamu inginkan. Cara membuatnya silakan ikuti langkah-langkah dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan template.
2. Lalu klik edit HTML dan cari kode ]]></b:skin> lalu masukan kode berikut ini diatasnya.
::selection {background:#000000;color:#FFFFFF;}
::-moz-selection {background:#000000;color:#FFFFFF;}
::-webkit-selection {background:#000000;color:#FFFFFF;}
3. Terakhir, Save template dan selesai.

Keterangan kode:

• background:#000000; untuk warna background
• color:#FFFFFF; untuk warna tulisan
• jika ingin mengganti background dan warna tulisan gantilah ketiga kode diatas dengan kode warna yang sama

Contoh penggantian warna block background dan warna tulisan 

::selection {background:#107cde;color:#0000000;}
::-moz-selection {background:#107cde;color:#000000;}
::-webkit-selection {background:#107cde;color:#000000;}

Silakan diganti sesuai dengan warna yang kamu inginkan, dan silakan baca juga artikel saya yang lainnya yang berkaitan dengan warna seperti cara membuat background warna transparan atau cara membuat background gradient 2 warna dan juga artikel-artikel lainnya. Semoga artikel diatas bisa bermanfaat untuk anda.

Cara mengatur spasi tulisan di blog

Tips dan Trik kali ini adalah tentang cara mengatur spasi tulisan di blog. Spasi atau jarak kosong antara kalimat pada baris atas dan juga baris bawah. Dan juga jarak kosong antara huruf satu dengan yang lainnya. Tujuannya agar tulisan diblog terlihat lebih rapi, dan lebih mudah untuk dibaca.

Contoh spasi atau jarak kosong antar baris kalimat:

Contoh jarak spasi antar baris
Terlihat jauh jarak antara tulisan ini dengan tulisan atas.

Dan contoh spasi atau jarak kosong antar huruf.

Contoh jarak spasi antar huruf
Jarak antara huruf satu dengan huruf yang lain.

Dari contoh diatas sudah jelas kan, perbedaan antara spasi atau jarak kosong antar baris kalimat dan antar huruf. Berikut ini adalah contoh penerapan pengaturan spasi tulisan pada bagian posting blog. Ikuti langkah-langkah dibawah ini.

1. Silakan login ke blogger, lalu pada halaman dasbor pilih pengaturan Template.
2. Lalu klik edit HTML dan cari kode ]]></b:skin> dan masukan kode berikut ini diatasnya.
.post-body {
line-height:1.8em;
letter-spacing: 0.1px;
}
3. Save template, selesai.

Keterangan kode diatas.

• .post-body { untuk mengatur tulisan di halaman posting blog
• line-height:1.8em; untuk mengatur spasi antar baris kalimat
• letter-spacing: 0.1px; untuk mengatur spasi antar huruf

Silakan diatur sendiri sesuai dengan keinginan anda, untuk menambahkan atau mengurangi jarak antar baris ganti  nilai line-height:1.8em; contoh: 2.8em dan untuk spasti antar huruf ganti nilai letter-spacing: 0.1px; contoh: 1px;

Kalau seperti contoh diatas. itu kode spasi antar barisnya saya atur menjadi 2.8em dan spasti antar hurufnya 5px. Untuk pengaturan keseluruhan tulisan dari halaman posting artikel blog saya ini. saya atur spasi antar barisnya menjadi line-height:1.6em; dan untuk spasti antar hurufnya letter-spacing: 0.1px;. Menurut saya sudah cukup enak dilihat tulisan di blog saya ini dengan pengaturan nilai 1.6em untuk baris kalimat dan 0.1 untuk spasi huruf.

Silakan dibaca juga artikel² saya yang lainnya, seperti membuat pangkat atas¹² dan bawah₉₀ di artikel tips dan trik menulis di blog. Dan juga artikel saya yang lainnya. Terima kasih telah berkunjung ke blog saya, dan semoga artikel diatas bisa bermanfaat untuk anda.

Cara membuat link terbuka di tab baru

Kali ini saya akan coba bagikan kode HTML yang berfungsi untuk membuat semua link yang ada di blog terbuka ditab baru pada saat diklik. Dengan begitu pengunjung blog akan lebih mudah untuk membuka link² yang ada diblog kita, jadi tidak perlu lagi klik kanan open link in new tab.

Link adalah alamat url dari suatu halaman website, contohnya seperti ini fandrajuani.blogspot.com. Langsung saja kebagian inti, cara membuat link terbuka ditab baru. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger, dari halaman dasbor pilih pengaturan template.
2. Dan klik Edit HTML, lalu cari kode </head> gunakan Ctrl + F untuk memudahkan pencarian.
3. Setelah ketemu, masukan kode berikut ini diatasnya.
<base target='_blank'/>
4. Terakhir, save template. Selesai.

Mudahkan, dengan menambahkan kode <base target='_blank'/>, maka seluruh link yang ada di blog kita akan terbuka dihalaman atau tab baru ketika diklik. Selain untuk memudahkan pengunjung untuk membuka setiap link yang ada di blog, kode ini juga akan meningkatkan total tayangan laman dari blog kita. 

Atau jika ingin membuat link terbuka ditab baru, tapi tidak disemua link di blog. Kamu bisa tambahkan kode target="_blank" atau target='_blank' di kode link HTML kamu. Contoh:

<a href="http://fandrajuani.blogspot.com/p/blog-page_25.html" target="_blank" title="Profil">Profil</a>

Hasilnya: Silakan klik link ini Profil

Silakan dibaca juga artikel2 saya yang lainnya seputar seo seperti artikel tentang belajar seo untuk blogger pemula, tips dan mempercepat loading blog dan juga cara mempercepat loading blog lanjutan. Sedikit informasi seo kepanjangannya search engine optimization, fungsinya agar blog kita bisa masuk di halaman google search, jadi ketika ada yang mencari artikel yang berkaitan dengan judul artikel yang telah kita buat. 

Maka blog kita akan muncul, walaupun tidak dihalaman pertama, bisa jadi dihalaman kedua dan seterusnya. Seiring waktu berjalan, jika artikel kita sudah sering dikunjungi. Maka nantinya akan masuk kehalaman pertama dari google search, sesuai dengan kata kunci yang dimasukan orang ke dalam mesin pencari google search. Terima kasih telah berkunjung dan semoga artikel diatas bisa bermanfaat untuk anda.

Cara membuat google custom search diblog

Cara membuat google custom search di blog, yang berfungsi untuk memudahkan pengunjung untuk mencari artikel yang ada diblog. Cara menggunakannya, masukan kata kunci tulisan ke dalam kotak search, lalu enter atau klik tombol search, maka artikel2 yang berhubungan dengan artikel yang dicari akan muncul. Contoh gambar kotak search google custom.

Seperti contoh gambar diatas, ada tulisan Google^TM Pencarian Kustom didalam kotak penelusurannya. Untuk lebih jelasnya tentang cara membuat google custom search di blog. Ikuti langkah-langkah dibawah ini.

1. Login ke blogger. Selanjutnya kunjungi situs ini https://www.google.com/cse/
2. Lalu pada situs itu, Masukan alamat blog kamu. Dan atur languange nya ke bahasa indonesia(jika ingin seperti contoh gambar diatas) untuk bahasa inggris tulisannya kira-kira akan menjadi seperti ini Google^TM Custom Search. Silakan diatur sesuai dengan yang diinginkan. Lalu klik Create.

3. Setelah itu klik get code dan copi kode scriptnya.
4. Selanjutnya, kembali ke blogger. Pilih pengaturan Tata Letak > klik Tambahkan Gadget > HTML/Javascript dan pastekan kode script dari google tadi.
5. Save dan tempatkan gadget sesuai dengan yang kalian inginkan. Selesai.

Untuk merubah tampilan kotak google custom search, kunjungi lagi situs  https://www.google.com/cse/ lalu  klik search engine yang telah dibuat tadi, dan pada pilih Look and Feel. Nah disitu ada pengaturan Layout, Themes, Customize, dan Thumbnail silakan atur sesuai dengan yang dinginkan. Setelah selesai memodifikasi tampilannya, klik Save & Get Code dan pastekan lagi ke Gadget HTML/Javascript di pengaturan Tata Letak tadi. 

Jika ingin hasil pencarian dari kotak seacrh google custom terbuka dihalaman tab baru. Pada pengaturan layout di situs google custom tadi, pilih Google Hosted dan pilih New Window. Jangan lupa disave dan ambil/copi kode scriptnya, dan pastekan kembali ke gadget HTML di blogger.
Untuk pembuatan kotak penelusuran yang lebih mudah, silahkan baca di cara membuat kotak penelusuran. Selesai. Semoga Bermanfaat.

Cara menuliskan rumus di microsoft word

Kali ini saya akan coba bagikan artikel tentang Cara menuliskan rumus di microsoft office word, seperti rumus matematika dan lain-lainnya. Caranya cukup sederhana, kita hanya perlu memilih format rumus yang telah disediakan oleh microsoft word dan mengeditnya sesuai dengan yang kita inginkan. Untuk lebih jelasnya silakan ikuti langkah-langkah dibawah ini.

1. Silakan buka program microsoft word, lalu klik Insert pada Tab atas disebelah HOME.
2. Lalu klik Equation letaknya berada dipojok kanan atas. Contoh gambar:

3. Dan pilih salah satu format rumus lalu edit sesusi dengan yang kamu inginkan. Selesai.

Untuk mengedit rumus, klik rumus lalu ganti dengan kode yang diinginkan, untuk menambahkan kode baru, klik rumus yang sudah dibuat. Lalu klik tab Design yang ada dipojok atas menu bar. dan cari kode rumus baru yang ingin dimasukan. Untuk memindahkan posisinya, blok rumus yang sudah dibuat > Cut > dan pastekan ketempat yang diinginkan. Seperti contoh gambar dibawah ini, rumus diletakan ditengah-tengah tulisan.

Jika ingin menempatkan rumus tidak ditengah2 tulisan kalimat seperti gambar diatas atau diletakan dibaris baru, klik rumus yang sudah dibuat, lalu klik HOME pada bagian atas kiri menu word dan klik paragraph pada bagian align, lalu pilih posisi yang diinginkan, selesai. Semoga Bermanfaat.

Cara menghilangkan widget dihomepage

Cara menghilangkan widget dihomepage atau halaman awal blog. Widget akan dihilangkan atau disembunyikan pada halaman homepage blog saja, widget tersebut hanya akan muncul di halaman posting blog. 

Dengan begitu kita dapat menghemat ruang dari halaman homepage blog. Untuk lebih jelasnya tentang cara menghilangkan widget tertentu dihalaman awal blog, silakan ikuti langkah-langkah dibawah ini.

Pertama yang harus dilakukan adalah menentukan widget mana yang akan kita sembunyikan dan Mengambil kode ID nya.

Contoh: Widget dengan judul Random Post. Maka kita cari kode ID dari widget yang berjudul Random post. Caranya: Login ke blogger, pilih pengaturan template > klik edit HTML > Lalu cari kode Random Post(Gunakan Ctrl F untuk memudahkan pencarian). Seperti contoh gambar dibawah kode id dari widget Random Posts adalah HTML4

Setelah menemukan kode ID dari widget yang akan disembunyikan. Sekarang cari kode </head> lalu masukan kode berikut ini diatas </head>

<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
#HTML4{display:none;}
 </b:if> </b:if> </style>

Terakhir Save template, selesai.

Kode #HTML4 adalah kode ID dari widget yang akan disembunyikan dan kode display:none berfungsi untuk menyembunyikan widgetnya. Widget tersebut akan hilang dari halaman awal blog, dan akan muncul pada halaman posting blog.

Silakan mencoba dengan widget2 yang lainnya. Yang terpenting adalah kita harus mencari terlebih dahulu kode id dari widget yang akan disembunyikan dari halaman awal blog, lalu meletakannya diatas </head> dengan format kode seperti diatas. Selesai.

Cara membuat tabel diblog

Cara membuat tabel diblog. Akan kita mulai dari Tabel sederhana terlebih dahulu.
Silakan buka entri baru, lalu klik pada bagian HTML disebelah Compose.
Selanjutnya ketikan kode berikut ini.

<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>

Setelah itu klik bagian Compose, Maka hasilnya akan menjadi seperti ini.

1

2

3

Selanjutnya membuat tabel 2 baris

<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>

<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>

Hasilnya

1	2	3
4	5	6

Dari contoh diatas, kita dapat melihat bahwa kode tr digunakan untuk membuat tabel ke bawah, sedangkan kode td digunakan untuk tabel kesamping. Jadi jika ingin menambahkan jumlah tabel, silakan tambahkan kode tr dan kode td sesuai dengan keinginan.

Selanjutnya membuat Tabel dengan warna background, lebar tabel serta warna tulisan dengan cara menambahkan kode bgcolor="red" border="1" style="color: white; width: 400px;" pada bagian <table>. Contoh:

<table bgcolor="red" border="1" style="color:white;width:400px;">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>

Hasilnya

1	2	3
4	5	6

Sekarang kita coba menggunakan tabel dengan judul diatasnya, dan juga mengatur lebar disetiap judul tabel. Tambahkan kode <th>Judul</th> Contoh:

<table bgcolor="red" border="1" style="color: white;">
<tbody>
<tr>
<th width="40">No</th>
<th width="400">Nama</th>
<th width="400">Kelas</th>
</tr>
<tr>
<td>1</td>
<td>Fandra Juani</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>Juani Fandra</td>
<td>6</td>
</tr>
</table>

Hasilnya

No	Nama	Kelas
1	Fandra Juani	3
2	Juani Fandra	6

Bisa juga dengan menggunakan background yang berbeda. Contoh:

<table bgcolor="white" border="1" style="color: black;">
<tr>
<th bgcolor="blue" width="40">No</th>
<th bgcolor="green" width="400">Nama</th>
<th bgcolor="red" width="400">Kelas</th>
</tr>
<tr>
<td>1</td>
<td>Fandra Juani</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>Juani Fandra</td>
<td>6</td>
</tr>
</table>

Hasilnya

No	Nama	Kelas
1	Fandra Juani	3
2	Juani Fandra	6

Untuk mengatur posisi tulisan kamu bisa gunakan Tool Alignment yang ada dipilihan tool pada saat kita menulis di entri. Sebenarnya masih banyak kode dengan fungsi lain yang dapat digunakan untuk membuat tabel diblog, insyaallah nanti akan saya coba buat diartikel lainnya. Silakan dicoba sendiri dan Semoga bisa bermanfaat untuk anda.

Cara merubah tampilan dan posisi tanggal di blog

Artikel kali ini saya akan coba bagikan cara merubah tampilan tanggal diblog dengan menambahkan kode css, serta merubah posisi tanggal ke bagian bawah judul posting atau bisa juga kita pindahkan ke sebelah kanan judul posting.

Seperti contoh gambar diatas, tampilan tanggal sudah saya modifikasi jadi berwarna putih dengan background warna biru, serta posisinya yang berada disebelah kanan judul posting blog. Cara membuatnya, ikuti langkah² dibawah ini.

1. Login ke blogger, ke pengaturan tata letak > desainer template > tingkat lanjut > tambahkan Css. Lalu masukan kode ini kedalamnya.
h2.date-header{
margin:3px 0px 0px 0px;
float: right;
z-index: 99;
background-image: -moz-linear-gradient(center top , #107cde 40%, #004d94 100%);
box-shadow:0px 10px 10px #aaaaaa;}
2. Terapkan ke blog, selesai.

Keterangan kode:

• margin: untuk mengatur spasi atas(3px) kanan(0px) bawah(0px) kiri(0px) tanggal.
• float: right; menempatkan tanggal diposisi kanan sebelah judul posting.
• z-index: 99; gunanya agar tanggal terlihat.
• background-image: fungsinya untuk mengatur warna background tanggal
• box-shadow: warna bayangan diluar kotak tanggal.

---

Selanjutnya adalah menempatkan tanggal dibawah judul posting dengan posisi sebelah kanan, contohnya seperti gambar dibawah ini.

---

Cara membuatnya, ikuti langkah-langkah dibawah ini:

1. Login ke blogger, kepengaturan template. Klik edit HTML dan cari kode dibawah ini.
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><span><data:post.dateHeader/></span></h2>
</b:if>
2. Kamu akan menemukan 3 kode yang sama dengan kode diatas, Cut atau potong kode yang pertama. Lalu pastekan di Notepad.
3. Selanjutnya cari kode <div class='post-header-line-1'/>. Setelah ketemu, pastekan kode dari langkah 1 tadi ke bawah <div class='post-header-line-1'/>.
4. Save template Selesai.

Catatan: ada 2 kode <div class='post-header-line-1'/> yang ada ditemplate, pilih yang kedua. Lalu pastekan kode dari langkah 1 kebawahnya. Jangan lupa juga untuk mengatur kode css dari tampilan tanggalnya, seperti yang tertera di Keterangan kode. Khusus untuk kode float:right; jika kamu ingin menempatkan tanggal disebelah kiri dibawah judul posting. ganti kode float:right; dengan kode float:left;.

Semoga Bermanfaat.

Cara membuat tombol sosial media share diblog

Cara membuat sosial media share, seperti facebook, google+, twitter dan lain2nya diblog. Tombol sosial media share dapat kita tempatkan dibawah judul posting atau dibawah posting. Dan dapat juga ditempatkan diwidget HTML/javascript di bagian sidebar blog.

Cara membuat sosial media share di blog, ikuti langkah-langkah dibawah ini.

1. Login ke blog, lalu pilih pengaturan Template.
2. Klik edit HTML dan cari kode </head> lalu masukan kode berikut ini diatasnya.
<script src="http://w.sharethis.com/button/buttons.js" type="text/javascript"></script>
<script type="text/javascript">stLight.options({onhover:false , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>
3. Save template. Selesai.

Setelah menempatkan kode script. Sekarang kita akan coba memasukan kode share di bagian2 blog, seperti di bawah judul posting, diwidget sidebar atau dibawah posting blog. Silakan dipilih salah satu. Caranya seperti dibawah ini.

Sosial media share dibawah judul posting

1. Ke pengaturan template, klik edit hmtl dan cari kode <div class='post-header-line-1'/>
2. Kode <div class='post-header-line-1'/> ada 2,  piih yang nomor 2 lalu masukan kode share button ini dibawah nya.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<p align='left' class='kode-share-buttons'>
<keterangan>Bagikan Artikel >>></keterangan>
<span class='st_facebook_hcount' displayText='Facebook'/>
<span class='st_plusone_hcount' displayText='Google +1'/>
<span class='st_twitter_hcount' displayText='Tweet'/>
<span class='st_pinterest_hcount' displayText='Pinterest'/>
<span class='st_digg_hcount' displayText='Digg'/>
<span class='st_stumbleupon_hcount' displayText='StumbleUpon'/>
<span class='st_fblike_hcount' displayText='Facebook Like'/>
</p></b:if>
3. Silakan gunakan kode share yang kalian inginkan, dan untuk tulisan Bagikan Artikel >>> Kamu bisa ganti dengan kata yang kamu inginkan. Setelah itu save template, selesai.

Sosial media share dibawah posting

1. Ke pengaturan template, klik edit hmtl dan cari kode <data:post.body/>
2. Kode <data:post.body/> ada 3,  piih yang nomor 3 lalu masukan kode share button dibawah nya.
3. Kode kode share button yang digunakan sama seperti kode Sosial media share dibawah judul posting
4. Save template, selesai.

Sosial media share di widget atau sidebar

1. Kepengaturan tata letak, Klik Tambahkan widget/gadget > HTML/Javascipt.
2. Lalu masukan kode share button yang digunakan sama seperti kode Sosial media share dibawah judul posting
3. Save gadget/widget, lalu tempatkan sesuai dengan yang kalian inginkan, selesai.

Dan yang terakhir adalah menambahkan  kode css untuk menambah tampilan dari tombol sosial media share. Caranya.

1. Kepengaturan TATA LETAK. Klik desainer template > tingkat lanjut > tambahkan css. Lalu masukan kode ini kedalmnya.
.kode-share-buttons{border-top:1px dashed #ccc;border-bottom: 1px dashed #ccc;padding: 10px;}
keterangan {color:#000;font-weight:bold;margin-right:20px;}
2. Terapkan ke blog selesai.

Semoga Bermanfaat.

Cara membuat icon sendiri dengan mudah

Tutorial kali ini saya akan coba bagikan tips dan trik tentang cara membuat icon sendiri dengan mudah, menggunakan program microsoft office PowerPoint. Icon atau lambang gambar biasanya digunakan untuk logo website atau blog, ada juga untuk icon disebelah tulisan menu, bahkan digunakan juga sebagai menu.

Contohnya seperti gambar dibawah ini:

Gambar diatas adalah hasil dari pembuatan icon di PowerPoint, yang disave dalam format PNG, agar background icon tetap transparant. Untuk lebih jelasnya tentang cara pembuatan icon di microsoft PowerPoint. Ikuti langkah - langkah dibawah ini.

1. Silakan buka program PowerPoint. Lalu pilih bagian Insert.
2. Selanjutnya pilih tulisan Shape dan pilih bentuk gambar yang kita inginkan.
3. Setelah gambar nya sudah ada, klik gambar tersebut dan pilih Format dibagian atas bar powerpoint.
4. Lalu edit gambar itu sesuai dengan yang kita inginkan.
5. Untuk menyimpan gambar, klik Kanan gambar tersebut dan pilih Save as picture lalu save dalam format PNG. Selesai.

Contoh gambar icon yang saya buat. Icon pertama menggunakan satu gambar awan dan Icon kedua menggunakan 2 gambar gambar awan dan matahari.

Untuk membuat icon dengan 2 gambar, silakan buat 2 gambar di powerpoint, lalu blok ke 2 gambar setelah itu baru Save As Picture. Selesai. Jika kamu ingin menggunakan icon dengan ukuran yang sama, kamu bisa gunakan photoshop, caranya bisa dilihat di artikel cara membuat icon untuk website.

Untuk mencoba hasil gambar yang telah kamu buat diblog. Kamu bisa baca artikel mengganti tulisan beranda posting lama baru yang letaknya dibawah posting dengan gambar. Tapi sebelumnya upload terlebih dahulu gambar kamu ke blog dan ambil urlnya, caranya baca di cara upload dan ambil url gambar.

Itulah sedikit tips dan trik dari saya dalam membuat icon sendiri dengan mudah menggunakan program microsoft office PowerPoint yang dapat digunakan untuk mendesain icon blog atau website anda sendiri. Semoga bisa bermanfaat untuk anda.

Cara merapikan tulisan hasil copi internet

Cara merapikan tulisan hasil copi internet di microsoft word dengan menggunakan program notepad. Jika kita mencopi tulisan dari internet/website atau blog orang, lalu langsung kita pastekan ke microsoft word. Maka format tulisan dari internet pun akan ikut masuk ke microsoft word. Seperti contoh gambar dibawah ini. Sebelum dan sesudah dirapikan.

Dari gambar diatas kita bisa melihat, tulisan hasil copian internet jika langsung kita pastekan di microsoft word, maka tulisan aslinya pun akan ikut ke microsoft word. Berbeda dengan hasil copian internet jika sudah di pindahkan ke program notepad, lalu baru kembali ke microsoft word. Maka format tulisan akan sama yaitu format font Calibri dengan ukuran 11, tidak ada format lain. Sehingga memudahkan kita untuk merapikannya. 

Langsung saja kebagian utama. Cara merapikan tulisan hasil copi internet.

1. Pertama, silakan copi tulisan yang ada diinternet. Diwebsite atau diblog orang. Selanjutnya pastekan di Microsoft word.
2. Dari hasil copian di microsoft word, copi tulisan yang akan dirapikan.
3. Lalu pastekan ke program Notepad(Start > All Program > Accessories > Notepad)
4. Setelah itu copi tulisan yang ada dinotepad, dan pastekan kembali ke Microsoft Word. Selesai.

Kekurangan dari format ini adalah notepad tidak membaca gambar, jadi yang terbaca hanya tulisan saja. Bagaimanapun bentuk format tulisan dari sebuah tulisan, jika sudah masuk ke notepad. Maka tulisan tersebut akan berformat font Calibri ukurannya 11. Jadi istilahnya notepad ini gunannya untuk menetralisir format tulisan. 

Memang tidak sepenuhnya rapi, masih harus dirapikan sendiri tulisan di microsoft word. Tapi setidaknya format2 tulisan yang berwarna-warni dari link2 blog orang akan hilang. Jadi tidak harus mengganti warna link satu persatu dimicrosoft word. Semoga Bermanfaat.

Cara membuat background warna transparan

Background warna transparan, yang berarti background dengan menggunakan warna transparan, tetapi background aslinya juga terlihat. Jadi background awal juga terlihat, misalkan background awal kita menggunakan gambar, dan background warna transparan kita warnanya hitam. Maka warna transparan hitam dengan background gambar juga akan terlihat.

Seperti contoh gambar diatas,background dasar yang digunakan adalah background gambar, dan background trasnparanya berwarna hitam. Tapi warna hitam tersebut tidak sepenuhnya hitam. Sedikit hitam dan background gambar awalnya tetap terlihat. Berikut ini adalah beberapa kode warna background yang dapat digunakan untuk membuat background warna transparant.

background:rgba(0,0,0, 0.3);

background:rgba(0,0,0, 0.8);

Sebelumnya saya jelaskan sedikit tentang kode diatas.

• Ketiga kode awal digunakan untuk mengatur kode warna. kode warna 0,0,0 adalah warna dasar Hitam.
• Untuk kode terakhir 0.3 dan 0.8 digunakan untuk mengatur ketebalan dari warna hitam 0,0,0 tadi. Semakin besar kode terakhir, maka akan semakin hitam. Kode terakhir ini hanya sampai kode 1. Contoh:0,0,0, 1.

Untuk mengganti dengan warna lain, kamu bisa coba kode dibawah ini.

Untuk warna merah - background:rgba(204,0,0, 0.6);

Untuk warna pink - background:rgba(204,0,204, 0.8);

Untuk warna biru - background:rgba(0,0,204, 0.8);

Untuk warna Hijau - background:rgba(0,204,0, 0.8);

Untuk warna Kuning - background:rgba(204,204,0, 0.8);

Untuk warna Orange - background:rgba(255,102,0, 0.8);

Dan masih banyak lagi warna yang lainnya. Untuk melihat kode warna, kamu bisa lihat diphotoshop, lalu klik pada bagian set foreground color(gambar kotak untu ganti warna). Lalu lihat kode pada bagian RGB nya.

Seperti contoh gambar diatas, pertama klik dulu bagian kotak yang sudah saya beri tanda merah sebelah kiri, maka akan terbuka Color Picker, dan copi 3 kode RGB yang bertanda kotak merah itu untuk digunakan diwebsite.

Dan yang terakhir adalah cara penerapannya di blogger. Sebagai contoh kita akan coba mengedit pada bagian halaman posting blog. Caranya ikuti langkah-langkah dibawah ini.

1. Login ke blogger, pada halaman Dasbor pilih pengaturan Tata Letak.
2. Selanjutnya klik Desainer Template > Tingkat Lanjut > Tambahkan Css. Dan masukan kode halaman posting ke dalamnya.
.post{border:1px solid #ddd; background:rgba(0,204,0, 0.5);}
3. Dan lihat perubahannya, background nya itu saya beri warna hijau, dengan ketebalan warna 0.5 hasilnya seperti gambar dibawah ini.

Untuk mengatur bagian lainnya, coba kamu baca di artikel cara mengganti background blog dengan gambar. Disana ada beberapa kode bagian blog yang dapat kamu gunakan. Semoga Bermanfaat.

Cara buat kotak bayangan diblog

Cara membuat kotak bayangan diblog. Maksudnya adalah kita dapat membuat bayangan pada kotak yang ada diblog seperti pada bagian sidebar, posting, header dan juga pada bagian lain-lainnya. Contoh kotak bayangan seperti dibawah ini.

---

Untuk cara menerapkannya ke blog, kita coba edit pada bagian sidebar blog yang ada disebelah kanan/kiri blog. Caranya ikuti langkah-langkah dibawah ini.

---

1. Login keblogger, lalu kepengaturan Tata Letak.
2. Selanjutnya klik Desainer Template > Tingkat lanjut > Tambahkan Css. Dan masukan kode ini kedalamnya.
.sidebar .widget {box-shadow: 0px 15px 15px #1780dd;}
3. Maka hasilnya akan seperti contoh kotak bayangan diatas.
4. Dan klik Terapkan ke blog, untuk menyelesaikan editan.

---

Berikut ini beberapa contoh kode box-shadow atau kotak bayangan yang dapat anda gunakan diblog.

---

box-shadow: 0px 0px 15px #1780dd;

box-shadow: 5px 5px 5px#1780dd;

box-shadow: -5px -5px #1780dd;

box-shadow: inset 0 0 10px;

box-shadow: 5px 5px 5px 5px #1780dd;

Silakan dicoba sendiri diblog anda, dengan menggunakan kode2 diatas. Untuk mengedit pada bagian yang lain silakan baca artikel cara mengganti blog dengan gambar atau cara membuat tulisan bayangan diblog disana ada kode2 bagian dari blog, yang dapat anda gunakan juga untuk diedit. Itulah sedikit cara mendesain blog menggunakan kode box-shadow atau kotak bayangan yang dapat digunakan diblog. Semoga bisa bermanfaat untuk anda.

Cara membuat background gradient 2 warna

Background gradient fungsinya untuk membuat background warna dengan menggunakan 2 warna sekaligus, dengan perbandingan persen disetiap warnanya. Jadi misalkan kita ingin menggunakan warna putih dan biru dibackground blog kita. Maka kita dapat mengatur warna putih dibagian atas dan warna biru dibagian bawah. Berbeda dengan pengaturan warna biasa yang hanya satu warna.Contoh penggunaannya seperti dibawah ini.

---

Background 1 warna dengan menggunakan warna biru.

---

Warna Biru Saja

---

Background 2 warna dengan menggunakan warna biru dan putih.

---

Warna Biru dan Putih

Selanjutnya adalah cara membuat dan menerapkannya diblog. Sebagai percobaan kamu bisa coba edit warna background dari halaman posting blog. Ke pengaturan tata letak > klik Desainer Template > Tingkat Lanjut > Tambahkan Css. Dan masukan kode background posting berikut kedalamnya.

.post{
background: -moz-linear-gradient(center top , #ffffff 40%, #1780dd 100%);}

Lalu lihat perubahan background halaman posting, warna putih akan berada diatas dan biru ada dibagian bawah.

---

Berikut jenis2 pengaturan warna gradient 2warna yang dapat kita gunakan.

---

Atas - Bawah
background: -moz-linear-gradient(top , #ffffff, #1780dd);

Kiri - Kanan
background: -moz-linear-gradient(left , #ffffff, #1780dd);

Warna Berhenti putih-biru-putih-biru-putih
background: -moz-linear-gradient(left , #ffffff, #1780dd, #ffffff, #1780dd, #ffffff);

Warna Berhenti putih-biru-putih-biru-putih dengan persen%
background: -moz-linear-gradient(left , #ffffff, #1780dd 5%, #ffffff, #1780dd 95%, #ffffff);

Warna putih dikiri-kanan dan biru ditengah
background: -moz-radial-gradient(circle, #1780dd, #ffffff);

Posisi dan Ukuran
background: -moz-radial-gradient(80% 20%, closest-corner, #1780dd, #ffffff);

Ukuran: 80% untuk warna putih dan 20% untuk warna biru
Posisi: closest-corner pada bagian atas bisa diganti dengan kode

closest-side
closest-corner
farthest-side
farthest-corner
contain
cover

Silakan berkreasi sendiri, dengan kode2 diatas dalam mendesain blog anda agar terlihat lebih menarik. Untuk cara penggunaan dibagian lain, seperti pada bagian header, sidebar atau keseluruh body halaman blog, kamu bisa baca di artikel cara mengganti background blog dengan gambar diartikel itu, ada kode dari bagian2 blog, yang dapat kamu gunakan untuk diberi background 2 warna seperti contoh diatas.
Catatan: Gradient 2 warna ini tidak bisa dilihat di browser google chrome, sebabnya saya belum tau, jika sudah tau saya akan tambahkan di artikel ini, untuk di mozilla bisa, warna gradient 2 warna terlihat.Semoga bisa bermanfaat untuk anda.

Menu gambar dengan posisi sembarangan

Menu gambar dengan posisi sembarangan. Maksudnya adalah membuat menu menggunakan gambar, dengan posisi gambar yang tidak beraturan. Gambar bisa ditempatkan diatas, bawah, kanan, kiri sesuai dengan yang kita inginkan. Contohnya seperti dibawah ini.

• 

• 

• 

• 

• 

---

Cara membuatnya, ikuti langkah-langkah dibawah ini.

---

1. Login ke blogger, dari halaman dasbor pilih pengaturan tata letak.
2. Dan klik Tambahkan Gadget di bawah header atau disidebar. Dan pilih HTML/Javascript.
3. Selanjutnya copi kode HTML dibawah ini, dan pastekan didalam Gadget HTML/Javascript tadi.
<div id="satu1">
<ul>
<li><a href="URL Menu"><img src="URL dari Gambar" /></a></li>
</ul>
</div>

<div id="dua2">
<ul>
<li><a href="URL Menu"><img src="URL dari Gambar" /></a></li>
</ul>
</div>

<div id="tiga3">
<ul>
<li><a href="URL Menu"><img src="URL dari Gambar" /></a></li>
</ul>
</div>

<div id="empat4">
<ul>
<li><a href="http://fandrajuani.blogspot.com/p/daftar-isi_12.html" title="Daftar isi"><img alt="Daftar Tutorial Desain Blog" height="74" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg21muGDri83a6mAHdDP_umFbFU8uvipV01RhvjJoEkrdx9JKsujVjL6C1J8d8IvihL4quatPqOLrQh6xhV0sY8hH2lSvjIrm6HKLztOj0r_zA24i3-3HVPQMJ0eu5pqAi8BCbQTiit1Vqc/s133/Daftar%2520Isi.PNG" title="Daftar isi" width="133" /></a></li>
</ul>
</div>

<div id="lima5">
<ul>
<li><a href="URL Menu"><img src="URL dari Gambar" /></a></li>
</ul>
</div>
4. Selanjutnya, simpan HTML/Javascript.

Keterangan kode:

• Silakan isi URL Menu dengan URL/Halaman web anda.
• Silakan isi URL dari Gambar dengan URL dari gambar anda.
• Contoh URL bisa dilihat di div id="empat4" 

---

Setelah itu ke tahap pengaturan posisi gambar, caranya klik Desainer Template(masih pada pengaturan Tata Letak). Lalu Klik Tingkat Lanjut > Tambahkan Css. Dan masukan kode CSS dibawah ini kedalamnya.

---

#satu1{background:transparent;margin:-10px 0px 0px -100px;float:left;}
#satu1 ul{list-style:none}

#dua2{background:transparent;margin:-40px 0px 0px 0px;float:left;}
#dua2 ul{list-style:none}

#tiga3{background:transparent;margin:-10px 0px 0px 0px;float:right;}
#tiga3 ul{list-style:none}

#empat4{background:transparent;margin:40px -390px 0px 0px;float:right;}
#empat4 ul{list-style:none}
#empat4 img{position:relative;-moz-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-webkit-transition:all .1s ease-in-out;transition:all .4s ease-in-out}
#empat4 img:hover{-o-transform:scale(1) rotate(720deg);-moz-transform:scale(1) rotate(720deg);-webkit-transform:scale(1) rotate(720deg)}

#lima5{background:transparent;margin:-40px -160px 0px 0px;float:right;}#lima5 ul{list-style:none}

---

Keterangan Kode:

---

• margin:40px -390px 0px 0px; fungsinya untuk mengatur gambar ke posisi yang kita inginkan, formatnya kode tersebut adalah 40px(atas) -390(kanan) 0px(bawah) 0px(kiri).
• float:right;  dan float left fungsinya untuk memudahkan kita menempatkan gambar ke bagian kiri atau kanan
• #empat4 img{ dan #empat4 img:hover{ kode tambahan agar gambar berputar ketika disentuh mouse.

Atur posisi dari gambar tersebut sesuai dengan yang kalian inginkan.  Setelah selesai mengatur posisi gambar, baru lah klik Terapkan Ke Blog, Selesai.

Dengan memasukan kode Css ke bagian Tambahkan Css, kita dapat melihat perubahan posisi gambar secara langsung, ketika kita merubah nilai dari kode Css. Contoh gambar penempatan kode Css didalam ruang Tambahkan Css.

Silakan baca juga artikel tentang cara membuat menu blog dengan gambar, yang dapat dijadikan pilihan dalam pembuatan menu gambar diblog. Semoga bisa bermanfaat untuk anda.