Trik Internet Gratis: Tutorial Blog

Showing posts with label Tutorial Blog. Show all posts

Cara Membuat Read More pada Blog

Cara Membuat Read More di Blog – Tujuan dari pembuatan read more pada blog yaitu untuk membuat tampilan posting agar lebih rapi dan tidak memanjang kebawah.

Kalau blog kita rapi tentu saja pengunjung akan betah berlama-lama mampir di blog kita. Berikut cara memasang read more pada blog :

1. Login akun blogger Anda.
2. Pilih Template > Edit HTML > centang Expand Template Widget.
3. Cari kode </head> (gunakan Ctrl + F untuk mempercepat pencarian).
4. Copy paste kode berikut diatas kode </head>

<script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 430; summary_img = 340; img_thumb_height = 100; img_thumb_width = 120; </script> 

5. Kemudian cari kode <data:post.body/>
6. Setelah ketemu ganti kode tersebut dengan kode dibawah ini :

<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 class='rmlink' style='float:right;padding-top:20px;'>

<a expr:href='data:post.url'>READ MORE</a></span>

</b:if>

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

Keterangan :
summary_noimg = 430; yaitu jumlah karakter yang akan ditampilkan ketika tidak menggunakan gambar.
summary_img = 340; yaitu jumlah karakter yang akan ditampilkan ketika menggunakan gambar.
img_thumb_height = 100; yaitu ukuran tinggi gambar yang akan ditampilkan.
img_thumb_width = 120; yaitu ukuran lebar gambar yang akan ditampilkan.
7. Klik Simpan template.

Nah, tampilan posting Anda sudah terpasang Read More, selamat mencoba.

Blog merupakan singkatan dari web log adalah bentuk aplikasi web yang menyerupai tulisan-tulisan (yang dimuat sebagai posting) pada sebuah halaman web umum, media blog pertama kali dipopulerkan oleh blogger.com (id.wikipedia).

Selain blogger masih banyak blog di cms lain seperti blogdetik, wordpress.com, dag dig dug, kompaisana dan lain-lain.

Berikut kita akan membahas langkah-langkah cara membuat blog dengan blogger.com:

1. Sebelum daftar blogger, buat akun gmail terlebih dahulu klik disini.
2. Kalau sudah mendaftar, kunjungi situs blogger.com blogger.com
3. Klik SIGN UP (pojok kanan atas).
4. Isi data-data yang diperlukan, kalau sudah jangan lupa centang Acceptance of terms, klik Continue.
5. Anda akan dibawa masuk ke halaman blog, klik Blog Baru.
6. Kemudian akan muncul halaman untuk memilih judul, alamat, dan template blog.

7. Kemudian klik Buat blog!

Nah, blog telah selesai dibuat untuk melihat hasilnya ketik alamat blog yang Anda daftarkan tadi lewat browser.

Cara Membuat Read More versi Blogger

Sebelumnya telah kita bahas cara membuat posting pada blog, pada kesempatan ini kita akan membahas kembali seputar postingan yaitu cara membuat read more pada postingan.

Fungsi dari 'READ MORE' salah satunya adalah untuk merapikan/meringkas posting dengan menampilkan sebagian tulisan agar tidak memanjang kebawah. Berikut langkah membuat read more versi blogger :

1. Login akun blogger Anda.
2. Masuk ke halaman entri/postingan dan tulis postingan pada halaman entri.

3. Setelah selesai menulis postingan, letakkan kursor pada akhir posting yang ingin diringkas, kemudian klik icon 'Insert jump break'.

4. Klik 'Pratinjau' untuk melihat hasilnya terlebih dahulu.
5. Kalau tampilan posting dirasa sudah cukup bagus, klik 'Publikasikan'.

Kita juga bisa mengubah tulisan Read More dengan tulisan yang lain seperti Seterusnya, Selengkapnya, Baca Selengkapnya, dll. Berikut cara mengubahnya :

1. Masuk ke halaman Tata Letak, kemudian pada form Posting Blog klik Edit.

2. Kemudian pada 'Teks tautan laman entri:' ganti dengan tulisan yang Anda inginkan.

Nah, selesai cara membuat read more pada postingan versi blogger semoga bermanfaat.

Navbar adalah kotak memanjang terletak di bagian atas blog yang berfungsi untuk Sign In Blogger dan bisa juga melaporkan blog yang kontennya melanggar TOS blogger.

