Cara Mengetahui dan Membuat URL Gambar

Bangiz - Tahukah Anda bahwa sebenarnya gambar-gambar yang ada di internet itu semuanya memiliki alamat URL. Anda menyadari atau tidak memang bagitulah adanya. Pertanyaannya mungkin seperti ini, bagaimana cara kita mengetahui alamat url gambar di internet? Bagaimana cara mengetahui alamat url gambar yang kita upload?

Jika Anda mempunyai pertanyaan yang seperti di atas, maka berikut ini admin mau memberikan jawabannya. Untuk yang sudah tahu menyimak saja, nanti kalau ada yang salah bisa ikut memperbaiki atau mungkin menambahkan.

Gambar contoh

Cara mengetahui URL gambar di internet

1. Silahkan buka browser
2. Pilih situs yang memiliki gambar lalu klik kanan pada gambarnya
3. Pilih Copy Image Location (maka itulah alamat url gambarnya)

Untuk membuktikannya:

1. Langsung klik pada gambar, lalu lihat pada kolom URL di browser
2. Buka tab baru kemudian klik kanan pada kolom URL browser lalu pilih Paste & Go, jika benar maka gambarnya akan muncul.

Cara membuat / mengetahui URL gambar yang di upload

Untuk contoh kali ini menggunakan blogger, jika belum memiliki silahkan membuat akunnya terlebih dahulu.

1. Masuk Dasboard Blogger
2. Pilih entri baru (icon pensil) lalu Insert Image lalu upload gambar (gunakan file JPG, PNG atau GIF) hingga selesai.

Insert Image via Blogger

3. Kalau berhasil maka pada kolom Compose area postingan akan muncul gambar yang di upload.

Tampilan pada mode Compose

4. Untuk mendapatkan kode HTMlnya, Anda tinggal klik kolom HTML yang sebelah Compose. Lihat gambar, yang di blok adalah kode url dari gambar tadi yang di upload. Klik gambar untuk memperbesar atau baca Cara Memperbesar Thumbnail Gambar.
Url gambar

Tampilan pada mode HTML

5. Selesai. Kode HTML gambar dimulai dari http://......... sampai file yang digunakan (JPG, PNG atau GIF). Contohnya:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKTy23-58GUThB3MuDStFWopTJji1t6cUbgUijIuwLfQUezaKOhYBBuKa3oOe11-0FSqy5MQ0zWd2a3KUMVAF6HdBVBRJuvKtLUdeVU5Rg7jtKKLnhmxQIcOciOSnKJ6xWEPQtA0rzXUzP/s1600/url+gambar.jpg

Demikian yang bisa +Bangiz  jelaskan kali ini semoga bisa bermanfaat. Jika ada pertanyaan atau saran yang berhubungan dengan topik di atas, silahkan tinggalkan komentar yang mana bisa menggunakan akun Facebook atau Blogger. Happy blogging.

Cara Membuat Fans Page Facebook Auto Hidden

Bangiz - Untuk saat ini banyak cara untuk menambahkan sosial media anda untuk terhubung dengan blog atau website yang anda miliki. Tentunya anda harus punya dulu akunnya baik itu Facebook, Twitter, Google+ atau yang lainnya. Sebelumnya saya sudah membuat tulisan tentang Cara Membuat Halaman di FB / Facebook. Tutorial kali ini masih berhubungan dengan Facebook yaitu cara memasang fans page Facebook auto hidden.

Facebook / ilustrasi

1. Masuk Dasbor Blogger.
2. Pilih Template > Edit HTML.
3. Cari kode </head> (gunakan Ctrl+F untuk memudahkan).
4. Copy-paste kode berikut diatas kode </head>:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'/>

Jika sudah ada, lewati langkah poin empat ini. Berikutnya adalah memasang kode fans page faebook pada platform Blogger.

5. Dari Dasbor Blogger pilih Tata Letak.
6. Tambahkan Gadget. 
7. Pilih HTML/Javascript, lihat Cara Menambahkan HTML/JavaScript.
8. Copy-paste kode di bawah ini pada kolom konten.

<script type="text/javascript">

/*<![CDATA[*/

jQuery(document).ready(function() {jQuery(".likebox").hover(function() {jQuery(this).stop().animate({right: "0"}, "medium");}, function() {jQuery(this).stop().animate({right: "-250"}, "medium");}, 500);});

/*]]>*/

</script>

<style type="text/css">

.likebox{background: url("http://3.bp.blogspot.com/-KdSAuv-K7HM/To_WXoWHzJI/AAAAAAAAGvg/5UvL10LUe_k/facebook.png") no-repeat scroll left top transparent !important;display: block;float: right;height: 270px;padding: 0 5px 0 46px;width: 245px;z-index: 99999;position:fixed;right:-250px;top:44%;}

.likebox div{border:none;position:relative;display:block;}

.likebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 7px;text-align: right;z-index: 99999;}

.likebox span a{color: gray;text-decoration:none;}

