Menambah Big Social Bookmark dibawah posting

Satu lagi keunggulan wordpress yang dapat kita aplikasikan pada blogspot, yaitu menambah widget <span style="font-weight: bold;">social bookmark</span> dibawah postingan blog.<br /><br /><br /><br />Penambahan <span style="font-weight: bold;">social bookmark</span> sangat baik sekali untuk mempromosikan blog kita di situs facebook, twitter, digg dan lain-lain.<br /><br /><br /><br />Kali ini yang ingin saya sharingkan bukan social bookmark pada umumnya akan tetapi yang big, selain mempercantik blog juga menarik minat pengunjung untuk mengkliknya..<br /><br /><a name='more'></a><br /><br />Contoh seperti gambar dibawah ini dapat anda lihat pada <a style="font-weight: bold;" href="http://rudyazhar.blogspot.com/2009/11/ikut-ngobrol-seputar-bisnis-online.html">blog Ngobrol Seputar Bisnis Online</a>.<br /><br /><br /><br /><img alt="social bookmark" border="0" id="BLOGGER_PHOTO_ID_5408825870912953410" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg3TdklQG11eBTygBssm5ZmmiDbztonfPBUtV15SST9SU3lSjhy2vpfrrEXVRGPt0Q3HpqrEtL-UfFe11LsjZQ5dqMItYhe0-TPiq0zEXnPpd43onkg80rfroxCmA7rpTurC4_hkHoUCk/s400/share.jpg" style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 154px;" /><br /><br /><br /><br />Gimana, keren kan? Oke kita mulai aja..<br /><br /><br /><br />seperti biasa Tambahkan kode CSS berikut di atas kode ]]></b:skin><br /><br /><br /><br /><blockquote>div.sociable { margin: 16px 0;}<br /><br /><br /><br />span.sociable_tagline { position: relative; }<br /><br />span.sociable_tagline span { display: none; width: 14em; }<br /><br />span.sociable_tagline:hover span {<br /><br />position: absolute;<br /><br />display: block;<br /><br />top: -5em;<br /><br />background: #ffe;<br /><br />border: 1px solid #ccc;<br /><br />color: black;<br /><br />line-height: 1.25em;<br /><br />}<br /><br />.sociable span {<br /><br />display: block;<br /><br />}<br /><br />.sociable ul {<br /><br />display: inline;<br /><br />margin: 0 !important;<br /><br />padding: 0 !important;<br /><br />}<br /><br />.sociable ul li {<br /><br />background: #f5f5f5;<br /><br />display: inline !important;<br /><br />list-style-type: none;<br /><br />margin: 0;<br /><br />padding: 2px;<br /><br />}<br /><br />.sociable ul li:before { content: ""; }<br /><br />.sociable img {<br /><br />float: none;<br /><br /><br /><br />border: 0;<br /><br />margin: 0;<br /><br />padding: 0;<br /><br />}<br /><br /><br /><br />.sociable-hovers {<br /><br />opacity: 0.4;<br /><br />-moz-opacity: 0.4;<br /><br />filter: alpha(opacity=40);<br /><br />}<br /><br />.sociable-hovers:hover {<br /><br />opacity: 1;<br /><br />-moz-opacity: 1;<br /><br />filter: alpha(opacity=100);<br /><br />}<br /><br /></blockquote><br /><br /><br /><br />Setelah itu simpan dulu template kamu<br /><br />lalu kamu ceklist Expand Template Widget.<br /><br /><br /><br />Kamu cari kode <p><data:post.body/></p><br /><br />kalau blog kamu sudah memakai readmore, maka ada dua kode tersebut.<br /><br />maka pilih kode yang kedua biar tidak tampak pada halaman utama.<br /><br />setelah ketemu kamu masukkan kode HTML berikut dibawah kode diatas.<br /><br /><br /><br /><blockquote><div class='sociable'><br /><br /><div class='sociable_tagline'><br /><br /><img alt='Ngobrol Seputar Bisnis Online' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjp1bIO7ugiDGrrQHSHtwivRO1iQKDzmAeYzy0sWOmwWzozs7iKOksF3IU6yo1ndxZXwSQwdhoYFBLTo6wErmPyJJYtIaOJlwFPKpF_USG26uD1HjHZA3wEJmxLpEO1slpKGdS7tSmehQoH/s1600/share.jpg' title='Share This Artikel'/><br /><br /></div><br /><br /><ul><br /><br /><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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz4Y7iLL88H_R_Q68FObvvnaGEQNvaKPj3CMk3qU94bIf67RgfRALdd2BbV_EF8rEO3UXGnsniYTD7-MhPLbh1cqVD6QJTewZ62Jc9e7DCBdKO9152UBHVWbBb4k7ZPEFWbvlk22ZtDqq9/s400/digg.png' title='Digg'/></a></li><br /><br /><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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLjlZ6GaT56VFkr4cvSXvKyHr8auaD5lVl9JySi0TNeySIEo2jvsFao9KLNy2pdPKgmATT6bT4yK9HKq7UurKa7C2z-3WqKYrKiEnlMTbw9fuuK26-dSCofJNiAYEHUl4tEeohXkq9AqTV/s400/delicious.png' title='del.icio.us'/></a></li><br /><br /><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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxnsAAySpg5p7mRoSxGfxvWWPCRpry-NFg5c3UNUorYkfbC6Xn6Mratlv4PGj_uIfT2RAAsxGhQaTm3DKpr68nhbKR1cCJIcGZvW96JOv4CYIzrzvlXQYy-uZKx0MEMdutDb10JiCPTreO/s400/facebook_002.png' title='Facebook'/></a></li><br /><br /><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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSXc-WA7pR0aB9Eo8fV1Wkj7obG9J9nmJPeN25yvEtxMop-r9D6cEEDC8S51cugvYlgB3LSknCHFoZ51Y63U8lt2B6z0lx_3ontrLhp6mlHfvBxJnJsIEPlm5dX6bKEnX0Zv2_847abngC/s400/googlebookmark.png' title='Google'/></a></li><br /><br /><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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKf-9UO5oTsDxoD-UdVVVlAwtw6WWVa7E5wlLfwNJOvoAfSNSAtGWzt2jbWY04r9Z9DZi71hlub7t71Ip8snmS5YkoninY4FvppPbKHqfSUA0f4JDy0WADxtd9Fmg1kC_NKgMgF0H2G99y/s400/stumbleupon.png' title='StumbleUpon'/></a></li><br /><br /><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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgl0upkP242C2_sTYXCpIEClrGahR8FCR6cx7MIjCX_nf_HU7hT5u41mwizeKAHvLdyFkdWeiwAJGTl-TtizDcE_R2J1qhmgrgNRw6_7HLoh-mBMQXDCBhpDpiICFjf0iKxy-Vota1NnlsQ/s400/technorati.png' title='Technorati'/></a></li><br /><br /><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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbKjOeLrEr-fRHCF6pWriRweCTJuOWxlUBAqg3mZ9elb48CSl1X0gOJXnG6txY4OONO4Apz-n0O4qCrLyZQ9_JS7VkFxcdtCd69WbR5Pn_elp-MMZI9oTILqFC6m9o_d6LdITmI8EiVo-C/s400/twitter.gif' title='TwitThis'/></a></li><br /><br /></ul><br /><br /></div></blockquote><br /><br /><br /><br />Karena penempatan social bookmark ini pada halaman postingan jadi kamu tidak bisa pratinjau hasilnya, so.. simpan aja dulu dan lihat hasilnya...<br /><br /><br />

Posted by Hii Sekai

Pasang Kolom About The Author

<span style="font-weight: bold;">About The Author</span> ini banyak diaplikasi oleh pemakai wordpress dan sekarang saya coba sharing untuk dapat juga digunakan bagi pengguna blogspot dengan kode CSS yang simpel. penampakannya bakal seperti pada <a href="http://www.bloggodown.com/2009/08/33-super-engagers-to-follow.html">Blog Godown</a>.<br /><br /><br /><br />Banyak pengguna blogspot yang iri dengan pengguna wordpress karena banyak widget yang menarik disana, tapi itu bukan suatu yang susah untuk kita aplikasikan ke blog kita.<br /><br /><a name='more'></a><br /><br />Ini contoh screenshootnya seperti yang ada pada blog <a style="font-weight: bold;" href="http://rudyazhar.blogspot.com/2009/11/ikut-ngobrol-seputar-bisnis-online.html">Ngobrol Seputar Bisnis Online</a>:<br /><br /><br /><br /><br /><br /><img alt="About the author" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiitGuevbQ2jE2r5a6f7fVG-LqYoExQZLt9zjLf-gujgHAoU9LqSOflvL20x3r8bnAOGMwE7oZ-PTD3BouYfPL0qXj9E7QFb8bFwImZDkwCEc2SbfX_ZBHOrZ-Bv3GwQ8iNS_B61GSFHog/s400/abouttheauthor1.jpg" style="margin: 0px auto 10px; display: block; text-align: center; cursor: pointer; width: 400px; height: 107px;" /><br /><br /><br /><br />Kita mulai aja ya...<br /><br /><br /><br /><ul><li>Login dulu ke account blogger kamu.</li><br /><li>Pilih tab Tata Letak --> Edit HTML.</li><br /></ul><br /><br />Tips : Sebelum melakukan edit template, sebaiknya simpan dulu template kamu yang ada dengan meng-klik tulisan Download Template Lengkap. Kemudian simpan dalam harddisk atau media penyimpanan lainnya, sehingga jika terjadi hal-hal yang tidak diinginkan kamu sudah memiliki back-up untuk mengembalikannya seperti semula.<br /><br /><br /><br />Tambahkan kode CSS berikut di atas kode ]]></b:skin><br /><br /><br /><br /><blockquote>.authbio{<br /><br />color: <span style="color: rgb(204, 0, 0);">#555</span>;<br /><br />font-weight: normal;<br /><br />font-size:0.9em;<br /><br />background: <span style="color: rgb(204, 0, 0);">#fff</span>;<br /><br />border: 3px groove #ccc;<br /><br />width: <span style="color: rgb(204, 0, 0);">475px</span>;<br /><br />padding: 10px;<br /><br />margin-bottom:20px;<br /><br />-moz-border-radius:15px;<br /><br />-webkit-border-radius:15px;<br /><br />}<br /><br /><br /><br />.authbio a{<br /><br /><br /><br />text-decoration:underline;<br /><br /><br /><br />}<br /><br />img.alignleft {<br /><br />float:left;<br /><br />background-color: #c4e3e0;<br /><br />border:5px solid #c4e3e0;<br /><br />padding: 5px;<br /><br /><br /><br />margin-left:5px;<br /><br />margin-top:0px;<br /><br />margin-bottom:25px;<br /><br />margin-right:12px;<br /><br /><br /><br />}</blockquote><br /><br /><br /><br />Setelah itu simpan dulu templatenya ntar bisa hilang..<br /><br />lalu kamu ceklist Expand Template Widget.<br /><br /><br /><br />Kamu cari kode <p><data:post.body/></p><br /><br />kalau blog kamu sudah memakai readmore, maka ada dua kode tersebut.<br /><br />maka pilih kode yang kedua biar tidak tampak pada halaman utama.<br /><br />setelah ketemu kamu masukkan kode HTML berikut dibawah kode diatas.<br /><br /><br /><br /><blockquote><div class='authbio'><br /><br /><div style='float: left;'><br /><br /><img alt='<span style="font-weight: bold;">rudy azhar' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpwYslaApjNzFkZcZrCJWT1MivqXJymEQ95s4NHONL6lNm2Yc6KebJAXNOYtPdCoULFy9DfAccTdEwI-b36nybcdjduR8oHaapoJ_YvzUpu5_qDPmxqHfpvlDXYs0p7ReHXvTIADk2/s400/rudy6.jpg</span>'/></div><br /><br /><h2><strong>About The Author:</strong></h2><br /><br /><a href='http://rudyazhar.blogspot.com/2009/07/rudy-azhar-admin-rudyazhar-dot-com.html'><strong>Penulis</strong></a> ialah seorang yang lagi merambah dunia internet marketing dan belajar lebih dalam lagi. Jika anda senang dengan tulisan ini, pastikan anda <a href='http://feedburner.google.com/fb/a/mailverify?uri=<span style="font-weight: bold;">internetmarketingsharing</span>' target='_blank'><strong>Mendaftar Gratis</strong></a>! atau ambil <a href='http://feeds.feedburner.com/<span style="font-weight: bold;">internetmarketingsharing</span>' target='_blank'><strong>Feed Rss</strong></a>.</div></blockquote><br /><br /><br /><br />Simpan template kamu dan lihat hasilnya...<br /><br /><br /><br />Jangan lupa untuk merubah alamat foto dengan alamat foto kamu, serta kamu bisa mengganti kalimat diatas dengan kreasi kamu sendiri.<br /><br /><br />

Posted by Hii Sekai