Tampilkan postingan dengan label BLOG. Tampilkan semua postingan
Tampilkan postingan dengan label BLOG. Tampilkan semua postingan

Senin, 06 Januari 2014

Cara Mengaktifkan Blockquote Pada Blog

Assalamualaikum Wr. Wb.

Pagi sobat D3Putri ^ _ ^ Kali ini, admin akan membahas tentang Cara Mengaktifkan Blockquote Pada Blog. Apa itu blockquote? Yaitu tempat untuk menaruh teks-teks seperti ini
Lalu, bagaimana caranya? Simak baik-baik dibawah ini ya.....
1. Buka dulu akun blogger sobat. Lalu pergi ke menu Pos
2. Setelah itu, pilih Entri Baru. Nanti jangan pilih yang Compose, tapi yang HTML
3. Masukkan kode-kode berikut
<blockquote class="tr_bq">
4. Terus ketik aja tulisan yang sobat mau. Dan diakhir tulisan, jangan lupa masukkan kode </blockquote>

Cara membuat tabel pada posting / halaman blog

Terkadang dalam beberapa posting / halaman blog kita ingin membuat sebuah tabel untuk keperluan tertentu, entah itu gambar atau teks. Namun sayangnya pada menu blogger tidak dilengkapi dengan menu pilihan untuk membuat tabel secara otomatis, jadi penulis / pemilik blog harus membuat secara manual dengan script HTML.

Pada dasarnya perintah kode HTML untuk membuat tabel terdiri dari tiga saja. Yaitu :
* Untuk mengawali perintah membuat sebuah tabel adalah dengan kode HTML <table> 
   dan sebagai penutup perintah membuat tabel tersebut di akhiri dengan kode HTML </table>
* Perintah untuk membuat sebuah kolom tabel adalah dengan menggunakan kode HTML  <td>
   dan untuk menutup perintah membuat kolom tabel tersebut di akhiri dengan kode </td> 
* Sedangkan perintah untuk membuat baris tabel adalah dengan kode HTML <tr> 
   dan untuk menutup perintah membuat baris tabel tersebut diakhiri dengan kode HTML </tr>


Contoh 1 :
Jika ingin membuat sebuah tabel yang terdiri dari 3 kolom dengan 1 baris, maka kode perintah HTML nya adalah seperti berikut :

<table border="1">
<tr>
<td>KOLOM KE-1</td> <td>KOLOM KE-2</td> <td>KOLOM KE-3</td>
</tr>
</table>


Keterangan :
* Perintah Script / kode tersebut hanya dapat dituliskan pada pilihan mode penulisan "HTML", dan perintah Script tersebut tidak akan dapat berjalan jika di tuliskan pada mode penulisan "Text Rich" atau "Compose".

Maka hasil dari perintah kode HTML di atas adalah seperti yang terlihat pada tabel di bawah ini :

KOLOM KE-1 KOLOM KE-2 KOLOM KE-3

Contoh 2 :
Jika ingin membuat sebuah tabel yang terdiri dari 3 kolom dengan 2 baris, maka kode perintah HTML nya adalah seperti berikut :

<table border="1">
<tr>
<td>BARIS KE-1 KOLOM KE-1</td> <td>BARIS KE-1 KOLOM KE-2</td> <td>BARIS KE-1 KOLOM KE-3</td>
</tr>
<tr>
<td>BARIS KE-2 KOLOM KE-1</td> <td>BARIS KE-2 KOLOM KE-2</td> <td>BARIS KE-2 KOLOM KE-3</td>
</tr>
</table>


Keterangan :
* Perintah Script / kode tersebut hanya dapat dituliskan pada pilihan mode penulisan "HTML", dan perintah Script tersebut tidak akan dapat berjalan jika di tuliskan pada mode penulisan "Text Rich" atau "Compose".



Maka hasil dari perintah kode HTML di atas adalah seperti tabel di bawah ini :

BARIS KE-1 KOLOM KE-1 BARIS KE-1 KOLOM KE-2 BARIS KE-1 KOLOM KE-3
BARIS KE-2 KOLOM KE-1 BARIS KE-2 KOLOM KE-2 BARIS KE-2 KOLOM KE-3

Contoh 3 :
Jika ingin membuat sebuah tabel yang terdiri dari 2 kolom dengan 2 baris, kemudian pada baris ke 1 diisi dengan teks atau tulisan sedangkan pada baris kedua diisi dengan gambar , maka perintah kode HTML yang digunakan adalah sebagai berikut :


