Site Network: Home | Contact Us | Site Map | About

Tampilkan postingan dengan label Blog. Tampilkan semua postingan
Tampilkan postingan dengan label Blog. Tampilkan semua postingan

Cara Membuat Scroll Box atau Teks Scroll

Untuk membuat Teks scroll Books mungkin di perlukan ,selain berguna untuk menghiasi blog tapi dapat memanfaatkan ruang dengan menggunakan Scroll box,
Scroll boks bisa kita gunakan untuk menyimpan postingan yang terlalu lebar atau bisa menyimpan link atau alamat blog kita. Anda bisa juga Membuat Link Scroll.
Contoh kode HTML scroll boks untuk menyimpan postingan,

<!-- HTML Codes by ozuratakanawa.com -->
<div style="height:120px;width:250px;font:16px/26px Georgia, Garamond, Serif;overflow:scroll;">

Silahkan isi deskripsi postingan kamu di sini,ini adalah contoh scroll boks untuk menyimpan postingan teks,ganti tulisan ini dengan deskripsi postingan kamu
</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/codes/html_scroll_box.cfm">HTML scrollbox Teks</a></p>

Hasilnya seperti contoh di bawah ini ,


Silahkan isi deskripsi postingan kamu di sini,ini adalah contoh scroll boks untuk menyimpan postingan teks,ganti tulisan ini dengan deskripsi postingan kamu

Untuk berikutnya kita menggunakan kode Html scroll boks berwarna contoh kode ,

<!-- Codes by ozuratakanawa.com -->
<div style="height:100px;width:190px;overflow:scroll;background-color:#67F152;color:#A6120D;scrollbar-base-color:#52DC0D;"&gt;Silahkan isi deskripsi postingan kamu di sini,ini adalah contoh scroll boks untuk menyimpan postingan teks,ganti tulisan ini dengan deskripsi postingan kamu.</div>
<p style="font-family:verdana,arial,sans-serif;font-size:10px;"><a href="http://www.quackit.com/html/codes/">HTML Scroll Boks Warna</a></p></p>
Hasilnya sebagai berikut,

Silahkan isi deskripsi postingan kamu di sini,ini adalah contoh scroll boks untuk menyimpan postingan teks,ganti tulisan ini dengan deskripsi postingan kamu.

Sumber : http://www.deltanetkabunan.com

Membuat Iklan PPC Berjajar

PPC adalah iklan yang tampil didalam halaman website atau blog. PPC ditempatkan pada posisi yang menarik dan strategis sehingga pengunjung dengan mudah dapat melihatnya dan jika melakukan klik terhadap PPC tersebut maka pemilik website atau blog akan mendapatkan komisi.

Dalam memasang PPC hal yang perlu diperhatikan adalah penataan yang strategis agar mudah dilihat dan disesuaikan dengan komposisi template web atau blog. Jadi tidak asal tempel karena mata pengunjung web atu blog tidak suka melihat seuatu yang kurang menarik.

Pemasangan iklan PPC dapat disusun secara vertical dari atas ke bawah juga secara horizontal arah menyamping dari kiri ke kanan. Tergantung selera masing-masing pemilik web atau blog. Tapi saya pribadi lebih suka pada susunan yang horizontal menyamping karena akan langsung terlihat semua tanpa harus memutar scroll mouse, apalagi bila ada banyak PPC yang akan dipasang.

Simple saja sebenarnya menata PPC agar dapat dipasang berjajar menyamping horizontal tanpa memerlukan tips khusus, yaitu cukup dengan memanfaatkan fungsi table.
Berikut ini kode table yang diperlukan :

<table>
<tr>
<td>kode ppc 1</td>
<td>kode ppc 2</td>
</tr>
</table>

Bagaimana? Ternyata mudah sekali bukan?

Sumber :      http://kampungperawan.blogspot.com

Cara Membuat Daftar Isi Blog Model Scrollbox

