Wawasan spiritual dan blogging

Cara membuat widget menu navigasi bar 3D melayang di blog

noreply@blogger.com (jalupangna) — Mon, 10 Mar 2014 17:30:00 +0000

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.

View Demo

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.

Kualitas Menu Navigasi ini diantaranya:

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>

.menuHolder {margin:25px 0 100px 0; text-align:center; position:relative; height:40px; z-index:20; background:#069;
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
border-radius:8px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-moz-perspective: 100px;
-webkit-perspective: 100px;
-o-perspective: 100px;
perspective: 100px;
}
.menuHolder ul.nav li {display:inline-block; display:inline;}
.menuHolder ul.nav {padding:0; margin:0; list-style:none; display:inline-block;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.menuHolder ul.nav li {float:left; display:block; padding:0 4px;}
.menuHolder ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;}
.menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;}
.menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;}
.menuHolder ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0;
border-radius:0 0 15px 15px;
box-shadow:0 15px 10px -8px rgba(0,0,0,0.4);
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
-moz-transform-origin: 0px 0px;
-moz-transform: rotateX(-90deg);
-webkit-transform-origin: 0px 0px;
-webkit-transform: rotateX(-90deg);
-o-transform-origin: 0px 0px;
-o-transform: rotateX(-90deg);
transform-origin: 0px 0px;
transform: rotateX(-90deg);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.menuHolder ul.nav div.left {left:auto; right:4px;}
.menuHolder ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px;
-moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4);
}
.menuHolder ul.nav div ul.colLeft {margin-left:10px;}
.menuHolder ul.nav div ul.colRight {margin-right:10px;}
.menuHolder ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;}
.menuHolder ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;}
.menuHolder ul.nav div ul li:last-child {border:0;}
.menuHolder ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(droplistcolumns/arrow.gif) no-repeat left center;}
.menuHolder ul.nav div ul li a:hover {color:#09c; background:transparent url(droplistcolumns/arrow.gif) no-repeat 1px center;}
.menuHolder ul.nav div.col1 {width:160px;}
.menuHolder ul.nav div.col2 {width:310px;}
.menuHolder ul.nav div.col3 {width:460px;}
.menuHolder ul.nav li:hover div {
-moz-transform: rotateX(0deg);
-webkit-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}

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>

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..!

Membuat widget popular post CSS3 dengan efek hover

noreply@blogger.com (jalupangna) — Thu, 03 Oct 2013 20:09:00 +0000

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..

Cara membuat menu responsif seperti facebook di blog

noreply@blogger.com (jalupangna) — Fri, 27 Sep 2013 19:58:00 +0000

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).

View Demo

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

* {
    margin: 0;
    padding: 0;
}
html {
    background-color: #E9EAED;
    height: 100%;
}
body {
    color: #333333;
    font-family: 'Helvetica Neue',Helvetica,Arial,'lucida grande',tahoma,verdana,arial,sans-serif;
}

/* other elements */
#nav_v2 {
    display: none;
}
/* top level elements */
#nav, #nav ul {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
#nav {
    background-color: rgb(78,105,162);
    background: -moz-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(78,105,162,1)), color-stop(100%, rgba(59,88,152,1)));
    background: -webkit-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
    background: -o-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
    background: -ms-linear-gradient(top, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);
    background: linear-gradient(to bottom, rgba(78,105,162,1) 0%, rgba(59,88,152,1) 100%);

border-bottom: 1px solid #3A4B7B;
    height: 22px;
    padding: 10px 0 10px 5px;
    position: relative;
}
#nav > li {
    float: left;
    height: 22px;
    padding-right: 6px;
    position: relative;
    text-align: left;
}
#nav > li > a {
    border: 1px solid transparent;
    color: #FFFFFF;
    display: block;
    font-size: 12px;
    font-weight: bold;
    height: 27px;
    line-height: 27px;
    margin: -3px 0 0 -1px;
    padding: 0 1px 0 11px;
    text-decoration: none;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
}
#nav > li:hover > a, #nav > a:hover {
    background-color: #425691;
    border-radius: 2px 2px 2px 2px;
    color: #FFFFFF;
    margin-right: -8px;
    padding: 0 9px 0 11px;
    position: relative;
    z-index: 1;
}
#nav > li.subs:hover > a {
    background-color: #FFFFFF;
    border: 1px solid rgba(100, 100, 100, 0.4);
    border-bottom-width: 0;
    border-radius: 2px 2px 0 0;
    color: #000000;
    text-shadow: 0 0 transparent;
    z-index: 2;
}
/* top items separator */
#nav > li:after {
    background-color: #405791;
    content: "";
    height: 17px;
    left: 1px;
    position: absolute;
    top: 2px;
    width: 1px;
}
#nav > li:first-child:after {
    background-color: transparent;
}
/* submenu */
#nav ul {
    background-color: #FFFFFF;
    border: 1px solid rgba(100, 100, 100, 0.4);
    *border: 1px solid rgb(100, 100, 100);
    border-radius: 0 0 3px 3px;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.25);
    display: none;
    left: -1px;
    margin-top: 2px;
    min-width: 200px;
    padding: 6px 0;
    position: absolute;
    top: 100%;
    z-index: 1;
}
#nav li:hover ul {
    display: block;
}
#nav ul li a {
    border-bottom: 1px solid transparent;
    border-top: 1px solid transparent;
    color: #232B37;
    display: block;
    font-size: 12px;
    line-height: 20px;
    padding: 0 22px;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#nav ul li a:hover {
    background-color: #6D84B4;
    border-bottom: 1px solid #3B5998;
    border-top: 1px solid #3B5998;
    color: #FFFFFF;
}

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 blockquote menggunakan CSS gradient di blog

noreply@blogger.com (jalupangna) — Thu, 26 Sep 2013 21:17:00 +0000

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 widget populer post dengan sudut bundar menggunakan CSS3

noreply@blogger.com (jalupangna) — Sun, 07 Jul 2013 06:30:00 +0000

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...

Bagaimana cara membuat gambar dengan efek berputar di blog

noreply@blogger.com (jalupangna) — Thu, 04 Jul 2013 08:02:00 +0000

Dengan menambahkan beberapa efek style pada blog bisa membuat para visitor blog anda akan lebih tertarik. Hari ini saya akan share dan mempublikasikan ke anda bagaimana cara membuat gambar dengan efek berputar di blog. Trik ini singkat dan simple, menambahkannya pun cukup mudah. Tinggal anda mengikuti langkah-langkahnya berikut di bawah ini.

LIVE DEMO dibawah (arahkan krusor anda ke gambar)

LANGKAH-LANGKAHNYA:

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 tepat diatas kode ]]></b:skin>

.spinningeffect img {
/* membuat efek gambar berputar by jalu-pangna.blogspot.com*/
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.spinningeffect img:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

Angka yang di sorot warna kuning adalah kecepatan waktu yang di butuhkan (time taken) proses berputarnya gambar.
Angka yang di sorot warna biru adalah jumlah derajat berputarnya gambar, anda bisa menggantinya sesuai dengan selera anda.

Bagaimana cara menggunakannya pada gambar?

Masuk ke akun blogger anda
Kemudian pilih Post -> klik Entri Baru
Anda akan melihat kotak kosong, kemudian klik HTML pada postingan baru anda (bukan compose) pada sisi kiri atas.
kopi dan pastekan kode berikut di dalamnya (kotak kosong) dimana anda ingin menampilkan gambar dengan efek berputar.

<a class="spinningeffect" href="URL/Link Gambar" target="_blank">
<img src="URL/Link gambar" /></a>

Silahkan anda ganti URL/Link Gambar dengan URL/Link gambar anda.

HAPPY BLOGGING..!

Cara membuat badge baru pada postingan terbaru di blog

noreply@blogger.com (jalupangna) — Mon, 01 Jul 2013 05:46:00 +0000

Hari ini kita akan belajar bagaimana cara membuat badge baru pada postingan terbaru di homepage blog. Fitur yang satu ini cukup indah dan menarik. Diantara Anda mungkin pernah melihat di blog-blog tetangga menggunakan pita baru pada postingan terbaru blog mereka. Dan pada kesempatan kali ini saya akan share ke anda bagaimana menambahkan badge (lencana) baru pada setiap postingan terbaru. Trik yang satu ini benar-benar bagus dan menakjubkan, berharap anda menyukainya dan menerapkannya di homepage blog anda. Jangan lupa backup terlebih dahulu template...

Langkah dan penerapannya 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 tepat diatas kode ]]></b:skin>

