11 Maret 2014

Widget menu navigasi bar 3D adalah salah satu widget yang loadingnya cepat dan dikembangkan pada html dan css tanpa javascript. Widget ini termasuk salah satu widget terbaik untuk para blogger.


Menu navigasi ini memiliki efek 3D ketika Anda mengarahkan kursor mouse ke menu, maka submenu akan muncul seperti buku dan terlihat seperti melayang itulah salahsatu alasan kenapa di beri nama widget menu navigasi bar 3D melayang. Menu navigasi ini dibuat dalam html dan murni menggunakan css dan tidak pernah menggunakan javascript untuk memberikan efek 3D.

  • Loading yang cepat
  • Berbasis html dan css.
  • Tidak menggunakan Javascript.
  • Sangat mengagumkan dan menarik.

Ini adalah salah satu menu navigasi profesional dengan warna biru dan mungkin Anda belum melihat menu navigasi seperti yang indah dan atraktif yang pernah ada sebelumnya. Penulis telah memberikan link demo dari menu ini di mana Anda dapat melihatnya betapa indah dan terkesan profesional

Multi submenu   

Navigasi menu 3D ini memiliki multi-submenu. Ketika Anda mengarahkan kursor mouse ke menu ini maka akan nampak 3 kotak submenu dan tidak hanya satu saja. Silahkan di edit sesuai dengan kebutuhan blog anda. Dan Anda memiliki kendali penuh atas menu navigasi 3D ini. Jadi silahkan ikuti tutorial untuk menginstal widget menu navigasi bar 3D ini ke blog Anda...:)  

Cara menambahkannya di blog

  • Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
  • Kemudian pilih-> Template -> Edit HTML


  • Kemudian cari tag/kode ]]></b:skin> tekan Ctrl + F untuk memudahkan proses pencarian
  • Setelah ketemu letakan kode berikut tepat diatas kode 
    ]]></b:skin> 



  • Simpan template...

Langkah selanjutnya:

  • Masuk ke akun Blogger anda -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript

  • Kemudian kopi dan Pastekan kode di bawah ini didalamnya

<div id="info">
<div class="menuHolder">
<ul class="nav">
<li><a class="top-a" href="#url"><b>Home</b></a></li>
    <li><a class="top-a" href="http://www.avdhootblogger.com"><b>Blogging</b></a>
<div class="col3">
<ul class="colLeft">
<li><a href="http://jalu-pangna.blogspot.com/search/label/tips%20dan%20triks%20blog">tips dan triks blog</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/blog%20tutorial">blog tutorial</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/CSS">CSS</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/jquery-javascript">Jquery javascript</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/widget">widget</a></li>
</ul>
<ul class="col">
<li><a href="http://jalu-pangna.blogspot.com/search/label/animasi">animasi</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/Tips%20SEO">tips seo</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/jejaring%20sosial">jejaring sosial</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/ajax">ajax</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">animasi</a></li>
<li><a href="#url">tips seo</a></li>
<li><a href="#url">jejaring sosial</a></li>
<li><a href="#url">ajax</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>spiritual</b></a>
<div class="col2">
<ul class="colLeft">
<li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20spiritual">wawasan spiritual</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/spiritual">spiritual</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/suluk">suluk</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/sejarah">sejarah</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/babad">babad</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">wawasan spiritual</a></li>
<li><a href="#url">spiritual</a></li>
<li><a href="#url">suluk</a></li>
<li><a href="#url">sejarah</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Contact</b></a>
<div class="col1">
<ul class="colSingle">
<li><a href="http://jalu-pangna.blogspot.com/p/blog-page_1213.html">contact us</a></li>
<li><a href="http://jalu-pangna.blogspot.com/p/about-us.html">about us</a></li>
<li><a href="http://jalu-pangna.blogspot.com/2012/11/daftar-link-otomatis-dengan-mister-linky.html">tukar link</a></li>
<li><a href="http://jalu-pangna.blogspot.com/p/blog-page_15.html">site info</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="http://jalu-pangna.blogspot.com/p/privacy-policy-for-sijalupangna.html"><b>Privacy</b></a></li>
<li><a class="top-a" href="#url"><b>lain-lain</b></a>
<div class="col2 left">
<ul class="colLeft">
<li><a href="#url">tips dan triks blog</a></li>
<li><a href="#url">blog tutorial</a></li>
<li><a href="#url">css</a></li>
<li><a href="#url">jquery javasript</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">widget</a></li>
<li><a href="#url">animasi</a></li>
<li><a href="#url">tips seo</a></li>
<li><a href="#url">jejaring sosial</a></li>
</ul>
</div>
</li>
</ul>
</div>
<br /><br /><br /><br /><br /><br /><br /><br />
</div> <!-- end info -->

  • Simpan Gadget... Selesai.

