Eko Yulianto

Membuat Background Tidak Dapat Bergerak Saat di Scroll

in Bloging - on Wednesday, July 11, 2012 - 2 comments

Assalamu'alaikum sobat blogger, wah, maaf sekali yah, saya lagi jarang banget bisa posting, soalnya lagi agak-agak sibuk gitu deh, hehew. Yaps langsung saja sob, rieztoshare akan posting tentang sebuat tips blogging, yaitu bagaimana cara membuat Background Blog Tidak dapat Bergerak saat di scroll, nah panjang bener tuh judulnya, oke dari pada bingung kayak apa jadinya, mending lihat aja nih contohnya di blog temen saya yang supeeerrrr keerreeenzz..... http://narudhitya.blogspot.com silakan di klik sob.

Nah sudah lihat bukan? sekarang cara membuatnya, yuks kita simak.
Cara Membuat Background Tidak Dapat Bergerak Saat di Scroll
1. Login Blogger sobat.
2. Silakan sobat Masuk ke Template.
3. Kemudian Pilih Edit HTML.
4. Lalu klik saja, Lanjutkan. Kemudian jangan lupa untuk mencentang "Expand Template Widget".
5. Lalu cari kode sebagai berikut.

body {
text-align: center;
background: #ffffff url(http://url gambar anda);
Comic Sans MS,arial,trebuchet ms,verdana,sans-serif;
}

6. Kemudian tambahkan kode background-attachment: fixed; Setelah kode Background.
maka akan menjadi seperti ini :

body {
text-align: center;
background: #ffffff url(http://url gambar anda);
background-attachment: fixed;
Comic Sans MS,arial,trebuchet ms,verdana,sans-serif;
}

7. Yang terakhir, sobat simpan dan silakan lihat hasilnya...

Cukup sekian tips dari saya ini, semoga bermanfaat untuk sobat blogger yang membaca, dan tidak lupa saya ucapkan terimakasih ^_^

Sumber : http://www.rieztoshare.com/

Kotak Berbayang Dengan CSS 3

in Bloging - on Tuesday, July 10, 2012 - No comments

Eko kembali untuk sobat semua dengan membawa tips web design, setelah sekian lama tidak posting tentang web design, langsung aja yuk kita ke TKP, dari pada banyak basa basi tapi gak mudeng....

Belajar membuat kotak berbayang dengan CSS 3
di eko-tipsntrick.blogspot.com

Setelah melihat halaman web yang memiliki kotak dengan efek berbayang (drop shadow) seperti diatas, sekilas mungkin sobat berpikir bahwa sobat memerlukan campur tangan Photoshop untuk membuat gambar kotak berbayang. Namun, ternyata sobat dapat melakukannya tanpa menggunakan gambar apa pun, murni CSS. Hal ini dimungkinkan melalui fitur baru CSS 3 , yang mendukung property box-shadow. Potongan kodedi bawah ini adalah class untuk membuat kotak berbayang tersebut.

.shadow {
Box-shadow: 8px 8px 4px #fc0208;
Background-color:#0208fc;
color:#02fc31;
}

Perhatikan baris box-shadow: 8px 8px 4px #fc0208; yang membentuk efek kotak berbayang. Property box-shadow memiliki empat parameter/atribut sebagai berikut.

1. Offset Horizontat Bayangan

8px seperti contoh berarti bayangan kotak bergeser sebesar 8 pixel secara horizontal ke sebelah kanan. Jika parameter bernilai negatif, bayangan akan tampil disebelah kiri kotak.

2. Offset Vertikal Bayangan

8px seperti pada contoh berarti bayangan kotak bergeser sebesar 8 pixel secara vertikal ke bawah. Jika parameter bernilai negatif, bayangan akan tampil pada atas kotak.

3. Radius Blur

Semakin besar nilai ini, bayangan akan semakin blur. Jika 0px, akan didapatkan bayangan yang solid tanpa ada efek blur. Pada contoh di atas digunakan radius blur sebesar 4 pixel.

4. Waran Bayangan

Pada contoh ditentukan warna bayangan adalah #fc0208.

Baris Kedua, yaitu background-color:#0208fc; berfungsi untuk mendefinisikan warna background. Bagaimana penggunaanya sehingga menghasilkan tampilan seprti pada gambar diatas?

Baris ketiga, yaitu color:#02fc31; berfungsi memberi warna teks bisa disesuaikan dengan template sobat