.wrapperwha12
{
margin: 50px auto;
width: auto;
height: auto;
background: transparent;
position: relative;
}
.ribbonwha123
{
font: bold 20px Sans-Serif;
text-align: center;
transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
position: relative;
padding: 7px 0;
left: -25px;
top: 7px;
width: 160px;
background-image: linear-gradient(top, #129, #12f);
background-image: -o-linear-gradient(top, #129, #12f);
background-image: -ms-linear-gradient(top, #129, #12f);
background-image: -moz-linear-gradient(top, #129, #12f);
background-image: -webkit-linear-gradient(top, #129, #12f);
color: #fff;
-o-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbonwha-wrapper12
{
width: 86px;
height: 88px;
overflow: hidden;
position: absolute;
top: -4px;
right: -4px;
}

Sekarang cari lagi kode <b:include data='post' name='post'/> dan ganti kode tersebut dengan kode berikut:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost == "true"'>
<div class='wrapperwha12'>
<div class='ribbonwha-wrapper12'><div class='ribbonwha123'>NEW</div></div>
<div id='first-post'>
<b:include data='post' name='post'/>
</div></div>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Simpan template...selesai.

Cara membuat ikon jejaring sosial mengagumkan dengan efek pop out di blog

noreply@blogger.com (jalupangna) — Thu, 27 Jun 2013 23:24:00 +0000

Pada kesempatan kali ini saya ingin share lagi ke anda tentang cara membuat ikon jejaring sosial mengagumkan dengan efek pop out yang di buat murni menggunakan CSS. Ikon-ikon ini di desain sedemikian rupa menyerupai permen (candy) yang akan menarik perhatian para visitor blog anda dan cara menambahkannya pun cukup mudah. Ikon-ikon ini bisa anda tambahkan pada sidebar blog untuk membiarkan para visitor atau pembaca mengikuti di jejaring sosial favorit anda, ikon-ikonnya antara lain Rss Feed, Email, Facebook, Twitter, Google+ dan youtube.

LIVE DEMO (arahkan krusor anda ke ikon di bawah ini)

LANGKAH-LANGKAHNYA:

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

Kemudian pilih->Tata letak->Tambahkan gadget-> HTML/Javascript

Kemudian kopi dan pastekan kode berikut didalamnya:

<a class="spice-popout" rel="nofollow" href="http://jalu-pangna.blogspot.com/feeds/posts/default?alt=rss" target="_blank"><img src="http://i.imgur.com/7lsUogp.png" /></a>

<a class="spice-popout" rel="nofollow" href="http://feedburner.google.com/fb/a/mailverify?uri=jalu-pangna&loc=en_US" target="_blank"><img src="http://i.imgur.com/oJeNikj.png" /></a>

<a class="spice-popout" rel="nofollow" href="http://plus.google.com/u/0/103806695606848957210" target="_blank"><img src="http://i.imgur.com/F70aY6r.png" /></a>

<a class="spice-popout" rel="nofollow" href="https://www.facebook.com/pages/Eyang-anom/427305383989192" target="_blank"> <img src="http://i.imgur.com/g4KQ38R.png" /></a>

<a class="spice-popout" rel="nofollow" href="http://www.twitter.com/sijalupangna" target="_blank"> <img src="http://i.imgur.com/rRbcRlQ.png" /></a>

<a class="spice-popout" rel="nofollow" href="http://www.youtube.com/sijalupangna" target="_blank"><img src="http://i.imgur.com/OukhzWK.png" /></a>
<style>
.spice-popout{height:48px; width:48px; margin:10px; float:left; display:inline-block; -webkit-transition:all ease 0.5s; -moz-transition:all ease 0.5s; -o-transition:all ease 0.5s; -ms-transition:all ease 0.5s; transition:all ease 0.5s}
.spice-popout img{border-radius:50%; margin:8px; width:100%; box-shadow:0px 0px 4px 1px rgba(0,0,0,0.8); -webkit-transition:all ease 0.5s; -moz-transition:all ease 0.5s; -o-transition:all ease 0.5s; -ms-transition:all ease 0.5s; transition:all ease 0.5s}
.spice-popout img:hover{margin:0px; box-shadow:6px 6px 4px 4px rgba(0,0,0,0.3)}
</style>

Simpan gadget..selesai

KUSTOMISASI

Silahkan anda ganti Link/URL yang disorot warna kuning dengan Link/URL anda

Happy blogging..!

Cara membuat 4 style widget iklan di blog

noreply@blogger.com (jalupangna) — Mon, 24 Jun 2013 21:37:00 +0000

Pada postingan kali ini saya akan share lagi ke anda tentang cara membuat 4 style widget iklan di blog. Widget ini memiliki efek CSS yang keren dan lebih atraktif. Dengan style widget iklan ini membuat blog anda akan terlihat lebih keren dan tidak ada pengaruhnya sama sekali terhadap loading blog. Widget iklan ini cukup mengagumkan dan untuk menambahkannya di blog cukup mudah.

Langkah-langkahnya:

Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
Kemudian pilih->Tata letak->Tambahkan gadget-> HTML/Javascript

Kemudian kopi dan pastekan kode berikut didalamnya:

Style 1

<style id="TechBlogGuide_css" type="text/css">
div.TechBlogGuide_1263441{width:100%;display:block}div.TechBlogGuide_1263441 a{width:468px}div.TechBlogGuide_1263441 a img{padding:0}div.TechBlogGuide_1263441 a em{font-style:normal}div.TechBlogGuide_1263441 a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0 4px 10px 0;text-align:center;text-decoration:none;overflow:hidden;float:left;}div.TechBlogGuide_1263441 img{border:0;clear:right;}div.TechBlogGuide_1263441 a.adhere{color:#666;font-weight:bold;font-size:12px;border:1px solid #ccc;background:#e7e7e7;text-align:center;}div.TechBlogGuide_1263441 a.adhere:hover{border:1px solid #999;background:#ddd;color:#333;}div.TechBlogGuide_1263441 a{line-height:100%}div.TechBlogGuide_1263441 a.adhere{width:468px;height:60px;line-height:480%}
</style>
<div class="widget-content">

<div id="TechBlogGuide_1263441" class="TechBlogGuide_1263441 TechBlogGuide"><a title="Advertise Here" href="http://jalu-pangna.blogspot.com/" class="adhere ad1 odd" target="_blank">Advertise Here</a></div>

</div>

Style 2

<style>
div.TechBlogGuide_1263441 a.adhere:hover {
    border: 1px solid rgb(153, 153, 153);
    background: none repeat scroll 0% 0% rgb(221, 221, 221);
    color: rgb(51, 51, 51);
}
html > body div.TechBlogGuide_1263441 a.adhere {
    height: 58px;
    width: 466px;
}
div.TechBlogGuide_1263441 a.adhere {
    width: 468px;
    height: 60px;
    line-height: 480%;
}
div.TechBlogGuide_1263441 a.adhere {
    color: rgb(102, 102, 102);
    font-weight: bold;
    font-size: 12px;
    border: 1px solid rgb(204, 204, 204);
    background: none repeat scroll 0% 0% rgb(231, 231, 231);
    text-align: center;
}
.TechBlogGuide a:hover {
    border-top-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.TechBlogGuide .ad1 {
    background: none repeat scroll 0% 0% rgb(17, 108, 165) !important;
}
div.TechBlogGuide_1263441 a {
    line-height: 100%;
}
div.TechBlogGuide_1263441 a {
    display: block;
    font-size: 11px;
    color: rgb(136, 136, 136);
    font-family: verdana,sans-serif;
    margin: 0px 4px 10px 0px;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    float: left;
}
div.TechBlogGuide_1263441 a {
    width: 468px;
}
.TechBlogGuide a {
    text-shadow: 1px 1px 1px rgb(17, 17, 17) !important;
    color: rgb(238, 238, 238) !important;
    padding: 0px !important;
    margin: 0px 10px 10px 0px !important;
    overflow: visible !important;
    transition: all 0.2s ease 0s;
    border: 0px none !important;
    border-top-left-radius: 80px;
    border-bottom-right-radius: 80px;
}
#nav ul li a.current, #nav ul li a.current:visited, a:hover {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
:focus {
    outline: 0px none;
}
</style>
<div class="widget-content">
<div style="margin-top:35px;">

<div id="TechBlogGuide_1263441" class="TechBlogGuide_1263441 TechBlogGuide"><a title="Advertise Here" href="http://jalu-pangna.blogspot.com/" class="adhere ad1 odd" target="_blank">Advertise Here</a></div>

</div>
</div>

Style 3

<style>
html > body div.TechBlogGuide_1264012 a.adhere {
    width: 123px;
    height: 123px;
}
div.TechBlogGuide_1264012 a.adhere {
    width: 125px;
    height: 125px;
    line-height: 1000%;
}
div.TechBlogGuide_1264012 a.adhere {
    color: rgb(102, 102, 102);
    font-weight: bold;
    font-size: 12px;
    border: 1px solid rgb(204, 204, 204);
    background: none repeat scroll 0% 0% rgb(231, 231, 231);
    text-align: center;
}
.TechBlogGuide a:hover {
    border-top-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.TechBlogGuide .ad5 {
    background: none repeat scroll 0% 0% rgb(61, 164, 21) !important;
}

.TechBlogGuide .ad6 {
    background: none repeat scroll 0% 0% rgb(182, 118, 6) !important;
}
.TechBlogGuide .even {
    margin-right: 0px !important;
}
div.TechBlogGuide_1264012 a {
    line-height: 100%;
}
div.TechBlogGuide_1264012 a {
    display: block;
    font-size: 11px;
    color: rgb(136, 136, 136);
    font-family: verdana,sans-serif;
    margin: 0px 8px 15px 0px;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
    float: left;
}
div.TechBlogGuide_1264012 a {
    width: 125px;
}
.TechBlogGuide a {
    text-shadow: 1px 1px 1px rgb(17, 17, 17) !important;
    color: rgb(238, 238, 238) !important;
    padding: 0px !important;
    margin: 0px 10px 10px 0px !important;
    overflow: visible !important;
    transition: all 0.2s ease 0s;
    border: 0px none !important;
    border-top-left-radius: 80px;
    border-bottom-right-radius: 80px;
}
#nav ul li a.current, #nav ul li a.current:visited, a:hover {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
:focus {
    outline: 0px none;
}
</style>
<div class="widget-content">

<div id="TechBlogGuide_1264012" class="TechBlogGuide_1264012 TechBlogGuide">
<a href="http://jalu-pangna.blogspot.com/" title="Advertise Here" class="adhere ad5 odd" target="_blank">Advertise Here</a>
<a href="http://jalu-pangna.blogspot.com/" title="Advertise Here" class="adhere ad6 even" target="_blank">Advertise Here</a>
</div>

</div>

Style 4

<style>
html > body div.TechBlogGuide_1272098 a.adhere {
    width: 258px;
    height: 258px;
}
div.TechBlogGuide_1272098 a.adhere {
    width: 260px;
    height: 260px;
    line-height: 2080%;
}
div.TechBlogGuide_1272098 a.adhere {
    color: rgb(102, 102, 102);
    font-weight: bold;
    font-size: 12px;
    border: 1px solid rgb(204, 204, 204);
    background: none repeat scroll 0% 0% rgb(231, 231, 231);
    text-align: center;
}
.TechBlogGuide a:hover {
    border-top-left-radius: 0px;
    border-bottom-right-radius: 0px;
}
.TechBlogGuide .ad1 {
    background: none repeat scroll 0% 0% rgb(17, 108, 165) !important;
}
div.TechBlogGuide_1272098 a {
    line-height: 100%;
}
div.TechBlogGuide_1272098 a {
    display: block;
    font-size: 11px;
    color: rgb(136, 136, 136);
    font-family: verdana,sans-serif;
    margin: 0px;
    text-align: center;
    text-decoration: none;
    overflow: hidden;
}
div.TechBlogGuide_1272098 a {
    width: 260px;
}
.TechBlogGuide a {
    text-shadow: 1px 1px 1px rgb(17, 17, 17) !important;
    color: rgb(238, 238, 238) !important;
    padding: 0px !important;
    margin: 0px 10px 10px 0px !important;
    overflow: visible !important;
    transition: all 0.2s ease 0s;
    border: 0px none !important;
    border-top-left-radius: 80px;
    border-bottom-right-radius: 80px;
}
#nav ul li a.current, #nav ul li a.current:visited, a:hover {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
:focus {
    outline: 0px none;
}
</style>
<div class="widget-content">
<div id="TechBlogGuide_1272098" class="TechBlogGuide_1272098 TechBlogGuide"><a href="http://jalu-pangna.blogspot.com/" title="Advertise Here" class="adhere ad1 odd" target="_blank">Advertise Here</a></div>
</div>

Semoga bermanfa'at..

Mendesain sub heading dan minor heading atau style tag H3 dan H4

noreply@blogger.com (jalupangna) — Thu, 20 Jun 2013 00:13:00 +0000

Seorang blogger pemula (termasuk penulis juga masih pemula) selalu memiliki gagasan/ide yang sempit tentang banyaknya pengkodean (coding) yang sederhana. Bahkan ketika saya terjun ke dunia blog dan masih pemula waktu itu, sama sekali saya tidak dapat memahami sedikitpun tentang coding apalagi coding yang rumit dan sulit. Untuk contoh misalnya merancang tag H3 dan H4 sebagian besar blogger pemula tidak menyadarinya.

Sebelum melanjutkan ke tutorial Anda harus mengubah semua tag H3 menjadi H2. Karena ia akan bekerja untuk sub heading dan minor heading. Dan secara default blogger menetapkan Sub-Heading sebagai tag H3 dan minor heading sebagai tag H4 .

Mendesain sub heading atau tag H3

Sub-Heading umumnya mendapatkan prioritas di bawah tag judul. Tag heading (judul) kita tetapkan sebagai H2 dan Sub-Heading sebagai H3. Ketika kita menulis artikel tentang apa saja maka kita menggunakan banyak Sub-Heading dan untuk membuatnya sedikit menarik kita akan menggunakan ikon dan warna dengan coding sederhana ..

Tag Sub-Heading ini sangat berbeda dan memiliki style efek hover. Berharap anda akan menyukainya. :)

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 kode CSS dibawah ini tepat diatas kode ]]></b:skin>

h3{
font-family:Arial !important;
font-style:italic !important;
}
.post h3 {
color:#0000ff;
border-left:10px solid #0000ff;
border-right:10px solid #0000ff;
padding:3px 5px 3px 20px;
border-radius:15px;
-moz-border-radius:15px;
box-shadow:0px 0px 13px #0000ff;
-webkit-box-shadow:0px 0px 13px #0000ff;
-moz-box-shadow:0px 0px 13px #0000ff;
}
.post h3:hover {
color:#f01a1a;
border-left:10px solid #f01a1a;
border-right:10px solid #f01a1a;
box-shadow:0px 0px 13px #f01a1a;
-webkit-box-shadow:0px 0px 13px #f01a1a;
-moz-box-shadow:0px 0px 13px #f01a1a;
}

Simpan template..

Mendesain minor heading atau style tag H4

Tag ini sebenarnya kurang begitu penting dibandingkan dengan sub-heading. Umumnya kita gunakan untuk menandai beberapa info/headline yang kurang penting. Standarnya, blogger menetapkan tag H4 atau minor heading.

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 kode CSS dibawah ini tepat diatas kode ]]></b:skin>

.post h4{
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhq7K9oDdr8w1wB-4KuaH93iTFXpLGe-O74dXA8lywJPD9_hH-rp1akZGmAZ3oKkpzGHn7jZO4MB8ijNemAPg3XYnWsombPh4sW16A8XSAk0nc0Oo3Yy-iKDDZbjuZ49XaXIFJAHWjYLibh/s1600/h2.png") no-repeat scroll 4px center transparent;
border: 3px solid #C8C800;
border-radius: 60px 60px 60px 60px;
box-shadow: 0 1px 3px #C6C6C6, 1px 1px 0 rgba(255, 255, 255, 0.4) inset;
color: #A5A503;
font-family: 'lobster',sans-serif;
font-size: 19px;
font-weight: bold;
line-height: 1;
margin: 15px 3px;
padding: 3px 10px 3px 30px;
text-shadow: 0 1px 0 #CCCCCC;
text-transform: uppercase;
}

Simpan template..Selesai.

Bagaimana menggunakannya?

Masuk ke postingan baru dan tulis artikel dengan sub-heading dan minor heading. Sekarang blok dan klik pada heading, sub-heading atau minor heading seperti gambar di bawah:

Semoga bermanfa'at and happy blogging..!

Cara membuat widget popular post menggunakan CSS3 dan angka secara otomatis.

noreply@blogger.com (jalupangna) — Tue, 18 Jun 2013 17:41:00 +0000

Ketika blogger merilis kembali widget Popular Post pada tahun 2011, kita telah mendapat bocoran stylesheetnya sehingga Anda dapat menyesuaikan dan memadukannya dengan sempurna ke template BlogSpot Anda.

Hari ini kita akan belajar bagaimana untuk menampilkan daftar postingan populer (Popular Post) menggunakan penambahan properti CSS3 secara otomatis. Anda dapat menambahkan 2 macam style number, diantarnya dalam bentuk persegi / persegi empat dan bundar. Anda dapat melihat live demonya pada sidebar blog saya atau pada gambar diatas.

Mari kita menambahkan efek ini di blog dan langkah-langkahnya pun cukup mudah, efek ini murni CSS3 tanpa menggunakan JavaScript.

Widget Populer post adalah sebuah tool (alat) yang efektif untuk meningkatkan page view blog Anda dan melibatkan lebih banyak pembaca di blog.

Menambahkan widget populer post

Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
Kemudian pilih -> Tata letak -> Tambah gadget -> Pilih Entri populer dari daftar
Anda perlu untuk mengkonfigurasi pengaturan seperti yang ditunjukkan pada gambar di bawah: jangan centang "thumbnail gambar" dan juga "cuplikan" lebih baik lagi yang akan Anda tampilkan sekitar 7-9 postingan.

Kemudian simpan..

Mengubahsuaikan plugin popular post

Masuk ke akun blogger anda kemudian pilih -> Template -> Edit HTML
Cari tag/kode ]]></b:skin>
Berikutnya kopi dan pastekan kode CSS dibawah ini tepat diatas kode ]]></b:skin>