KET:
Kode yang di sorot warna biru adalah Link/URL, Silahkan anda ganti dengan Link/URL anda. Kode yang di sorot warna orange adalah menu dan sub menu, silahkan anda ganti sesuai dengan keinginan anda

HAPPY BLOGGING..! 

Cara membuat widget menu navigasi bar 3D melayang di blog

Posted at  00.30  |  in  widget  |  Read More»

Widget menu navigasi bar 3D adalah salah satu widget yang loadingnya cepat dan dikembangkan pada html dan css tanpa javascript. Widget ini termasuk salah satu widget terbaik untuk para blogger.


Menu navigasi ini memiliki efek 3D ketika Anda mengarahkan kursor mouse ke menu, maka submenu akan muncul seperti buku dan terlihat seperti melayang itulah salahsatu alasan kenapa di beri nama widget menu navigasi bar 3D melayang. Menu navigasi ini dibuat dalam html dan murni menggunakan css dan tidak pernah menggunakan javascript untuk memberikan efek 3D.

  • Loading yang cepat
  • Berbasis html dan css.
  • Tidak menggunakan Javascript.
  • Sangat mengagumkan dan menarik.

Ini adalah salah satu menu navigasi profesional dengan warna biru dan mungkin Anda belum melihat menu navigasi seperti yang indah dan atraktif yang pernah ada sebelumnya. Penulis telah memberikan link demo dari menu ini di mana Anda dapat melihatnya betapa indah dan terkesan profesional

Multi submenu   

Navigasi menu 3D ini memiliki multi-submenu. Ketika Anda mengarahkan kursor mouse ke menu ini maka akan nampak 3 kotak submenu dan tidak hanya satu saja. Silahkan di edit sesuai dengan kebutuhan blog anda. Dan Anda memiliki kendali penuh atas menu navigasi 3D ini. Jadi silahkan ikuti tutorial untuk menginstal widget menu navigasi bar 3D ini ke blog Anda...:)  

Cara menambahkannya di blog

  • Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
  • Kemudian pilih-> Template -> Edit HTML


  • Kemudian cari tag/kode ]]></b:skin> tekan Ctrl + F untuk memudahkan proses pencarian
  • Setelah ketemu letakan kode berikut tepat diatas kode 
    ]]></b:skin> 



  • Simpan template...

Langkah selanjutnya:

  • Masuk ke akun Blogger anda -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript

  • Kemudian kopi dan Pastekan kode di bawah ini didalamnya

<div id="info">
<div class="menuHolder">
<ul class="nav">
<li><a class="top-a" href="#url"><b>Home</b></a></li>
    <li><a class="top-a" href="http://www.avdhootblogger.com"><b>Blogging</b></a>
<div class="col3">
<ul class="colLeft">
<li><a href="http://jalu-pangna.blogspot.com/search/label/tips%20dan%20triks%20blog">tips dan triks blog</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/blog%20tutorial">blog tutorial</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/CSS">CSS</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/jquery-javascript">Jquery javascript</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/widget">widget</a></li>
</ul>
<ul class="col">
<li><a href="http://jalu-pangna.blogspot.com/search/label/animasi">animasi</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/Tips%20SEO">tips seo</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/jejaring%20sosial">jejaring sosial</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/ajax">ajax</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">animasi</a></li>
<li><a href="#url">tips seo</a></li>
<li><a href="#url">jejaring sosial</a></li>
<li><a href="#url">ajax</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>spiritual</b></a>
<div class="col2">
<ul class="colLeft">
<li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20spiritual">wawasan spiritual</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/spiritual">spiritual</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/suluk">suluk</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/sejarah">sejarah</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/babad">babad</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">wawasan spiritual</a></li>
<li><a href="#url">spiritual</a></li>
<li><a href="#url">suluk</a></li>
<li><a href="#url">sejarah</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Contact</b></a>
<div class="col1">
<ul class="colSingle">
<li><a href="http://jalu-pangna.blogspot.com/p/blog-page_1213.html">contact us</a></li>
<li><a href="http://jalu-pangna.blogspot.com/p/about-us.html">about us</a></li>
<li><a href="http://jalu-pangna.blogspot.com/2012/11/daftar-link-otomatis-dengan-mister-linky.html">tukar link</a></li>
<li><a href="http://jalu-pangna.blogspot.com/p/blog-page_15.html">site info</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="http://jalu-pangna.blogspot.com/p/privacy-policy-for-sijalupangna.html"><b>Privacy</b></a></li>
<li><a class="top-a" href="#url"><b>lain-lain</b></a>
<div class="col2 left">
<ul class="colLeft">
<li><a href="#url">tips dan triks blog</a></li>
<li><a href="#url">blog tutorial</a></li>
<li><a href="#url">css</a></li>
<li><a href="#url">jquery javasript</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">widget</a></li>
<li><a href="#url">animasi</a></li>
<li><a href="#url">tips seo</a></li>
<li><a href="#url">jejaring sosial</a></li>
</ul>
</div>
</li>
</ul>
</div>
<br /><br /><br /><br /><br /><br /><br /><br />
</div> <!-- end info -->

  • Simpan Gadget... Selesai.

