tips dan trik blog

Demo widget menu navigasi ajax

2013-05-05T09:28:00.001+07:00

ARAHKAN KRUSOR ANDA KE MENU..!

KEMBALI KE TUTORIAL ....

Demo Widget rekomendasi khusus jejaring sosial

2013-05-03T01:52:00.003+07:00

SILAHKAN SCROLL MOUSE ANDA KE BAWAH..!

KEMBALI KE TUTORIAL ...

Demo gambar menggunakan keyframe animasi CSS3

2013-04-30T02:46:00.003+07:00

ARAHKAN KRUSOR KE GAMBAR..!

KEMBALI KE TUTORIAL ...

Demo Menu blok css3

2013-04-25T01:16:00.000+07:00

KEMBALI KE TUTORIAL...

Demo Menu Teks Bergulir Modern

2013-04-23T17:10:00.003+07:00

KEMBALI KE TUTORIAL...

Demo Peel Back Image

2013-04-23T15:11:00.001+07:00

GERAKAN MOUSE ANDA KE GAMBAR..!

KEMBALI KE TUTORIAL ...

Demo deskripsi gambar dengan panel bergeser css3

2013-04-22T19:13:00.001+07:00

ARAHKAN KRUSOR ANDA KE GAMBAR..!

KEMBALI KE TUTORIAL ....

Menurut cerita Pantun Bogor,Palabuhan Ratu didirikan oleh Nyai Ratu Pu'un Purnama Sari.atau nyai Ratu Purnama Sari/Nyi Roro kidul Nyi Roro kidul Putri Pertama Prabu Sedah Siliwangi dari Istrinya yang ke tujuh, yang saat itu Prabu Sedah Nusia Mulya bertahta di Pakuan Pajajaran Tengah.

Widget Heksadesimal warna

2013-04-21T11:04:00.002+07:00

Demo Widget subscriber

2013-04-21T07:31:00.000+07:00

Dapatkan artikel baru kami lewat EMAIL

KEMBALI KE TUTORIAL .....

Demo multi level dropdown menu css3

2013-04-17T13:05:00.002+07:00

Arahkan krusor ke menu dibawah ini..!

KEMBALI KE TUTORIAL ...

Cara membuat widget jejaring sosial CSS3 penuh pesona di blog

2013-04-16T12:18:00.000+07:00

Pada postingan kali ini masih berkaitan dengan widget jejaring sosial, widget yang satu ini menggunakan effect transisi (CSS3). Saya akan share ke anda bagaimana cara membuat widget jejaring sosial elegant dengan CSS3. Agak sedikit berbeda dengan postingan yang telah lalu, widget ini sangat elegant, cantik dan super keren.

Hampir setiap blog atau website memiliki widget jejaring sosial dengan tombol icons yang beragam. Dengan memasang widget jejaring sosial pada blog, anda dapat mengundang pembaca/pengunjung blog untuk terlibat dalam jejaring sosial anda, dan tentunya dapat meningkatkan reputasi blog anda. Jejaring Sosial memainkan peran yang sangat penting dalam menghasilkan lalu lintas atau traffic pengunjung blog anda.

View Demo

Langsung praktek di TKP:

Pertama-tama masuk ke halaman tata letak kemudian klik menu Tata Letak:

Tambah elemen halaman HTML/JavaScript, kemudian salin semua kode di bawah ini :