Biasanya kalau Anda menggunakan template bawaan blogger, navbar (Navigation Bar) ini akan muncul tapi jika template Anda dari pihak ketiga atau template yang sudah di edit (hasil download) biasanya sudah dihilingkan. Berikut langkah-langkah cara menghilangkan navbar blog :

1. Login akun blogger Anda.
2. Pilih Template > Edit HTML > centang Expand Template Widget.
3. Cari kode ]]></b:skin> untuk mempercepat pencarian gunakan Ctrl + F.
4. Kemudian copy kode berikut dan letakkan diatas kode ]]></b:skin>

#navbar-iframe {

height:0px;

visibility:hidden;

display:none

}

5. Klik Simpan template.

Nah, Blog Anda sekarang tidak memiliki navbar. Jika Anda masih mengalami masalah hubungi kami melalui contac.

Kebanyakan blogger memasang artikel terkait di bawah posting agar pengunjung dapat melihat setelah membaca postingan. Fungsi dari artikel terkait adalah memberikan informasi kepada pengunjung tentang keterkaitan artikel yang dibaca dengan lainnya.

Misalnya Anda sedang membaca artikel tentang tutorial blog, maka yang akan muncul di artikel terkait adalah label tutorial blog. Jika Anda ingin memasangnya pada blog silahkan ikuti langkah-langkahnya berikut ini :

1. Login akun blogger Anda.
2. Pilih Template --> Edit HTML ---> centang Expand Template Widget.
3. Cari kode </head> kemudian letakkan kode dibawah ini diatas kode </head>

<script type="text/javascript">

//<![CDATA[

var relatedTitles = new Array();

var relatedTitlesNum = 0;

var relatedUrls = new Array();

function related_results_labels(json) {

for (var i = 0; i < json.feed.entry.length; i++) {

var entry = json.feed.entry[i];

relatedTitles[relatedTitlesNum] = entry.title.$t;

for (var k = 0; k < entry.link.length; k++) {

if (entry.link[k].rel == 'alternate') {

relatedUrls[relatedTitlesNum] = entry.link[k].href;

relatedTitlesNum++;

break;}}}}

function removeRelatedDuplicates() {

var tmp = new Array(0);

var tmp2 = new Array(0);

for(var i = 0; i < relatedUrls.length; i++) {

if(!contains(tmp, relatedUrls[i])) {

tmp.length += 1;

tmp[tmp.length - 1] = relatedUrls[i];

tmp2.length += 1;

tmp2[tmp2.length - 1] = relatedTitles[i];}}

relatedTitles = tmp2;

relatedUrls = tmp;}

function contains(a, e) {

for(var j = 0; j < a.length; j++) if (a[j]==e) return true;

return false;}

function printRelatedLabels() {

var r = Math.floor((relatedTitles.length - 1) * Math.random());

var i = 0;

document.write('<ul>');

while (i < relatedTitles.length && i < 20) {

document.write('<li><a href="' + relatedUrls[r] + '">' +

relatedTitles[r] + '</a></li>');

if (r < relatedTitles.length - 1) {

r++;

} else {

r = 0;}

i++;}

document.write('</ul>');}

//]]>

</script>

4. Setelah itu cari kode <data:post.body/> kemudian letakkan kode dibawah ini dibawah kode <data:post.body/>

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

<b:loop values='data:post.labels' var='label'>

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

<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5"' type='text/javascript'/>

</b:if>

</b:loop>

</b:if>

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

<h4>Artikel Terkait</h4>

<script type="text/javascript">

removeRelatedDuplicates();

printRelatedLabels();

</script>

</b:if>

5. Simpan template.

Nah, pada bawah postingan Anda sudah terpasang artikel terkait, selamat mencoba.

Cara Membuat Daftar Isi dengan Jquery di Blog

Daftar isi pada blog sangat penting sekali karena dapat memudahkan pengunjung untuk mengetahui atau mencari artikel keseluruhan pada sebuah blog. Pada kesempatan ini kita akan membahas cara membuat daftar isi dengan efek Jquery di blog.

Kelebihan daftar isi dengan Jquery ini adalah pada tampilannya yang cukup menarik. Jika Anda ingin memasangnya di blog ikuti dan simak langkah-langkahnya berikut ini :

1. Login akun blogger Anda.
2. Pilih Template > Edit HTML > centang 'Expand Template Widget'.
3. Letakkan kode berikut diatas kode ]]></b:skin>

#dafis-acc{

font-family:"Trebuchet MS", Tahoma, Verdana, Arial, Helvetica, sans-serif;

font-size:12px;

