Testimoni 2

Beranda Biodata Pondok Biodata Staf Akademik Fasilitas Informasi Artikel Karya Santri Album Tentang

Unggulan

Notebook

Pelaksanaan Shalat Hajat Lidaf Il Bala Di Tahun 2022

Selasa, 20/9/22 Shalat hajat lidaf il bala adalah shalat sunnah mutlaq yang dikerjakan di malam Rebu Wekasan atau Rabu terakhir di bulan Syafar. Selengkapnya...

Logo Madrasahku

create your own banner at mybannermaker.com!

APLIKASI DI BLOG

Cara Membuat Halaman Testimoni di Blog

  1. Silahkan Anda salin kode HTML & CSS serta JavaScript dibawah ini.
    2. <div id="responsive-container"> <div class="testimonial"> <div id="slideshow1"> <img src="ALAMAT_URL_FOTO_PROFIL_1"/> <p>KATA_TESTIMONI_1</p> <div>NAMA PELANGGAN 1</div> <h3>JABATAN PELANGGAN 1</h3> </div> <div id="slideshow2" style="display: none"> <img src="ALAMAT_URL_FOTO_PROFIL_2"/> <p>KATA_TESTIMONI_2</p> <div>NAMA PELANGGAN 2</div> <h3>JABATAN PELANGGAN 2</h3> </div> <div id="slideshow3" style="display: none"> <img src="ALAMAT_URL_FOTO_PROFIL_3"/> <p>KATA_TESTIMONI_3</p> <div>NAMA PELANGGAN 3</div> <h3>JABATAN PELANGGAN 3</h3> </div> <div id="slideshow4" style="display: none"> <img src="ALAMAT_URL_FOTO_PROFIL_4"/> <p>KATA_TESTIMONI_4</p> <div>NAMA PELANGGAN 4</div> <h3>JABATAN PELANGGAN 4</h3> </div> </div> </div> <style> #responsive-container{width:100%;margin:auto}.testimonial{height:500px;width:100%;padding:1em;margin:1em auto} .testimonial div{text-align:center;vertical-align:middle;color:#42b549;font-size:1.5em;margin-bottom:20px;} .testimonial h2{font-size:30px;font-weight:300;margin:25px 0 48px 0;width:100%;text-align:center} .testimonial img{margin:0 1em 0 1em;border-radius:50%;width:150px;height:150px} .testimonial p{text-align:center;vertical-align:middle;color:#555;font-size:18px} .testimonial h3{font-size:15px;text-align:center} #slideshow1, #slideshow2, #slideshow3, #slideshow4{background:transparent} </style> <script type="text/javaScript"> function startSlides(start, end, delay) { setTimeout(slideshow(start,start,end, delay), delay); } function slideshow(frame, start, end, delay) { return (function() { $('#slideshow' + frame).fadeOut(); if (frame == end) { frame = start; } else { frame += 1; } setTimeout(function(){$('#slideshow' + frame ).fadeIn();}, 850); setTimeout(slideshow(frame, start, end, delay), delay + 850); }) } // usage: startSlides(first frame, end frame, delay time); startSlides(1, 4, 5000); </script>
  2. Lalu buka Blogger > Halaman > Halaman Baru > Ubah mode menjadi HTML
  3. Paste kode yang sudah disalin tadi, lalu edit bagian-bagian kode yang sudah saya beri tanda merah sesuai data yang inginkan.
  4. Jika sudah selesai, klik " Publish "

Agar halaman testimoni bisa di kunjungi orang lain, silahkan salin alamat URL nya lalu letakan di menu navigasi blog Anda.

Contoh Halaman

=================================*****====================================

Cara Membuat Tab View di Blog