<table border="1">
<tr>
<td>GAMBAR-1</td> <td>GAMBAR-2</td>
</tr>
<tr>
<td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-3GJV3QnasvOFLJ9Sn2C9WYnEfI7aDc1pbnmF7igLCNxw7r1c7yaEkEs-RJEFxuLfW_5VMUxL38mxOe239lk0V1atxQ-ZMD24uy4nQ75qil7eAGiEOK1pQtMO4We4yezrh9ChoMJydq5W/s144/t-shirt.jpg" height="96" width="144" /></td> 
<td><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpvC4-J9jiJwSfpmg91t_VmVjKJPGQ0-NWKX0L-Gsv9BIunh1NjMAzJ8NkK0mBm19y6UQdlL2QqpsO3vr6XYi60ISfjh7xPnbK1Ii5D199KO1STVpZYkc2kIZRLibPwbeQtdGb7_DsArsa/s144/topi.jpg" height="96" width="144" /></td>
</tr>
</table>

Keterangan :
* Perintah Script / kode tersebut hanya dapat dituliskan pada pilihan mode penulisan "HTML", dan perintah Script tersebut tidak akan dapat berjalan jika di tuliskan pada mode penulisan "Text Rich" atau "Compose".
* Pada text / tulisan yang berwarna merah pada script diatas adalah link URL tempat penyimpanan gambar. Silahkan diganti dengan URL gambar yang akan ditampilkan ke dalam tabel.
height adalah ukuran tinggi gambar, silahkan diatur dan disesuaikan dengan keinginan.
width adalah ukuran lebar gambar, silahkan diatur dan disesuaikan dengan keinginan

Maka hasil tampilan dari perintah kode HTML di atas adalah seperti yang terlihat pada tabel di bawah ini :

GAMBAR-1
GAMBAR-2



Selamat mencoba, semoga dapat bermanfaat

Jumat, 26 Juli 2013

Cara Mempercepat IDM dengan IDM Optimizer

Cara Mempercepat IDM dengan IDM Optimizer merupakan cara terbaru mempercepat kecepatan download IDM, setelah sebelumnya saya juga pernah membahas tentang cara mempercepat download idm dengan cara setting manual sekarang kita memanfaatkan tool bernama IDM Optimizer, dengan menggunakan tool ini kita tidak perlu repot - repot lagi menyeting IDM, karena semua tinggal klik aja.
cara mempercepat idm dengan idm optimizer pic

 Mempercepat IDM dengan Idm Optimizer

IDM Optimizer memiliki 2 pilihan menu :
  • Maximize Now (Meningkatkan kecepatan download idm)
  • Restore Default (Mengembalikan setingan idm ke standart)
Berikut langkah - langkah mempercepat download idm dengan idm optimizer :
  • Pertama download dulu idm optimizer disini atau jika gagal silakan masuk disini.
  • Install hasil download kalian.
  • Buka idm optimizer dan klik "Maximize Now".
  • Jika ada permintaan restart silakan klik "Ok".
  • Selesai dan lihat hasilnya!!!
Kecepatan download dari Cara mempercepat idm dengan idm optimizer ini  juga tergantung kestabilan koneksi internet kalian, untuk itu pilihlah koneksi internet yang stabil sesuai daerah kalian masing-masing.Berikutnya jangan sampai kelewatan bagaimana seting download idm mirip utorrent Selamat Mencoba!

Cara Seting IDM Download Super Cepat (MAX SPEED)

Cara seting IDM Download Super Cepat ini merupakan sebuah cara agar IDM kita jadi super kencang saat mendownload sebuah file. Cara ini sudah saya praktekan dan lumayan menaikan kecepatan download IDM. Cara seting IDM agar download super cepat sangat gampang sekali tetapi kecepatan download juga tergantung koneksi yang anda gunakan, dan cara ini bisa diterapkan untuk semua jenis koneksi internet anda (wive-LAN, WIFI, Dial-up, dll). Bagi yang belum tahu apa itu IDM, IDM atau internet download manager adalah sebuah software untuk memanage download berbagai macam file dan memiliki kecepatan yang lebih cepat dari download manager lain atau biasa di sebut download accelerator.
cara seting idm download super cepat

Cara Seting IDM Download Super Cepat

Langkah - langkah mempercepat idm :
  1. Pertama buka dulu IDM anda
  2. Pilih Options
  3. Pada Connection/ Speed, pilih Other, dan pada Default Max conn.number rubah jadi 16
  4. Tutup IDM
  5. Klik Start kemudian Run dan tuliskan "regedit" tanpa petik , kemudian klik ok , Jalankan Regedit>HKey_Current_User>Software>Download Manager> (lihat jendela kanan) Connection Speed>double click>pilih decimal> isi dengan 99999999 >OK
  6. tutup regedit (close )
  7. Restart Komputer dan selesai.

