Postingan

Menampilkan postingan dari September, 2016

Start Liner - Template Blog SEO Friendly Simple Responsive Hitam Putih

Gambar
Start Liner - Template Blog SEO Friendly Terbaru: Simple, Hitam Putih, Responsive Mobile Friendly, Fast Loading. Unik untuk Blog Pribadi. TEMPLATE blog terbaru ini sederhana dan bersih ( simple and clean ), selain SEO Optimized, Mobile Friendly, dan Fast Loading (Ringan). Cocok untuk blog baru Anda dan pas buat blogger yang suka warna hitam-putih (back and white). Start Liner - Template Blog Simple SEO Friendly Terbaru DEMO  |  ORDER  |  Rp100.000 Data Template Mobile Friendly : Awesome! This page is mobile-friendly. Skor SEO 100% Mantap! Fast Loading - Skor Speed: Di bawah 2 Detik, Mantap! Schema Org Microdata  : Mantap! Structured Data Testing Tool : All Good  Feature Start Liner - Template Blog Simple SEO Friendly Terbaru: SEO Optimized,  Fast Loading,  Responsive - Mobile Friendly ( Test ) AdSense Ready,  SEO Breadcrumbs,  Social Share Button Lengkap. Next Previous Judul Posting Related Post with Thumbnail Image Numbered Na...

Membuat Auto Readmore Halaman Depan Dua Kolom Responsive

Gambar
Cara Membuat Auto Readmore Halaman Depan Dua Kolom Responsive.   Pure CSS tanpa JavaScript sehingga Fast Loading. Auto Readmore Dua Kolom. Lihat DEMO . Tampilan halaman depan blog, terutama template bawaan blogger, umumnya satu kolom. Kita bisa mengubahnya menjadi dua kolom agar lebih banyak posting blog yang dilihat atau disajikan di halaman depan. Bagi yang blognya belum menggunakan autoreadmore, yaitu tampilan posting berupa judul tulisan, gambar thumbnail, dan cuplikan isi tulisan (snippet/ringkasan/summary), ada dua tahap untuk membuatnya. Membuat auto readmore-nya dulu.  Menjadikannya dua kolom. LANGKAH KE-1: MEMBUAT AUTO READMORE 1. Template > Edit HTML 2. Pasang Kode CSS Imaga Thumbnail berikut ini di atas kode ]]></b:skin> .thumbnail-post { width:100px; height:100px; float:left; margin:0px 10px 0px 0px; } 3. Ganti kode <data:post.body/>  yang kedua atau ketiga dengan kode HTML/XML Auto Readmore berikut ini : <b:if cond='data:blog.pageType != ...

Cara Mengatasi Semua Error Structured Data: Image, Author, Updated, Publisher

Gambar
Cara Mengatasi Error Structured Data Schema Org: Missing Image, Updated, Author, blogId, postId, dll di Testing Tools Google . TEMPLATE blog yang menggunakan Microdata Schema Org biasanya mengalami error & warning saat dicek di Structured Data Testing Tool . Di beberapa posting sebelumnya CB sudah share cara mengatasi error warning ini, namun lebih ke per kasus. Kali ini CB gabungkan menjadi lengkap. Template blog yang menggunakan schema org akan "sedikit istimewa di hasil pencarian Google" ( a little bit special in Google search results) karena memiliki data terstruktur yang memudahkan mesin telusur melakukan indeks. Menurut Kissmetrics , schema markup ini merupakan salah satu evolusi terbaru dalam SEO. Microdata schema org markup adalah bentuk baru optimisasi yang sangat powerful dan dapat meningkatkan rangking dan jumlah pengunjung blog. One of the latest evolutions in SEO is called schema markup. This new form of optimization is one of the most powerful, but least...

Cara Membuat, Menghapus, Keluar Grup WhatsApp (WA)