Ini adalah tutorial mudah membuat Daftar isi (shortcut) model textrea/scroll box.
Daftar isi blog itu penting banget lho.. Beliau bisa menolong kita dalam menampilkan posting-posting jaman purba kita :D (postng lama). Nih tak kasih petuah buat menciptakan tuh mesin pembantu kita (daftar isi). Berikut ini saya kasih contoh sortcut model scroolbox, karna jenis ini lebih efisien dibandingkan model biasa yang mana jika kita menampilkan seluruh arsip blog, maka akan memakan ruang satu halaman. Dikarenakan jumlah arsip yang banyak dan coba anda bayangkan jika arsip blog anda sudah tahunan, berapa panjang arsip yang akan ditampilkan dalam satu halaman? Untuk mempersingkatnya agar dalam 1 halaman agar terlihat ringkas, kita dapat menggunakan textarea seperti terlihat dibawah
Caranya sangat mudah, sisipkan shortcode pada textarea. Copy-paste saja kode berikut dan tinggal sesuaikan tampilan dengan selera anda:
<div style=”overflow: auto; width: 480px; height: 100px;
background-color: #ffecff; background-attachment: scroll;
background-repeat: no-repeat; background-position:right bottom;
text-align: left; padding: 5px; border: 2px solid #0000b9;”>
<span style=”font-size:10px;color:#800080;
font-family:Sans-serif;”>[/archives]
</span>
</div>
<a href=”http://mangunweni.wordpress.com/2010/05/07/cara-membuat-daftar-isi-di-wordpress-hosting-sendiri/” title=”Cara membuat daftar isi”><button>BIKIN-DISINI</button></a>
</div>
Setelah itu anda copy dan paste-kan pada area penulisan pada mode ‘HTML’, tapi ingat! pada shortcode hapus tanda “ / “.
Tampilan arsip blog anda tidak akan terlihat pada area penulisan, untuk melihatnya ‘Publish’ dahulu dan klik tombol ‘Preview Changes’.
Keterangan :
* width : lebar textarea.
* height : tinggi textarea.
* background-color : warna background textarea.
* background-position : letak posisi background gambar pada textarea.
* text-align : perataan pada text.
* padding : jarak antar text dengan textarea.
* border : tebal tipisnya bingkai textarea.
* solid : warna bingkai textarea.
* font-family : jenis text.

Okelah kalo begitu.. Selamat mencoba… :D

Cara Memasang read More Pada Blog

Cara Membuat Read More Otomatis Blogger - Sebenarnya tutorialnya ini sudah lama dan banyak blogger tutorial yang sudah membuatnya, tapi saya menulis kembali hanya ingin menjadi koleksi pribadi saya ketika sedang membuat atau memodifikasi template baru.

Memang setiap kali saya harus membuat template kebanyakan harus membuat read more otomatis seperti ini karena memang sangat efisien dan minimalis terlihatnya, tidak seperti read more terdahulu yang harus memenggal artikel seperti code fungsi <div class="fullpost">..</div> atau <span class="fullpost">..</span> agar tidak tampil sepenuhnya di halaman depan blog kita.


Langsung saja kita praktekan cara membuat read more otomatis tersebut di bawah ini:

Penting! Yang sudah memasang Read More versi lama sebaiknya di kodenya kembalikan dulu ke seperti semula, caranya hapus kode yang berwarna merah dibawah ini (Setiap template mungkin berbeda, jadi tinggal disesuaikan saja)
<div class='post-header-line-1'/>

<div class='post-body'>


<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

<p><data:post.body/></p>

<b:else/>


<style>.fullpost{display:none;}</style>

<p><data:post.body/></p>


<a expr:href='data:post.url'>Readmore</a>

</b:if>


<div style='clear: both;'/>

Kalau sudah kita ke tahap selanjutnya

------------------------------------------

Pertama, silahkan menuju menu DESIGN -> Edit HTML, Cari kode
</head> kemudian letakan script dibawah ini di atas kode </head> jangan lupa save template/simpan terlebih dahulu.

Langsung copy paste aja kode dibawah ini:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 280;
summary_img = 250;
img_thumb_height = 70;
img_thumb_width = 100;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(b,a){if(b.indexOf("<")!=-1){var d=b.split("<");for(var c=0;c<d.length;c++){if(d[c].indexOf(">")!=-1){d[c]=d[c].substring(d[c].indexOf(">")+1,d[c].length)}}b=d.join("")}a=(a<b.length-1)?a:b.length-2;while(b.charAt(a-1)!=" "&&b.indexOf(" ",a)!=-1){a++}b=b.substring(0,a-1);return b+"..."}function createSummaryAndThumb(d){var f=document.getElementById(d);var a="";var b=f.getElementsByTagName("img");var e=summary_noimg;if(b.length>=1){a='<span style="float:left; padding:0px 10px 2px 0px;"><img src="'+b[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';e=summary_img}var c=a+"<div>"+removeHtmlTag(f.innerHTML,e)+"</div>";f.innerHTML=c};
//]]>
</script>

</b:if>
</b:if>


Updates!: Kode Warna Biru berfungsi agar halaman statis tidak ikut terpenggal seperti halaman HOME.

------------------------------------------

Masih pada halaman EDIT HTML, Beri tanda centang pada "Expand widget template" lalu temukan kode seperti dibawah

<data:post.body/>

Kalo sudah, ganti kode <data:post.body/> dengan semua kode dibawah ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script
type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE -
<data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>



Kalo sudah silahkan klik preview kalau memang masih ragu-ragu lalu silahkan disimpan dan lihat hasilnya

Keterangan:

var thumbnail_mode = "float";  (kita dapat memutuskan apakah
letak thumbnail berada di (float) kiri atau jika tidak silahkan ganti
dengan (no-float)
summary_noimg = 250; (Menetapkan berapa banyak karakter akan ditampilkan
di posting tanpa gambar / thumbnail)
summary_img = 250; (Menetapkan berapa banyak karakter akan ditampilkan di
posting dengan gambar / thumbnail)
img_thumb_height = 120; (Thumbnail 'tinggi dalam piksel)
img_thumb_width = 120; (Thumbnail 'lebar dalam piksel)