Berikutnya setelah cara seting IDM download super cepat diatas telah dilakukan dengan benar cobalah mendownload sebuah file dan lihat bedanya. Akan ada perbedaan dari sebelumnya tetapi cara ini juga tergantung koneksi internet anda. Dan semoga cara seting IDM download super cepat ini bermanfaat.

Updated :  Sekarang cara mempercepat idm bisa dilakukan dengan mudah dan simple dengan idm optomizer selengkapnya disini.

Cara Membuat Efek Teks Tulisan Berjalan (Marquee) di Blog

Cara Membuat Efek Teks Tulisan Berjalan (Marquee) di Blog - Artikel ini merupakan panduan dasar dalam memberikan pernak-pernik untuk sebuah blog. Teks tulisan berjalan termasuk beberapa pernak pernik yang sering digunakan untuk memberikan tampilan beda untuk sebuah teks atau tulisan bahkan artikel pun bisa dibuat berjalan. Teks tulisan berjalan di blog biasanya disebut dengan Marquee. Jika diartikan dengan fungsinya, marquee tidak memiliki keterkaitan karena arti dari marquee sendiri adalah Tenda Besar dan bukan teks tulisan berjalan. Mungkin marquee merupakan bahasa pemograman yang memiliki arti teks tulisan berjalan, tapi entahlah yang penting yang saya tahu marquee memiliki fungsi agar teks tulisan didalam blog memiliki efek bergerak atau berjalan.

Efek Teks Tulisan Berjalan (Marquee) di Blog

Teks tulisan berjalan atau marquee biasanya ditempatkan dibagian atas atau bawah blog dan sedikit sekali yang memasangnya dibagian sidebar atau bagian kanan kiri blog. Membuat tulisan teks berjalan dengan fungsi marquee ini memiliki beberapa efek kriteria atau karakteristik dalam tampilannya. Seperti efek berjalan secara umum, berjalan dengan efek berkedip, dan berjalan dengan efek berhenti jika disorot dengan kursor. Beberapa efek tersebut bisa anda lihat seperti Demo berikut ini.


Teks Tulisan Berjalan Dari Kanan Ke Kiri

<marquee direction="left" scrollamount="2" align="center">Teks Tulisan Berjalan Dari Kanan Ke Kiri</marquee>  Teks Tulisan Berjalan Dari Kiri Ke Kanan

<marquee direction="right" scrollamount="2" align="center">Teks Tulisan Berjalan Dari Kiri Ke Kanan</marquee>
  Teks Tulisan Berjalan Dari Kiri Ke Kanan Berkedip

<marquee direction="right" scrollamount="2" align="center"><blink>Teks Tulisan Berjalan Dari Kiri Ke Kanan Berkedip</blink></marquee>

Lalu bagiamana cara membuat tek tulisan berjalan di blog dengan beberapa efek selain seperti pada Demo yang saya pasang diatas? Untuk membuat efek marquee pada tulisan teks di blog, silahkan pilih beberapa efek teks tulisan berjalan berikut ini

 Teks Tulisan Berjalan Bolak Balik Dari Kiri Ke Kanan

<marquee direction="left" scrollamount="2" align="center" behavior="alternate">Teks Tulisan Berjalan Bolak Balik Dari Kiri Ke Kanan</marquee>
  Teks Tulisan Berjalan Bolak Balik Dari Kanan Ke Kiri

<marquee direction="right" scrollamount="2" align="center" behavior="alternate">Teks Tulisan Berjalan Bolak Balik Dari Kanan Ke Kiri</marquee>  Teks Tulisan Berjalan Dari Atas Ke Bawah

<marquee direction="down" scrollamount="2" align="center">Teks Tulisan Berjalan Dari Atas Ke Bawah</marquee>
  Teks Tulisan Berjalan Dari Bawah Ke Atas

<marquee direction="up" scrollamount="2" align="center">Teks Tulisan Berjalan Dari Bawah Ke Atas</marquee>
  Teks Tulisan Berjalan Bolak Balik Dari Atas Ke Bawah

<marquee direction="up" scrollamount="2" align="center" behavior="alternate">Teks Tulisan Berjalan Bolak Balik Dari Atas Ke Bawah</marquee>
  Teks Tulisan Berjalan Zig Zag

<marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right" behavior="alternate">Teks Tulisan Berjalan Zig Zag</marquee></marquee>
  Teks Tulisan Berjalan Zig Zag

<marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right">Teks Tulisan Berjalan Zig Zag</marquee></marquee>  Teks Tulisan Berjalan Berhenti Jika Disorot oleh Kursor Mouse
<marquee onmouseover="this.stop()" onmouseout="this.start() " scrollamount="2" direction="up" width="100%" height="100" align="center">Teks Tulisan Berjalan Berhenti Jika Disorot oleh Kursor Mouse</marquee>
  Teks Tulisan Berjalan Dengan Link Url

