Arthemia Modified

Aenean nisl elit, dapibus a, porta tincidunt

June 23, 2008 – 11:31 am | 37 Comments

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla euismod ipsum quis lacus. Morbi odio libero, eleifend sed, aliquet quis, mollis nec, sem. Fusce nisi pede, convallis vel, malesuada quis, mollis et, ipsum. Nulla facilisi. …

Read the full story

Sexy Social Bookmark

[ Rabu, 15 April 2009 | 1 komentar ]

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='"http://del.icio.us/post?url=" + data:post.url + "&amp;&title=" + data:post.title' target='_blank'
/></li>

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

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

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

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

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

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

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

<li class='sexy-furl'><a expr:href='" http://www.furl.net/storeIt.jsp?u=" + data:post.url + "&amp;&title=" + 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='" mailto:?subject=" + data:post.url + "&amp;&title=" + 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

Read the full story »

Subcribes Via Dibawah Posting

| 0 komentar ]

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>

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

Read the full story »

Dock Menu

[ Selasa, 14 April 2009 | 0 komentar ]

Apakah anda pernah melihat tampilan menu dikomputer seperti diatas? Gambar diatas adalah sekilas contoh CSS Dock Menu. Dock Menu seperti halnya dengan Menu Mac di komputer tapi menu tersebut bisa diterapkan didalam blogger ternyata. hehehe, baru nyadar nie. Kita akan melihat perubahan size bila kursor mouse kita arahkan ke icon Dock Menu tersebut. Wah tampilannya jadi stylist dan elegan nie. Salah satu situs yang menyediakan open source atau tutorial ini adalah Ndesign-studio.com. Untuk demonya lihat disini. Tutorialnya sangat simple dan mudah diterapkan. Lebih baik saya jelaskan sekarang tutorialnya.

Langkah Pemasangan Dock Menu :

1. Download file CSS dock menu zip package.

2. Unzip filenya

3. Didalam folder CSS Dock Menu anda akan menemukan folder JS. Disitu ada Jquery.js dan Interface.js. Tugas anda sekarang adalah mengupload kedua javascript tersebut ke host directory anda masing-masing. Kalo saya memakai geocities.com.

4. Buka kembali CSS Dock Menu, anda akan temukan file iepngfix.htc dan style.css. Upload lagi file tersebut ke directory anda.

5. Nah dah selesai. Selesai proses upload maksud saya hehehe...Bernafas sejenak

NoteKalo anda pengen ga ribet upload. Pake directory penyimpanan punya saya aja.

Sekarang Cara Pasang di Blogger :

1. Masuk Edit HTML, jangan lupa expand widget template. Kemudian cari kode <head> dan letakkan kode script berikut dibawah kode <head> . Kurang lebihnya seperti ini

<head>
<script src='http://www.geocities.com/attintha/jquery.js' type='text/javascript'/>
<script src='http://www.geocities.com/attintha/interface.js' type='text/javascript'/>
<link href='http://www.geocities.com/attintha/style.css' rel='stylesheet' type='text/css'/>

2. Masih di Edit HTML, cari kode </body> dan letakkan kode berikut diatas kode </body> :

<script type="text/javascript">
$(document).ready(
function()
{
$('#dock').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.dock-container',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);
</script>

</body>

3. Langkah pemasangan Dock Menu. Menu ini dapat anda letakkan diarea sesuai dengan keinginan anda. Bisa diletakkan di elemen blogger atau di Edit HTML. Berikut proses pemanggilan menu tersebut :

<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="http://www.ndyteens.blogspot.com"><img src="http://www.geocities.com/attintha/home.png" alt="home" /><span>Home</span></a>
<a class="dock-item" href="http://www.ndyteens.blogspot.com"><img src="http://www.geocities.com/attintha/email.png" alt="contact" /><span>Contact</span></a>
<a class="dock-item" href="http://www.ndyteens.blogspot.com"><img src="http://www.geocities.com/attintha/portfolio.png" alt="portfolio" /><span>Portfolio</span></a>
<a class="dock-item" href="http://www.ndyteens.blogspot.com"><img src="http://www.geocities.com/attintha/music.png" alt="music" /><span>Music</span></a>
<a class="dock-item" href="http://www.ndyteens.blogspot.com"><img src="http://www.geocities.com/attintha/video.png" alt="video" /><span>Video</span></a>
<a class="dock-item" href="http://www.ndyteens.blogspot.com"><img src="http://www.geocities.com/attintha/history.png" alt="history" /><span>History</span></a>
<a class="dock-item" href="http://www.ndyteens.blogspot.com"><img src="http://www.geocities.com/attintha/calendar.png" alt="calendar" /><span>Calendar</span></a>
<a class="dock-item" href="http://www.ndyteens.blogspot.com"><img src="http://www.geocities.com/attintha/rss.png" alt="rss" /><span>RSS</span></a>
</div> </div>

NoteWarna Merah diatas ada link tujuan dan warna Biru adalah path directory yang bisa anda ganti dengan path directory anda. Atau kalo ga pengen ribet pake directory diatas saja juga gak apa-apa. Anda bisa mengotak-atik css code dan javascript bagi yang sudah mahir.

Sumber : 1. http://www.ndesign-studio.com
2. o-om.com

OK, selamat mencoba...happy blogging with NdyTeeN

Read the full story »