.popular-posts ul {
padding-left: 0px;
counter-reset: popcount;
}
.popular-posts ul li:before {
list-style-type: none;
margin-right: 15px;
padding: 0.3em 0.6em;
counter-increment: popcount;
content: counter(popcount);
font-size: 16px;
background: #292D30;
color: #ffffff;
position: relative;
font-weight: bold;
font-family: georgia;
float: left;
border: 2px solid #dddddd;
box-shadow: 1px 2px 9px #666666; }
.popular-posts ul li {
border-bottom: 1px dashed #dddddd;
}
.popular-posts ul li:hover {
border-bottom: 1px dashed #696969;
}
.popular-posts ul li a {
text-decoration:none; color:#5A5F63;
}

.popular-posts ul li a:hover {
text-decoration:none;
}

Kustomisasi

Untuk mengubah warna latar belakang (background) persegi empat/bundar silahkan edit #292D30
Untuk mengubah warna text silahkan edit #ffffff
Secara default bentuknya persegi empat, untuk merubah menjadi bulat anda tinggal menambahkan kode dibawah ini setelah kode box-shadow: 1px 2px 9px #666666;

border-radius:15px;

Simpan template, selesai..

Cara meningkatkan trafik dan rank alexa blog anda

noreply@blogger.com (jalupangna) — Sun, 16 Jun 2013 13:25:00 +0000

Website atau blog menjadi terkenal dengan peringkat (rank) dan traffic (lalu lintas) yang mereka punya. Google mendapatkan jutaan page view dan para visitor dalam seharinya sehingga Google mendapat peringkat nomor 1 di rank alexa.

Apa itu Alexa?

Alexa adalah perusahaan informasi web, perusahaan ini menyimpan trafik data, page view, rate bounce, dan beberapa informasi lain dari hampir semua situs. Perusahaan ini juga menampilkan peringkat dari setiap website sesuai dengan jajaran negaranya (country rank) dan juga menampilkan peringkat dunia (globe rank) dari setiap website.

Bagaimana cara meningkatkan rank alexa?

Rank alexa tergantung pada trafik situs anda. Jika para visitor setiap kali mengunjungi situs/blog anda, maka rank alexa anda akan meningkat dengan cepat. Tips berikut juga berguna untuk meningkatkan trafik blog:

- share postingan blog ke facebook
- share di twitter
- share di Google+

Dengan menerapkan tips diatas, sedikitnya trafik website/blog anda akan meningkat. Akan tetapi tergantung juga dengan postingan yang anda share dan para visitors.

Postingan kali ini saya akan share ke anda bagaimana kita meningkatkan trafik blog dan meningkatkan rank alexa tanpa share ke facebook, twitter atau jejaring sosial lainnya.

Langkah-langkahnya:

Silahkan anda daftar (sign up) terlebih dahulu di AlexaBoostup.

Setelah mendaftar dan setiap mereferensikan alexaboostup anda, maka anda akan mendapat point sebanyak 1.000

Jika anda mendaftar langsung ke alexaboostup, maka anda tidak mendapat sebuah pointpun.

Silahkan masuk ke akun alexaboostup anda kemudian masukan alamat URL blog anda pada kotak website dan centang pada kotak enable website.

Setelah klik tombol save anda akan mendapatkan trafik dari AlexaBoostup

Untuk meningkatkan point anda, silahkan klik pada Lunch Auto Surf Booster

Silahkan ikuti tips diatas, rank alexa website/blog anda akan meningkat dalam beberapa hari kedepan.

Semoga bermanfa'at...

Menghubungkan jejaring sosial twitter ke feedburner secara langsung tanpa menggunakan aplikasi

noreply@blogger.com (jalupangna) — Fri, 14 Jun 2013 08:27:00 +0000

Beberapa tahun yang lalu, FeedBurner Google memiliki opsi Sosial yang memungkinkan orang berbagi postingan blognya (RSS) langsung di Twitter. Tapi layanan ini didepresiasi, dan orang-orang mulai beralih menggunakan aplikasi pihak ketiga seperti twitterfeed sebagai gantinya.

Sekarang ini, tampaknya Google meluncurkan sebuah terobosan baru lagi untuk para Blogger yang ingin berbagi RSS feed mereka ke Twitter secara langsung, karena opsi Sosial ini hadir kembali! Hal ini tentunya menandakan langkah maju untuk Google/Integrasi Twitter. Sekarang, Anda dapat berbagi postingan blog Anda (RSS feed) ke Twitter tanpa aplikasi pihak ketiga!

Hapus aplikasi pihak ketiga dari Twitter

Pertama-tama, Anda harus terlebih dahulu menghapus aplikasi pada auto-schedule di Twitter. Untuk melakukan hal ini:
login ke akun Twitter Anda, dan klik pada ikon gigi di sudut kanan atas. Kemudian klik Settings (pengaturan).

Selanjutnya, pada sidebar kiri, klik tab Aplikasi.

Di sini, Anda akan melihat semua Apikasi yang Anda gunakan/terhubung pada akun Twitter Anda. Selanjutnya klik tombol Revoke Access (Cabut akses), yang pada dasarnya untuk menghapus aplikasi.

Langkah-langkah diatas bagi yang sudah menggunakan aplikasi pihak ketiga (third-party)

Share update menggunakan opsi sosial

Share update artikel Anda di Twitter kini lebih mudah dari sebelumnya. Untuk menggunakan Sosialisasi ini, ikuti langkah berikut;

Masuk ke akun Feedburner anda, kemudian pilih feed yang akan anda share di twitter
Kemudian klik-> tab Publicize -> Socialize ( sebelah kiri sidebar)

Klik Add a Twitter Account
Otorisasikan (Authorize) aplikasi untuk account Twitter Anda, selesai..

Sekarang, setiap kali Anda mempublikasikan postingan baru di blog, feedburner anda akan mengupdate secara otomatis, dan sekali itu terjadi, update postingan baru di blog akan segera dikumandangkan (kaya adzan aja..hehe..) di akun twitter anda.

Original source

Menambahkan pita author pada kotak komentar di blog

noreply@blogger.com (jalupangna) — Thu, 13 Jun 2013 16:45:00 +0000

Postingan kali ini adalah permintaan salah satu sobat blogger yaitu berkenaan dengan cara menambahkan pita author pada kotak komentar. Untuk memberikan sentuhan khusus dalam menambahkan pita author pada kotak komentar, kita menggunakan properti CSS. Cara menambahkannya cukup mudah, tinggal mengikuti langkah-langkahnya berikut dibawah ini.

LANGKAH-LANGKAHNYA

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 kode CSS dibawah ini tepat diatas kode ]]></b:skin>

.comments .comments-content .icon.blog-author { position: absolute; top: -2px; right: -9px; margin: 0; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmGS7Da07rxh7CFkjHkjJaXyFq5shrLXvUZYeo0Y8f14bP0BtUTIw0ZJD7JZtGujQvgEl5bmCHYt0BtKDHw8D3FhPHfkG2Yhcv6Yv7wT7-MEwuDM6EF6mI-ahTZSiB2s1UqcdbIvi1PFw/s320/author-pink.png) no-repeat; width: 36px; height: 36px; }

Simpan template

KUSTOMISASI:

Untuk mengganti warna pita author, anda tinggal mengganti link pita author pada kode yang disorot warna biru

Ada 3 pilihan warna pita, silahkan pilih mana yang anda suka:

Warna merah muda/pink : sudah tertera diatas

Warna hijau : https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFWb2qbh20YeYiOQ1LiSkhaB3A9ziFanQT5GAJ2WP6S195627q_x4-cWkrvZKK1LWunxfJgp-zz7xmujSkmxjgY0-cxI2_FVrQnmILx0evR5pQqErHOMlioDffoCpqD6HA4yUrzbNrtt-5/s1600/rb+green+ribbon.gif

Warna biru: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj93pQvZEiMelY1peRvmPZLTmOhCNubAyVLTMU1QqASTSf-cDgZ5W8byPogtGmyE00TiZDXzTOsNutVNLLBpgVBA_JCXDLYwyTwyPm1dburEUUbr36qmi5adzsndjd-4iXyqHIXby3i1WOU/s1600/rb+blue+ribbon.gif

Semoga bermanfa'at...

Cara mudah dan praktis klaim blog di technorati

noreply@blogger.com (jalupangna) — Wed, 12 Jun 2013 07:15:00 +0000

Kali ini saya akan sedikit berbagi info mengenai Cara Verifikasi atau Claim Blog di Technorati. Technorati merupakan sosial bookmark atau salah satu situs search engine khusus blog, dan situs ini memberikan backlink gratis. Karena selain Alexa rank dan Google pagerank, Technorati rank juga merupakan syarat penting untuk mendaftarkan Blog anda pada situs Paid Review, namun sobat harus sudah melakukan claim atas blog sobat.

Awalnya saya bingung bagaimana cara verifikasi Claim Token blog pada Technorati. Setelah beberapa menit menelusuri Google, akhirnya saya mengerti cara melakukan verifikasi Claim Token blog pada Technorati. Setelah mendaftar blog ke Technorati, anda akan mendapatkan email untuk konfirmasi kemudian klik link konfirmasi tersebut dan login lagi pada technorati & berikut langkahnya :

Pertama, silahkan anda registrasi terlebih dahulu di http://technorati.com
Isilah data Technorati profile, sesuai dengan yang diminta.
Setelah proses pendaftaran selesai, lalu sign up dan sekarang bagaimana cara Claim blog di Techorati. Disini saya hanya memfokuskan cara klaim technorati saja.
Klik user id yang anda gunakan pada saat pendaftaran (http://technorati.com/account/)
Isi URL blog yang ingin anda masukan di menu My claimed blogs – Start a blog claim: URL blogs dan klik Claim.
Selanjutnya isi Data blog Anda, Blog title, URL, Feed URL, Site description, Site categories (pilih kategori blog anda min 3 kategori), Site tags.
Setelah data yang anda isi sudah benar, klik Proceed to next step.
Selanjutnya buka email anda karena kode klaim dikirim ke email.
Buat postingan Technorati Claim yang isinya kode yang dikirim ke email anda, sebagai contoh ini adalah kode Token Technorati blog saya : R4HWW2W27N59 atau bisa juga dengan memasang meta tag pada blog kalian seperti ini dibawah <head> : <meta content='R4HWW2W27N59' name='TechnoratiVerifyID'/>
Setelah anda membuat posting yang berisi kode token Technorati atau memasang meta tag, Selanjutnya silahkan kembali ke akun technorati anda lalu klik Check Klaim pada menu profil My claimed blogs lalu klik Verify Claim Token.
Jika langkah di atas sudah anda lakukan semua, silahkan anda tunggu email pemberitahuan yang berisi Technorati Claim Complete.

Original source

Bulan Sya'ban Mubaarok dan fadhilahnya

noreply@blogger.com (jalupangna) — Mon, 10 Jun 2013 17:09:00 +0000

Sya’ban adalah bulan kedelapan dalam kalender Islam. Dinamakan Sya’ban, karena orang-orang Arab pada bulan-bulan tersebut yatasya’abun/berpencar untuk mencari sumber mata air. Dikatakan juga karena mereka tasya’ub/berpisah-pisah di gua-gua.
Dan dikatakan juga sebagai bulan Sya’ban karena bulan ini muncul/sya’aba di antara dua bulan Rajab dan Ramadhan.

Sya'ban diambil kosa kata bahasa Arab yang berasal dari kata syi'ab yang artinya jalan di atas gunung. Islam kemudian memanfaatkan bulan Sya’ban sebagai waktu untuk menemukan banyak jalan, demi mencapai kebaikan.

Suatu waktu sahabat Usamah bin Zaid bertanya kepada Rasulullah saw:

“Wahai Rasulullah, aku tidak pernah melihatmu memperbanyak berpuasa (selain Ramadhan) kecuali pada bulan Sya'ban? Rasulullah saw. menjawab: "Itu bulan dimana manusia banyak melupakannya, yaitu antara Rajab dan Ramadhan. Di bulan itu segala perbuatan dan amal baik diangkat ke Tuhan semesta alam, maka aku ingin ketika amalku diangkat, aku dalam keadaan puasa". (HR. Abu Dawud dan Nasa'i).