<marquee onmouseover="this.stop()" onmouseout="this.start() " scrollamount="2" direction="right" width="100%" height="100" align="center"><a href="/">Teks Tulisan Berjalan Dengan Link Url</a></marquee>


Keterangan :
Direction : Mengatur arah gerakan teks (left, right, up dan down)
Scrollmount : Mengatur kecepatan gerakan. semakin tinggin nilainya semakin cepat
Align : Mengatur posisi teks (left, right, center, justify)
Behavior : Mengatur gerakan teks (scroll, slide, alternate)

Setelah anda memilih atau membuat efek tek tulisan sendiri, untuk memasangnya didalam blog, silahkan salin saya kode-kode yang telah saya tulisa diatas.
Anda bisa memasang efek teks tulisan berjalan tersebut dimanapun yang anda inginkan termasuk didalam postingan atau didalam artikel blog anda. Suka-suka andalah mau dipasang dimana, okey? Jika ada pertanyaan, mari kita diskusikan bersama dengan meninggalkan komentar untuk artikel ini Cara Membuat Teks Tulisan Berjalan (Marquee) di Blog
http://panduantemplateblog.blogspot.com/2013/02/cara-membuat-efek-teks-tulisan-berjalan.html

Kamis, 25 Juli 2013

Cara Membuat Efek Salju, Daun, Bintang Berjatuhan

efek salju bertaburan
Berbagai macam widget dan gadget banyak digunakan untuk menghiasi dinding halaman blog. Efek Salju, Dau, dan Bintang bertaburan lalu berjatuhan adalah yang sering digunakan. Layaknya seperti di musim semi daun berjatuhan dengan indahnya.

Cara Membuat Efek Salju, Daun, dan Bintang berjatuhan sebenarnya mudah. Widget bertebaran ini akan membuat pengunjung menjadi tidak bosan mengunjungi halaman kita. Cara Pembuatan dan cara memasangnya adalah sebagai berikut :

Memasang Efek Salju Bertaburan / Berjatuhan :
1. Login ke Blogger.com
2. Klik Nama Blog Anda.
3. Kemudian pilih Template.
4. Lalu Edit HTML dan Centang Expand Widget Template
5. Copy kode di bawah ini dan letakkan di atas kode </head>
<script src='http://misbahudin-dcaesga.googlecode.com/files/efek-salju.js'/>
6. Simpan Template.

Membuat Efek Daun Berjatuhan di Blog :
Caranya sama seperti langkah 1 sampai 4 diatas.
Lalu copy kode ini diatas </head>
<script src='http://misbahudin.googlecode.com/files/daun%20gugur.js'/>

Cara Memasang Efek Bintang berjatuhan di Blog :
Copy kode berikut dan letakkan diatas kode </head>
1. <script src="http://sites.google.com/site/amatullah83/js-indahnyaberbagi/bintang.hijau.js" type="text/javascript"></script>
2. <script type="text/javascript" src="http://naughtyric.googlecode.com/files/jrRain.js"></script>

Anda dapat menggunakan kode pertama atau kedua sesuai keinginan Anda. Untuk mengganti warna lainnya anda dapat mengunjungi halaman Kumpulan Efek Melayang di Blog.
Tunggu 5 detik dan klik skip add di pojok kanan atas untuk melihatnya.

Cara Membuat Tombol Like Facebook, Twitter, Google+ Blogspot
Source : softwaremaniapc

Dilarang copy paste artikel tanpa menggunakan sumber link - DMCA Protected Readmore: http://www.mediabloger.com/2013/03/cara-membuat-efek-salju-daun-bintang.html#ixzz2a7hc9FCt
Under Creative Commons License: Attribution

Cara Membuat Efek Bintang Bertaburan Pada Cursor Blog

Cara Membuat Efek Bintang Bertaburan Pada Cursor Blog, para blogger untuk variasi blognya dengan berbagai macam cara, salah satunya Efek Bintang Bertaburan Pada Kursor (Cursor) di Blog atau biasanya dikenal efek salju dengan terus berjatuhan saat kursor dipindahkan. ini bertujuan sebagai daya tarik pengunjung agar tahan lama pada blog kita dan juga merasa senang atau kagum dengan kreasi kita.
Untuk Efek Bintang Bertaburan warnanya bisa sobat ganti dengan sesuaikan warna template. jadi ga' sah kwatir dengan gaya monoton. hehehe. bisa kita ganti warnanya sesuai dengan warna yang kita sukai, seperti biru, hijau, merah, ungu, silver, kuning, hitam. ga' bakalan lengkap jika lom ada kodenya. nah,,, sobat bisa lihat tutorial dan kodenya dibah ini:
 Cara Membuat Efek Bintang Bertaburan Pada Cursor Blog