KET:
Kode yang di sorot warna biru adalah Link/URL, Silahkan anda ganti dengan Link/URL anda. Kode yang di sorot warna orange adalah menu dan sub menu, silahkan anda ganti sesuai dengan keinginan anda

HAPPY BLOGGING..! 

Written by: jalupangna
Wawasan spiritual dan blogging, Updated at: 00.30

4 Oktober 2013


Hai Sobat blogger..Kita tahu bahwa betapa pentingnya sebuah widget populer posts. Karena meengindikasikan bahwa postingan mana yang paling populer di blog . Umumnya ketika pembaca menyukai sebuah postingan, mereka sering mengunjungi postingan itu. Di popular post widget bawaan (default) blogger kita tidak bisa mengubahnya tetapi dengan menggunakan CSS3 kita dapat dengan mudah memanipulasi widget default tersebut. Akan tetapi widget popular post ini sedikit berbeda, dengan menggunakan isi warna dan efek hover.  

Para bloggger yang ingin tetap menjaga kecepatan loading blog, mereka dapat menggunakan widget ini. Karena widget popular post ini hanya menampilkan link populer post dengan warna serta efek hover. Anda dapat mengubah warnanya sesuai yang anda inginkan. Menggunakan terlalu banyak gambar juga bisa memberatkan kecepatan loading blog anda. Jadi menggunakan widget ini akan menjadi suatu keputusan yang bijak menurut saya. Saya berharap Anda dan pengunjung blog Anda akan menyukainya. 

Jadi silahkan ikuti tutorial untuk menginstal widget popular post ini ke blog Anda...:) 

CARA MENAMBAHKANNYA DI BLOG

  • Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu

  • Klik Tata Letak-> Tambahkan Gadget-> Klik entri populer/populer post  
Catatan: Hapus tanda Thumbnail gambar dan snippet (cuplikan). Karena kita hanya akan menampilkan link popular posts sehingga kita tidak perlu gambar dan intro (pengenalan) teks.

  • Simpan gadget..
  • Selanjutnya masuk lagi ke akun blogger anda
  • Kemudian cari tag/kode ]]></b:skin> 
  • Setelah ketemu letakan kode berikut dibawah ini tepat diatas kode ]]></b:skin>   
/*CSS Popular Posts by http://jalu-pangna.blogspot.com*/
#PopularPosts1{
border: 0px solid #000000; /*Main Border Color */
margin: 0;
}
#PopularPosts1 ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
#PopularPosts1 a{
display: block;
margin: 0;
padding: 3px 5px 3px 5px;
text-decoration: none;
color: #ffffff;
background-color: #005C91;
width:300px;
border-bottom: 1px solid #90bade;
border-left: 5px solid #1958b7;
border-right: 5px solid #1958b7;
list-style-type:none;
}
#PopularPosts1 a:hover {
background-color: #04BDFA;
border-left-color: #1c64d1; /*Left border color On Hover*/
border-right-color: #1c64d1; /*Right border color On Hover*/
  • Simpan template, Selesai..

 KUSTOMISASI

  • Kode # 005C91 untuk mengubah warna latar belakang widget popular post
  • Kode 300px untuk mengubah lebar widget 
  • Kode # 04BDFA untuk mengubah warna hover widget popular post
  • Kode # 1c64d1 untuk mengubah warna kiri dan kanan border
HAPPY BLOGGING.. 

Membuat widget popular post CSS3 dengan efek hover

Posted at  03.09  |  in  widget  |  Read More»


Hai Sobat blogger..Kita tahu bahwa betapa pentingnya sebuah widget populer posts. Karena meengindikasikan bahwa postingan mana yang paling populer di blog . Umumnya ketika pembaca menyukai sebuah postingan, mereka sering mengunjungi postingan itu. Di popular post widget bawaan (default) blogger kita tidak bisa mengubahnya tetapi dengan menggunakan CSS3 kita dapat dengan mudah memanipulasi widget default tersebut. Akan tetapi widget popular post ini sedikit berbeda, dengan menggunakan isi warna dan efek hover.  

Para bloggger yang ingin tetap menjaga kecepatan loading blog, mereka dapat menggunakan widget ini. Karena widget popular post ini hanya menampilkan link populer post dengan warna serta efek hover. Anda dapat mengubah warnanya sesuai yang anda inginkan. Menggunakan terlalu banyak gambar juga bisa memberatkan kecepatan loading blog anda. Jadi menggunakan widget ini akan menjadi suatu keputusan yang bijak menurut saya. Saya berharap Anda dan pengunjung blog Anda akan menyukainya. 

