Pasang Social Bookmark Save and Share Pada Blogger

Sumber : Blogger Tutorial


            Kosine Blog pada kesempatan kali ini, Koisine Blog akan membagi tutorial membuat Widget Social Bookmark Save and Share.

Pasti kalian sobat blogger sudah tidak asing lagi dengan social bookmark yang satu ini dengan tampilan yang classic, elegant, dan fresh ini membuat pengguna blogger banyak yang menggunakan Save and Share ini pada blog mereka. Selain simple pasti widget ini mempunyai fungsi yaitu membagi artikel anda ke beberapa situs sosial seperti Facebook, Twitter, dan masih banyak yang lain.

Lagsung saja tutorialnya !

  • Pertama Login terlebih dahulu ke blogger sobat,
  • Selanjutnya Pilih Rancangan -> Edit Html -> Ceklist Expand Template Widget,
  • Silahkan sobat cari kode di bawah ini,
 
]]></b:skin>



  • Letakan script di bawah ini sebelum kode di atas


#bookmarks-footer {
padding: 0px 10px 0px 0px;
text-align: center;
overflow: hidden;
}
#bookmarks-footer a {
text-decoration:underline;
font-size:80%;
}
#bookmarks-footer a:hover {
text-decoration:none;
}
#bookmarks-footer span {
font-size: 27px;
line-height: 48px;
font-weight: bold;
padding-right: 5px;
}
#bookmarks-footer .stumble { background: url(http://i45.tinypic.com/20ua5j4.jpg) center top no-repeat;padding-top: 50px; display: block; width: 48px; float: left;margin-right:10px; }
#bookmarks-footer .digg{ background: url(http://i48.tinypic.com/30ldvmd.jpg) center top no-repeat;padding-top: 50px; display: block; width: 48px; float: left;margin-right:10px; }
#bookmarks-footer .tweet { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3PFAxiX2PSPzevBM_lyXwyiIDS-wD_yBmh1bBekXYcDqTtn9hvshEOy2QPiCeRpoWgE4rILAtSHLQrU11w5VrRDBMn5grtJOQNhwnI03nfR0PLqFsCnnYr-K7c4KIOuS7flCNrt5Q00U/) center top no-repeat;padding-top: 50px; display: block; width: 48px; float: left;margin-right:10px; }
#bookmarks-footer .save { background: url(http://i48.tinypic.com/jl3v3q.jpg) center top no-repeat;padding-top: 50px; display: block; width: 48px; float: left;margin-right:10px; }
#bookmarks-footer .reddit { background: url(http://i45.tinypic.com/xgmwdf.jpg) center top no-repeat;padding-top: 50px; display: block; width: 48px; float: left;margin-right:10px; }
#bookmarks-footer .more { background: url(http://i49.tinypic.com/2mxeds8.jpg) center top no-repeat;padding-top: 50px; display: block; width: 48px; float: left; }

  •  Selanjutnya silahkan sobat cari kode di bawah ini,

<data:post.body/>

  • Dan letakan script di bawah ini sesudah atau dibawah kode di atas,
<div id='bookmarks-footer'>
<h3>Save and Share!</h3>
<a
class='save'
expr:href='&quot;http://del.icio.us/post?url=&quot;+
data:post.url + &quot;&amp;title=&quot; + data:post.title'
rel='nofollow' title='Share this on del.icio.us'>Save iT</a>
<a
class='digg'
expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+
data:post.url + &quot;&amp;title=&quot; + data:post.title'
rel='nofollow' title='Digg this!'>Digg this</a>
<a
class='stumble'
expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+
data:post.url + &quot;&amp;title=&quot; + data:post.title'
rel='nofollow' title='Stumble upon something good? Share it on
StumbleUpon'>Stumble It</a>
<a
class='reddit'
expr:href='&quot;http://reddit.com/submit?url=&quot;+
data:post.url + &quot;&amp;title=&quot; + data:post.title'
rel='nofollow' title='Share this on Reddit'>Reddit It</a>
<a
class='tweet'
expr:href='&quot;http://twitter.com/home?status=Reading: &quot; +
data:blog.title + &quot; - &quot; + data:post.url + &quot;
(@BBW)&quot;' rel='nofollow' title='Tweet
This!'>Twitter</a>
<a class='more' href='http://www.addtoany.com/share_save'>More</a>
</div>

  • Terakhir Save Template
Sekian dulu tutorial dari Koisine Blog semoga artikel ini bisa bermanfaat bagi banyak orang.
Selamat Mencoba dan Terima Kasih :)

 

0 komentar:

Posting Komentar