Cara Menambahkan Scroll Bar dalam Entri Blog

Sedikit penjelasan dan pengetahuan untuk sobat tentang definisi serta fungsi dan kegunaanya Scroll Bar adalah untuk memudahkan kita apabila ada kode atau tulisan yang sangat panjang agar tidak memakan terlalu banyak tempat atau bisa juga dibilang untuk mengefisienkan tempat atau halaman blog sehingga tidak terlalu panjang kebawah. Intinya tampilan posting blog kita jadi singkat dan dinamis.


Cara Membuat scroll bar di posting blog sangatlah mudah, Caranya hampir sama seperti saat kita menulis postingan blog. Namun yang paling penting adalah jangan lupa untuk copy/paste atau Tulis Kode script di bawah ini pada mode Edit HTML di bagian posting blog.


Jika sobat tertarik menggunakannya silahkan copy/paste scrip dibawah ini pada Halaman Edit HTML ,Bukan pada Halaman Compose.

 

<div style="border: 1px solid #eee; height: 100px; overflow: auto; padding: 10px; width:400px;">

Letakan Tulisan / Kode HTML Sobat Disini

</div>

Contoh Scroll Bar Pada Postingan Blog :

Cara Membuat Scroll Bar di Postingan Blog - Kali ini saya akan share artikel mengenai Cara Membuat Scroll Bar Pada Postingan Blog. Sedikit penjelasan dan pengetahuan untuk sobat tentang definisi serta fungsi dan kegunaanya Scroll Bar adalah untuk memudahkan kita apabila ada kode atau tulisan yang sangat panjang agar tidak memakan terlalu banyak tempat atau bisa juga dibilang untuk mengefisienkan tempat atau halaman blog sehingga tidak terlalu panjang kebawah. Intinya tampilan posting blog kita jadi singkat dan dinamis

Setelah meletakan kode HTML di atas pada halaman edit HTML, sobat bisa melakukan pengecekan pada halaman Compose.

Keterangan :
100px : Kode untuk mengatur tinggi pada kolom scroll.
400px : Kode untuk mengatur lebar pada kolom scroll.

Demikian artikel tentang Cara Membuat Scroll Bar Di Postingan Blog. Semoga artikel yang saya buat ini dapat berguna dan bermanfaat bagi sobat blogger. Jika ada yang kurang jelas silahkan berkomentar di kolom komentar dibawah. Salam Blogger!


sumber: disini

Baca Selengkapnya »

Cara Menambahkan Read More Pada Entri Blog

Berikut langkah-langkah Cara Membuat Auto Read More Otomatis Di Blog. Perhatian: bagi yang sudah memasang read more otomatis yang ada sebelumnya harus dihapus terlebih dahulu. 

1. Login Ke Blogger.

2. Klik Template, Backup template untuk jaga2 bila diperlukan,

atau langkah berikut bisa di uji coba menggunakan Blog percobaan yang lain.

3. Klik Edit HTML.

4. Klik Kiri 1 x Dimana saja dalam kotak template.

5. Klik Ctrl+F (Supaya mempercepat pencarian kode),Dan cari kode berikut </head>

Masukan kode tersebut dalam kotak pencarian, kemudian enter untuk mencari.

6. Masukan Kode berikut diatas </head>

12345678910111213141516171819202122232425262728<!--Auto Read More Mulai-->

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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:280px;margin-right: 20px;margin-bottom:10px;overflow:hidden;box-shadow: 5px 5px 5px #111;}
.grow img{height:165px;width:280px;transition: all 2s ease;}
.grow img:hover{width:400px;height:250px;}
</style>
<script type='text/javascript'>
var thumbnail_mode = &quot;yes&quot;; //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 = 280;
</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>

<!--Auto Read More Akhir-->

Perhatian: Cobalah terlebih dahulu tanpa diedit.
Warna Biru untuk mengatur banyaknya kutipan dari artikel.
Warna Hijau adalah Pengaturan Lebar dan tinggi gambar

7. Kemudian Cari Kode <data:post.body/>
Kode tersebut diatas jumlahnya biasanya ada 2, Cari yang versi web, biasanya yang kedua (ke-2) dengan enter 2x pada kotak pencarian.

8. Hapus Kode <data:post.body/> yang ke-2 dan Ganti dengan kode dibawah ini.

12345678910111213141516<!-- Auto read more Mulai -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<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>
      <div class='read-more'>
      <a expr:href='data:post.url'>Baca Selengkapnya &#187;</a>
      </div>
</b:if>
</b:if>
<!-- Auto read more Akhir -->

