Gubuk Dunia Online: BLOG

kali ini saya akan share cara menghapus widget bawaan template custom, biasanya widget ini terdapat pada template custom yang mendownload dari internet, dan biasanya widget tersebut adalah Copyright / pembuat template tersebut, nah dengan edit Html kita dapat membuka widget tersebut dan menghapusnya seperti menghapus widget biasa, nah berikut tips menghapus widget bawaan template custom :

Tentunya sobat harus log in ke Blogger.
Kemudian pilih Rancangan dan Edit Html, centang Expand Template Widget.
Selanjutnya cari kode <b:widget id='HTML1' locked='true' title='Arsip' type='HTML'>
Untuk membuka kuncian widget ganti teks berwarna merah dengan false, Teks berwarna biru merupakan judul dari widget tersebut, dan teks berwarna hijau merupakan urutan widget tersebut misal HTML1, HTML2, HTML3,dan seterusnya tergantung banyaknya widget yang sobat pasang pada blog sobat.
Simpan Template, kemudian Elemen Laman, dan hapus widget tadi seperti menghapus widget biasa.
Lihat gambar berikut untuk melihat perbedaannya :


Sebelum Pengeditan

Setelah Pengeditan

Nah dengan begitu sobat bebas mau menghapus widget bawaan tersebut.

Selamat Mencoba !!!

sumber

Posted by: Gubuk Dunia, Updated at: 15.19

Rabu, 05 September 2012

Cara membuat Emoticon di Kotak Komentar

16.49

Unknown

Saya akan menjelaskan cara membuat emoticon di kotak komentar. Apa itu emoticon ? emoticon adalah sebuah gambar yang mengexpresikan mood seseorang saat berkomentar .

Login dulu ke blogger
Klik Template
Klik Edit HTML
Centang kotak Expand Widget Template
Letakkan kode script dibawah ini tepat di atas kode tag </body> (lebih cepatnya Ctrl+F)

<script src='http://emoticon-yahoo-byar.googlecode.com/files/emoticon-Yahoo-AR-310.js' type='text/javascript'/>

Selanjutnya letakkan kode emoticon di atas kode ini :

<b:if cond='data:post.embedCommentForm'>

"Peringatan yang harus diperhatikan"
(jika kode di atas ada dua , pilih yang kedua)

Kode emotion :

Terakhir Save Template.

sumber : romadhon-byar

Posted by: Gubuk Dunia, Updated at: 16.49

Minggu, 02 September 2012

Cara Membuat Tombol Share di Bawah Postingan

19.50

Unknown

Share button adalah tombol yang digunakan untuk membagikan artikel-artikel anda. Dengan membagikan artikel anda ke social bookmark terkenal seperti facebook, twitter akan memudahkan teman, kenalan, dan orang lain menemukan blog anda yang sebenarnya istimewa itu. Maka pemasang share button ini cukup penting dalam meningkatkan traffic pengunjung blog anda. Langsung saja begini cara memasang share button dibawah postingan

Langkahnya :
1. anda masuk ke template - edit html - expand template widget
2. lalu anda cari kode <data:post.body/> pencet ctrl+F untuk memudahkan pencarian
3. dibawahnya taruh kode-kode berikut

<b:if cond='data:blog.pageType == "item"'>
<div style='border-top:1px solid #ccc;border-bottom:1px solid #ccc; padding:8px 0px;margin:5px 0px 5px 0px;width:100%;float:left;height:20px;'>
<div style='float:left;padding-left:0px;font:normal 12px Georgia;'>
Share on :
</div>
<div style='float:left;padding-left:10px;'>
<a name='fb_share' type='button_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'>
</script></div>
<div style='float:left;padding-left:10px;'>
<a class='DiggThisButton DiggCompact'/>
<script type='text/javascript'>
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
</div>
<div style='float:left;padding-left:10px;'>
<a class='twitter-share-button' data-count='horizontal' data-via='User Name' href='http://twitter.com/share'>Tweet</a><script src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div style='float:left;padding-left:10px;'>

<g:plusone size="medium"></g:plusone>

<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div>
</b:if>

lalu klik save template..

sumber : zamedaku

Posted by: Gubuk Dunia, Updated at: 19.50

Senin, 20 Agustus 2012

Mengganti "Older Posts" Dengan Angka

12.30

Unknown

Secara umum, navigasi untuk pindah halaman di blogspot biasanya menggunakan link dengan teks "Older Posts (posting lama)" dan "Newer Posts (posting baru)". Beda dengan wordpress yang navigasinya bisa berbentuk angka sehingga bisa memudahkan untuk loncat beberapa halaman ke postingan yg lama maupun baru.
Nha trik kali ini akan menjelaskan bagaimana cara mengganti link "Older Posts (posting lama)" dan "Newer Posts (posting baru)" menjadi angka seperti gambar di bawah ini

1. Langkah awal tentu saja harus menuju ke desain template anda kemudian ke "Edit HTML"
2. setelah itu cari kode ini ]]></b:skin> kalo sudah ketemu taruh script dibawah ini sebelum kode tersebut

showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

3. setelah itu cari kode ini </body> kemudian taruh script dibawah ini sebelum kode tersebut.

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://bloggergadgets.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
</b:if> </b:if>

Kalau sudah silahkan dilihat hasilnya.

sumber : trik-tips

