Postingan

Menampilkan postingan dengan label CSS

Cara Membuat Safelink Random Post di Blog Utama Paling Mudah

Gambar
Safelink Random Post di Blog Utama ini tidak membutuhkan bantuan template orang lain, melainkan menggunakan template pribadi kita masin-masing atau bahkan template favorite kita. Kali ini meneruskan postingan dari yang sebelumnya yakni " Cara Membuat Safelink di Blog Utama Paling Lengkap dan Sangat Mudah ", pada postingan tersebut sangat lengkap sekali, karena terdapat gambar - gambar pada langkahnya dengan tujuan untuk mempermudah mempraktikan. Untuk cara kali ini beda, yakni link safelink yang dituju adalah random post atau postingan acak. Manfaat yang didapatkan selain kita berhasil membuat Blog Utama memiliki halaman Safelink yakni sebagai berikut. Link safelink yang dituju tidak hanya satu halaman saja melainkan secara Random Post / Postingan Acak Tidak ribet untuk membuat scriptnya Script disederhanakan sedemikian mungkin Mudah untuk dipraktikan Tidak menggunakan berbagai macam CSS yang membuat kita bingung Kita menjadi tahu fungsi script dari jalanya Safelink Untuk apa...

Cara Meringankan Tampilan Template Blog Tanpa CSS yang Berlebihan

Gambar
CSS singkatan dari Cascading Style Sheets yang berfungsi mempercantik tampilan pada Blog Kalian, dengan demikian pengunjung yang berada di Blog kalian merasa nyaman untuk membaca artikel atau tulisan - tulisan yang telah Kalian Publikasikan pada Blog Kalian. CSS sendiri dapat dibuat sendiri pada Edit HTML Tema Blog Kalian, akan teteapi memerlukan keahlian yang cukup untuk menuliskan kode - kode CSS tersebut. Biasanya bagi mereka yang malas atau belum mampu untuk menuliskan kode - kode CSS yang begitu rumit, mereka menginstal Script CSS pada Edit HTML Tema pada Template Blog, dengan begitu Kita tidak perlu susah - usah lagi untuk membuatnya. Tetapi kabar buruknya Script yang terinstal pada Edit HTML Tema Blog akan memperlambat kinerja atau perfoma pada tampilan Blog, sehingga Blog menjadi berat ketika di Load maupun ditampilkan yang mengakibatkan pengunjung menjadi tidak mau kembalik lagi pada Blog Kalian. Jika Kalian ingin mengecek kecepatan Blog Kalian, silahkan kunjungi Web atau hala...

Cara Membuat Sitemap atau Daftar Isi Blogger Rapi dan Keren

Gambar
Sitemap atau daftar isi blog sangat penting untuk menampilkan halaman yang didalamnya berisi tentang informasi untuk pengunjung agar mereka mengetahui seluruh isi artikel di blog. Jadi artikel atau tulisan apa saja entah itu terbaru atau terdahulu ( postingan lama ) yang Kita Publikasikan didalam Blog akan terdaftar pada sitemap sehingga pengunjung puas dengan informasi yang Kita bagikan. Membuat Sitemap/Daftar Isi Blogger sangatlah sederhana dan mudah, tergantung pembawaan Kita seperti apa. Kebetulan cara yang akan saya bagikan ini adalah cara yang sangat mudah sekali untuk dipraktikan sehingga untuk Kita yang belum begitu paham dengan CSS maupun HTML, beruntunglah Kalian mengunjungi artikel yang telah kita bahas kali ini. Ada begitu banyak cara untuk membuat Sitemap di Blogger, bahkan ratusan orang membuat tutorialnya pada Blog mereka masing - masing bahkan para Blogger Profesional seperti: Mas Timon Mas Timon Pemilik Timon Adiyoso adalah salah satu Blogger Indonesia yang merupakan ...

Membuat Tampilan Tombol Berwarna Warni

Gambar
Tampilan dalam penyajian sebuah postingan atau artikel adalah hal yang paling penting dalam bidang SEO, alasanya karena dari segi tampilan, pengunjung pun akan senang dannyaman ketika berkunjung di halaman postingan Anda. Dengan begitu pengunjung akan sering mengunjungi halaman yang telah Anda buat bahkan pengunjung tersebut kemungkinan besar akan berlangganan di Blog Anda atau wesbite Anda. Apakah Tombol dapat dikreasikan dengan bagus? Untuk jawaban dari pertanyaan di atas cukup simple yakni bisa. karena hanya dengan meenggunakan sebuah HTML CSS Anda dapat mengkreasikanya sesuka hati. Tidak cukup hanya warna dasar atau hanya warna itu - itu saja, Anda dapat merubahnya atau mengkreasikannya dengan menambah beberapa warna dalam tampilan tombol tersebut. Yang perlu Anda lakukan untuk Membuat Tampilan Tombol Berwarna Warni sebagai berikut: 1. Login Blogger.com. 2. Cari kode </style> pada Tema > Edit HTML. 3. Copas (copy-paste) kode di bawah ini sebelum kode </style> . .bt...

Membuat Tombol Show All pada Widget Cloud Label