Berikut kode lengkapnya. Simpan dalam sebuah file HTML dan jalankan pada Browser Sobat.

<style type="text/css">
.shadow {
Box-shadow: 8px 8px 4px #fc0208;
Background-color:#0208fc;
color:#02fc31;
}
</style>

<div>

<div class="shadow" style="width: 200px;">
Belajar membuat kotak berbayang dengan CSS 3
di eko-tipsntrick.blogspot.com</div>
</div>

Sudah mudeng sobat tinggal save aja broww

Sobat dapat menggunakan class .shadow yang telah didefinisikan tersebut dengan perintah <div class=shadow> lalu mengetikkan teks yang merupakan konten di dalam kotak tersebut. Pemasalahan selanjutnya adalah bagaimana membuat lebih dari satu kotak berbayang lengan lebar (width) berbeda?
Tentu sobat memiliki beberapa alrenatif, misalnya membuat table dengan width tertentu. Namun, cara yang cukup praktis adalah kembali menggunakan Css.
Perhatikan kembali kode HTML lengkap diatas. Baris <div class=shadow style=”width:200px”> merupakan pemanggilan class .shadow dengan membatasi isi konten dalam div sebesar 200 pixel. Pemanggilan CSS dengan atribut style ini disebut dengan Inline Styles.

Cukup sudah tips yang saya berikan di kesempatan kali ini ya sob, mata saya sudah lelah, tubuh lemas, pengin istirahat, n akhirnya.... Terimakasih ya sob, semoga bermanfaat. ^_^

Sumber : http://www.rieztoshare.com/

Cara Membuat Recent Comment Dengan Avatar

in Bloging - on Monday, July 09, 2012 - 2 comments

Widget Recent Comment dengan Avatar -- Atau sering juga disebut dengan komentar terbaru dengan icon atau gambar profil komentator memang terkadang ada juga kegunaannya, contohnya saat kita membuka blog kita tentunya kita dapat melihat komentar terbaru yang ada tanpa membuka blogger/home.Mungkin sobat menginginkan widget Recent Comment yang seperti ini :

Untuk Membuat Komentar Terbaru Dengan Icon Avatar, ikuti langkah berikut :

1. Masuk ke Blogger
2. Masuk ke Edit Tata Letak ( Layout )
3. Tambahkan widget HTML/JavaScript
4. Copy Paste Kode Berikut :

<div style=" overflow:auto; text-align: left; width: 300px;">
<style type="text/css">
ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
.w2b_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
.w2b_recent_comments li .avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px #ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;}
.w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
// Recent Comments Settings
var
numComments = 6,
showAvatar = true,
avatarSize = 30,
roundAvatar = true,
characters = 40,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = false;
//]]></script>
<script type="text/javascript" src="http://bloggerblogwidgets.googlecode.com/svn/trunk/w2b-recent-comments-w-gravatar.js"></script>
<script type="text/javascript" src="http://eko-tipsntrick.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=6"></script>
</div>

NB :
Perhatikan kode warna Biru !
6 adalah jumlah komentar yang tampil
30 adalah besar image avatar
40 adalah jumlah maksimal karakter
eko-tipsntrick.blogspot.com ganti dengan URL alamat Blog sobat.
Sobat bisa ganti sendiri sesuai dengan selera.
Simpan dan lihat hasilnya.

Sumber : http://warehouse1994.blogspot.com/

Membuat komentar twitter, facebook dan blog berdampingan

in Bloging - on Sunday, July 08, 2012 - 1 comment

Pasang Komentar Twitter, Facebook dan Blog -- Hehehe... baru dapat informasi terupdate lagi dari blog tetangga , dan saya copas dengan tambahan dan sentuhan sendiri.Postingan kali ini memberikan tutorial tentang bagaimana memasang tiga komentar sekaligus dalam satu yaitu komentar twitter, facebook dan blog .Tentunya komentar tersebut dipasang dalam bentuk tab-view yang membuat komentar tersebut lebih elegan dan membuat komentar blog lebih bagus.

Untuk memasang komentar twitter, facebook dan blog kalian harus membuat aplikasi dari facebook dan twitter terlebih dahulu, tapi tenang karena membuatnya cukup mudah.Langsung saja ke tutorialnya, ikuti langkah berikut :

Untuk membuat kotek komentar Blogger, Twitter, Facebook dengan digabungkan ikuti langkah dibawah ini :

