Apakah anda seorang penggemar musik,ingin selalu mendengar musik,dari Komputer,Handphone,atau dari MP3 Player,.a’ha itu sudah biasa,bagaimana kalau mencoba mendengarkan lagu dari blog,udah coba belum.

Dengan memasang Musik Player diblog anda,maka blog anda serasa akan hidup,anda bisa langsung mendengarkan lagu kesayangan anda,tidak cuman anda,pengunjung pun juga bisa menikmatinya.Widget ini sangat berguna bagi Blog yang berhubungan dengan Musik.

Kali ini kita akan menggunakan widget dari Musik-live.net [screenshoot-nya seperti ini]



1.Buka browser anda dan ketikan http://www.musik-live.net/

2.Lalu klik Skin Mp3 Player

3.Pilih Skin/tampilan yang anda inginkan,klik Preview skin untuk melihat tampilannya

4.Copy kodenya

5.Masuk ke Blogger dengan ID anda

6.Klik menu Layout -> Page Elements

7.Klik add widget template

8.Pilih HTML/Javascript

9.Pastekan pada kota HTML/Javascript

10.Save,selesai

Note:Ohya pada cara diatas lagu yang muncul adalah lagu yang sudah disediakan,jika anda ingin memilih sendiri lagu yang ingin ditampilkan berikut caranya:

1. Pada halaman depan Musik-Live, cari lagu favorit anda dengan kotak pencari.

2. Lalu klik Play & Embed code untuk menampilkan kodenya

3. Copy kodenya lalu paste ke menu HTML/ Javascript blogger anda.

4. Selesai

Note: Cara ini hanya bisa untuk memutar 1 lagu saja. Jika anda ingin memutar banyak lagu maka gunakan eSnips.

Cara memasang musik player dari eSnips akan dibahas pada postingan selanjutnya

Jika anda orang baik tinggalkan komentar untuk kedewasaan blog ini,thank’s

Memasang Musik Player Pada Blog(2)

Pada postingan sebelumnya,saya telah membahas memasang musik player dari musik-live.net,jika belum baca tolong baca dulu disini.kali ini masih berkaitan dengan musik player,selain musik-live masih ada musik player lainnya yang cukup bagus salah satunya eSnips,seperti janji saya,kali ini saya akan membahas pemasangan musik player kedalam blog dari eSnips

Jika ingin mencobanya,berikut caranya:

[Screenshootnya seperti ini]

1.Buka browser anda dan ketikan http://www.esnips.com/
2.Sebelum itu anda harus mendaftar/signup dulu di eSnips

3.Jika sudah Sign-in ke akun anda Klik Upload Files lalu klik Select Files



4. Pilih lagu yang mau anda putar lalu pilih folder dimana anda mau memyimpan lagunya. Pastikan folder yang anda pilih adalah bersifat Public. Karena kalau Private anda tidak bisa menambahkan lagunya kedalam playlist.

5 Jika sudah klik Upload Now

6. Tunggu hingga proses upload selesai.

7. Jika sudah selesai klik menu Folder. Pilih folder dimana anda menyimpan lagunya

8. Pilih lagu-lagu yang ingin anda pasang dengan cara klik Add to quicklist
9. Jika sudah, scroll ke bagian atas halaman lalu klik Create playlist widgets


10. Pilih skin yang anda inginkan. Lalu copy kodenya yang ada pada kotak.



11. Buka blogger. Paste kodenya pada menu HTML/ Javascript lalu klik Save

12. Selesai. Silahkan lihat hasilnya.

Jika ukurannya tidak pas,anda bisa mengaturnya dengan cara mengubah width-nya

Udah dulu kali ini tutorialnya udah capek jari ngetik-ngetik keyboard terus,thank’s

Save page as PDF [Indonesian Version]

Apakah anda pernah melihat sebuah blog yang menyediakan widget simpan sebagai PDF di blog nya,menurut saya hal ini sangat menarik untuk dicoba,karena selain memperindah halaman blog juga memudahkan pengunjung untuk menyimpan halaman blog kita.tentu pengujung juga merasa dimudahkan dengan layanan ini,”tamu adalah raja” itulah kata pepatah,selain itu traffic blog anda juga akan naik.bagaimana apakah anda ingin membuatnya.

Jika anda tertarik untuk membuatnya silahkan ikuti tutorial berikut:

1.Login ke blogger dengan ID anda

2.Lalu Klik Menu Templates

3.Klik Sub Menu Edit HTML

4.Pada Kotak Edit HTML cari Kode <data:post.body/>
5.Lalu Copy Kode berikut dan Pastekan dibawah kode <data:post.body/>

