Menambahkan Tombol “LIKE” Facebook di Bawah Judul Posting

Menambahkan Tombol  “LIKE” Facebook  di Bawah Judul Posting
Menambahkan Tombol  “LIKE” Facebook  di Bawah Judul Posting

 

Berikut Menambahkan Tombol  “LIKE” Facebook  di Bawah Judul Posting


Tombol Like Facebook  akan memungkinkan pengunjung untuk menyukai posting Kita dan berbagi ke teman-teman Facebook mereka. Dalam posting ini kita akan melihat bagaimana kita dapat menambahkan tombol suka untuk setiap posting Blogger individu, dan  baca juga 

Terkait : Menambahkan Like Box Facebook Untuk  Blog 

(yang juga merupakan ide yang baik untuk memilikinya di sidebar Kita).

Memiliki tombol Facebook Like di bawah judul posting .Kita membuat supaya lebih mudah pengguna membagikan atau menyukai Facebook setiap posting  di blog Kita, yang akan menampilkan konten menyukai di profil mereka (dan berpotensi pada feed teman mereka).

Jika Kita Ingin Menambahkan Tombol Facebook Like di Bawah Judul Blogger Posting Kita, Ikuti Langkah-langkah Berikut:


Langkah 1. Pergi Untuk Blogger Dashboard  > Template > Edit HTML

Menambahkan Tombol  “LIKE” Facebook  di Bawah Judul Posting
Dshboard blogger

Langkah 2. Klik di mana saja di dalam area kode dan pencarian - tombol CTRL + F  untuk menemukan potongan kode ini:
<data:post.body/>

Catatan: Kita mungkin merasa lebih dari 3 kali untuk mencobanya, berhenti untuk yang kedua kali(atau dalam kasus yang sama tidak akan muncul setelah menerapkan kode dari langkah 3).

Langkah 3. Tepatkan di atas ,kemudian sisipkan kode ini:
<p><iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=button_count&amp;show_faces=false&amp;width=100&amp; action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:100px; height:20px;'/></p>

Screenshot
Menambahkan Tombol  “LIKE” Facebook  di Bawah Judul Posting
Dashboard blogger


Langkah 4. Simpan template Kita dan Kita selesai dengan implementasi sesederhana mungkin dengan  tombol Facebook Like di blog Blogger Kita.

Cara Membuat / Menambahkan Like Boxe Fanspage Facebook ke Blogger

Cara Membuat / Menambahkan Fanspage Facebook ke Blogger
Fanspage Facebook

Sebuah Box FansFacebook atau  Box adalah sebuah plugin besar yang memungkinkan pengunjung blog untuk berlangganan update blog Kita melalui akun Facebook mereka, tanpa meninggalkan blog Kita. Setelah berlangganan (dengan menekan tombolnya saja), pengunjung akan menerima update blog terbaru Kita pada halaman Facebook mereka. Kotak ini juga menampilkan wajah para "likers" di blog Kita. Sebelum membuat kotak penggemar, Kita harus sudah memiliki halaman penggemar Facebook. Jika Kita belum membuat, klik di sini untuk belajar artikel dibawah.,

Artikel Terkait : Cara Membuat Halaman FansPage

Membuat Facebook Like Box


1. Cari tahu Facebook Fans page URL Kita dengan mengunjungi halaman Fans Facebook dan salin URL di bar address  , Kita dapat melihat bagaimana bentuk URLnya.

2. Kemudian kunjungi halaman ini: https://developers.facebook.com/docs/plugins/like-box-for-pages

3. Tempelkan URL Kita ke bidang URL Facebook Page, seperti yang ditunjukkan di bawah ini:

Cara Membuat / Menambahkan Fanspage Facebook ke Blogger
Like Boxed Facebook

4. Setelah itu keluar bentuk Bok like FansPage , klik pada tombol "Dapatkan Kode"

5. Kita akan diberikan dua kode, berjudul HTML 5, XFBML dan IFRAME. Yang kita butuhkan adalah 'iframe' kode.

