Hosting Unlimited Indonesia

Cara Memasukkan Gambar ke Posting Blog

Cara Menambahkan atau Menyisipkan Gambar (Foto) ke Posting Blog.




GAMBAR, image, atau foto dimasukkan ke posting blog sebagai pelengkap informasi ataupun ilustrasi agar lebih menarik.

Harap diperhatikan, gambar sebaiknya berukuran kecil, maksimal ukuran gambar 600 pixel dan ukuran file di bawah 50kb, agar tampilan blog tetap ringan, tidak berat.

Jangan lupa, ubah pula nama filenya, dari --misalnya-- "IMG000.JPG"  menjadi "Situ Ciburuy" --jika gambarnya memang gambar situ tersebut.

Gambar yang akan dimasukkan ke postingan bisa diedit dulu di Microsoft Office Picture Manager.

Berikut ini cara menambahkan gambar ke blog sebagaimana Panduan Blogger setelah kita memasukkan tulisan (posting) ke blog.

Menambahkan gambar ke Posting Blog

  1. Saat menulis Entri Baru, di bagian atas laman, klik ikon Foto photo icon.
  2. Pilih tempat asal gambar yang ingin Anda unggah.
  3. Pilih satu atau beberapa gambar untuk diunggah.
  4. Klik Tambahkan yang dipilih.
  5. Setelah gambar Anda ada pada pos, klik gambar tersebut untuk mengubah ukuran, teks, dan posisinya pada laman.
>>> Panduan Upload Foto ke Blog Lengkap plus Gambar
 

Tempat asal yang bisa Anda pilih untuk mengunggah gambar

Anda dapat mengunggah gambar dalam format JPG, GIF, PNG, TIF, atau BMP dari tempat berikut:
  • Unggah foto: Memilih gambar dari komputer Anda.
  • Blog ini: Memilih gambar yang pernah Anda gunakan dalam blog.
  • Album Web Picasa: Memilih gambar dari album Picasa yang disambungkan.
  • Ponsel: Jika Anda mencadangkan foto secara otomatis dari ponsel, gambar tersebut dapat digunakan.
  • Webcam: Menggunakan webcam Anda untuk mengambil foto.
  • URL: Memasukkan URL gambar yang tersedia online.
Kiat: Anda juga dapat mengimpor foto menggunakan email.

Batas pengunggahan

Jika Anda menyinkronkan blog ke Google+, foto akan disimpan di Google+ Foto, dalam ruang penyimpanan sebesar 15 GB milik Anda yang dibagikan dengan Gmail dan Drive.

Jika Anda tidak menyinkronkan blog ke Google+, foto yang diunggah disimpan pada Album Web Picasa. Selama masih memiliki ruang penyimpanan di Picasa, Anda dapat mengunggah gambar ke Blogger.

Demikian Cara Memasukkan Gambar ke Posting Blog.*

Cara Membuat Semua Link Open New Tab Otomatis di Blog

Cara Membuat Semua Link Open New Tab (Membuka Tab Baru) Secara Otomatis di Blog. Tujuannya agar halaman blog yang sedang dibuka tidak tertutup atau digantikan oleh halaman link yang diklik.

Cara Membuat Semua Link Open New Tab Otomatis di Blog

Cara Membuat Semua Link Open New Tab Otomatis di Blog: 
Copas kode ini:

<base target='_blank' />
di atas kode </head>

Save Template!

Cara Membuat Widget Popular Post Blog SEO Friendly

Cara Membuat Widget Popular Post Blog SEO Friendly.
Cara Membuat Widget Popular Post Blog SEO Friendly.

POPULAR Posts atau entry terpopuler merupakan widget wajib ada di sidebar blogger. Secara default, widget ini biasanya sudah muncul saat kita membuat blog.

Popular post berfungsi sebagai navigasi sekaligus internal link. Widget ini juga menunjukkan kepada pengunjung blog tentang tulisan atau konten yang paling banyak dibuka/dibaca.


Widget Popular Post banyak ragamnya. Anda bebas memilih, namun perhatikan kodenya agar blog Anda tetap SEO Friendly, terutama jika memunculkan popular post berupa judul, gambar, plus snippets.


