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.
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
Selamat Malam Teman Blogger, tentunya dengan menambahkan Widget Popular Post Keren Di Blog atau Website akan semakin terlihat cantik dan menarik. Banyak sekali gaya atau style yang kita inginkan untuk menambah widget demi memperindah tampilan blog.
Berikut ini langkah langkah cara membuat widget popular post yang keren :
- Langkah pertama pastikan widget popular post anda sudah aktik/terpasang (cara pasang : login ke blogger > klik tata letak > klik add gadget > klik populer entri> kemudian klik save/simpan)
- Setelah langkah diatas berhasil silahkan masuk ke template>edit HTML>centang Expand Template Widget, Cari kode seperti ini ]]></b:skin> untuk mempercepat pencarian tekan CTRL+F.
- Setelah berhasil menemukan kode di atas copy dan pastekan kode berikut tepat di atasnya :
#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none} #PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;} #PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px} #PopularPosts1 ul li:first-child:after, #PopularPosts1 ul li:first-child + li:after, #PopularPosts1 ul li:first-child + li + li:after, #PopularPosts1 ul li:first-child + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after, #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#DF01D7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#B041FF;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#F52887;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"} #PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"} #PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"} #PopularPosts1 ul li:first-child + li + li + li + li{background:#33c9f7;width:90%} #PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"} #PopularPosts1 ul li:first-child + li + li + li{background:#c7f25f;width:90%} #PopularPosts1 ul li:first-child + li + li + li:after{content:"4"} #PopularPosts1 ul li:first-child + li + li{background:#ffde4c;width:90%} #PopularPosts1 ul li:first-child + li + li:after{content:"3"} #PopularPosts1 ul li:first-child + li{background:#ff764c; width:90%} #PopularPosts1 ul li:first-child + li:after{content:"2"} #PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%} #PopularPosts1 ul li:first-child:after{content:"1"} #PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none} #PopularPosts1 ul li{position:relative;margin:6px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}
Langkah terakhir SAVE dan lihat hasilnya. Selamat mencoba sob.
