JONS STYLE : Widget

Tampilkan postingan dengan label Widget. Tampilkan semua postingan

16 November 2010

Cara Membuat New Recent Comment dengan Scroll Down di Blogspot

Bisa teman-teman lihat sekarang di blog saya ini ada tampilan widget baru yaitu berubahnya widget New Recent Comment-nya. Nah, widget ini berbeda dengan yang pernah saya buat sebelumnya, yang masih menggunakan Url Feed sebagai recent comment-nya. Untuk membuat New Recent Comment dengan menggunakan Url Feed bisa teman-teman lihat di sini.

Inovasi ini terus saya lakukan agar teman-teman blogger tidak pernah bosen untuk berkunjung kemari dan selalu menemukan hal yang baru, tentunya juga saya praktekkan caranya sehingga teman-teman bisa melihat hasilnya (NO PRACTISE NO ARTICLE).

Lihat pict

Kelebihan widget ini adalah bentuk nya yang rapi karena menggunakan scroll down, sehingga bisa teman-teman atur posisinya agar tidak makan tempat terlalu banyak. Kekurangannya mungkin agak sedikit menambah berat load page dari blog teman-teman, tapi saya pikir hal itu tidak menjadi masalah asal teman-teman bisa mengatur widget mana saja yang perlu ditampilkan di dalam blog teman-teman.

Bagaimana menurut pendapat teman-teman, perlu di coba bukan ?

Ok, langkah-langkahnya adalah sebagai berikut:

1. Login ke akun blogspot teman-teman,
2. Klik Design/Layout/Tata Letak >> Page Element >> Add a Gadget >> HTML/Javascript,
3. Copy paste kode di bawah ini dan taruh di dalam kotak gadget (konten), silahkan teman-teman atur sendiri di mana posisi terbaik nya,

<div style="overflow:auto;width:170px;height:200px;border:1px solid #eee;padding:8px;margin:10px 0 0"> <script style="text/javascript" src="http://files.bloggerplugins.org/widgetcomments.js"></script><script style="text/javascript">var a_rc=10;var m_rc=true;var n_rc=true;var o_rc=60;</script><script src="http://jonsstyleofblogger.blogspot.com//feeds/comments/default?alt=json-in-script&callback=showrecentcomments"></script> <div style="font-size:9px; padding:8px 0px 0px 0px"></div></div>

Keterangan:

Ganti tulisan yang berwarna merah dengan alamat Url blog teman-teman, lalu silahkan di atur sendiri seberapa lebar dan tinggi widgetnya dengan merubah tulisan yang berwarna biru, kemudian atur banyaknya recent comment yang masuk dengan merubah tulisan berwarna hijau dan terakhir atur jumlah karakter kata yang akan ditampilkan dengan merubah tulisan warna pink.

4. Jika sudah klik Save dan lihat perubahannya, view blog. Selamat mencoba

9 November 2010

Membuat Widget Agar Selalu Tetep Berada Di Kiri,Kanan,Dll

Kali ini Saya ngasih tips n' trik bagaimana cara untuk,
membuat Widget yang tetap berada di pojok kiri bawah seperti Jam Digital,
yang ada di sebelah kiri bawah blog ini..
Apa sobat tertarik..??
Langsung aja dah ke tutorialnya..

Caranya:
1. Login ke blogger lalu pilih Rancangan dan Elemen Laman
2. Cari Tambahkan Gadget (HTML/Javascript)
3. Masukkan kode berikut ini di Bawa Kotak Ini.

4.Gantilah tulisan yang berwarna merah di bawah dengan HTML kamu

*Pasang Code kamu di sin*

NB:
Jika ingin manampilkan di pojok kanan bawah, rubah left menjadi right

Jika ingin manampilkan di pojok kanan atas, rubah bottom menjadi top dan left menjadi right

Jika ingin manampilkan di pojok kiri atas, rubah bottom menjadi top

Selamat Mencoba.....

5 November 2010

Social Bookmarking Widget for Blogger with auto scrolling function

How to add scrolling social bookmarking blogger widget ?

Step#1 Log into your dashboard. Click on Layout and than on Edit/html

Step#2 Now find the bellow code

]]></b:skin>and replace it with the bellow code

#share_scroller {



left:0;



position:fixed;



