• pasang iklan

Cara mengatur tampilan dan posisi tanggal di blog

09/02/17
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.

Cara merubah tampilan dan posisi tanggal blog

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 langkah2 dibawah ini.

    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;}
    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 merubah tampilan dan posisi tanggal blog

Cara membuatnya, ikuti langkah-langkah dibawah ini:

    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>
    Kamu akan menemukan 3 kode yang sama dengan kode diatas, Cut atau potong kode yang pertama. Lalu pastekan di Notepad.
    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'/>.
    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;.

Cara merubah Tampilan background blog dengan gambar

Cara mengganti background blog dengan gambar, secara keseluruhan. Background akan terlihat disemua bagian yang ada diblog. Contoh background menggunakan gambar bisa dilihat di artikel background berbeda dihalaman berbeda. Untuk lebih jelasnya ikuti langkah-langkah dibawah ini.

    Login ke blogger, dari halaman dasbor pilih pengaturan Tata Letak.
    Dan pilih Desainer template > Tingkat Lanjut > Tambahkan CSS dan masukan kode ini didalamnya.
    body {
    background: url(http://themes.googleusercontent.com/image?id=1iJBX-a-hBX2tKaDdERpElPUmvb4r5MDX9lEx06AA-UtZIQCYziZg3PFbmOyt-g2sH8Jo) repeat-x fixed top center;}
    Terapkan ke blog selesai.

Keterangan kode:

    background: url( adalah url dari backgorund gambar yang akan digunakan.
    repeat-x gambar mengulang kesamping. bisa diganti dengan repeat-y untuk gambar mengulang ke bawah atau no-repeat gambar tidak berulang.
    fixed gambar akan tetap pada posisinya, walaupun halaman blog di scroll ke bawah.
    top center posisi gambar. Top bisa diganti dengan bottom dan center bisa diganti dengan right atau left.
    jika menggunakan backgorund gambar keseluruh bagian blog. gunakanlah ukuran gambar yang besar, contoh: 1400 x 900

Pada dasarnya kode body digunakan untuk mengatur seluruh background blog. Tapi jika tidak bisa jalan ditemplate kamu, coba ganti kode body dengan kode content. Contoh:

.content {
background: url(http://themes.googleusercontent.com/image?id=1iJBX-a-hBX2tKaDdERpElPUmvb4r5MDX9lEx06AA-UtZIQCYziZg3PFbmOyt-g2sH8Jo) repeat-x fixed top center;}

Sekarang coba lihat tampilan blog kamu. Jika background gambar tidak sepenuhnya terlihat. Atau background tertutup oleh background warna. Itu dikarenakan template yang kamu gunakan, sudah menggunakan background warna.

Contoh: Misalkan kamu pasang background gambar, tapi pada bagian headernya tertutup background warna putih, agar background warna putih itu hilang dan terganti dengan gambar. Gunakan kode #Header Atur backgroundnya menjadi transparent;. Seperti ini > #Header { background:transparent; }

Tempatkan kode #Header { background:transparent; } seperti cara dari langkah 1-3 diatas. Dibawah ini adalah kode-kode dari bagian blog yang saya tau, mulai dari header, tab, sidebar, sampai footer dan juga kode2 lainnya, yang bisa kamu gunakan untuk mengatur background dari halaman blog kamu. Berikut kodenya:

 Untuk bagian header

    #Header { background:transparent; }
    .header h1  { background:transparent; }
    .body-fauxcolumn-outer .cap-top { background:transparent; }

Untuk bagian posting

    .post-body { background:transparent; } hanya pada bagian tulisan posting.
    .post { background:transparent; } bagian posting keseluruhan.
    .post-outer { background:transparent; }  bagian posting sampai keluar
    .main-inner { background:transparent; } bagian posting dan sidebar
    #blog-pager { background:transparent; } pada bagian tulisan beranda, posting lama, posting lebih baru

Untuk bagian tab

    .tabs-outer .PageList { background:transparent; }

Untuk bagian sidebar

    .sidebar .widget { background:transparent; } hanya pada bagian widgetnya saja.
    .sidebar { background:transparent; } seluruh bagian sidebar

Bagian footer.

    .footer-fauxborder-left { background:transparent; }
    .footer-outer { background:transparent; }

kode-kode lainnya, jika diperlukan.

    .content-outer { background:transparent; } bagian halaman blog. dari header sampai ke footer.
    .content-inner { background:transparent; } bagian halaman blog. dari header sampai ke footer. Untuk mengatur warna tulisan juga bisa.
    .body-fauxcolumn-outer .fauxcolumn-inner { background:transparent; }
    .body-fauxcolumn-outer .cap-top .cap-left { background:transparent; }

Jadi jika ingin menggunakan background gambar diseluruh bagian blog. Cukup menggunakan satu gambar background pada bagian body/content saja, dan yang lainnya di buat menjadi transparent;. Silakan berkreasi sendiri agar sesuai dengan yang kalian inginkan. Semoga bisa bermanfaat untuk anda.

Cara mengatur tampilan blockquotes diblog

Blockquotes biasanya digunakan untuk memperjelas tulisan, seperti keterangan, tips, trik, saran, atau hal terpenting yang harus dibaca/diingat oleh pembaca. Dengan menggunakan blockquote kita dapat membuat tulisan yang berbeda dengan tulisan yang lainnya, agar lebih mudah untuk dibaca.

Cara merubah tampilan blockquotes diblog
Untuk lebih jelasnya tentang cara merubah tampilan blockquotes. Ikuti langkah-langkah dibawah ini.

Cara merubah tampilan blockquotes.
Ke pengaturan Tata Letak > Desainer Template > Tingkat Lanjut > Tambahkan CSS. Lalu masukan kode ini kedalamnya.
.post blockquote {
background:#f9f9f9;
padding:10px;
margin:15px 0px 15px 0px;
border-left: 10px solid #0b5394;
box-shadow:0px 5px 5px #aaaaaa;
border-top:1px solid #ddd; }
Setelah itu, klik Terapkan ke blog, Selesai.

Cara menggunakan blockquotes di halaman posting blog.
Buatlah entri baru, dan menulis seperti biasa. Selanjutnya Blok tulisan yang akan diberi Blockquotes, lalu tekan tanda Quotes(Tanda " disebelah kiri tanda Tx) yang ada di menu bagian atas entri. Setelah itu klik pratinjau untuk melihat hasilnya. Selesai.

Cara diatas merupakan contoh sederhana dalam merubah tampilan Blocquotes. Kita dapat juga menggunakan gambar disamping kiri dan kanannya. Contohnya seperti dibawah ini.
cara merubah tampilan blockquotes diblog
Untuk memasukan gambar kita harus menambahkan kode gambarnya juga. Codenya seperti dibawah ini.
.post blockquote {
background: url(http://2.bp.blogspot.com/-JFHpSpy5aCE/UoA8G_d-owI/AAAAAAAABKo/fCSr1BlWiRE/s1600/a.png) no-repeat top left;
text-indent: 65px; color:#6299E4; }
.post blockquote div {
display: block; background: url(http://4.bp.blogspot.com/-PEebql5w7PI/UoA8G4mFANI/AAAAAAAABKs/YeT4haCXQIY/s1600/b.png) no-repeat bottom right;
padding-bottom:10px; }
Tempatkan kode tersebut seperti cara sebelumnya di dalam Kotak Tambahkan CSS, Selesai. Itulah sedikit cara desain blog tentang cara merubah tampilan blockquotes yang dapat digunakan sebagai tambahan piihan dalam menulis artikel di blog. Silakan dibaca artikel lainnya seperti cara mengganti background blog dengan gambar atau cara merubah tampilan sidebar blog. Dan juga artikel lainnya. Semoga bisa bermanfaat untuk anda.

Cara Agar loading blog lanjutan Lebih Cepat

Untuk mempercepat loading blog pertama kita harus test kecepatan blog kita. Dengan cara mengunjungi situs http://gtmetrix.com/ atau https://developers.google.com/speed/pagespeed/insights dan lihat berapa skor kecepatan blog yang kalian dapatkan dari situs tersebut. Selanjutnya, ikuti langkah2 dibawah ini.

    Menambahkan attribute width dan height.

Untuk bagian posting, jika mengatur gambar ke small, medium, large atau x- large. Maka otomatis gambar itu sudah ada attribute width dan height. Jika Original attribute width dan height belum ada. Begitu juga dengan gambar yang kita masukan pada bagian blog lainnya. Seperti header, sidebar, footer, widget dan lain-lainnya. Contoh penambahan kode attribute width dan height:

    Untuk kode HTML
    <img src='https://lh5.googleusercontent.com/-LeOgiup3fqM/Ul7UfgCMxSI/AAAAAAAAA9w/pK-pvuyLHtg/s128/fandra-juani.jpg' width='32' height='32' />

    Untuk kode CSS width:70px;height:70px;

Silakan tambahkan attribute width dan height disetiap gambar yang anda gunakan diblog.

    Merubah ukuran asli dari sebuah gambar.

Contoh: Ukuran asli dari sebuah gambar adalah 400x800. Lalu kita upload ke posting blog, dan kita perkecil gambarnya, dengan pilihan Small, sehingga ukuran gambar menjadi 100x200. Itu berarti ukuran gambar yang kita gunakan hanya 100x200.

Agar loading blog lebih cepat, kita ubah dulu ukuran asli gambarnya dikomputer, dari 400x800 menjadi 100x200, setelah itu baru lah kita upload lagi ke blog, dan gantikan gambar sebelumnya dengan gambar baru. Jadi intinya, upload lah gambar dengan ukuran yang seperlunya. Maka loading blog akan jauh lebih cepat.

    Mengganti server gambar blogger dengan google.

    Buatlah entri baru, lalu masukan gambar ke posting.
    Selanjutnya buka https://picasaweb.google.com/ di tab baru. Klik tulisan di sini. Jika ada gambar seperti dibawah ini.
    cara mempercepat loading blog
    Setelah terbuka, pilih Folder sesuai dengan nama yang anda gunakan di google.
    Buka folder tersebut dan cari gambar yang sesuai dengan gambar yang baru saja anda masukan ke posting tadi.
    Lalu klik gambar tersebut, setelah terbuka. Ambil URL nya, caranya klik kanan digambar, lalu klik copy image location.
    Setelaah itu kembali ke posting blog tadi, dan klik pada bagian HTML(disebelah compose).
    Ganti URL gambar blogspot dengan url gambar dari google. Contoh:
    <div class="separator" style="clear: both; text-align: center;">
    <a href="http://2.bp.blogspot.com/-I9l6jX4G52E/UnH29sEX2uI/AAAAAAAABIU/q8hjMf1927g/s1600/loading.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
    <img border="0" src="http://2.bp.blogspot.com/-I9l6jX4G52E/UnH29sEX2uI/AAAAAAAABIU/q8hjMf1927g/s1600/loading.jpg" /></a></div>

    URL yang berwarna hitam diatas. Ganti dengan URL dari picasa web google. Contoh:

    <div class="separator" style="clear: both; text-align: center;">
    <a href="https://lh3.googleusercontent.com/-I9l6jX4G52E/UnH29sEX2uI/AAAAAAAABIY/KSkU5g_QnZE/s300/loading.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
    <img border="0" src="https://lh3.googleusercontent.com/-I9l6jX4G52E/UnH29sEX2uI/AAAAAAAABIY/KSkU5g_QnZE/s300/loading.jpg" /></a></div>
    Selesai.

    Setiap gambar yang kita masukan ke posting blog, maka otomatis gambar tersebut juga ada di picasa web album. Kenapa URL dari blogger harus diganti dengan URL gambar dari google. Karena server google lebih cepat dari blogger. Sehingga gambar akan lebih cepat dibuka.

Setelah melakukan 3 cara diatas, coba test lagi kecepatan blog anda ke situs http://gtmetrix.com/ atau https://developers.google.com/speed/pagespeed/insights dan lihat berapa perubahan skor kecepatan blog yang kalian dapatkan. Contoh: Score kecepatan loading dari blog saya di situs http://gtmetrix.com/.

cara mempercepat loading blog

Cara mempercepat loading blog ini, merupakan lanjutan dari artikel sebelumnya, yaitu tentang tips dan trik mempercepat loading blog. Semoga bisa bermanfaat untuk anda.

Cara Mengganti tampilan sidebar dan posting blog

cara merubah tampilan sidebar dan posting blog. Menggunakan kode border, margin, padding, dan box shadow. Sehingga membuat tampilan blog menjadi lebih menarik. Kotak dari judul widget disidebar dan judul posting akan dibuat berbeda dengan isinya. Seperti contoh gambar dibawah ini, salah satu gadget atau widget yang ada disidebar.

merubah tampilan sidebar dan posting

Langsung saja, cara merubah tampilan bagian sidebar.

    Login ke blogger, dari halaman dasbor pilih pengaturan tata letak.
    Dan pilih Desainer Template > Tingkat Lanjut.
    Tambahkan CSS. lalu masukan kode dibawah ini.
    .sidebar .widget h2{
    text-align:center;
    border:1px solid #ddd;
    margin:-10px -10px 0 -10px;
    padding:5px 0 5px 10px;
    background:#eee;
    box-shadow:0px 5px 5px #aaaaaa;}

    .sidebar .widget {
    text-align:center;
    border:1px solid #ddd;
    padding:5px 0 5px 0;
    box-shadow:0px 10px 10px #aaaaaa;}
    Terapkan ke blog. Selesai.

Keterangan kode:

    .sidebar .widget h2{ mengatur judul pada bagian sidebar.
    .sidebar .widget { mengatur isi dari bagian sidebar.
    text-align:center; membuat tulisan ditengah.
    border garis kotak
    margin membuat kotak judul melebihi lebar dari isi widget atau gadget.
    padding mengatur tulisan dibagian dalam tulisan.
    background:#eee; warna background.
    box-shadow:  warna bayangan dikotak


Cara Merubah tampilan posting blog.

    Langkahnya sama seperti cara merubah tampilan sidebar blog. Hanya saja kode yang dimasukan adalah sebagai berikut.
    h2.post-title{
    border:1px solid #ddd;
    margin:-12px -20px 0 -20px;
    padding:5px 0 5px 10px;
    background:#eee;
    box-shadow:0px 10px 5px #aaaaaa;}

    .post{
    border:1px solid #ddd;
    padding:10px 10px 0 10px;
    margin:7px 10px 20px 10px;box-shadow:0px 1px 10px #aaaaaa;}
    Terapkan ke blog. Selesai.

Keterangan kode:

     h2.post-title{ untuk mengatur bagian judul posting
    .post{ untuk mengatur isi dari bagian posting.
    Jika h2.post title tidak ada ganti dengan h3.post title
    Untuk kode yang lainnya, fungsinya sama seperti keterangan kode di sidebar.

    Silakan berkreasi sendiri, artikel diatas hanyalah sedikit contoh cara merubah tampilan sidebar dan posting blog. Silakan baca juga artikel cara desain blog dan tips trik blogspot lainnya. Seperti artikel fungsi margin dan padding di blog dan juga fungsi border dan penggunaannya di blog, yang dapat dijadikan pilihan cara dalam merubah tampilan blog anda. Semoga bermanfaat.

Cara Memberi Tanda Penulis di Kotak Komentar Blog

Cara membuat tanda penulis/author dikotak komentar blog. Seperti gambar dibawah ini. Tanda penulis berupa gambar, yang akan muncul ketika penulis memberikan komentar. Sehingga mudah untuk dibedakan yang mana author/pemilik blog dengan pengunjung yang memberikan komentar.
tanda penulis dikotak komentar blog
Untuk lebih jelasnya tentang cara membuat tanda penulis atau author dikotak komentar blog. Ikuti langkah-langkah dibawah ini.

    Login ke blogger, dari halaman dasbor pilih pengaturan Template.
    Klik edit HTML dan cari kode ]]></b:skin> dan tempatkan kode berikut ini diatasnya.
    .comments .comments-content .icon.blog-author{
    background-repeat:no-repeat;
    background-image:url(
    https://lh4.googleusercontent.com/-9I8-4lAfG9s/Um9zVOHgz4I/AAAAAAAABHA/uzIniCp-2kQ/s125/fandra%2520penulis.png);
    background-position: top; float:right;width:125px;height:32px;margin:-16px 0px 0px 0px;
    }
    Save template, selesai.

Keteranga kode diatas:

    https://lh4.googleusercontent.com/-9I8-4lAfG9s/Um9zVOHgz4I/AAAAAAAABHA/uzIniCp-2kQ/s125/fandra%2520penulis.png merupakan url dari gambar yang akan ditampilkan.
    float:right; posisi gambar disebelah kanan.
    width:125px;height:32px; tinggi dan lebar gambar.
    margin:-16px 0px 0px 0px; mengatur posisi gambar agar tidak terkena komentar. Pengaturan kode: -16(kanan), 0(atas), 0(bawah), 0(kiri).

    Gambar diatas menggunakan format PNG, dan background dibuat transparant. Jadi background gambar akan mengikuti warna background dari kotak komentar. Untuk membuat gambar transparan, baca di cara membuat gambar dengan background transparan. Dan silakan baca juga cara upload dan ambil url gambar, untuk memasukan gambar anda yang akan dijadikan tanda penulis.

Itulah sedikit cara desain blog yaitu tentang membuat tanda penulis dikotak komentar blog, agar pengunjung mengetahui siapa penulis atau pemilik dari blog. Silakan baca juga artikel lainnya, yang berhubungan dengan gambar. Seperti cara menambahkan gambar disamping judul posting atau cara memasang icon berbeda disetiap judul widget. Dan juga artikel lainnya.

    Semoga bisa bermanfaat untuk anda.

Cara memberi batas jumlah artikel di Label

Cara membatasi jumlah artikel di label atau kategori. Membatasi yang berarti akan ada batas jumlah artikel yang akan kita tampilkan. Seperti halnya halaman awal blog, kita dapat membatasi jumlah posting menjadi 4 atau 5 sesuai dengan yang kita inginkan. Dengan cara mengatur jumlahnya di pengaturan Tata Letak bagian Posting.


Bagaimana dengan halaman Label. Normalnya jika kita membuka halaman label, maka semua artikel dengan label yang sama akan terbuka. Tapi dengan menambahkan beberapa kode di URL dari label atau kategori kita dapat mengatur tampilan jumlahnya.

Dari link diatas, anda akan melihat artikel2 dengan label desain blog, jumlahnya ada 8, dan dibawahnya ada page navigation yang bertuliskan beranda dan posting lama. Jika posting lama diklik maka akan terbuka artikel2 lainnya yang berlabel desain blog.

Diblog ini jumlah artikel dengan label desain blog sudah mencapai 50an lebih, kalau tampilannya tidak dibatasi, maka artikel yang akan tampil saat dibuka sekitar 20an, diatur oleh blogger sendiri. Dan pasti lama membukanya. Contohnya bisa di klik di link ini Desain blog tanpa pengaturan batas jumlah tampilan. Langsung saja, Cara membatasi jumlah artikel di Label silakan ikuti langkah-langkah dibawah ini.

    Login ke blogger, lalu buka halaman blog kamu.
    Lalu klik salah satu label yang kamu miliki. Lalu copi URL di address bar dan pastekan ke Notepad.
    Selanjutnya tambahkan kode ?max-results=8 dibelakangnya. Contoh:
    http://fandrajuani.blogspot.com/search/label/Desain%20Blog

    dan tambahkan kode ?max-results=8 jadinya seperti dibawah ini.

    http://fandrajuani.blogspot.com/search/label/Desain%20Blog?max-results=8
    Sekarang, cara memasangnya di blog. contohnya di menu laman. Silakan ke pengaturan Laman > Laman Baru > Alamat Web > lalu masukan Alamat web (URL) dan beri judul sesuai dengan nama label. Save, Selesai.

Ganti Kode 8 dari kode ?max-results=8 dengan jumlah yang diinginkan, misalkan 5 atau 4. Silakan diatur sendiri sesuai dengan keinginan. Itulah sedikti tips trik tentang Cara membatasi jumlah artikel di Label. Semoga bisa bermanfaat untuk anda.

Cara membuat author Text dibawah posting blog

Cara membuat author dibawah posting blog. Dengan menambahkan author atau profil penulis blog. Maka pengunjung akan lebih mudah untuk mengenali pemilik/penulis dari blog yang sedang dibacanya. Contoh gambar bisa lihat dibawah ini.

Cara membuat author dibawah posting blog
Untuk lebih jelasnya tentang cara membuat author dibawah posting blog. Ikuti langkah-langkah dibawah ini.

    Login keblogger, pilh pengaturan template.
    Klik edit HTML dan cari kode <data:post.body/> lalu masukan kode ini dibawahnya.
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='gambar'>
    <img src='https://lh4.googleusercontent.com/-n-7Ujm1j6nk/UYqhfNgBZcI/AAAAAAAAAQQ/nAaz8oHf4CM/s361/Fandra%2520Juani.jpg'/>

    <div class='Penulis'>
    <span>Penulis : <a href='http://fandrajuani.blogspot.com/p/blog-page_25.html'><d>F</d><g>a</g><h>n</h><i>d</i><j>r</j><k>a</k> <l>J</l><m>u</m><n>a</n><o>n</o><r>i</r></a></span>

    <div class='keterangan'>
    <span>Ada Pertanyaan tentang artikel diatas, silakan masukan komentar dibawah. </span>

    <div class='terimakasih'>
    <span>Terima Kasih Atas Kunjungannya. Assalamualaikum wr.wb.</span>
    <div style='clear:both;'/>
    </div></div></div></div></b:if>
    <div style='clear: both;'/>
    </div>
    Kode <data:post.body/> di template blog, biasanya ada 3, masukan kode langkah 2, di bawah kode <data:post.body/>, ketiga2nya.
    Selanjutnya, cari kode ]]></b:skin> lalu masukan kode ini didalamnya.
    .gambar {
    background: url(http://3.bp.blogspot.com/-XQpNUW9Y0BQ/Und_bxqAsyI/AAAAAAAABKI/0xTMRKYDggw/s1600/gt.jpg) repeat-x top center;
    box-shadow:0px 1px 10px #aaaaaa;
    border:2px solid #eeeeee;
    padding:0;
    margin:10px 0;
    font:bold 12px Arial,Sans-Serif;height:100px;}

    .gambar img{
    width:70px;
    height:70px;
    margin:10px;
    float:left;
    padding:4px;
    background:#ffffff;
    border:1px solid #dddddd;
    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;}

    .gambar img:hover{
    -o-transform: scale(1) rotate(720deg);
    -moz-transform: scale(1) rotate(720deg);
    -webkit-transform: scale(1) rotate(720deg);}

    .Penulis{
    float:left;
    margin:10px 0px 0px 0px;
    text-shadow: 2px 2px 5px #107cde;
    font-weight:bold;color:white;}
    d{font-size:180%;color:DarkCyan}
    g{color:red}
    h{color:blue}
    i{color:#ee3e80}
    j{color:pink}
    k{color:black}
    l{font-size:180%;color:violet}
    m{color:DarkCyan}
    n{color:blue}
    o{color:pink}
    r{color:red}

    .Penulis a{
    text-transform:uppercase;
    font-family:Ravie;
    font-size:12px;
    text-shadow:2px 2px 5px #1780dd;
    font-weight:bold;padding:0}

    .keterangan{
    padding:15px 0px 0px 0px;
    color:white;font:italic 12px Arial, Sans-Serif;
    text-shadow: 2px 2px 5px #107cde;font-weight:bold;}

    .terimakasih{
    margin:13px 0px 0px 150px;
    font:italic 12px Arial, Sans-Serif;color:black;
    text-shadow: 2px 2px 5px #ffffff;}
    Save template, selesai.

Keterangan kode langkah 2:

    Gambar untuk memasukan foto yang akan kita gunakan sebagai profil author.
    Penulis isi dengan nama kamu, tulisannya saya buat dengan warna yang berbeda disetiap hurufnya. Untuk penjelasannya baca diartikel tulisan dengan warna yang berbeda.

Keterangan kode langkah 4:

    Gambar untuk memberikan background disemua tulisan. Height nya saya atur 100px bisa anda ganti sesuai dengan keinginan anda.
    .gambar img{ untuk mengatur ukuran gambar profil author dan juga tambahan kode gambar berputar.
    .gambar img:hover{ gambar akan berputar ketika disentuh mouse. Penjelasannya baca di artikel cara membuat gambar berputar diblog
    .Penulis a{ untuk mengatur font atau jenis tulisan nama author.
    .keterangan{ jika menggunakan keterangan yang panjang. Hapus kode float:left; yang ada di kode .Penulis{ agar keterangan tetap berada disamping gambar profil.

Silakan diubah sesuai dengan keinginan anda sendiri. Dan baca juga artikel tentang cara membuat tanda penulis dikotak komentar blog, agar terlihat berbeda dengan komentar dari pengunjung, sehingga orang bisa membedakan mana pengunjung, mana penulis blog. Semoga Bermanfaat.

Cara Mengatur Modifikasi baca selengkapnya versi Blogger

Cara modifikasi baca selengkapnya versi blogger. Baca selengkapnya fungsinya untuk memotong artikel pada tampilan awal blog. Jadi pada halaman awal, tidak semua tulisan dari artikel kita akan terlihat, yang terlihat hanya pada bagian awalnya saja. Penggunaannya cukup mudah, kita hanya menekan tombol Insert Jump Break pada saat kita menulis artikel(dientri). Untuk lebih jelasnya, kamu bisa baca di artikel cara membuat read more diblog.

Dan kali ini kita akan merubah tulisan baca selengkapnya versi blogger dengan menambahkan kode css didalamnya. Contohnya seperti gambar dibawah ini.

Modifikasi baca selengkapnya versi Blogger
Langsung saja, cara modifikasi tulisan baca selengkapnya versi blogger. Ikuti langkah-langkah dibawah ini.

    Login ke blogger, dari halaman dasbor pilih pengaturan template.
    Lalu klik edit HTML dan cari kode <div class='jump-link'>. Dan ganti dengan kode dibawah ini.
    <div class='jump-link' style='text-align: right;border:1px solid #dddddd;background:#eeeeee;box-shadow:0px 5px 5px #aaaaaa;margin:5px 0px 0px 450px;padding:5px;background-image: -moz-linear-gradient(center top , #fff 0%, #ddd 100%);'>
    Selanjutnya, save template. Selesai.

Keteranga kode:

    style='text-align: right; untuk mengatur tulisan baca selengkapnya disebelah kanan.
    border:1px solid #dddddd; untuk mengatur border kotak baca selengkapnya.
    background:#eeeeee; warna backgroundnya.
    box-shadow:0px 5px 5px #aaaaaa; warna bayangan kotak.
    margin:5px 0px 0px 450px; untuk mengatur lebar dan panjang kotak baca selengkapnya.
    padding:5px; untuk mengatur tulisan didalam kotak.
    background-image: -moz-linear-gradient(center top , #fff 0%, #ddd 100%); untuk mengatur warna background atas dan bawah kotak baca selengkapnya.

Selesai sudah cara modifikasi baca selengkapnya versi blogger, yang dapat anda jadikan pilihan untuk mengatur tampilan blog anda. Silakan dimodifikasi sendiri sesuai dengan tampilan yang kalian inginkan. Jika ingin membuat baca selengkapnya secara auto/otomatis. Kamu bisa baca di artikel cara membuat auto reamore diblog. Semoga Bermanfaat.

Tutorial merubah tampilan kotak komentar blog

Cara merubah tampilan kotak komentar blog, agar terlihat lebih rapi. Dengan cara menambahkan background, box-shawod, warna, serta ukuran dari tulisan yang ada didalam komentar blog. Contohnya seperti gambar dibawah ini.

Cara merubah tampilan kotak komentar blog

Untuk lebih jelasnya tentang cara merubah tampilan kotak komentar blog. Ikuti langkah-langkah dibawah ini.

    Login ke blogger, pili pengaturan Tata Letak > Desainer Templates.
    Lalu pilih Tingkat Lanjut > Tambahkan Css
    Dan masukan kode ini kedalamnya.
    .comments h4 {Color:#0b5394;margin:0;}
    .comments {
    border:1px solid #cccccc;
    margin:0px 10px 20px 10px;
    padding:10px;
    box-shadow:0px 1px 10px #aaaaaa;
    background:#ffffff;
    background-image: -moz-linear-gradient(center top , #fff 0%, #f3f3f3 100%);}

    .comments .comments-content {
    background:transparent;
    margin:-20px 0px -50px 0px;
    font-size:13px;
    text-align:left;}

    .comments .comments-content .user a{
    color:#1780dd;
    font-size:14px;
    font-weight:700;}

    .comments .comment-replies .comment-thread{
    border:1px solid #dddddd;
    box-shadow:1px 1px 1px #bbbbbb;
    background-image: -moz-linear-gradient(center top , #fff 0%, #e6e6e6 100%);
    margin:0px 0px 0px 12px;}

    .comments .continue{border-top:none;}
    .comments .comments-content .comment {margin:0px 0px -10px 0px;}
    .comments .comments-content .datetime{
    font-size:11px;
    margin:3px 0px 0px 0px;
    float:right;font-weight:700;}
    Save template, Selesai.

Keterangan Kode:

    .comments h4 { untuk mengatur warna tulisan dari jumlah komentar.
    .comments { untuk mengatur warna background dari seluruh kotak komentar blog.
    .comments .comments-content { untuk mengatur warna, ukuran tulisan dari isi komentar, dan jarak tinggi komentar blog.
    .comments .comments-content .user a{  untuk mengatur warna dari seluruh nama yang ada dikotak komentar.
    .comments .comment-replies .comment-thread{ untuk mengatur warna background dari komentar balasan.
    .comments .continue{ untuk mengatur tombol Balas.
    .comments .comments-content .comment { untuk mengatur jarak antar komentar balasan.
    .comments .comments-content .datetime{ untuk mengatur warna dan posisi tanggal.

Silakan baca juga artikel yang terkait dengan desain kotak komentar blog. Seperti cara membuat tanda penulis dikotak komentar blog. Dan juga cara menggantu tulisan poskan komentar dengan gambar. Dan juga artikel-artikel lainnya. Semoga Bermanfaat.

Cara merubah poskan komentar dengan gambar

Cara mengganti tulisan poskan komentar yang berada di atas kotak komentar dengan gambar. Tulisan poskan komentar ini akan muncul jika artikel kita belum ada komentar. Dan akan hilang dengan sendirinya jika artikel sudah ada yang berkomentar.
mengganti poskan komentar dengan gambar
Gambar diatas adalah contoh tulisan poskan komentar yang berada di atas kotak komentar blog. Untuk menggantinya dengan gambar. Ikuti langkah-langkah dibawah ini.

    Login ke blogger, ke pengaturan Template.
    Lalu klik edit HTML dan cari kode <data:postCommentMsg/>
    Setelah itu ganti tulisan tersebut dengan format kode dibawah ini.
    <img src="URL gambar kalian" />
    Kode <data:postCommentMsg/> ada 4 di template blog Ganti semuanya dengan kode gambar seperti diatas.
    Save template, selesai.

Saya beri contoh gambar dan kodenya.
mengganti poskan komentar dengan gambar
<img src="http://3.bp.blogspot.com/-I0rc7Jma6qA/UoOV4fHN5eI/AAAAAAAABPw/IlyhS9yvPSw/s1600/KOMENTAR+1.gif" />
mengganti poskan komentar dengan gambar
<img src="http://4.bp.blogspot.com/-kAz9MHOhsww/UoQy58SD5cI/AAAAAAAABQk/O2N9XwV9fH4/s1600/Poskan+Komentar+02.gif" />
Silakan gunakan kode dan gambar diatas untuk percobaan diblog anda. Selanjutnya anda bisa gunakan gambar sendiri yang kalian inginkan. Untuk cara upload dan ambil url gambar, upload saja gambarnnya ke blogger, lalu klik kanan dan ambil urlnya, untuk lebih jelasnya bisa kalian baca di cara upload dan ambil url gambar.

Setelah mengganti tulisan poskan komentar dengan gambar, kita juga dapat mengatur posisinya, dikanan, dikiri atau ke posisi lainnya yang sesuai dengan keinginan kita. Caranya tempatkan kode berikut diatas ]]></b:skin>
.comments h4 img{
float:right;
margin:-42px  -35px 0px 0px;
}
Ketarangan kode:

    float:right; mengatur posisi gambar berada dikanan. Untuk mengubah menjadi sebelah kiri, hapus saja kode tersebut.
    margin:-42px  -35px 0px 0px; untuk mngatur posisi kanan, atas, bawah, kiri gambar.

Terakhir save template, selesai. Silakan dibaca juga artikel laiinya yang berkaitan dengan kotak komentar seperti cara membuat tanda penulis di blog pada bagian kotak komentar. Atau cara menghilangkan kotak komentar pada halaman tertentu diblog. Dan juga artikel-artikel lainnya. Semoga bisa bermanfaat untuk anda.

Cara menambahkan kode HTML, Css, Script diposting blog

Untuk memasukan kode html, css, script diposting blog sebenarnya bisa dapat ditulis secara langsung seperti kita menulis artikel seperti biasa. Tapi dibeberapa blog ada yang tidak dapat menuliskannya secara langsung, seperti menulis kode ]]></b:skin>. Pada saat diketik mungkin bisa, tapi pada saat dipublikasikan, yang tampil hanya kode ]]> ini saja.

Kejadian ini saya alami pada saat menggunakan template simple. Terus saya cari tau, kesalahannya dimana. Ternyata kesalahannya ada di pengaturan Setelan entri yang ada disebelah kanan pada saat kita menulis artikel. Jika kamu mengalami hal yang sama. Buka entri baru/atau entri lama kamu, lalu klik pengaturan Setelan Entri > Pilihan > mode tulis > pilih Tunjukan HTML apa adanya dan klik selesai. Maka kode2 yang kita tulis secara langsung diposting blog akan terlihat.

Selanjutnya, agar tampilan kode html, css, script diblog kita terlihat rapi. Kita dapat memasukannya ke dalam satu kotak script. Berikut caranya.

    Pembuatan kotak script

    Pertama, copi kode dibawah ini, lalu pastekan diatas ]]></b:skin>
    .kotak {
    padding:10px;
    margin-top:5px;
    margin-bottom:10px;
    border-left: 10px solid #0b5394;
    border-top:1px solid #ddd;
    border-bottom:1px solid #eee;
    border-right:1px solid #eee;
    box-shadow:0px 3px 3px #aaaaaa;
    background: url(https://lh4.googleusercontent.com/-20OcWWjnUys/UoH5-kSIcAI/AAAAAAAABNs/qD2oTuhBfPU/s150/Code%2520HTML%2520css.png)
    no-repeat center center;}
    Save template. Selesai.

    Cara membuat kotak script didalam posting blog

    Buatlah entri baru atau edit artikel lama kamu.
    Lalu klik bagian HTML disebelah Compose.
    Lalu ketikan kode ini.
    <div class="kotak">
    klik disini dan ganti dengan kode script yang ingin kalian masukan
    </div>
    Lalu kembali ke Bagian Compose dan ganti tulisan klik disini dan ganti dengan kode script yang ingin kalian masukan
    Setelah itu klik Pratinjau untuk melihat tampilannya. Selesai.

     Selanjutnya masuk ke tahap overflow, membuat kotak dengan scroll

    Cara membuat Kotak scroll kebawah. Sama seperti cara diatas, lalu tambahkan kode style="overflow: auto; height: 80px; didalamnya. Contohnya seperti dibawah ini.
    <div class="kotak" style="overflow: auto; height: 80px;" >
    Contoh kotak dengan scroll
    </div>

    Cara membuat kotak scroll kesamping.
    Contoh penggunaan kotak denga scroll kesamping. Copi kode dibawah ini dan tempatkan dibagian HTML seperti cara diatas.

    <div class="kotak" style="overflow-x: scroll; overflow-y: hidden; padding: 10px; width: 540px;" >
    <p style="width:450%;">Masukan kode disini.
    </p></div><br />

Pada saat kita menulis artikel warna dari kotak script tidak terlihat, api pada saat kita Pratinjau atau publikasikan, barulah kotak dengan warna tersebut akan terlihat. Agar kita tidak bingung, sebaiknya pada saat menuliskan kode kotak di HTML(sebelah compose), tambahkan juga tulisan dimana tempat memasukan kodenya. Contoh:
<div class="kotak">
Tempat memasukan kode script, html, css dan lain-lain.
</div>
Dengan begitu, tulisan yang akan tampil dihalaman Compose adalah tulisan Tempat memasukan kode script, html, css dan lain-lain. Tinggal kita klik lalu ganti dengan kode yang ingin kita masukan. Selesai.

Silakan dibaca juga artikel tentang fungsi border dan penggunaannya diblog yang dapat digunakan untuk mengganti tampilan kotak script dengan tampilan lain. Semoga bermanfaat.

Cara merubah Coloring 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.
Cara merubah warna block di blog
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.

    Login ke blogger, dari halaman dasbor pilih pengaturan template.
    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;}
    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 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:
Membuat widget hanya tampil dihalaman tertentu

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

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

    Silakan login ke blogger, dan pilih pengaturan Template.
    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'>
    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>
    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.

    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"'>
    Save template, selesai.

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

    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;'>
    Save template, selesai.

Keempat: Menampilkan widget hanya tampil pada halaman URL yang ditentukan

    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"'>
    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.

Tutorial marubah 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.

    Silakan login ke blogger, lalu pada halaman dasbor pilih pengaturan Template.
    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;
    }
    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 artikel2 saya yang lainnya, seperti membuat pangkat atas12 dan bawah90 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.

Tutorial 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.

    Silakan login ke blogger, lalu pada halaman dasbor pilih pengaturan Template.
    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;
    }
    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 artikel2 saya yang lainnya, seperti membuat pangkat atas12 dan bawah90 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 HTML menu dan Css

Cara membuat menu html dan css serta cara mengisi menu tersebut dengan link atau url yang kita inginkan. Perlu diketahui bahwa menu terdiri dari kode HTML sebagai pokok utama dari menu dan CSS sebagai penghiasnya. Akan saya coba jelaskan sedikit demi sedikit.
Kode dasar HTML dari sebuah menu, kira-kira seperti ini.
<div id="menu">
<ul>
<li><a href="URL alamat web">Beranda</a></li>
</ul>
</div>
Maka hasilnya akan menjadi seperti ini.

    Beranda

Selanjutnya kita coba tambahkan menu yang lainnya. Seperti Profil, Contact, dan Daftas isi.
<div id="menu">
<ul>
<li><a href="URL alamat web">Beranda</a></li>
<li><a href="URL alamat web">Profil</a></li>
<li><a href="URL alamat web">Contact</a></li>
<li><a href="URL alamat web">Daftas Isi</a></li>
</ul>
</div>
Maka hasilnya akan menjadi seperti ini.

    Beranda
    Profil
    Contact
    Daftar Isi

Dari contoh diatas, setiap menu mempunyai kode sendiri.
Seperti Beranda kodenya: <li><a href="URL alamat web">Beranda</a></li>.
Jadi jika ingin menambahkan menu lagi, kita dapat menambahkan kode dengan format
<li><a href ="URL address">Nama menu yang akan dibuat</a></li>

Dari kode HTML menu diatas. Menu akan berbentuk menurun/vertical dengan bullet-list disamping kirinya. Sekarang masuk ke bagian CSS/Penghias menu. Dari kode CSS inilah kita dapat membuat menu menjadi bentuk Horizontal atau memanjang kesamping. Mengatur warna tulisan, warna background, jarak antar tulisan dan lain-lainnya. Kode Css akan berjalan sesuai dengan kode HTML yang kita buat.

Untuk cara memasangnya di blog, ke pengaturan tata letak > klik tambahkan gadget > pilih HTML/Javascipt, lalu masukan kode HTML dan CSS kedalamnya Dengan format seperti dibawah ini.

    <style>
    kode Css
    </style>
    kode html

Lalu Save, selesai.

Lanjut ke bagian Css. Seperti contoh kode HTML diatas. Kita membuat menu dengan Kode id=menu maka dikode Css nya juga harus menu. Contoh:
#menu { background:#eee;border:1px solid #444444;}
Maka hasilnya akan menjadi seperti ini.

    Beranda
    Profil
    Contact
    Daftas Isi

Selanjutnya menghilangkan bullet list. Tambahkan kode #menu ul {list-style:none;} Maka hasilnya akan menjadi seperti ini.

    Beranda
    Profil
    Contact
    Daftas Isi

Mengatur jarak antar tulisan. Tambahkan kode #menu ul li {padding:5px;} hasilnya.

    Beranda
    Profil
    Contact
    Daftas Isi

Mengatur warna,ukuran,tebal tulisan tambahkan kode Css #menu ul li a{color:#aaaaaa;font-size:12px;font-weight:bold;} Hasilnya:

    Beranda
    Profil
    Contact
    Daftas Isi

Mengatur warna tulisan ketika disentuh mouse. tambahkan kode #menu ul li a:hover{color:#aaa;} Hasilnya.

    Beranda
    Profil
    Contact
    Daftas Isi

Jadi kode keseluruhan dari kode HTML dan CSS diatas adalah seperti ini.
<style>
#menu { background:#eee;border:1px solid #444444;}
#menu ul {list-style:none;}
#menu ul li {padding:5px;}
#menu ul li a{color:#000;font-size:12px;font-weight:bold;}
#menu ul li a:hover{color:#aaa;}
</style>

<div id="menu">
<ul>
<li><a href="http://fandrajuani.blogspot.com/">Beranda</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/blog-page_25.html">Profil</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/hubungi.html">Contact</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/daftar-isi_12.html">Daftas Isi</a></li>
</ul>
</div>

Sekarang ke tahap pembuatan menu horizontal. Kode HTML nya sama seperti cara diatas, yang berbeda hanyalah kode Css nya kita tambahkan kode float;left pada bagian #menu ul li {padding:5px;float;left; } dan juga kode height:40px; pada bagian #menu { background:#eee;border:1px solid #444444;height:40px;} . Contoh:
<style>
#menu { background:#eee;border:1px solid #444444;height:40px;}
#menu ul {list-style:none;}
#menu ul li {padding:5px;float;left}
#menu ul li a{color:#000;font-size:12px;font-weight:bold;}
#menu ul li a:hover{color:#aaa;}
</style>

<div id="menu">
<ul>
<li><a href="http://fandrajuani.blogspot.com/">Beranda</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/blog-page_25.html">Profil</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/hubungi.html">Contact</a></li>
<li><a href="http://fandrajuani.blogspot.com/p/daftar-isi_12.html">Daftas Isi</a></li>
</ul>
</div>
HASILNYA

    Beranda
    Profil
    Contact
    Daftas Isi


Dari contoh2 diatas, kita dapat melihat perbedaan antara menu horizontal dan vertical terletak pada kode Cssnya sedangkan kode HTML nya tetap sama. Silakan berkreasi sendiri. Artikel diatas hanyalah sedikit tutorial sederhana dari saya, yaitu tentang dasar pembuatan menu menggunakan kode HTML dan Css, yang dapat anda kembangkan sendiri sesuai dengan keinginan anda. Semoga Bermanfaat.

Cara rubah bullet list diposting blog

Cara merubah tampilan bullet list diposting blog menggunakan gambar. Bullet list atau tanda bulat-bulat yang ada diposting blog akan kita ganti dengan menggunakan gambar, agar terlihat lebih stylish. Contoh gambar lihat dibawah ini.

Cara merubah bullet list diposting blog
Bagaimana??anda tertarik untuk mengganti bullet list diblog anda dengan gambar. Jika tertarik, silakan ikuti langkah-langkah dibawah ini.

    Login ke blogger. Selanjutnya kepengaturan Tata Letak > Desainer Template > Tingkat Lanjut > Tambahkan Css.
    Lalu copi kode berikut dan pastekan kedalam kotak tambahkan Css.
    .post ul {
    list-style:url(https://lh6.googleusercontent.com/-m-YGd6ZluKg/UouNF0lbvbI/AAAAAAAABSU/m2dbKwZp9K8/s12/bullet%2520list.gif);}
    Selanjutnya Klik terapkan ke blog, selesai.

Keterangan Kode:

    .post ul { kode untuk mengatur bullet list diposting blog.
    https://lh6.googleusercontent.com/-m-YGd6ZluKg/UouNF0lbvbI/AAAAAAAABSU/m2dbKwZp9K8/s12/bullet%2520list.gif merupakan kode url dari gambar yang akan dijadikan bullet list diposting blog.

Jika ingin menggunakan gambar sendiri, silakan buat gambar yang akan dijadikan bullet list diprogam gambar, buatlah gambar dengan ukuran yang kecil, misalnya 16x16, seperti contoh gambar diatas, gambar bullet list yang saya gunakan ukurannya 12x10. Untuk cara merubah ukuran gambar, kalian bisa baca di artikel cara membuat icon untuk website menggunakan photoshop.

Agar tidak memberatkan loading blog, buatlah gambar dengan format Gif. Karena dengan menggunakan format Gif, ukuran gambar bisa dibawah 1kb, seperti contoh gambar, itu ukurannya hanya 873byte. Satu lagi kelebihan format gif, background gambar transparant. Jadi yang terlihat hanya bagian yang berwarna saja.

Setelah selesai membuat gambar, upload gambar dan ambil Url nya. Caranya bisa baca di artikel cara upload dan ambil url gambar. Dan gunakan url tersebut ke dalam kode .post ul { list-style(url gambar kamu sendiri);}. Selesai. Semoga bisa bermanfaat untuk anda.

Cara Menambahkan Widget 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.

    Silakan login ke blogger, dari halaman dasbor piih pengaturan tata letak.
    Lalu klik desainer template > tingkat lanjut > Tambakan Css.
    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.
    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.

Cara Membuat Title post 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.

Title otomatis pada link label bloggerGambar 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.

    Silakan login ke blogger, dari halaman dasbor pilih pengaturan template.
    Dan klik edit html, lalu cari kode expr:href='data:label.url'
    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>
    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.

Cara Menambahkan 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.
Widget blog melayang setelah di scroll
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.

    Silakan login ke blogger, dari halaman dasbor pilih pengaturan template.
    Dan klik edit HTML dan cari kode </body>
    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.
    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'/>
    Save template, selesai.

 Cara mencari kode id widget

    Tentukan widget mana yang akan di buat melayang, judul widgetnya apa?contoh: Artikel Populer.
    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'>
    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 widget2 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.

Penyempurnaan code 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.

Penyempurnaan html di google webmaster

Mengatasi duplikasi deskripsi meta

    Silakan login ke blogger, dari halaman dasbor pilih pengaturan Setelan.
    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.
    Penyempurnaan html di google webmaster
    Simpan perubahan, selesai.

Mengatasi Deskripsi meta panjang

    Ke pengaturan Setelan > Preferensi penelusuran > dan klik pada bagian deskripsi.
    Pilih ya pada Aktifkan deskripsi penelusuran, lalu Kosongkan isi di dalamnya. Lalu klik simpan perubahan.
    Penyempurnaan html di google webmaster
    Selanjutnya ke pengaturan template, klik edit html dan cari kode <head>
    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>
    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

    Pertama, login ke blogger, lalu kunjungi situs google webmaster.
    Dan pilih pada bagian tampilan penelusuran > penyempurnaan html > lalu klik Deskripsi meta.
    Setelah itu akan ada halaman2 dari blog kita yang mempunyai deskripsi singkat meta. Contohnya.
    Penyempurnaan html di google webmaster
    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.
    Setelah ketemu artikelnya, edit artikel itu, lalu klik pada bagian Deskripsi Penelusuran. Seperti gambar dibawah ini.
    Penyempurnaan html di google webmaster
    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.

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

Cara menambahkan 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.

Cara membuat tombol back to top
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.

    Silakan login ke blogger, dan pilih pengaturan template.
    Klik edit html dan cari kode </body>
    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>
    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;}
    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.
    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'/>
    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.

Cara menambahkan Title post 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.

Title di setiap judul posting blog
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.

    Login ke blogger, pilih pengaturan template.
    Klik edit HTML dan cari kode <a expr:href='data:post.link'><data:post.title/></a>
    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>
    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.

    Cari kode <a expr:href='data:post.url'><data:post.title/></a>
    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>
    Kode ini <a expr:href='data:post.link'><data:post.title/></a> biasanya ada 3 diblog, lakukan hal yang sama seperti langkah 2.
    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 website2 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.

Cara close All program di windows 8

Kali ini saya akan berbagi sedikit tips tentang cara close program di windows 8. Pada saat menggunakan windows xp ataupun 7, jika ingin keluar dari suatu program, seperti game atau pc setting, tinggal klik tanda x maka akan keluar, kalau di game biasanya ada tulisan exit game, selesai. Di Windows 8 tidak seperti itu. Ada banyak program yang ketika mau di keluarkan, tidak ada tulisan exit ataupun tanda x di samping kanan atasnya.

Pengalaman saya bermain game dari store windows 8, waktu mau keluar gak bisa. Akhirnya saya tekan windows+tab untuk memindahkannya ke desktop lalu menekan Ctrl+shift+delete yang ada di keyboard lalu muncul task manager dan tinggal di end program yang di keluarkan. Setelah cukup lama menggunakan windows 8, akhirnya saya tau caranya close program dari windows8. Berikut caranya.
close program

    Pada saat didalam game, tekan windows+tab yang ada di keyboard, untuk memindahkan layar ke desktop.
    Selanjutnya arahkan mouse ke samping kiri atas, maka akan terlihat program yang sedang berjalan.
    Terakhir klik close, maka program tersebut akan keluar, selesai.

Contoh gambarnya ada di sebelah kiri, itu kotak kecil gambar sapi merupakan game yang sedang saya mainkan, gambar itu muncul pada saat mouse di arahkan ke atas sebelah kiri pada tampilan desktop.

Cara search all program di windows 8

Windows 8, tampilan berbeda dengan windows-windows sebelumnya. Di windows xp dan 7, jika ingin mencari all program, kita cukup menekan tombol start yang letaknya disebelah kiri bawah. Maka program yang ada dikomputer kita akan muncul. Di windows 8?? ya sama, kayak gitu juga, cuma tampilannya saja yang berbeda dan sedikit tersembunyi.

Berikut cara mencari all program di windows 8.

    Hidupkan komputer/laptop kamu, lalu pada tampilan awal start.
    Arahkan mouse ke bawah, akan muncul tanda panah kebawah. Klik tanda panah tersebut, maka all program yang ada diwindows 8 akan keluar.
    Selesai.

windows 8
Kiri Ini contoh gambarnya pada saat mouse diarahkan kebawah akan ada tanda panah kebawah. Tinggal di klik maka akan keluar semua program-program yang telah diinstal di komputer atau laptop windows8. Dan silakan dicari program apa yang sedang anda cari.

Terima kasih sudah membaca artikel tentang cara mencari all program di windows 8 ini, semoga bisa bermanfaat untuk anda. Dan silakan baca juga artikel cara close program di windows 8. Untuk tips menggunakan windows 8 lainnya akan saya sambung dilain waktu.

Cara menambahkan 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.

    Ke pengaturan tata letak, lalu klik add widget dan pilih HTML/Javascript
    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.
    Setelah itu lepas semuanya, maka kode © akan keluar.
    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>
    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 mengatur 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 mengisi artikel blogs 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.

    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
    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:
        Cara mengisi artikel di menu bar
        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>
    Selesai.

    Cara yang kedua, memasukan banyak artikel di menu bar

    Buatlah label dan pasang widget label di blog kamu. Caranya baca di artikel Cara membuat label atau kategori di blog.
    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:
    Cara mengisi artikel di menu bar
    Dan Pastekan di Notepad. Contoh URL dengan nama Label Desain Blog.
    http://fandrajuani.blogspot.com/search/label/Desain%20Blog
    Sekarang, silakan masukan URL label ke menu kamu, contoh penempatan URL, lihat kembali pada cara pertama, pada langkah 2.
    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.

membuat label blog di blogspot

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.

    Cara membuat motor roda dua
    Cara memperbaiki motor yang rusak
    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.

    Silakan edit 3 artikel lama kamu. Lalu klik Label pada bagian Setelan Entri. Contohnya:
    Cara membuat label atau kategori di blog
    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.
    Dan klik perbarui.
    Setelah itu ke pengaturan tata letak > klik tambahkan gadget > Pilih Label. Seperti gambar dibawah ini. Dan simpan.
    Cara membuat label atau kategori di blog
    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:
    Cara membuat label atau kategori di blog
    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:

Cara membuat label atau kategori di blog

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.