KLIPING DUNIA: it

Home » Posts filed under it

Showing posts with label it. Show all posts

Text Efek Keyboard Dengan CSS3 Pada Blog

Memepercantik postingan blog dengan menambahkan dan menampilkan beberapa efek pada text memang merupakan suatu hal yang tidak jarang bloggers lakukan, baik itu efek dengan berbagai kombinasi antara CSS, JavaScript maupun jQuery.

Nah, pada tutorial kali ini, saya akan berbagi tentang bagaimana cara menambahkan efek keyboard pada text-text tertentu dengan cara mudah dan hanya memerlukan beberapa potong kode CSS3 dan tidak memerlukan tambahan seperti Javascript maupun jQuery sehingga tidak akan mempengaruhi load time blog.

Kode CSS

lsc{

border:1px solid gray;

font-size:14px;

box-shadow:1px 0 1px 0 #eee, 0 2px 0 2px #ccc, 0 2px 0 3px #444;

-webkit-border-radius:3px;

-moz-border-radius:3px;

-o-border-radius:3px;

border-radius:3px;

margin:2px 3px;

padding:1px 5px;

}

Memasukkan ke dalam Template

Pada Dashboard, pilih Template » Edit HTML

Copy kode di atas kemudian pastekan tepat di atas tag ]]></b:skin>

Selanjutnya, pilih Simpan Template

Cara Menggunakan pada Postingan Blog

Pada saat membuat postingan baru pada blog, pilih HTML (samping kanan Compose) dan gunakan kode pemanggil <lsc> dan diikuti oleh text yang akan diberikan efek keyboard serta diakhiri dengan kode penutup </lsc>. Berikut contohnya :

<lsc>Ctrl</lsc> <lsc>Shift</lsc> <lsc>Contoh yang lain</lsc>

Maka hasilnya akan terlihat seperti di bawah ini :

Ctrl Shift Contoh yang lain

Selamat Mencoba dan Semoga Bermanfaat...!!!

readmore »»

Filter "Bad Words" Pada Komentar Blog

Badwords pada komentar blog adalah kata-kata yang tidak sopan, melecehkan, diskriminasi yang seharusnya tidak diucapkan dan harus dihindari pada saat memberikan komentar terhadap sesuatu baik itu pada komentar artikel blog atau yang lainnya.

Memang, tidak semua orang mau memberikan komentar yang baik dengan tidak menggunakan kata-kata yang seharusnya tidak diucapkan, namun hal tersebut bisa dihindari dengan cara menyaring atau memfilter kata-kata yang nantinya akan diblok alias tidak bisa ditampilkan atau menggantinya dengan tanda bintang pada blog.

Untuk menerapkan tips memfilter bad words atau kata-kata yang seharusnya tidak diucapkan pada komentar blog, berikut caranya :

Langkah awal, Login ke Blogger

Pada Dashboard, pilih Template » Edit HTML » Centang "Expand Template Widget"

Copy Script di bawah ini dan pastekan tepat di bawah tag <body>

<script type='text/javascript'>

//<![CDATA[

function badwordfilter(ID){

var comm = document.getElementById(ID);

var comment = comm.innerHTML;

var reBadWords = /badword1|badword2|badword3|badword4/gi;

comment1 = comment.replace(reBadWords, "****");

comm.innerHTML = comment1;

comm.style.display = "block";

}

//]]>

</script>

Keterangan :

Ganti kata badword1|badword2|badword3|badword4 dan seterusnya dengan kata-kata yang difilter atau disaring.

Selanjutnya, cari dan temukan kode <p><data:comment.body/></p>. Setelah ketemu, ganti kode tersebut dengan kode di bawah ini :

<p>

<div expr:id='data:comment.id' style='display:none;'>

<data:comment.body/>

</div>

<script type='text/javascript'>badwordfilter("<data:comment.id/>");

</script>

</p>

Terakhir, Simpan template.

Selamat Mencoba dan Semoga Bermanfaat...!!!

readmore »»

Gadget Google Translate Flags Untuk Blogger

Google Translate merupakan sebuah media untuk menterjemahkan bahasa dari satu bahasa ke bahasa yang lain. Contohnya dari Bahasa Indonesia ke Bahasa Inggris atau sebaliknya.

Untuk urusan blogger, rasanya sebuah blog tidak akan lengkap jika gadget google translate ini tidak dipasang pada blog, alasannya apa? alasannya yakni untuk memudahkan para pengunjung blog menterjemahkan isi postingan ke bahasa mereka masing-masing jika pengunjung tersebut berasal dari luar negeri.