Saya sendiri kadang bingung, banyak widget yang harus di tampilkan di sidebar blog saya tapi karena tempat tidak mencukupi akhirnya tidak saya pasang. Untuk mengatasi semua itu kita bisa memakai cara dengan cara membuat menu tab view 3 kolom yang tentunya akan menghemat tempat, karena kita bisa menaruh widget-widget blog yang kita inginkan di dalam menu tab view tersebut.
Berikut cara membuat menu tab view di blog:
Masuk blogger >> rancangan >> edit html >> centang expand template widget
cari kode ]]></b:skin>
copy kode di bawah ini kemudian paste tepat di atas kode ]]></b:skin>
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 103px;
text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 0.5px solid #000000;
border-bottom-width: 0;
text-decoration: none;
font: 12px Arial, "Times New Roman", Serif;
font-weight: 900;
color: #000080;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #CEF6CE;
}
div.TabView div.Pages
{
clear: both;
background-color: #FFFFFF;
border: 0.5px solid #000000;
overflow: hidden;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
Perhatikan tulisan :
width: 103px; = lebar tabs (tab1, tab2, tab3).
background-color: #CEF6CE; = warna latar belakang tabs (tab1,tab2,tab3).
selanjutnya cari kode </head>kemudian pastekan kode script di bawah ini tepat di atas kode </head>
<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == &quot;A&quot;)
{
i++;
Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;
Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == &#39;Page&#39;)
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;
Page.style.overflow = &quot;auto&quot;;
Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>
Kemudian Simpan / Save Template.
Selanjutnya Klik Design/Rancangan >> Page Element >> Add a Gadget >>HTML/Javascript
copy kode di bawah ini di dalam box atau kotak HTML/Javascript
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Isi tab 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Perhatikan tulisan merah width: 350px; ini adalah ukuran kotak seluruhnya bukan per tab. Kemudian tulisan Judul Tab 1,2,3 itu adalah lah judul tab, contoh gambar di atas judulnya adalah recent post, recent comment, statistic. Kemudian Isi tab 1,2,3  bisa di isikan script html, banner dan script widget lainnya.. Sampai disini selesai tidaklah begitu sulit cara menambah menu tab view di blog, hanya membutuhkan kesabaran sedikit saja :D. Pengen blog sobat lebih cantik? Beri juga navigasi nomor halaman di blog. Berikut cara membuat navigasi nomor halaman di blog.
Silahkan di coba semoga berhasil.

=====================*****=======================

 Cara Membuat Buku Tamu di Blog
             Sudah berkali-kali banyak yang kecewa karna Buku Tamu yang hanya biasa mengecewakan orang lain. Karna itu kami memberikan solusi yang pastibisa dijamin kebenarannya. Buku tamu merupakan tempat untuk menaruh pesan singkat di blog anda ketika sedang ada yang berkunjung. blog ini membuatkan layanan buku tamu untukmempermudah para blogger. Kami menyediakan Buku Tamu yang terlihat dan yang tersembunyi. Maksud dari kata tersembunyi disini bukan lah buku tamu yang tidak bisa dilihat oleh pengujung, tetapi Buku tamu ini akan berada di sebelah artikel blog yang akan terbuka jika ada yang klik gambar buku tamu tersebut. Langkah ini merupakan salah satu langkah dalam menghemat tempat di blog kita. Jika anda tertarik untuk membuat buku tamu ini, silahkan ikuti langkah berikut: 

1. Buat shoutbox gratis di http://www.freeshoutbox.net/
2. Login di blogger dengan ID sobat
3. Masuk ke Tata Letak
4. Kemudian klik Tambah Gadget
5. Kemudian klik HTML / Javascript
6. Kemudian isikan judul sesuai keinginan sobat dan paste kode HTML yang sobat dapatkan    ketika login ke freeshoutbox.net di bidang konten.                                                                                           7. Kemudian sobat bisa menyimpannya. Tetapi jika sobat menginginkan Buku Tamu yang tersembunyi, sobat bisa memasukkan kode HTML dibawah ini:

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisArSQK89-Wm_mBQq-QJF7AZWnuTuygMs_Cf30TKS4FJEEW0B6IbePjQMhSErqNSdf8Vc7iIlkf8DbIWpea2P3r8BZvjcL9QDdKK_a0rYHKrtBxQb55nLQzPaLH4zsLOYh3FzEuwtnZt_m/') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">

< Letakkan disini kode Shoutbox Anda>

<div style="text-align:right">
<a href="http://amronbadriza.blogspot.com/2012/05/cara-membuat-buku-tamu-tersembunyi-di.html">
[Blogaul]
</a>|<a href="javascript:showHideGB()">
[tutup]
</a>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div>
Ganti tulisan < Letakkan disini kode Shoutbox Anda> dengan kode script buku tamu sobat.
7. Kemudian simpan Widget tersebut.
       Jika langkah tersebut sudah anda lakukan, anda dapat melihat hasilnya pada blog anda masing-masing. Demikianlah cara memasang buku tamu tersembunyi ini, semoga bermanfaat.

============*****==============

Cara Membuat Read More Pada Blogger

Berikut adalah langkah - langkah cara membuat read more di blogger :

Mode Compose
  1. Buatlah sebuah artikel seperti biasanya. Pastikan mode post editor dalam keadaan mode Compose. mode compose
  2. Tempatkan cursor mouse komputer anda di akhir kalimat yang ingin di potong, klik tool jump break.read more
  3. Silahkan publikasikan artikel anda.
  4. Selesai.
Langkah diatas adalah cara membuat read more dalam keadaan mode compose, apabila anda terbiasa menggunakan mode HTML, berikut adalah langkah-langkahnya:

Mode HTML
  1. Buatlah sebuah artikel seperti biasanya. Pastikan mode post editor dalam keadaan mode HTML.mode HTML
  2. Tempatkan cursor mouse komputer anda di akhir kalimat yang ingin di potong, lalu masukkan kode berikut :
    <!--more-->
    read more
  3. Silahkan publikasikan artikel anda.
  4. Selesai.
Sangat mudah bukan?

Semoga artikel cara membuat read more pada blogger bermanfaat bagi anda.

Cara Membuat Tag Cloud , Label Berputar Di Blog

tag cloud / label berputar
Hai kawan aku pengen posting nich tentang bagaimana cara membuat tag cloud berputar di blog, atau label berputar, tapi baru bisa saat ini. Memang sulit tapi aku gak nyerah untuk belajar membuat label berputar pada blog. Nah berikut ini adalah hasil dari apa yang aku pelajari , yaitu membuat tag cloud bisa berputar..kamu bisa lihat hasil cara membuat label berputar pada blog punyaku ini. Kalu dah bisa sebenarnya mudah untuk bikin label berputar. 
CATATAN : Tidak semua template dapat mendukung untuk dikasih tag cloud. Dan sebelum kamu nyoba bikin label berputar, mending kamu download template punyamu dulu. 
Okey...mari belajar bersama blog "CARAPADA", langkah-langkahnya :
Lihat Demo Blogspot yang sudah ada tag cloudnya di Buat Radio
1. Login ke  blogspot,
2. Klik Design/Rancangan >> Edit HTML >> Centang Expand Templates Widget,
3. Cari kode : <b:section class='sidebar' id='sidebar' preferred='yes'> ( kalau mau lebih cepat nyarinya pakai F3 aja.
4. Lalu copy paste kode di bawah ini tepat berada di bawah kode tadi,
<b:widget id='Label99' locked='false' title='Tag Cloud Comulus Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<script src='http://sites.google.com/site/bloggerustemplatus/code/swfobject.js' type='text/javascript'/>
<div id='flashcontent'>Blogumulus by <a href='http://www.roytanck.com/'>Roy Tanck</a> and <a href='http://www.bloggerbuster.com'>Amanda Fazani</a></div>
<script type='text/javascript'>
var so = new SWFObject(&quot;http://sites.google.com/site/bloggerustemplatus/code/tagcloud.swf&quot;, &quot;tagcloud&quot;, &quot;240&quot;, &quot;300&quot;, &quot;7&quot;, &quot;#ffffff&quot;);
// uncomment next line to enable transparency
//so.addParam(&quot;wmode&quot;, &quot;transparent&quot;);
so.addVariable(&quot;tcolor&quot;, &quot;0x333333&quot;);
so.addVariable(&quot;mode&quot;, &quot;tags&quot;);
so.addVariable(&quot;distr&quot;, &quot;true&quot;);
so.addVariable(&quot;tspeed&quot;, &quot;100&quot;);
so.addVariable(&quot;tagcloud&quot;, &quot;<tags><b:loop values='data:labels' var='label'><a expr:href='data:label.url' style='12'><data:label.name/></a></b:loop></tags>&quot;);
so.addParam(&quot;allowScriptAccess&quot;, &quot;always&quot;);
so.write(&quot;flashcontent&quot;);
</script>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
 ==================================================
5. Sebelum kamu save, alangkah baiknya kamu priview dulu, kalau dah berhasil , baru kamu save .

CATATAN
1. Warna Merah : Ganti untuk merubah ukuran tag cloud
2. Warna Hijau : Ganti untuk merubah warna background tag cloud
3. Warna Biru : Ganti untuk merubah ukuran font
4. Tag Cloud akan berjalan apabila komputer sudah terinstal adobe flash player.
Bagimana, apakah ingin nyoba cara bikin label berputar biar blog kelihatan keren ...?
Selamat mencoba....aja yach ...

==============*****==================
Cara Membuat Banner Tukar Link Pada Blog



Tukar Link
Hai kawan  blogger ...? posting kali ini mengenai cara membuat banner tukar link untuk meningkatkan traffic blog. Untuk membuatnya cukup mudah dan memasang banner pun juga mudah. 
1. Langkah pertama yang perlu dipersiapkan yaitu membuat banner terlebih dahulu. Kawan - kawan dapat membuatnya melalui adobe photosop atau corel draw atau program lain yang dapat mendukung misalnya format gambar gif.
2. Langkah kedua : mengupload gambar atau banner yang kawan buat tadi misalnya di photobucket, imageshack, namun lebih baik kamu upload ke picasa web album. Terkadang kalau di imageshack, misal sudah lama akun kamu tidak kamu upgrade, maka berubah jadi gambar kodok. Sebagai contoh di bawah ini adalah banner blogku  yang lain , gambar aku upload di tinypic.

3. Langkah ketiga yaitu membuat kode html banner
- Kode untuk menampilkan banner : 

<a href="http://carapada.blogspot.com/"><img alt="carapada" src="
http://i54.tinypic.com/2up4chs.gif/
"/></a>

- Kode untuk menampilkan kode html dengan textarea 

<textarea code="" rows="4" cols="21" name="">
<a href="http://carapada.blogspot.com/"><img alt="carapada" src="http://i54.tinypic.com/2up4chs.gif
"/></a>
</textarea>
 

Cara membuat banner tukar link mudah kan ? Jangan lupa ganti kode url menjadi kode url blog anda,serta ganti url gambar sesuai gambar anda.

===========================*****==========================================

Cara Mengganti Cursor Blog

Ada yang ingin mengganti cursor (Kursor) blog blogger dengan tampilan cursor yang lain ???? Mungkin teman ingin membuat blog blogger yang teman miliki lebih cantik dengan kursor yang unik, atau yang teman inginkan, misalnya dengan gambar sepertini

atau dengan gambar yang lain.
Yah terserah lah, yang penting sesuai selera.
Jika ia, maka artikel ini perlu teman baca, perhatikan dan praktekkan ke blog atau situsnya.  
Disini saya hanya akan menuliskan panduan cara mengganti kursor di blogger saja, heheeee  
Panduan Cara Mengganti Cursor Blog Blogger
Langkah Pertama
Seperti biasa, silakan login ke dashboard blogger, kemudian klik Rancangan/Design => terus klik EDIT HTML.

Langkah Kedua
Temukan kode css, seperti ini

body {
background:#xxxxx;
font-size: xxxxx;
font-family: xxxxx;
dst.... 
}
Kode yang terpenting di temukan adalah kode body { background: Jika kode tersebut sudah ditemukan silakan tambahkan kode berikut sebelum tanda

cursor: url('http://3.bp.blogspot.com/-f83GJSJeXw4/TkCIJo2nRKI/AAAAAAAAABU/
WZFhGqHwJFw/s1600/jasablogsitus-web-id.gif'),text

Sehingga nanti jadinya seperti ini

body {
background:#160500;
cursor: url('http://3.bp.blogspot.com/-f83GJSJeXw4/TkCIJo2nRKI/AAAAAAAAABU/
WZFhGqHwJFw/s1600/jasablogsitus-web-id.gif'),text;
font-size: xxxxx;
font-family: xxxxx;
dst.... 
 
Jika teman menggunakan semua kode ini maka cursor blog teman akan berubah 
menjadi gambar daun (seperti gambar di atas)
Jika teman ingin mengganti gambar cursornya dengan gambar yang lain, 
silakan ganti kode yang saya beri warna  purple dengan link gambar yang 
teman inginkan
Teman-teman bisa mencari gambar cursor lewat Google dengan mengetikkan 
kata kunci Free Cursor, Free Cursor For Website, dsb. Atau mau bikin 
cursor sendiri juga boleh.

Selamat mencoba dan semoga berhasil
===============*****=================
CARA BIKIN DAFTAR ISI DI LAMAN BLOG

Daftar Isi sangatlah diperlukan bagi pengunjung untuk mengetahui artikel dan menu apa saja yang ada di blog kita. Maka dari itu saya mau bagi-bagi tips blog tentang Cara Bikin Daftar Isi Di Laman Blog, gini nih caranya :

1. Seperti biasa Login dulu ke akun blog
2. Trus ke Dasbor > Entri Baru >Edit laman > Laman Baru                                                          3. Tulis di Judul Laman Daftar Isi
4 Klik Edit HTML, lalu Copy-Paste link di bawah ini 

<link href="http://abu-farhan.com/script/acctoc/acc-toc.css" media="screen" rel="stylesheet" type="text/css"></link>
<script src="http://abu-farhan.com/script/acctoc/daftarisiv2-pack.js">
</script>
<script src="http://vienoo808.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc">
</script>
<script type="text/javascript">
var accToc=true;
</script>
<script src="http://abu-farhan.com/script/acctoc/accordion-pack.js" type="text/javascript">
</script>

*Catatan :
Ganti tulisan yang berwarna merah dengan URL blog anda
6. Tinggal Simpan atau Save

SELAMAT MENCOBA ~

==============================*****=======================================

CARA BIKIN DAUN JATUH DI BLOG 

Bagi anda yang ingin menghias blog anda agar lebih keliatan unik, kayanya efek daun jatuh cocok anda gunakan untuk menghiasi blog anda. Selain tampilannya yang unik loadingnya juga lebih ringan dan cepat dari pada efek bintang yang bertaburan. Agar tidak bertele-tele, gini nih caranya :

1. Login ke akun blog anda                                                                       2. Trus ke Darbor > Rancangan > Edit HTML , centang Expand widget template                                                                                                    3. Cari kode </head>, lalu copy paste javascript di bawah kode </head> tadi :                                            <script src='http://arti.master.irhamna.googlepages.com/daun.js'/>
*Tip :
Biar cepet gunakan tombol CTRL + F atau F3 untuk nyari kode
4. Simpan/Save dan lihat hasilnya

Bagaimana? Bagus tidak? Ya pastilah.
SELAMAT MENCOBA ~

Tidak ada komentar:

Posting Komentar

Langganan: Komentar (Atom)