<center>
<!-- START: PDF Online Script -->
<script type='text/javascript'>
var authorId = &quot;4D2009E0-017A-4BC3-BC97-AB23434373AE&quot;;
var pageOrientation = &quot;0&quot;;
var topMargin = &quot;0&quot;;
var bottomMargin = &quot;0&quot;;
var leftMargin = &quot;0&quot;;
var rightMargin = &quot;0&quot;;
</script>
<script src='http://web2.pdfonline.com/pdfonline/pdfonline.js' type='text/javascript'>
</script>
</center>

6.Lalu Simpan Template Sobat

7.Selesai

Silahkan lihat Blog Sobat masing-masing untuk melihat hasilnya

Note:Selain itu Sobat juga bisa mengeditnya atau memperindahnya seperti pada blog saya ini,jika ingin seperti blog saya ini berikut kodenya:

<div style="background:#000000; border: 4px double rgb(153, 153, 153);
overflow: auto;
width: 582px;
height: 110px;
text-align: center; ">
<center>
<!-- START: PDF Online Script -->
<script type='text/javascript'>
var authorId = &quot;4D2009E0-017A-4BC3-BC97-AB23434373AE&quot;;
var pageOrientation = &quot;0&quot;;
var topMargin = &quot;0&quot;;
var bottomMargin = &quot;0&quot;;
var leftMargin = &quot;0&quot;;
var rightMargin = &quot;0&quot;;
</script>
<script src='http://web2.pdfonline.com/pdfonline/pdfonline.js' type='text/javascript'>
</script>
</center> <div style="text-align: justify;"><span style="color: rgb(255, 255, 255);font-size:100%;">Gunakan tombol diatas untuk menyimpan halaman ini menjadi format PDF, agar hasil penyimpanan maksimal. Setelah tombol disamping di-klik, akan terbuka jendela baru, dan tunggu beberapa saat, akan ada konfirmasi letak penyimpanan file PDF di komputer yang anda gunakan</span></div>
</left>
</div>

Membuat Sexy Social Bookmark (2)

 

Sexy Social Bookmark Part II - Masih ingat dengan tutorial yang sudah pernah saya post dulu yaitu Sexy Social Bookmark. Mencoba mengingatkan bagi yang sudah memasang tutorial ini atau yang belum pernah sama sekali. Rasanya blogger semakin tidak puas dengan apa yang sudah dimilikinya. Selalu saja mengotak-atik templatenya biar terlihat indah dan tidak bosan dipandang. Kali ini saya akan memberikan tutorial yang mantap dan luar biasa. tidak apa-apalah kalau bombastis sedikit. Sexy Social Bookmark kali ini terlihat lebih elegant, stylist dan tutorial ini akan saya lakukan dengan langkah sederhana.

Widget ini terdiri dari 18 social bookmark yang memudahkan pengunjung untuk sharing dan bookmark post kita. Sebelum mengerjakan tutorial ini ada baiknya kita lihat demonya dolo, apakah sesuai dengan keinginan anda atau tidak. Lihat demonya : Demo

Configuration Setting :

Step 1 :

Masuk ke blogger acount anda, dan pilih Dashboard >> layout >> Edit html dan sebelumnya anda centang Expand Widget Templates

Temukan kode : ]]></b:skin>

Kemudian letakkan kode berikut ini diatas kode ]]></b:skin>