1. Login ke Blogger
2. Klik Tata Letak Pilih Tambah Gadget
3. Lalu tambahkan HTML/JavaScript.
4. Masukan script di bawah ini kedalamnnya.
<script src="http://kikiefendiclock.googlecode.com/files/www.kikiyo.co.cc.cursor-bintang-merah.js" type="text/javascript"></script>

6. Sobat Simpan dan lihat hasilnya.

Catatan :
untuk tulisan merah pada kode diatas bisa sobat ganti dengan warna ksukaan sobat misalnya : merah bisa ganti dengan, hijau, biru, ungu, silver, kuning, hitam.
sekian dulu sobat,,,, ga' pake lama langsung pasang dan lihat bintang yang bertaburan dalam blog. Good Luck

Cara Membuat Auto Read More Berputar




Read More ini berfungsi sebagai peringkas posting agar tidak memanjang. Read More ini sudah terpasang namun anda perlu memotongnya dengan tool bar yang ada diatas disaat anda membuat posting.

Tentu capek bukan?, Digunakanlah Auto Read More ini, auto read more ini berfungsi sama jika anda memotong nya dengan tool bar, dengan menggunakan auto read more ini posting akan terpotong sendirinya.

Tutorial kali ini adalah tutorial yang direquest oleh pengunjung blog kami, yaitu Putut Sanjaya. Ia Menanyakan tentang bagaimana cara untuk membuat icon "read more" berputar. untuk bisa membuatnya berikut cara untuk membuatnya:

Silahkan Masuk Ke Blogger Anda.
Setelah itu, Klik Menu Template, --> Backup templat Anda Terlebih dahulu, --> Lalu, Klik Tombol Edit HTML.
Cari Kode ]]></b:skin> ,dengan menekan CTRL+F.
Masukan Kode Berikut ini diatas kode ]]></b:skin> :
.YBB-readmore {background:black;font-size:18px;color:#32BDE8;height:100px;width:100px;line-height:100px;position:absolute;z-index:999999;-moz-border-radius:200px;-webkit-border-radius:200px;border:8px solid rgba(255, 255, 255, 0.8 );margin-top:-10px;margin-left:170px;-webkit-box-shadow:0 1px 9px red;-moz-box-shadow:0 1px 9px red;-webkit-background-clip:padding-box;-moz-background-clip:padding-box;background-clip: padding-box;opacity:0.9;-moz-transform: rotate(60deg);-webkit-transform: rotate(60deg);box-shadow:0 1px 9px blue;-webkit-transition: all 0.9s ease-in-out;-moz-transition: all 0.9s ease-in-out;-o-transition: all 0.9s ease-in-out;transition: all 0.9s ease-in-out;}
.YBB-readmore:hover {opacity:2;height:100px;width:100px;-webkit-transform:rotate(1080deg);-moz-transform:rotate(1080deg);-ms-transform:rotate(1080deg);-o-transform:rotate(1080deg);transform:rotate(1080deg);box-shadow:0 1px 9px red;}
.YBB-readmore a {color:#ffffff;font-family: 'Rancho', cursive;
text-shadow:0px 0px 1px #ffffff;font-size:18px}

Lalu, Cari Kode </head> dengan menekan CTRL+F.
Masukan Kode Berikut ini diatas kode </head>:
<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='https://daftar-javascript-kami.googlecode.com/files/YBB%20ReadMore.js' type='text/javascript'/>

Cari Kode <data:post.body/> dengan menekan CTRL+F.
Ganti Kode <data:post.body/> dengan kode berikut ini:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<span class='YBB-readmore' style='text-align: right;'>
<a expr:href='data:post.url'>Read More</a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

Setelah itu, Klik Tombol Simpan Template.

Selamat Mencoba,
Salam Sukses,

Cara Membuat Read More Pada Blog, Blogspot, Blogger Otomatis

Cara membuat read more pada blog, blogspot, Blogger OTOMATIS ini sangat mudah sekali, karena hanya tinggal mengcopykan script code yang ada ke template anda, dengan begitu andapun tidak perlu repot lagi dalam hal pembuatan readmore ini, oke tanpa panjang lebar silahkan ikuti langkah-langkahnya seperti yang di bawah ini.:

Cara membuat read more otomatis di blog

Membuat Read More Di Blogspot

► Silahkan Login di akun blogger anda
► Lalu klik Rancangan dan klik Edit HTML
► Jangan lupa untuk mencentang Expand Template Widget
► Untuk menghindari hal2 yang tidak diinginkan maka simpan/backup terlebih dahulu template saudara, untuk menghindari hal yang tidak diinginkan.
► Kemudian Cari kode </head>.  Dan untuk mempermudah pencarian kode nya anda tekan aja ( CTRL + F )
► Lalu silahkan tambahkanlah kode yang ada dibawah ini tepat diatas kode </head> tersebut.



Bila anda ingin merubah ukuran pada Read More di Blogger anda tersebut, kamu tinggal merubah di bagian-bagian kode yang berwarna merah bawah ini, dan Ubahlah angkanya sesuai dengan keinginan.  

summary_noimg = 430; adalah tinggi potongan artikel tanpa gambar    
summary_img = 340; adalah tinggi potongan artikel dengan gambar  
img_thumb_height = 100; adalah ukuran tinggi thumbnail
img_thumb_width = 120; adalah ukuran lebar thumbnail

► langkah Selanjutnya cari kode <data:post.body/> lalu ganti tag <data:post.body/> tersebut dengan kode script di bawah ini :  

 <b:if cond='data:blog.pageType != &quot;item&quot;'> <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script><span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>&#187;&#187;&#160;&#160;READMORE...</a></span> </b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

► dan untuk tulisan " READ MORE " bisa diganti sesuai dengan selera anda.
setelah dipastikan semua udah terpasang dengan benar langkah selanjutnya adalah simpan template dan coba lihatlah hasilnya.

Cara Membuat Read More Otomatis di Blog, Blogspot, Blogger

Cara Membuat Read More Otomatis di Blog, Blogspot, Blogger
Readmore (Foto: ilustration)
Tips Memasang Readmore Blog - Blogger template umumnya tidak semua disertai ‘read more’, tergantung penyesuaian gaya dari sang desainernya. Tanpa ‘read more’ sering ditemui pada template default yang telah  disediakan oleh Blogger. Permasalahannya ketika berada di halaman utama muncul tulisan artikel secara vertikal memanjang sehingga cukup memberatkan loading blog.

Membuat read more pada blog solusi jitu meringankan proses, blog tertata rapi dan terlihat modis. Menu entri Blogger sebenarnya telah menyediakan aplikasi read more yang dapat dilakukan secara manual, yaitu menambahkan kode <!--more--> dibagian editor HTML.

Ada cara otomatis ‘gak ribet’ membuat read more di blog. Demi memudahkan sobat dalam ‘ngeblog’, langsung saja ikuti langkah-langkah cara memasang read more otomatis pada blog di bawah ini:
1. Silahkan login ke akun Blogger,
2. Setelah berada di halaman Dashboard, beralih ke Template,
3. Klik tombol Edit HTML,
4. Sembarang klik di kotak editor, tekan Ctrl + F cari kode </head>,
5. Copykan kode berikut di atasnya,
<script type='text/javascript'> var thumbnail_mode = "no-float" ; summary_noimg = 440; summary_img = 350; img_thumb_height = 100; img_thumb_width = 120; </script> <script src='http://rizqi.moehamed.googlepages.com/read-moreotomatis.js' type='text/javascript'/>
    Sobat dapat mengatur panjang dan lebar readmore dengan mengubah angka berwarna biru,
    berikut keterangannya:
    - summary_noimg = 440: tinggi potongan artikel tanpa gambar. 
    - summary_img = 350: tinggi potongan artikel dengan gambar.
    - img_thumb_height = 100: ukuran tinggi thumbnail.
    - img_thumb_width = 120: ukuran lebar thumbnail.

6. Langkah selanjutnya cari kode <data:post.body/> lalu ganti tag <data:post.body/> dengan kode script
    di bawah ini :
<b:if cond='data:blog.pageType != &quot;item&quot;'> <div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div><script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);</script><span class='rmlink' style='float:right;padding-top:20px;'><a expr:href='data:post.url'>&#187;&#187;&#160;&#160;Read more...</a></span> </b:if><b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
    Untuk mengubah kata ‘read more’, silahkan ganti tulisan yang berwarna merah.

7. Selesai, klik Simpan Template. Jika langkah-langkah di atas sudah benar, sobat sudah bisa
    melihat hasilnya.

Demikian tutorial cara membuat read more pada blog, blogspot, blogger otomatis. Jika ada kendala mengenai ukuran read more, lakukan setelan sampai ukurannya terlihat bagus. Terima kasih atas kunjungannya, happy bloging

Cara membuat Photo Berputar di Blog

 

 Cara membuat Fhoto berputar, untuk apa, bagaimana....mungkin pertanyaan itu akan timbul di benak saudara namun kalau sudah melihat hasilnya mungkin saudara sahabat blogger ingin juga meletakkanya di blog saudara, sebagai penghias blog.coba lihat gambar di atas dan dekati cursor mouse anda.

Nah begini caranya :
login ke blogger anda,
kemudian pilih dasboard,lanjut pilih rangcangan klik edit HTML...
lalu cari kode ]]></b:skin> jika dah ketemu