Dalam Riwayat Imam Bukhari dan Muslim, Sayyidatina Aisyah r.a. berkata:

“Aku belum pernah melihat Rasulullah Shallallahu ‘alaihi wa Sallam menyempurnakan shaum selama satu bulan penuh kecuali pada bulan Ramadhan, dan aku belum pernah melihat beliau memperbanyak shaum dalam satu bulan kecuali pada bulan Sya’ban.” (HR. Bukhari No. 1833, Muslim No. 1956).

Dilain tempat beliau (sayyidatina Aisyah r.a.) juga berkata:

"Suatu malam Rasulullah saw. shalat, kemudian beliau bersujud panjang sehingga aku menyangka bahwa Rasulullah saw. telah diambil. Karena curiga maka aku gerakkan telunjuk beliau dan ternyata masih bergerak. Setelah Rasulullah saw. selesai shalat beliau berkata: "Hai Aisyah engkau tidak dapat bagian?". Lalu aku menjawab: "Tidak ya Rasulullah, aku hanya berfikiran yang tidak-tidak (menyangka Rasulullah saw. telah tiada) karena engkau bersujud begitu lama". Lalu beliau bertanya: "Tahukah engkau, malam apa sekarang ini". "Rasulullah yang lebih tahu", jawabku. Beliau pun berkata: "Malam ini adalah malam nisfu Sya'ban, Allah mengawasi hamba-Nya pada malam ini, maka Ia memaafkan mereka yang meminta ampunan, memberi kasih sayang mereka yang meminta kasih sayang dan menyingkirkan orang-orang yang dengki." (H.R. Baihaqi dari Ala’ bin Harits).

Beberapa riwayat diatas setidaknya memberikan penjelasan kepada kita akan keutamaan-keutamaan bulan Sya’ban. Dikatakan bahwa bulan Sya’ban ialah bulan dimana amal-amal perbuatan manusia diangkat ke hadirat Tuhan penguasa alam.

Bulan Sya’ban juga merupakan bulan dimana Allah SWT saat malam pertengahan bulan Sya’ban (Nishfu sya'ban) mengawasi hamba-hamba-Nya (adakah diantara mereka yang mendirikan qiyamul lail saat itu), memaafkan mereka yang memohon ampunan, mencurahkan kasih saying bagi mereka yang mengharapkannya dan menyingkirkan hamba-hamba-Nya yang bersifat pendengki.

Imam Ghazali mengistilahkan malam Nisfu Sya'ban sebagai malam yang penuh dengan syafaat (pertolongan). Menurut al-Ghazali, pada malam ke-13 bulan Sya'ban Allah SWT memberikan seperti tiga syafaat kepada hambanya. Sedangkan pada malam ke-14, seluruh syafaat itu diberikan secara penuh. Dengan demikian, pada malam ke-15, umat Islam dapat memiliki banyak sekali kebaikan sebagai penutup catatan amalnya selama satu tahun. Karena pada malam ke-15 bulan Sya’ban nanti, catatan perbuatan manusia penghuni bumi akan dinaikkan ke hadapan Allah SWT.

Para ulama menyatakan bahwa Nisfu Sya'ban juga dinamakan sebagai malam pengampunan atau malam maghfirah, karena pada malam itu Allah SWT menurunkan pengampunan kepada seluruh hamba Allah dipenjuru dunia.

Dan jika kita cermati beberapa riwayat diatas, ada 2 hal yang biasa atau setidaknya pernah dilakukan rasulullah saw di bulan Sya’ban yaitu memperbanyak berpuasa serta qiyamul lail (mendirikan shalat) pada malam pertengahan bulan Sya’ban.

Hadits-hadits lain yang menerangkan tentang fadhilah (keutamaan) bulan sya'ban:

Aisyah RA bercerita bahwa pada suatu malam dia kehilangan Rasulullah SAW, ia keluar mencari dan akhirnya menemukan beliau di pekuburan Baqi’, sedang menengadahkan wajahnya ke langit. Beliau berkata:
“Sesungguhnya Allah Azza Wajalla turun ke langit dunia pada malam Nishfu Sya’ban dan mengampuni (dosa) yang banyaknya melebihi jumlah bulu domba Bani Kalb.” (HR Turmudzi, Ahmad dan Ibnu Majah)

Diriwayatkan oleh Abu Musa Al-Asy’ari RA bahwa Rasulullah SAW bersabda, “Sesungguhnya Allah pada malam Nishfu Sya’ban mengawasi seluruh mahluk-Nya dan mengampuni semuanya kecuali orang musyrik atau orang yang bermusuhan.” (HR Ibnu Majah)

Diriwayatkan dari Ali bin Abi Thalib KW bahwa Rasulullah SAW bersabda,
“Jika malam Nishfu Sya’ban tiba, maka salatlah di malam hari, dan berpuasalah di siang harinya, karena sesungguhnya pada malam itu, setelah matahari terbenam, Allah turun ke langit dunia dan berkata, ‘Adakah yang beristighfar kepada Ku, lalu Aku mengampuninya, Adakah yang memohon rezeki, lalu Aku memberinya rezeki , adakah yang tertimpa bala’, lalu Aku menyelamatkannya, adakah yang begini (2x), demikian seterusnya hingga terbitnya fajar.” (HR Ibnu Majah).

Semoga bermanfa'at..

Cara membuat efek shadow atau efek bayangan pada sidebar blog

noreply@blogger.com (jalupangna) — Mon, 10 Jun 2013 10:24:00 +0000

Postingan saya kali ini adalah permintaan salah satu sobat blogger yaitu tentang bagaimana cara membuat dan menambahkan efek shadow atau efek bayangan pada sidebar blog.
Untuk sobat yang ingin menambahkan trik ini silahkan ikuti tutorialnya berikut ini.

Langkah-langkahnya:

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 pencarian
Kopi dan pastekan kode css berikut tepat diatas kode ]]></b:skin>

#shadow2 { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9MO2CF0cPo_SDxpXLU_7AseiZbXJyjcAdGB9QsNq37Sr_-ZFHQyo3TTT3ohXNPPP_fMdZgoZ2HnbZ5yEgdjzI4F8P7lNhmDqzpMeW-UD9YPAdRBveY9lCXIQ_0liPU0-m1xvC6dYRse4/s1600/frame_shadow2+copy.png") no-repeat scroll center center transparent; height: 20px; width: 300px; }

CARA MENAMBAHKANNYA PADA SIDEBAR?

Untuk contoh saya akan menambahkan efek shadow pada gadget/widget recent comment:

<b:widget id='HTML11' locked='false' title='Recent Comment' type='HTML'>
<b:includable id='main'>

<b:if cond='data:title != ""'>
    <h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
    <data:content/>
</div>
<div id='shadow2'/>
</b:includable>
   </b:widget>

-Kode yang disorot wana orange adalah nama widget/gadget
-Kode yang disorot warna merah adalah kode shadow hasil dari pemanggilan kode css diatas
-Letakan kode shadow setelah tag </div>

Jadi jika anda ingin menambahkan efek shadow pada gadget yang lain seperti popular post, widget follower atau yang lainnya tinggal menambahkan kode <div id='shadow2'/> setelah tag </div>
Simpan template...selesai.

Membuat kotak author berbasis CSS di blog

noreply@blogger.com (jalupangna) — Fri, 07 Jun 2013 19:10:00 +0000

Pada postingan kali ini, saya akan berbagi ke anda tentang cara membuat kotak author keren berbasis CSS di blog. Pada umumnya kebanyakan para blogger ingin terlihat tampil lebih profesional dimata para visitor atau pengunjung, sehingga berbagai cara dilakukan diantaranya mendesain tampilan blog seindah dan secantik mungkin atau membuat berbagai variasi gadget dll. Salah satunya dengan memodifikasi kotak author berbasis css agar terkesan lebih profesional.

Live demo (arahkan krusor anda ke kotak author)

Tentang Author
Pengajar sekaligus pendidik di salah satu SMPN yang ada di daerah banten. seorang newbie blogger yang lagi belajar blogging. Strong will and effort adalah filosofi hidup saya agar supaya sukses dikemudian hari.
Follow Me: @Twitter | Facebook

APA SIH KOTAK AUTHOR ITU?

Kotak author pada dasarnya adalah sebuah kotak yang ditempatkan di atas atau di bawah setiap postingan dengan tujuan untuk menginformasikan pengguna tentang dirinya, sedikit deskripsi atau menginformasikan tentang situs lain.

MENGAPA KOTAK AUTHOR PERLU?

Situs atau blog anda terkesan profesional
Visitor mengetahui informasi lebih jauh tentang anda
dll..

FITUR DARI KOTAK AUTHOR INI ADALAH:

Elegant
Terkesan profesional
Ringan
Menggunakan efek hover
Termasuk ada gambar author (penulis)
All in one

BAGAIMANA CARA MEMBUAT KOTAK AUTHOR DI BLOG?

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

Kemudian pilih -> Template -> Edit HTML

Kemudian cari kode:

<div class='post-footer-line post-footer-line-1'> atau <data:post.body/>

Kopi dan Pastekan kode berikut setelah kode diatas:

<style>
.black-box {
    background-color: rgb(251, 251, 251);
    margin: 30px 0px;
    padding: 30px;
    text-align: center;
}

.black-box:hover {
box-shadow: 10px 7px 10px 7px rgba(0, 0, 0.7);
transition: all 0.5s ease-out 0s;
}
</style>

<div class='black-box'><img alt='Author' height='70px' src='http://i1087.photobucket.com/albums/j479/jalupangna/51863_355302354559661_2060566186_o-1.jpg' style='float: left;'/> <span style='font-weight: bold;'>Tentang Author</span><br/>
Pengajar sekaligus pendidik di salah satu SMPN yang ada di daerah banten. seorang newbie blogger yang lagi belajar blogging. Strong will and effort adalah filosofi hidup saya agar supaya sukses dikemudian hari.<br/>
Follow Me: <a href='http://www.twitter.com/sijalupangna'>@Twitter </a>| <a href='https://www.facebook.com/pages/Eyang-anom/427305383989192'>Facebook</a></div>

Silahkan letakan kode diatas setelah kode <data:post.body/> yang kedua atau ketiga

Ganti http://i1087.photobucket.com/albums/j479/jalupangna/51863_355302354559661_2060566186_o-1.jpg dengan URL/Link gambar anda
Silahkan anda ganti kalimat yang disorot warna biru dengan deskripsi anda
Ganti sijalupangna dengan ID twitter anda
Ganti https://www.facebook.com/pages/Eyang-anom/427305383989192 dengan URL Facebook fans page anda.

Hikmah dibalik penghambaan makhluq terhadap Sang Khooliq, Isra wal mi'raaj Sang Avatar Agung Al-Musthofa SAW

noreply@blogger.com (jalupangna) — Wed, 05 Jun 2013 17:42:00 +0000

Begitu indah dan istimewanya perjalanan Isro wal mi'rooj, mempesonakan hati yamg mencari-cari keteduhan dibalik penghambaan kepada Allah SWT. Menghadirkan renungan dalam makna sambung komunikasi dengan Allah Yang Maha Agung yang terurai dalam kekhusyuan Sholat.

