Cara Mengganti Warna Tulisan Tebal (Bold) di Postingan Blog

Cara Mengganti Warna Tulisan Tebal (Bold) di Postingan Blog

CSS Tutorial Blog

Cara mengganti warna tulisan blog di postingan blog secara otomatis,- Setelah sekian lama saya tidak memberikan tutorial mengenai tips blogger, dan yang terakhir kali saya berikan tutorial mengenai cara menyembunyikan widget blog di tampilan mobile. Nah pada kesempatan kali ini saya kembali akan memberikan tutorial blogger mengenai cara mengganti warna tulisan tebal atau blog di blog. Tutorial ini saya buat bagi anda yang mungkin saja sedang memperbagus tampilan template, khususnya pada area postingan.

Bagi sebagian blogger khususnya yang bersungguh-sungguh menekuninya, tampilan blog adalah sesuatu yang harus diutamakan selain artikel dan optimasi SEO. Karena dengan memiliki sebuah blog dengan tampilan yang bisa dibilang bagus akan membuat semangat dalam mengurus dan mengelola blog semakin meningkat. Tidak cuman bagi pemilik blog saja, bagi pengunjung pun juga begitu, pasalnya kebanyakan pengunjung lebih menyukai dan mengapresiasi tampilan blog yang terlihat bagus di mata mereka. Mengenai tampilan blog mungkin yang harus diperhatikan adalah pada area postingan, karena area posting yang paling banyak dilihat oleh pengunjung dari pada bagian yang lain.

Nah untuk itu anda bisa mempercantik tampilan blog khususnya area posting agar pengunjung bisa nyaman dalam membaca artikel yang anda bagikan. Untuk mempercanti atau memperbagus postingan blog banyak sekali caranya seperti mengganti font, ukuran, hingga warna teks. Nah disamping itu masih ada satu hal yang bisa anda lakukan untuk memperbagus tampilan area posting blog yaitu bagian huruf tebal (Bold), bagian ini sering digunakan untuk mempertebal huruf yang biasanya inti dari sebuah artikel. Nah dengan mengganti warna huruf bold yang biasanya berwarna hitam lalu menggantinya dengan warna yang lain akan bisa membuat tampilan postingan semakin bagus, terlebih lagi jika anda sedang menganti warna backgroud teks postingan dengan warna lain semisal warna hitam, maka otomatis anda harus juga mengganti warna huruf bold ini, jika tidak maka huruf yang anda tebali tidak akan kelihatan di area postingan.

Nah untuk itu jika anda berniat mengganti backgroud postingan dengan warna lain, mengganti warna huruf bold juga harus anda lakukan, nah jika blog anda berplatfrom blogger anda bisa mengikuti tutorial mengganti warna tulisan bold atau huruf tebal dibawah ini. Plus dengan cara ini anda tidak perlu mengganti warna huruf bold dengan cara manual karena dengan cara ini semua huruf bold di postingan anda akan otomatis semua berganti warna. Berikut tutorialnya.

Cara Mengganti Warna Huruf Tebal (Bold) di Postingan

1. Pertama yang pasti anda harus masuk ke Blogger
2. Kemudian masuk ke menu Template - Edit HTML.
3. Selanjutnya silakan copy kode CSS dibawah ini lalu paste tepat dibawah kode ]]</b:skin> atau </style>, untuk mempercepat proses pencarian gunakan Ctrl+F.