/* start share the love css by ndyteens.blogspot.com
----------------------------------------------- */
div.sexy-bookmarks{margin:20px 0 0 0; border: 0;outline: none;clear:both !important}
div.sexy-bookmarks-expand{height:29px; overflow:hidden}
.sexy-bookmarks-bg-sexy, .sexy-bookmarks-bg-love{background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfu2kX3c6vw8Dt5RFR5Fsc4XJpcBBbbv0iLcjYK07lYdfsEXbAn78go0pFEhsF-_fr2pDrz75Wf3es_RxzDEBALwQ0H38B8b22nyE8xbF3vTng5cwlPd6fhd2xhsMT2GMdE5LV8JVZmN0/') !important; background-repeat:no-repeat}
div.sexy-bookmarks-bg-love{padding:26px 0 0 10px; background-position:left -1148px !important}
div.sexy-bookmarks ul.socials{width:100% !important; margin:0 !important; padding:0 !important; float:left}
div.sexy-bookmarks ul.socials li{display:inline !important; float:left !important; list-style-type:none !important; margin:0 !important; height:29px !important; width:60px !important; cursor:pointer !important; padding:0 !important}
div.sexy-bookmarks ul.socials li:before, div.sexy-bookmarks ul.socials li:after, div.sexy-bookmarks ul.socials li a:before, div.sexy-bookmarks ul.socials li a:after{content:none !important}
div.sexy-bookmarks ul.socials a{display:block !important; width:60px !important; height:29px !important; text-indent:-9999px !important; background-color:transparent !important}
div.sexy-bookmarks ul.socials a:hover{background-color:transparent !important}
.sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumbleupon, .sexy-stumbleupon:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoobuzz, .sexy-yahoobuzz: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-scriptstyle, .sexy-scriptstyle:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-comfeed, .sexy-comfeed:hover, .sexy-newsvine, .sexy-newsvine:hover, .sexy-linkedin, .sexy-linkedin:hover, .sexy-google, .sexy-google:hover, .sexy-friendfeed, .sexy-friendfeed:hover{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbRUEKtLLT6RAqi9xidWGvgKUErbuRVkAQPgAEiCvqrGPNU43Y4OHO1tZx6-pTQweJYssulSAGuwrUGIY_hSdAuMwnUGZRnzyk9nFd4lYFMF3MwF_GzzXEDQP8szOtajSE37BU3usIn2Y/') no-repeat !important;border: 0;outline: none;}
.sexy-digg{background-position:-980px bottom !important}
.sexy-digg:hover{background-position:-980px top !important}
.sexy-reddit{background-position:-700px bottom !important}
.sexy-reddit:hover{background-position:-700px top !important}
.sexy-stumbleupon{background-position:-630px bottom !important}
.sexy-stumbleupon:hover{background-position:-630px top !important}
.sexy-delicious{background-position:-1190px bottom !important}
.sexy-delicious:hover{background-position:-1190px top !important}
.sexy-yahoobuzz{background-position:-1120px bottom !important}
.sexy-yahoobuzz:hover{background-position:-1120px top !important}
.sexy-blinklist{background-position:-1260px bottom !important}
.sexy-blinklist:hover{background-position:-1260px top !important}
.sexy-technorati{background-position:-560px bottom !important}
.sexy-technorati:hover{background-position:-560px top !important}
.sexy-myspace{background-position:-770px bottom !important}
.sexy-myspace:hover{background-position:-770px top !important}
.sexy-twitter{background-position:-490px bottom !important}
.sexy-twitter:hover{background-position:-490px top !important}
.sexy-facebook{background-position:-1330px bottom !important}
.sexy-facebook:hover{background-position:-1330px top !important}
.sexy-mixx{background-position:-840px bottom !important}
.sexy-mixx:hover{background-position:-840px top !important}
.sexy-scriptstyle{background-position:-280px bottom !important}
.sexy-scriptstyle:hover{background-position:-280px top !important}
.sexy-designfloat{background-position:-1050px bottom !important}
.sexy-designfloat:hover{background-position:-1050px top !important}
.sexy-newsvine{background-position:left bottom !important}
.sexy-newsvine:hover{background-position:left top !important}
.sexy-google{background-position:-210px bottom !important}
.sexy-google:hover{background-position:-210px top !important}
.sexy-comfeed{background-position:-420px bottom !important}
.sexy-comfeed:hover{background-position:-420px top !important}
.sexy-linkedin{background-position:-70px bottom !important}
.sexy-linkedin:hover{background-position:-70px top !important}
.sexy-friendfeed{background-position:-1750px bottom !important}
.sexy-friendfeed:hover{background-position:-1750px top !important}
.sexy-link{ margin-left:25px; float:left}
.sexy-link A{padding:10px 0; width:470px; text-align:right; border:0; outline:none}
/* end share the love css by ndyteens.blogspot.com
----------------------------------------------- */

Step 2 :

Masih dikode ]]></b:skin>

Letakkan kode script berikut dibawah kode ]]></b:skin>