Dimulai dari kebingungan Rasullah SAW untuk bersalam kepada Allah SWT, hingga Allah SWT mewahyukan salam yang tepat dari hamba untukNya yaitu Attahiyyatul mubarokatush sholawaatuth thoyyibaatu lillah (salam sejahtera yang penuh barokah dan salam sejahtera yang amat baik adalah milik Allah SWT) Kemudian salam itu diabadikan dalam Sholat yang di bawa oleh Rasulullah SAW dari perjalanan Isra Mi'raj. Hingga seorang hamba yang menghadap kepada Allah SWT didalam sholat ia harus mengucapkan salam tersebut untuk keabsahan sebuah penghambaan dan penghadapan.

Setelah bersalam kepada Allah sang pencipta,ternyata tidak cukup penghadapan seorang hamba kepada Allah SWT jika yang dihadirkan adalah hanya penggalangan jalinan baik kepada Allah SWT saja. Akan tetapi seorang hamba harus melanjutkan bacaan tasyahudnya dan mengucapkan, Assalamu alaika ayyuhannabiyyu warahmatullahi wabarokatuh (Salam sejahtera,barokah dan rahmat Allah semoga terlimpah kepadamu wahai Nabi Muhammad SAW).

Israa secara lughawi adalah memperjalankan seseorang pada waktu malam. Sedangkan secara syar’i: Perjalanan Jibril membawa Nabi Shallallahu ‘alaihi wasallam pada waktu malam dari Makkah menuju Masjid Al-Aqsha.

Sedangkan Mi’raj adalah: Alat yang digunakan untuk naik. Atau lebih mudahnya disebut tangga, lift, dan semacamnya. Ini makna secara lughawi. Sedangkan makna secara syar’i adalah: Tangga yang digunakan Rasulullah Shallallahu ‘alaihi wasallam untuk naik dari bumi ke langit. Tangga ini tidak diketahui seperti apa bentuknya. Maka statusnya seperti barang-barang ghaib lainnya. Kita beriman padanya tanpa menyibukkan diri seperti apa sifatnya.

Isra’ Mi’raj ini terjadi dengan jasad dan ruh Nabi Muhammad Shallallahu ‘alaihi wasallam. Yakni beliau tidak dalam keadaan bermimpi atau berkhayal. Tapi beliau melakukan perjalanan ini dalam keadaan sadarkan diri, dengan jati diri seorang manusia. Hal ini dijelaskan Allah dalam firmanNya dengan sebutan “Bi’abdihi” pada ayat berikut:

“Maha Suci Allah, yang telah memperjalankan hambaNya pada suatu malam dari Al-Masjidil Haram ke Al-Masjidil Aqsha yang telah Kami berkahi sekelilingnya agar Kami perlihatkan kepadanya sebagian dari tanda-tanda (kebesaran) Kami. Sesungguhnya Dia adalah Maha mendengar lagi Maha mengetahui.” (QS. Al-Isra’: 1)

Kata “Bi’abdihi” (hambaNya) menunjukkan beliau saat itu adalah seorang manusia. Sebab jika jasad saja maka disebut mayit dan jika roh saja maka tidak akan disebut hamba. Sebab hamba terdiri dari unsur roh dan jasad. Inilah manhaj Ahlussunnah wal jamaah. Dan andaikan Isra’ mi’raj terjadi saat Nabi dalam mimpi, tentu orang-orang kafir tidak akan mendustakannya.

Inilah kisah isra wal mi'raaj Al-Musthofa SAW berdasarkan hadits Abu Dzar Radhiyallaahu ‘anhu:

Hadis Abu Dzar Radhiyallaahu ‘anhu bahwasanya Rasulullah Shallallahu ‘alaihi wasallam bersabda: “Atap rumahku dibuka saat saya di Makkah. Maka turunlah Jibril dan membelah dada saya, kemudian mencucinya dengan air Zamzam. Lalu dia membawa bejana dari emas yang penuh dengan hikmah dan iman. Ia menuangkan bejana itu dalam dada saya. Lalu Jibril menutupnya kembali. Setelah itu Jibril menggenggam tangan saya dan naik bersama saya ke langit dunia. Ketika saya sudah sampai langit dunia, Jibril berkata kepada penjaga langit: ‘Bukalah!’. Penjaga langit berkata: ‘Siapakah ini?’, Jibril menjawab: ‘Ini adalah Jibril’. Penjaga langit bertanya lagi: ‘Apakah ada seseorang bersamamu?’, Jibril menjawab: ‘Iya, bersama saya Muhammad Shallallahu ‘alaihi wasallam‘. Penjaga langit bertanya lagi: ‘Apakah ia sudah diutus?’. Jibril menjawab: ‘Sudah’. Ketika langit sudah dibuka, kami terus naik melewati langit dunia. Rupanya di sana ada seseorang sedang duduk. Di sebelah kanannya terdapat hitam-hitam dan di sebelah kirinya juga terdapat hitam-hitam. Ketika melihat ke sebelah kanan, ia tertawa dan ketika melihat sebelah kirinya, ia menangis. Ia berkata: ‘Selamat datang kepada Nabi yang shalih dan putera yang shalih’. Saya bertanya kepada Jibril: ‘Siapa orang ini?’, Jibril menjawab: ‘Ini adalah Adam, sementara hitam-hitam yang di sebelah kanan dan kirinya adalah roh anak-anaknya. Yang berada di sebelah kanan dari mereka adalah penduduk Surga, sedangkan orang-orang yang di sebelah kirinya adalah penduduk Neraka. Karenanya setiap melihat arah kanan ia tertawa dan saat melihat arah kiri dia menangis’. Adam terus seperti itu hingga Jibril membawa saya naik ke langit kedua. Dia berkata kepada penjaganya: ‘Bukalah!’, penjaga langit kedua bertanya seperti pertanyaan penjaga langit pertama, maka langit pun dibuka.”

Anas berkata: “Nabi menyebutkan bahwa di langit beliau bertemu Nabi Adam, Nabi Idris, Nabi Musa, Nabi Isa, dan Nabi Ibrahim shalawatullah ‘alaihim. Tapi beliau tidak menjelaskan bagaimana kedudukan mereka. Beliau hanya menjelaskan bertemu Nabi Adam di langit dunia dan berjumpa Nabi Ibrahim di langit keenam.”

Anas berkata: Nabi Shallallahu ‘alaihi wasallam bersabda: “Ketika Jibril bersama Nabi melewat Nabi Idris, Nabi Idris berkata: ‘Selamat datang kepada Nabi yang shalih dan saudara yang shalih’. Saya bertanya: ‘Siapakah ini?’, Jibril menjawab: ‘Ini adalah Idris’. Kemudian saya melewati Nabi Musa Alaihissalam. Dia berkata: ‘Selamat datang kepada Nabi yang shalih dan saudara yang shalih’. Saya bertanya: ‘Siapakah ini?’, Jibril menjawab: ‘Ini adalah Musa’. Kemudian saya melewati Nabi Isa. Dia berkata: ‘Selamat datang kepada Saudara yang shalih dan Nabi yang shalih’. Saya bertanya: ‘Siapakah ini?’. Jibril menjawab: ‘Ini adalah Isa’. Kemudian saya melewati Nabi Ibrahim. Dia berkata: ‘Selamat datang kepada Nabi yang shalih dan putera yang shalih’. Saya bertanya: ‘Siapakah ini?’, Jibril menjawab: ‘Ini adalah Ibrahim Shallallahu ‘alaihi wasallam‘. Kemudian saya terus dibawa naik hingga saya berada di atas dataran yang di situ saya mendengar suara goresan pena.

Kemudian Allah mewajibkan lima puluh kali shalat kepada umatku. Maka saya kembali dengan kewajiban itu hingga saya melewati Nabi Musa. Musa bertanya: ‘Apa yang diwajibkan Allah kepadamu untuk umatmu?’. Saya menjawab: ‘Dia mewajibkan lima puluh kali shalat’. Nabi Musa berkata: ‘Kembalilah kepada Tuhanmu! Sesungguhnya umatmu tidak akan kuat mengerjakan hal itu’. Maka Tuhanku memberi keringanan dengan menggugurkan sebagiannya. Kemudian saya kembali kepada Musa.

Saya berkata: ‘Allah sudah menggugurkan sebagiannya. Musa berkata: ‘Kembalilah pada Tuhanmu! Sesungguhnya umatmu tidak akan kuat melaksanakannya’. Saya kembali kepada Allah, maka Dia berkata: ‘Itu adalah lima kali. Tetapi lima puluh dalam pahalanya, sudah tidak akan diubah perkataanKu ini’. Lalu saya kembali kepada Musa. Dia berkata: ‘Kembalilah kepada Tuhanmu!’. Saya berkata: ‘Saya malu kepada Tuhanku’. Kemudian Jibril membawa saya hingga saya sampai di Sidratul Muntaha. Ia diselimuti banyak warna, saya tidak tahu apa itu. Kemudian saya dimasukkan dalam Surga. Rupanya Surga itu kubahnya terbuat dari mutiara dan tanahnya adalah kesturi.” (HR. Al-Bukhari, (8) Kitab Ash-Shalah, (1) Bab: Kaifa furidhat Ash-Shalaah fi Al-Israa’)

Kita wajib beriman dengan segala yang diberitakan Nabi Shallallahu ‘alaihi wasallam, juga terhadap naql (Hadis) yang sahih dari beliau. Baik kita menyaksikannya atau tidak menyaksikannya. Kita yakin itu adalah haq dan benar. Baik itu pada masalah yang bisa kita fahami atau tidak. Juga pada masalah yang kita tidak mengetahui hakikat maknanya. Seperti peristiwa Isra’ dan Mi’raj. Itu terjadi dalam kondisi sadarkan diri dan tidak dalam tidur. Karena orang-orang Quraisy mengingkari dan mendustakannya. Tentunya mereka tidak akan mendustakan jika terjadi dalam mimpi.

Abu Ja’far Ath-Thahawi Rahimahullah dalam Aqidah Thahawiyahnya berkata:

“Mi’raj adalah haq (benar) adanya. Nabi Shallallahu ‘alaihi wasallam telah diperjalankan pada waktu malam. Kemudian beliau dinaikkan dalam kondisi sadar ke langit. Kemudian terus lebih tinggi ke tempat mana pun yang dikehendaki Allah. Allah memuliakan beliau dengan apa pun yang dikehendakiNya. Kemudian Allah memberikan wahyu kepada Nabi. Sungguh hati tidak mendustakan apa yang dilihatnya. (QS. An-Najm: 11).

Semoga shalawat Allah dan salamNya di Akhirat dan dunia senantiasa tersampaikan kepada Nabi.”

Isra’ Mi’raj ini terjadi pada satu malam yang sama. Inilah pendapat jumhur (mayoritas) ulama’. Dari Hadis Isra’ dan Mi’raj ini, menjadi jelas bagi kita bahwa kebanyakan ajaran Islam ini bersumber pada keimanan dan bukan pada nalar logika kita. Andaikan kita hanya mempercayai perkara yang diterima oleh akal kita, tentu kita mengingkari banyak ajaran Islam. Seperti iman kepada azab dan nikmat kubur, iman kepada Isra’ dan Mi’raj, iman kepada Surga, Neraka, dan sesungguhnya keduanya sekarang sudah ada, iman kepada Hari Kiamat, juga iman kepada seluruh yang ghaib lainnya.

Ibnu Hajar berkata: “Riwayat Abu Dzar ini sesuai dengan riwayat Syarik dari Anas. Tapi yang benar pada seluruh riwayat adalah selain dua riwayat ini. Yaitu keberadaan Nabi Ibrahim di langit ketujuh (bukan langit keenam). Andaikan kami mengatakan Mi’raj terjadi dua kali maka di sini tidak ada pertentangan. Tapi kami tidak mengatakannya. Sehingga yang rajih adalah riwayat jama’ah (mayoritas). Yaitu yang menyatakan: Bahwa Nabi Shallallahu ‘alaihi wasallam melihat Nabi Ibrahim Alaihissalam menyandarkan punggungnya ke Al-Bait Al-Ma’mur. Sementara Al-Bait Al-Ma’mur ini terdapat dalam langit ketujuh tanpa seorang ulama’ pun yang menyalahi.”

Sesungguhnya makhluk yang pertama kali diciptakan adalah pena. Meski tidak ada isyarat seperti itu dalam Hadis ini. Tapi Hadis ini menjelaskan bahwa pena terus bekerja. Pena ini statusnya sama dengan tangga yang digunakan Nabi naik ke langit. Yakni kita mengimani hakikatnya tanpa menyibukkan diri untuk mengetahui sifatnya.

Hadis ini menunjukkan Allah Subhaanahu wa ta’ala berbicara langsung dengan Nabi Muhammad Shallallahu ‘alaihi wasallam. Bahkan beliau berulang kali mendatangiNya untuk meminta keringanan jumlah shalat. Tapi beliau tidak pernah melihat Allah. Beliau hanya melihat cahaya.