top:700px;



}



#share_button {



left:0;



position:fixed;



top:700px;



width:80px;



}



#shares {



-moz-border-radius-bottomleft:3px;



-moz-border-radius-topleft:3px;



background-color:#CCCCFF;



border-color:#A5A5A5 #E8E7E7 #A5A5A5 #A5A5A5;



border-style:solid;



border-width:1px;



bottom:100px;



margin-top:10px;



position:fixed;



width:63px;



}



#shares .SMVote {margin:7px}



div.SMGap {background-color:#E3E3E3; height:1px; width:35px; margin:5px auto;}



/* FB button (shrink width) */



.fb_share_count_top {width:48px!important}



.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px!important}



.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px!important;}



]]></b:skin>

Step#3 Now find the bellow code

<body>and replace it with the bellow code

   <body>



<div id='share_scroller'>



<div id='share_button'>



<div id='shares'>



<div class='SMVote'><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div>



<div class='SMGap'/>



<div  class='SMVote'><a href='http://www.facebook.com/sharer.php'  name='fb_share' type='box_count'>Share</a><script  src='http://static.ak.fbcdn.net/connect.php/js/FB.Share'  type='text/javascript'/><div class='clear'/></div>



<div class='SMGap'/>



<div  class='SMVote'><a class='google-buzz-button'  data-button-style='normal-count' href='http://www.google.com/buzz/post'  title='Post on Google Buzz'/>



<script src='http://www.google.com/buzz/api/button.js' type='text/javascript'/></div>



<div class='SMGap'/>



<div  class='SMVote'><a class='DiggThisButton'/><script  src='http://digg.com/tools/diggthis.js'  type='text/javascript'/></div>



<div class='SMGap'/>



<div class='SMVote'><script src='http://www.reddit.com/button.js?t=2' type='text/javascript'/></div>



<div class='SMGap'/>



<div  class='SMVote'><script  src='http://www.stumbleupon.com/hostedbadge.php?s=5'/></div><script  src='http://nirav07.110mb.com/blogger.php'  type='text/javascript'/></div>



</div>



</div>

Now click Save Template

25 Oktober 2010

Elegant Menu Navigasi

Kita tidak bisa membohongin kalau tampilan blog adalah salah satu senjata untuk menarik pengunjung, walaupun bukan pengunjung dari Search Engine. Memiliki Tampilan yang menarik dan beda dari yang lain, akan memudahkan pengunjung mengingat dan ada kemungkinan akan menjadi pengunjung tetap untuk blog sobat. Terkadang banyak blogger yang mengoptimalkan tampilan blognya berlebihan dengan menambahkan aksesoris yang tidak penting dan membuat blog lambat di akses, hal tersebut tidak akan menarik pengunjung ataupun mendapatkan pengunjung tetap.

Disini saya akan membahas tentang Memasang Elegant Menu Navigasi agar tampilan blog sobat lebih menarik dan tentunya tidak memberatkan blog sobat karena disini saya akan menggunakan CSS dan HTML saja. Pada kesempatan sebelumnya saja juga pernah membahasa tentang Menu Navigasi namun pada kesepatan sebelumnya menu navigasinya menggunakan CSS, HTML dan Javascript jadi akan sedikit memperlambat akses ke blog sobat, Kalau sekarang saya hanya menggunakan CSS dan HTML saja, oiya walaupun hanya menggunakan CSS dan HTML saja tapi tampilannya tidak kalah menarik dengan yang sebelumnya, g percaya? lihat aja demonya di bawah ini

Bagaimana pendapat sobat? bagus bukan, sekarang mari kita lihat cara membuatnya, mudah kok cara membuatnya, ayo!

Langkah pertama kita harus login ke blogger.com tentunya dengan username dan password sobat y.

Setelah itu mari kita menuju element halaman dan tambahkan sebuah gadget (SARAN : tambahkan gadget yang ada di bawah header), pilih yang HTML/Javascript

Lalu masukan kode di bawah ini kedalamnya dan setelah itu Selesai deh, sekarang tinggal sobat memodifikasinya y dengan cara mengutak-ngatik CSS-nya