copi-paste kode dibawah ini taruh di atas kode ]]></b:skin>

.simplerotate{
-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;
}

.simplerotate:hover{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
transform:rotate(360deg);
}

lalu simpan
kemudian ke rangcangan-elemen laman-klik add elemen laman -pilih HTML/javascript

copy code dibawah ini, kemudian paste di potingan anda (YTML) atau letakkan di gadget hatml/Javascript


<img border="0" class="simplerotate" src="URL PHOTO ANDA" style="display: inline;" />

Cara Membuat Scroll Pada Blog Archive (Arsip Blog)


Capture
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Rancangan Blogger.

3. Kemudian pilih Edit HTML

4. Beri tanda centang pada Expand Template Widget

5. Cari kode berikut......


<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>

6. Lalu Terapkan Seperti di bawahh ini.....

<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:200px;'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div></div>
<b:include name='quickedit'/>
</div>
</b:includable>

itulah pemasangannya di blog saya


7. Kode warna Biru dan Merah adalah kode yang ditambahkan kedalam script tersebut.
 200 adalah tingginya, dan kalian  bisa ubah seseuai ke inginann kalian..

Rabu, 24 Juli 2013

Cara Membuat Menu Horizontal di Blog

Menu horizontal, sangat penting peranannya baik dalam website atau pun blog. Menu horizontal sendiri adalah menu berupa link - link yang terpasang secara memanjang yang biasanya diletakan di bawah header atau di atas header atau kadang kadang ada juga yang keduannya menggunakkan menu horizontal.
Bagi sobat - sobat blogger yang menggunakan template yang tidak mendukung menu horizontal, tenang saja karena posting kali ini, saya mencoba untuk mencari source code dari menu horizontal tersebut. Dan allhamdulillah, saya menemukkannya dari CSS Menu Generator.
Memang, menu horizontal yang ada pada situs tersebut diperuntukkan untuk website. Dan cara - cara / petunjuk-nya pun adalah petunjuk untuk menempatkannya di website. Namun, sobat tidak perlu khawatir karena saya sudah pernah coba download, dan saya coba untuk menempatkannya di Blog ( Blogger / Blogspot ).
Banyak sekali pilihan menu horizontal yang dapat kita pilih dari situs tersebut. Namun, saya coba untuk memilih salah satunya. Dan alhamdullilah, saya jatuh hati pada menu horizontal ini :
Bagi sobat yang ingin menambahkan menu horizontal tersebut, silahkan ikuti langkah - langkah berikut ini :
  • Pertama - tama, masuk ke Akun Blog Sobat,
  • Klik Template dan Klik Edit HTML,
  • Selanjutnya, cari kode ]]></b:skin> (gunakan Ctrl + F), dan Copy Paste Code dibawah tepat di atas kode tersebut.
