Posts

Showing posts with the label tips dan trik blogger blogspot

Cara Lengkap Buat Blog Valid HTML5

Image
Cara Lengkap Buat Blog Valid HTML5
Sobat bloggers, pada posting saya sebelumnya yaitu Tips dan Cara Validasi HTML5 Pada Halaman Posting. Nah kali ini kelanjutan dari tips membuat blog valid html5, yaitu dengan membuat blog sepenuhnya valid html5. Sobat bloggers, silahkan ikuti panduan di bawah ini :

Tips dan Cara Lengkap Membuat Blog Jadi Valid HTML5:

Supaya gambar (image) bisa dibaca oleh search engine google maka harus dilakukan perubahan

1. Pada bagian gambar (image) sebaiknya Anda gunakan format .png
Bungkus kode image dan berikan atrribut Tag /
dengan menambahkan tag title="Titel Gambar" dan img alt="Kode Gambar"

contoh :
<a href="URL Anda"><img alt="Titel Gambar" src="http://anaktimor-17.blogspot.com/blog-valid-html5.png" alt="Kode Gambar"/></a>
2. Hilangkan/hapus kode imageanchor="1" pada tag img.
Hilangkan/hapus kode border="0" pada tag img.
Menghapus kode yang tidak valid HTML5 da…

Percepat Loading Komentar dengan Memperkecil Avatar di Blogger/Blogspot

Image
Percepat Loading Komentar dengan Memperkecil Avatar di Blogger/Blogspot
Template.Id - Sobat salah satu penyebab beratnya loading blog adalah besarnya ukuran gambar / image pada komentar. Walaupun sobat memperkecil dengan CSS, tetap saja ukuran asli avatar adalah 512x512px. 

Untuk mencobanya, silahkan klik kanan pada avatar komentar yang ada di blog sobat, kemudian klik kanan pada buka gambar di tab baru. Sebagai contoh, avatar saya sebelum saya rubah ukurannya seperti gambar ini :

Pasang Tombol Social Media dengan Tooltip di Blogger/Blogspot

Image
Pasang Tombol Social Media dengan Tooltip di Blogger/Blogspot,  - Sobat blogger berikut ini saya share cara Pasang Tombol Social Media dengan Tooltip di Blogger/Blogspot terbaru. Nah sobat pasti sudah tau kan fungsi dari tombol social media, jadi dengan tombol ini kita bisa mengshare artikel kita ke media lain.

Cara Menandai Postingan Terbaru di Blog

Image
Cara Menandai Postingan Terbaru di Blog
sobat bloggers...cara ini adakah dengan menampilkan posting terbaru dengan sebuah tanda seperti ribbon. Nah untuk mencobanya silahkan ikuti langkah"-nya di bawah ini :

Masuk ke edit HTML lalu cari kode ]]></b:skin> atau </style>

lalu copy kode di bawah ini dan taruh di atas salah satu kode di atas.