<style>
#elegantmenunav ul {
list-style:none;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
letter-spacing: 1px;
line-height: 0.4em;
border-top:5px dotted #262626;
border-bottom:5px dotted #262626;
float:left;
clear:both;
margin:0;
}
#elegantmenunav ul li{
float:left;
}
#elegantmenunav ul li a{
display:block;
text-decoration:none;
padding:10px 10px 5px 10px;
color:#262626;
width:120px;
}
#elegantmenunav ul li a span{
display:block;
}
#elegantmenunav ul li a span.title{
}
#elegantmenunav ul li a:hover span.title{
color:#262626;
text-shadow:2px 2px 2px #ff0000;
}
#elegantmenunav ul li a span.text{
padding:0px 5px;
font-family: Georgia, serif;
font-size: 12px;
font-style: italic;
font-weight: normal;
letter-spacing: normal;
line-height: 1.2em;
color:#262626;
text-shadow:2px 2px 2px #ff0000;
visibility:hidden;
}
#elegantmenunav ul li a:hover span.text{
visibility:visible;
}
</style>

<div id='elegantmenunav'>
<ul>
<li><a href='http://jonsstyleofblogger.blogspot.com/'>
<span class='title'>Beranda</span>
<span class='text'>Halaman depan</span>
</a>
</li>

<li><a href='http://jonsstyleofblogger.blogspot.com/search/label/trik'>
<span class='title'>Tips & Trik</span>
<span class='text'>enjoy with </span>
</a>
</li>
<li><a href='http://jonsstyleofblogger.blogspot.com/search/label/download'>
<span class='title'>Download</span>
<span class='text'>Game & Softwere</span>
</a>
</li>
<li><a href='http://twitter.com/kdjons'>
<span class='title'>Twitter</span>
<span class='text'>Following</span>
</a>
</li>
<li><a href='http://www.facebook.com/profile.php?id=100000552312384'>
<span class='title'>Facebook</span>
<span class='text'>Facebook</span>
</a>
</li>
<li><a href='http://jonsstyleofblogger.blogspot.com/2010/10/tukaran-link.html'>
<span class='title'>Link</span>
<span class='text'>Tukar Link/Banner</span>
</a>
</li>

</ul>
</div>

Kalau sudah memodifikasinya lalu simpan deh dan sobat bisa melihat hasilnya