Sebenarnya, blogger sendiri sudah menyediakan gadget google translate yang bisa langsung dipasang pada blog, namum gadget tersebut bisa dibilang masih sangat standard. Yaaa maklum, bawaan blogger, dimana-mana pasti standard... Hehehe...!!!

Kembali ke laptop...!!!

Nah, beberapa waktu yang lalu, saya telah memposting arikel yang sama, yakni Cara Memasang Translate Gambar Bendera Pada Blogspot, namun postingan saya tersebut masih kurang complete karena hanya menyediakan beberapa jenis bahasa saja dan pada kesempatan kali ini saya kembali membuat postingan yang sama namun dengan jumlah bahasa yang bisa dikatakan sudah lengkap yakni 63 bahasa.

Gadget Google Translate Flags Untuk Blogger

Jika tertarik menggunakan gadget Google Translate Flags (63 Bahasa) ini, berikut cara memasangnya pada blog.

Pada dashboard, pilih Tata Letak » Add Gadget » HTML/JavaScript

Copy kode di bawah ini dan pastekan ke dalam kotak HTML/JavaScript

Terakhir, pilih simpan dan lihat hasilnya.

Selamat mencoba dan semoga bermanfaat.

readmore »»

Cara Membuat Peringatan Saat Blog Dalam Perbaikan

Mengedit bahkan mengganti template blog merupakan suatu hal yang paling sering dilakukan oleh seorang blogger, namun ketika melakukan pengeditan atau penggantian template, tentu memakan waktu yang cukup lama sehingga tampilan baru tersebut bisa teraplikasikan dengan segera sesuai dengan apa yang diinginkan.

Pada saat pengeditan template berlangsung, sering kali tampilan blog tersebut tidak sempurna atau acak-acakan sehingga mengganggu para visitor dengan tampilan blog yang kurang enak untuk dilihat. Nah, untuk mengakalinya, mungkin diperlukan sebuah pemberitahuan khusus agar para pengunjung tidak dapat mengakses untuk sementara waktu blog yang sedang dalam perbaikan tersebut dengan cara membuat sebuah peringatan bahwa blog tersebut sedang dalam perbaikan / maintenance.

Tetapi kekurangan pada saat menerapkan tips ini pada blog yakni pada saat kita ingin melakukan Preview atau pratinjau karena apa yang pengunjung lihat sama persis dengan apa yang kita lihat sehingga mempersulit kita untuk melakukan pratinjau tentang hasil dari editing template.

Tips yang satu ini mungkin sangat cocok untuk para bloggers yang sudah sangat paham [Advanced] dengan kode-kode template yang tidak memerlukan yang namanya Preview/pratinjau pada saat melakukan pengeditan template blog.

Nah, untuk para sahabat bloggers yang ingin menggunakan cara ini, berikut kode CSS yang diperlukan dan bagaimana cara meletakkannya kedalam Template.

CSS

html {

height: 100%;

background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8lb8eFiqW4TFOuZcGHieCAiXWMsEiVxOpTo-VhnwGfByJiGUrYmtyHKYBahezOysz4jJlHPcNTkCvB2wFr93GhLC9h1FIC69C97nQUMh7SC2Yysih5xfZfwY5UYTjR4xeLjWVrfBIN_mb/s1600/lostsector-under-maintenance.gif) no-repeat center 50%;

margin: 0;

}

body {

display: none;

}

Keterangan :

URL yang berwarna Merah pada kode CSS di atas adalah URL gambar yang nantinya akan jadi pemberitahuan bahwa blog sedang dalam perbaikan/maintenance. Silahkan diganti dengan URL gambar yang sobat desain sendiri.

Cara Meletakkan CSS Kedalam Template

Untuk penempatannya sendiri di dalam template, cukup mengcopy kode CSS di atas dan mempastenya tepat di atas tag ]]></b:skin> serta lanjutkan dengan mengklik tombol Save atau pratinjau untuk melihat hasilnya.

Selamat mencoba dan semoga bermanfaat. Terima kasih, salam bloggers...!!!

readmore »»

Rahasia Facebook