Yang kita butuhkan adalah :
- APP ID (pada facebook) Untuk membuat nya KLIK DISINI
- API Key (pada twitter ) Untuk membuatnya KLIK DISINI
- ID Blogger (pada blogger) login ke blogger lalu pada Address Bar (copy angka setelah ID=…….)

Langkah pertama sudah selesai ...

Masuk Langkah Kedua ...

Login ke blogger
Masuk ke edit HTML --> Centang 'Expand Template Widget'
Masukkan kode berikut tepat di bawah kode </head>

<meta content='Profile_ID' property='fb:admins'/>
<meta content='APP_ID' property='fb:app_id'/>
<script src='http://code.jquery.com/jquery-latest.pack.js'/>
<script src='http://jsblogstop.googlecode.com/svn/commentpages/jsCommentPages.js'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://jsblogstop.googlecode.com/svn/jstweetbox/v1/jsTweetBox.js'/>
<script src='http://platform.twitter.com/anywhere.js?id=API_KEY&v=1'/>

Keterangan : ganti warna biru dengan Profil_ID, APP_ID dan API_KEY yang sudah kalian buat tadi.

Copas kode <div class='comments' id='comments'> dan letakkan dibawah kode

<div class='comments-tab' id='blogger-comments' title='Comments from Blogger'>
<data:post.numComments/> Comments
</div>
<div class='comments-tab' id='twitter-comments' title='Comments with Twitter'>
<span class='js-page-tweet-count' expr:href='data:post.url'/> Tweets
</div>
<div class='js-default-tab comments-tab' id='fb-comments' title='Comments made on Facebook'>
<fb:comments-count expr:href='data:post.url'/> Komentar
</div>
<div class='clear'/>
</div>
<div class='comments-page' id='twitter-comments-page'>
<div id='js-tweet-box'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='10' width='500'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>

Kita bisa mengganti kata Comments dan Tweets dengan kata lainnya yang diinginkan
Kita bisa mengganti angka 10 dengan jumlah komentar facebook yang ingin ditampilkan
Kita bisa mengganti angka 500 dengan ukuran lebar kotak komentar yang diinginkan

Simpan template dan lihat hasilnya.

Tambahan !!! bagi yang ingin menghapus komentar tersebut dari Halaman Static , tinggan anda masukkan kode berikut :

<b:if cond='data:blog.pageType != "static_page"'>

dan letakkan di bawah kode

<div class='comments' id='comments'>

lalu scroll kebawah sampai ketemu kode

<div class='clear'/>

dan letakkan kode </b:if> tepat dibawah kode diatas.

Keterangan : kode untuk menghilangkan di halaman static ini masih sama letaknya dengan kode yang kalian copas tadi ( Langkah kedua pada step 1 )

Membuat Fans Page AutoHide Pada Saat Kebawah

in Bloging - on Saturday, July 07, 2012 - No comments

Baik. kali ini Anthzo memposting tentang tutorial blog. hihi yang dimana sekarang memposting yang berjudulkan Cara Membuat FansPage Facebook Auto Hide, jadi kotak like fanspagenya itu muncul ketika blog dibuka dan tertutup pada saat jarak dari atas ke bawah berubah. dari pada bingung sama penjelasannya lebih baik langsung saja ke TKP sob. hehe

Cara Membuat Fans Page Facebook Auto Hide :
1. Login ke Blogger.
2. Klik Elemen Laman
3. Klik Tambah Gadget
4. Pilih HTML/Javascript
5. Masukkan kode berikut (Ctrl+C) :

<script src="http://eko-yulianto.googlecode.com/files/slidboxordinary.js" type="text/javascript"></script>
<div id="fbslidebox" style="position: fixed; width: 310px; overflow: hidden; bottom: 5px; right: 5px; background: #fff;) repeat scroll 0% 0% transparent; -moz-border-radius: 15px 15px 15px 15px; border: 5px ridge #80ff00; display: block;">
<div style="width: 295px; padding: 10px; margin: 0pt auto; overflow: hidden;">
<a id="fbcloseslidebox" style="float: right; color: #000; padding: 0pt 2px; border: 1px solid #000; text-decoration: none; font-size: 10px; font-family: Verdana" href="#">Exit</a>
<strong style="color:#000;">Terima Kasih Bagi Yang Kasih Like/Suka</strong>
LETAKKAN KODE FACEBOOK LIKE BOX/FAN PAGE DI ISINI
</div></div>

6. Simpan. Cukup mudah kan :) jangan lupa berikan komentar anda