Posted by: Gubuk Dunia, Updated at: 12.30

Sabtu, 18 Agustus 2012

Cara Mudah Mengganti Favicon Blogger Tanpa Mengedit HTML

12.06

Unknown

Mengganti Favicon, mungkin sudah banyak yang tahu caranya.Panggantian favicon yang akan saya jelaskan disini tanpa melalui editing HTML, melainkan langsung dari fitur yang dimiliki blogger. Tak usah belama-lama, langsung akan saya jelaskan caranya secara lengkap, silakan disimak :)

Masuk halaman Blogger in Draft, silakan login dengan akun blogger sobat
Di halaman utama terdapat daftar blog sobat, silakan klik Dashboard pada blog yang akan diedit faviconnya
Kemudian klik Edit pada elemen Favicon Setting yang terletak diatas elamen navbar
Akan muncul window baru, yaitu window favicon configuration
Silakan sobat pilih file icon yang ingin dipasang, gunakan file dengan ekstensi .ico karena file yang support adalah file icon .ico . Bagi sobat blogger ingin mengkonversi file JPG, PNG atau file lain ke .ICO dapat sobat lakukan di http://www.icoconverter.com/ atau situs konversi lainnya
Setelah itu klik Save untuk menyimpan setting yang telah dilakukan
Selesai, coba sobat buka blognya, dan favicon sudah berubah susai yang diganti tadi :)

sumber : blog trik

Posted by: Gubuk Dunia, Updated at: 12.06

Kamis, 09 Agustus 2012

Cara mengelompokkan artikel dalam label/ kategori

13.27

Unknown

Untuk mempermudah para pembaca yang mengunjungi blog kita ada baiknya kita mengelompokkan artikel berdasarkan kategori tertentu. Di Blogger untuk membuat kategori dikenal dengan istilah Label.

untuk membuat label tersebut ikuti petunjuk berikut ini:

1. Login ke blogger
2. Klik Posting --> Edit Post

* Membuat Kategori / Label

Pilih atau beri tanda centang pada artikel yang ingin diberi label/dikategorikan. Lalu pada Combo box (yang ada tulisannya "label action") pilih "New Label" lalu beri nama label tersebut.

* Menghapus Kategori / Label

Beri tanda centang pada postingan yang ingin dihapus labelnya, trus klik combo box trus klik label dibawah tulisan "Remove label"

* Mengganti Kategori / Label

Hapus dulu label yang ada, kemudian kasih label baru.

3. Cara menampilkan di blog:
1. Klik Template --> Page Elements
2. Tambahkan page elements kemudian pilih Label Kemudian diatur menurut selera…

sumber : server-it

Posted by: Gubuk Dunia, Updated at: 13.27

Membuat Read More Otomatis

13.17

Unknown

Langkah Cara Membuat Read More Otomatis pada Blogger dengan Bahasa Javascript

Ada dua(2) pilihan membuat readmore otomatis / auto read more pada blogger ini sob,yakni read more menggunakan gambar dan hanya menggunakan tulisan.

Untuk pertama kali,seperti biasa ya gan pilih Dashboard,lalu Tata Letak dan Contreng tulisan Expand Widget Templates.

(1)

membuat read more baca selengkapnya otomatis.

(2)

(3)

Selanjutnya,cari kode </head>,setelah ketemu tepat diATASnya letakkan kode javascript berikut:

<script type='text/javascript'>

var thumbnail_mode = &quot;float&quot; ;

summary_noimg = 150;

summary_img = 150;

img_thumb_height = 100;

img_thumb_width = 120;

</script>



<script type='text/javascript'>

//<![CDATA[

/******************************************

Auto-readmore link script, version 2.0 (for blogspot)



(C)2008 by Anhvo



visit http://en.vietwebguide.com to get more cool hacks

********************************************/

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(img.length>=1) {

imgtag  = '<span style="float:left; padding:0px 10px 5px 0px;"><img  src="'+img[0].src+'" width="'+img_thumb_width+'px"  height="'+img_thumb_height+'px"/></span>';

summ = summary_img;

}



var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>

Kemudian cari kembali kode <data:post.body/> atau <p><data:post.body/></p>

Cara 1

Read More Button Otomatis menggunakan gambar,hapus kode tersebut dan gantilah dengan kode berikut:

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

<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>

<span  style='float:right'><a expr:href='data:post.url'><img  alt='Read More..'  src='http://1.bp.blogspot.com/-IHpf1c0gAZE/TahDsOmCrCI/AAAAAAAAAy0/lOZgwgw7eHg/s1600/pelajaran%2Bblog%2Bread%2Bmore%2Botomatis.jpg'/></a></a></span>  

<b:else/>

<data:post.body/>

</b:if>

Cara 2

Read More Button Otomatis hanya berupa text,hapus kode <data:post.body/> atau <p><data:post.body/></p> tersebut dan gantilah dengan kode berikut:

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

<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>

<span style='float:right'><a expr:href='data:post.url'>Read More..</a></span> 

<b:else/>

<data:post.body/>

</b:if>

Lalu simpan templates dan lihat hasilnya.

Dan gantilah dengan kode sesuai pilihan sobat diatas,bisa menggunakan cara 1 maupun cara

2.Semoga berhasil dan selamat ngutak-atik template ya

sumber : pelajaran-blog