Ceramah Agama K.H. Ahmad Syairozi Lamongan

KH Ahmad Syairozi dari pesantren Roudhatul Muta'alimin Sawahrejo - Moropelang Kec Babat Kabupaten Lamongan adalah penerus generasi dari Almaghfurlah KH Muhammad Shofyan. KH Ahmad Syairozi merupakan jebolan Ponpes Darus Salam Ponorogo (Gontor) juga pernah menimba ilmu di PonPes Langitan Tuban, Ponpes Al-Anwar Sarang Rembang. Beliau sangat populer di kawasan Lamongan, Tuban dan Bojonegoro lewat ceramahnya yang lucu dan sarat dengan makna sehingga membuat pedengar mudah dalam mencerna apa yang disampaikan dan tak lepas juga ceramahnya bikin kelakar bagi yang mendengarkan.

Download

Read More

Memasang Gambar Bergerak di Blog

             Menambahkan tampilan gambar di blog dapat memperindah dan memperamai blog. Ketika ingin menambahkan gambar di blog secara biasa dapat dengan menambahkan gadget gambar. Namun ada keterbatasan, yaitu hanya satu gambar untuk setiap upload, sehingga apabila ingin menampilkan beberapa gambar dapat memakan ruang. Solusi untuk mengatasi masalah tersebut sebenarnya simpel yaitu dengan memanfaatkan fitur marquee (gerak). Fitur marquee yang biasanya digunakan pada teks saja kini juga dapat dilakukan untuk gambar. Hasilnya gambar dapat bergerak secara otomatis dan tidak terlalu memakan ruang yang banyak di blog. 

Cara Membuat Widget Gambar Bergerak di blog

1. Login ke blog Anda
2. Pilih Tata Letak (Layout)
3. Pilih Tambahkan Gadget (Add Gadget) dan pilih widget HTML/JavaScript
4. Silahkan copy kode/script di bawah ini, kemudian paste pada Konten widget tersebut

<marquee direction="up" onmouseover="this.stop()" scrollamount="4" onmouseout="this.start()">
<img src="URL GAMBAR 1" width="100%" height="100%" /><br />
<img src="URL GAMBAR 2" width="100%" height="100%" /><br />
<img src="URL GAMBAR 3" width="100%" height="100%" /><br />
<img src="URL GAMBAR 4" width="100%" height="100%" /></marquee>

Keterangan:
a. Mengganti arah gerak gambar dapat dilakukan dengan mengubah:direction="up"
b. Menambahkan gambar dengan cara menganti URL GAMBAR
c. Lebar (Width) dan Tinggi (Height) dapat diubah sesuai selera anda. Jika 100% maka secara otomatis akan memenuhi batas widget

5. Klik Simpan (Save)
6. Simpan Setelan untuk menampilkannya pada blog.

Sekian tips dari saya tentang Cara Membuat Widget Gambar Bergerak di blog, semoga bermanfaat untuk anda.

Read More

Memasang Gambar Bergerak di Blog

             Menambahkan tampilan gambar di blog dapat memperindah dan memperamai blog. Ketika ingin menambahkan gambar di blog secara biasa dapat dengan menambahkan gadget gambar. Namun ada keterbatasan, yaitu hanya satu gambar untuk setiap upload, sehingga apabila ingin menampilkan beberapa gambar dapat memakan ruang. Solusi untuk mengatasi masalah tersebut sebenarnya simpel yaitu dengan memanfaatkan fitur marquee (gerak). Fitur marquee yang biasanya digunakan pada teks saja kini juga dapat dilakukan untuk gambar. Hasilnya gambar dapat bergerak secara otomatis dan tidak terlalu memakan ruang yang banyak di blog. 

Cara Membuat Widget Gambar Bergerak di blog

1. Login ke blog Anda
2. Pilih Tata Letak (Layout)
3. Pilih Tambahkan Gadget (Add Gadget) dan pilih widget HTML/JavaScript
4. Silahkan copy kode/script di bawah ini, kemudian paste pada Konten widget tersebut

<marquee direction="up" onmouseover="this.stop()" scrollamount="4" onmouseout="this.start()">
<img src="URL GAMBAR 1" width="100%" height="100%" /><br />
<img src="URL GAMBAR 2" width="100%" height="100%" /><br />
<img src="URL GAMBAR 3" width="100%" height="100%" /><br />
<img src="URL GAMBAR 4" width="100%" height="100%" /></marquee>

Keterangan:
a. Mengganti arah gerak gambar dapat dilakukan dengan mengubah:direction="up"
b. Menambahkan gambar dengan cara menganti URL GAMBAR
c. Lebar (Width) dan Tinggi (Height) dapat diubah sesuai selera anda. Jika 100% maka secara otomatis akan memenuhi batas widget

5. Klik Simpan (Save)
6. Simpan Setelan untuk menampilkannya pada blog.

Sekian tips dari saya tentang Cara Membuat Widget Gambar Bergerak di blog, semoga bermanfaat untuk anda.

Read More

