24 May 2011

Cara Pasang Sharing Is Sexi di Blog

Jika sobat sering berselancar di internet, pasti sobat pernah menemukan gambar sharing seperti di bawah ini.
Pada postingan kali ini akan saya memberikan tips tentang cara pasang sharing is sexi pada blog.

tanpa basa - basi,,, langsung saja ke TKP....



  1. Login ke akun blogger anda disini
  2. Pada halaman Dasbor klik Rancangan >> Edit HTML, jangan lupa untuk mencentang Expand Template Widget [Tips : download template anda terlebih dahulu, untuk mencegah apabila terjadi kesalahan saat modifikasi template]
  3. Kemudian anda cari kode  ]]></b:skin> [tekan Ctrl+F untuk mempermudah pencarian kode], apabila sudah ketemu silahkan sedulur copy kode dibawah ini dan taruh tepat diatas kode tadi

    div.beauty-bookmarks {
    height:54px;
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqZGb3EQQux9kSue4SWkshFxyx0K6bxJeWktr3HtoCDDhTVxddr5uKKuU2PRHbwC91VhG1mZlWKMoEzoJec6-2j0ugHcuvtB3yFroS8ZsWKDPaPIrUTfgHmvnvEMEWoqsXqyaFMQxzoesQ/') no-repeat left bottom;
    position:relative;
    width:455px;
    }

    div.beauty-bookmarks span.beauty-rightside {
    width:17px;
    height:54px;
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqZGb3EQQux9kSue4SWkshFxyx0K6bxJeWktr3HtoCDDhTVxddr5uKKuU2PRHbwC91VhG1mZlWKMoEzoJec6-2j0ugHcuvtB3yFroS8ZsWKDPaPIrUTfgHmvnvEMEWoqsXqyaFMQxzoesQ/') no-repeat right bottom;
    position:absolute;
    right:-17px;
    }

    div.beauty-bookmarks ul.socials {
    margin:0 !important;
    padding:0 !important;
    position:absolute;
    bottom:0;
    left:10px;
    }

    div.beauty-bookmarks ul.socials li {
    display:inline-block !important;
    float:left !important;
    list-style-type:none !important;
    margin:0 !important;
    height:29px !important;
    width:48px !important;
    cursor:pointer !important;
    padding:0 !important;
    }

    div.beauty-bookmarks ul.socials a {
    display:block !important;
    width:48px !important;
    height:29px !important;
    font-size:0 !important;
    color:transparent !important;
    }

    .beauty-furl, .beauty-furl:hover, .beauty-digg, .beauty-digg:hover, .beauty-reddit, .beauty-reddit:hover, .beauty-stumble, .beauty-stumble:hover, .beauty-delicious, .beauty-delicious:hover, .beauty-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover {
    background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEid3WFn7l9iL6-a25eyw3iUowGswG96-t16hoYVZcyJEgIKQebTW-wGjYP4rDo2oxZDbwPNQ9-0FBfIY1aPS2lCyIDyd-fLJT38d4zzh1Vdu9Uc6W7d0wVIfiH92WbYpaTuDELlVTH5PDv0/') no-repeat !important;
    }

    .beauty-furl {
    background-position:-300px top !important;
    }
    .beauty-furl:hover {
    background-position:-300px bottom !important;
    }
    .beauty-digg {
    background-position:-500px top !important;
    }
    .beauty-digg:hover {
    background-position:-500px bottom !important;
    }
    .beauty-reddit {
    background-position:-100px top !important;
    }
    .beauty-reddit:hover {
    background-position:-100px bottom !important;
    }
    .beauty-stumble {
    background-position:-50px top !important;
    }
    .beauty-stumble:hover {
    background-position:-50px bottom !important;
    }
    .beauty-delicious {
    background-position:left top !important;
    }
    .beauty-delicious:hover {
    background-position:left bottom !important;
    }
    .beauty-technorati {
    background-position:-700px top !important;
    }
    .beauty-technorati:hover {
    background-position:-700px bottom !important;
    }
    .beauty-twitter {
    background-position:-350px top !important;
    }
    .beauty-twitter:hover {
    background-position:-350px bottom !important;
    }
    .beauty-facebook {
    background-position:-450px top !important;
    }
    .beauty-facebook:hover {
    background-position:-450px bottom !important;
    }
    .beauty-script-style {
    background-position:-400px top !important;
    }
    .beauty-script-style:hover {
    background-position:-400px bottom !important;
    }
    .beauty-designfloat {
    background-position:-550px top !important;
    }
    .beauty-designfloat:hover {
    background-position:-550px bottom !important;
    }

    NB : Jika anda ingin mengganti tulisan 'Sharing is sexy' menjadi 'Sharing is caring' maka ganti left bottom dan right bottom menjadi left top dan right top
  4. Setelah itu cari kode <data:post.body/> kemudian copy kode dibawah ini dan taruh tepat dibawah kode <data:post.body/>

    <b:if cond='data:blog.pageType == "item"'>
    <div class='beauty-bookmarks'>
    <ul class='socials'>
    <!-- delicious start-->
    <li class='beauty-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <!-- delicious end-->
    <!-- digg start-->
    <li class='beauty-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <!-- digg end-->
    <!-- technorati start-->
    <li class='beauty-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <!-- technorati end-->
    <!-- reddit start-->
    <li class='beauty-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <!-- reddit end-->
    <!-- Stumbleupon start-->
    <li class='beauty-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <!-- Stumbleupon end-->
    <!-- designfloat start-->
    <li class='beauty-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <!-- designfloat end-->
    <!-- facebook start-->
    <li class='beauty-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <!-- facebook end-->
    <!-- twitter start-->
    <li class='beauty-twitter'><a expr:href='&quot;http://twitter.com/home/?status=Chk Out-&quot; + data:post.title + &quot; &quot; + data:post.url' target='_blank'/></li>
    <!-- twitter end-->
    <!-- furl start-->
    <li class='beauty-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <!-- furl end-->
    </ul>
    <span class='beauty-rightside'/>
    </div>
    </b:if>

    NB : Jika ada situs social bookmarking tertentu yang tidak ingin anda gunakan maka hapus saja kodenya. Contoh anda tidak ingin memasang Facebook maka hapus kode seperti ini:
    <!-- facebook start-->
    <li class='beauty-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>
    <!-- facebook end-->
  5. Kalau sudah simpan template anda...Selesai
PERLU PERHATIKAN

Bagi pengguna "Read More" kode <data:post.body/> pasti ada 2 buah, maka letakanlah kode diatas dibawah kode yang kedua.

No comments:

Post a Comment