Jadi silahkan ikuti tutorial untuk menginstal widget popular post ini ke blog Anda...:) 

CARA MENAMBAHKANNYA DI BLOG

  • Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu

  • Klik Tata Letak-> Tambahkan Gadget-> Klik entri populer/populer post  
Catatan: Hapus tanda Thumbnail gambar dan snippet (cuplikan). Karena kita hanya akan menampilkan link popular posts sehingga kita tidak perlu gambar dan intro (pengenalan) teks.

  • Simpan gadget..
  • Selanjutnya masuk lagi ke akun blogger anda
  • Kemudian cari tag/kode ]]></b:skin> 
  • Setelah ketemu letakan kode berikut dibawah ini tepat diatas kode ]]></b:skin>   
/*CSS Popular Posts by http://jalu-pangna.blogspot.com*/
#PopularPosts1{
border: 0px solid #000000; /*Main Border Color */
margin: 0;
}
#PopularPosts1 ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}
#PopularPosts1 a{
display: block;
margin: 0;
padding: 3px 5px 3px 5px;
text-decoration: none;
color: #ffffff;
background-color: #005C91;
width:300px;
border-bottom: 1px solid #90bade;
border-left: 5px solid #1958b7;
border-right: 5px solid #1958b7;
list-style-type:none;
}
#PopularPosts1 a:hover {
background-color: #04BDFA;
border-left-color: #1c64d1; /*Left border color On Hover*/
border-right-color: #1c64d1; /*Right border color On Hover*/
  • Simpan template, Selesai..

 KUSTOMISASI

  • Kode # 005C91 untuk mengubah warna latar belakang widget popular post
  • Kode 300px untuk mengubah lebar widget 
  • Kode # 04BDFA untuk mengubah warna hover widget popular post
  • Kode # 1c64d1 untuk mengubah warna kiri dan kanan border
HAPPY BLOGGING.. 

Written by: jalupangna
Wawasan spiritual dan blogging, Updated at: 03.09

28 September 2013


Tanpa diragukan lagi, tekhnologi responsif semakin lama semakin populer. Hal ini memungkinkan kita untuk menghemat waktu ketika kita mengembangkan desain yang dimaksud untuk digunakan pada berbagai perangkat: dari perangkat mobile (hand phone) sampai ke komputer layar lebar. Tidak perlu untuk mengembangkan versi khusus dari situs untuk setiap format (perangkat).  

Pada kesempatan kali ini saya akan share lagi ke anda tentang membuat menu responsif baru yang terlihat seperti menu facebook. Untuk membuat menu ini, kita tidak perlu javascript, semuanya diimplementasikan hanya menggunakan CSS3 (untuk IE7-IE10, Firefox, Opera, Safari, Chrome dan iPad / iPod / iPhone).




KODE HTML
<ul id="nav">
    <li><a href="#">Home</a></li>
    <li class="subs"><a href="#s1">Menu 1</a>
        <ul>
            <li><a href="#">Submenu A</a></li>
            <li><a href="#">Submenu B</a></li>
            <li><a href="#">Submenu C</a></li>
            <li><a href="#">Submenu D</a></li>
        </ul>
    </li>
    <li class="subs"><a href="#s2">Menu 2</a>
        <ul>
            <li><a href="#">Submenu E</a></li>
            <li><a href="#">Submenu F</a></li>
            <li><a href="#">Submenu G</a></li>
            <li><a href="#">Submenu H</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="http://jalu-pangna.blogspot.com/2013/09/cara-membuat-menu-responsif-seperti.html">Kembali ke tutorial</a></li>
</ul>

LANGKAH-LANGKAHNYA :
  • Masuk ke akun Blogger anda -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript

  • Pastekan kode di atas didalamnya
  • Simpan Gadget...  
Silahkan ganti tanda # dengan URL/Link anda, nama Menu dan Submenu yang anda inginkan

KODE CSS


LANGKAH SELANJUTNYA :
  • Cari tag/kode ]]></b:skin> tekan CTRL+F untuk memudahkan dalam pencarian 
  • Silahkan kopi dan Pastekan kode CSS di atas, tepat diatas tag ]]></b:skin> 
  • Simpan template...Selesai
 HAPPY BLOGGING..!

Cara membuat menu responsif seperti facebook di blog

Posted at  02.58  |  in  tips dan triks blog  |  Read More»


Tanpa diragukan lagi, tekhnologi responsif semakin lama semakin populer. Hal ini memungkinkan kita untuk menghemat waktu ketika kita mengembangkan desain yang dimaksud untuk digunakan pada berbagai perangkat: dari perangkat mobile (hand phone) sampai ke komputer layar lebar. Tidak perlu untuk mengembangkan versi khusus dari situs untuk setiap format (perangkat).  