Cara Membuat Popular Post Warna-warni Pelangi

Widget artikel populer warna-warni dengan style belah ketupat ini ada juga yang menyebutnya Rainbow Popular Post dikarenakan warnabackgroundnya yang seperti pelangi. Aslinya merupakan gadget popular post bawaan Blogger, hanya saja dilakukan penambahan kode CSS tertentu pada template sehingga tampilan widget bisa jadi lebih bagus dan keren sekaligus mempercantik tampilan blog sobat dong tentunya. Well sobat, silahkan simak cara pembuatan widget popular post dengan warna-warni pelangi dibawah ini.

Baik sobat langsung saja inilah Cara Memasang Rainbow Popular Post di blogger :

1.       Login ke dashboard blogger anda.

2.       Pilih menu Template > Edit HTML.

3.      Cari kode ]]></b:skin> pada template.

4.      Copy script dibawah ini dan paste tepat diatas kode ]]></b:skin> tadi.

/* Rainbow Popular Post Style Start */

#PopularPosts1 ul li a:hover{color:#fff;text-decoration:none}

#PopularPosts1 ul li a {-webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;  color: #333333; display: block; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 18px; margin: 0px 40px 0px 0px; min-height: 30px; orphans: 2; padding: 0px; text-align: -webkit-auto; text-decoration: none !important; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;}

#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:51px;height:51px}

#PopularPosts1 ul li:first-child:after,

#PopularPosts1 ul li:first-child + li:after,

