Selasa, 25 Februari 2014

Membuat Jadwal Sholat

Pasang Jadwal Sholat di Sidebar Blog

Jadwal sholat ini dilengkapi dengan hari, tanggal, dan tahun serta jam kapan jadwal sholat tersebut diakses. Selain itu, tampilannya disertai dengan pesan sponsor. Jadwal sholat ini memuat waktu sholat untuk 56 wilayah atau kota di Indonesia. Embed dari jadwal sholat tersebut adalah:

<iframe src="http://www.republika.co.id/jadwal_sholat/index.php" scrolling="no" width="300" height="130" frameborder="no" framespacing="0"> </iframe>

Jadwal sholat yang satu ini cocok dipasang di sidebar sebuah blog yang mempunyai lebar 300 piksel atau lebih. Namun, bila ingin tetap menaruhnya di sidebar yang kurang dari 300 piksel, kita dapat menggunakan fungsi scroll untuk menyiasatinya. Misalnya, kita akan memasang jadwal sholat ini pada sidebar yang mempunyai lebar 262 piksel atau kurang dari itu, maka kita apit embed jadwal sholat tersebut dengan kode <div style="overflow:auto; width:100%px;"> dan</div>. Sehingga kodenya menjadi seperti di bawah ini.

<div style="overflow:auto; width:100%px;"><iframe src="http://www.republika.co.id/jadwal_sholat/index.php" scrolling="no" width="300" height="130" frameborder="no" framespacing="0"> </iframe></div>

Maka hasilnya adalah seperti di bawah ini:

Untuk memasangnya di sidebar, silakan masuk ke akun Blogger >> Rancangan >> Elemen Laman >> Tambah Gadget >> HTML/JavasScript. Lalu masukkan kodenya di Konten danSimpan.

Senin, 24 Februari 2014

Sabtu, 22 Februari 2014

Cara Gampang Membuat Read More Otomatis di Blog

Cara Gampang Membuat Read More Otomatis di Blog . Banyak para blogger yang masih kebingungan untuk membuat readmore secara otomatis di blog mereka, walaupun banyak sekali artikel-artikel yang mebahas bagaimana cara membuat readmore otomatis. Hal ini disebabkan karena banyaknya artikel yang copas padahal si pemilik blog sendiri tidak faham dengan caranya. Disini saya akan menjelaskan cara membuat readmore otomatis secara detail sehingga blogger pemula sekalipun bisa membuatnya.

Ngomong-ngomong mungkin blogger pemula atau newbie masih bingung apa itu readmore?. Read more adalah penggalan dalam sebuah artikel, biasanya hanya menampilkan beberapa kalimat saja dan biasanya di tandai dengan kata “READ MORE”, “BACA SELENGKAPNYA”, ” LANJUTKAN MEMBACA”, dll.

Manfaat readmore juga untuk mempersingkat atau merapihkan artikel yang panjang, jadi postingan artikel anda akan tersusun rapi dengan hanya menampilkan gambar dan beberapa kalimat saja.

Untuk demonya silahkan klik link dibawah ini.

CONTOH READ MORE

Cara membuat readmore otomatis dengan gambar

