Postingan

Menampilkan postingan dengan label blogs

Cara merubah tampilan dan posisi tanggal di blog

Artikel kali ini saya akan c oba bagikan cara merubah tampilan tanggal di blog 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, sele...

Cara mengganti background blog dengan gambar

Cara mengganti backgroun d blog dengan gambar, secara keseluruhan. B ackground 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 da ri backgorund gambar yang akan diguna kan.     repeat-x gambar mengulang kesamping. bisa diganti dengan repeat-y untuk gambar mengulang ke bawah atau no-repeat gambar tidak berulang. ...

Cara merubah tampilan blockquotes diblog

Blockquotes biasanya di gunakan untuk memperjelas tulisa n, 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 > Tamba hkan 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 " d...

Cara mempercepat loading blog lanjutan

Untuk mempercepat loadi ng 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 pad a 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/AVvXsEirCfr837T_A7xcKo5BWb0HFSm2-9ztCwkJQ6ElCgu-211pLZu_EAKN8FYCGUeKSPTlefeRRxAN9PMR7HrxSiAZgQy1_r5_li7kH67nW8qUIzDlBzxUSx1RAAeb6_LwkJv...

Merubah tampilan sidebar dan posting blog

cara merubah tampilan side bar dan posting blog. Menggunakan kode borde r, 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 hala man dasbor pilih pengaturan tata le tak.     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 {     ...

Tanda Penulis di Kotak Komentar Blog

Cara membuat tanda penulis/a uthor dikotak komentar blog. Seperti gam bar 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 hala man dasbor pilih pengaturan Te mplate.     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/AVvXsEhGHgFVmxlkOeKA0_yLJ43KVEIzn7_4xKocZDFlQlGekA_e74F9G_CW60s2rJ6HWzyvMzmhUht_NL0owVHPiMfiA3y9J7fdxtj7OyebCkDGATk1ZZk9r46eSuRfkMylc6RzFEP...

Cara membatasi jumlah artikel di Label

Cara membatasi jumlah art ikel di label atau kategori. Membatasi ya ng 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 me lihat artikel2 dengan label desain blog, jumla hnya 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 ...

Cara membuat author dibawah posting blog

Cara membuat author dib awah posting blog. Dengan menambahkan a uthor 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 keb logger, pilh pengaturan tem plate.     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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKp3q9NG3l6JaxGfHKHy-De-MlwiwqX0WcBHxY-rTj8Xrwt_97cQYeviTJ4-aa2QMcKFR2I7P65bEljfOLx60S3eAdRxuCJBdoll1Tq95q_G0jKTS9YMPs-GxyF_6ydxoRn9U-rA83h-Ec/s361/Fandra%2520Juani.jpg'/>     <div class='Penulis'>  ...

Modifikasi baca selengkapnya versi Blogger

Cara modifikasi baca seleng kapnya versi blogger. Baca selengkapnya fun gsinya 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 ba ca selengkapnya versi blogger dengan menam bahkan 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 das bor pilih pengaturan tem plate.     Lalu klik edit HTML dan cari kode <div class='jump-link'>. Dan ganti dengan kode dibawah ini.     <div class='jump-link' style='t...

Cara merubah tampilan kotak komentar blog

Cara merubah tampilan kot ak komentar blog, agar terlihat lebih r api. 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 me rubah tampilan kotak komentar blog. Ikuti la ngkah-langkah dibawah ini.     Login ke blogger, pili p engaturan Tata Letak > De sainer 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%);}     ....

Cara mengganti poskan komentar dengan gambar

Cara mengganti tulisan posk an komentar yang berada di atas kota k 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 for mat 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 pos kan komentar dengan gamb ar <img src="https...

Cara memasukan kode HTML, Css, Script diposting blog

Untuk memasukan kode ht ml, css, script diposting blog sebenar nya 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 h tml, css, script diblog kita terlihat rapi. Kita da pat memasukannya ke dalam satu kotak script. Berikut caranya.  ...

Cara merubah warna block di blog

Cara merubah warna block di blog. Block disini maksudnya, warna tulisan dan juga background pada saat kita klik tulisan lalu kita tahan dan tarik sehingga ada warna yang terlihat. Block biasanya digunakan untuk mengcopy tulisan yang ada diwebsite atau blog. Block sederhananya berwarna biru langit di backgroundnya dan juga warna hitam ditulisannya. Disini kita akan mencoba merubah warna dari background dan warna tulisannya dengan warna yang kita inginkan. Contohnya seperti gambar dibawah ini. Cara merubah warna block di blog Seperti contoh gambar diatas. Backgrou nd 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 halam an dasbor pilih pengaturan tem plate.     Lalu klik edit HTML dan cari kode ]]></b:skin> lalu masukan kode berikut ini diatasnya.     ::select...

Membuat widget hanya tampil dihalaman tertentu

Tips dan trik kali ini saya a kan bagikan artikel tentang cara membuat widg et 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 k ode 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, d an pilih pengaturan Tem plate.     Klik edit HTML dan cari kode follow by email(gunakan Ctrl+f untuk memudahkan pencarian).     <b:widget id='FollowByEm...

Cara mengatur spasi tulisan di blog

Tips dan Trik kali ini adalah te ntang cara mengatur spasi tulisan di blog. Sp asi 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 k an, perbedaan antara spasi atau jarak koson g 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 ca ri kode ]]></b:skin> dan masukan kode beriku...

Cara mengatur spasi tulisan di blog

Tips dan Trik kali ini adalah t entang cara mengatur spasi tulisan di blo g. 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, p erbedaan antara spasi atau jarak kosong antar bari s 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 masuk an kode beriku...

Cara membuat menu HTML dan Css

Cara membuat menu h tml dan css serta cara mengisi menu ter sebut 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 m enu yang lainnya. Seperti Profil, Con tact, 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...

Cara merubah bullet list diposting blog

Cara merubah tampilan b ullet list diposting blog menggunakan g ambar. 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 > T ingkat Lanjut > Tambahkan Css.     Lalu copi kode berikut dan pastekan kedalam kotak tambahkan Css.     .post ul {     list-style:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCa3b-oKWSsbekUz86nW1H0nc9xc9NJOIwabm4Ra1Ll-vde3nBaYxVVlnar9mFIZNpIs0JRjOgW4UlYDYZ5qIlajPbdimePrqIUZE9NQTgXq2IGVT36y_jRNrK4rJ6rL9qBJOdQGINU6V0/s12/bullet%2520list.gif);}     Selanjutnya Klik terapkan ke blog, selesai. Keterangan...

Cara membuat tulisan link berputar

Artikel kali ini saya akan c oba 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 a kan berputar ketika di sentuh oleh mouse. Sekara ng, 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 leta k.   ...

Title otomatis pada link label blogger

Cara menambahkan title di setiap link label yang ada di blogger . Title merupakan attribute yang digunakan untuk memberikan keterangan dari sebuah link. Untuk melihat link yang ada titlenya, coba arahkan mouse ke link label, maka akan ada tulisan dengan background putih yang keluar. 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 mem buat artikel title link disetiap judul posting blog. F ungsinya 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 hala man dasbor pilih pengaturan templat e. ...