Cara Submit URL Fetch As Google di Webmaster Google

Cara Submit URL Fetch As Google di Webmaster Google

Redaksi    23:46   

Salam kompak sobat... Kali ini saya akan membahas sediki artikel yang sangat penting untuk disimak. Karena beberapat perbaikan dari google, kita juga harus ikuti perkembangannya.

Sebelumnya dikebiasaan saya selama ini dalam submit url Google agar terindex dengan mengetikkan kata kunci : add url google, atau add site, sudah tidak berfungsi lagi.

Cara Submit URL Fetch As Google di Webmaster Googlehttps://t.co/8Lfg1rzyKk

— Nando Sandala (@NandoSandala) November 27, 2019

Padahal cara tersebut sangat memudahkan pengerjaan saya dalam melakukan submit url, yang tak lain bertujuan agar robotnya Google mau merayapi halaman dari website saya dan cepat muncul di hasil pencarian search engine Google.

Apalagi untuk setiap url baru, yang link tautannya saya jadikan backlink guna optimasi dari website utama, biasanya dengan cara submit url google saja sudah bisa tanpa melakukan ping.

Begitupun, tidak jadi masalah dari apa yang diterapkan dengan cara submit url Google terbaru kali ini, tampak lebih sederhana dalam hal penyajian fitur-fiturnya.

Terlihat jelas pada akhir Agustus 2018 yang lalu, dan saya sempat kebingungan untuk memaparkan bagaimana cara Fetch as Google terbaru dengan tampilan baru Google Search Console, maka saya masih menggunakan versi yang lama pada link bagian kiri bawah.

Submit URL di Google Webmaster

1. Klik : Google Search Console

2. Tambahkan Properti, bila URL belum didaftarkan di Google Search Console

3. Pilih menu : Inspeksi URL

4. Lalu, masukkan URL situs yang akan diindex

5. Bila URL tidak ada di Google, klik : Minta Pengindeksan

6. Tunggu beberapa saat, selesai

Atau dengan rincian cara di bawah ini :

Coba klik : Google Webmaster, ini untuk masuk pada  Search Console tampilan lama.  Untuk masuk kepada Search Console tampilan baru, maka ada tombol berwarna biru kanan atas bertuliskan : Gunakan Search Console baru, dalam Bahasa Indonesia, untuk berBahasa Inggirs, bisa menyesuaikan saja.

Google Webmaster Tampilan Lama

Saya masih sangat nyaman dengan yang tampilan Google Webmaster Tampilan Lama, karena sudah nempel di hati aja mungkin ya.

Begitupun bagi para blogger yang pemula, sangat diwajibkan mendaftarkan blog kalian di Google Webmaster, karena dapat mengoptimasi postingan blog di search engine Google, yang tentunya agar blog yang kita miliki bisa terindex dengan baik.

Google Webmaster Tampilan Baru

Cobalah lebih fokus pada artikel tentang submit url Google ya. Jangan terlalu fokus melihat sumber trafiknya ya, masih sedikit. Ini juga web baru, yang lama sudah bukan saya lagi yang punya.

Submit URL Google Webmaster Terbaru

Kali ini coba Anda klik menu : Inspeksi URL, maka Anda dapat mengisikan di kolom telusuri tersebut dengan website Anda.

Hasil Inspeksi URL :

Pada baris URL ada di Google, artinya website dari https://bloggertutorialweb.blogspot.com sudah terindex di search engine. Pada bagian Minta Pengindeksan, apabila url website kita belum terindex, maka boleh dilik, maka akan ditemukan nanti Pengindeksan diminta : URL telah ditambahkan ke antrean crawl prioritas.

Mengirimkan halaman beberapa kali tidak akan mengubah prioritas atau posisi antrean. Artinya, tidak perlu melakukan pengindeksan secara terus menerus.

Lalu, pada baris ke-dua, klik pada centang hijau : Liputan (English : Coverage), maka akan keluar laporan :