color:#333;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMa3aruTqaM_Djfib7sQaewCwMhov6VdfK26S-YUMdzX8plHolRC5Qk5VDtaYDyq8xX6CGVd4kD4__GJHV4lMyXGoM-BWlzf9MbwOLlInERFUs8tEzrj6X_0GB9O1QWtNSnKRWrcurePc/s320/bg5.gif) repeat-y scroll left center #E7F7FB;

padding:2px 0;

border:1px solid #339DC6;

}

.dafis-label{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtMMIjt2KWZCqnCsTn48ZEl5Dbr6HDMYiRaX6C1E0HxTlgVQa8kNIifAZRYkzbMR1ZemU0wKZ_FT6G7S9La6us9ufSBTwaPW9sxwx8oOZRF8JzTzI1OubqUKLqasYnfgvN9iSNoSlKQDA/s1600/bg4.gif) repeat-x scroll 0 0 #E1F4FB;

font-weight:bold;

line-height:1.4em;

overflow:hidden;

white-space:nowrap;

vertical-align: baseline;

margin: 1px 3px;

outline: none;

cursor: pointer;

text-decoration: none;

padding: 2px 10px;

color: #fff;

text-shadow: 0 1px 1px rgba(0,0,0,.3);

border:1px solid #2F94BA;

}

.dafis-label:hover{

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7R3UTR4jJ1rGLdqq3iwatwmx8NkkJvwhhJTNtD3bHcDCpilhUotr-6haJVuDs3Y7X_fDh4vPSudGW0Svvq4EOtp1kZ35z7mXWvGJEoqr1TDQ9EncOPAzAcNhm8ShGMbVBm-nFHwKrIgw/s320/bg2.gif) repeat-x scroll 0 0 #E1F4FB;

color:#003366;

}

.dafis-daf ol{

margin:0 0 0 30px !important;

padding:0 !important;

}

.dafis-daf ol li{

background-color:#C9E9F4;

line-height:1.5em;

margin:1px 3px !important;

white-space:nowrap;

text-align:left;

border:1px solid #339DC6;

}

.dafis-daf ol li a{

text-decoration: none !important;

color:#333 !important;

display:block;

padding-left:10px;

}

.dafis-daf ol li a:hover{

background: #7BC4DF;

border-left: 5px #333 solid;

padding-left: 5px;

text-shadow: 0 1px 1px rgba(0,0,0,.3);

}

4. Kemudian letakkan juga kode berikut diatas kode </head>

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

5. Setelah itu Simpan template.
6. Langkah selanjutnya adalah memasang daftar isi di blog, letakkan kode dibawah ini pada HTML/JavaScript atau posting blog Anda pada mode HTML.

<script type="text/javascript" src="http://id-pemula-javascript.googlecode.com/files/Dafsis.js"></script> <script src="http://id-pemula.blogspot.com/feeds/posts/summary?max-results=1000&amp;alt=json-in-script&amp;callback=loadtoc"></script>

Keterangan:
Ganti kode yang berwarna merah diatas dengan alamat URL blog Anda.

Nah, sekarang blog Anda sudah terpasang daftar isi dengan efek Jquery yang menarik.

Biasanya setelah mengganti template blog terkadang kita tidak menyukai warna link bawaan dari template, bisakah kita mengubah warna link pada blog? Tentunya sangat bisa dan mungkin sekali kita mengubah warna link pada blog sesuai dengan keinginan, hanya saja dibutuhkan sedikit ketelitian dalam mengedit template karena tidak semua template script-nya sama.

Berikut simak langkah-langkah cara mengubah warna link pada blog :

1. Login akun blogger Anda.
2. Pilih Template > Edit HTML > centang 'Expand Template Widget'.
3. Kemudian cari kode seperti dibawah ini :

a:link {

color:#000000;

text-decoration: underline;

}

a:hover {

color:#FFFFFF;

text-decoration: underline;

}

a:visited {

color:#CCCCCC;

text-decoration: underline;

}

Keterangan dari kode diatas :

a:link {

color:#000000;

text-decoration: underline;

}

// Link yang akan ditampilkan berwarna hitam

a:hover {

color:#FFFFFF;

text-decoration: underline;

}

// Jika mouse Anda arahkan pada link maka akan berubah menjadi warna putih

a:visited {

color:#CCCCCC;

text-decoration: underline;

}

// Jika link selesai diklik maka link akan berubah menjadi abu-abu

4. Ganti kode warna diatas sesuai dengan keinginan Anda.
5. Selanjutnya cek hasilnya, klik 'Pratinjau' kalau sudah berhasil klik 'Simpan template'.