Cara Membuat / Menambahkan Fanspage Facebook ke Blogger
iframe fanspage facebook


Menambahkan Box  FanssFacebook ke Blogger


6. Login ke akun Blogger Kita  pergi ke 'Layout'  > klik pada link 'Tambah Gadget'

Cara Membuat / Menambahkan Fanspage Facebook ke Blogger
dashboard bloger


7. Dari jendela pop-up, pilih gadget 'HTML / JavaScript' :

Cara Membuat / Menambahkan Fanspage Facebook ke Blogger
Dashboard blogger


8. Paste kode Box FansPage tadi ke  kotak HTML kosong:

Cara Membuat / Menambahkan Fanspage Facebook ke Blogger
Cara Membuat / Menambahkan Fanspage Facebook ke Blogger


9. Klik Simpan dan selesai.

Menampilkan / Menyembunyikan Komentar Blogger dan Google+ Lalu Mengalihkannya

Menampilkan / Menyembunyikan Komentar Blogger dan Google+ Lalu Mengalihkannya
Menampilkan / Menyembunyikan Komentar Blogger dan Google+ Lalu Mengalihkannya

Berikut Cara Menampilkan / Menyembunyikan Komentar Blogger dan Google+ Lalu Mengalihkannya


Banyak pemilik situs Blogger menerima baru Komentar Sistem Google+ cukup negatif karena memaksa semua pengguna mengomentari untuk membuat akun Google+ mereka sendiri sebelum mereka mampu menulis komentar. Google+ Komentar Sistem di Blogger nyaman untuk penulis, tetapi banyak pengguna untuk terus komentar di blog karena mereka hanya tidak ingin menggunakan Google+.

Bagi mereka yang tidak menggunakan Google+ untuk membuat komentar, Blogger tidak akan pernah memberitahu Kita bahwa seseorang meninggalkan komentar; Kita bisa pergi tanpa pernah menyadari bahwa Kita tidak pernah menjawab pembaca.

Selain audiens Kita frustrasi,  Sistem Google+ Komentar di Blogger tergantung pada URL posting blog Kita. Dengan mengubah URL atau bergerak di sekitar posting blog Kita secara internal, Kita berisiko kehilangan setiap satu dari komentar Kita yang ditempatkan menggunakan Google+.

Sebelumnya, satu-satunya cara untuk memecahkan masalah ini adalah untuk menonaktifkan sistem komentar melalui pengaturan akun Kita, sehingga memberikan kemampuan Kita untuk menggunakan akun Google+ mereka.

Sekarang, ada cara baru mudah untuk memiliki yang terbaik dari kedua dunia. Memungkinkan penggemar dari Google+ serta pembaca blog kita setiap hari untuk mengakses semua fitur yang sama, Kita akan dapat melakukan setiap pengunjung sama-sama. Kita dapat menanggapi komentar sementara masih bisa berkomunikasi dengan pengguna Google+ lainnya di luar situs Kita dan mengambil keuntungan dari Komentar Sistem Google+ di Blogger.

Menampilkan / Menyembunyikan Komentar Blogger dan Google+ Lalu Mengalihkannya


Cara Mengintegrasikan Blogger dan Komentar Google Plus


Untuk membuat instalasi sesederhana mungkin, saya menggunakan inline jQuery dan CSS, tetapi kode ini dapat diubah nanti. Juga, tempat yang paling mudah saya menemukan dan menambahkan itu setelah <:include data='post' name='post'/>. Jadi, mari kita mulai menambahkan itu:

Langkah 1. Masuk ke akun Blogger Kita dan pilih blog Kita  pergi ke 'Template' dan tekan tombol 'Edit HTML' di sisi kanan.

Menampilkan / Menyembunyikan Komentar Blogger dan Google+ Lalu Mengalihkannya
Dashboard Blogger

Langkah 2. Klik di mana saja di dalam area kode dan tekan tombol CTRL + F untuk membuka kotak pencarian editor dan cari kode berikut:
<b:include data='post' name='post'/>