Kali ini kami akan berbagi trik di Facebook mungkin trik ini sangat cocok banget bagi para Facebooker, berikut adalah trik sekaligus rahasia dari Facebook :
1. Tombol rahasia untuk menuju ke Home.
Cukup dengan menekan tombol Shift + Alt + 1 maka kamu akan langsung ke Home.

2. Tombol rahasia untuk menuju ke Profil.
Caranya, tekan tombol Shift + Alt + 2 maka kamu akan langsung ke Profil.

3. Tombol rahasia ke Permintaan Pertemanan.
Tekan tombol Shift + Alt + 3 maka kamu akan langsung ke Permintaan Pertemanan.

4. Tombol rahasia ke Pesan.
Caranya tekan tombol Shift + Alt + 4 maka kamu akan langsung ke Pesan Facebook.

5. Tombol rahasia ke Pemberitahuan.
Caranya tekan tombol Shift + Alt + 5 maka kamu akan langsung menuju ke halaman Pemberitahuan.

6. Tombol rahasia ke Edit Account.
Tekan, Shift + Alt + 6. Dijamin kamu langsung ke menu Edit Account.

7. Tombol rahasia ke Settings Privasi.
Coba tekan tombol rahasia dengan menekan Shift + Alt + 7 di keyboard kamu yah!

8. Tombol rahasia ke Penggemar Facebook.
Caranya, tekan tombol Shift + Alt + 8, kamu pasti akan langsung melihat penggemar Facebook.

9. Tombol rahasia ke Statement of Right and Responsibilities.
Caranya, tekan tombol Shift +Alt + 9, kamu pasti akan di arahkan ke statement of roght and responsibilities.

readmore »»

Cara Mengganti Warna Text Selection Pada Blog

Color Text Selection atau warna teks pada saat di blok pada postingan blog pada dasarnya yakni berwarna biru muda. Warna tersebut adalah warna standard pada semua web/blog dan bukan hanya itu, color text selection juga sering didapati pada aplikasi-aplikasi komputer yang lain seperti MS Word, Notepad dan lain sebagainya.

Nah, pada kesempatan kali ini saya akan memberikan sebuah tips/cara untuk mengganti color text selection tersebut dengan warna yang diinginkan. Langsung saja saya kasi kode CSSnya dan cara menempatkannya didalam template.

CSS

/* On Mozilla Firefox*/
::-moz-selection {
background-color: #b80000;
color: #fff;
}
/* On Safari Safari or Chrome */
::selection {
background-color: #b80000;
color: #fff;
}

Keterangan :

Kode warna HTML yang saya beri tanda dengan warna merah merupakan warna background pada saat di blok dan warna biru merupakan warna text pada saat diblok. Silahkan ganti sesuai dengan keinginan.

Cara Memasukkan ke dalam Template

Copy kode di atas kemudian pastekan tepat di atas tag ]]></b:skin> kemudian lanjutkan dengan mengklik tombol Save / Simpan.

Semoga bermanfaat dan salam bloggers...!!!

readmore »»

CSS Buttons With Transitional Hover Untuk Blogger

CSS3 Buttons With Transitional Hover Untuk Blogger

Button Transitional Hover adalah sebuah tombol yang berisikan link atau tidak pada blog baik itu tombol download, informasi, live demo maupun yang lainnya dengan efek hover atau bergerak pada saat tersentuh pointer mouse.

Tombol Transitional Hover ini sendiri adalah hasil dari modifikasi CSS3 dan tanpa ada tambahan Javascript maupun jQuery sehingga tidak mempengaruhi load time blog. Nah untuk melihat demo atau contohnya, silahkan mengklik link live demo di bawah.

LIVE DEMO

Cara memasang dan menggunakan tombol transitional

Pada dashboard, pilih Template » Edit HTML

Copy kode di bawah ini dan pastekan tepat di atas/sebelum tag ]]</skin>

#button .icon {

background:#E3E3E3 url('https://lh3.googleusercontent.com/--e_YVckfUbg/TyvWSQ-Sa3I/AAAAAAAAF_4/A6xydsmRC6E/d/refreshcode.png') 3px 0 no-repeat;

-moz-border-radius:10px;

-webkit-border-radius:10px;

-o-border-radius:10px;

border-radius:10px;

display:block;

color:#212121;

float:none;

height:80px;

width: 80px;

line-height:80px;

margin:10px auto 0;

padding-top:1px;

position:relative;

text-shadow:0 1px 0 #FAFAFA;

text-align:center;

text-decoration:none;

white-space:nowrap;

-webkit-transition:width .25s ease-in-out,