Warna Biru Muda boleh dihapus boleh tidak, bedakan saja.
"Baca Selengkapnya" juga bisa diganti bebas.

Perhatian: Jika sudah menggunakan fitur read more otomatis sebelumnya, maka harus dihapus yang versi sebelumnya, dan mungkin jumlah pada langkah 7 bukan 2 tp mungkin 3 (mungkin juga script diatas pada langkah 6 berbeda.. ya harus dihapus jg script versi sebelumnya), anda harus dapat memperkirakan dari mana ke mana yang harus di hapus, contoh pada langkah 8 (petunjuknya warna Oranye - ini petunjuk bagi yg sdh pake versi lain)

9. Preview terlebih dahulu, kalo bagus ya terus Save Template, dan lihat hasilnya.

Demikian Tutorial Cara Membuat Auto Read More Otomatis Artikel Di Blog, mudah-mudahan bisa bermanfaat.

sumber : disini

Baca Selengkapnya »

Cara Membuat Blog di Blogger

    Sebagaimana yang telah kita ketahui bersama bahwa banyak cara atau layanan untuk membuat blog gratis diantaranya adalah blogger/blogspot, wordpress, joomla, blog detik dan lain-lain. Namun pada kesempatan ini, saya akan membahas bagaimana cara membuat blog khususnya blog yang berplatform blogger. Sebelum membahas lebih jauh tentang cara membuat blog, ada baiknya saya juga menjelaskan sedikit pengertian blog. Blog pada dasarnya disebut sebagai "Web Blog" yang merupakan salah satu aplikasi web yang mana postingan atau artikel yang diposting didalam blog sering sekali berurutan, yaitu dari tulisan terbaru hingga tulisan yang paling lama.

Sebelum blogger/blogspot berkembang seperti sekarang, blog pada umumnya sering dijadikan sebagai diary online yang di isi dengan catatan-catan harian. Namun dizaman modern seperti sekarang ini, blog juga dapat dijadikan sebagai mesin penghasil uang . Hal ini mungkin yang menjadi salah satu alasan mengapa orang mulaimembuat blog. Terlepas dari itu, sebenarnya kegiatan blogging adalah tergantung dari niat si pemilik blog, apakan untuk mencari tambahan uang saku atau ada hal yang lainnya.


Cara Membuat Blog di Blogger
Syarat utama sebelum Anda membuat blog di blogger adalah memiliki alamat email yang masih aktif,Jika anda sudah memiliki alamat emai di gmail, untuk itu kita langsung saja untuk membuat blog.

1. Silahkan Anda kunjungi http://blogger.com/

2. Kemudian lihat di kanan bawah, rubah bahasa menjadi bahasa indonesia agar lebih mudah

3. Masuk/login menggunakan username/nama pengguna serta password gmail anda ( akun email anda bisa juga untuk login ke blogger).



 

4. Isilah formulir data Anda yang terlampir seperti:

• Nama tampilan : isi dengan nama yang akan ditampilkan pada profile blog anda. 
• Jenis Kelamin : pilih jenis kelamin Anda, misalnya: Pria. 
• Penerimaan Persyaratan : Ceklis sebagai tanda anda setuju dengan peraturan yang telah di tetapkan oleh pihak blogger. Sebaiknya baca terlebihdahulu persyaratan dan ketentuan yang diberikan pihak blogger agar Anda mengerti. 

5. Klik tanda panah bertuliskan “Lanjutkan”. Kemudian klik "Blog Baru"



 

6. Selanjutnya isi formulir data blog Anda pada form yang disediakan seperti:

• Judul : Isi dengan judul blog yang Anda inginkan
• Alamat : isi dengan alamat blog yang di inginkan. 
• Template : pilih template (tampilan blog) yang Anda disuka

7. Lanjutkan dengan klik tombol “Buat blog!”.

 

8. Sampai tahap ini blog Anda sudah selesai dibuat, namun untuk menghindari anggapan spam oleh google sebaiknya anda mulai membuat artikel, minimal 1 postingan. Untuk membuat postingan/artikel ikuti tutorial blog berikut ini.

9. Klik tulisan "Mulai memposkan




10. Isi judul dan artikel yang ingin Anda postkan di blog




11. Setelah tulisan Anda selesai lalu klik "pratinjau" untuk melihat hasil sementara, jika sudah sesuai maka klik "publikasikan"

12. Selesai dan saya ucapkan "Selamat" publikasikan juga bog baru Anda pada sahabat atau orang terdekat Anda bahwa sekarang anda sudah memiliki blog.

Sumber : disini

Baca Selengkapnya »