To make a scroll box with a horizontal scroll, you need to use overflow-x:scroll;. This basically tells your browser to create scroll bars on the x (horizontal) axis, whenever the contents of the container is too wide. Here, we make our content too wide by setting it's width to 250 percent - that's 250 percent of its parent container (the div).
To make a scroll box with a horizontal scroll, you need to use overflow-x:scroll;. This basically tells your browser to create scroll bars on the x (horizontal) axis, whenever the contents of the container is too wide. Here, we make our content too wide by setting it's width to 250 percent - that's 250 percent of its parent container (the div)

Catatan:
overflow-x: scroll; overflow-y: hidden bila ingin horisontal scrollnya saja
overflow-y: scroll; overflow-x: hidden bila ingin vertical scrollnya saja
Label:

Cara Memasang Meta Tags di Blogger

Meta tag berfungsi untuk memberikan informasi kepada search engine mengenai gambaran dan isi suatu blog/website. Blogspot/Blogger dengan template bawaan/official biasanya belum memiliki meta tag ini, oleh karena itu, untuk mengoptimalkan pencarian di search engine (SEO), meta tag perlu ditambahkan.

Cara memasang meta tags di blogger:

1. Login ke Accout Blogger
2. Klik Rancangan > Edit HTML
3. Cari kode: <title><data:blog.pageTitle/></title> (cari dengan Ctrl+F)
4. Copy paste kode dibawah ini dibawah kode no 3.
 <b:if cond='data:blog.url == data:blog.homepageUrl'> 
<meta content=' Tulis deskirpsi disini'  name='description'/> 
<meta content='keyword1 keyword2 keyword3 ...' name='keywords'/>    
<meta content='INDEX, FOLLOW' name='ROBOTS'/>
</b:if> 
5. Ganti tulisan yang berwarna merah sesuai dengan blog sobat.
6. Simpan.

Memberi Title Pada Label Blog

1. Masuk ke blogger
2. Klik Tata Letak ==> Edit Html 
3. Cari kode ini
 <a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
4. Ganti dengan kode berikut:
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url' expr:title='Read more posts filed under " + data:label.name ' rel='tag'>
5. Simpan.

Cara Membuat Artikel Terkait Scroll