Silahkan buka template anda. Pilih: TEMPLATE >> EDIT.
Cari Kode </head>.
Copy paste kode dibawah ini tepat di atas kode </head>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>
<style>
.post-body{text-align:justify;}
.post-body img{max-width:none;width:auto;}
.read-more{float:left; padding-top: 10px;}
.read-more a{ color: #fff!important;text-shadow:0 1px 0 rgba(0,0,0,0.5);background:#0457A9; text-decoration:none;font:bold 13px Arial;padding:5px;}
.read-more a:hover{text-decoration:none;background:#666;}
.pic{border: 10px solid #fff;float:left;height:165px;width:250px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:165px;width:250px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = "yes"; //yes -dengan gambar, no -tanpa gambar
summary_noimg = 300; //banyaknya huruf jika tidak ada gambar
summary_img = 250; //banyaknya huruf jika ada gambar
img_thumb_height = 165;
img_thumb_width = 250;
</script>
<script type='text/javascript'>//<![CDATA[
function removeHtmlTag(strx,chop){if(strx.indexOf("<")!=-1){var s = strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);}}strx = s.join("");}chop = (chop < strx.length-1) ? chop : strx.length-2;while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;strx = strx.substring(0,chop-1);return strx+'...';}function createSummaryAndThumb(pID){var div = document.getElementById(pID);var imgtag = "";var img = div.getElementsByTagName("img");var summ = summary_noimg;if(thumbnail_mode == "yes"){if(img.length>=1){imgtag = '<div class="grow pic"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';summ = summary_img;}}var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';div.innerHTML = summary;}
//]]></script>
</b:if>
</b:if>

Save Template anda.
Kemudian scroll template anda kebawah cari kode seperti berikut:

Ket: Kata kuncinya adalah didalam kotak hitam "BLOG POSTS / POSTINGAN BLOG" jika anda menggunakan bahasa indonesia.

Jika suda menemukan kode seperti gambar di atas silahkan klik anda panah kecil warna hitam sebelah kiri.
Setelah tanda panah kecil di klik maka akan ada tampilan seprti gambar berikut

Cari kode yang di tandai dengan kotak hitam. "POST' VAR='POST'".
Setelah ketemu klik tanda panah yang lurus dengan kode tersebut.
selanjutnya akan terbuka kode kode yang lain.
geser atau scrol ke bawah dan cari kode

<data:post.body/>

Setelah ketemu hapus kode diatas dan ganti dengan kode dibawah ini:

<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>");
</script>
      <div class='read-more'>
      <a expr:href='data:post.url'>Baca Selengkapnya »</a>
      </div>
</b:if>
</b:if>

Klik SAVE / SIMPAN dan lihat hasilnya.

Terlihat seperti sulit tetapi jika sambil di praktekan pasti bisa karena ini sudah sangat detail, jika saya menjelaskan dengan singkat mungkin para blogger pemula tidak akan mengerti atau kesusahan membuatnya.

Sekian dulu sari saya untuk Cara Gampang Membuat Read More Otomatis di Blog semoga bermanfaat dan jika masih ada yang tidak dimengerti anda dipersilahkan untuk bertanya langsung.

sumber:trikseosimpleblogspot.com

Kamis, 12 September 2013

Cara Membuat Permainan Catur/Chess di Blog

Written By m fadlan anel on Sabtu, 27 April 2013 | 16.16

- Pada hakikatnya fungsi blog adalah sebagai tempat untuk berbagi dan bertukar informasi antar sesama pengguna Internet, selain itu banyak blog juga memberikan fasilitas hiburan seperti permainan dan film. Jika tanpa adanya om Matt Mullenweg mungkin blogsphere Internet tidak akan sama seperti yang sekarang ini ramai oleh blog dan website dari berbagai macam platform dan developer, atas kerja keras dan kejeniusan-nya akhirnya beliau dijuluki sebagai "Bapak Pendiri Blog". Nampaknya sekarang ini hiburan adalah hal yang sangat diburu-buru oleh banyak peselancar di Internet, karena mereka merasa Internet adalah rumah ke-2 bagi mereka, bahkan ada salah satu band fenomenal di Eropa yang mengaku tidak bisa hidup tanpa adanya Internet.

Untuk itu, pernahkah anda mencoba untuk memasang permainan di blog anda? mungkin sarana seperti ini dapat dijadikan sebagai sekedar hiburan untuk meramaikan blog anda, jadi blog anda tidak selalu berisikan konten-konten yang mungkin akan membosankan pengunjung loyal dan membuat mereka refresh kembali. Widget permainan catur ini saya dapatkan dari widgetbox, yaitu salah satu penyedia widget ternama. Nantinya di dalam permainan ini akan disediakan 3 varian atau tingkat kesulitan seperti Easy, Medium, dan Hard.

Dan bagi anda seorang pemilik blog yang menyukai olahraga catur, tentunya widget ini sangat wajib untuk diterapkan di blog anda, karena selain permainanya yang menyenangkan, desain dan tampilanya juga tidak kalah bagus dengan widget-widget permainan sejenisnya. Untuk pemasanganya juga tidak terlalu sulit kok, anda cukup memasang kode di bawah ini pada lokasi yang anda inginkan, namun kali ini saya akan menjelaskan untuk memasang di laman blog.

1. Login ke Blogger.

2. Pilih Laman.

3. Klik Laman Baru > Laman Kosong.

Cara Membuat Permainan Catur/Chess di Blog

4. Pilih opsi postingan HTML, bukan ~~Compose~~.

5. Letakkan kode di bawah ini kedalamnya.

<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script type="text/javascript">if (WIDGETBOX) WIDGETBOX.renderWidget('7721bb06-c6fc-453b-9538-73c1a2d55259');</script>
<noscript>Get the <a href="http://www.widgetbox.com/widget/chess-sem_81">Chess</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>! Not seeing a widget? (<a href="http://support.widgetbox.com/">More info</a>)</noscript>

6. Klik "save", dan selesai.

Demikian informasi mengenai cara membuat permainan (games) catur/chess di blog, baca juga artikel informatif lainya seputar tutorial blog tentang cara membuat fitur print this page di blog, semoga bermanfaat, dan selamat mencoba.

Read more: http://www.tuliskan.com/2013/04/cara-membuat-permainan-catur-chess-di-blog.html#ixzz2RhxukrjC

TUTORIAL MENGELOLA WEBSITE PRIBADI

Membuat Kategori untuk artikel atau Berita

Cara Menulis Artikel

Mengelola Komentar pada website Anda

Menambahkan Panel pada website Anda

Panel ini berfungsi untuk memasukan text, gambar, atau scripts pada website member, yang akan muncul di samping website anda yang letaknya tergantng theme (tampilan website) yang di gunakan