<script src='http://sites.google.com/site/freshthemesgallery/javascript/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready(function() {
// xhtml 1.0 strict way of using target _blank
jQuery(&#39;.sexy-bookmarks a.external&#39;).attr(&quot;target&quot;, &quot;_blank&quot;);
// this block sets the auto vertical expand when there are more than
// one row of bookmarks.
var sexyBaseHeight=jQuery(&#39;.sexy-bookmarks&#39;).height();
var sexyFullHeight=jQuery(&#39;.sexy-bookmarks ul.socials&#39;).height();
if (sexyFullHeight&gt;sexyBaseHeight) {
jQuery(&#39;.sexy-bookmarks-expand&#39;).hover(
function() {
jQuery(this).animate({
height: sexyFullHeight+&#39;px&#39;
}, {duration: 400, queue: false});
},
function() {
jQuery(this).animate({
height: sexyBaseHeight+&#39;px&#39;
}, {duration: 400, queue: false});
}
);
}
// autocentering
if (jQuery(&#39;.sexy-bookmarks-center&#39;)) {
var sexyFullWidth=jQuery(&#39;.sexy-bookmarks&#39;).width();
var sexyBookmarkWidth=jQuery(&#39;.sexy-bookmarks:first ul.socials li&#39;).width();
var sexyBookmarkCount=jQuery(&#39;.sexy-bookmarks:first ul.socials li&#39;).length;
var numPerRow=Math.floor(sexyFullWidth/sexyBookmarkWidth);
var sexyRowWidth=Math.min(numPerRow, sexyBookmarkCount)*sexyBookmarkWidth;
var sexyLeftMargin=(sexyFullWidth-sexyRowWidth)/2;
jQuery(&#39;.sexy-bookmarks-center&#39;).css(&#39;margin-left&#39;, sexyLeftMargin+&#39;px&#39;);
}
});
</script>

Ada tiga alternatif tempat pemasangan widget ini:
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

Letakkan kode berikut ini dibawah salah satu kode diatas sesuai yang anda pilih :

<div class='sexy-bookmarks sexy-bookmarks-expand sexy-bookmarks-bg-love' style='margin:20px 0 0 0 !important; padding:25px 0 0 10px !important; height:29px;/*the height of the icons (29px)*/ display:block !important; clear:both !important;'>
<ul class='socials'>
<li class='sexy-delicious'><a class='external' 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'>Share this on del.icio.us</a></li>
<li class='sexy-digg'><a class='external' 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></li>
<li class='sexy-stumbleupon'><a class='external' 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 upon something good? Share it on StumbleUpon</a></li>
<li class='sexy-reddit'><a class='external' 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'>Share this on Reddit</a></li>
<li class='sexy-google'><a class='external' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Add this to Google Bookmarks'>Add this to Google Bookmarks</a></li>
<li class='sexy-twitter'><a class='external' expr:href='&quot;http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; (@NAME)&quot;' rel='nofollow' title='Tweet This!'>Tweet This!</a></li>
<li class='sexy-facebook'><a class='external' expr:href='&quot;http://www.facebook.com/share.php?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Facebook'>Share this on Facebook</a></li>
<li class='sexy-mixx'><a class='external' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url' rel='nofollow' title='Share this on Mixx'>Share this on Mixx</a></li>
<li class='sexy-comfeed'><a class='external' expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' rel='nofollow' title='Subscribe'>Subscribe</a></li>
<li class='sexy-yahoobuzz'><a class='external' expr:href='&quot;http://buzz.yahoo.com/submit/?submitUrl=&quot; + data:post.url' rel='nofollow' title='Buzz up!'>Buzz up!</a></li>
<li class='sexy-linkedin'><a class='external' expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Linkedin'>Share this on Linkedin</a></li>
<li class='sexy-designfloat'><a class='external' expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Submit this to DesignFloat'>Submit this to DesignFloat</a></li>
<li class='sexy-technorati'><a class='external' expr:href='&quot;http://technorati.com/faves?add=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Technorati'>Share this on Technorati</a></li>
<li class='sexy-scriptstyle'><a class='external' expr:href='&quot;http://scriptandstyle.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Submit this to Script &amp; Style'>Submit this to Script &amp; Style</a></li>
<li class='sexy-myspace'><a class='external' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=http&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Post this to MySpace'>Post this to MySpace</a></li>
<li class='sexy-blinklist'><a class='external' expr:href='&quot;http://www.blinklist.com/index.php?Action=Blink/addblink.php&amp;Url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on Blinklist'>Share this on Blinklist</a></li>
<li class='sexy-friendfeed'><a class='external' expr:href='&quot;http://friendfeed.com/?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on FriendFeed'>Share this on FriendFeed</a></li>
<li class='sexy-newsvine'><a class='external' expr:href='&quot;http://www.newsvine.com/_tools/seed&amp;save?u=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Seed this on Newsvine'>Seed this on Newsvine</a></li>
</ul>
<div style='clear:both;'/>
</div>
<div class='sexy-link'> <font size='1px'>Widget by <a href='http://www.cssreflex.com/' title='Web Design Blog, Blogger Hacks and Blogger templates'>Css Reflex </a>|<a href='http://www.tutzone.org/' title='Tutorials, Rare Downloads, Link Heaven, Tips Tricks, Hacks, Make How, Blogger Tricks And Tutorials, Internet, News, And Many More'> TutZone</a> | Brought to you by : </font><a href='http://www.ndyteens.blogspot.com' target='_blank' title='Blogger templates'><font size='2'>NdyTeeN</font></a></div>