.newer-post { margin: 50px auto; width: auto; height: auto; background-color: none; position: relative; } .newer-post2 { font: bold 20px Sans-Serif; text-align: center; transform: rotate(45deg); position: relative; padding: 7px 0; left: -25px; top: 7px; width: 160px; background-color: blue; color: #fff; box-shadow: 0px 0px 3px rgba(0,0,0,0.3); } .newer-post3 { width: 86px; height: 88px; overflow: hidden; position: absolute; top: -4px; right: -4px; }

berikutnya Anda cari kode ini ( masih di dalam edit template) ....<b:in…

Cara Membuat Pesan Komentar Di Bawah Editor Komentar Blogger

Image
Cara Membuat Pesan Komentar Di Bawah Editor Komentar Blogger,Anaktimor17 Blog - sobat blogger kembali saya bagikan tips untuk Anda . Pada kali ini saya mencoba share tips blogger yang saya dapat dari blognya Kompi Ajaib  dan tips dari +Kang Ismet. Untuk membuat pesan komentar di bawah

Cara Membuat Ucapan Selamat Kepada Komentator Pertamax di Blog

Image
Cara Membuat Ucapan Selamat Kepada Komentator Pertamax di Blog, Anaktimor17 Blog - Sobat blogger,istilah PERTAMAX muncul perama kali di Kaskus, Nah bagi pencinta kaskuser tentunya sudah tidak asing lagi dengan istilah ini. Pertamax diambil dari dua kata, Pertama dan X (artinya: pertama kali),

Berbagai Macam Efek Transisi Pada Gambar

Image
Berbagai Macam Efek Transisi Pada Gambar , Anaktimor17 Blog - Sobat blogger, ada beberapa efek transisi ini digunakan untuk memberi efek yang cukup keren pada gambar di blogspot. Dibawah ini adalah "Demo" dan kode "Css3" dari gambar yang diberi efek transisi.

Cara Memunculkan Menu Google Adsense/Penghasilan Di Dashboard Blogger

Image
Cara Memunculkan Menu Google Adsense/Penghasilan Di Dashboard Blogger sobat bloggers, salah satu cara memoneytize blog adalah dengan memasang iklan dari google. Pada posting-posting saya sebelumnya yaitu cara membuat iklan seperti google adsense :


Cara Membuat Iklan Gambar Seperti Google Adsense Cara Pasang/Membuat Iklan Seperti Google Adsense di Blog V2Cara Pasang/Membuat Iklan Seperti Google Adsense di Blog


 Sobat, bagi yang ingin mendaftarkan blog Anda ke google adsense, harusmenampilkan atau memunculkan menu penghasilan di blog Anda. Jika menu tersebut belum ada, Anda tidak mungkin mendaftarkan blog Sobat langsung ke situs resmi google adsense, karena blogger adalah salah satu produk google, seperti halnya youtube, google meminta bila produknya (blogger atau youtube)

                   Jika ingin mendaftar Google Adsense  harus pergi langsung ke situs pruduk google tersebut. Blog yang ada menu penghasilan hanya blog yang berbahasa inggris saja, kalau yang berbahasa indonesia…

Cara Menonaktifkan Comment Form saat Menbalas Komentar

Image
Cara Menonaktifkan Comment Form saat Menbalas Komentar - sobat bloggers, coba Anda perhatikan pada gambar di samping..itu adalah salah satu cara menonaktifkan form komentar saat kita membalas sebuah komentar yang masuk. Dengan cara ini, kita dapat mengurangi loading blog kita khususnya di dalam form komentar blog itu sendiri. Penasaran ingin menerapkannya di blog?? silahkan ikuti  tips di bawah ini:



Di bawah ini, adalah form komentar yang ikut terbawa saat kita membalas komentar blog:

Cara Menonaktifkan Comment Form saat Menbalas Komentar :Anda hanya perlu menambahkan elemen display:none cari kode  di bawah ini, lalu tambahkan elemen display:none  di bawah-nya.ol#threaded-comment-formp, ol.comment-formp{ display:none;}Jika cara di atas tak berjalan lancar, Anda cari kode yang seperti di bawah ini:.commentsol, .commentsul, .commentsli{ margin:0;padding:0;list-style:none;}Terakhir save template Anda :) Demikian tips  Menonaktifkan Comment Form saat Menbalas Komentar yang singkat, sem…

Cara nonaktifkan kode Css/Html yang sudah tidak dipakai lagi

Image
Cara nonaktifkan kode Css/Html yang sudah tidak dipakai lagi - sobat bloggers, mungkin pernah mengalami masalah seperti ini. Dimana kode css/html di blog yang sudah tidak kita gunakan lagi akan di hapus....namun berjalannya waktu kode tersebut ingin kita pakai kembali...jadi harus buka kembali blog dan copy paste sana-sini..yang akhirnya hanya memakan  waktu kita sendiri. Ok, tanpa basa-basi...silahkan ikuti tips sederhana ini:

Cara nonaktifkan kode Css/Html yang sudah tidak dipakai lagi:cara ini sangatlah simple, cuman menambahkan beberapa tag.....\berikut ini saya akan menonaktifkan kode css social share:kode di bawah ini sebelum di nonaktifkan: /* CSS Social Share */ .share-box{background-color:#2c97dd;font-size:14px;padding:10px 0 11px;position:relative;margin-top:10px;color:#fff;} a.more{background:#fff;font-size:16px;font-weight:700;color:#2c97dd;text-align:center;padding:0 6px;margin-top:-6px;} a.more:hover{background:#46515e;color:#fff;} Untuk menonaktifkannya, Anda hanya perl…

Cara Mengatur Hasil Pencarian pada Label Blog

Image
Cara Mengatur Hasil Pencarian pada Label Blog - sobat bloggers, salah satu cara mensiasati pencarian pada label blog adalah dengan menagtur jumlah posting yang akan muncul di hasil pencarian blog. Dengan cara ini, kita dapat membatasi pencarian artikel yang minimal 5-10 artikel dalam satu kali pencarian(kita  hanya perlu memberikan markup + "?max-results=5" dengan nilai pembatas 5-10 ). Gimana tertarik untuk memasanganya?? silahkan ikuti tips di baah ini:

Cara Mengatur Hasil Pencarian pada Label Blog :Anda buka akun blogger, lalu pilih menu Edit HTMLAnda cari kode di bawah ini :<b:widgetid='Label1'locked='false'title='Label'type='Label'><b:includableid='main'><b:ifcond='data:title'><h2><data:title/></h2></b:if><divexpr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'><b:ifcond='data:display == &quot;list&…

Cara Membuat Laman 404/Page Nout Found di Blog Keren

Image
Cara Membuat Laman 404/Page Nout Found di Blog Keren sobat bloggers, pada kesempatan yang baik ini akan saya share cara membuat atau bikin halaman eror 404 di blog super keren. Laman error 404 biasanya di temukan pada artikel yang sudah di hapus, rusak atau belum pernah di buat sebelumnya pada sebuah blog. Untuk desain laman error 404 ini di guanakan kode css3 biar kelihatan keren dan laman ini bekerja pada browser mozila untuk chrome efek awan/cloud tidak muncul. Nah untuk membuat laman eror 404 sangatlah mudah, silahkan anda ikuti tipsnya di bawah ini:


Tips atau Cara Membuat Laman 404/Page Nout Found di Blog Kerenlogin ke akun blog Andapada menu dashboard >> pilih edit htmlcari salah satu kode ini lalu copy script css di bawah ini dan simpan di atas ]]></b:skin> atau</style>#error-page{background:-webkit-linear-gradient(top,#cbebdb 0,#3794c0 120%);background:-moz-linear-gradient(top,#cbebdb 0,#3794c0 120%);background:-o-linear-gradient(top,#cbebdb 0,#3794c0 120%…