1. Login ke blogger
2. Klik Tata Letak
3. Pilih Edit HTM, centang Expand Template Widget
4. Kemudian, cari kode ]]></b:skin>
5. letakkan kode berikut diatas kode ]]></b:skin>
.rbbox{border: 1px solid rgb(192, 192, 192);padding: 5px;
background-color: #f0f0f0;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: rgb(255, 255, 255);}

6. Cari kode <data:post.body/>
7. Tambahkan kode berikut ini tepat dibawah <data:post.body/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<br/>
<br/>
<H2>Artikel Terkait:</H2>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 10;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement(&#39;ul&#39;);
var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i &lt; maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k &lt; entry.link.length; k++) {
if (entry.link[k].rel == &#39;alternate&#39;) {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement(&#39;li&#39;);
var a = document.createElement(&#39;a&#39;);
a.href = alturl;
if(a.href!=location.href) {
var txt = document.createTextNode(entry.title.$t);
a.appendChild(txt);
li.appendChild(a);
ul.appendChild(li);
}
}
for (var l = 0; l &lt; json.feed.link.length; l++) {
if (json.feed.link[l].rel == &#39;alternate&#39;) {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k&lt;20; k++) label = label.replace(&quot;%20&quot;, &quot; &quot;);
var txt = document.createTextNode(label);
var h = document.createElement(&#39;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;albri&#39;).appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement(&#39;script&#39;);
script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;
+ label +
&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
script.setAttribute(&#39;type&#39;, &#39;text/javascript&#39;);
document.documentElement.firstChild.appendChild(script);
}
var labelArray = new Array();
var numLabel = 0;
<b:loop values='data:posts' var='post'>
<b:loop values='data:post.labels' var='label'>
textLabel = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type="text/javascript">RelPost();</script>
</div>
</b:if>

8. Simpan.

Hasilnya akan seperti ini.










Selamat mencoba...

Cara Membuat Scroll di Postingan

Postingan kali ini saya akan membahas Cara membuat scroll Bar, pada postingan blog. Scroll bar berfungsi untuk menghemat tampilan pada postingan blog pada saat kita update postingan yang terlalu panjang,dan untuk meminimalkan tampilan maka sobat bisa memasang scroll bar ini. Salah satu cara yang bisa kita lakukan untuk membuat scroll pada postingan adalah sebagai berikut:

Caranya sobat copy kode tag berikut dan masukkan diantara tag tersebut tulisan yang ingin di buat scroll. Silahkan copy kemudian dipaste-kan di postingan.

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

LETAKKAN TULISAN SOBAT DISINI

</div>

Tulisan di atas dituliskan di halaman edit HTML, bukan compose. Setelah selesai lakukan pengecekan dengan masuk ke halaman compose untuk melihat hasilnya.
Label:

Cara Copy Gambar dari Layar Komputer

Cukup mudah sebenarnya meng-copy gambar dari layar komputer, kemudian memindahkannya sesuai yang kita inginkan. Dalam dunia blog, biasanya trik ini digunakan untuk menampilkan gambar yang ada di dalam blog yang kemudian ditampilkan ke dalam sebuah postingan. 
Contoh gambar dari blog mashuda.blogspot.com










Cara mebuatnya adalah sebagai berikut:
1. Silahkan cari tampilan blog yang mau di copy
2. Tekan tombol Print Screen yang ada di keyboard
3. Buka Aplikasi microsoft word/photoshop/photoscape/ dll
4. Tekan Ctrl + V / klik kanan - paste
5. Edit gambar, kemudian simpan.
Setelah disimpan, selanjutnya tinggal kita upload gambar di blog... Mudah kan? Selamat mencoba.
Label:

Cara Memasang Search Engine di Blog

Sebenarnya blogger.com sudah menyediakan fasilitas ini, namun bagi kamu yang ingin mencari widget search engine yang berbeda, mungkin tips berikut bisa menjadi solusi.

Cara membuat search engine di blog:
1. Masuk ke Account Blogger
2. Pilih Rancangan > Pilih Elemen Halaman
3. Pilih Tambah Gadget > Pilih Html/Java Script
4. Copas kode berikut:

<form action="http://mashuda-blog.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="Search" class="buttonsubmit" name="submit" type="submit"/></form>

Tampilannya seperti berikut:


5. Ganti tulisan yang berwarna biru dengan situs kamu.
6. Simpan.
Label:

Cara Memasang Widget Yahoo Messenger

Pada kesempatan kali ini saya ingin memposting tentang bagaimana cara menampilkan widget yahoo messenger di blog. Cara memasangnya adalah sebagai berikut:

1. Masuk ke Account Blogger
2. Pilih Rancangan > Pilih Elemen Halaman
3. Tambah Gadget > Pilih Html/Java Script
4. Masukkan kode dibawah ini

<a href="ymsgr:sendIM?hudamagazine"><img src="http://opi.yahoo.com/online?u=hudamagazine&amp;m=g&amp;t=2&amp;l=us" />
</a>

Tampilannya akan seperti ini




5. Ganti tulisan yang berwarna biru dengan id yahoo kamu
6. Simpan.

Memberi Title Pada Judul Postingan

Mungkin sobat bingung dengan judul diatas, memberi title disini maksudnya adalah memberi nama atau judul pada judul postingan ketika kursor diarahkan ke judul postingan. Sobat bisa melihatnya di blog ini. Coba klik home terus arahkan kursor ke judul postingan yang ada di blog ini.

 Cara membuatknya adalah sebagai berikut:
1. Login ke blogger
2. Klik Rancangan > Edit HTML
3. Centang Expand Template Widget
4. Kemudian cari kode
<a expr:href='data:post.url'><data:post.title/></a>
5. Hapus kode tersebut lalu ganti dengan kode ini
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
 6. Kemudian klik tombol simpan tamplate.
Label:

Cara Membuat Komentar Terbaru di Blog

Sebenarnya sudah banyak tutorial yang membahas cara membuat komentar terbaru dengan widget recent comments di blog. Namun, sekarang saya akan menjelaskan bagaimana cara membuat recent comment  (komentar terbaru) tanpa widget html/java script, tapi langsung dengan bantuan feed. Berikut langkahnya:

1. Login ke Blogger kalian
2. Masuk ke Rancangan / Tata Letak
3. Pilih Elemen --->> Tambah gadget
5. Sekarang kalian pilih yang FEED
6. Jika diminta memasukkan URL Feed kalian copy script berikut:

http://namablog.blogspot.com/feeds/comments/default

Ganti yang berwarna biru dengan nama blog kamu

7. Lalu Klik Lanjutkan.
8. Simpan dan selesai...

Cara Menghilangkan Tanda Obeng di Blog

Tanda tang dan obeng pada blogspot sebenarnya bukan merupakan suatu masalah, karena tanda tersebut hanya muncul jika pemilik blog sedang login di account blognya dan hanya muncul di komputer orang tersebut. Jadi orang lain tidak bisa melihatnya. Dan kalau pemilik blog tersebut sudah "sign out" maka tanda tersebut tidak akan muncul lagi. Namun, ada sebagian blogger merasa kurang nyaman dengan adanya tanda tersebut.

Tanda yang saya maksud adalah sebagai berikut:






Cara menghilangkannya adalah sebagai berikut
1. Login ke akun blogger.
2. Masuk ke rancangan--> edit html --> centang kolom expand widget template
3. Cari kode dibawah ini:

]]></b:skin>

4. Copy dan paste kode dibawah ini tepat diatas kode nomer 3 tersebut

.quickedit{
display:none;
}

5. Klik tombol Simpan Template dan lihat hasilnya .
6. Selesai.
Langganan: Postingan (Atom)
 

Pemilik Blog

Foto saya
Pelaku usaha budidaya jamur tiram di Desa Kalimanggis, Kec. Subah, Kab. Batang, Jateng.
Hp 085226144218
Pin d928427be
Fb Hudamagazine@gmail.com