Pada kesempatan kali ini saya akan share lagi ke anda tentang membuat menu responsif baru yang terlihat seperti menu facebook. Untuk membuat menu ini, kita tidak perlu javascript, semuanya diimplementasikan hanya menggunakan CSS3 (untuk IE7-IE10, Firefox, Opera, Safari, Chrome dan iPad / iPod / iPhone).




KODE HTML
<ul id="nav">
    <li><a href="#">Home</a></li>
    <li class="subs"><a href="#s1">Menu 1</a>
        <ul>
            <li><a href="#">Submenu A</a></li>
            <li><a href="#">Submenu B</a></li>
            <li><a href="#">Submenu C</a></li>
            <li><a href="#">Submenu D</a></li>
        </ul>
    </li>
    <li class="subs"><a href="#s2">Menu 2</a>
        <ul>
            <li><a href="#">Submenu E</a></li>
            <li><a href="#">Submenu F</a></li>
            <li><a href="#">Submenu G</a></li>
            <li><a href="#">Submenu H</a></li>
        </ul>
    </li>
    <li><a href="#">Menu 3</a></li>
    <li><a href="#">Menu 4</a></li>
    <li><a href="http://jalu-pangna.blogspot.com/2013/09/cara-membuat-menu-responsif-seperti.html">Kembali ke tutorial</a></li>
</ul>

LANGKAH-LANGKAHNYA :
  • Masuk ke akun Blogger anda -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript

  • Pastekan kode di atas didalamnya
  • Simpan Gadget...  
Silahkan ganti tanda # dengan URL/Link anda, nama Menu dan Submenu yang anda inginkan

KODE CSS


LANGKAH SELANJUTNYA :
  • Cari tag/kode ]]></b:skin> tekan CTRL+F untuk memudahkan dalam pencarian 
  • Silahkan kopi dan Pastekan kode CSS di atas, tepat diatas tag ]]></b:skin> 
  • Simpan template...Selesai
 HAPPY BLOGGING..!

Written by: jalupangna
Wawasan spiritual dan blogging, Updated at: 02.58

27 September 2013


Postingan kali ini adalah permintaan sobat blogger mengenai blockquote yang pernah saya pakai. Blockquote yang pernah saya pakai adalah blockquote dengan tampilan menggunakan background warna gradient dan merupakan salah satu pilihan diantara tampilan-tampilan blockquote yang ada. Blockquote ini ada 2 pilihan, silahkan pilih mana yang anda suka. Live demo bisa anda lihat pada gambar diatas.

Blockquote menggunakan CSS gradient pilihan 1