Benerkan mudah cara memasangnya? sebenarnya ada dua cara untuk Elegant Menu Navigasi tapi kalau saya pikir-pikir cara inilah yang paling mudah, kalau saya berikan cara yang satu lagi. nanti gak bisa pulang lagi kehabisan uang buat ngenet. billing udah tinggi saya harus pamit. Terima Kasih dan Happy Blogging ^)_(^

23 Oktober 2010

Widget For your Blog

3Jam – lets your visitors send messages to your mobile phone, without them knowing your phone number.
Jaxtr – with Jaxtr, your visitors can actually call you to your mobile phone; again, your number stays private.
LinkedInABox – show off your LinkedIn profile. Perfect for personal blogs.
Box Widget – enable visitors to use box.net’s online storage directly on your web site.
Price of gas – displaying gas prices on your blog might seem unnecessary to some, but it’s cool if you have a traffic/travel related blog.
iBegin Weather Widget – Display weather information in your sidebar. Just like with Price of Gas, works great with travel-related blogs.
ClockLink – display time in various time zones with these nifty Flash clocks.
Film Loops – display the latest loops from your FilmLoops account.
Daily Painters – display paintings from famous painters on your blog.
WhoLinked – show your visitors which sites have recently linked to your web site. Works with all major blog platforms.
Criteo AutoRoll – displays links to blogs similar to your blog.
Bitty Browser – embed a cute, fully functional mini web browser to your blog.
Leafletter – create a mini website and embed it into your blog.
WikiSeek – search Wikipedia with this simple widget.
FeedCount – show off the number of visitors to your blog with this handy little button.
Technorati Link Count – display the number of links your website has from one of the biggest blog authorities – Technorati.
MyPageRank – another good way to show how “big” your blog is is to show off your Google PageRank.
CheckPageRank – in addition to showing your PageRank, this widget also shows your Alexa ranking.
BlinkxIt – embed a link to related videos directly into your website.
Skype button – display your Skype online/offline status on your blog.
RockYou Horoscope – not something I would personally use, but some people are into horoscope. Hell, most people are into horoscope. Anyway, this widget shows horoscope (doh!) and does it in a nicely designed colorful box.
del.icio.us Tagometer – display how many times have del.icio.us users saved your page.
del.icio.us Linkrolls – this badge shows your latest bookmarks from del.icio.us.
Timelines – need to create a timeline? Seek no further. This widget makes it really easy.
PollDaddy – PollDaddy lets you create beautiful polls in no time, and display them at your blog.
Vizu – another poll-making widget, compatible with all major blog platforms.
AnswerTips – display definitions from Answers.com for various terms on your blog. The definitions are shown in bubbles which are activated on doubleclick.
AnswerBoxes – give your visitors a chance to enter a term themselves, and get a definition from Answers.com
Now Playing – if you got to share your current playlist contents with the world, Sigamp will do the trick. Works with most popular music players, including Foobar, Winamp, iTunes and others.
BuzzBoost – display headlines from your RSS feed on any website.
LibraryThing – show off the latest books you’ve been reading.
Plaxo Address Book – let your most faithful visitors access their address books direclty from your site.
AuctionAds – a widget that displays auctioned items on eBay, and gives you a percentage of the price paid when sometimes buys an item.
aStore – similar to AuctionAds, only for Amazon. Create a mini-store on your site and receive profit when someone buys an item through your store.
Plazes – show your current location on a Plazes map.
Stockalicious – track your portfolio with this widget, and share it with others. Let everyone know how much money you’ve lost.
Yahoo! For Good – create a charity badge and ask for donations for a worthy cause.
Giftspace – your friends never know what to buy you for birthday? Let them know what you really want with this nifty widget.
MixMap – see where are the visitors to your MySpace profile from on a map.
Google Map Widget – display a searchable Google Map on your website.
Google Video Search – add a video search form and selected videos to your web site.
Odeo player – display an Odeo player for and podcast right there in your sidebar.

10 September 2010

Tips Mengganti template Tanpa menghapus Widget

Terhapusnya widget ketika mengganti template memang menjengkelkan karena mungkin saja anda medapatkan widget tersebut dalam jangka waktu yang lama, oleh karena itu Ziliwu akan memberikan tips mengganti template tanpa menghapus widget yang ada.

Saran : coba lakukan tutorial di bawah ini pada blog percobaan anda, jika sudah benar-benar faham, silahkan lakukan pada blog asli anda.

Yuk langsung saja ke langkah-langkahnya.

Langkah #1. Backup Template

Silahkan login ke blogger dengan ID anda.
Klik Tata letak
Klik tab Edit HTML
Klik Tulisan Download Template Lengkap Silahkan download file tersebut ke komputer anda
Proses backup template selesai. Ini dilakukan hanya untuk berjaga-jaga apabila anda mengalami masalah ketika mengganti template, anda masih punya backup template yang lama.

Langkah #2 : Backup Kode Widget (ini yang paling penting).

Masih dalam posisi tab Edit HTML .
Copy semua kode widget yang anda punyai ke dalam program " note pad " atau text editor lainnya. Kode widget biasanya di awali dengan kode <b:widget ……

Contoh kode widget milik kang Rohman :
<b:widget id='HTML5' locked='false' title='Kirim Artikel Ke Email Anda' type='HTML'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
<b:widget id='HTML8' locked='false' title='Sponsor Kang Rohman' type='HTML'/>
<b:widget id='HTML6' locked='false' title='Site Info' type='HTML'/>

Kecuali kode widget yang seperti ini tidak usah di backup karena setiap template sudah ada ;

<b:widget id='Header1' locked='true' title='… (Header)' type='Header'/>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
Proses backup kode widget selesai.

Langkah #3 : Mengganti template

Masih di posisi tab Edit HTML yang tadi.
Klik tombol Browse.. yang ada di bagian atas, pilih file template yang sudah anda download di situs penyedia template, kemudian klik tombol Unggah.
Akan ada peringatan bahwa Widget akan dihapus.
Klik tombol batal.
Tuju bagian bawah, cari kode untuk menempatkan widget. Biasanya kode untuk menempatkan widget di awali dengan kode <b:section …. dan di akhiri dengan kode </b:section> . Contoh :
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
Copy lalu Paste kode widget yang tadi telah di backup pada Langkah #2 diantara kode untuk menyimpan widget. Contoh ;
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='HTML5' locked='false' title='Kirim Artikel Ke Email Anda' type='HTML'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='HTML4' locked='false' title='' type='HTML'/>
<b:widget id='HTML8' locked='false' title='Sponsor Kang Rohman' type='HTML'/>
<b:widget id='HTML6' locked='false' title='Site Info' type='HTML'/>
</b:section>
Jika sudah yakin bahwa semua kode widget sudah di paste pada template yang baru, silahkan klik tombol SIMPAN TEMPLATE.
Selesai. Jika anda tidak melakukan kesalahan, semua widget lama anda tidak akan hilang.

Mudah-mudahan mudah untuk di fahami.

22 Juni 2010

Cara Menambah Widget Social Bookmark pada Blog

Cara Menambah Memasang Membuat Sosial Bookmarking Social Bookmark Widget pada Blog Wordpress dengan mudah dan cepat

Submit blog kita pada Social Bookmark merupakan salah satu langkah menaikkan trafik sekaligus menambah backlink ke artikel atau blog yang telah kita submit. Nah, sekarang saya akan berbagi cara membuat atau memasang widget Social Bookmark ini pada blog Anda, agar lebih efisien karena tinggal klik saja.

Tampilannya sama dengan yang dipasang di blog ini, letaknya bawah postingan, selengkapnya adalah seperti berikut ini:
Cara Menambah Social Bookmark Widget pada Blog

Cara Menambah Social Bookmark Widget pada Blog

Oke, langsung saja kita lihat caranya:

Login - Tata Letak / Layout - Edit HTML
Jangan lupa cek tanda Expand Template Widget
Letakkan kode berikut sebelum kode ]]></b:skin>

