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.
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.
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.
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.
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.....
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.
Kita tinggal letakkan mouse pada bagian yang ingin kita lihat element dan code sourcenya.
Lalu klik kanan.
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:
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.
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.
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.
Memasang Threaded Comment Paling Keren di Blog atau Website - Selamat Malam sahabat blogger, bagaimana kabarnya? semoga anda selalu berada dalam keadaan yang super, sesuper pagi hari ini, amiin. Pada kesempatan kali ini kita akan membahas hal-hal yang berkaitan dengan tutorial blog yaitu mengenai bagaimana cara memasang fitur threaded comment di blog. Tapi sebelum kita membahas lebih jauh, mari kita cari tahu dulu apa yang dimaksud dengan threaded comment!
Apa itu threaded comment?
Theaded comment yaitu fitur komentar / form komentar yang lebih interaktif yang fungsi utamanya adalah untuk memudahkan admin dan pengunjung blog dalam membalas komentar yang masuk ke blog dengan fitur Reply-nya, yang jika anda gunakan, komentar balasan anda tidak akan masuk menjadi komentar paling akhir di dalam postingan itu, melainkan akan muncul tepat dibawah komentar yang ingin anda balas. Bingung ya? dari pada bingung mending langsung saja lihat gambar dibawah ini :
Bagaimana, sekarang anda sudah tahukan, apa itu threaded comment? bagaimana apakah anda juga berminat untuk memasangnya di blog anda? Jika jawaban anda ya, silahkan ikutli beberapa langkah mudah memsang fitur threaded comment pada blog dibawah ini :
Langkah Pertama | Mengaktifkan Fitur Threaded Comment
1. Login ke akun blogger
2. Klik "Template"
3. Lalu klik "Edit HTML"
4. Setelah itu centang pada :
5. Kemudian cari kode script berikut ini :
<b:include data='post' name='comments'/>
biasanya anda akan menemukan 4 kode semacam ini,
6. Jika kode pada langkah no.5 sudah ditemukan, selanjutnya ganti semua kode tersebut dengan kode dibawah ini :
Sampai disini fitur threaded comment pada blog anda sudah aktif, selanjutnya tinggal merubah tampilan dari threaded comment tersebut. Untuk lebih jelasnya, mari kita lanjut baca!
Langkah Kedua | Memodifikasi Tampilan Threaded Comment di Blog!
1. Silahkan login ke akun blogger
2. Klik menu "Template"
3. Lalu klik "Edit HTML"
4. Kemudian cari kode berikut ini :
]]></b:skin>
5. kemudian anda letakkan kode dibawah ini tepat dibawah kode pada langkah no.4 :
/*------------- End of Blogger Threaded Comments -------------*/
6. Terakhir, simpan template! dan lihat hasilnya.
Jika anda melakukan semua langkah dengan benar, maka seharusnya sekarang anda sudah berhasil memasang fitur threaded comment di blog anda. Tapi terkadang walaupun sudah melakukan langkah ini dengan benar, tidak semuanya akan berhasil, karena biasanya tidak semua kode script blog sama, ada yang sudah dimodif oleh pembuat templatenya.
Demikian yang dapat saya sampaikan mengenai Memasang Threaded Comment Paling Keren di Blog atau Website. Untuk kurang dan lebihnya mohon dimaafkan, semoga artikel ini dapat memeberikan manfaat. Terimakasih
