Marley And Me

Marley And Me Marley And Me

Crank:High Voltage

Crank:High Voltage Crank:High Voltage

WATCHMEN - The Movie

WATCHMEN - The Movie WATCHMEN - The Movie

Bedtime Stories

Bedtime Stories Bedtime Stories
Latest News

Sexy Social Bookmarks

Posted by NdyTeeN on Rabu, 25 April 2012 , under | komentar (1)



Blogwalking adalah salah satu cara yang paling tepat untuk cari inspirasi. Buktinya dengan blogwalking kita dapat informasi dan ide-ide cemerlang dan bisa kita tuangkan kedalam blog kita. Seperti postingan saya kali ini. Saya mendapatkan widget unik dari blogwalking blog Cahaya Biru. Widget Social Bookmark yang terlihat tampil beda. Social Bookmark ini dinamai dengan Sexy Social Bookmark, karena tampilannya terlihat sexy dan stylist. Coba liat gambar dibawah ini.



Saya akan jelaskan tutorial membuatnya. Ga usah panjang lebar basa-basinya hehehe

Yang pasti anda harus login blogger terlebih dahulu. Lalu tuju langsung ke halaman EDIT HTML, jangan lupa Expand Widget Template. Cari kode ]]></b:skin> kemudian letakkan kode CSS dibawah ini persis diatas kode ]]></b:skin> 


.sexy-bookmarks {
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat left bottom;
position:relative;
width:540px;
}

.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('http://i43.tinypic.com/2ueii3t.png') no-repeat right bottom;
position:absolute;
right:-17px;
}

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

.sexy-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;
}

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

}

.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url('http://img509.imageshack.us/img509/3131/sexysprite.png') no-repeat !important;
}

.sexy-furl {
background-position:-300px top !important;
}
.sexy-furl:hover {
background-position:-300px bottom !important;
}
.sexy-digg {
background-position:-500px top !important;
}
.sexy-digg:hover {
background-position:-500px bottom !important;
}
.sexy-reddit {
background-position:-100px top !important;
}
.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position:left top !important;
}
.sexy-delicious:hover {
background-position:left bottom !important;
}
.sexy-yahoo {
background-position:-650px top !important;
}
.sexy-yahoo:hover {
background-position:-650px bottom !important;
}
.sexy-blinklist {
background-position:-600px top !important;
}
.sexy-blinklist:hover {
background-position:-600px bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-myspace {
background-position:-200px top !important;
}
.sexy-myspace:hover {
background-position:-200px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-mixx {
background-position:-250px top !important;
}
.sexy-mixx:hover {
background-position:-250px bottom !important;
}
.sexy-script-style {
background-position:-400px top !important;
}
.sexy-script-style:hover {
background-position:-400px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}
.sexy-email {
background-position:-753px top !important;
}
.sexy-email:hover {
background-position:-753px bottom !important;
}

</style>
Jangan lupa disimpan terlebih dahulu kalo sudah. Kemudian cari kode <data:post.body/>

Note : biasanya letaknya ini dibagian kode Read More bagi blog anda yang sudah menggunakannya.

Letakkan HTML berikut ini dibawah kode <data:post.body/> :

<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;amp;&amp;title=&quot; + data:post.title' target='_blank'
/></li>

<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;amp;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;amp;&amp;title=&quot; + data:post.title' target='_blank'
/></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;amp;&amp;title=&quot; + data:post.title' target='_blank'
/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;amp;&amp;title=&quot; + data:post.title' target='_blank'
/></li>

<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;amp;&amp;title=&quot; + data:post.title' target='_blank'
/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;amp;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;amp;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;amp;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/YOUR-FEEDBURNER-ID' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;amp;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul>
<span class='sexy-rightside'/></div>
Lihat teks yang berkedip-kedip itu. Nah teks tersebut kamu ganti dengan Feedburner ID kamu. Setelah selesai jangan lupa simpan dan lihat hasilnya.

Sedikit penambahan nie...Kamu juga bisa meletakkan widget tersebut selain di bawah <data:post.body/>.

Kamu bisa letakkan di bawah kode
  •  <p class='post-footer-line post-footer-line-1'> yaitu letaknya persis dibawah label author.
  •  <p class='post-footer-line post-footer-line-2'> yaitu letaknya persis ditengah-tengah antara label author dan label Category.
  • <p class='post-footer-line post-footer-line-3'> yaitu letaknya persis dibawah label Category.
Selamat Mencoba...Happy Tutorial with NdyTeeN

Subcribes Feed di Bawah Posting

Posted by NdyTeeN on Senin, 25 April 2011 , under | komentar (0)





Pada umumnya pasang subcribes via feed dibawah posting ini sama dengan membuat widget subcribes via feed yang kita simpan di sidebar blog. Tapi ada sedikit perbedaan yakni kalo kita pasang dibawah posting, kita harus parse kodenya terlebih dahulu. Sebelumnya anda harus ingat terlebih dahulu. Widget ini sebaiknya dipasang diblog yang sudah memakai Read More. Karena kalo tidak maka widget ini akan tampil dihalaman depan. Otomatis tidak indah kalo dilihat.

Berikut tutorial membuatnya.

Langkah I

Login Blogger anda kemudian masuk Template -> Edit HTML -> Expand Widget Template Anda. cari kode ]]></b:skin>  kemudian copy paste kode berikut ini persis diatas kode ]]></b:skin>  :
#kotak {
background: #fff;
width: 200px;
color: #000000;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
font-weight: normal;
margin: 10px 0px 0px 0px;
padding: 3px;
border-top: 1px solid #666666;
border-right: 1px solid #ddd;
border-left: 1px solid #666666;
border-bottom: 1px solid #ddd;
display: inline;
}
#tombol {
background: #2B74B4;
color: #FFFFFF;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
margin: 0px 0px 0px 5px;
padding: 2px;
border: 1px solid #234B69;
font-weight: bold;
}
#email{
background: #FFFFFF;
color: #000000;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
margin: 0px;
padding: 4px;
border-top: 1px solid #666666;
border-right: 1px solid #DDDDDD;
border-left: 1px solid #666666;
border-bottom: 1px solid #DDDDDD;
}
#submit {
background: #2B74B4;
color: #FFFFFF;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
padding: 4px;
margin: 0px;
border: 1px solid #234B69;
}
Langkah II