Langkah 3. Hanya setelah <b:include data='post' name='post'/> ikuti kodenya:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#comments, #gplus-comments-visibility {display:none;} .comments-icons {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEii3W3DHERl89JcbndtBoxyCMroDG5Ixn01Q1vGmQ667TD78pvRSx1lJsPeNSydqY3qObYNe2WmB1kNF1UHZ9h9oCEqOWWsg-MpB1yuRNBS5vd78VQgPLIL5mAmXIc43sJPDa4chNtjb2zn/s1600/speech-bubble.png) no-repeat; font-size: 20px; font-family: &quot;Arial Narrow&quot;,Arial,sans-serif; color: #555; font-weight: bold; padding: 18px 15px 0; height: 70px; } .comments-icons a img {vertical-align: middle;}</style>
<div class='comments-icons'>
Show Comments: <a class='show-hide-comments' href='javascript:void();' onclick='$(&quot;#gplus-comments-visibility&quot;).slideToggle();$(&quot;#comments&quot;).hide();'><img class='gplus-icon' height='35' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiO2xbnsfjwALj3smmyppHW3UPEetbfHme2niJGTele4hEphnXg7kvu6tQAK3199cn_RsFeTNIiV-tLMbDH161t1gbxSNqt0i49iLpN9UIij8Yz3k5F_EIePddBCAzhxTIU0n3dWUqfWrhC/s1600/google-plus-logo.png' width='35'/></a> OR <a class='show-hide-comments' href='javascript:void();' onclick='$(&quot;#comments&quot;).slideToggle();$(&quot;#gplus-comments-visibility&quot;).hide();'><img class='blogger-icon' height='35' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtUVYJMId3TrHM5R9t_A-tCMHlgg5Eah286Lh9aacsdyM_toeuf7fnZsA-mh_EJbWEb5gUdnC8GWeMJtYYKj1PHPa2tj-uxKKkRVC4GWFhLxXXvLf6S32GITSFYjAZWaLOuZy0ezy6bF2-/s1600/blogger-logo.png' width='35'/></a>
</div>
<div id='gplus-comments-visibility'>
<div class='g-comments' data-first_party_property='BLOGGER' data-view_type='FILTERED_POSTMOD' data-width='550' expr:data-href='data:post.url'/>
</div>      
</b:if>

Catatan: Data-lebar untuk pengaturan lebar kotak komentar, sehingga jumlah (550) mengindikasikan dapat diubah sesuai dengan desain blog Kita.

Langkah 4. Tekan tombol "Simpan Template" tombol yang terletak di bagian atas editor dan melihat blog Kita untuk melihat apakah Kita telah berhasil menambahkan Google+ mengomentari sistem untuk Blogger.

Harap dicatat bahwa untuk membuat karya ini, Kita perlu memastikan bahwa Kita menggunakan versi jQuery di situs Kita. Jika tidak, tambahkan baris ini tepat di atas     </ head> tag menggunakan editor HTML Template:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>

Itu Dia!


Dari sini keluar, setiap pembaca yang membaca posting Kita memiliki pilihan untuk membuat komentar menggunakan akun Google+ mereka, atau komentar asli Blogger. pembaca Kita akan menikmati fleksibilitas bahwa situs Kita menyediakan dan Kita juga akan mendapatkan keuntungan dari layanan inklusif yang ditawarkan oleh Google.

Dasar-dasar CSS. Cara Menerapkan Gambar Terlihat Nyata # 2

Dasar-dasar CSS. Cara Menerapkan Gambar Terlihat Nyata  # 2
Dasar-dasar CSS. Cara Menerapkan Gambar Terlihat Nyata  # 2

Dalam Posting Sebelumnya  Saya telah menyebutkan bahwa kita akan belajar tentang cara membuat gambar bulat menggunakan CSS, tanpa perlu mengedit satu per satu menggunakan program. Sekarang kita telah melihat dasar-dasar CSS, mari kita coba untuk menerapkannya pada beberapa gambar.

Apa yang akan kita lakukan dalam tutorial ini adalah untuk meng-upload gambar (HTML) dan kemudian menambahkan beberapa aturan dalam stylesheet yang akan mengubah bentuk luar terlihat seperti lingkaran ... atau, setidaknya, untuk tampil putaran. Ini akan tergantung pada proporsi gambar yang akan kita gunakan.

Bahkan, kita dapat menerapkan efek ini untuk gambar apapun, untuk bagian tertentu dari blog kita atau untuk semua gambar yang ditemukan di blog kami. Hal ini tergantung pada selera Anda.

Menandai HTML                                             


Jelas, hal pertama yang perlu kita lakukan dalam rangka untuk menetapkan batas bulat sekitar gambar adalah untuk mendapatkan gambar dan meng-upload untuk mendapatkan struktur html. kode bisa menjadi sedikit lebih rumit, tetapi gambar dapat dibangun dalam tag img, yang pada dasarnya, terlihat seperti ini:
<img src="image_URL"/>

Screenshot

Dasar-dasar CSS. Cara Menerapkan Gambar Terlihat Nyata  # 2
Dashbboard blogger

Menambahkan kode ini di dalam HTML pos dengan url gambar kita - bukan teks warna biru – tapi kita akan dapat menampilkannya seperti gambar ini di sebelah kiri.

Dasar-dasar CSS. Cara Menerapkan Gambar Terlihat Nyata  # 2

Biasanya, itu juga mungkin berisi teks alt, dan kadang-kadang, mungkin memiliki beberapa dimensi yang telah ditentukan (dengan lebar tertentu dan / atau tinggi). Ketika kita upload gambar menggunakan editor posting Blogger, kode ini juga akan memiliki link yang menunjuk ke gambar asli.

Tetapi jika kita ingin memodifikasi gambar ini menggunakan CSS, kita perlu menambahkan pemilih kelas. Kita bisa menambahkannya dalam dua cara: dalam tag img . Nama yang  telah saya pilih untuk pemilih gambar sudut tumpul, namun, Anda dapat menambahkan nama yang Anda inginkan:
<img class="roundedcorners" src="image_URL"/>

Dasar-dasar CSS. Cara Menerapkan Gambar Terlihat Nyata  # 2

<div class="roundedcorners">
<img src="image_URL"/>
</div>

 

Menerapkan Gaya ke Semua Elemen Yang Sama                                             

Tapi pemilih itu sendiri tidak akan melakukan sesuatu yang istimewa. Perlu dikaitkan dengan aturan gaya memberitahu apa yang harus dilakukan dengan itu. Sama jika ketika kita menambahkan hanya kelas, jika ini tidak didefinisikan dalam CSS, penampilan gambar (atau elemen tertentu) tidak akan berubah.

Untuk mengubah bentuk dari semua gambar pada blog kita, ini adalah apa yang harus kita tambahkan ke CSS kami:
img {
border: 2px solid #BADA55;
margin: 0;
padding: 0;
border-radius: 1000px;
-moz-border-radius: 1000px;
}

Dan bagaimana ini diterjemahkan ke browser Anda?

Mencari gambar dengan nama tag img dan menerapkan gaya berikut:

Perbatasan hijau solid 2 piksel

Mengatur margin (ruang di luar perbatasan) dan padding (ruang di dalam perbatasan) ke nol

Menerapkan bulat sudut tampilan untuk semua empat penjuru

Sekarang  kita memiliki aturan ini dalam lembar gaya kita sendiri, saya akan dapat melihat gambar seperti yang kita inginkan - lihat gambar di sebelah kanan.

Untuk mendeklarasikan properti dengan benar, kita perlu tahu apa yang dilakukan dan bagaimana menulis itu dengan rincian yang dapat ditemukan di seluruh internet, meskipun W3C  adalah otoritas dalam hal ini.

Dasar-dasar CSS. Cara Menerapkan Gambar Terlihat Nyata  # 2


Misalnya, properti border-radius awalnya memerlukan empat (4) nilai-nilai membaca dari kiri ke kanan, yang mewakili kebulatan dari, kanan kiri atas, kanan bawah dan sudut kiri bawah. Jika Anda menambahkan ini, itu akan membuat semua empat penjuru untuk menjadi setara dengan nilai tersebut.

Hal ini penting untuk menyebutkan bahwa ketika nilai perbatasan melebihi dimensi wadah, perbatasan ini akan membuat lingkaran.

Bagaimana Menerapkan Gaya Yang Sama                                                        

Kadang-kadang, kita tidak ingin semua gambar di blog kita untuk menjadi bulat, kecuali hanya orang-orang yang kita pilih untuk melihatnya, jika tidak menambahkan gaya di atas dalam tag head akan membuat semua gambar menjadi beda. Sebelum, kami menggunakan HTML tag img, bukan untuk memilih melainkan , untuk alasan ini, gaya akan mempengaruhi semua gambar kami.

Untuk menghindari hal ini, kita dapat melakukan salah satu hal yang kita lihat di awal posting ini dan itu untuk menempatkan gambar di dalam div dengan kelas roundedcorners. Dengan cara ini, hanya gambar dalam wadah dengan kelas yang akan terpengaruh oleh aturan yang akan membuat mereka bulat.
<div class="roundedcorners"><img src="image_URL"/></div>

Tapi aturan itu seharusnya tidak mempengaruhi tag img langsung, tapi pemilih roundedcorners. Dalam hal ini, Anda harus menulis seperti ini:
.roundedcorners img {
border: 2px solid #BADA55;
....
}

Ini berarti bahwa hanya berlaku untuk gambar yang berada dalam wadah dengan kelas roundedcorners.

Akhir Kata                                                         


Untuk mengakhiri tutorial ini untuk menciptakan gambar dengan batas bulat, perlu diingat bahwa jika ini tidak persegi, bukannya menjadi melingkar, mereka akan terlihat oval:

Dasar-dasar CSS. Cara Menerapkan Gambar Terlihat Nyata  # 2


Untuk memperbaiki ini kita harus menambahkan lebar dan tinggi dengan ukuran yang sama (nilai dalam pixel) untuk memaksa tanam gambar dan untuk membuatnya tampak sempurna melingkar. Itu saja!

Jika Anda menikmati membaca blog ini, silakan berbagi dan berlangganan. Untuk setiap pertanyaan, drop komentar di bawah ini

Dasar-dasar CSS. Cara Menerapkan Gambar Terlihat Nyata # 1

Dasar-dasar CSS. Cara Menerapkan Sudut Tumpul Pada Gambar # 1
CSS

Tutorial ini akan menjelaskan bagaimana mengubah batasan luar dari setiap gambar dengan menggunakan beberapa aturan CSS sederhana untuk membuatnya menjadi bulat, tapi ini sangat mudah untuk dilakukan, akhirnya akan membuat posting anda lebih elegant.

Trik ini akan saya akan publikasikan dalam dua bagian, gunanya  adalah untuk membantu Anda memahami, setidaknya, sedikit dari apa CSS (Cascading Style Sheets) adalah.

Bagi mereka yang ingin mempelajari lebih lanjut, silakan lihat di Link Ini  dan bagi mereka yang benar-benar ingin belajar secara menyeluruh, saya sarankan untuk mengunjungi Situs Ini.

Dasar-dasar CSS. Cara Menerapkan Sudut Tumpul Pada Gambar # 1
CSS


Pendahuluan dan Lembar Terminologi        


Gaya ini bertujuan untuk membantu memilah struktur apa dari sebuah situs web  yang formatnya atau penampilannya. Jadi, model kotak CSS adalah, sebuah kotak yang membungkus di sekitar elemen HTML, dan menentukan bagaimana kotak-kotak disajikan dalam hal warna, font, lebar, latar belakang dll.

Keuntungannya adalah bahwa, kapan saja kita memutuskan untuk mengubah sesuatu, kita tidak harus mengubah semua halaman satu per satu, tetapi hanya, mengubah properti dari style sheet  dan modifikasi nya secara otomatis yang akan berlaku di semua halaman.

Style sheet adalah seperangkat aturan yang terbuat dari pemilih dan deklarasi. Maksudnya pemilih yang akan digunakan sebagai nama panggilan atau nama dari apa yang Anda ingin mengkonfigurasi dari style sheet dan berlaku untuk HTML, dan deklarasi adalah properti yang kita tambahkan dari nilai-nilai yang diinginkan (informasi lebih lanjut tentang Sintaks CSS

Dasar-dasar CSS. Cara Menerapkan Sudut Tumpul Pada Gambar # 1
CSS 


Menambahkan Pemilih CSS                                  


Jika kita menambahkan, misalnya, kode di atas dalam lembar gaya , kami mungkin tidak melihat apa-apa terjadi khususnya di website . Seperti yang telah saya sebutkan di atas, pemilih berkaitan dengan HTML dan CSS ,sehingga jika kita ingin kotak untuk mengambil nilai-nilainya  untuk melihat lebar, warna latar belakang, perbatasan dan ukuran font, kita perlu menyertakan pemilih dalam HTML halaman elemen, seperti ini:

<div class="SelectorName">Text here</div>

Di sini kita menambahkan beberapa aturan untuk memberitahu browser menafsirkan bahwa kotak ini harus menjadi tipe tertentu atau kelas. Kelas ini atau pemilih bisa memiliki beberapa sifat tertentu dan nilai-nilai yang didefinisikan dalam style sheet, seperti yang Anda lihat pada gambar di atas.

Sekarang mari kita lihat bagaimana ini akan mengubah tampilan kotak, sementara semua orang lain yang tidak memiliki nama SelectorName akan mengikuti penampilan standar.

Pada dasarnya, ketika kita menambahkan aturan dalam style sheet, atau memodifikasi yang sudah ada, apa yang terjadi adalah bahwa semua kotak yang ditandai dengan pemilih yang akan mengubah penampilan mereka sesuai dengan sifat dan nilai-nilai yang telah kita didefinisikan dalam style sheet.

Dimana Untuk Menambahkan Gaya CSS                   

Gaya ini dapat ditambahkan dalam file CSS eksternal - membuat file CSS dengan semua aturan, meng-upload di situs hosting dan mendapatkan URL dari file. Untuk memanfaatkannya, termasuk baris berikut di header template Anda. Untuk Blogger, Anda dapat menambahkannya antara <head> dan <b: skin> <[CDATA [/ *:
<link href="syle.css" rel="stylesheet" type="text/css"/>

Catatan: Mengganti teks warna biru dengan url dari file CSS.

Anda juga dapat menambahkan gaya langsung dalam HTML template dengan menambahkan CSS antara tag gaya:
<style>
.SelectorName {
background-color: #EAEAEA;
border: 1px solid #444444;
width: 200px;
font-size: 12px;
}
</style>

Ini dapat ditambahkan dalam HTML dari elemen halaman juga. Dalam hal ini, Anda tidak perlu menambah pemilih apapun untuk menunjukkan di mana gaya CSS adalah:
<div style="background-color: #EAEAEA; border: 1px solid #444444; width: 200px; font-size: 12px;">Text here</div>


Di Blogger, aturannya  antara <b: skin> <[CDATA [/ * dan ]] / b: skin> tag. Jika kita mengakses HTML dari template kita, kita akan menemukan sekelompok kode di antara tag ini, yang sebenarnya adalah styling CSS yang mendefinisikan tampilan blog kita.
Bagi mereka yang tidak ingin menyentuh kode template, kita dapat menambahkan CSS langsung dengan pergi ke desainer Blogger Template> Lanjutan> Tambah CSS.

Dasar-dasar CSS. Cara Menerapkan Sudut Tumpul Pada Gambar # 1
CSS blogger


Itu cukup untuk hari ini. Pada tutorial berikutnya kita akan mengenal cara menambahkan sudut dibulatkan ke gambar kami menggunakan CSS >> Cara Membuat Gambar Telihat Nyata Dengan CSS Bagian #2