Pada submit url Google kali ini, diberitahukan bahwa, Peta Situs sudah ada beserta halaman perujuknya. Dilakukan Crawl terakhir pada  17 September 2018 dan berstatus berhasil. Dan semoga apa yang Anda lakukan juga sama seperti gambar di atas ya.

Demikianlah cara submit URL terbaru di Google Webmaster, semoga dengan adanya artikel singkat ini bagian dari belajar SEO yang saya pelajari, dapat menjadi hal yang bermanfaat untuk Anda sekalian yang cinta akan blog yang dimiliki saat ini.

Sumber: wahyublahe

Mendapatkan Client ID Google API Console Untuk Google Sign-in

Mendapatkan Client ID Google API Console Untuk Google Sign-in

Redaksi    02:03   

Sebenarnya ini adalah pertanyaan yang sudah sejak lama saya simpan. Apakah di blog Blogger bisa bisa menggunakan tombol log-in dan log-out seperti halnya Wordpress?

Sebenarnya telah kita ketahui bahwa Google memberlakukan one for all sign-in yang artinya hanya perlu sekali login di Google dan kita bisa masuk ke hampir semua web Google termasuk Blogger.

Mendapatkan Client ID Google API Console Untuk Google Sign-inhttps://t.co/9EDgnUL4Bx

— Nando Sandala (@NandoSandala) November 23, 2019

Jika blog Blogger memiliki tombol sign-in dan sign-out selain tampilannya menjadi tambah keren dan berkesan profesional, juga bisa menjadi pintu masuk ke Google termasuk ke Blogger.

Akhirnya saya googling sana sini untuk mencari cara membuat tombol login di blog dan akhirnya berhasil, sebagai demo bisa Anda coba di tombol login.

Namun sebelum kita membuat tombol Google Sign-in di blog, yang pertama harus disiapkan adalah membuat Client ID Google API console.

Nah kali ini saya akan share cara membuat dan mendapatkan Client ID dari Google API Console untuk membuat tombol Google Sign-in di blog.

Langsung saja, silahkan masuk ke Google API Console dengan akun Google Anda.

Kemudian silahkan Create Project, beri nama project Anda (misalnya Login Blog) lalu klik tombol Create.

Kemudian silahkan pilih Google+ API di halaman selanjutnya di Library lalu di halaman selanjutnya klik Enable.

Selanjutnya klik menu Credentials di samping kiri kemudian klik tab OAuth consent screen.

Di halaman selanjutnya silahkan isi data-datanya. Pastikan email yang tertera adalah email Anda, lalu silahkan beri nama pada Product name shown to users, nama ini akan muncul ketika tombol sign-in ditekan. Homepage URL, termasuk dengan logo blognya, Privacy Policy dan Term of service URL bisa diisi atau bisa juga tidak (optional) kemudian save.

Di halaman selanjutnya silahkan klik tombol Create credentials lalu pilih OAuth client ID.

Kemudian di halaman selanjutnya pilih Web application, isi nama applikasinya (misal Login Blog). Untuk Authorized javascript origins dan Authorized redirect URls silahkan isi dengan URL blog Anda dengan http:// atau https:// tanpa tanda / di akhir URL-nya, contoh http://www.ferlyandosandala.blogspot.com (bukan seperti ini http://www.ferlyandosandala.blogspot.com/), lalu klik create.

Nah selanjutnya akan muncul popup kode client ID, silahkan copy kodenya.

Selesai.... untuk membuat tombol Google Sign-in, langsung saja klik disini.

Cara Membuat Pos Populer AMP Blogger yang Valid

Cara Membuat Pos Populer AMP Blogger yang Valid

Redaksi    21:59   

Jika Anda mengalami Kesalahan saat memasang posting populer widget itu adalah hal yang wajar karena widget di blogger menggunakan kode [gaya eksternal] bukan AMP yang valid, karena blogger sendiri tidak menyediakan widget AMP yang valid, jadi untuk mengatasi widget yang error seperti populer posting widget, kita harus memasukkan kode html di template atau mengedit widget yang error di blog AMP.

