Tombol share sebenarnya sudah tersedia pada template bawaan blogger,akan tetapi tampilannya mungkin kurang bervariasi sehingga banyak para blogger yang memasang tombol share dengan variasi yang berbeda. 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.
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. Pada template bawaan blogger biasanya terdapat dua kode <data: post.body/>. Kode yang pertama adalah untuk tampilan versi mobile sementara yang kedua adalah untuk versi web. Jikan kalian ingin memasangnya pada kedua versi tersebut maka pastekan pada keduanya.
<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