background-color .25s ease-in-out;

-ms-transition:width .25s ease-in-out,

background-color .25s ease-in-out;

-moz-transition:width .25s ease-in-out,

background-color .25s ease-in-out;

-o-transition:width .25s ease-in-out,

background-color .25s ease-in-out;

transition:width .25s ease-in-out,

background-color .25s ease-in-out;

-webkit-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;

-moz-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;

-o-box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 2px 3px;

box-shadow:inset 0 1px 0 #FAFAFA,rgba(0,0,0,.28) 0 1px 3px;

}

#button a span {

display:none;

}

#button:hover a span {

display:inline;

}

#button a span {

font-size:1.4em;

}

#button:hover .icon {

width:420px;

}

#button .demo {

background-position:0 -80px;

}

#button .info {

background-position:0 -160px;

}

#button .download {

background-position:0 0;

}

Simpan template.

Nah, untuk memasangnya pada postingan blog, pilih HTML (samping kanan compose) pada saat membuat postingan/artikel terbaru dan masukkan salah satu kode pemanggil di bawah ini :

Button Download

<div id="button">

<a href="#" class="icon demo"><span>Lihat Demo</span></a>

</div>

Button Live Demo

<div id="button">

<a href="#" class="icon download"><span>Lihat Demo</span></a>

</div>

Button Info

<div id="button">

<a href="#" class="icon info"><span>Lihat Demo</span></a>

</div>

Keterangan : Ganti tanda # (pagar) dengan URL tujuan

Selanjutnya pilih pratinjau atau publikasikan untuk melihat hasilnya.

Semoga bermanfaat. Salam bloggers...!!!

readmore »»

Cara Membuat Template Blog / Website Valid HTML5

HTML merupakan singkatan dari Hyper Text Markup Language dan mempunyai arti sebagai sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan struktur pemformatan hiperteks sederhana yang ditulis dalam bentuk kode-kode dan instruksi sehingga menampilkan sebuah naskah atau dokumen pada website.

Pada masa sekarang ini, banyak pakar yang menilai bahwa kevalidan sebuah struktur HTML dapat mempengaruhi posisi SERP dan SEO blog atau website dimata search engine. Selain itu, sebuah web atau blog yang mempunyai HTML tidak valid, otomatis beberapa browser tidak akan mampu mengurai struktur serta tidak dapat menampilkan secara maksimal isi dari sebuah website sehingga akan memberikan dampak yang negatif.

Validitas HTML Blog

Dari beberapa kasus yang pernah saya dapati, kebanyakan template blogger mempunyai struktur HTML yang tidak valid, termasuk template yang saya gunakan sekarang ini. Namun untuk memperbaikinya sehingga menjadi valid (paling tidak mengurangi error) ada beberapa cara yang bisa ditempuh sehingga errors dan warnings bisa diminimalisir sekecil mungkin dan bagi yang ingin mencobanya, silahkan perhatikan langkah-langkah berikut ini :

Sebelum saya jelaskan lebih lanjut, terlebih dahulu silahkan periksa kevaliditasan blog yang sobat kelola di http://validator.w3.org/ [saya tunggu deh... hehehe]

Bagaimana, error atau valid? Kalau dugaan saya benar, pasti HTML template / blog yang sobat kelola pasti errornya lumayan banyak... Hehehe...!!! HTML blog saya sendiri sebelum saya minimalisir, errornya mencapai 256 dan warning 8, tetapi setelah saya minimalisir akhirnya menjadi hampir valid yakni 4 error dan 1 warning.

Kembali ke laptop...!!!

Langkah-Langkah mengurangi / meminimalisir errors dan warnings blog / website

Pertama, cari kode seperti di bawah ini :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Ganti kode di atas menjadi :

<!DOCTYPE html>

<html expr:dir='data:blog.languageDirection'>

Atau dengan yang ini :

<!DOCTYPE html>

<html'>

Langkah selanjutnya, copy kode di bawah ini dan pastekan tepat di bawah tag <head>

<meta charset='utf-8'/>

Lanjutkan dengan mencari kode di bawah ini kemudian Hapus

<b:include name='quickedit'/>

Cari tanda dash pada kode CSS kemudian hapus. Contohnya :

/*-------------- HEADER --------------*/

Sehingga menjadi :

/* HEADER */

Jangan simpan dulu, tetapi cari kode seperti di bawah ini :