Langkah Buat Widget Postingan Populer Valid AMP

Seperti yang telah dibagikan oleh kompi ajaib, untuk membuat widget posting populer untuk blog AMP, Anda dapat mengedit widget posting populer yang telah kami pasang atau kami dapat menambahkan kode widget posting populer baru di template AMP blog.

Pertama, tambahkan widget dalam tata letak seperti biasa, ini akan memudahkan kita untuk meletakkan kode posting populer yang AMP valid.

• 
  
  
  
   
  
  
   
  
  
   
  
  
  
  
   
  
  

  
  
     

  
  
  

  
  

  
  

  
  
  
  
   
  

  

Kedua, Edit html template Anda dan cari kode Popularposts1 hapus semua kode dari  

kode atau ganti semua kode populars css jika template Anda sudah ada.

Selesai simpan template.

Dengan menggunakan kode html di atas maka widget popularposts tidak error lagi.

Untuk itu, uji validasi AMP dapat diperiksa dengan amptest.

Membuat Popular Post dengan Thumbnail Horizontal

Membuat Popular Post dengan Thumbnail Horizontal

Anonymous    17:02   

Postingan kali ini masih berhubungan dengan beberapa posting sebelumnya. Yaitu masih seputar CSS dan Inspect Element.

Seperti diketahui bersama, dari bawaan blogger sendiri sudah tersedia widget Popular Post sendiri. Tapi kelemahannya, Widget tersebut sudah mempunyai pengaturan default dan hanya tersedia dalam bentuk vertikal, sehingga bentuk dari widget tersebut terlihat monoton dan agak membosankan jika dilihat. Dan yang pasti, jika kita ingin menampilkan Popular Post dengan Thumbnail yang maksimal, posisi yang cocok untuk tempat peletakannya hanya dibagian sidebar saja.

Oleh sebab itu maka saya coba sedikit melakukan uji coba agar widget popular post dengan Thumbnail tersebut bisa dipasang dibagian footer dan dengan posisi horizontal. Demonya ya bisa langsung dilihat di bagian footer blog ini.

Tapi itu juga masih banyak kekurangan. Soalnya untuk postingan yang tidak disertai gambar maka akan terlihat kosong. Ada yang bisa bantu gak ya??

Berikut ini adalah langkah-langkah Untuk  Membuat Popular Post dengan Thumbnail Horizontal ini,

1. Login ke Dashboard blogger -> Design -> Edit Html. Atau Jika menggunakan fitur yang bahasa indonesia Beranda -> Rancangan -> Edit Html.
2. Cari kode ]]

 
Kemudian letakkan kode CSS berikut ini di atasnya.

#content-footer{
width:100%;
clear:both
}
#content-footer h2{
color: #333;
text-transform: none;
font-family:  Georgia;
font-size: 16px;
font-weight: 700;
margin-bottom: 0px;
padding: 5px 15px;
}

.bottom-content .PopularPosts ul {
padding: 0;
margin: 0px;
background: #FFF;
overflow:hidden;
}
.bottom-content .PopularPosts ul li {
width: 82px;
padding: 0; margin:0 7px 0;
border: none;
float: left;
list-style: none;
line-height: 1em;
}
.bottom-content .PopularPosts {
background: none!important;
}
.bottom-content .PopularPosts .item-thumbnail img {
width:82px;
height:105px;
padding:0;
}
.bottom-content .PopularPosts .item-title {
padding: 5px 0;
margin:0px 0 10px;
font:bold 11px Georgia;
border-bottom: 1px solid #861519;
clear:both; height: 37px;
overflow: hidden; text-align: center;
}
.bottom-content .PopularPosts .item-title a {
color:#25c;
}
.bottom-content .PopularPosts .item-snippet {
margin:10px 0;
color:#4f4f4f;
}
.bottom-content .section{
margin: 0 5px;
}


3. Berhubung pada template ini widget popular post saya pasang di atas footer maka yang selanjutnya adalah Cari Kode:

 

Atau sejenisnya, Kemudian letakkan kode berikut diatasnya.