Termasuk tuntunan Nabi Shallallahu ‘alaihi wasallam, sesungguhnya beliau shalat sebanyak empat puluh rakaat dalam sehari semalam. Tujuh belas rakaat shalat wajib, sebelas rakaat shalat witir, dan dua belas rakaat shalat rawatib.

Shalat yang diwajibkan hanya lima kali waktu. Adapun yang lain maka tidak wajib, antara sunnah muakkadah, sunnah biasa, dan mandub. Adapun shalat witir, ia tidak wajib tapi Nabi tidak pernah meninggalkannya baik dalam kondisi safar maupun tidak safar. Namun shalat-shalat non wajib statusnya penyempurna dan pelengkap bagi amal-amal wajib kita yang kurang. Sehingga statusnya rugi jika hamba tidak mengerjakannya.

Dalam sebuah Hadis Rasul Shallallahu ‘alaihi wasallam bersabda:

“Sesungguhnya yang pertama kali dihisab dari hamba pada Hari Kiamat adalah shalat wajib. Jika hamba sudah menyempurnakannya (maka itu sudah bagus), tapi jika tidak maka dikatakan: ‘Lihatlah! Apakah dia mempunyai ibadah tathawwu’?’. Jika dia memiliki ibadah tathawwu’ maka faridhahnya disempurnakan dari tathawuu’nya. Kemudian seluruh amal yang wajib (faridhah) diperlakukan seperti ini.”

Allahumma sholli wa sallim wa baarik 'alaa sayyidina Muhammad, Annuuri Dzaati wa sirri saarii fii saairil asmaa'i wa shifaati wa 'alaa aalihi wa shohbihii wa sallam..

Semoga bermanfa'at...

Membuat variasi widget jejaring sosial CSS3 dengan ikon warna hitam

noreply@blogger.com (jalupangna) — Mon, 03 Jun 2013 17:04:00 +0000

Widget yang satu ini selain sangat atraktif juga memiliki desain yang elegan. Widget ini murni menggunakan CSS3 sehingga loading cepat dan ditambah beberapa flatform jejaring sosial terkenal seperti facebook, twitter dan yang lainnya. Dengan background ikon warna hitam menambah sempurna bagi kebanyakan template blogger. Berharap anda menyukai dan menambahkannya di blog..:)

View Demo

LANGKAH-LANGKAHNYA:

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 pencarian
Kopi dan pastekan kode CSS berikut tepat diatas kode ]]></b:skin>

Kemudian cari lagi kode <data:post.body/>
Pastekan kode berikut setelah kode <data:post.body/>

<b:if cond='data:blog.pageType == "item"'>
<div style='font-size: 22px;'><b>Anda Menyukai Postingan di Atas? Silahkan di share...</b></div>
    <ul class='bssocial' id='bscssanimation'>
    <li class='bsfacebook'>
    <a expr:href='"http://www.facebook.com/share.php?v=4&src=bm&u=" + data:post.url + "&t=" + data:post.title ' onclick='window.open(this.href,'sharer','toolbar=0,status=0,width=626,height=436'); return false;' rel='nofollow'><strong>Facebook</strong></a>
    </li>
    <li class='bstwitter'>
    <a expr:href='"http://twitter.com/home?status=" + data:post.title + " -- " + data:post.url ' rel='nofollow' target='_blank'><strong>Twitter</strong></a>
    </li>
    <li class='bsredit'>
<a expr:href='"http://reddit.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow'><strong>Reddit</strong></a>
    </li>
    <li class='bstechnorati'>
<a expr:href='"http://technorati.com/faves?add=" + data:post.url ' rel='nofollow' target='_blank'><strong>Technorati</strong></a>
    </li>
    <li class='bsstumbleupon'>
    <a expr:href='"http://www.stumbleupon.com/submit?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'><strong>StumbleUpon</strong></a>
    </li>
    <li class='bsdig'>
      <a expr:href='"http://digg.com/submit?url=" + data:post.url + "&title=" + data:post.title' rel='nofollow' target='_blank'><strong>Dig</strong></a>
    </li>
    <li class='bslinkedin'>
    <a expr:href='"http://www.linkedin.com/shareArticle?mini=true&url=" + data:post.url + "&title=" + data:post.title + "&summary=&source="' rel='nofollow' target='_blank'><strong>LinkedIn</strong></a>
<li class='bsdelicious'>
    <a expr:href='"http://delicious.com/post?url=" + data:post.url + "&title=" + data:post.title ' rel='nofollow' target='_blank'><strong>Delicious</strong></a>
    </li>
    </li>
    </ul>
    </b:if>

Simpan template, selesai...

Al-Ghautsul a'dzhom Syaikhunaa Al-mukarrom Sulthonul auliyaa syeh abdul qoodir jailaani

noreply@blogger.com (jalupangna) — Mon, 03 Jun 2013 15:27:00 +0000

Syaikh sering dipanggil dengan gelar kehormatan al-Arif al-Qudwah. Secara bahasa gelar ini berarti seorang yang patut menjadi teladan. Gelar ini mencerminkan tingkat kesufian Syaikh yang sudah mencapai maqam 'Aarif billah, yakni posisi sangat mengenal Tuhannya. Syaikh juga mendapatkan gelar kehormatan Sulthanul Awliyaa, pemimpin para wali.

Syekh Abdul Qadir Jaelani atau Abd al-Qadir al-Gilani (bahasa Kurdi: Evdilqadirê Geylanî, bahasa Persia: عبد القادر گیلانی,bahasa Urdu: عبد القادر آملی گیلانی Abdolqāder Gilāni)
(470–561 H/1077–1166 M) adalah orang Kurdiatau orang Persia ulama sufi yang sangat dihormati oleh ulama Sunni. Di antara pengikut di Pakistan dan India, ia juga dikenal sebagai Ghautsul a'dzhom. Beliau lahir pada hari Rabu tanggal 1 Ramadan di 470 H/1077 M selatan Laut Kaspia yang sekarang menjadi Provinsi Mazandaran di Iran.

Ada dua riwayat sehubungan dengan tanggal kelahiran al-Ghauts al-A'dzhom Syekh Abdul Qodir al-Jilani. Riwayat pertama yaitu bahwa ia lahir pada 1 Ramadhan 470 H. Riwayat kedua menyatakan Ia lahir pada 2 Ramadhan 470 H. Tampaknya riwayat kedua lebih dipercaya oleh ulama. Silsilah Syekh Abdul Qodir bersumber dari Khalifah Sayyid Ali al-Murtadha r.a, melalui ayahnya sepanjang 14 generasi dan melaui ibunya sepanjang 12 generasi. Syekh Sayyid Abdurrahman Jamirah memberikan komentar mengenai asal usul al-Ghauts al-A'zham r.a sebagi berikut : "Ia adalah seorang Sultan yang agung, yang dikenal sebagial-Ghauts al-A'zham. Ia mendapat gelar sayyid dari silsilah kedua orang tuanya, Hasani dari sang ayah dan Husaini dari sang ibu". Silsilah Keluarganya adalah Sebagai berikut :

Dari Ayahnya (Hasani):

Syeh Abdul Qodir bin Abu Shalih bin Abu Abdillah bin Yahya az-Zahid bin Muhammad bin Dawud bin Musa bin Abdullah Tsani bin Musa al-Jaun bin Abdul Mahdhi bin Hasan al-Mutsanna bin Hasan as-Sibthi bin Ali bin Abi Thalib, Suami Fatimah binti Rasulullah Shallallahu 'alaihi Wassalam

Dari ibunya (Husaini) :

Syeh Abdul Qodir bin Ummul Khair Fathimah binti Abdullah Sum'i bin Abu Jamal bin Muhammad bin Mahmud bin Abul 'Atha Abdullah bin Kamaluddin Isa bin Abu Ala'uddin bin Ali Ridha bin Musa al-Kazhim bin Ja'far al-Shadiq bin Muhammad al-Baqir bin Zainal 'Abidin bin Husain bin Ali bin Abi Thalib, Suami Fatimah Az-Zahra binti Rasulullah Shallallahu 'alaihi Wassalam

Syeikh Abdul Qadir al Jailani adalah seorang yang diagungkan pada masanya. Diagungkan oleh para syeikh, ulama, dan ahli zuhud. Ia banyak memiliki keutamaan dan karamah. Tetapi, ada seorang yang bernama al Muqri' Abul Hasan asy Syathnufi al Mishri (nama lengkapnya adalah Ali Ibnu Yusuf bin Jarir al Lakhmi asy Syathnufi) yang mengumpulkan kisah-kisah dan keutamaan-keutamaan Syeikh Abdul Qadir al Jailani dalam tiga jilid kitab. Al Muqri' lahir di Kairo tahun 640 H, meninggal tahun 713 H. Dia dituduh berdusta dan tidak bertemu dengan Syeikh Abdul Qadir al Jailani. Dia telah menulis perkara-perkara yang aneh dan besar (kebohongannya).

"Cukuplah seorang itu berdusta, jika dia menceritakan yang dia dengar", demikian kata Imam Ibnu Rajab. "Aku telah melihat sebagian kitab ini, tetapi hatiku tidak tentram untuk berpegang dengannya, sehingga aku tidak meriwayatkan apa yang ada di dalamnya. Kecuali kisah-kisah yang telah masyhur dan terkenal dari selain kitab ini. Karena kitab ini banyak berisi riwayat dari orang-orang yang tidak dikenal. Juga terdapat perkara-perkara yang jauh dari agama dan akal, kesesatan-kesesatan, dakwaan-dakwaan dan perkataan yang batil tidak berbatas, seperti kisah Syeikh Abdul Qadir menghidupkan ayam yang telah mati, dan sebagainya. Semua itu tidak pantas dinisbatkan kepada Syeikh Abdul Qadir al Jailani rahimahullah."