Nah, sekarang Anda bisa mengubah warna link pada blog sesuai dengan keinginan dan kebutuhan.

Ketika kita membuat blog pertama kali yang harus kita pikirkan adalah nama alamat URL blog, usahakan membuat nama URL blog yang simple, mudah dibaca dan diingat pengunjung agar suatu ketika kita tidak ingin mengganti nama URL blog tersebut.

Dengan mengganti alamat URL blog akan berdampak pada search engine karena search engine akan kebingungan dan tidak menemukan alamat URL blog yang dicari (alamat URL blog yang lama), sehingga pengunjung blog juga akan mengalami penurunan dan kita harus memulainya dari awal/nol lagi.

Kalau Anda ingin mengganti alamat URL blog, berikut ikuti langkah-langkahnya :

1. Login akun blogger Anda.
2. Pilih 'Setelan' atau 'Setting', seperti gambar dibawah ini:

3. Kemudian klik 'Dasar', pada menu Alamat Blog klik 'Edit', ganti alamat URL sesuai keinginan.

4. Setelah selesai klik 'Simpan'.

Nah, Anda bisa langsung mengecek perubahan alamat URL blog dan semoga bermanfaat.

Cara Membuat Next Page pada Blog

Pernahkah Anda melihat tombol next page yang terletak dibawah posting sebuah blog? Pada kesempatan ini kita akan membahas cara membuat next page tersebut. Fungsi dari tombol next page ini adalah untuk memudahkan pengunjung blog dalam melakukan pencarian posting sebelumnya.

Kalau Anda penasaran cara membuat next page pada blog, langsung saja kita ikuti langkah-langkah pembuatannya dibawah ini :

1. Login akun blogger Anda.
2. Pilih Template ---> Edit HTML ---> klik Expand Template Widget.
3. Cari kode ]]></b:skin> kemudian letakkan kode dibawah ini tepat diatas ]]></b:skin>

.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;}

4. Selanjutnya cari kode </body> kemudian letakkan kode dibawah ini tepat diatas</body>

<script type='text/javascript'>

var pageCount=5;

var displayPageNum=5;

var upPageWord=&#39;Previous&#39;;

var downPageWord=&#39;Next&#39;;

</script>

<script src='http://id-pemula-javascript.googlecode.com/files/blogger-page-nav-v2.js' type='text/javascript'/>

5. Simpan template.

Nah, sekarang blog Anda sudah terpasang tombol next page sehingga pengunjung dapat melihat halaman blog satu-persatu. Jika Anda masih mengalami masalah hubungi kami melalui contac.

Cara Mengganti Logo Favicon pada Blog

Apakah favicon blog itu? Favicon atau Favorites Icon merupakan gambar/logo kecil yang terletak pada address bar suatu blog. Contohnya seperti gambar dibawah ini :

Untuk mengganti favicon blog, Anda harus menyiapkan gambar/logo terlebih dahulu dengan ukuran kurang dari 100KB. Kemudian upload pada situs free image hostingdan ambil URL-nya. Kalau sudah ikuti langkah mengganti logo favicon blog.

1. Login akun blogger Anda.
2. Pilih Template --> Edit HTML ---> centang Expand Template Widget.
3. Cari kode </head> kemudian letakkan kode dibawah ini diatas kode </head>

<link href='URL ICON' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

Keterangan:
Ganti URL ICON dengan URL gambar/logo yang akan dijadikan favicon blog.
4. Simpan template.

Nah, itu tadi cara yang pertama, cara yang kedua lebih mudah simak caranya dibawah ini :

1. Masuk halaman 'Tata Letak'.
2. Klik 'Edit' pada bagian Favicon.

3. Kemudian klik 'Browse', upload gambar/logo favicon.

4. Kalau sudah selesai mengupload, klik Simpan.

Nah, selesai sudah mengganti favicon pada blog. Kalau Anda masih bingung silahkan hubungi kami melalui contac.

Trik Internet Gratis

Cara Membuat Read More pada Blog

Cara Membuat Blog dengan Blogger.com

Cara Membuat Read More versi Blogger

Cara Menghilangkan Navbar Blog

Cara Membuat Artikel Terkait pada Blog

Cara Membuat Daftar Isi dengan Jquery di Blog

Cara Mengubah Warna Link pada Blog

Cara Mengganti Alamat URL Blog

Cara Membuat Next Page pada Blog

Cara Mengganti Logo Favicon pada Blog