Gambar
Seperti kita ketahui, label widget adalah salah satu elemen penting dalam sebuah blog yang berfungsi untuk memberikan informasi kepada pengunjung untuk melihat posting yang telah diberi label sehingga pengunjung dapat mencari posting dengan kategori apa saja di blog. Terkadang jika kita memiliki blog dengan banyak label pos hingga puluhan hingga ratusan tentunya akan sedikit mengganggu penampilan blog. Tapi ini bisa diatasi dengan membatasi jumlah label yang muncul atau bisa juga dengan Mengganti Fungsi Widget Label menjadi Dropdown sehingga tampilan blog terlihat lebih rapi dan minimalis. Lihat Juga: Cara Sederhana Membuat Tombol Menu Dropdowns Yang perlu Anda lakukan untuk Membuat Tombol Show All di Widget Cloud Label sebagai berikut: 1. Login ke blogger.com. 2. Cari kode di bawah ini pada Tema > Edit HTML. <b:widget id='Label1' locked='false' title='Labels' type='Label' version='1'>...</b:widget> Pastikan sebelumnya Anda telah...

Cara Sederhana Membuat Tombol Menu Dropdowns

Gambar
Tombol adalah suatu alat yang dimana fungsinya apabila ditekan akan menjalankan perintah yang telah disetel atau diatur. Menu adalah suatu alat yang dimana fungsinya untuk membagi kategori atau halaman tertentu yang telah disetel atau diatur. Dropdowns adalah suatu alat yang dimana fungsinya untuk menampilkan sub menu kebawah. Jadi jika kita simpulkan Tombol Menu Dropdowns adalah Suatu alat yang berada pada Menu dan terdapat fungsi menampilkan sub menu pada Tombol tersebut. Lihat Juga: Membuat Fading Buttons Dengan Memanfaatkan Fungsi Hover Opacity Result: Press Yang perlu Anda lakukan untuk Membuat Tombol Menu Dropdowns sebagai berikut: 1. Login ke blogger.com . 2. Cari kode </head> pada Tema > Edit HTML. 3. Copas (copy-paste) kode di bawah ini sebelum kode </head> . <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/> 4. Cari kode </style> pada Tema > Edit HTML. 5....

Membuat Fading Buttons Dengan Memanfaatkan Fungsi Hover Opacity

Gambar
Fading Buttons adalah Memudarkan warna atau mengganti warna saat cursor Kita arahakan ke Button / tombol, bahkan kita bisa mengaktif fungsi tersebut saat ditekan. Yang perlu Anda lakukan untuk Membuat Fading Buttons Dengan Memanfaatkan Fungsi Hover sebagai berikut: Lihat juga: Cara Membuat Button on Image Yang Sangat Elegan 1. Login ke blogger.com. 2. Cari kode  </style>  pada Tema > Edit HTML. 3. Copas (copy-paste) kode di bawah ini sebelum kode  </style> . .btn { background-color: #ef0000; border: none; border-radius: 8px; color: white; padding: 16px 32px; text-align: center; font-size: 28px; margin: 4px 2px; opacity: 0.6; transition: 0.3s; } .btn:hover {opacity: 1} 4. Bila sudah memasang style di atas pada Tema > Edit HTML, sekarang simpan tema Anda. 5. Sekarang untuk menerapkan kode di atas, tambahkan kode HTML di bawah ini di dalam postingan pada tab HTML  (bukan compose) . <button class="btn">Arahkan Kursor Kesini...

Membuat Animated Buttons Menarik

Gambar
Buttons / Tombol  adalah suatu alat yang dimana fungsinya apabila ditekan akan menjalankan perintah yang telah disetel atau diatur. Animated / Animasi adalah suatu tampilan dengan berbagai macam bentuk. Jadi jika kita simpulkan Animated Buttons  adalah suatu alat dengan berbagai macam bentuk tampilan yang berfungsi untuk menjalankan perintah. Lihat juga: Cara Mudah Membuat Social Media Buttons Dengan Modifikasi CSS Terdapat beberapa kode sesuai dengan tampilan yang telah kami sediakan. Yang perlu Anda lakukan untuk Membuat Animated Buttons Menarik sebagai berikut: Membuat Tombol Animasi Menarik #1 1. Login ke blogger.com. 2. Cari kode </style>  pada Tema > Edit HTML. 3. Copas (copy-paste) kode di bawah ini sebelum kode  </style> . .button { padding: 12px 24px; font-size: 28px; text-align: center; cursor: pointer; outline: none; color: #fff; background-color: #4CAF50; border: none; border-radius: 15px; box-shadow: 0 9px #999; } .b...

Cara Membuat Button on Image Yang Sangat Elegan

Gambar
Button on Image adalah suatu tampilan gambar yang terdapat tombol di dalamnya. Yang perlu Anda lakukan untuk Membuat Button on Image Yang Sangat Elegan sebagai berikut: Lihat juga: Membuat Animated Buttons Menarik 1. Login ke blogger.com. 2. Cari kode  </style>  pada Tema > Edit HTML. 3. Copas (copy-paste) kode di bawah ini sebelum kode  </style> . .container { position: relative; width: 100%; } .container img { width: 100%; height: auto; } .container .btn { position: absolute; top: 50%; left: 20%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); background-color: #e700ff; color: black; font-size: 28px; padding: 12px 24px; border: none; cursor: pointer; border-radius: 5px; text-align: center; } .container .btn:hover { background-color: #490051; color: white; } 4. Bila sudah memasang style di atas pada Tema > Edit HTML, sekarang simpan tema Anda. 5. Sekarang untuk menerapkan kode di atas, tamb...