Cara Membuat Share This Post

Waktu blogwalking ketemu artikel menarik dari vanmovic. Saya sendiri sudah menerapkannya pada blog ini karena saya pikir bermanfaat maka saya share juga untuk para sobat. Selamat mencoba sobat....


Cara Membuat Share This Post mungkin judul yang tepat untuk artikel saya yang satu ini...Mungkin ini juga artikel pertama saya yang membahas tentang tutorial blog, karena sejak saya ngeblog pertama kali sampai sekarang belum pernah memberi tutorial tentang blog atau apapun karena saya bukan ahlinya soal ini hehehe. Artikel ini muncul karena temen senasib seperjuang sesama blogger yaitu bertanya soal Rizky Share This Post ini... Ok deh langsung aja :

Mungkin diantara para sobat blogger belum mengerti apa maksud dan fungsi Share This Post ini. Share This Post ini terdapat 7 tombol, yaitu : Digg, Delicious, Facebook, Google, Stumble, Technorati dan Twitter. Fungsinya adalah untuk mensubmit artikel Anda dengan mudah karena kita tinggal mengklik saja salah satu social bookmark dan secara otomatis artikel Anda akan langsung tersubmit ke social bookmark. Dan tentu saja fungsi utama Social Bookmark adalah meningkatkan traffic pengunjung.

Langsung aja deh ke pokok bahasannya membuat Share This Post ini, simak baik-baik yeaaa... :

1. Login ke akun Bloggermu
2. Tata Letak > Edit HTML > (beri tanda centang pada Expand Template Widget)


Langkah Pertama :

1. Tekan CTRL+F (Find) untuk memudahkan pencaria dan carilah kode berikut: ]]></b:skin> 
2. Setelah itu, Copy dan Paste kode HTML di bawah ini, dan di letakkan tepat diatas kode ]]></b:skin>

div.sociable { margin: 16px 0;}

span.sociable_tagline { position: relative; }
span.sociable_tagline span { display: none; width: 14em; }
span.sociable_tagline:hover span {
position: absolute;
display: block;
top: -5em;
background: #ffe;
border: 1px solid #ccc;
color: black;
line-height: 1.25em;
}
.sociable span {
display: block;
}
.sociable ul {
display: inline;
margin: 0 !important;
padding: 0 !important;
}
.sociable ul li {
background: #f5f5f5;
display: inline !important;
list-style-type: none;
margin: 0;
padding: 2px;
}
.sociable ul li:before { content: ""; }
.sociable img {
float: none;

border: 0;
margin: 0;
padding: 0;
}

.sociable-hovers {
opacity: 0.4;
-moz-opacity: 0.4;
filter: alpha(opacity=40);
}
.sociable-hovers:hover {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}

Langkah pertama sudah selesai....

Langkah Kedua :

1. Kembali tekan CTRL+F (Find) dan carilah kode berikut: <data:post.body/>
2. Kemudian, copas HTML di bawah ini, tepat di bawah kode ini: <data:post.body/>      

NOTE : Jika blog Anda sudah memakai fungsi readmore, maka terdapat dua kode tersebut. Maka pilih kode yang kedua/terakhir biar tidak tampak pada halaman utama.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='sociable'>
<div class='sociable_tagline'>

<img alt='The Vanmovic' src='http://4.bp.blogspot.com/_KgIhfKU4BcE/SwfOTb1pF1I/AAAAAAAAAuI/M-fC8ABhw6c/s1600/share.jpg' title='Share This Artikel'/>
</div>
<ul>
<li><a expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Digg' class='sociable-hovers' src='http://4.bp.blogspot.com/_KgIhfKU4BcE/SwfN_PyGWsI/AAAAAAAAAtw/HUcVDlUpfwg/s400/digg.png' title='Digg'/></a></li>
<li><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='del.icio.us' class='sociable-hovers' src='http://1.bp.blogspot.com/_KgIhfKU4BcE/SwfN5pqFA4I/AAAAAAAAAto/HFYS5rLHaIo/s400/delicious.png' title='del.icio.us'/></a></li>
<li><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Facebook' class='sociable-hovers' src='http://2.bp.blogspot.com/_KgIhfKU4BcE/SwfOGlfWg6I/AAAAAAAAAt4/1NpvgqnynAg/s400/facebook_002.png' title='Facebook'/></a></li>
<li><a expr:href='&quot;http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Google' class='sociable-hovers' src='http://3.bp.blogspot.com/_KgIhfKU4BcE/SwfOL1O6pFI/AAAAAAAAAuA/fCpnpHg87yg/s400/googlebookmark.png' title='Google'/></a></li>
<li><a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='StumbleUpon' class='sociable-hovers' src='http://3.bp.blogspot.com/_KgIhfKU4BcE/SwfObF-toHI/AAAAAAAAAuQ/SwO1_vXBHWg/s400/stumbleupon.png' title='StumbleUpon'/></a></li>
<li><a expr:href='&quot;http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='Technorati' class='sociable-hovers' src='http://4.bp.blogspot.com/_KgIhfKU4BcE/SwfOoNe2fWI/AAAAAAAAAuY/cxTxqKCpVYE/s400/technorati.png' title='Technorati'/></a></li>
<li><a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'><img alt='TwitThis' class='sociable-hovers' src='http://2.bp.blogspot.com/_KgIhfKU4BcE/SwfOswiRsWI/AAAAAAAAAug/cllKpvLIDi4/s400/twitter.gif' title='TwitThis'/></a></li>
</ul>
</div>

</b:if>

3. Setelah selesai langsung klik Simpan Template
4. Dan lihat hasilnya
5. Semoga bermanfaat.....