<style type="text/css">
#mkrbutton .iconz {background:#E3E3E3 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyX6oiUQfp0Vdg0OluJIsZ61WV7p3R4b5cDptJPKTjeJz9TSAp3Fy6_I8HWm3FLwr_KqVF4uTlj1UIOKe1WbxjCOG6Tx-pDi8tiSolET1zbn_ePEBmvwuaVHg3NCfIf7w2ftnEcXzVKs8/s1600/blsocial12.png') 0 0 no-repeat;
-moz-border-radius:40px;
-webkit-border-radius:40px;
-o-border-radius:40px;
border-radius:40px;
display:block;
color:#212121;
float:none;
height:48px;
width: 48px;
line-height:48px;
margin:10px auto 0;
position:relative;
text-shadow:0 1px 0 #FAFAFA;
text-align:center;
text-decoration:none;
white-space:nowrap;
-webkit-transition:width .25s ease-in-out;
-ms-transition:width .25s ease-in-out;
-moz-transition:width .25s ease-in-out;
-o-transition:width .25s ease-in-out;
transition:width .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;}
#mkrbutton a span {display:none;}
#mkrbutton:hover a span {display:inline;}
#mkrbutton a span {font-size:1.4em;}
#mkrbutton:hover .iconz {width:250px;}
#mkrbutton .fb {background-position: 0 -384px;}
#mkrbutton .twiter {background-position: 0 -432px;}
#mkrbutton .google {background-position: 0 -480px;}
#mkrbutton .pint {background-position: 0 -528px;}
#mkrbutton .linkedin {background-position: 0 -576px;}
#mkrbutton .devart {background-position: 0 -624px;}
#mkrbutton .ytube {background-position: 0 -672px;}
#mkrbutton .rss {background-position: 0 -720px;}
#mkrbutton .fb:hover {background-position: 0 0;color: #0374DD;}
#mkrbutton .twiter:hover {background-position: 0 -48px;color: #00A1DF;}
#mkrbutton .google:hover {background-position: 0 -96px;color: #A70000;}
#mkrbutton .pint:hover {background-position: 0 -144px;color: #C00;}
#mkrbutton .linkedin:hover {background-position: 0 -192px;color: #005772;}
#mkrbutton .devart:hover {background-position: 0 -240px;color: #4C7A4A;}
#mkrbutton .ytube:hover {background-position: 0 -288px;color: #A00;}
#mkrbutton .rss:hover {background-position: 0 -336px;color: #EC5601;}
</style>

<div id="mkrbutton">
<a href="#" class="iconz fb"><span>Facebook</span></a></div>
<div id="mkrbutton">
<a href="#" class="iconz twiter"><span>Twitter</span></a></div>
<div id="mkrbutton">
<a href="#" class="iconz google"><span>Google+</span></a></div>
<div id="mkrbutton">
<a href="#" class="iconz ytube"><span>Youtube</span></a></div>
<div id="mkrbutton">
<a href="#" class="iconz rss"><span>RSS</span></a></div>

Catatan:

Ukuran lebar yang tepat untuk pengaplikasian pada sidebar yaitu 300px. Untuk menyesuaikan dengan sidebar teman-teman carilah kode ini #mkrbutton:hover .iconz {width:250px;} dan rubah nilai pada width nya agar sesuai dengan tampilan sidebar anda.

Gimana? anda tertarik dengan widget di atas? Silahkan praktekan di blog anda...
Semoga bermanfa'at...

Original Source

Cara membuat widget jejaring sosial besar dan melayang tebar pesona di blog

2013-04-16T11:46:00.000+07:00

Para Blogger sangat tertarik pada aktivitas sosial. Oleh karena itu pengembang web selalu bekerja membuat widget-widget baru, tombol widget share membantu penulis (author) dalam mempromosikan situs mereka secara online. Postingan kali ini akan membantu penulis untuk berinteraksi dengan para visitor/pembacanya. Tombol-tombol widget share (berbagi ) ini benar-benar besar! :D

View Demo

Cara menambahkannya di Blog

Masuk akun Blogger -> Klik Tata Letak -> Tambahkan Gadget (posisi peletakannya terserah mau dimana sesuai selera anda)
Kemudian Klik -> HTML/Javascript
Pastekan kode berikut di bawah ini :