<b:include name='nextprev'/>

Jika sudah ketemu, tambahkan kode conditional <b:if....> dan penutupnya sehingga akan terlihat seperti ini

<b:if cond='data:blog.homepageUrl != data:blog.url'>

<b:include name='nextprev'/>

</b:if>

Selanjutnya, cari dan hapus kode seperti dibawah ini (optional)

<a expr:name='data:post.id'/>

Sekarng tekan simpan dan periksa kembali kevaliditasan blog atau website sobat.

Selamat mencoba dan terima kasih telah membaca artikel ini.

readmore »»

Cara Memasang Feedburner Counter Reader [FeedCount] Pada Blog

Cara Memasang Feedburner Counter Reader [FeedCount] Pada Blog - FeedCount merupakan salah satu aplikasi yang berasal dari Feedburner yang mempunyai fungsi untuk menghitung jumlah Readers / Pembaca artikel blog yang dikirim ke email mereka (subscribers) melalui Feedburner.

Dan untuk memasang FeedCount ini, sangatlah mudah tetapi syarat pertamanya adalah sudah mempunyai akun pada Google Feedburner dan jika belum mempunyai akun, silahkan sobat Mendaftar / Membuat Akun Google Feedburner terlebih dahulu dan jika sudah mempunyai akun feedburner, silahkan perhatikan langkah-langkah pemasangan FeedCount ini.

Langkah pertama, login ke akun Feedburner

Pada Dashboard, pilih salah satu akun Feedburner

Selanjutnya, pada akun yang sudah dipilih sebelumnya, pilih Publicize » FeedCount (Lihat Gambar)

Setelah itu, Copy kode HTML yang disiapkan dan masukkan kode tersebut kedalam gadget HTML/JavaScript.

Sampai disini ada pertanyaan? Jika ada, silahkan memberikan komentar pada kolom komentar di bawah postingan ini. Terima kasih...!!!

readmore »»

Cara Mendaftarkan Blog / Website di Google Feedburner

Apa itu Google Feedburner? Google Feedburner menurut wikipedia, Feedburner merupakan layanan manajemen umpan web (web feed), yang terdiri dari RSS feed dan alat pengelola (management tools) untuk blogger dan podcaster, dan aplikasi publikasi lain yang berbasis web. Layanan ini menyediakan analisis lalu lintas pengunjung situs dan sistem periklanan yang dapat dipilih.

FeedBurner memiliki banyak fitur, misalnya pengecekan statistik optimasi feed. Namun kenapa lebih baik menggunanan FeedBurner dibandingkan dengan feed bawaan blog adalah karena FeedBurner lebih cocok dipakai untuk:

Mempublikasikan konten dan orang lain lebih mudah untuk melakukan subscribe.

Mengoptimalkan pendistribusian feed karena formatnya lebih kompatibel untuk semua jenis perangkat lunak subscriber.

Pengguna dapat menganalisis traffic yang berlangganan feed, seperti melihat jumlah subscriber, dari mana mereka berada dan apa yang mereka sukai.

Sumber : Wikipedia

Nah, untuk mengaktifkan atau mendaftar pada google feedburner, sangatlah mudah. Berikut caranya :

Langkah Pertama, Buka http://feedburner.google.com/

Setelah terbuka, masukkan URL blog atau Website pada kolom yang disediakan dan jangan lupa untuk memberi tanda centang pada "I am a podcaster!" serta lanjutkan dengan mengklik tombol "Next" (lihat gambar untuk lebih jelasnya)

Pada halaman selanjutnya, pilih opsi yang pertama dan tekan tombol "Next"

Pada halaman ini, isi nama Feed Title (Judul Feed) beserta username Feed kemudian lanjutkan dengan menklik tombol "Next" yang ada pada sudut kiri bawah.

Selanjutnya, sobat akan dihadapkan pada 3 (tiga) opsi lanjutan setelah feedburner sobat sudah diaktifkan dan untuk pengaturannya sendiri, silahkan disesuaikan.

Setelah semuanya sudah dilengkapi, feedburner sobat sudah benar-benar aktif dan sudah bisa digunakan.

Semoga, tutorial kali ini memberikan manfaat yang baik buat sobat, pada kesempatan selanjutnya saya akan memberikan atau membahas tentang Bagaimana Cara Memasang FeedCount pada Blog dan terima kasih telah membaca artikel ini. Salam bloggers...!!!

readmore »»

