CARA MENAMBAHKAN TOMBOL SHARE SEDERHANA TAPI KEREN
Tombol share merupakan salah satu atribut yang banyak digunakan oleh para pemilik blog.
Selain untuk mempercantik tampilan blog tombol share juga ditambahkan untuk mempermudah para pengunjung apabila ingin membagikan artikel yang disukainya ke media sosial seperti Facebook,Whatsapp dan lain sebagainya.
Bagi sobat blogger yang mungkin masih baru,tentu belum banyak mengerti mengenai cara menambahkan tombol share seperti pada gambar di atas yang jelas sangat berbeda sekali tampilannya dengan tombol share bawaan dari blogger. Sebenarnya ada banyak pilihan tampilan tombol share yang juga banyak dibahas oleh situs-situs lain,jadi kalian tinggal cari saja di laman pencarian google jika ingin menggunakan tombol share yang sesuai dengan selera kalian masing-masing.
Akan tetapi jika kalian ingin menggunakan tombol share simple seperti yang tengah saya bahas dalam artikel ini maka silahkan ikuti langkah-langkahnya seperti di bawah ini :
Pertama silahkan log in ke akun blogger terlebih dahulu kemudian pilih menu tema untuk selanjutnya klik edit html,bagi kalian yang belum memasang font awesome maka salin dulu kode script di bawah ini kemudian tempatkan di atas kode </head>.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css"/>
Jika sudah,langkah selanjutnya adalah cari kode ]]></b:skin> atau </style> kemudian salin kode script di bawah ini di atas kode tersebut.
#sharesimpelkeren {width: 100%; text-align: center;}#sharesimpelkeren a {width: 20%;height: 40px;display: block;font-size: 24px;color: #fff;opacity: 0.8; transition: opacity 0.15s linear; float: left;}#sharesimpelkeren a:hover {opacity: 1;}#sharesimpelkeren i {position: relative;top: 50%;transform: translateY(-50%);}.facebook {background: #3b5998;}.twitter {background:#55acee;}.linkedin {background: #0077b5;}.pinterest {background: #cb2027;}.whatsapp {background: #25d366;}#share a:first-child {border-radius: 0px 0 0 0px;}#sharesimpelkeren a:last-child {border-radius: 0 0px 0px 0;}
Untuk yang terakhir silahkan cari kode </data:post.body>,kemudian salin kode script di bawah ini. Jika kalian ingin tombol share berada di atas artikel maka tempatkan di atas kode tersebut tapi jika kalian ingin menempatkannya di bawah artikel maka tempatkan dibagian bawahnya.
<div id='sharesimpelkeren'> <a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:blog.url' rel='nofollow' target='blank'><i class='fa fa-facebook'/></a> <a class='twitter' expr:href='"http://twitter.com/share?url=" + data:post.url' rel='nofollow' target='blank'><i class='fa fa-twitter'/></a> <a class='linkedin' expr:href='"http://www.linkedin.com/shareArticle?mini=true&amp;url=" + data:post.url + "&amp;title=" + data:post.title + "&amp;summary=" + data:post.snippets' rel='nofollow' target='blank'><i class='fa fa-linkedin'></i></a> <a class='pinterest' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.url + "&amp;media=" + data:blog.postImageUrl + "&amp;description=" + data:post.title' rel='nofollow' target='blank'><i class='fa fa-pinterest-p'></i></a> <a class='whatsapp' data-action='share/whatsapp/share' expr:href='"whatsapp://send?text=" + data:post.title + "%20%2D%20" + data:post.url'><i aria-hidden='true' class='fa fa-whatsapp'/></a></div>
Jika sudah selesai silahkan simpan,kemudian lihat perubahannya pada tampilan artikel yang sudah kalian posting.
Tidak ada komentar:
Posting Komentar