#PopularPosts1 ul li:first-child + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after,

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{position:absolute;top:10px;right:5px;border-radius:50%;border:2px solid #ccc;background:#353535;-webkit-box-shadow:0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li{background:#d1ffff;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li + li:after{content:"10"}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li{background:#c7f25f;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li + li:after{content:"9"}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li {background:#f59095;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li:after{content:"8"}

#PopularPosts1 ul li:first-child + li + li + li + li + li +li{background:#f6993d;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li + li:after{content:"7"}

#PopularPosts1 ul li:first-child + li + li + li + li +li{background:#7ee3c7;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li + li:after{content:"6"}

#PopularPosts1 ul li:first-child + li + li + li + li{background:#ff00ff;width:90%}

#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}

#PopularPosts1 ul li:first-child + li + li + li{background:#5faff2;width:90%}

#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}

#PopularPosts1 ul li:first-child + li + li{background:#a9ed04;width:90%}

#PopularPosts1 ul li:first-child + li + li:after{content:"3"}

#PopularPosts1 ul li:first-child + li{background:#ffde4c; width:90%}

#PopularPosts1 ul li:first-child + li:after{content:"2"}

#PopularPosts1 ul li:first-child{background:#ff4c54 ;width:90%}

#PopularPosts1 ul li:first-child:after{content:"1"}

#PopularPosts1 ul{margin:0;padding:0px 0;list-style-type:none}

#PopularPosts1 ul li{position:relative;margin:3px 0;border-radius:25px 0px 25px 0px;border:2px solid #f7f7f7;-webkit-box-shadow:3px 3px 3px #000;-moz-box-shadow: 3px 3px 3px #000;padding:10px}

/* Rainbow Popular Post Style End */

5.       Save / Simpan template anda.

6.       Kemudian untuk setting pada gadget Popular Post sobat harus mengaturnya seperti gambar dibawah ini. Hilangkan semua tanda centang (checklist) pada tulisan Tampilan.

7.       Nah kalau semua sudah dilakukan dengan benar, sekarang anda sudah memiliki widget artikel populer atau popular post keren dengan tampilan warna-warni pelangi.

8.       Silahkan mencoba mengutak-ngatik sendiri kode CSS diatas untuk merubah jenis atau ukuran font, warna background dan seterusnya. Namun jangan lupa backup dulu kode templatenya ya !

Cukup mudah bukan ternyata Cara Membuat Widget Popular Post Warna Pelangi di blogspot ini ? Tingggal copas kode css diatas pada template dan sobat sudah bisa langsung melihat hasilnya. Semoga bermanfaat dan happy blogging.

Read More

Cara Memasang Burung Twitter Terbang di Blog

Cara membuat / memasang widget burung Twitter terbang di Blogger, mungkin trik ini sudah tidak asing lagi bagi sobat dan sudah banyak sekali saya melihat blog yang sudah memasang widget burung Twitter terbang ini dengan berbagai macam style dan warna burung Twitter yang berbeda-beda, sekarang saya akan mengulas kembali khusus buat teman-teman blogger yang baru membuat blog dengan platform blogspot

Twitter adalah layanan jejaring sosial yang sangat populer sekarang ini selain Facebook dan Google+ dan tidak salah banyak orang yang beramai-ramai untuk menjalin koneksi melalui Twitter apakah itu untuk keperluan bisnis maupun hanya sekedar berteman saja, nah bagi sobat yang mempunyai blog tidak ada salahnya memasang widget burung twitter terbang ini selain membuat blog sobat cantik dan unik, widget ini juga mempermudah sobat untuk menjalin pertemanan baru dengan pembaca blog sobat, hanya dengan sekali klik pada burung twitter yang terbang maka akan otomatis terhubung dengan profileTwitter sobat,
Ok tanpa panjang lebar mari kita kupas bersama-sama cara memasang widget ini

Pertama-tama silahkan login di Blogger

• Klik Layout > Add Gadget > Html/Javascript
• Copy paste kode di bawah ini ke kolom Html/javascript

<!-- floating twitter Bird -->
<script type="text/javascript" src="https://googledrive.com/host/0B7X69YyzZu-IZjFKQ19VVi10RlE/tripleflap.js"></script>
<script type="text/javascript">
var birdSprite="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-SIw6oVK9ruPWHkpeUWOqW23aeWwSXiEsgTZhh07PtOtHaynuYg37BRSxLU2vifgKhTbwwgCBFSndk1-5GJYQlrCANQzX6hK-D92IHlNsbkzP07wSSQfwvai-WsV4AdEJjr4OQsqAWAU/s1600/burung+twitter+terbang.png";
var targetElems=new Array("img","hr","table","td","div","input","textarea","button","select","ul","ol","li","h1","h2","h3","h4","p","code","object","a","b","strong","span");
var twitterAccount = "http://twitter.com/Username";
var tweetThisText = "Twitter - UserID http://bloggerpeer.blogspot.com/";
tripleflapInit();
</script>

• Ganti kode yang berwarna biru dengan nama pengguna (username) akun Twitter sobat
• Simpan dan lihat hasilnya

Warna Pilihan Burung Terbang Twitter

Untuk membuat warna burung Twitter yang lain sobat bisa mengganti kode yang berwarna merah diatas dengan kode-kode dibawah ini sesuai dengan warna pilihan yang sobat inginkan

Warna Kuning

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzq4i96MA9EGo6BBVZN3WucF_XsYs_3gdII0EvfgEu4gw_2LmBjn0KCN47i6EFs30z-abcEB4prYntFhwRaJbDrenxdTk2pXegkUJEoqUvDi40ggG-RjLQaVlBRYlYDGsqfSv9XZjxzEY/s1600/yellow+bird.png

Warna Hitam

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJW7vRgfq9OgvMj5fmvTp1Mhcpas0QL0JYeR301gEcALeO4FOEHnlVYt1oYCu7qcr5iQtZEfpH77JMVjRq-f0Ilwhh4p2BwMtmAb2owl6tcUe2ZnhQUlwNgqNJ2Vp-viV0fdJsX6PCfDo/s1600/black+bird.png

Warna Biru

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgzU1DswXmCrry8KNSXo-HB-lXE-znrpbv8ovyeiGFWjyUkvABocvzqfRKY8Ogaer9KagykIY3ugGD5UpLvnNFOLUAdjMFaGriHcjMf72Du5aeiCm0CF5ageqxA3wGvDAmH_GkYuoV0n0/s1600/Blue+bird.png

Warna Coklat

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqrkAymktpjyjD1Qv5kznWzUkcVMKzbXZYWAgwHJOs34admP-19D8oJ3XlSSEkmjCktA5Tarx_rjDECeOpHT11zCuQazRJN11Uj_4y9_pQqMY7l1iwi11AvSMz9fnd83tTeysCchDFlYY/s1600/brown+bird.png

Warna Hijau

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIgSYSzq4AjS9EvCLlbz1-WRkOulhc7zkPKWyi-J3wfcolJ7BdSRPomVoaJzxwI8dbOlaTTBQ3Q9uoh7nfgJtnYBMzQ7dpAvF36_B3GF-sECYlXk6WbU8-bDnd3u6p9_Ms6nho7I1D8sQ/s1600/Green+bird.png

Warna Ungu

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTcpo4vR-qQnxMos5KmQkCt5dLi0MckiUwLX86P52loFlxci1Ao_8CdlRHgxVwsQMXzIfFkHCVVDcKt7RxJnUmmfyuuimaYs5FI-H_Zp5HgE6t1IrSFTzFgXpfe9LOIkly_CLASjVsNPY/s1600/purple+bird.png

Warna Putih

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBjCWt7G0EMGxA1wpx7yJUMNyv4D4devYT2iBPIhPgtkyzOapamO-gttQqLn0bk0ocK7yq1ODyxT3PcFI9_9FHxEUqhfMYO34kpEBSmqko_V3Sxym3HWHEzmWAOrjK-u9D8ejqF_YnvVk/s1600/white+bird.png

Warna Merah

• https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1EZBFSgt-bYt3SLBur5EgYExGeAi7cVkML4BcKVu6PTk1DuGbfg2fH4x6JGkTmooj7__lIXywzqUE-r_lHOByXz4sR-zfqAbe6IMkhbZlcsqF6ypIwp3EZp8_C0QRazsuiOKeIxRy_Ts/s1600/red+bird.png

Dan terakhir jangan lupa disimpan
Good luck Sob..!

Read More