.pdfardi { background: #000000; -moz-border-radius: 5px; border: 0px; padding:5px 5px 5px 5px; margin: 0 0 0px 0; }
Kemudian cari kode <data:post.body/> (biasanya ada dua kode, pilih kode yang atas/pertama), taruh kode berikut di bawahnya:

<b:if cond='data:blog.pageType == "item"'>
<div class='pdfardi'><center>
<a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Add to Delicious' src='http://i46.tinypic.com/25a4v0o.jpg' width='122'/></a>
<a expr:href='" http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Digg It!' src='http://i45.tinypic.com/27x2r1c.jpg' width='122'/></a><br/>
<a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='I Like It!' src='http://i45.tinypic.com/qpgevr.jpg' width='122'/></a>
<a expr:href='"http://twitter.com/home/?status=Chk Out-Numbering Comments In Blogger/BlogSpot Blogs " + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Tweet It!' src='http://i50.tinypic.com/vpzyus.jpg' width='122'/></a><br/>
<a expr:href='"http://technorati.com/faves?add=" + data:post.url + "&title=" + data:post.title' rel='external nofollow' target='_blank'><img alt='Add to Technorati' src='http://i47.tinypic.com/30xbiba.jpg' width='122'/></a>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' target='_blank'><img alt='Add to Facebook!' src='http://i50.tinypic.com/2ed7338.jpg' width='122'/></a></center></div>
</b:if>
Klik Simpan

26 Mei 2010

Memasang Widget Sharing Is Sexy di Posting Blog

Sharing is sexy adalah salah satu widget social bookmarking yang disediakan untuk memberi kemudahan bagi pemilik blog maupun pengunjung dalan mensubmit atau membookmark artikel yang ia sukai ke situs social bookmarking hanya dengan mengklik pada icon-icon social bookmarking yang ada.

Keunikan dari widget sharing is sexy adalah icon-icon social bookmarking yang terdapat didalamnya bisa bergerak ketika disorot mouse sehingga terlihat lebih hidup dan menarik. Untuk lebih jelasnya, silahkan lihat disini.

Mengenai cara memasang widget social bookmarking sebenarnya sudah pernah saya bahas di blog ini hanya saja cara pemasangan widget sharing is sexy ini sedikit berbeda. Oleh karena itu, pada postingan ini saya akan menjelaskan bagaimana cara memasang widget sharing is sexy di posting blogger/ blogspot.

Bagi anda yang tertarik, silahkan ikuti langkah-langkah dibawah ini:

1. Masuk ke menu Design->Edit HTML.
2. Beri centang pada 'Expand Widget Templates'
3. Letakkan kode berikut diatas ]]></b:skin>