Untuk pencarian id atau class dari suatu widget ini bisa dibaca dipostingan ini.

4. Save Template. 

Jika tidak ada masalah, maka hasilnya kira-kira akan seperti widget popular post dibagian bawah blog ini.

Semoga Bermanfaat..!!

Mengetahui id dan Class Dari Suatu Widget atau Kolom

Mengetahui id dan Class Dari Suatu Widget atau Kolom

Anonymous    16:57   

Seperti yang kita ketahui bersama, setiap template merupakan sekumpulan dari kolom-kolom. Dimana setiap widget atau kolom atau juga konten area pasti memiliki id tersendiri. Id ini merupakan nama dari widget tersebut seperti halnya header, sidebar, footer dan lain sebagainya. Untuk si pembuat atau designer template tersebut pasti tidak sulit untuk mengubah suatu area baik itu lebar, tinggi posisi dan lain sebagainya dari template tersebut. Namun berbeda halnya dengan kita yang hanya bisa memakai alias menikmati hasilnya.

Nah, permasalahannya disini adalah ketika ada sesuatu yang terlihat agak janggal, kemudian kita ingin memperbaiki dengan mengedit kode CSS-nya, atau kita ingin menambahkan suatu area disekitarnya, maka kita mau atau tidak mau kita harus tahu terlebih dahulu id dari kolom widget yang kita rubah. Id ini sendiri haruslah bersifat unik alias tidak boleh sama. Jadi tidak semua widget itu memiliki nama yang sama. Sehingga ketika sebuah template ini didesign, terutama template yang memiliki banyak kolom maka akan semakin banyak pula id-id yang akan diberikan oleh si designer.

Sebagai contoh misalnya sebuah template yang mempunyai 2 kolom sidebar, maka si designer ini pasti akan memberikan id tersendiri dari masing area. Pemberian id ini tidak ada ketentuannya. Id Sidebar tersebut bisa saja sidebar pertama diberi nama dengan sidebar-left dan sidebar kedua diberikan id sidebar-right, atau sidebar1 dan sidebar2, atau id-id yang lain misalnya yang satu id-nya sidebar-left, tapi sidebar yang kedua diberikan id kolom-tambahan.

Agar kita bisa mengetahui id dari suatu widget ini caranya sangat gampang. Kita tidak perlu memeriksa dan mengeditnya satu persatu. Caranya adalah kita cukup menggunakan fasilitas inspect element. Jika belum tahu tentang inspect element ini, silakan baca terlebih dahulu postingan tentang inspect element disini.

Disini saya juga akan coba memberikan satu contoh kecil. Saya akan contohkan bagaimana saya melihat id salah satu kolom yang ada di blog ngalor-ngidul ini langsung.

1. Pertama letakkan mouse pada widget yang ingin kita ketahui id-nya, sebagai contoh disini saya akan melihat id-id dari widget slider yang ada di homepage blog ini. 
2. Klik kanan pada browser. Saya sendiri disini menggunakan browser google chrome. Jadi Kalau mau hasilnya sama, maka saya sarankan anda juga menggunakan google chrome.
3. Pilih inspect element sehingga kita akan mendapatkan hasil seperti dibawah ini. Jika kurang jelas klik saja gambarnya.

4. Sekarang coba kalian perhatikan bagian yang saya lingkari dengan garis merah tebal. Disitu kita bisa lihat ada banyak sekali kode source dan/atau kode HTML dari blog ini. Dan disetiap tag yang berawalan <div> pasti disertai dengan kata id atau class.

Setelah kita tahu mengetahui id dari widget yang ingin kita rubah tersebut maka kita tidak perlu takut melakukan kesalahan dalam mengedit template tersebut. Karena untuk setiap id tersebut juga mempunyai kode CSS-nya sendiri sesuai dengan id-nya. Kode CSS dari id tersebut terdapat pada kolom inspect element disebelah kanan. Kode CSS tersebut juga akan berubah setiap kali kita melakukan inspect element diarea yang berbeda. Untuk melihat apakah widget yang ingin kita edit tersebut sudah benar atau tidak, maka dilayar monitor kita akan suatu tanda seperti yang terlihat di gambar dibawah ini.