Cara Mudah Membuat Semua Link Terbuka Pada Tab Baru [Open New Tab Terget]

Cara Mudah Membuat Semua Link Terbuka Pada Tab Baru [New Tab Terget]

Pada dasarnya, link-link yang ada pada blogspot akan terbuka pada tab yang sama jika pada saat link tersebut di buat tanpa menggunakan atrribut target blank dan kebanyakan dari para master SEO menyarankan untuk menambahkan attribut target blank pada setiap link karena dengan menambahkan attribut tersebut akan berpotensi meningkatkan pageviews blog.

Sobat tentunya sudah sering mendapati sebuah link yang apabila di klik akan terbuka pada tab baru maupun pada tab yang sama. Link yang paling sering di dapati terbuka pada tab baru yakni pada sebuah postingan blog dan untuk link yang terbuka pada tab yang sama kebanyakan berada pada homepage dan pada sidebar.

Namun, tahukan sobat, untuk menambahkan atrribut target blank pada semua link-link yang ada pada blog agar bisa terbuka pada tab baru tanpa harus menambahkan attribut target blank satu per satu, baik itu pada sidebar, homepage, postingan dan lain sebagainya sangatlah mudah. Caranya? Caranya sangatlah mudah, perhatikan langkah-langkah berikut ini :

Pilih Template » Edit HTML » Proceed

Copy kode di bawah ini dan pastekan tepat di bawah tag <head>

<base target='_blank' />

Simpan template dan lihat hasilnya.

Semoga bermanfaat dan salam bloggers...!!!

readmore »»

Floating Social Bookmark Vertical Untuk Blogger

Social bookmarking adalah salah satu alat atau media yang dapat digunakan oleh para bloggers untuk meningkatkan pageviews blog. Hal ini dikarenakan jika seseorang mengklik tombol suka atau like facebook (dalam keadaan login) pada widget social bookmark yang dipasang pada blog, otomatis postingan akan ditampilkan pada beranda atau profil facebook visitor tersebut dan sama halnya tombol social bookmark yang lain seperti google plus dan Twitter.

Nah, pada kesempatan kali ini saya akan membahas tentang bagaimana cara memasang sebuah Widget Floating Social Bookmark Vertical pada Blog yang dilengkapi oleh tombol social bookmark yang lain seperti facebook, twitter, google plus dan masih banyak lagi. Berikut previewnya (screenshoot image & live demo).

Floating Social Bookmark Vertical Untuk Blogger

LIVE DEMO

Untuk pemasangannya sendiri tidaklah rumit dan tanpa harus mengedit atau mengotak atik kode template, tetapi cukup dengan memasukkannya kedalam gadget HTML/Javascript. Berikut kode yang diperlukan dan cara memasukkannya kedalam gadget.

KODE

<div class="addthis_bar addthis_bar_vertical addthis_bar_large" style="background:#ffffff; border: 1px solid #000000; top:150px;left:110px;">

<div class="addthis_toolbox addthis_default_style">

<span><a class="addthis_button_facebook_like" fb:like:layout="box_count"></a></span>

<span><a class="addthis_button_tweet" tw:count="vertical"></a></span>

<span><a class="addthis_button_google_plusone" g:plusone:size="tall"></a></span>

<span><a class="addthis_counter"></a></span>

<center><a href="http://bit.ly/Z3bVtA" target="blank"><span style="color: #999999; font-size: 8px;">Get This Widget</span></a></center>

</div>

</div>

<script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>

CARA PEMASANGAN

Pilih Tata Letak » Add Gadget » HTML/Javascript

Copy kode di atas dan masukkan kedalam kolom HTML/Javascript

Terakhir, pilih simpan dan lihat hasilnya

Selamat mencoba dan semoga bermanfaat. Terima kasih...!!!

readmore »»

5 Efek Foto Menggunakan jQuery & CSS pada Blog

5 Efek Foto dengan jQuery & CSS pada Blog

Hampir semua blogger selalu menggunakan gambar pada setiap postingan mereka dan memang salah satu yang membuat postingan tersebut terlihat rapi dan menarik yakni dengan menambahkan image / gambar ke dalamnya. Tetapi kadang gambar yang ditampilkan tidak mempunyai efek apa-apa alias standard sehingga terkesan kaku dan kurang menarik.