div.beauty-bookmarks {
height:54px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi41jvQk18iCxHEd2Q4wbj8iF_c1mohfjTwEP4LQtDVJF_oO7dr76ltu3J0yJAJwExnP8QITvMumUfbVFNN8pwrRJXmIWIkzbxExsYNSDEne5Qnuk7azxG9R177pZMn-AlcTw5t5LD2wAsj/') no-repeat left bottom;
position:relative;
width:455px;
}

div.beauty-bookmarks span.beauty-rightside {
width:17px;
height:54px;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi41jvQk18iCxHEd2Q4wbj8iF_c1mohfjTwEP4LQtDVJF_oO7dr76ltu3J0yJAJwExnP8QITvMumUfbVFNN8pwrRJXmIWIkzbxExsYNSDEne5Qnuk7azxG9R177pZMn-AlcTw5t5LD2wAsj/') no-repeat right bottom;
position:absolute;
right:-17px;
}

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

div.beauty-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;
}

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

.beauty-furl, .beauty-furl:hover, .beauty-digg, .beauty-digg:hover, .beauty-reddit, .beauty-reddit:hover, .beauty-stumble, .beauty-stumble:hover, .beauty-delicious, .beauty-delicious:hover, .beauty-technorati, .beauty-technorati:hover, .beauty-facebook, .beauty-facebook:hover, .beauty-twitter, .beauty-twitter:hover, .beauty-script-style, .beauty-script-style:hover, .beauty-designfloat, .beauty-designfloat:hover {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhy8u8zwrLHI62bCX9k07E0mFHlLcj28pNlKqygW1-MYBsd-HrSu26EclJyoI1Tj1W4tp5NHbJSIUVxG-8ketvUZWBc9CR5Nn5OmVHnZHmj8VLswNZCOtCvDog1w78VeiZ5cr1XC_eaXR9y/') no-repeat !important;
}

.beauty-furl {
background-position:-300px top !important;
}
.beauty-furl:hover {
background-position:-300px bottom !important;
}
.beauty-digg {
background-position:-500px top !important;
}
.beauty-digg:hover {
background-position:-500px bottom !important;
}
.beauty-reddit {
background-position:-100px top !important;
}
.beauty-reddit:hover {
background-position:-100px bottom !important;
}
.beauty-stumble {
background-position:-50px top !important;
}
.beauty-stumble:hover {
background-position:-50px bottom !important;
}
.beauty-delicious {
background-position:left top !important;
}
.beauty-delicious:hover {
background-position:left bottom !important;
}
.beauty-technorati {
background-position:-700px top !important;
}
.beauty-technorati:hover {
background-position:-700px bottom !important;
}
.beauty-twitter {
background-position:-350px top !important;
}
.beauty-twitter:hover {
background-position:-350px bottom !important;
}
.beauty-facebook {
background-position:-450px top !important;
}
.beauty-facebook:hover {
background-position:-450px bottom !important;
}
.beauty-script-style {
background-position:-400px top !important;
}
.beauty-script-style:hover {
background-position:-400px bottom !important;
}
.beauty-designfloat {
background-position:-550px top !important;
}
.beauty-designfloat:hover {
background-position:-550px bottom !important;
}

NB:
Jika anda ingin mengganti tulisan 'Sharing is sexy' menjadi 'Sharing is caring' maka ganti left bottom dan right bottom menjadi left top dan right top

4. Setelah itu cari <data:post.body/>
5. Letakkan kode berikut dibawahnya

<b:if cond='data:blog.pageType == "item"'>
<div class='beauty-bookmarks'>
<ul class='socials'>

<li class='beauty-delicious'><a expr:href='"http://del.icio.us/post?url=" + data:post.url + "&title=" + data:post.title' target='_blank'/></li>


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


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


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


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


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


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


<li class='beauty-twitter'><a expr:href='"http://twitter.com/home/?status=Chk Out-" + data:post.title + " " + data:post.url' target='_blank'/></li>


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

</ul>
<span class='beauty-rightside'/>
</div>
</b:if>

