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

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFLky8DhRjYexEC8DZii60_VLxsUTQUtGGiKhUiSHmHtIR8s-786sYtNSchYH1OIP-Rc2T5gjwhFH1ZzD0z1ki99XNV2CUQwOsuYbVbIzGb0ZMSo8LIM74ZdrZbZnK1ENqEuz-XERYm2kJ/s1600/a.png) no-repeat top left;
text-indent: 65px; color:#6299E4; }
.post blockquote div {
display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Rfu9EP0FTwhmC-nX19sTy67tao4C_CNS1ZmVYm78bhbJrQXzd12oBWeNYq9q3EiH8LZ27CxZEn9eTJJ8UKeaUAelWPWj_PZFjgrCzeLz9hTwvqddNDIvmR03hPoOkgQXApCx6CPmRtWy/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtSFYK7XyI5egHSpqq9XfrQVkloVsdvHYh2jz6hHIms2ITjOLCyiOqEj9MfbFkIerHtgusEh1hF6NX7R3MPU8poq1jxXl2rn4PZBbuOSiV3_lj4Qq8h7s_72n4L_9VUyjRCIzAkLUrArBe/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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA7CMBMsXBEk4E5m9O5HD4QwA5fROg2OfYz6WVp8Xrs7WeTYwnByObwSIjcxsJwIx5zSaZxaHgfRYbjRU8q0k5TWG6fkm3LnePAi18DAjJ6PAjKqANffoSAiTBteuvdx2gcuLjBEAJMJh-/s1600/loading.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
    <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgA7CMBMsXBEk4E5m9O5HD4QwA5fROg2OfYz6WVp8Xrs7WeTYwnByObwSIjcxsJwIx5zSaZxaHgfRYbjRU8q0k5TWG6fkm3LnePAi18DAjJ6PAjKqANffoSAiTBteuvdx2gcuLjBEAJMJh-/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTXIwLJWCobNPu2cadkJPAb_Urv9sixs0csvORj1AdYRfSU_jwBufpDf-QQwBQQqXhC9iDKvrHBa2p6NZd6dIliD_iQ960ZTYc-hGnN44nBX81gN-Qr6mMQnXLVSI28V5GdeAtfRhBTW6K/s300/loading.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">
    <img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTXIwLJWCobNPu2cadkJPAb_Urv9sixs0csvORj1AdYRfSU_jwBufpDf-QQwBQQqXhC9iDKvrHBa2p6NZd6dIliD_iQ960ZTYc-hGnN44nBX81gN-Qr6mMQnXLVSI28V5GdeAtfRhBTW6K/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTmpCFo5lUm1qxi8kcY3R0i3PHKpL9tEfOs5qlsSvX0yhqRmc1e1GFoRoJUqHAvho2kQ03tanys__EcgKc0E5QIHYTIp36SGXy670fsNe-zppmVtS2zNpjEKvsgGyT3ddFIwh59bHu8fNO/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTmpCFo5lUm1qxi8kcY3R0i3PHKpL9tEfOs5qlsSvX0yhqRmc1e1GFoRoJUqHAvho2kQ03tanys__EcgKc0E5QIHYTIp36SGXy670fsNe-zppmVtS2zNpjEKvsgGyT3ddFIwh59bHu8fNO/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.