Nah, dari hal tersebut di atas, maka pada kesempatan kali ini saya akan berbagi tentang bagaimana cara menambahkan 5 buah efek dengan menggunakan jQuery dan beberapa potong CSS kedalam template serta bagaimana cara penggunaannya. Untuk live demonya sendiri, silahkan sobat klik link di bawah ini dan jika sudah terbuka, silahkan sorot pada image dan lihat sendiri efeknya.

LIVE DEMO

Bagaimana, menarik bukan...??? Untuk pemasangan kode dan cara penggunaannya sendiri, berikut tutorial singkatnya :

Seperti biasa, login ke blogger terlebih dahulu.

Pilih Template » Edit HTML » Proceed (jangan lupa beri centang pada Expand Template Widget)

Copy CSS di bawah ini dan pastekan tepat di atas tag ]]></b:skin>

.adipoli-wrapper{position:relative;display:inline-block;margin:auto}

.adipoli-slice{display:block;position:absolute;z-index:0;height:100%}

.adipoli-box{display:block;position:absolute;z-index:0}

.post img{border:0!important;margin:0!important;padding:0!important}

.adipoli-wrapper>img,.adipoli-before,.adipoli-after{position:absolute;z-index:0}

Selanjutnya copy Script di bawah ini dan pastekan tepat di atas tag penutup </head>

<script src='http://code.jquery.com/jquery-1.7.1.min.js' type='text/javascript'/>

<script src='http://yourjavascript.com/143237963/jquery.adipoli.min.js' type='text/javascript'/>

<script type='text/javascript'>

/*<![CDATA[*/

jQuery(function($pice){

$pice('.effect1').adipoli({

'startEffect' : 'normal',

'hoverEffect' : 'popout'

});

$pice('.effect2').adipoli({

'startEffect' : 'overlay',

'hoverEffect' : 'sliceDown'

});

$pice('.effect3').adipoli({

'startEffect' : 'transparent',

'hoverEffect' : 'boxRandom'

});

$pice('.effect4').adipoli({

'startEffect' : 'overlay',

'hoverEffect' : 'foldLeft'

});

$pice('.effect5').adipoli({

'startEffect' : 'transparent',

'hoverEffect' : 'boxRainGrowReverse'

});

});

/*]]>*/

</script>

Simpan template.

Selanjutnya, untuk menerapkannya pada postingan blog, berikut caranya :

Pada saat selesai mengupload gambar ke dalam postingan, pilih HTML kemudian cari kode gambar tersebut dan tambahkan attribut class="effect1" sampai class="effect1" untuk kategory efek yang ingin ditampilkan. Berikut contohnya :

Ketika membuka HTML pada postingan, biasanya kode anchor untuk gambar akan terlihat seperti di bawah ini :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinPOW6TPStD2V33kN5bfgLgVZHxxxECNe55S1eCyjBbkQZa7vCS2GOp5wKSBlxzSc7UxYgYjMJ-p3WL63QTQw2haymgDtVbjm2RBflI3ZqXQAKShrbA8-OmvarJUUPiA5WWNBLvk7eQRpn/s1600/naruto.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinPOW6TPStD2V33kN5bfgLgVZHxxxECNe55S1eCyjBbkQZa7vCS2GOp5wKSBlxzSc7UxYgYjMJ-p3WL63QTQw2haymgDtVbjm2RBflI3ZqXQAKShrbA8-OmvarJUUPiA5WWNBLvk7eQRpn/s1600/naruto.jpg" /></a>

Nah untuk menambahkan efek pada gambar tersebut, berikut caranya :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinPOW6TPStD2V33kN5bfgLgVZHxxxECNe55S1eCyjBbkQZa7vCS2GOp5wKSBlxzSc7UxYgYjMJ-p3WL63QTQw2haymgDtVbjm2RBflI3ZqXQAKShrbA8-OmvarJUUPiA5WWNBLvk7eQRpn/s1600/naruto.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img class="effect1" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinPOW6TPStD2V33kN5bfgLgVZHxxxECNe55S1eCyjBbkQZa7vCS2GOp5wKSBlxzSc7UxYgYjMJ-p3WL63QTQw2haymgDtVbjm2RBflI3ZqXQAKShrbA8-OmvarJUUPiA5WWNBLvk7eQRpn/s1600/naruto.jpg" /></a>

class="effect1" adalah kategory image dengan efek zoom pada saat gambar tersentuh oleh pointer mouse. Ganti kode tersebut dengan effect yang lain (class="effect1" sampai dengan class="effect5").

readmore »»