Jika ada situs social bookmarking tertentu yang tidak ingin anda gunakan maka hapus saja kodenya. Contoh anda tidak ingin memasang Facebook maka hapus kode seperti ini:

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

6. Kalau sudah simpan template anda. Selesai

Selamat mencoba!!

25 Mei 2010

Cara Membuat Show-Hidden atau Expand-Colapse di Widget Blog

Ringkasan ini tidak tersedia. Harap klik di sini untuk melihat postingan.

16 April 2010

Membuat Menu Dropdown

Setelah Bagus Blog membuat postingan tentang Tips dan Trik Membuat Menu Blogroll Dropdown dan Blogroll Menu Dropdown Versi 2 pada beberapa waktu yang lalu sekarang saya mau berbagi lagi dengan agan tentang Membuat Menu Dropdown dengan berbagai jenis, nah bagi yang baru belajar ngeblog mungkin ini sangat berharga, simak tutorial ngeblog di bawah Cara Buat Menu Dropdown Standar

<form name=”jump”> <select name=”menu” onChange=”location=document.jump.menu.options[document.jump.menu.selectedIndex].value;” value=”GO”> <option value=“http://alamat-url1.com”>Menu1</option> <option value=“http://alamat-url2.com”>Menu2</option> <option value=“http://alamat-url3.com“>Menu3</option> </select> </form>

Cara Buat Menu Dropdown dengan Tombol

<form name=”jump”> <select name=”menu”> <option value=“http://alamat-url1.com”>Menu1</option> <option value=“http://alamat-url2.com”>Menu2</option> <option value=“http://alamat-url3.com”>Menu3</option> </select> <input type=”button” onClick=”location=document.jump.menu.options[document.jump.menu.selectedIndex].value;” value=”OK”> </form>

Cara Buat Menu Dropdown dengan Tombol Gambar

<form name=”jump”> <script> function jumpMenu(){ location=document.jump.menu.options[document.jump.menu.selectedIndex].value; } </script> <select name=”menu”> <option value=“http://alamat-url1.com”>Menu1</option> <option value=“http://alamat-url2.com“>Menu2</option> <option value=“http://alamat-url3.com”>Menu3</option> </select> <a href=”Javascript:jumpMenu()”><IMG SRC=”http://oom.blog.googlepages.com/Go.gif” border=0></a> </form>

Cara Buat Menu Dropdown Supaya link tidak keluar ke halaman baru

<select onChange=”document.location.href=this.options[this.selectedIndex].value;”><option value=”0″ selected>Arsip Blog</option><option value=”Links 1“>Text 1</option><option value=”Links 2“>Text 2</option> </select>

Ganti Yang berwarna biru dengan link blog agan, dan berwarna merah nama link agan Semoga bermanfaat ya….selamat belajar

25 Maret 2010

Pasang Widget Langganan Dengan Image

Memasang Widget langganan Post adalah salah satu tips untuk meningkatkan trafik blog walaupun terkadang tidak terlalu mempengaruhi trafik setidaknya artikel yang kita tulis banyak yang berlangganan artinya mereka yang berlangganan menyukai artikel atau postingan yang kita publikasikan di blog dan akan ada kemungkinan mereka mengunjungi blog anda. Dalam kurun waktu tertentu trafik akan melejit atau blog anda akan terbanjiri trafik jadi saran saya jangan pernah malas untuk update blog apabila sobat menginginkan trafik membanjiri blog. Namun kita juga tidak hanya mengupdate blog dengan konten yang sembarang saja karena akan mengakibatkan pengunjung akan kecewa telah berlangganan artikel di blog sobat dan berefek terhadap trafik. Ada seorang master SEO mempercayai bahwa konten/artikel/postingan itu raja ( content is the King) untuk meningkatkan trafik, so kita harus lebih bersabar untuk mendapatkan trafik yang tinggi.

Sekarang saya akan memberikan widget yang berfungsi untuk memudahkan pengunjung berlangganan artikel di blog anda, memang sebelumnya saya pernah juga membahas widget berlangganan juga akan tetapi widget tersebut mempunyai versi yang berbeda - beda dan selera anda pun berbeda - beda jadi saya membuat widget berlangganan ini. Untuk suka atau tidak sukanya itu terserah anda yang penting saya memberikan postingan yang berguna dan bermanfaat. Silahkan lihat Demo widget tersebut di bawah ini.