Gambar
Cara Membuat, Menghapus, dan Keluar dari Grup WhatsApp (WA) Tanpa Diketahui Member Lain. BAGAIMANA Cara Membuat Grup, Menghapus Grup, dan Keluar dari Grup WhatsApp (WA)?  Yang paling banyak ditanyakan adalah cara keluar dari Grup WhatsApp tanpa diketahui anggota lain. Lama-lama memang WA ini cukup mengganggu, jika kita dimasukkan ke grup tanpa izin kita. Mau keluar, 'gak enak, karena ada notifikasi "08211XXXX Left" atau "Nama Kita Left". Jika keluar dari Grup Facebook sih gampang, dan tidak ada pemberitahuan ke member lain bahwa kita left-group.  Nah, di WA lain. Kita masuk ke sebuah grup kebanyakan karena dimasukkan orang lain, kecuali kita sendiri yang membuat grup dan menjadi adminnya. Berikut ini panduan lengkap seputar Grup WhatsApp yang sangat terpercaya --termasuk cara keluar dari grup-- karena disampaikan langsung oleh situs resmi WhatsApp . Cara Menggunakan Chat Grup Chat Grup atau Grup WA bisa menampung anggota hingga 256 orang sekaligus. Awalnya cum...

Recent Post per Label dengan Gambar Thumbnail Horizontal