KODE CSS
blockquote {
  background: -moz-linear-gradient(left,  #f7ea00 2%, #00c10c 10%, #0072ff 43%, #ff0000 81%, #e000e0 96%);
  background: -webkit-gradient(linear, left top, right top, color-stop(2%,#f7ea00), color-stop(10%,#00c10c), color-stop(43%,#0072ff), color-stop(81%,#ff0000), color-stop(96%,#e000e0));
  background: -webkit-linear-gradient(left,  #f7ea00 2%,#00c10c 10%,#0072ff 43%,#ff0000 81%,#e000e0 96%);
  background: -o-linear-gradient(left,  #f7ea00 2%,#00c10c 10%,#0072ff 43%,#ff0000 81%,#e000e0 96%);
  background: -ms-linear-gradient(left,  #f7ea00 2%,#00c10c 10%,#0072ff 43%,#ff0000 81%,#e000e0 96%);
  background: linear-gradient(to right,  #f7ea00 2%,#00c10c 10%,#0072ff 43%,#ff0000 81%,#e000e0 96%);
  background-color:#F1FDFE;
  background-repeat:no-repeat;
  background-size:100% 5px;
  font-size:16px;
  line-height:1.4;
  margin:10px auto;
  padding:10px;
  width:90%;
}

Blockquote menggunakan CSS gradient pilihan2




KODE CSS  
blockquote {
  background: -moz-linear-gradient(left,  #f4f466 10%, #26c14a 10%, #26c14a 20%, #7db9e8 20%, #7db9e8 30%, #ff0000 30%, #ff0000 40%, #0029e0 40%, #0029e0 50%, #ad9000 50%, #ad9000 60%, #eacf00 60%, #eacf00 70%, #e000e0 70%, #e000e0 80%, #db006d 80%, #db006d 90%, #aad100 90%);
  background: -webkit-gradient(linear, left top, right top, color-stop(10%,#f4f466), color-stop(10%,#26c14a), color-stop(20%,#26c14a), color-stop(20%,#7db9e8), color-stop(30%,#7db9e8), color-stop(30%,#ff0000), color-stop(40%,#ff0000), color-stop(40%,#0029e0), color-stop(50%,#0029e0), color-stop(50%,#ad9000), color-stop(60%,#ad9000), color-stop(60%,#eacf00), color-stop(70%,#eacf00), color-stop(70%,#e000e0), color-stop(80%,#e000e0), color-stop(80%,#db006d), color-stop(90%,#db006d), color-stop(90%,#aad100));
  background: -webkit-linear-gradient(left,  #f4f466 10%,#26c14a 10%,#26c14a 20%,#7db9e8 20%,#7db9e8 30%,#ff0000 30%,#ff0000 40%,#0029e0 40%,#0029e0 50%,#ad9000 50%,#ad9000 60%,#eacf00 60%,#eacf00 70%,#e000e0 70%,#e000e0 80%,#db006d 80%,#db006d 90%,#aad100 90%);
  background: -o-linear-gradient(left,  #f4f466 10%,#26c14a 10%,#26c14a 20%,#7db9e8 20%,#7db9e8 30%,#ff0000 30%,#ff0000 40%,#0029e0 40%,#0029e0 50%,#ad9000 50%,#ad9000 60%,#eacf00 60%,#eacf00 70%,#e000e0 70%,#e000e0 80%,#db006d 80%,#db006d 90%,#aad100 90%);
  background: -ms-linear-gradient(left,  #f4f466 10%,#26c14a 10%,#26c14a 20%,#7db9e8 20%,#7db9e8 30%,#ff0000 30%,#ff0000 40%,#0029e0 40%,#0029e0 50%,#ad9000 50%,#ad9000 60%,#eacf00 60%,#eacf00 70%,#e000e0 70%,#e000e0 80%,#db006d 80%,#db006d 90%,#aad100 90%);
  background: linear-gradient(to right,  #f4f466 10%,#26c14a 10%,#26c14a 20%,#7db9e8 20%,#7db9e8 30%,#ff0000 30%,#ff0000 40%,#0029e0 40%,#0029e0 50%,#ad9000 50%,#ad9000 60%,#eacf00 60%,#eacf00 70%,#e000e0 70%,#e000e0 80%,#db006d 80%,#db006d 90%,#aad100 90%);
  background-color:#F1FDFE;
  background-repeat:no-repeat;
  background-size:100% 5px;
  font-size:16px;
  line-height:1.4;
  margin:10px auto;
  padding:10px;
  width:90%;
}
 
CARA MENAMBAHKANNYA DI BLOG
  • Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
  • Kemudian pilih -> Template-> Edit HTML 
  • Cari tag/kode ]]></b:skin> tekan  CTRL+F untuk memudahkan proses pencarian
  • Berikutnya kopi dan pastekan salah satu kode CSS diatas tepat diatas kode  ]]></b:skin>  

KUSTOMISASI

Ada 2 cara untuk menggunakan Blockquote CSS gradient  ini di postingan blog anda :
  • Dengan cara manual ( di postingan HTML bukan Compose)
<blockquote>isi teks</blockquote>
  • Menggunakan Tombol Blockquote Blog yang telah disediakan pada format Bar di bagian Edit pos (klik gambar untuk memperbesar) 

 


Semoga bermanfa'at...

Cara membuat blockquote menggunakan CSS gradient di blog

Posted at  04.17  |  in  tips dan triks blog  |  Read More»


Postingan kali ini adalah permintaan sobat blogger mengenai blockquote yang pernah saya pakai. Blockquote yang pernah saya pakai adalah blockquote dengan tampilan menggunakan background warna gradient dan merupakan salah satu pilihan diantara tampilan-tampilan blockquote yang ada. Blockquote ini ada 2 pilihan, silahkan pilih mana yang anda suka. Live demo bisa anda lihat pada gambar diatas.

Blockquote menggunakan CSS gradient pilihan 1




KODE CSS
blockquote {
  background: -moz-linear-gradient(left,  #f7ea00 2%, #00c10c 10%, #0072ff 43%, #ff0000 81%, #e000e0 96%);
  background: -webkit-gradient(linear, left top, right top, color-stop(2%,#f7ea00), color-stop(10%,#00c10c), color-stop(43%,#0072ff), color-stop(81%,#ff0000), color-stop(96%,#e000e0));
  background: -webkit-linear-gradient(left,  #f7ea00 2%,#00c10c 10%,#0072ff 43%,#ff0000 81%,#e000e0 96%);
  background: -o-linear-gradient(left,  #f7ea00 2%,#00c10c 10%,#0072ff 43%,#ff0000 81%,#e000e0 96%);
  background: -ms-linear-gradient(left,  #f7ea00 2%,#00c10c 10%,#0072ff 43%,#ff0000 81%,#e000e0 96%);
  background: linear-gradient(to right,  #f7ea00 2%,#00c10c 10%,#0072ff 43%,#ff0000 81%,#e000e0 96%);
  background-color:#F1FDFE;
  background-repeat:no-repeat;
  background-size:100% 5px;
  font-size:16px;
  line-height:1.4;
  margin:10px auto;
  padding:10px;
  width:90%;
}

Blockquote menggunakan CSS gradient pilihan2




KODE CSS  
blockquote {
  background: -moz-linear-gradient(left,  #f4f466 10%, #26c14a 10%, #26c14a 20%, #7db9e8 20%, #7db9e8 30%, #ff0000 30%, #ff0000 40%, #0029e0 40%, #0029e0 50%, #ad9000 50%, #ad9000 60%, #eacf00 60%, #eacf00 70%, #e000e0 70%, #e000e0 80%, #db006d 80%, #db006d 90%, #aad100 90%);
  background: -webkit-gradient(linear, left top, right top, color-stop(10%,#f4f466), color-stop(10%,#26c14a), color-stop(20%,#26c14a), color-stop(20%,#7db9e8), color-stop(30%,#7db9e8), color-stop(30%,#ff0000), color-stop(40%,#ff0000), color-stop(40%,#0029e0), color-stop(50%,#0029e0), color-stop(50%,#ad9000), color-stop(60%,#ad9000), color-stop(60%,#eacf00), color-stop(70%,#eacf00), color-stop(70%,#e000e0), color-stop(80%,#e000e0), color-stop(80%,#db006d), color-stop(90%,#db006d), color-stop(90%,#aad100));
  background: -webkit-linear-gradient(left,  #f4f466 10%,#26c14a 10%,#26c14a 20%,#7db9e8 20%,#7db9e8 30%,#ff0000 30%,#ff0000 40%,#0029e0 40%,#0029e0 50%,#ad9000 50%,#ad9000 60%,#eacf00 60%,#eacf00 70%,#e000e0 70%,#e000e0 80%,#db006d 80%,#db006d 90%,#aad100 90%);
  background: -o-linear-gradient(left,  #f4f466 10%,#26c14a 10%,#26c14a 20%,#7db9e8 20%,#7db9e8 30%,#ff0000 30%,#ff0000 40%,#0029e0 40%,#0029e0 50%,#ad9000 50%,#ad9000 60%,#eacf00 60%,#eacf00 70%,#e000e0 70%,#e000e0 80%,#db006d 80%,#db006d 90%,#aad100 90%);
  background: -ms-linear-gradient(left,  #f4f466 10%,#26c14a 10%,#26c14a 20%,#7db9e8 20%,#7db9e8 30%,#ff0000 30%,#ff0000 40%,#0029e0 40%,#0029e0 50%,#ad9000 50%,#ad9000 60%,#eacf00 60%,#eacf00 70%,#e000e0 70%,#e000e0 80%,#db006d 80%,#db006d 90%,#aad100 90%);
  background: linear-gradient(to right,  #f4f466 10%,#26c14a 10%,#26c14a 20%,#7db9e8 20%,#7db9e8 30%,#ff0000 30%,#ff0000 40%,#0029e0 40%,#0029e0 50%,#ad9000 50%,#ad9000 60%,#eacf00 60%,#eacf00 70%,#e000e0 70%,#e000e0 80%,#db006d 80%,#db006d 90%,#aad100 90%);
  background-color:#F1FDFE;
  background-repeat:no-repeat;
  background-size:100% 5px;
  font-size:16px;
  line-height:1.4;
  margin:10px auto;
  padding:10px;
  width:90%;
}
 
CARA MENAMBAHKANNYA DI BLOG
  • Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
  • Kemudian pilih -> Template-> Edit HTML 
  • Cari tag/kode ]]></b:skin> tekan  CTRL+F untuk memudahkan proses pencarian
  • Berikutnya kopi dan pastekan salah satu kode CSS diatas tepat diatas kode  ]]></b:skin>  

KUSTOMISASI

Ada 2 cara untuk menggunakan Blockquote CSS gradient  ini di postingan blog anda :
  • Dengan cara manual ( di postingan HTML bukan Compose)
<blockquote>isi teks</blockquote>
  • Menggunakan Tombol Blockquote Blog yang telah disediakan pada format Bar di bagian Edit pos (klik gambar untuk memperbesar) 

 


Semoga bermanfa'at...

Written by: jalupangna
Wawasan spiritual dan blogging, Updated at: 04.17

7 Juli 2013


Dalam tutorial kali ini saya akan menjelaskan ke anda bagaimana cara membuat widget populer post dengan sudut bundar menggunakan CSS3. Widget ini berfungsi dengan baik disetiap browser yang anda gunakan. Widget ini menggunakan CSS3 untuk memberikan efek sudut bundar pada setiap postingan populer blog anda. Silahkan ikuti langkah-langkahnya dibawah ini untuk menambahkannya di blog anda, berharap anda menyukainya...:)  
Demonya bisa anda lihat pada gambar diatas.. 

Bagaimana cara menambahkannya di blog?

  • Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
  • Kemudian pilih-> Template -> Edit HTML
  • Kemudian cari tag/kode ]]></b:skin> 
  • Setelah ketemu letakan kode berikut dibawah ini tepat diatas kode ]]></b:skin> 
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px;
list-style-type: none;padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
height: 40px;
-moz-box-shadow: 3px 2px 5px #242424;
-webkit-box-shadow: 3px 2px 5px #242424;
box-shadow: 3px 2px 5px #242424;margin-bottom: 5px;height: 40px;
}
.popular-posts ul li a {
font-style: italic;
}
.popular-posts ul li:hover {
border:1px solid #d10202;
 -moz-box-shadow: 3px 2px 5px #d10202;
-webkit-box-shadow: 3px 2px 5px #d10202;
box-shadow: 3px 2px 5px #d10202;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
height:40px;width:40px;
webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.popular-posts .item-thumbnail img:hover{
-moz-box-shadow: 0px 0px 5px #d10202;
-webkit-box-shadow: 0px 0px 5px #d10202;
box-shadow: 0px 0px 5px #d10202;} 
  • Simpan template...
  • Selanjutnya masuk lagi ke akun blogger anda
  • Klik Tata Letak-> Tambahkan Gadget-> Klik entri populer/populer post

  • Sekarang konfigurasikan/setting entri populer anda seperti gambar di bawah ini:

Jangan centang pada cuplikan/snippet seperti gambar diatas, setingan jumlah postingan bisa anda atur sendiri

  • Simpan gadget, selesai..
Semoga bermanfa'at...

Cara membuat widget populer post dengan sudut bundar menggunakan CSS3

Posted at  13.30  |  in  widget  |  Read More»


Dalam tutorial kali ini saya akan menjelaskan ke anda bagaimana cara membuat widget populer post dengan sudut bundar menggunakan CSS3. Widget ini berfungsi dengan baik disetiap browser yang anda gunakan. Widget ini menggunakan CSS3 untuk memberikan efek sudut bundar pada setiap postingan populer blog anda. Silahkan ikuti langkah-langkahnya dibawah ini untuk menambahkannya di blog anda, berharap anda menyukainya...:)  
Demonya bisa anda lihat pada gambar diatas.. 

Bagaimana cara menambahkannya di blog?

  • Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
  • Kemudian pilih-> Template -> Edit HTML
  • Kemudian cari tag/kode ]]></b:skin> 
  • Setelah ketemu letakan kode berikut dibawah ini tepat diatas kode ]]></b:skin> 
.popular-posts ul{padding-left:0px;}
.popular-posts ul li {background: #FFF url() no-repeat scroll 5px 10px;
list-style-type: none;padding:5px 5px 5px 20px !important;
border: 1px solid #ddd;border-radius:30px;
-moz-border-radius:30px;
-webkit-border-radius:30px;
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
height: 40px;
-moz-box-shadow: 3px 2px 5px #242424;
-webkit-box-shadow: 3px 2px 5px #242424;
box-shadow: 3px 2px 5px #242424;margin-bottom: 5px;height: 40px;
}
.popular-posts ul li a {
font-style: italic;
}
.popular-posts ul li:hover {
border:1px solid #d10202;
 -moz-box-shadow: 3px 2px 5px #d10202;
-webkit-box-shadow: 3px 2px 5px #d10202;
box-shadow: 3px 2px 5px #d10202;
}
.popular-posts ul
li a:hover {
text-decoration:none;
}
.popular-posts .item-thumbnail img {
height:40px;width:40px;
webkit-border-radius: 100px;-moz-border-radius: 100px;border-radius: 100px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.popular-posts .item-thumbnail img:hover{
-moz-box-shadow: 0px 0px 5px #d10202;
-webkit-box-shadow: 0px 0px 5px #d10202;
box-shadow: 0px 0px 5px #d10202;} 
  • Simpan template...
  • Selanjutnya masuk lagi ke akun blogger anda
  • Klik Tata Letak-> Tambahkan Gadget-> Klik entri populer/populer post

  • Sekarang konfigurasikan/setting entri populer anda seperti gambar di bawah ini:

Jangan centang pada cuplikan/snippet seperti gambar diatas, setingan jumlah postingan bisa anda atur sendiri

  • Simpan gadget, selesai..
Semoga bermanfa'at...

Written by: jalupangna
Wawasan spiritual dan blogging, Updated at: 13.30
About Us-Privacy Policy-Contact us
Copyright © 2013 Wawasan spiritual dan blogging. Blogger Template by BloggerTheme9
Proudly Powered by Blogger.
back to top