<style>
.genieland-huge
{
position:fixed;
right:10px;
top:10% ;
}
.genieland-huge img
{
float:right; clear:right; margin:1px;
-webkit-transition: all .0s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.genieland-huge img:hover
{
-moz-transform: scale(1.2) rotate(6deg);
-webkit-transform: scale(1.2) rotate(6deg);
-o-transform: scale(1.2) rotate(6deg);
-ms-transform: scale(1.2) rotate(6deg);
transform: scale(1.2) rotate(6deg);
}
</style>
<div class="genieland-huge">
<a href="https://www.facebook.com/pages/Eyang-anom/427305383989192" title="Join me on Facebook" target="_blank"><img alt="Join me on Facebook" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMgwoXAKZduETaY_m4cCIAcI9vOC5mqDquwo6BMJ2aL2aqn5LcNM5ZeEfO2-37OWi7Ht7TaOnTvgnjT8EQ0DOlm_h2J377GsAvz46izyz9f1hbTAeZDm6zxxTXafrTH3RkHs_laTqM_R-P/s1600/facebook_color02_128x128.png" /></a>
<a href="http://twitter.com/sijalupangna" title="" target="_blank"><img alt="Follow me on Twitter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_UXlLXuxWUT49ahbrRMPkxtPzl04Fw34BGnGJirdeCx5WDqan5mh1xycSdkIK_PJDCYPE9RoUxvQb65t2GFmysfnMcTNvw4N-RoHeuFjybnHfZYkFUK502P4lfOtW1YVJkou8A3ArTKhV/s1600/twitter02_color_128x128.png" /></a>
<a href="http://plus.google.com/u/0/103806695606848957210" title="" target="_blank"><img alt="Follow me on Google Plus" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgz7jFdoGxOV4u0AOOXXcsglCpKMV8ufOZ2MuaG0Ex_kx_l_kVMne1oEbqhW507tLWc8JItolYf7jL42ysG-hrX-w6pST9KCgADLZ93rBBbmw8eNwXgWFz6H7u0acrkpVIznZV55-RVie6u/s1600/google_color02_128x128.png" /></a>
<a href="http://feeds.feedburner.com/jalu-pangna" title="Subscribe to RSS" target="_blank"><img alt="Subscribe to RSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRu0tgPyNZtMXAE9L7d0m-BF4aExCd4YfoIjZE-xgfzoTzGWl2cP0WEetmKEKNgGpqR7oCCx55Mbf2ynd48YD84YqaSIRpt6ikDLRMaoxVPlxUBBqZ2EPRI-Bx3JXvRO4AUUajmlNiFPrN/s1600/feed_color02_128x128.png" /></a>
<a href="mailto:sijalupangna76@gmail.com" title="Email me" target="_blank"><img alt="Email me" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4OmsdEcvG3znOewYeT12KPTnUxRUBVnaEMFyuYtN_JM-iC8rlxm7_OqZ9xk3RJPcrxsXWXdYGkSC16eXwz5vF7hvuizb4rl1yJvCb3dfMkX390MLNCqIS05g9aosPIMG4OMu7fseSDQaB/s1600/mail_color02_128x128.png" /></a>
</div>

Ganti Link yang berwarna Biru dengan link anda
Kemudian simpan Tata Letak....Selesai

Semoga berhasil and keep blogging !

Cara membuat kotak pesan di blog menggunakan CSS

2013-04-16T11:22:00.000+07:00

Ini adalah salah satu kotak blogger untuk menampilkan pesan khusus anda. Kotak yang satu ini benar-benar berbeda dengan yang lain. Seluruh desain kodenya baru. Dua bagian kotak yang berbeda lengkap dikenalkan. Effect Hover ditambahkan didalamnya. Kotak ini di buat untuk menambahkan beberapa paragraph/kalimat maupun tulisan secara bersamaan. Jadi jika memang anda seseorang yang kreatif dan menggunakan kotak ini, bloga anda dapat melihat dan menyaksikan traffic secara nyata. Jadi, mari kita mulai dan langsung praktek di TKP..:)

View Demo

CARA MENAMBAHKAN KODE CSS

Silahkan masuk ke akun blogger anda
Klik Template -> Edit HTML
Cari kode ]]></b:skin> (CTRL + F untuk memudahkan pencarian)
Kemudian tambahkan kode dibawah ini diatas kode ]]></b:skin>