.likebox span a:hover{text-decoration:underline;}

</style>

<div class="likebox" style="">

    <div>

 <iframe src="http://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FBangiz%2F557274137622952&width=300&height=290&show_faces=true&colorscheme=dark&stream=false&border_color&header=true&width=245&colorscheme=light&show_faces=true&connections=9&stream=false&header=false&height=330" scrolling="no" frameborder="0" scrolling="no" style="border: medium none; overflow: hidden; height: 330px; width: 245px;background:#ffffff;"></iframe><span><b></b></span></div>

</div>

9. Ganti kode yang berwarna merah dengan kode fanpage Facebook Anda.

10. Simpan dan lihat hasilnya.

Sekian cara membuat atau memasang widget fans page Facebook auto hidden pada blog. Mudah-mudahan hasil bagus dan sesuai dengan keinginan Anda. Nantikan tips Blogging lainnya, silahkan ikuti +Bangiz untuk mendapatkan update langsung di Google Plus.

Cara Menghilangkan Underline Pada Link HTML

Bangiz - Apabila kita punya blog, lalu kita lihat semua link yang ada di blog kita itu ada garis bawahnya. Kira-kira apa ya reaksi kita? Meski semua orang memiliki pandangan yang berbeda-beda. Mungkin ada yang mengatakan tidak masalah, ada juga yang mengatakan gak suka dengan adanya garis bawah atau underline tersebut khususnya untuk link aktif ketika hover.

Admin sendiri termasuk orang yang merasa bahwa underline itu mengganggu, maksudnya mengganggu penampilan blog saya. Jadi terpaksa harus saya hilangkan. Sebelumnya saya posting Cara Membuat Tombol Back to Top di Blog dan Cara Memasang Kamera CCTV Animasi di blog, bagi yang mau baca silahkan klik linknya. Sekarang saya akan share cara menghilangkan underline di blog, silahkan ikuti caranya berikut ini:

Menghilangkan underline

1.  Login ke Dashboard Blogger.

2.  Pilih Template 

3.  Pilih Edit HTML 

4.  Cari kode berikut: (gunakan Ctrl+F untuk mempermudah pencarian)

]]></b:skin>

5.  Letakkan kode berikut ini tepat diatasnya.

a:link {text-decoration: none}
a:visited {text-decoration: none}
a:active {text-decoration: none} 

6.  Simpan Template. 

7.  Lihat hasilnya.

Apabila Anda tidak mau menambahkan kode di atas, cara lainnya bisa melalui HTML template yang digunakan. Caranya: ikuti poin 1-4 di atas, tetapi cari kodenya seperti ini:

text-decoration: underline

Kalau sudah ketemu, ganti saja kata 'underline' dengan 'none' (tanpa tanda kutip) dan jangan lupa klik Simpan Template.

Begitulah caranya menghilangkan semua garis bawah atau underline di blog. Apabila ada pertanyaan seputar topik, silahkan tinggalkan komentar dan jangan lupa follow Bangiz melalui sosial media untuk mendapatkan update terbaru. Semoga bermanfaat.

Silahkan baca juga yang lainnya:

Cara Memasang / Menambah Emotion di Komentar

Cara Memasang Burung Twitter di Blog

Cara Membuat Fans Page Facebook Auto Hidden 

Cara Membuat Related Post dengan Thumbnail 

Cara Menambahkan Link di Widget Attribution 

Cara Menghilangkan Icon Obeng dan Kunci pada Blog 

Cara Mengganti Template Blog Keren

Bangiz - Ketika Anda pertama kali membuat blog dengan blogger, maka pihak blogger akan memberikan Anda satu fitur untuk memulai membangun blog baru. Setelah Anda mempunyai blog tentunya juga Anda dapat melakukan perubahan pada blog Anda misalnya tata letak blog, mengedit elemen template, mengubah desain blog dan lain-lain.

Blogger template

Memilih template keren, sesuai dengan isi dari blog dan sesuai dengan keinginan Anda menjadi sangat penting karena Anda akan meletakkan konten pada template itu. Anda akan ditawarkan untuk memilih template sekali ketika Anda mulai membuat blog dengan Blogger. Tapi tenang saja Anda masih bisa mengubahnya sesuai harapkan. 

Untuk mendapatkan template blog berkualitas bisa didapatkan dengan membuat sendiri, membeli template premium, maupun mendownload versi gratis yang banyak tersedia di internet. Berikut ini ada dua cara untuk mengganti template pada blog Anda.

Cara Pertama:

1. Login ke Dasbor Blogger.

2. Pilih Template > Sesuaikan blog.
 

Pengaturan template 

3. Jika sudah muncul macam-macam templatenya,  silahkan Anda pilih template yang paling cocok untuk blog Anda.

4. Klik tombol Terapkan ke Blog. Anda hanya perlu mengarahkan pointer mouse Anda ke setiap template dan klik Terapkan untuk Blog untuk setiap template yang Anda pilih.