.post-body b{color:#2d2d2d!important;font-weight:bold}

4. Untuk pengaturanya silakan ganti kode warna tersebu yang sudah saya tandai dengan warna merah dengan kode warna yang di kehendaki untuk warna bold-nya.

5. Terakhir tinggal simpan template.

Nah mudah bukan cara mengganti tulisan tebal atau bold di postinga blog secara otomatis, demikian artikel yang dapat saya bagikan dan semoga berhasil.

Cara Menyembunyikan Widget Blog di Tampilan Mobile

Cara Menyembunyikan Widget Blog di Tampilan Mobile

CSS Tutorial Blog

Tutorial Blogger,- Blogger adalah sebuah layanan milik google yang disediakan secara khusus kepada pengguna internet untuk membuat sebuah blog secara gratis, blogger memiliki keistimewaan sendiri dibandingkan dengan situs pembuat blog lainnya karena blog yang di buat melalui platform blogger mampu bersaing dengan web-web besar lain di mesin pencarian khususnya Google. Hal tersebut juga tidak lepas dengan pemiliknya yaitu google yang notabene sebagai mesin pencarian sekaligus perusahaan internet terbesar di dunia untuk saat ini. Nah buat anda yang berniat membuat blog gratisan saya sarankan di blogger karena pembuatannya yang mudah sekaligus banyak sekali tutorial yang beredar di internet.

Pada kesempatan kali ini saya juga akan membagikan tutorial mengenai blogger yang saya khususkan bagi pengguna lanjut, karena jika anda masih tahap belajar mungkin tutorial ini masih membingungkan. Tutorialnya adalah menyembunyikan widget di tampilan mobile atau HP, seperti yang sudah saya katakan diatas blogger mempunyai fitur untuk mempermudah penggunanya dalam mengelola blog, salah satunya adalah fitur widget yang ada di menu tata letak. Fitur ini memungkinkan kita untuk memasang fitur tambahan di blog kita yang tempatnya bisa kita sesuaikan.

Baca: Cara menyembunyikan widget tertentu di halaman utama blog

Untuk penambahan widget tidak ada batasnya, namun perlu diperhatikan bahwa terlalu banyak menambahkan widget blog bisa memperberat loading blog, yang akhirnya malah tidak membuat nyaman pengunjung. Seperti halnya di tampilan dekstop, di tampilan mobile atau hanphone juga harus diperhatikan karena terlalu banyak menambah widget di template juga akan mempengaruhi loading blog. Nah jika menambah banyak widget di tampilan dekstop tidak terlalu berpengaruh, namun jika di tampilan mobile mungkin cukup banyak pengaruhnya. Nah untuk itu silahkan sembunyikan widget yang tidak terlalu penting di tampilan mobile, untuk caranya bisa anda ikuti dibawah ini dan tenang saja cara ini hanya menyembunyikan di tampilan mobile saja dan jika dibuka di tampilan dekstop masih ada. Ok langsung saja berikut tutorialnya.

Cara Menyembunyikan Widget di Tampilan Mobile

1. Pertama sebelum melakukan tutorial ini anda harus mengetahui dulu kode html dari widget yang ingin disembunyikan pada tampilan mobile, untuk mengetahuinya cukup mudah yaitu tinggal masuk ke tata letak lalu klik edit pada widget yang ingin disembunyikan dan lihat dibagian kode HTML di bagian URL tersebut, (biasanya ada dibagian akhir).

2. Jika sudah diketahui selanjutnya masuk ke menu template lalu pilih "Edit HTML", kemudian untuk cara cepatnya mencari kode tersebut bisa klik menu "lompat ke widget" lalu pilih kode widget yang sudah dilihat di tata letak.

3. Jika sudah ketemu silahkan klik tanda panah kecil dibagian nomor, maka otomatis akan membuka seluruh kode widget tersebut. Disini biasanya akan terdapat lagi tanda panah setelah anda klik tanda panah pertama, silahkan klik lagi.

4. Nah untuk selanjutnya silahkan tambahkan kode CSS berikut untuk menyembunyikan widget tersebut di tampilan mobile yang sudah saya tandai dengan warna merah.

  <b:widget id='HTML11' locked='false' title='' type='HTML' version='1' visible='true'>
    <b:includable id='main'>
<b:if cond='data:blog.isMobileRequest == "false"'>
<!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:if>
</b:includable>
  </b:widget>

5. Terakhir tinggal simpan template dan coba cek di smartphone anda.

Nah mudah bukan cara menyembunyikan widget di tampilan mobile, dengan begitu blog anda jika dibuka di perangkat mobile tidak akan terlalu berat loadingnya. Demikian artikel tutorial blog yang dapat saya bagikan dan terima kasih.

Cara Mengisi Menu Navigasi Dengan URL Postingan Blog

Cara Mengisi Menu Navigasi Dengan URL Postingan Blog

CSS Tutorial Blog

Tutorial Blog,- Setelah sekian lama saya tidak membagikan tutorial mengenai tips blog, pada kesempatan kali ini saya akan salah satu tutorialnya yaitu cara mengisi menu navigasi dengan URL postingan. Tutorial ini saya buat karena masih banyak pengguna blogger yang kesulitan mengisi menu navigasi bawaan template, yang dimaksud disini adalah template hasil download. Jika anda menggunakan template bawaan blogger, untuk memasang dan mengisi menu navigasi cukup mudah karena hanya perlu memasang widget di tata letak. Walau pun bagitu namun menu navigasi bawaan template blogger dikhususkan untuk laman atau label.

Berbeda dengan menu navigasi dari template hasil download, dimana kita bisa mengisi menu navigasi tersebut dengan URL yang kita kehendaki, seperti bisa URL postingan, label atau url dari blog lain. Terlebih lagi menu navigasi dari template hasil download juga memiliki tampilan lebih bagus serta bermacam-macam, plus kita bisa mengatur pewarnaan beserta ukuran yang kita inginkan. Dalam mengisi menu navigasi dengan URL postingan sangat dianjurkan ketimbang dengan url label, alasannya sendiri karena mengisi url menu navigasi langsung dengan url postingan bisa meningkatkan SEO blog karena jika di klik oleh pengunjung akan langsung menuju ke postingan. Berbeda jika di isi dengan label, karena terlebih dahulu akan masuk ke menu label atau kategori yang bersangkutan. Dan mengisi menu navigas dengan url postingan juga menjadi salah satu tips sukses di terima oleh google adsense.

Biasanya untuk mengisi menu navigasi baik dengan url label atau postingan, sudah di jelaskan dalam situs yang menyediakan template yang di download, namun biasanya pengunjung akan mengabaikan pengaturan tersebut karena ingin secepatnya memakai template tersebut. Nah untuk itu yang ingin tahu bagaimana cara mengisi menu navigasi dengan URL postingan atau label bisa di ikuti tutorial yang akan saya berikan kali ini.

Cara Mengisi Menu Navigasi dengan URL Postingan

Sebelum melakukan tutorial ini pastikan template anda sudah mendukung atau sudah ada menu navigasinya, karena jika tidak anda harus membuatnya sendiri. Jika berkenan silahkan gunakan template yang sudah saya sediakan yang pasti terbaik dan sangat SEO. Baca: 10 Tamplate SEO Friendly dan Responsive 2017.

1. Pertama yang pasti silahkan login ke blogger.
2. Kemudian masuk ke menu template lalu klik "Edit HTML".

3. Setelah itu cari kode menu navigasi di template anda, biasanya kodenya terdapat kode css "menu atau nav". Gunakan (Ctrl+F) untuk mempercepat pencarian, atau jika kesulitan anda bisa tanya ke situs penyedia tempate yang anda gunakan.

4. Selanjutnya ganti tanda "#" dengan URL postingan atau url label blog anda, berikut contohnya.

<ul class='menu' id='menunav'>
<li><a class='home' href='/'>Home</a></li>
<li><a href='#'>Adsense</a></li>
<li><a href='http://blogespada.blogspot.com/2016/12/panduan-tutorial-lengkap-membuat-blog.html'>Tutorial Blog</a></li>
<li><a href='#'>Tutorial Software</a></li>
<li><a href='http://blogespada.blogspot.com/search/label/Template'>Template</a></li>
<li><a href='#'>Game</a>
<ul>

5. Terakhir tinggal simpan template.

Nah sudah pahamkan mengenai cara mengisi menu navigasi dengan url postingan atau label, demikian artikel mengenai tutorial blog yang dapat saya bagikan dan semoga berhasil.