GANTI kode Popular Post Anda dengan kode berikut ini:

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2>
<data:title/>
</h2>
</b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<a expr:href='data:post.href'>
<b>
<data:post.title/>
</b>
</a>
<b:else/>
<div class='item-title'>
<a expr:href='data:post.href'>
<b>
<data:post.title/>
</b>
</a>
</div>
<div class='item-snippet'>
<data:post.snippet/>
</div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'>
<a expr:href='data:post.href'>
<b>
<data:post.title/>
</b>
</a>
</div>
</div>
<div style='clear:both'/>
<b:else/>
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'>
<a expr:href='data:post.href'>
<b>
<data:post.title/>
</b>
</a>
</div>
<div class='item-snippet'>
<data:post.snippet/>
</div>
</div>
<div style='clear:both'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>

Perhatikan kode HTML di atas. Yang membuat kode HTML popular post ini seo friendly adalah kode warna merah.  

Jadi, Cara Membuat Widget Popular Post Blog SEO Friendly sebenarnya cukup dengan mengganti kode lama dengan kode warna merah yang memunculkan gambar (thumbnail image).

CARA MEMUNCULKAN POPULAR POST GAMBAR PLUS RINGKASAN
Anda tinggal klik Add a Widget dan pilih "Popular Post", lalu lakukan konfigurasi (setting) seperti dalam gambar di bawah ini. Angkanya bisa diatur antara 1 s.d. 10 judul post terbanyak dibaca:

setting popular posts blog

Cara Membuat Tombol Back to Top Simple Fast Loading di Blog

 Tombol Back to Top
Cara Membuat Tombol Back to Top Simple Fast Loading di Blog Blogspot.

BACK to Top Button (tombol kembali ke atas) yaitu tombol berupa ikon gambar panah yang memudahkan pengunjung untuk kembali ke bagian atas halaman blog.

Dengan adanya tombol back to top ini, pembaca tidak usah scroll mouse atau "tap" layar, tapi tinggal klik tombol back to top, maka otomatis tampilan halaman akan bergeser ke bagian atas.

Disebut  Simple & Fast Loading karena cara pemasangannya sangat mudah dan tidak banyak kode sehingga tampilannya cepat, tidak mempengaruhi kecepatan loading blog.

Cara Membuat Tombol Back to Top di Blogspot

1. Layout -> Add Gadget
2. Pilih "HTML/Java Script"
3. Judulnya kosongkan.
4. Masukkan kode di bawah ini ke bagian "Content"

<style type="text/css">.backtotop a:hover {background:none;}</style><div class="backtotop"><a style="display:scroll;position:fixed;bottom:5px;right:5px;" class="backtotop" href="#" rel="nofollow" title="Back to Top"><img style="border:none;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_qit9OaxglmSVE0BQqSIWZCPdujERrPex-H3HaUN8QdnWpFrdzmzPCfiIeNZnUGYkji1rSqjGzj-HE8jXmH4tM1CFcluyQ0vU6sk7-r35utBPD20D37tWhzVPjsRMb8h5yCpS1Y1GFl4V/s1600/Back_to_top_icon.png" alt="Kembali ke Atas" width="60"/></a></div>


Kode yang berwarna merah adalah URL/Link gambar. Anda bisa menggantinya dengan gambar panah pilihan Anda.

5. Save!

