Apa itu Multi Tab/TabView? Dari anda melihat gambar disamping ini saja,anda pasti sudah mengerti apa yang saya maksud dari multi halaman/multi tab tersebut. Cara Membuat Multi HalamanPergilah ke Dashboard,lalu pilih Tata Letak,kemudian pilih Add New Widget/Tambah Gadget/Element Baru,pilih HTML/Javascript. Letakkan kode berikut: <style type="text/css">style="color:white">TAB 1</span></a>style="color:white">TAB 2</span></a>white">TAB 3</span></a>Disini Content Disini Kode HTML Content Widget YANG INGIN ANDA TAMPILKAN PADA TAB 3Untuk kode yang bercetak tebal,ubahlah dan gantilah sesuai keinginan anda,sedangkan kode yang berwarna merah,hanya sebuah penjelasan dari masing-masing kode. Sekarang tinggal menyisipkan kode-kode html yang ingin anda letakkan pada masing-masing tab. Anda bisa meletakkan seperti,kode Shout,Recent Comment,Blogroll dll. Semoga berhasil ya.. Oh ya..Special..makasih buat mas Herman :D Baca Juga Yang Ini..
|
Senin, 28 Februari 2011
Membuat Widget Multi Halaman/TabView
Minggu, 27 Februari 2011
Membuat Widget Gambar Slide Show / Slideshow Javascript dan Css di Blogger
SlideShow Image Widget for Blogger
Masih ingat ga sob artikel tentang membuat widget gambar slideshow beberapa waktu lalu? Yup,saya menemukan cara yang singkat mudah dan terlihat 'sempurna' dari script yang diciptakan teman kita ini,saya ambil artikel ini dari blog sahabat di www.khairulumam.com.
Jika widget yang pertama hanya menampilkan gambar dalam ukuran kecil bahkan navigasi slide-nya sedikit cacat karena tidak dapat ditampilkan sempurna disamping widget,lain halnya dengan script slideshow widget for blogger kali ini.
Widget ini terkesan lebih professional membuat kami ingin membagikan informasi ini pada teman-teman.
Bentuk fisiknya sobat bisa lihat di SINI.
Nah,ini juga salah satu penerapan bahasa jQuery pada blogger yang mana menampilkan slideshow pada gambar / image secara otomatis (jadi tak perlu menggunakan tombol geser,etc).
Itulah mengapa artikel kali ini saya beri judul Membuat Slideshow Photo / Foto Berubah-ubah dalam Membuat SlideShow Foto Widget #2 sebagai penyempurnaan dari widget sebelumnya di membuat slideshow jquery di postingan beberapa waktu lalu.
Oke sob,kita intip yuk bagaimana cara membuat widget slide show pada gambar / image / pictures ini.
Langkah dan Cara Membuat Slide Show Photo Widget for Blogspot
Pertama,sobat pergi ke pasar (hush!!!!) maksud kami pergi ke Dashboard > Tata Letak > Edit HTML > Contreng Expand Widget Templates (lihat gambar)
(1)
(2)
(3)
Cari kode
<head> (gunakan Ctrl+F pada keyboard untuk mempermudah pencarian),setelah menemukan kode tersebut tepat dibawahnya letakkan kode script berikut ini:<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
//Execute the slideShow, set 6 seconds for each images
slideShow(3000);
});
function slideShow(speed) {
//append a LI item to the UL list for displaying caption
$('ul.slideshow').append('<li id="slideshow-caption" class="caption"><div class="slideshow-caption-container"><h3></h3><p></p></div></li>');
//Set the opacity of all images to 0
$('ul.slideshow li').css({opacity: 0.0});
//Get the first image and display it (set it to full opacity)
$('ul.slideshow li:first').css({opacity: 1.0});
//Get the caption of the first image from REL attribute and display it
$('#slideshow-caption h3').html($('ul.slideshow a:first').find('img').attr('title'));
$('#slideshow-caption p').html($('ul.slideshow a:first').find('img').attr('alt'));
//Display the caption
$('#slideshow-caption').css({opacity: 0.7, bottom:0});
//Call the gallery function to run the slideshow
var timer = setInterval('gallery()',speed);
//pause the slideshow on mouse over
$('ul.slideshow').hover(
function () {
clearInterval(timer);
},
function () {
timer = setInterval('gallery()',speed);
}
);
}
function gallery() {
//if no IMGs have the show class, grab the first image
var current = ($('ul.slideshow li.show')? $('ul.slideshow li.show') : $('#ul.slideshow li:first'));
//Get next image, if it reached the end of the slideshow, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().attr('id') == 'slideshow-caption')? $('ul.slideshow li:first') :current.next()) : $('ul.slideshow li:first'));
//Get next image caption
var title = next.find('img').attr('title');
var desc = next.find('img').attr('alt');
//Set the fade in effect for the next image, show class has higher z-index
next.css({opacity: 0.0}).addClass('show').animate({opacity: 1.0}, 1000);
//Hide the caption first, and then set and display the caption
$('#slideshow-caption').animate({bottom:-70}, 300, function () {
//Display the content
$('#slideshow-caption h3').html(title);
$('#slideshow-caption p').html(desc);
$('#slideshow-caption').animate({bottom:0}, 500);
});
//Hide the current image
current.animate({opacity: 0.0}, 1000).removeClass('show');
}
//]]>
</script>
<style type='text/css'>
ul.slideshow {
list-style:none;
width:600px;
height:240px;
overflow:hidden;
position:relative;
margin:0;
padding:0;
font-family:Arial,Helvetica,Trebuchet MS,Verdana;
;
}
ul.slideshow li {
position:absolute;
left:0;
right:0;
}
ul.slideshow li.show {
z-index:500;
}
ul img {
width:600px;
height:240px;
border:none;
}
#slideshow-caption {
width:600px;
height:70px;
position:absolute;
bottom:0;
left:0;
color:#fff;
background:#000;
z-index:500;
}
#slideshow-caption .slideshow-caption-container {
padding:5px 10px;
z-index:1000;
}
#slideshow-caption h3 {
margin:0;
padding:0;
font-size:16px;
}
#slideshow-caption p {
margin:5px 0 0 0;
padding:0;
}
</style>
Ket: kode berwarna merah adalah kode yang sobat bisa ganti sesuai dengan keinginan untuk menentukan lebar,tinggi serta panjang dari gadget tersebut,sedang untuk yang lain sobat otak-atik aja sendiri ya :D
Untuk langkah kedua sekaligus langkah terakhir sobat pergilah ke pasar (hush!!! pasar mulu pent-) maksud kami pergilah ke Dashboard > Tata Letak > klik tulisan Add a Gadget (tambah widget) > pilih HTML/Javascript lalu letakkan kode ini:
<ul class="slideshow">
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUJGrzNofmOBzOM2ryzD1CbRyfz8NtJx8U0fMrQPHBzHfTktwudKiI8qYwSzu6XqqQVgmjX97nh3uOifwTK3qoJBx1OGeyZipvkrzCiyEYTECBBetfE47_imDHMzVpmZnL3bg-XkDVqY8/s1600/1.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUJGrzNofmOBzOM2ryzD1CbRyfz8NtJx8U0fMrQPHBzHfTktwudKiI8qYwSzu6XqqQVgmjX97nh3uOifwTK3qoJBx1OGeyZipvkrzCiyEYTECBBetfE47_imDHMzVpmZnL3bg-XkDVqY8/s1600/1.jpg" title="This is featured post 1 title" alt="Replace This Text With Your Featured Post 1 Description." /></a></li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1YdpCAb_YjEeglCrJHfwcowc3VPM7jK4puUUjMBzKANEgqnNhF20zgFhYvILoLZ5GaQkx6XDv3tcCWqczrT5mWRFye98Kz7hJY7FSJWz2jwSi1dh2moCVfbV23rSKtk9kmZyAEid2Jqs/s1600/2.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1YdpCAb_YjEeglCrJHfwcowc3VPM7jK4puUUjMBzKANEgqnNhF20zgFhYvILoLZ5GaQkx6XDv3tcCWqczrT5mWRFye98Kz7hJY7FSJWz2jwSi1dh2moCVfbV23rSKtk9kmZyAEid2Jqs/s1600/2.jpg" title="This is featured post 2 title" alt="Replace This Text With Your Featured Post 2 Description." /></a></li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz3FYtfBhTBuJ_BEE4NSaI99XvcwRDXSI6SB9dS4RNZd_9vlbTAzTvJOomr1Ty7Kx7glUGu-gCCIHojytoM59ItYp4TPkrRYPHgkLJielw3zOekuzaB4_u-gDDm89L_y3hj0u91YT4nW4/s1600/3.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz3FYtfBhTBuJ_BEE4NSaI99XvcwRDXSI6SB9dS4RNZd_9vlbTAzTvJOomr1Ty7Kx7glUGu-gCCIHojytoM59ItYp4TPkrRYPHgkLJielw3zOekuzaB4_u-gDDm89L_y3hj0u91YT4nW4/s1600/3.jpg" title="This is featured post 3 title" alt="Replace This Text With Your Featured Post 3 Description." /></a></li>
<li><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh14LmJguENVm6mJjdpS3y4aG5tDMWG1f8obG5f51NikQeAwkSFgT-j7P3tbl5e7Sf0-XwDgN_1qvzR3O4zf54G3tsVgLTYGfhEj6aglC_gjpeuxmKbUWV4Hb8_B_b33UJIPH-iabibvZs/s1600/4.jpg"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh14LmJguENVm6mJjdpS3y4aG5tDMWG1f8obG5f51NikQeAwkSFgT-j7P3tbl5e7Sf0-XwDgN_1qvzR3O4zf54G3tsVgLTYGfhEj6aglC_gjpeuxmKbUWV4Hb8_B_b33UJIPH-iabibvZs/s1600/4.jpg" title="This is featured post 4 title" alt="Replace This Text With Your Featured Post 4 Description." /></a></li>
</ul>
Simpan dan lihat hasilnya,mudah singkat dan menarik khan sob?
Kamis, 10 Februari 2011
Membuat Border Sudut Melengkung pada Setiap Widget Blog (Membuat Rounded Corner )
Membuat Rounded Corner / Sudut Melengkung Pada Border BlogMemang betul ya sob,sebuah blog yang kurang memperhatikan tampilan blog agar lebih menarik,dapat mempengaruhi kejenuhan pengunjung karena blog terkesan acak-acakan.  Gimana sob,tertarik untuk membuatnya juga? Langkahnya sangat sederhana,sobat pilih Dashboard lalu pilih Tata Letak / Rancangan(1) kemudian pilih tab Edit HTML(2),lalu seperti biasa contreng tulisan Exspand Widget Templates(3). Lihat Gambar ya :D (1) (2) (3) Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas kode ]]></b:skin> tersebut.}Lihat gambar (4)  (4) Selanjutnya,Simpan Templates sobat ya. Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (5)  (5) Selanjutnya pilih HTML/Javascript Gb(6) dan letakkan kode berikut diantara widget kode HTML yang akan ditambahkan lihat Gb.(7). <div class='membuatbordermelengkungroundedcorner'> (6)  (7) Lihat Gambar Lebih Besar Setelah itu,tinggal klik Simpan dan blog sobat sudah memiliki border melengkung pada widget yang diinginkan :D. |
Jumat, 28 Januari 2011
Membuat Komentar Admin Beda / Highlight Author Comment
Membuat Komentar Blogspot Layaknya Reply Komentar dari AdminSepertinya,sudah banyak ya gan yang memposting masalah bagaimana cara membuat komentar admin beda dengan komentar pengunjung ini.  Kiranya sudah sangat jelas sekali ya gan,apa yang akan dibahas kali ini :D Langkah Cara Membuat Highlight Author Comment / Membuat Komentar Blogger Admin Berbeda dengan Komentar PengunjungOk,Pertama tentukan blog milik anda yang mana yang akan di modifikasi kotak komentar-nya agar beda dengan komentar pengunjung,dengan memilih Dasboard,lalu pilih Tata Letak / Rancangan blog terpilih tadi. Kedua,pilih tab Edit HTML,lalu seperti biasa contreng pada checklist tulisan Expand Widget Templates. Ketiga,pada barisan kode CSS sobat atau cari saja kode ]]></b:skin>,jika sudah ketemu,letakkan kode css berikut,tepat diatas kode tersebut..admin-pb-comments{Keempat,cari lagi kode berikut ini (gunakan Ctrl+F di keyboard sob): dd class='comment-body'Jika sudah ketemu,tepat diatasnya letakkan kode berikut: <b:if cond='data:comment.author == data:post.author'>Kelima,sekarang cari kode berikut: <dd class='comment-footer'>Jika sudah ketemu,tinggal sisipkan kode </b:if> tepat diatas kode <dd class='comment-footer'> tersebut.Setelah itu,Simpan Templates blogger sobat dan cobalah isilah komentar untuk menguji berhasil tidaknya trik membedakan komentar admin dengan komentar pengunjung ini. Semoga berhasil dan lebih semangat ngeblog ya gan :D |
Selasa, 25 Januari 2011
10 hal Yang Harus Diketahui Oleh Pecinta Kopi
Ngopi itulah rutinitas sehari-hari bagi sebagian besar orang diseluruh dunia. Tidak heran mengapa banyak orang yang menyukai kopi, selain mudah di seduh kopi juga mempunyai cita rasa yang khas berdasarkan kelasnya. Mungkin selama ini kita mengenal kopi sebagai teman yang cocok buat bergadang, karna selain menahan rasa ngantuk kopi juga bisa mengurangi rasa sakit di kepala. Kopi, bukan hanya untuk bergadang namun mempunyai manfaat lain dari kafein yang terkandung, seperti berikut :
1. Kafein bisa membunuhmu
Terutama jika kamu sangat maniak kopi, yakni menenggak kopi 80-100 cangkir sehari. Jadi jangan coba-coba ya.
2. Kopi bisa juga baik buatmu
Studi membuktikan bahwa kita bisa mendapatkan antioksidan dari kopi, cukup satu atau dua cangkir kopi sehari, sudah bermanfaat. Jika tidak suka kopi, bisa coba teh hitam.
3. kafein bisa meningkatkan gairah seks perempuan
Ini baru terbukti pada tikus percobaan. Menurut ilmuwan, pada manusia kopi dapat meningkatkan pengalaman seksual namun hanya pada mereka yang tidak maniak kopi.
4. Kafein bisa mengurangi rasa sakit
Dosis sedang kopi, setara dengan dua cangkir kopi, mampu meredakan rasa sakit di otot setelah olah raga, demikian menurut sebuah studi kecil. Tapi lagi-lagi ini hanya berlaku buat mereka yang bukan pecandu kopi.
5. Kafein bisa bikin kita begadang
Buat yang ingin melek semalaman akan terbantu dengan kopi. Yang tidak, sebaiknya meminum kopi enam jam sebelum jam tidur agar tidak terganggu jam istirahatnya.
6. Kopi yang dekafein pun mengandung kafein
Walaupun istilahnya dekafein, alias bebas kafein, tetap saja kopi tersebut mengandung kafein. Kalau kita minum 10 cangkir kopi dekafein, sama saja dengan minum satu-dua cangkir kopi kafein.
7. kopi dekafein menggunakan bahan kimia
Untuk mengurangi kadar kafein pada kopi dekafein, digunakan bahan kimia bernama methylene chloride.
8. Kafein itu bukan bagian yang berasa pahit
Banyak orang mengira, makin pahit rasa kopi, makin banyak kandungan kafeinnya. Tidak, sebab kafein bukanlah komponen yang rasanya pahit.
9. Kopi yang bagus tergantung pada pembakaran dan peracikannya
Jika ingin kopi bercitarasa nikmat, maka yang paling menentukan adalah proses pembakaran dan racikannya. Selama pembakaran, minyak yang tersimpan dalam biji kopi akan keluar. Makin banyak minyak ini keluar, makin kuat rasa kopinya. Munculnya kandungan kafein tergantung pada lamanya air berada di bagian dasar. Pembakaran yang makin lama juga menghasilkan kafein makin banyak.
10. Kopi ditemukan oleh kambing
Satu milenium silam, di pegunungan Afrika, sekawanan kambing terjaga semalaman setelah makan biji kopi merah. Sang penggembala memeriksa kenapa itu terjadi dan menemukan bahwa penyebabnya adalah kopi. Sejak itu manusia mulai ikutan minum kopi.
Terutama jika kamu sangat maniak kopi, yakni menenggak kopi 80-100 cangkir sehari. Jadi jangan coba-coba ya.
2. Kopi bisa juga baik buatmu
Studi membuktikan bahwa kita bisa mendapatkan antioksidan dari kopi, cukup satu atau dua cangkir kopi sehari, sudah bermanfaat. Jika tidak suka kopi, bisa coba teh hitam.
3. kafein bisa meningkatkan gairah seks perempuan
Ini baru terbukti pada tikus percobaan. Menurut ilmuwan, pada manusia kopi dapat meningkatkan pengalaman seksual namun hanya pada mereka yang tidak maniak kopi.
4. Kafein bisa mengurangi rasa sakit
Dosis sedang kopi, setara dengan dua cangkir kopi, mampu meredakan rasa sakit di otot setelah olah raga, demikian menurut sebuah studi kecil. Tapi lagi-lagi ini hanya berlaku buat mereka yang bukan pecandu kopi.
5. Kafein bisa bikin kita begadang
Buat yang ingin melek semalaman akan terbantu dengan kopi. Yang tidak, sebaiknya meminum kopi enam jam sebelum jam tidur agar tidak terganggu jam istirahatnya.
6. Kopi yang dekafein pun mengandung kafein
Walaupun istilahnya dekafein, alias bebas kafein, tetap saja kopi tersebut mengandung kafein. Kalau kita minum 10 cangkir kopi dekafein, sama saja dengan minum satu-dua cangkir kopi kafein.
7. kopi dekafein menggunakan bahan kimia
Untuk mengurangi kadar kafein pada kopi dekafein, digunakan bahan kimia bernama methylene chloride.
8. Kafein itu bukan bagian yang berasa pahit
Banyak orang mengira, makin pahit rasa kopi, makin banyak kandungan kafeinnya. Tidak, sebab kafein bukanlah komponen yang rasanya pahit.
9. Kopi yang bagus tergantung pada pembakaran dan peracikannya
Jika ingin kopi bercitarasa nikmat, maka yang paling menentukan adalah proses pembakaran dan racikannya. Selama pembakaran, minyak yang tersimpan dalam biji kopi akan keluar. Makin banyak minyak ini keluar, makin kuat rasa kopinya. Munculnya kandungan kafein tergantung pada lamanya air berada di bagian dasar. Pembakaran yang makin lama juga menghasilkan kafein makin banyak.
10. Kopi ditemukan oleh kambing
Satu milenium silam, di pegunungan Afrika, sekawanan kambing terjaga semalaman setelah makan biji kopi merah. Sang penggembala memeriksa kenapa itu terjadi dan menemukan bahwa penyebabnya adalah kopi. Sejak itu manusia mulai ikutan minum kopi.
Sabtu, 22 Januari 2011
Agar siapapun menyukai anda
- Beradalah di sekitar orang sesering mungkin, karena keakraban menumbuhkan rasa sayang, bukan rasa benci!
- Jika hendak bicara dengan seseorang, lakukanlah ketika suasana hatinya sedang baik, sehingga hukum pergaulan bisa berlaku. Bicarakanlah minat atau pengalaman yang sama-sama pernha kalian alami dan cobalah untuk lebih banyak mendengarkan, jangan terlalu banyak bicara.
- Terapkan hukum saling menyukai jika anda menghormati dia atau mengagumi sesuatu yang ada pada dirinya, pastikan dia mengetahui hal itu.
- Buatlah dia melakukan sedikit kebaikan pada anda, tetapi pastikan bahwa hal itu tidak mengandung kesan perintah. Hal ini menciptakan motivasi tak sadar dia untuk lebih menyukai anda.
- Bangunlah jembatan psikologis dan lakukanlah komunikasi dengan meniru gerak tubuh tanpa di buat-buat dan menyesuaikan diri dengan tempo dan nada bicaranya.
- Kita tertarik pada orang-orang yang percaya diri. Tunjukkan kepercayaan diri anda dengan mampu tertawa pada diri anda sendiri dan tidak terlalu menjaga penampilan.
- Buatlah dia merasa nyaman. Jadilah orang yang penuh pengertian, baik hati, tulus, dan hangat.
- Milikilah sikap mental yang positif. Kita tertarik pada orang yang antusias, bergairah, periang, dan aktif.
Gimana??mudah kan!! hehe......Selamat mencoba. :)
Rabu, 19 Januari 2011
Cara Modifikasi Blockquote Blogger / Membuat Blockquote Gaul!!
Seperti apa sih Blockquote itu?
Untuk platform blogger,blockquote memiliki tampilan default yang dapat dikatakan 'biasa saja'.
Blockquote,adalah unsur dalam posting yang digunakan untuk menunjukkan kutipan dari sebagian besar teks dari sumber lainatau teks yang menunjukkan suaru penjelasangaris besarnya.
Contoh tampilan blocquote adalah seperti di bawah ini:
Nah,sampai disini sobat sudah mengetahui to opo iku blockquote?
Sekarang,yuk cari tahu bagaimana Cara Modifikasi Blockquote Blogger.
1.Pedhilah ke dashboard blog sobat lalu pilih rancangan atau tata letak,lihat gambar 01.
Gb.0.1
2.Pilih tab Edit HTML,lalu contreng tulisan Expand Widhet Templates,lihat Gambar0.2 dan 0.3
Gb.0.2
Gb.0.3
3.Cari kode
]]></b:skin> (untuk mempermudah gunakan keyboard dan tekan Ctrl+F),setelah ketemu,tepat diatas kode tersebut letakkan kode berikut :.post-body blockquote {
margin: 10px 10px 10px 20px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;
color: #000000;
background: url(http://2.bp.blogspot.com/_n7xseT2-HDU/TTfSVR6DdyI/AAAAAAAAArQ/ZtQUl-i6dhU/s1600/blockquote%2Bpelajaran%2Bblog.png) no-repeat left top;
border-left: 10px solid #666666;
}4.Lalu simpan Templates,dan selesai.
Catatan:jika css blog sobat sudah ada kode
.post-body blockquote {,maka tinggal ganti dengan kode diatas. Cara Membuat Blockquote dalam Postingan
Setelah sobat melakukan cara memodifikasi blockquote diatas,kini sobat dapat membuat blockquote dalam postingan,dapat secara manual dan dapat pula secara WYSWYG.
1.Untuk secara manual sobat tinggal sisipkan kode:<blockquote></blockquote> dalam kalimat atau paragraf,contohnya,
<blockquote>Saya sedang belajar menghias blog blogger dan kali ini saya sedang belajar membuat blockquote dalam postingan di blogspot-ku tersayang ini :D</blockquote>
Nah,dari penulisan diatas,akan menghasilkan tanpilan blockquote seperti ini:
Saya sedang belajar menghias blog blogger dan kali ini saya sedang belajar membuat blockquote dalam postingan di blogspot-ku tersayang ini :D
2.Cara instant,dengan memblok postingan dan tinggal klik deh tanda blockquote-nya,seperti gambar ini:
Semoga bermanfaat ya teman-teman :D
Langganan:
Postingan (Atom)