Cari kode berikut ini. Ingat kode ini hanya blog yang sudah memakai Read More. Kira-kira kodenya seperti ini :

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/>
<a expr:href='data:post.url'><strong>Read More...</strong></a></p>
</b:if>
Hapus kode diatas kemudian anda ganti dengan kode dibawah ini.

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/>

<div style='padding:10px;margin:10px 0px 10px 0px;background:#eee;text-align:left;border:1px solid #ddd'>

<p>Ingin mendapat artikel seperti ini langsung ke Email anda? Silahkan masukan alamat email anda untuk berlangganan.</p>

&lt;form id=&quot;subscribe&quot; action=&quot;http://www.feedburner.com/fb/a/emailverify&quot; target=&quot;popupwindow&quot; method=&quot;post&quot; onsubmit=&quot;window.open(&#39;http://www.feedburner.com&#39;, &#39;popupwindow&#39;, &#39;scrollbars=yes,width=550,height=520&#39;);return true&quot;&gt;&lt;input id=&quot;kotak&quot; onfocus=&quot;if (this.value == &#39;Masukan alamat Email anda...&#39;) {this.value = &#39;&#39;;}&quot; value=&quot;Masukan alamat Email anda...&quot; name=&quot;email&quot; onblur=&quot;if (this.value == &#39;&#39;) {this.value = &#39;Masukan alamat Email anda...&#39;;}&quot; type=&quot;text&quot;/&gt;&lt;input value=&quot;http://feeds.feedburner.com/ID&quot; name=&quot;url&quot; type=&quot;hidden&quot;/&gt;&lt;input value=&quot;daftar kolom tutorial&quot; name=&quot;title&quot; type=&quot;hidden&quot;/&gt;&lt;input id=&quot;tombol&quot; value=&quot;Subcribes&quot; type=&quot;submit&quot;/&gt;&lt;/form&gt;  
</div>

</p>
<b:else/>
<style>.fullpost{display:none;}</style>
<p><data:post.body/></p>
<a expr:href='data:post.url'><strong>Read More...</strong></a>
</b:if>
  • Ganti teks ini sesuai dengan teks yang anda buat  "Ingin mendapat artikel seperti ini langsung ke Email anda? Silahkan masukan alamat email anda untuk berlangganan".
  • Ganti teks ini sesuai dengan teks yang anda buat "Masukan alamat Email".
  • Ganti kode http://feeds.feedburner.com/ID dengan ID feedburner anda. 

Jangan lupa simpan template dan lihat hasilnya.

OK Happy Blogging