Kini tombol back to top sudah ada di blog Anda, seperti yang ada di blog ini --di sebelah kanan bawah. (http://baticblog.blogspot.com).*

Sumber

Cara Membuat Random Posts di Sidebar Blog

 Random Posts di Sidebar Blog
Cara Membuat Widget Random Posts Fast Loading di Sidebar Blog Blogspot.

RANDOM posts adalah widget di sedebar blog blogspot berupa daftar judul posting (tulisan) yang tampil secara acak (random).

Fungsi widget random post adalah sebagai navigasi blog dan internal link yang dapat meningkatkan jumlah halaman yang dibuka (pageviews), juga memudahkan pengunjung menemukan atau melihat daftar judul lainnya.

Contoh widget random post dengan gambar thumbnail ada di sidebar BATIC Blog  ini. Kita juga bisa memasang Random Post yang berupa judul saja, tanpa gambar.

Cara Memasang Widget Random Posts Daftar Judul Saja:

1. "Layout" > "Add Gadget" > pilih "JavaScript/HTML"
2. Isi judul widget dengan "Random Posts"
3. Copy & Paste kode berikut ini di kolom "Content"

<div id='random-post-container'>Memuat...</div>
<script>
//<![CDATA[
// Feed configuration
var homePage = 'http://baticblog.blogspot.com',
maxResults = 5,
containerId = 'random-post-container';
// Function to generate random number limited from `min` to `max`
// Used to create a valid and safe random feed `start-index`
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Function to shuffle arrays
// Used to randomize order of the generated JSON feed
function shuffleArray(arr) {
var i = arr.length, j, temp;
if (i === 0) return false;
while (--i) {
j = Math.floor(Math.random() * (i + 1));
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
}
// Get a random start index
function createRandomPostsStartIndex(json) {
var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
// console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}
// Widget's main function
function randomPosts(json) {
var link, ct = document.getElementById(containerId),
entry = shuffleArray(json.feed.entry),
skeleton = "<ul>";
for (var i = 0, len = entry.length; i < len; i++) {
for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
}
skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
}
ct.innerHTML = skeleton + '</ul>';
}
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');
//]]>
</script>

4. Ganti nama blognya dengan nama blog Anda.5. Save!

Cara Memasang Widget Random Posts: Judul & Gambar

1. "Layout" > "Add Gadget" > pilih "JavaScript/HTML"
2. Isi judul widget dengan "Random Posts" (bisa pula nama lain)
3. Copy & Paste kode berikut ini di kolom "Content"

<style>
<!--
#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:40px;height:40px;padding:3px}
-->
</style>
<ul id='random-posts'><script type='text/javaScript'>var rdp_numposts=5;var rdp_snippet_length=60;var rdp_info='yes';var rdp_comment='Comment';var rdp_disable='';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){a=location.href;y=a.indexOf('?m=0');for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring(0,rdp_snippet_length);var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;if(y!=-1){rdp_posturl=rdp_posturl+'?m=0'}var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEie2z9lgAQ9Ub5MqbMYsTAneO0-94ph1fUy2oi7Xz4Zb0x005Bo919LbclFcCSV8eUooxemOythVP14f0aNcVJ8AMBP10UjfTyF6ZJPK_OPs3qjmtSyLvdUACmT0cXDrdF6eJfG1h8MDpcL/"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};</script></ul>


4. Jumlah posting yang mau ditampilkan bisa diubah di kode numposts=5 misalnya menjadi 7 atau 10, atau berapa saja. Sebaiknya 5 saja agar Fast Loading.

5. Save!

Kini widget Random Posts sudah muncul di Sidebar Blog Anda.

Sumber

Mengubah Ukuran Thumbnail Image Posting Blogger Homepage

 Ukuran Thumbnail Image
Cara mengubah atau memperbesar Ukuran Gambar Thumbnail Auto Readmore Posting di Homepage Blogger -- Mengubah ukuran Standar Thumbnail 72 × 72 piksel s72-c menjadi ukuran yang lain, misalnya s200-c.

Contoh: Mengubah Ukuran Image Thumbnail dari 72px menjadi 200px


Cara 1: Menggunakan JavaScript Murni
Copas kode berikut ini di atas kode </body>
 
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function resizeThumb(parentID, size) {
var parent = document.getElementById(parentID),
image = parent.getElementsByTagName('img');
for (var i = 0; i < image.length; i++) {
image[i].src = image[i].src.replace(/\/s72\-c/, "/s" + size + "-c");
image[i].width = size;
image[i].height = size;
}
}
resizeThumb('main-wrapper', 200);
//]]>
</script>
</b:if>
</b:if>
 
Metode 2: Menggunakan JQuery
Salin kode ini dan letakkan di atas kode </head> atau </body>:


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
function resizeThumb(el, from, to) {
$(el).each(function() {
$(this).attr({
'src': $(this).attr('src').replace('/s'+from+'-c/', '/s'+to+'-c/'),
'width': to, 'height': to
});
});
}
$(function() {
resizeThumb('.post-thumbnail', '72', '200'); 
});
//]]>
</script>
</b:if>
</b:if>
 
Mengubah Ukuran Thumbnail Image Posting Blogger di Homepage untuk lebih menonjolkan gambar agar menarik. (Sumber: dte).*


Copyright © Detik Style V3. All rights reserved.
About | Kontak | Disclaimer