Memasang AddThis Link with Fixed Position

Tak ada rotan akar pun jadi. Tidak menemukan tutorrial keren, trik ringan pun jadi satu postingan menawan sob :D :"> Kali ini AA Beben Koben si bloglang anu ganteng kalem tea akan mengulas 1 teknik lawas mengenai posisi CSS. Sobat blogger sudah tentu mengenal dengan atribut absolute, fixed, relative, static, inherit, left, right, top and bottom! Itu merupakan variabel yang bisa kita gunakan dalam memainkan posisi CSS. Buka halaman berikut guna membaca dan praktek atribut diatas CSS Positioning by w3schools :)

Tinggal memberi sentuhan keindahan kreasi masing² sudah bisa didapatkan karya CSS dengan posisi yang kita inginkan :x

Kesempatan kali ini Beben akan membagi cara membuat link berbagi dari web AddThis.com dengan menggunakan attribute CSS posisi fixed.

Sediakan sebuah gambar bertemakan bintang (atau terserah) dengan resolusi 27 x 27 px Sobat harus sudah memiliki account di web share addthis.com. Itu saja bahan² yang kiranya akan kita pakai. Untuk bahan² membuat kue lebaran, cari sendiri di google search...buanyak =))

demo

Arahkan cursor ke star image di sebelah kiri monitor and see what happen there :P

Kode for Fixed Position Trick

<style>

.share_link {

	right: 0;

	top: 250px;

	width: 45px;

	height: 50px;

	z-index: 100;

	position: fixed;

	background: #FF6D4C;

-webkit-border-top-left-radius: 15px;

-webkit-border-bottom-left-radius: 15px;

-moz-border-radius-topleft: 15px;

-moz-border-radius-bottomleft: 15px;

border-top-left-radius: 15px;

border-bottom-left-radius: 15px;

}

.link_share {

	display: block;

	cursor: pointer;

	background: url(http://link-gambar-bintang.png) no-repeat;

	width: 27px;

	height: 27px;

	text-indent: -999em;

	margin: 11px auto 0 auto;

}

</style>



	<div class="share_link">



	<!-- AddThis Button BEGIN -->



	<a class="addthis_button link_share" href="https://www.addthis.com/bookmark.php?v=250&amp;username=bebenkoben">Bookmark and Share</a>

	<script type="text/javascript">

	var addthis_config = {

		data_track_clickback: true,

		services_compact: 'google, facebook, twitter, digg, stumbleupon, delicious, reddit, email, favorites, more',

		services_exclude: ''

	}

	</script>



	<script type="text/javascript" src="https://s7.addthis.com/js/250/addthis_widget.js#username=bebenkoben"></script>

	

<!-- AddThis Button END -->



</div>

Masukkan semua bumbu via Add a Gadget ► HTML/Javascript

NB:

        Kode yg diberi warna tinggal diganti sesuai selera sobat. Terutama kode yg berwarna merah, gantikan dengan ID account AddThis kalian!

Semoga bermanfaat :)

Happy blogging \m/