Membuat Tulisan Bismillah di Atas Posting Blog

Image
Membuat Tulisan Bismillah di Atas Posting Blog- sobat bloggers masih dalam suasana Ramadhan , maka kali ini akan saya share kepada Anda tips blogger terbaru yaitu pasang tulisan bismillah di atas posting blog . Fungsi-nya selain menunjukan identitas Anda sebagai seorang Muslim dan juga sebagai penghias posting blog kita.

Cara Membuat Tulisan Bismillah di Atas Posting Blog  :Login ke akun blogger AndaPada menu Dashboard >> Edit HTMLCari kode <data:post.body/>.Anda tekan Ctrl+F untuk mempercepat pencarian Biasanya kode <data:post.body/> lebih dari 1 silahkan Anda taruh pada kode <data:post.body/> yang terakhir. Anda copy code html di bawah ini , lalu taruh tepat di atas kode <data:post.body/>.<divclass='post-body entry-content'expr:id='&quot;post-body-&quot; + data:post.id'itemprop='articleBody'><b:ifcond='data:blog.pageType == &quot;item&quot;'><divstyle='text-align: center;'><spans…

Pasang Sitemap Responsive Sederhana di Blog

Image
Pasang Sitemap Responsive Sederhana di Blog - sobat bloggers, salah satu penunjang kelengkapan blog adalah dengan adanya sebuah laman khusu yang menyediakan rangkuman seluruh artikel blog kita. Jadi dengan cara ini dapat memudahkan para pengunjung untuk mencari lebih banyak lagi semua artikel yang ada di blog Anda.


Cara Pasang Sitemap Responsive Sederhana di Blog :Anda login ke akun bloggerMasuk ke menu Edit HTMLcopy kode css di bawah ini, lalu taruh tepat di atas kode ]]></b:skin> atau</style>. #bp_toc{border:1px solid #f5f5f5;background:#ffffff;padding:5px;width:100%;margin-top:10px;}.toc-header-col1, .toc-header-col2, .toc-header-col3{background:#edf1ec;color:#000000;padding-left:5px;width:250px;}.toc-header-col2{width:75px;}.toc-header-col3{width:125px;}.toc-header-col1a:link, .toc-header-col1a:visited, .toc-header-col2a:link, .toc-header-col2a:visited, .toc-header-col3a:link, .toc-header-col3a:visited{ font-size:90%;text-decoration:none;}.toc-header-col1a:hover, .to…

Cara Membuat Tombol Sosial Share Menggunakan CSS3

Image
Cara Membuat Tombol Sosial Share Menggunakan CSS3, LokerJakarta CSS3benar-benar menakjubkan. Ini memberikandesainerwebkemampuanuntuk

Pasang Dialog/Pesan Pembuka Ketika Masuk Blog

Image
Pasang Dialog/Pesan Pembuka Ketika Masuk Blog - tips ini saya ambil dari blog Kompi Ajaib, dimana sangat berguna untuk memberitahukan para pengunjung tentang suatu hal yang penting. Tips ini juga bisa di terapkan pada hari raya tertentu, misalnya pada saat lebaran,dan hari besar keagamaan lainnya. Hal ini tergantung kreatifitas Anda kembali.


Tanpa basa-basi, silahkan Anda ikuti tips dan cara pasang dialog atau pesan pembuka saat masuk blog :

Pasang Dialog/Pesan Pembuka Ketika Masuk Blog Buka akun blog anda , pilih menu edit html dan cari kode ]]></b:skin> atau</style> (tekan CTRL+F)Anda Copy script css di bawah ini dan simpan di atas ]]></b:skin> atau</style>. Anda pilih salah satu css di bawah ini :CSS 1
/* Pesan Pembuka Homepage */ #welcomebox {position: fixed;top: 10%;left: 50%;width: 70%;margin-left: -37%;z-index: 1000000;text-align: center;background: rgba(0, 0, 0, 0.5);padding: 20px 2%;} #welcomebox p{color: #FFF;font-size: 150%;line-height: 1.6em;ma…