Berminat untuk memasangnya? silahkan ikuti langkah di bawah ini :

Login ke blogger
masuk ke Rancangan >> Elemen Halaman (biasanya setelah mengklik Rancangan anda sudah berada pada Elemen Halaman)
Setelah itu tambahkan sebuah gadget, untuk menambahkannya silahkan anda memilih tempat yang dinginkan
Setelah menambah kan gadget silahkan pilih yang HTML/Javascript dan masukan kode di bawah ini kedalamnya

<style type='text/css'>
#feed-icone2{ width: 210px;height: 40px;}

#feed-ico2 { width: 40px;height: 30px;float: right;}

#feed-txt2 { height: 46px;width: 170px;float: left; }

#feed-txt2 h2, #feed-txt2 h2 a{ background:transparent; font-size: 13px;color: #ffcc66;padding: 0px;font-weight: bold;margin: 8px 0px 0px 2px;font-family: Verdana, Arial, Helvetica, sans-serif; }

#feed-txt2 p, #feed-txt2 p a { font-size: 12px;color: #fff;letter-spacing: 1px;padding: 0px 0px 0px 1px;font-family: arial,sans-serif;margin: 0px 0px 0px 2px; }
</style>

<div id='feed-icone2'> <div id='feed-ico2'> <img alt="Langganan jons" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVq7tT9k772LYhfBlydvEYG-iQ4qCZSH-qtu-PvOo1U-niRAKd48o7dzN3CqWW8N8-0YMYwYsrUbPWXgCxjydOYJeDxtBgPsk8rK9dMHcls4uCgHdwQRTydYlUKNCFX1Kaoti2mHZSiV5J/s1600/Newspaper_Feed_128x128_thumb%5B1%5D.png" /> </div> <div id='feed-txt2'> <h2><a href='http://feedburner.google.com/fb/a/mailverify?uri=JON'S' title='JON'S' target='_blank'><img src="http://oketrik.googlecode.com/files/Subscribe.gif" /></a></h2></div></div>

<div style="margin-top:15px;padding:0px;float:left;text-align:left;"><a href='http://www.facebook.com/profile.php?id=100000552312384' title='Facebook JONS FUNK' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7JlaM_AbUL8e3DwFNb9UtognTRbbTLV9mdW9qpb2hCl8tyE5czsZUBACGzpZTE3G0edjuk7EmP9KuYf_ZeFIsg1lvgnhyphenhyphenuqvFL7E-zwcYmknONbiooZcOiw5uHOQpJARpL1OiedJIfOja/s400/Facebook-high-detail-48.png" /></a>
<a href='http://twitter.com/kdjons' title='Twitter KD JONS' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj97DHEj9FYJDP22R5KcaZNTrqGYEUxFwln-Tzq5KDv0yK-WYioLQXNjG-wNByvC2dYkwiwGoQYz-wdehN0enAMvlZr3wbbWwgjSHjoII85OIc3JOYZkpUX5mOLV_uA3edFke3HkYc2EhD5/s1600/Twitter-48.png" /></a>
<a href='http://www.blogger.com/profile/08093138428945050497' title='about me' target='_blank'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-4sNQzstUShvbRjwU3brodQgKUXXS1jIynPYuCACNmr7zXsV8432eiuARC6EVABHwhg2y-xI-nTmRDNYkL7iKA0y-qr5SN-Fqsw8q4-Ba4CALyaCBk_FMdi-AAkh_8sizecsoDL0LPZGE/s1600/Emoticon-lol-48.png" /></a>

</div>

Penjelasan :
- Warna Merah Ganti dengan alamat link berlangganan blog anda
Setelah memasukan kode tersebut, klik tombol simpan
Selesai

Dengan menggunakan gambar berekstensi GIF, diharapkan pandangan pengunjung dapat tertarik untuk melihatnya. Mungkin sebagian orang ada yang tidak menyukai gambar bergerak di dalam blog atau webnya namun kode dan gambar di atas dapat di modifikasi sesuai keinginan masing - masing. Mungkin hanya itu saja yang dapat saya berikan selebihnya mohon maaf. Terima kasih dan Happy Blogging.

JONS STYLE