Cara Menambahkan Media Sosial Share (Facebook, Twitter, Google+) di Halaman Statis (Laman) Blogger


Setelah sobat berhasil membuat halaman statis satu kolom atau satu halaman penuh (full width) di tutorial sebelumnya. Mungkin sobat juga ingin menambahkan media sosial share seperti facebook, twitter, dan google+ di halaman statis tersebut. 

Barang kali sobat menemukan kesulitan setelah membaca tutorial-tutorial yang berseliweran di internet karena kebanyakan sudah kadaluarsa dan tidak lengkap. 

Kadaluarsa dan tidak lengkap? Kok bisa?

Iya. Pertama karena kebanyakan masih mengacu pada facebook developer versi dulu sementara sekarang facebook developer telah berganti. Tidak lagi menyediakan beberapa jenis kode yang bisa dipilih (biasanya untuk blogger menggunakan IFRAME). 

Kedua kebanyakan tutorial hanya memberikan facebook share dan facebook like, sehingga menurut saya kurang lengkap. Dan tutorialnya pun sudah tidak dapat diterapkan lagi di blogger.

Saya pun awalnya juga bingung dengan tutorial yang telah ada. Karena setelah saya ikuti tutorial tersebut malah membuat saya semakin bingung. 

Karena itu saya terus mencoba mencari kode yang pas untuk menambahkan media sosial share di halaman statis blogger. 

Hingga saya dapatkan ramuan kode ini dari tetangga sebelah yang telah saya modivikasi sedemikian rupa. 

Tampilannya pun tidak main-main, ada animasi slidenya juga lho. Sehingga ketika sobat meletakkan kursor di atas tombol tersebut akan ada jendela yang terbuka.

Anda bisa melihat penampakannya di halaman copywriting milik saya.

Baiklah tidak perlu berlama-lama lagi. Berikut Tutorialnya.

1. Perhatikan kode HTML dan CSS serta demo di bawah ini.



2.  Copy kode CSS di atas. Masuk ke halaman template blogger sobat dan pilih edit HTML. Cari kode ]]</b:skin>. Tekan ctrl+f untuk pencarian cepat. Setelah ketemu, paste kode CSS di atas tepat di atas kode ]]</b:skin> tersebut.

3. Masih di HTML editor, cari kode </head>. Setelah ketemu letakkan kode di bawah ini tepat di atas kode </head> tersebut.


<link href='//netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/>
    <script  src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script  src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>
  

4. Setelah sobat meletakkan kode di atas, silakan pilih simpan. 

5. 
Perhatikan HTML yang ada di Codepen di atas dan copy kode HTML tersebut. Kemudian masuk ke postingan laman atau halaman statis yang telah sobat buat. Pilih mode HTML dan letakkan kode HTML yang ada di Codepen tersebut di bagian paling akhir postingan.

6. Masih di postingan laman mode HTML, cari kode link http://www.yarbi.my.id/p/panduan-copywriting-1-apa-itu.html. Kemudian ganti dengan link postingan laman atau halaman statis yang telah sobat buat. Lalu silakan pilih pratinjau atau publikasikan dan lihat hasilnya.

7. Bagaimana berhasil? Saya tunggu hasilnya di kolom komentar ya...

Semoga bermanfaat!



Catatan: tombol media sosial share di atas juga dapat sobat terapkan pada postingan dinamis dengan cara meletakkan kode HTML yang ada di Codepen di atas tepat di bawah kode <data:post.body/> (biasanya ada beberapa kode seperti ini, letakkan pada yang dekat dengan widget media sosial). Atau jika memang sudah ada widget media sosial, Sobat bisa mengganti widget media sosial yang sudah ada dengan kode HTML di atas.




Sebelumnya
« Prev Post
Selanjutnya
Next Post »
Comments
1 Comments

1 comments:

Click here for comments
17 August 2015 at 16:27 ×

maksih atas kunjungannya keymastersolution.com

Selamat Key Master Solution dapat PERTAMAX...! Silahkan antri di pom terdekat heheheh...
Balas
avatar
admin
Thanks for your comment