Cara Kedua:

1. Masuk dasbor blogger

2. Pilih Template > Cadangkan / Pulihkan (di sebelah pojok kanan atas)

Cadangkan template

3. Pilih Unduh template lengkap, apabila suatu saat Anda ingin mengembalikan template tersebut

Unggah template

4. Silahkan unggah template dari file di hard drive Anda dan tunggu sampai proses selesai

5. Lihat tampilan template baru Anda.

Keterangan:
--> Template yang ada pada cara pertama merupakan template yang sudah disediakan oleh pihak blogger sendiri.
--> Template pada cara kedua, Anda bisa mendownloadnya dari mana saja yang penting cocok untuk platform blogger. 

Mudah-mudahan cara mengganti template pada blog di atas mudah untuk dipahami dan dipraktekkan buat Anda yang berencana mengganti tempate. Happy blogging :)

Cara Membuat Related Post di Blogger

Bangiz - Related Post tentunya sangat berguna bagi pengunjung untuk mencari artikel-artikel lain yang berhubungan dengan artikel yang sedang dibaca oleh pengunjung tersebut. Related Post tersebut akan muncul biasanya di bagian bawah setiap postingan yang kita buat, tentunya postingan yang memiliki label atau tag yang sama. 

Untuk sebagian blog, ada juga yang menempatkan widget ini di bagian sidebar. Jika ada pengunjung yang membuka link artikel dalam related post ini pastinya akan meningkatkan jumlah pageview juga. Kalau di blog Anda belum ada related postnya dan ingin menambahkan, langsung saja ikuti cara-caranya berikut ini:

Related artikel

1. Masuk ke Dasbor Blogger 
2. Pilih Tata Letak 
3. Pilih Edit HTML

4. Cari kode <data:post.body/> (gunakan Ctrl+F untuk memudahkan)

5. Copy-Paste kode berikut ini tepat di bawah kode tadi

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<div class='widget-content'>
<h3>Related Posts</h3>
<div id='data2007'/><br/><br/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
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;data2007&#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>
</div>
</b:if>

Keterangan:

Silakan Anda ganti kalimat "Related Posts" dengan kalimat lain yang sesuai dengan keinginan masing-masing.

6. Simpan Template dan lihat hasilnya.

Sekian tips blogging kali ini tentang cara membuat atau pasang related post / artikel terkait pada blog dengan platform Blogger. Jangan lupa ikuti +Bangiz untuk mendapat tips dan trik terupdate lainnya. 

Cara Mengatasi Error Code bX-hjzhtc Blogger

Bangiz - Tampilan sebuah blog memang memiliki peranan penting, mulai dari tata letak, warna latar, warna huruf, bentuk huruf, ukuran huruf, dan lain-lain. Adakalanya seorang Blogger mesti mengutak-atik tampilan blognya supaya terlihat lebih menarik dan rapih.

Karena keasikan berkreasi terkadang bisa saja terjadi error, dan apabila ada kesalahan tertentu berhubungan dengan Blogger biasanya ditandai dengan munculnya kode error. Salah satunya kode error bX-hjzhtc, adapun efek dari masalah tersebut yaitu berupa tampilan yang kosong (blank) saat kita membuka Perancang Template Blogger. 

Error Code bX-hjzhtc

Pengalaman admin, hal tersebut terjadi karena adanya perbedaan variabel warna dengan nilai alpha nol, contohnya: saat menggunakan perancang template, lalu kita mengubah background yang asalnya berupa kode hexa (ex: #0000FF) dengan tulisan 'transparent', maka hasilnya dalam bentuk HTML akan menjadi  kode rgba (0,0,0,0) dan berpengaruh terhadap perancangan template.

Lihat juga: Cara Mengatur Ukuran Kotak Komentar Blogger

Jika Anda mengalami hal tersebut, tidak perlu panik, mudah-mudahan dengan cara berikut dapat memacahkannya.

1. Masuk ke Dasbor Blogger

2. Pilih Menu Template, lalu Edit HTML

3. Cari kode 'rgba' tanpa tanda petik (supaya cepat pakai Ctrl+F)

3. Jika sudah menemukan kode rgba(0,0,0,0) misalnya, selanjutnya ganti nilai 0 dengan tulisan 'transparent'. Sebagai contoh:

     Kode awal:

<Variable name='body.background.color' type='color' value='rgba(0,0,0,0)' default='rgba(0,0,0,0)' />

     Kode setelah diubah:

<Variable name='body.background.color' type='color' value='transparent' default='transparent' />

4. Jangan lupa Simpan Template.

Guna mencoba hasilnya silahkan masuk lagi ke Dasbor Blogger > Template > Sesuaikan, jika berhasil maka tampilan blog Anda akan muncul lagi di Perancang Template Blogger. Demikian tips blogging saat ini tentang mengatasi error kode bX-hjzhtc. Nantikan tips dan trik lainnya, silahkan ikuti +Bangiz di sosial media.