Kemudian didapatkan pula bahwa al Kamal Ja'far al Adfwi (nama lengkapnya Ja'far bin Tsa'lab bin Ja'far bin Ali bin Muthahhar bin Naufal al Adfawi), seorang ulama bermadzhab Syafi'i. Ia dilahirkan pada pertengahan bulan Sya'ban tahun 685 H dan wafat tahun 748 H di Kairo. Biografi beliau dimuat oleh al Hafidz di dalam kitab Ad Durarul Kaminah, biografi nomor 1452. al Kamal menyebutkan bahwa asy Syathnufi sendiri tertuduh berdusta atas kisah-kisah yang diriwayatkannya dalam kitab ini. (Dinukil dari kitab At Tashawwuf Fii Mizanil Bahtsi Wat Tahqiq, hal. 509, karya Syeikh Abdul Qadir bin Habibullah as Sindi, Penerbit Darul Manar, Cet. II, 8 Dzulqa'dah 1415 H / 8 April 1995 M).

Sam'ani berkata, " Syeikh Abdul Qadir Al Jailani adalah penduduk kota Jailan. Ia seorang Imam bermadzhab Hambali. Menjadi guru besar madzhab ini pada masa hidup beliau." Imam Adz Dzahabi menyebutkan biografi Syeikh Abdul Qadir Al Jailani dalam Siyar A'lamin Nubala, dan menukilkan perkataan Syeikh sebagai berikut,"Lebih dari lima ratus orang masuk Islam lewat tanganku, dan lebih dari seratus ribu orang telah bertaubat."

Imam Adz Dzahabi menukilkan perkataan-perkataan dan perbuatan-perbuatan Syeikh Abdul Qadir yang aneh-aneh sehingga memberikan kesan seakan-akan beliau mengetahui hal-hal yang ghaib. Kemudian mengakhiri perkataan, "Intinya Syeikh Abdul Qadir memiliki kedudukan yang agung. Tetapi terdapat kritikan-kritikan terhadap sebagian perkataannya dan Allah menjanjikan (ampunan atas kesalahan-kesalahan orang beriman). Namun sebagian perkataannya merupakan kedustaan atas nama beliau." (Siyar XX/451). Imam Adz Dzahabi juga berkata, " Tidak ada seorangpun para kibar masyayikh yang riwayat hidup dan karamahnya lebih banyak kisah hikayat, selain Syeikh Abdul Qadir Al Jailani, dan banyak di antara riwayat-riwayat itu yang tidak benar bahkan ada yang mustahil terjadi".

Syeikh Rabi' bin Hadi Al Madkhali berkata dalam kitabnya, Al Haddul Fashil,hal.136, " Aku telah mendapatkan aqidahnya (Syeikh Abdul Qadir Al Jaelani) di dalam kitabnya yang bernama Al Ghunyah. (Lihat kitab Al-Ghunyah I/83-94) Maka aku mengetahui bahwa dia sebagai seorang Salafi. Ia menetapkan nama-nama dan sifat-sifat Allah dan aqidah-aqidah lainnya di atas manhaj Salaf. Ia juga membantah kelompok-kelompok Syi'ah, Rafidhah, Jahmiyyah, Jabariyyah, Salimiyah, dan kelompok lainnya dengan manhaj Salaf." (At Tashawwuf Fii Mizanil Bahtsi Wat Tahqiq, hal. 509, karya Syeikh Abdul Qadir bin Habibullah As Sindi, Penerbit Darul Manar, Cet. II, 8 Dzulqa'dah 1415 H / 8 April 1995 M.)

Pendidikan agama yang pertama digoreskan pada diri syaikh sufi ini adalah kecintaan pada Al-Qur’an. Belajar membaca Al-Qur’an dan mendalami kandungannya pada Abu al-Wafa Ali ibn Aqli dan Abu al-Khattab Mahfuz al-Kalwadzani. Kedua ulama ini berasal dari kalangan Mazhab Hambali.

Syaikh Abdul Qadir mempelajari hadits Nabi dari beberapa ulama hadits terkenal pada zamannya. Salah satunya adalah Abu Ghalib Muhammad ibn al-Hasan al-Balaqalani. Adapun pendalaman ilmu fiqihnya dilakukan pada ulama fiqih Mazhab Hambali, seperti Abu Sa’d al-Mukharrami. Sedangkan bidang bahasa dan sastra dipelajari dari Abu Zakarya ibn Ali al-Tibrizi. Sementara itu, di bidang tasawuf diambilnya dari Hammad al-Dabbas.

Syaikh mulai memimpin majelis ilmu di Madrasah Abu Sa’d al-Mukharrami di Baghdad sejak Syawal 521 H. Sejak itu namanya harum sebagai seorang sufi yang zuhud. Majelis yang diselenggarakan di madrasah ini penuh sesak dengan pengunjung yang haus mencari ilmu dan pencerahan ruhani. Madrasah itu pun diperluas, namun tetap tidak dapat menampung hadirin. Akhirnya majelis atau forum ilmiah itu diadakan di beberapa masjid di luar kota Baghdad. Setiap Syaikh datang memberikan nasihat, yang hadir bisa mencapai tujuh puluh ribu orang. Syaikh menjadi sufi yang menyejukkan umat dan menjadi sumber mata air ruhani yang terus memancarkan kehidupan batin.

Syaikh mendapat beberapa gelar kehormatan. Pertama, di belakang namanya sering dilengkapi dengan sebutan Muhyi ad-Din wa as-Sunnah. Sebutan ini secara bahasa berarti tokoh yang menghidupkan agama dan Sunnah Nabi. Melekat dengan gelar tersebut beliau juga mendapat gelar kehormatan Mumit al-Bid’ah, yakni tokoh yang gigih menghapuskan bid’ah atau penyimpangan di dalam agama dari berbagai perbuatan yang tidak sejalan dengan Sunnah Nabi.

Syaikh mendapat gelar kehormatan al-Imam al-Zahid, pemimpin yang bersikap zuhud dalam kehidupan dunia. Gelar ini mencerminkan reputasinya sebagai tokoh sufi yang memandang dunia dan kehidupan ini sebagai modal untuk meningkatkan kualitas ruhani, meraih nilai keabadian, dan mendapatkan kehidupan ukhrawi. Dunia bukan tujuan pokok dalam hidup, bukan ujung dalam perjalanan dan bukan pula segalanya. Syaikh berkata: “layanilah Tuhanmu dengan sepenuh hati, niscaya dunia akan melayanimu.”

Referensi:

Manakib Syekh Abdul Qodir Al Jailani, Perjalanan Spiritual Sulthanul Auliya, Pustaka Setia, Bandung, 2003 (wikipedia)
Al Ghunyah, 2010 (wikipedia)
Syaikh Abdul Qadir Jailani, Kunci Tasawuf Menyingkap Rahasia Kegaiban Hati (Terjemahan dari buku asli Futuhul Ghaib), Penerbit Husaini, Bandung (1985)

Cara memodifikasi background kotak komentar di blog

noreply@blogger.com (jalupangna) — Sat, 01 Jun 2013 07:52:00 +0000

Postingan kali ini bagaimana cara mengubahsuaikan dan memodifikasi background kotak komentar di blog. Sebenarnya kotak komentar standar (default) blogger kurang begitu menarik, oleh karena itu banyak yang mengubah dan memodifikasinya. Cara memodifikasi background kotak komentar cukup mudah tinggal anda mengikuti langkah-langkah berikut:

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

Cari tag/kode ]]></b:skin>
Kopi dan pastekan kode CSS berikut tepat diatas kode ]]></b:skin>

#mbt-form iframe{
background:#ffffff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXXmwNunCZpye1kB2CNnbNehM5-lmTU3IdoHQ3DJbc43xsAJMREfloL7izWgg7x5oNiNzKzj-JHX8P1jRhQsrOuEcIwRptceBg2E18HumcMWe7TdSwzXpNtNGnzD0BOj3nslwhN8XMnaxI/s400/11.png) repeat-x;
border:1px solid #ddd;
-moz-border-radius:6px;
-webkit-border-radius:6px;
box-shadow: 5px 5px 5px #CCCCCC;
padding:5px;
font:normal 12pt "ms sans serif", Arial;
color:#2F97FF;
width:560px; height:213px !important;
}
#mbt-form a{
color:#fff;
}

Kemudian cari lagi kode <div class='comment-form'>
Sekarang ganti kode <div class='comment-form'> dengan kode berikut dibawah ini:

<div id='mbt-form'>

Simpan template..Selesai

Cara membuat threaded comment dengan CSS di blog

noreply@blogger.com (jalupangna) — Sat, 01 Jun 2013 05:10:00 +0000

Postingan saya kali ini berkenaan dengan threaded comment. Saya akan share ke anda tentang membuat threaded comment dengan CSS. Threaded comment ini saya dapatkan dari MDF-Blog. Karena salah satu sobat blogger menanyakan tentang threaded comment yang saya pakai, maka saya share dan posting kembali.