Gambar
Cara Memasang Widget Recent Post per Label dengan Gambar Thumbnail Horizontal (Image Gallery) . CARA memasang wodget Latest Post per Categroy with Image Thumbnail ini sangat mudah. Tidaka usah edit html, tapi cukup di Dashboard Blogger. Tampilannya seperti ini: Anda tinggal sesuaikan saja lebar gambarnya dengan lebar template blog Anda, di bagian kode CSS var imgDim = 146;  menjadi lebih kecil atau lebih besar. Cara Memasang Widget Recent Post per Label dengan Gambar Horizontal 1. Layout > Add a Gadget > pilih "HTML/Javascript" 2. Masukan kode ini: <center> <div id='bp_recent' style='margin-bottom:15px'></div> <div class='bp_footer'> <script style='text/javascript'> var postTitleOriginal,  myLink, myDiv, myImage,mySeparator; var    main; var float_clear=false; var flag = 0; function bprecentpostswiththumbnails(json) { for (var i = 0; i < numberOfPosts; i++) { if (i == json.feed.entry.length) break; var s; ...

Pengertian Font Awesome dan Cara Menggunakannya di Blogger

Gambar
Pengertian Font Awesome dan Cara Menggunakannya di Blogger FONT Awesome adalah huruf dan/atau angka yang membentuk gambar dalam desain blogger atau website. Itu pengertian font awesome secara praktis. Secara harfiyah, font awesome artinya 'huruf yang mengagumkan'. Menurut Wikipedia , Font Awesome is a font and icon toolkit based on CSS and LESS. It was made by Dave Gandy for use with the Twitter Bootstrap, and later was incorporated into the Bootstrap CDN. Font Awesome has a 20% market share among those websites which use third-party Font Scripts on their platform, ranking it on a second place after Google Fonts. Font Awesome adalah font ikonik. Icon-icon yang digunakan berbasis gambar vector yang bisa diatur ukurannya sesuai ukuran font.  Trend desain widget blogger masa kini banyak menggunakan font awesome ini. Misalnya, Icon Media Sosial di Sidebar atau Tombol Social Share . Navigasi Menu juga bisa dipercantik dengan menggunakan font awesome, seperti Menu Desain Blog di...

Cara Memasang Link Media Sosial di Bawah Posting Blog

Gambar
Cara Memasang Link Media Sosial di Bawah Posting Blog untuk Social Media SEO. MEDIA SOSIAL (Socia Media) memegang peran penting dalam mempopulerkan blog. Publikasi posting di media sosial bahkan termasuk teknik SEO yang dikenal dengan sebutan Social Media Optimization (SMO) dan " Social Signal ". Memasang link media sosial di blog juga merupakan teknik meningkatkan likers atau follower, yang nantinya pengaruh juga ke jumlah pengunjung blog. Berikut ini Cara Memasang Link Media Sosial di Bawah Posting Blog yang kodenya diambil dari  Memasang Kotak Berlangganan Simple plus Media Sosial di Sidebar Blog . Contoh atau demonya ada di bawah posting ini. Tentu saja, sebelum memasang link medsos di blog ini, Anda sudah harus punya dulu akun media sosialnya, terutam Facebook, Twitter, Google Plus, dan Feedburner . Cara Memasang Link Media Sosial di Bawah Posting Blog 1. Template > Edit HTML 2. Copas kode berikut ini di bawah kode <div class='post-footer-line post-footer-li...

Cara Memasang Tombol Social Share di Halaman Statis Blog

Gambar
Cara Memasang Tombol Share Twitter, Facebook, dan Google Plus di Halaman Statis Blog UMUMNYA , social share button, yaitu tombol bagikan ke Facebook, Twitter, Google Plus , dll. hanya muncul di halaman posting ( single post ). Tidak tampil di halaman statis ( static page ), misalnya halaman About, Kontak, Disclaimer, dan sebagainya. Itu karena umumnya, tips-tips social share button menggunakan Tag Kondisional halaman dalam saja, yaitu kode <b:if cond='data:blog.pageType == &quot;item&quot;'> Misalnya seperti ini: <b:if cond='data:blog.pageType == &quot;item&quot;'> <!-- Kode Social Share di Sini --> </b:if> Cara Memasang Tombol Social Share di Halaman Statis Blog Bagaimana jika ingin memunculkan tombol social share juga di halaman statis? Gampang banget. Ganti saja Tag Kondisionalnya menjadi tag yang memunculkan social share button di halaman posting sekaligus halaman statis, yaitu <b:if cond='data:blog.url != data:blog.h...

Cara Membuat Judul Posting Blog Dropdown

Gambar
Cara Membuat Judul Posting Blog Dropdown.  Saat link judul diklik, tidak membuka halaman baru, tapi membuka isi tulisan. Demonya ada di Template Blog Help Desk . Silakan klik judul di sana, akan kebuka isi tulisan, tanpa membuka halaman baru (Single Post). Penampakan Judul Halaman Depan. Penampakan Judul & Isi Posting Setelah Diklik.* Kalau Anda berminat menggunakan template tersebut, ada di Template Magazine Terbaru . CB belum tahu apa nama istilah desain judul posting model unik begini. Yang jelas, di kodenya sih ada nama Archiv Post Head. Kita sebut saja desain Judul Posting Dropdown atau Toggle Post . Jika blog judul-judul posting blog halaman depan Anda mau dibuat seperti Help Desk itu, diklik judul keluar isi berita, maka berikut ini cara memasangnya: 1. Template > Edit HTML 2. Copas kode berikut ini di atas kode </head> atau </body>     <script type='text/javascript'>       //<![CDATA[       $(document).re...

Memasang Widget Daftar Posting Terbaru di Halaman Dalam dan Statis

Gambar
Cara Memasang Widget Daftar Posting Terbaru di Halaman Dalam dan Statis WIDGET Recent Posts, Latest Post, Posting Terbaru, atau Artikel Terbaru sebaiknya cukup muncul di halaman dalam (single post) dan halaman statis saja. Kalau halaman depan (homepage) 'kan umumnya sudah ada daftar posting terbaru. Nah, supaya tidak terjadi "link ganda", juga mempecepat loading blog, sebaiknya widget recent posts cukup muncul di halaman dalam dan halaman statis, seperti di Blog CB ini . Cara Memasang Widget Daftar Posting Terbaru di Halaman Dalam dan Statis Cara mengatur widget tampil di mana saja sesuai kebutuhan dan keinginan, harus menggunakan Tag Kondisional Blogger . Langkahnya: 1. Pasang Dulu Widget Recent Postnya (Baca: Cara Pasang Recent Post di Blogger ). 2. Pasang Tag Kondisional: Template > Edit HTML 3. Cari widget yang baru dipsang tadi, misalnya seperti ini:    <b:widget id=' Feed4 ' locked='false' title='Terbaru' type='Feed' version=...

Lebar Layout Dashboard Blogger Menyempit, Edit Widget Tertutup

Gambar
Lebar Layout Dashboard Blogger Menyempit, Edit Widget Tertutup UKURAN dashboard blogger menyempit. Menu paling terpengaruh adalah Layout (Tata Letak) jadi menyempit. Menu edit widget jadi tertutup dan sulit melakukan perubahan di gadget. Ukuran dashboard blogger yang tadinya 100%, kini menjadi 850 pixel saja di layar komputer. Jika ukuran layout melebih 850px, maka muncul "overflow-scroll" seperti dalam gambar di atas. Maka, untuk melakukan adaptasi atau penyesuaian, CB pun melakukan perubahan, dari lebar layout 970px menjadi 850px. Demikian pula ukuran layout widget header, sidebar, main-wrapper, disesuaikan. Sebaiknya menggunakan prosentase. Layout pun normal kembali, tidak acak-acakan lagi. Ini kode layout yang CB gunakan: KODE AWAL body#layout ul{list-style-type:none;list-style:none} body#layout ul li{list-style-type:none;list-style:none} body#layout .outerpic-wrapper{width:970px} body#layout .content-wrapper{width:970px} body#layout .header-wrapper{width:970px} body#lay...

Cara Menyembunyikan Deskripsi Header Blog

Gambar
Cara Menyembunyikan Deskripsi Header Blog TIPS berikut ini tidak usah diterapkan jika Anda menggunakan logo gambar (image) di header blog, karena deskripsi header blog sudah otomatis tidak akan muncul dengan settingan widget header sebagai berikut, yaitu mencentang " Instead of title and description ". Namun, jika Anda tidak menggunakan logo gambar untuk nama blog atau judul blog (header), maka deskripsi blog akan muncul. Akan tampak tidak bagus jika deskripsi blog Anda panjang, apalagi nyampe maksimal 500 karakter seperti ini: Kita bisa menyembunyikan deskripsi tersebut dengan mudah, sehingga menjadi seperti ini: Cara Menyembunyikan Deskripsi Header Blog Ada dua cara. Dua-duanya diawali dengan klik Template > Edit HTML Cara #1 Tambahkan kode berikut ini di atas kode ]]></b:skin> .Header .description{display:none} Cara #2 Cari kode <div class='descriptionwrapper'> dan tambahkan kode style='display:none'  di dalamnya menjadi begini: <di...

Mengatasi Error datePublished Structured Data Blogger

Gambar
Cara Mengatasi Error datePublished Structured Data Blogger . Error datePublished merupakan salah satu kesalahan micro data template blog saat dites di Structured Data Testing Tool  Google. Penyebab utama error datePublished (tanggal publikasi), meski template blog dinyatakan "bebas error", adalah setting format tanggal dan waktu di dashboard blogger. Jadi, bukan templatenya yang error, tapi settingan waktu. Cara Mengatasi Error datePublished Structured Data Blogger Perhatikan error berikut ini saat CB ngetes blog demo CB Theme --template modifikasi bawaan blogger jadi responsive dan seo friendly. Dari gambar di atas, Google tidak mengenali format waktu 00:00:00 PM. Maka untuk mengatasinya, kita ke Dashboard Blogger: 1. Klik "Setting" > klik "Language and formatting? 2. Lakukan Setting seperti ini: 3. Save! Saat diuji kembali di Structured Data Testing Tool, hasilnya 0 Error dan 0 Warning alias "All good". Demikian sekilas Mengatasi Error datePubl...

Kode Related Posts Keren dengan Gambar Thumbnail

Gambar
Cara Memasang Kode Related Posts dengan Gambar Thumbnail di Bawah Posting Blog. POSTING ini "sekadar" menyimpan kode Related Posts Keren dengan Gambar Thumbnail yang dipasang di blog CB . Kode Posting Terkait untuk Blogger ini bersumber dari kode related post yang CB share sebelumnya di posting Membuat Sendiri Related Post plus Gambar Thumbnail di Blog . Kode entry terkait atau artikel terkait berikut ini sudah dimodifikasi hingga tampil seperti di ada di bawah tiap posting. Anda yang blognya belum memasang widget Related Posts, bisa gunakan yang ini. Yang sudah ada, dan mau ganti, hapus dan replace saja kode related postnya dengan yang di bawah ini. Hanya ada tiga kelompok kode, yaitu CSS, HTML, dan Javascript.   CB share dua jenis tampilan related post dengan gambar thumbnail: vertikal dan horizontal. 1. Related Post Gambar Vertikal Contohnya seperti di blog CB ini dan gambar di atas. KODE CSS: Disimpan di atas kode ]]></b:skin> atau </style> #related_po...