Dengan demikian maka untuk pencarian id ini pun selesai. Heheee.....

Cara Mempermudah Ujicoba design dengan Inspect Element

Cara Mempermudah Ujicoba design dengan Inspect Element

Anonymous    16:53   

Dalam posting sebelumnya yaitu tentang persiapan yang sebaiknya kita lakukan agar lebih nyaman dalam belajar design template, saya ada sedikit menyinggung istilah Inspect Element. Buat teman-teman yang udah jago design pasti tahu tentang hal ini. Karena memang dengan adanya fitur Inspect Element ini proses design template ini akan 1000 kali lebih mudah.

Kenapa saya bilang demikian??
Karena dengan menggunakan fasilitas ini kita dapat melihat struktur code sesuai yang ditampilkan pada halaman web secara langsung. Code yang ditampilkan dalam inspect element tentunya merupakan code-code client-side, meliputi HTML, CSS dan JavaScript. Melalui fasilitas ini kita dapat melihat struktur code dan juga hasil tampilan yang kita lihat dalam browser. Kecuali Mozilla Firefox, Browser-browser populer saat ini seperti Opera dan Google Chrome telah menyediakan fasilitas ini. Fasilitas ini sudah terdapat secara langsung saat pertama kali menginstal.

Khusus Mozilla Firefox, untuk dapat menggunakan inspect element kita harus menambahkan sebuah add-on yaitu Firebug. Cara instalnya cukup mudah kok. Kita tinggal kunjungi Firebug untuk mendapatkan add-on inspect elementnya, install dan restart browser firefoxnya.

Cara penggunaannya pun sangat mudah.

1. Kita tinggal letakkan mouse pada bagian yang ingin kita lihat element dan code sourcenya.
2. Lalu klik kanan. 
3. Kemudian klik Inspect Element yang biasanya berada paling bawah dari option yang muncul. 

Untuk system inspect element yang terbaru, akan ada banyak sekali bagian-bagian yang bisa kita gunakan. Namun untuk tahap awal maka kita cukup menggunakan 3 menu element saja.

3 menu utama dalam fitur Inspect Element ini yaitu:

1. Elements : 
   Pada menu elements kita dapat melihat struktur disain dari suatu halaman web yang di tampilkan dalam bentuk script atau kode dimana pada menu ini setiap elemen telah disusun berdasarkan posisi script dan setiap elemen halaman telah dikelompokkan masing-masing. Dengan fitur ini kita dapat dengan jelas melihat struktur desain dari halaman tersebut sesuai dengan coding asli yang telah di buat oleh programmer. Baik itu lebar area, tinggi area, background yang digunakan, komposisi warna yang dipakai dan lain sebagainya.
2. Resources : 
   Merupakan tampilan detail dari elemen-elemen halaman web seperti gambar dan style CSS yang digunakan (lebih mengarah ke interface web). Pada menu kita dapat melihat source lengkap dari setiap elemen gambar dalam halaman web, mulai dari gambar background, header, widget, icon, banner, dsb. bahkan kita bisa mendownload elemen tersebut dengan langsung menuju ke source yang ditunjukkan oleh gambar. Kelebihannya adalah pada menu ini setiap gambar dapat di preview secara langsung bahkan resolusi sebenarnya dari gambar tersebut juga akan ditampilkan.
3. Scripts : 
   Isi menu ini sama saja dengan isi halaman yang muncul pada saat kita melakukan view source pada halaman web.

Nah, Setelah panjang lebar menjelaskan tentang inspect element ini mungkin akan lebih mudah dipahami jika kita bisa melihat sedikit triknya langsung. Tenang saja, saya sudah siapkan satu video kok. Nanti kalian juga bisa cari sendiri di youtube tentang cara penggunaan atau fungsi dari inspect element ini. Atau jika kalian sabar, kalian bisa tunggu posting berikutnya.