LANGKAH-LANGKAHNYA:

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 pencarian
Berikutnya pastekan kode CSS tepat diatas kode ]]></b:skin>

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height:1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#comments-block .avatar-image-container img {width: 35px;height: 35px;position:absolute}
.comments .comments-content .icon.blog-author{width:16px;height:16px;display:inline-block;vertical-align:top;background:transparent url('/favicon.ico') no-repeat 50% 50%}
.comments .comments-content .loadmore a {
border-top: 1px solid #AD3000;
border-bottom: 1px solid #AD3000;
}
.comments .comments-content .datetime a{
font-size:11px;
float: right;
}
.comment-block .comment-footer a:link, a:visited {
}
.comments .avatar-image-container {
    margin-left:-5px;
}
.comments .continue a{ display:inline;font-weight:bold; background: #AD3000; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding:1px 5px !important; margin-right:5px; border:1px solid #860000; color:#FFF;box-shadow:0 4px 6px rgba(0,0,0,0.1);-moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3)
}
.comments .continue a:hover {background:#860000;}
#comments-block li, .comments .comments-content .comment-thread ol li, .comments .comments-content .comment:last-child {
background:#fff;
margin:10px 0;
padding:5px 10px;
border-top:1px solid #AD3000;
border-left:4px solid #AD3000;
border-bottom:1px solid #AD3000;
border-right:1px solid #AD3000;
-webkit-border-radius: 0px 0px 0px;
-moz-border-radius: 0px;
border-radius: 0px;
box-shadow:0 4px 6px rgba(0,0,0,0.1);-moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3)
}
.comment-actions a {font-weight:bold; background: #AD3000; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding:1px 5px !important; margin-right:5px; border:1px solid #860000; color:#FFF;box-shadow:0 4px 6px rgba(0,0,0,0.1);-moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);-webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3)}
.comment-actions a:hover { background: #860000; color:#fff;}
.avatar-image-container {
-webkit-box-shadow:
        1px 1px   0 rgba(0,   0,   0,   0.100),
        3px 3px   0 rgba(255, 255, 255, 1.0),
        4px 4px   0 rgba(0,   0,   0,   0.125),
        6px 6px   0 rgba(255, 255, 255, 1.0),
        7px 7px   0 rgba(0,   0,   0,   0.150),
        9px 9px   0 rgba(255, 255, 255, 1.0),
        10px 10px 0 rgba(0,   0,   0,   0.175);
-moz-box-shadow:
        1px 1px   0 rgba(0,   0,   0,   0.100),
        3px 3px   0 rgba(255, 255, 255, 1.0),
        4px 4px   0 rgba(0,   0,   0,   0.125),
        6px 6px   0 rgba(255, 255, 255, 1.0),
        7px 7px   0 rgba(0,   0,   0,   0.150),
        9px 9px   0 rgba(255, 255, 255, 1.0),
        10px 10px 0 rgba(0,   0,   0,   0.175);
box-shadow:
        1px 1px   0 rgba(0,   0,   0,   0.100),
        3px 3px   0 rgba(255, 255, 255, 1.0),
        4px 4px   0 rgba(0,   0,   0,   0.125),
        6px 6px   0 rgba(255, 255, 255, 1.0),
        7px 7px   0 rgba(0,   0,   0,   0.150),
        9px 9px   0 rgba(255, 255, 255, 1.0),
        10px 10px 0 rgba(0,   0,   0,   0.175);
-moz-transition:
-moz-transform 0.5s ease 0s;
}
.avatar-image-container:hover {transform:scale(1.5) rotate(3600deg) translate(0px);-moz-transform:scale(1.5) rotate(3600deg) translate(0px);-webkit-transform:scale(1.5) rotate(3600deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 2.5s ease;-webkit-transition:all 2.5s ease
}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}

Simpan template

KUSTOMISASI

Silahkan anda ganti dan modifikasi warna sesuai dengan template anda (lihat kode yang diberi warna diatas)
Anda sudah harus mengaktifkan threaded comment pada template.
Kalau anda belum mengaktifkan threaded comment pada template silahkan ikuti langkah-langkah berikut:
cari kode:

<b:include data='post' name='comments'/>

Setelah anda menemukan kode diatas biasanya terdapat 3 atau 4 kode yang sama, kemudian ganti semua kode diatas dengan kode berikut:

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

Simpan template

Sedikit pengetahuan tentang ruh

noreply@blogger.com (jalupangna) — Fri, 31 May 2013 02:45:00 +0000

وَيَسْأَلُونَكَ عَنِ الرُّوحِ قُلِ الرُّوحُ مِنْ أَمْرِ رَبِّي وَمَا أُوتِيتُم مِّن الْعِلْمِ إِلاَّ قَلِيلاً

"Dan mereka bertanya kepadamu tentang ruh. Katakanlah, “Ruh itu termasuk urusan Tuhanku [Ruh min Amri Robbi], dan tidaklah kamu diberi pengetahuan melainkan sedikit”. (Al Israa’: 85)

Dalam diri manusia yang telah disempurnakan Allah sebagai manusia sejati (insan kamil) terdapat secuil ‘unsur yang sangat mulia,’ yaitu yang dibahasakan dalam Al Qur’an sebagai ‘Ruhul Quds’. Ruhul Quds bukanlah malaikat Jibril a.s, Jibril disebut sebagai Ruhul Amin, bukan Ruh Al-Quds. Ruh Al-Quds juga dikenal dengan sebutan Ruh min Amr, atau Ruh dari Amr Allah (Amr = urusan).

Ruh-Nya atau Ruhul Quds ini bukan dalam pengertian bahwa Allah memiliki ruh yang menghidupkan-Nya seperti kita. Ruh ini merupakan ruh ciptaan-Nya, sebagaimana ruh yang menjadikan diri kita hidup sekarang, namun dalam martabat tertingginya, dalam tingkatannya yang paling agung dan paling dekat kepada Allah.

Dengan adanya Ruh yang berasal dari sisi Allah swt inilah manusia mempunyai kesadaran akan Tuhan dan bisa terhubung dengan Tuhan, Ruh ini bersifat sebagai Cermin yang Suci dan jernih yang mampu memantulkan kembali Cahaya Nur Allah dan Sifat-sifat Allah yang Maha Agung, dan Mampu memantulkan kembali Getaran Cahaya Nama-nama Indah Allah swt (Asma'ul Husna). Sehingga menjadi terang benderanglah diri kita.

Roh itu termasuk urusan Tuhanku [Ruh min Amri Robbi] bermakna Hanya melalui Kesadaran Ruh Ilahiah inilah manusia mampu terhubung dengan Cahaya Allah yang memancar dari ARSY ALLAH atau Alam Maha Kosmos atau Alam Ketuhanan. Karena Kesadaran ini tidak muncul dan berasal dari kemampuan manusia dalam mengolah dan meningkatkan kesadaran spiritualnya, namun murni anugerah Allah swt. dari Alam Amr Tuhan.

Apabila Ruh Ilahi diibaratkan nur yang terang benderang maka jasmani di ibaratkan suatu tempat yang gelap gulita semisal ruangan. Padahal tidaklah akan tampak terang suatu cahaya bila ia tidak bertempat pada yang gelap gulita. Begitu pula keadaan gelap pekatnya jasmani dikatakan gelap gulita bila tidak ada sesuatu yang meneranginya. Demikianlah pengertian “Ruh” sebagai “Nur” dalam istilah wahyu-Nya.

Setiap ciptaan memiliki ruh. Manusia (ruh insani), tanaman (ruh nabati), hewan (ruh hewani), bahkan benda mati pun memilikinya. Atom-atom dalam benda mati sebenarnya ‘hidup’ dan terus berputar, dan ruh bendawi inilah yang menjadikannya ‘hidup’. Karena itu pula, benda, tumbuhan, hewan, bahkan anggota tubuh kita kelak akan bersaksi mengenai perbuatan kita di dunia ini. Namun demikian, ruh-ruh ini bukanlah ruh dalam martabat tertingginya seperti Ruh Al-Quds.

Ketika Allah berkehendak untuk memperlengkapi diri seorang manusia dengan Ruh Al-Quds, maka inilah yang menyebabkan manusia dikatakan lebih mulia dari makhluk manapun juga. Termasuk lebih mulia dari Malaikat dan Iblis dan seluruh makhluk di alam semesta.

Allah swt berfirman dalam Surat Al Kahfi ayat 50,

"Dan (ingatlah) ketika Kami berfirman kepada para malaikat: "Sujudlah kamu kepada Adam, maka sujudlah mereka kecuali Iblis. Dia adalah dari golongan jin, maka ia mendurhakai perintah Tuhannya. Patutkah kamu mengambil dia dan turanan-turunannya sebagai pemimpin selain daripada-Ku, sedang mereka adalah musuhmu? Amat buruklah iblis itu sebagai pengganti (dari Allah) bagi orang-orang yang zalim."[QS. Al Kahfi : 50]

Dengan adanya Ruh Ilahiah inilah seorang manusia mampu untuk mengakses dan menundukkan segala kekuatan yang ada di alam semesta tanpa khawatir terkena resonansi negatif (Magnet Dunia/Hubbud Dunya) dari mereka. Allah swt berfirman :

"Dan Dia menundukkan untukmu apa yang ada di langit dan apa yang ada di bumi semuanya, (sebagai rahmat) daripada-Nya. Sesungguhnya pada yang demikian itu benar-benar terdapat tanda-tanda (kekuasaan Allah) bagi kaum yang berfikir” (QS. Al-Jaatsiah; 13)

Sabda Rasulullah SAW :

إن الْعُلُمَاءُ وَرَثَةُ اْلأَنْبِيَاءِ، إِنَّ اْلأَنْبِياَءَ لَمْ يُوَرِّثُوْا دِيْناَرًا وَلاَ دِرْهَماً إِنَّمَا وَرَّثُوْا الْعِلْمَ فَمَنْ أَخَذَ بِهِ فَقَدْ أَخَذَ بِحَظٍّ وَافِرٍ

“Sesungguhnya ulama adalah pewaris para nabi. Para nabi tidak mewariskan dinar dan dirham, tetapi mereka hanya mewariskan ilmu maka barangsiapa mengambil warisan tersebut ia telah mengambil bahagian yang banyak.” (Tirmidzi, Ahmad, Ad-Darimi, Abu Dawud. Dishahihkan oleh Al-Albani)

Imam Syafi`i berkata:

"Aku mengadukan perihal keburukan hafalanku kepada guruku, Imam Waki’ bin Jarrah. Guruku lalu berwasiat agar aku menjauhi maksiat dan dosa. Guruku juga berkata, ‘Muridku, ketahuilah bahwa ilmu itu adalah cahaya. Dan cahaya Allah tidak akan diberikan kepada orang-orang yang suka berbuat maksiat."

Ibn Al-Qayyim menulis bahwa:

“Sesungguhnya ilmu adalah sinar yang diletakkan oleh Allah di dalam hati, sedangkan maksiat memadamkan sinar tersebut”

Nur AL-WASILAH, adalah Nur syafaat dari Rasulullah yang diberikan kepada umat manusia dan yang kemudian Beliau wariskan kepada para sahabat dan diwariskan secara berantai oleh Para Guru Sufi.

Dengan adanya Nur Al-Wasilah yang ditanamkan ke dalam dada manusia, maka lapisan tubuh spiritual manusia pada dimensi atas termasuk Kesadaran Ruh Ilahiahnya akan terbuka hijabnya. Sehingga Cahaya Allah dapat menerobos ke relung jiwa dan hati manusia yang tergelap dan paling dasar sekalipun.

Cahaya yang Terpuji (Nur Muhammad)

noreply@blogger.com (jalupangna) — Wed, 29 May 2013 22:52:00 +0000

Sebelum semua makhluk diciptakan Allah, Nur Muhammad lah yang pertama kali diciptakan. Di dalam hadits qudsi Allah swt berfirman kepada Nabi Muhammad saw:

Aku adalah perbendaharaan yang tersembunyi, Aku ingin dikenal kemudian Aku ciptakan alam (makhluk) agar Aku bisa dikenal.

Dengan merenungkan tanda-tanda alam dan ayat-ayat Al Qur’an kaum muslimin dapat memperoleh kilasan aspek Ke-Ilahian yang telah dituangkan di alam semesta yang oleh Al Qur’an disebut sebagai wajah Allah (wajh-Allah).

Di dalam hadits qudsi tersebut di atas terdapat kalimat yang berbunyi: Kemudian Aku ciptakan alam (makhluk)….. Ini masih berbentuk cahaya dan cahaya itu terbagi-bagi sebagaimana pendapat Ka’ab bin Akbar ra dalam kitab yang berjudul Madari: Yusu’ud (tangga-tangga kenaikan) yang di tulis oleh Syeh Nawawi pada halaman 2 s/d 3, yang terjemahannya kurang lebih sebagai berikut:

Berkata Ka’ab bin Akbar ra:

Ketika Allah hendak menciptakan Maujudat/makhluk, menghamparkan bumi dan meninggikan langit. Allah menggenggam seganggam dari nurNya dan berfirman: Kun Muhammad, maka jadilah segenggam nur tadi menjadi sebuah tiang dari nur yang memancarkan cahaya sampai menembus hijab-hijab kegelapan.

Lalu tiang itu bersujud dan berkata: Allahu Akbar. Allah berfirman kepada tiang nur itu: “Aku ciptakan kamu dan Aku beri nama kamu Muhammad. Darimu Ku awali semua makhluk, dan darimu Ku akhiri semua para utusan”.

Kemudian Allah membagi empat bagian. Kemudian Allah ciptakan Lauhil Mahfud dari bagian pertama. Lalu Qalam dari bagian yang kedua. Allah berfirman : kepada Qalam, “Tulislah !” maka bergetarlah Qalam seribu tahun kedahsyatan kedahsyatan kitabullah. Lalu Qalam berkata, “Apa yang harus aku tulis ?” Allah berfirman : “Tulislah Lailaaha Illallah Muhammadurrasulullah”. Maka Qalam menulis kalimat itu. Lalu Qalam diberi petunjuk tentang ilmu Allah yang berkaitan dengan makhluk, kemudian Qalam menulis, Anak cucu Adam dari sulbinya; siapa yang taat kepada Allah akan masuk surga, siapa yang maksiyat kepada Allah akan masuk neraka. Umat Nuh; siapa yang taat kepada Allah masuk surga…Umat Ibrahim; siapa yang taat kepada Allah, masuk surga, siapa maksiat…Umat Musa; siapa yang taat kepada Allah masuk surga, siapa maksiat kepada Allah ….Umat Isa; siapa yang taat kepada Allah masuk surga, siapa maksiyat kepada Allah…Umat Muhammad; siapa yang taat kepada Allah masuk surga, siapa maksiyat kepada Allah….ketika Qalam mau menulis kalimat berikutnya ( masuk neraka ) tiba- tiba ada seruan dari Yang Maha Tinggi: “Hai Qalam beradablah kamu”. Maka pecahlah Qalam karena karena kedahsyatan seruan itu, dan sobek ujungnya berbentuk garis lurus, dengan tangan kudrat maka jadilah adap. Qalam tidak bisa menulis kecuali pecah bergaris ujungnya. Lalu Allah berfirman: “Tulislah, umat berdosa Tuhan Maha Pengampun” kemudian Allah menciptakan Arasy dari bagian yang ke tiga. Dari bagian yang ke empat menjadi empat bagian:
1. Bagian kesatu dijadikan akal
2. Bagian kedua dijadikan ma’rifat (agar dapat mengetahui)
3. Bagian ketiga dijadikan cahaya Arsy dan sinar penglihatan serta seluruh cahaya termasuk siang (matahari), sinar malam (bulan dan bintang). Semua cahaya ini berasal dari Nur Muhammad, Nur Muhammad adalah awal segala makhluk
4. Bagian yang ke empat dititipkan di bawah arasy, sampai Allah menciptakan Adam. Kemudian Allah menitipkan bagian itu (nur Muhammad) pada punggung Adam, bersujudlah para Malaikat.

Kemudian Allah memasukkan Adam ke surga, para Malaikat berbaris rapi di belakang Adam, menyaksikan nur tersebut. Adam berkata: “Ya Allah kenapa para Malaikat berkumpul di belakangku?” Allah berfirman : “Wahai Adam mereka melihat nur kekasihku Muhammad penutup para utusan yang Aku keluarkan (pancaran cahaya) dari punggung mu” Adam berkata: “Ya Tuhan jadikan nur itu di depan saya, supaya saya bisa melihat dan berhadapan dengan malaikat”. Maka Allah memindahkan nur itu pada dahi nabi Adam, Malaikat berbaris di depan Adam. Adam berkata: “Ya Tuhan, jadikan Nur ini di tempat yang aku bisa melihat. Maka Allah jadikan Nur itu pada telunjuk Adam. Adam bisa melihat Nur itu bertambah bagus, megah dan Adam mendengar Nur itu bertasbih penuh keagungan, kemudian Nur itu pindah ke Hawa (istri Adam), seperti matahari yang bersinar.

Kemudian ditentukan permulaan para utusan dari Nabi Sis as. Maka hilanglah Nur itu di wajah Hawa pindah ke Nabi Sis as. Lalu Adam mengambil sumpah Nabi Sis as. Bahwasanya: “Tidak akan menyimpan Nur itu kecuali dari yang suci ke yang suci, dari yang mulia ke yang mulia,” sampai pada sulbi Abdullah bin Abdul Mutholib. Kemudian Allah mengeluarkannya ke dunia ini dan menjadikannya Raja para Utusan Rahmatan lil alamin dan seorang panutan yang memancarkan cahaya yang terang benderang.

Demikian dikala Nabi Muhammad saw. Diturunkan ke dunia, beliau disinari cahaya yang terang benderang sehingga, cahaya matahari yang menyinarinya tidak bisa memberi bayangan, dikarenakan cahaya Nur Muhammad lebih terang dari pada sinar matahari, itu terjadi di sepanjang hidup sampai beliau wafat. Dan siapa generasi penerusnya setelah Rasulullah saw. wafat?

Melihat dari sumpah Nabi Adam as. yang berbunyi tidak akan menyimpan Nur itu kecuali dari yang suci ke yang suci, dari yang mulia ke yang mulia. Mengingat risalah yang di bawa oleh Rasulullah saw. Dan dilanjutkan para pewarisnya yaitu para sahabat, para wali yang suci, dan para tabiin serta para ulama’ (yang disucikan dan yang dimuliakan oleh Allah swt.)

Jadi manusia yang dititipi Nur Muhammad, adalah orang-orang yang suci dan orang-orang yang dimuliakan oleh Allah swt. Adapun orang- orang yang mensucikan diri sehingga ia mencapai pada tingkat kesucian ruh mereka diberi petunjuk untuk menuju ke jalan yang sampai kepada ruhnya ruh Nur Muhammad, karena ruh tercipta dari percikan Nur Muhammad dikala bersujud dan bertasbih kepada Allah selama ribuan tahun.