.pcgbox{
text-align:center;
width:75%;
background-color:#fff;
color:#7F7F7F;
padding:20px;
border:2px solid #ccc;
-moz-border-radius: 20px;
-webkit-border-radius:20px;
-khtml-border-radius:20px;
-moz-box-shadow: 0 1px 5px #333;
-webkit-box-shadow: 0 1px 5px #333;
z-index:101;
}
.pcgbox:hover{
color:#333;
box-shadow: 0 0 10px 12px rgba(0,0,0,.35);
}
.pcgbox h1{
border-bottom: 2px dashed #fa0a0a;
margin:-20px -20px 0px -20px;
padding:20px;
background-color:#FFEFEF;
color:#EF7777;
-moz-border-radius:20px 20px 0px 0px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-khtml-border-top-left-radius: 20px;
-khtml-border-top-right-radius: 20px;
background-image: url('http://findicons.com/files/icons/2146/realistik_reloaded/48/error.png');
background-repeat: no-repeat;
background-position: 50px center;
}
.pcgbox h1:hover{
color:#ff0088;
}

CARA MENERAPKANNYA DI BLOG

Gunakan kode HTML berikut pada postingan blog anda.

Ganti isi pesan dengan pesan yang anda suka.

Happy blogging..!

Cara membuat blockquote elegant di blog

2013-04-16T09:45:00.000+07:00

Ini adalah salah satu blockquote yang sempurna bagi seseorang yang ingin menyorot teks (naskahnya) atau memberikan beberapa kode khusus untuk para pembacanya. Hasil akhir dari Blockquote ini sungguh bagus sekali dan saya juga menerapkannya di blog. Efek yang diberikan Blockquote elegan ini cukup membuat kita merasa puas dan kagum. Mari kita mulai dengan pengkodean..

View Demo

CARA MENAMBAHKA BLOCKQUOTE ELEGANT DI BLOG:

Masuk ke akun Blogger anda -> Klik Template -> Edit HTML
Seperti biasa backup template anda terlebih dahulu
Kemudian cari kode / tag ]]></b:skin> (CTRL + F untuk memudahkan pencarian)
Setelah ketemu letakan kode berikut di bawah ini tepat di atas kode ]]></b:skin>

blockquote{
border:5px solid #007FFF;
font-size:120%;
line-height:100%;
overflow:auto;
padding:10px;
font-family:courier;
color:#000000 ;
width: 360px;
position: relative;
margin: 0 auto 20px auto;
padding: 12px 80px 15px;
text-align: left;
border-radius: 5px;
box-shadow: 0 0 5px 2px rgba(0,0,0,.35);
cursor: default;
background: #ffe691;
border: 1px solid #f6db7b;
background: #ffe691 url(http://png.findicons.com/files/icons/2448/wpzoom_developer/47/quote.png) no-repeat 5% 9%;
}
blockquote:hover {
border:5px solid #008000;
border-radius: 15px;
}

CARA MENGGUNAKANNYA DI BLOG

Ada 2 cara untuk menggunakan Blockquote Elegan ini di postingan blog anda :

Dengan cara manual ( di postingan HTML bukan Compose)

Menggunakan Tombol Blockquote Blog yang telah disediakan pada format Bar di bagian Edit pos.

Semoga bermanfa'at..

Original Source

Cara membuat widget Revolver Map di blog

2013-01-08T01:18:00.001+07:00

Ketika saya blogwalking ke beberapa blog tetangga , di salah satu blog tersebut saya menemukan sesuatu yang unik. Saya melihat ada sebuah widget yang sangat menarik, namanya Revolver Maps. Widget yang menampilkan visitor blog dengan efek 3D dengan tampilan globe yang berputar seperti halnya bumi. Dan saya pun tertarik untuk memasangnya. Karena efek 3D nya tersebut bisa membuat blog terlihat lebih hidup dan cantik. Dan akhirnya timbul keinginan saya untuk share tentang bagaimana Cara membuat dan memasang widget cantik Revolver Map kepada para sobat blogger sekalian.

Ok, langsung kita menuju TKP..

Langkah Pertama:

Masuklah ke situsnya Revolver Maps, klik saja disini Revolver Maps
Kemudian Klik Get Standard Version
Atur Widgetnya sesuai keinginan anda.
Copy kodenya

Langkah ke dua:

Login ke dasbor blog anda
Pilih Rancangan
Pilih elemen laman
Pilih tambah gadget
Pilih edit Html / java script
Kemudin Paste kan kode tadi
Atur di mana anda mau meletakannya
Simpan
Selesai

Selamat mencoba, semoga bermanfaat.