ul.menu {list-style-type:none;width:auto;position:relative;display:block;height:33px;font-size:.6em;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0bnv4jfjbEnakzoddW23J0AdL3E_EJyk1IR41dkQUWQPwWhTqzfAex0pVYfrTcj6uCTMBrScErLnjJnRD3g_K-fYL-_4cnreqp-vW86i_MZaRlVHBDU1OWc52HMRMuIuXAMQdmib9h4c/s1600/bg.png") repeat-x top left;font-family:Verdana,Helvetica,Arial,sans-serif;border:1px solid #000;margin:0;padding:0;}ul.menu li {display:block;float:left;margin:0;padding:0;}ul.menu li a {float:left;color:#A79787;text-decoration:none;height:24px;padding:9px 15px 0;font-weight:normal;}ul.menu li a:hover,.current {color:#fff;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0bnv4jfjbEnakzoddW23J0AdL3E_EJyk1IR41dkQUWQPwWhTqzfAex0pVYfrTcj6uCTMBrScErLnjJnRD3g_K-fYL-_4cnreqp-vW86i_MZaRlVHBDU1OWc52HMRMuIuXAMQdmib9h4c/s1600/bg.png") repeat-x top left;text-decoration:none;}ul.menu .current a {color:#fff;font-weight:700;}/*Garis Merah*/ul.menu.red{background-color:#B11718;}ul.menu.red li a:hover, .menu.red li.current {background-color:#DE3330;}

  • Setelah kode tersebut selesai ditambahkan, silahkan Save Template. 
Selanjutnya, Masuk ke Tata Letak dan ikuti langkah - langkah berikut :
  • Klik Tambah Gadget,
  • Lalu tambahkan Fungsi Pihak ke tiga HTML/Javascript,
  • Selanjutnya, Copy Paste Kode di Bawah,
<ul class="menu red">
  <li class="current"><a href="http://fileprofessional.blogspot.com/" target="_self">Home</a></li>
  <li><a href="http://fileprofessional.blogspot.com/p/about-me.html" target="_self">About</a></li>
  <li><a href="http://fileprofessional.blogspot.com/p/contact.html" target="_self">Contact</a></li>
  <li><a href="http://fileprofessional.blogspot.com/2012/04/tukar-link.html" target="_self">Tukar Link</a></li>
  <li><a href="" target="_self"></a></li>
</ul>
Keterangan :
Silahkan ganti tulisan berwarna biru dengan kata - kata yang sobat inginkan, dan ganti juga tulisan berwarna merah dengan link url sobat. 






Cara membuat Menubar di blog

Cara membuat Menubar di blog - Hmm, sobat sudah pada tau menubar itu apa kan? hah belum? okedeh tidak apa-apa reggy jelaskan lagi untuk yang belum tau. Menubar adalah sebuah kotak tab/bar yang isinya berupa navigasi link. Fungsi menubar yaitu untuk menyimpan link-link penting di suatu blog, agar pengunjung dapat lebih mudah mengunjungi halman-halaman utama yang ada pada suatu blog itu. Pada postingan sebelumnya saya juga telah menjelaskan bagaimana cara membuat menubar pada template klasik.  Namun, bedanya kali ini membuat menubar pada custom template. Untuk melihat bagaimana screenshot menubarnya lihat di bawah ini:

cara membuat menubar di blog
Menubar ini juga bisa dibuatkan lagi submenu kebawahnya, lihat di gambar. Nah jadi misalkan sobat ingin memasang submenu dari sebuah link itu tinggal menambah sedikit kode yang akan dijelaskan dibawah. Oh iya, menubar di postingan ini tidak ada search box seperti digambar. Tetapi jika sobat ingin membuat menubar di blog dengan search box, silahkan kunjungi postingan Disini. Sudah tau kan bagaimana penampakan menubar di blog itu? nah, cara membuat menubar di blog tidak sulit kok.

1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML
4. Cari kode ]]></b:skin> (gunakan ctrl+f)
5. Pasang kode di bawah ini di atas kode ]]></b:skin>
#menubar{
width:900px;
height:32px;
background:#de360f;
margin: 0 auto;
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
border-right:1px solid #F0512D;
float:left;
padding:8px 12px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
color:#ffa500;
text-decoration:underline;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #de360f;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #F0512D;
color: #ffa500;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
border:1px solid ##F0512D;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}
7. Selanjutnya cari kode <div id="content-wrapper">
8. Pasang kode di bawah ini di Atas kode yang bercetak tebal pada no 7. Pengecualian untuk yang tidak ada kode pada no 7, sobat bisa menaruh dielemen div id lainnya. Biasanya template blog terdapat kode seperti <div id='header.... Jadi, bila tidak ada sobat bisa menaruhnya di bawah kode yang mirip dengan <div id='header...
<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
</ul>
</div>
9. Simpan Template dan lihat hasilnya

Untuk membuat sub menu (menu dropdown) agar mudah ganti saja kode pada no 8 dengan kode di bawah ini
<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a>
<ul>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
<li><a href='http://blognya-reggy.blogspot.com/'>Edit me</a></li>
</ul></li>
</ul>
</div>
Keterangan:
  • Ganti tulisan yang berwarna Merah dengan url link menubar yang diinginkan, misal: link postingan, link kategori, link halaman statis atau lainnya
  • Ganti tulisan berwarna Biru (Edit me) dengan tulisan judul menubar tersebut, seperti: About, Contact, Guest book atau lainnya
  • Untuk mengubah panjang menubar bisa sobat ganti tulisan 900px menjadi sesuai dengan keinginan sobat
  • Nah, jika sobat ingin menambah item menubar (list), sobat hanya tinggal Copy kode yang bergaris bawah, dan Paste di bawah kode yang bergaris bawah tersebut.
  • Di setiap blog juga ada juga yang berbeda tanda kutipnya. Sobat bisa menelitinya lagi. Tanda kutip ' atau "
Bagaimana? mudah kan. Inget sob, kunci utama keberhasilan membuat menubar pada blog yaitu ketelitian dalam mengedit dan memasang kode css/htmlnya. Misalkan ada yang kurang atau kesalahan sedikit, menubar itu malah jadi gagal alias tidak terpasang. Jadi, sobat harus lebih teliti ya agar tidak keliru, good luck sobat ;)