Tampilkan postingan dengan label Blog Design/Editing. Tampilkan semua postingan
Tampilkan postingan dengan label Blog Design/Editing. Tampilkan semua postingan

Membuat Daftar Tulisan Yang Berhubungan di Bawah Posting




Pernahkah anda mampir kelamaan pada suatu blog? Padahal tujuan semula hanya untuk mencari satu informasi. Begitu tulisannya ditemukan dan membacanya sampai ke bawah, anda melihat sederetan judul tulisan lain yang menarik, sampai anda bingung memilih mana yang mau dibaca duluan. Nah, itulah yang disebut dengan related post. Kita bisa artikan dengan tulisan yang berhubungan, posting terkait, artikel lain yang berhubungan, dan seterusnya. Contohnya terlihat seperti ini:

Membuat Daftar Tulisan di bawah Posting

Nah, untuk membuat daftar tulisan seperti itu kita tidak perlu melakukan secara manual satu persatu pada setiap posting. Cukup dengan satu kali pengaturan, maka setiaptulisan yang berhubungan akan muncul secara otomatis di bawah setiap posting. Dengan catatan sebelumnya anda sudah memasang widget label/kategori. Jika belum pasanglah widget tesebut terlebih dulu. Jika belum tau caranya bisa anda lihat di sini. Jika labelnya sudah dipasang anda bisa lanjut ke langkah berikut:

1. Masuklah ke halaman Dasbor blog anda lalu klik Rancangan.

2. Kemudian klik pada Edit HTML.

Membuat Daftar Tulisan di bawah Posting

3. Untuk berjaga-jaga jika terjadi kesalahan sebaiknya backup dulu template anda dengan mengklik Download Template Lengkap.

Membuat Daftar Tulisan di bawah Posting

4. Kemudian carilah kode:  <data:post.body/>

5. Agar lebih mudah mencarinya tekan (Ctrl + F) pada keyboard lalu tekan Enter. Maka akan muncul kotak Find. Ketiklah kode yang akan dicari pada kotak tersebut lalu tekan Enter, maka secara otomatis akan muncul kode yang dicari dalam keadaan terseleksi dengan warna hijau.

Membuat Daftar Tulisan di bawah Posting

6. Kemudian copy semua kode di bawah ini dan pastekan tepat di bawahnya. Untuk tulisan berwarna biru bisa anda ganti sesuai keinginan anda.

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<!-- *****************http://hoctro.blogspot.com*****Jan,2007****************** -->
<!-- *****************Related Articles by Labels - Take Two****************** -->
<!--
Modified by JackBook.Com to make it easier to use.
1. Now, users don't need to change anything to use this widget. just copy and paste, and done!
2. The current article will also be listed, now it's no more.
-->
<div class='widget-content'>
<h3>Artikel Yang Berhubungan</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>


7. Setelah itu klik SIMPAN TEMPLATE dan tunggu proses berlangsung.

Membuat Daftar Tulisan di bawah Posting

8. Sekarang anda sudah bisa melihat hasilnya dengan mengklik Lihat Blog.

Membuat Daftar Tulisan di bawah Posting



Baca selengkapnya..

CARA MEMBERI BACKGROUND PADA KOMENTAR ADMIN



Cara Memberi Background pada Komentar Admin Blogger.com

Apakah tampilan komentar pada blog anda sama saja antara anda sebagai admin dengan para pengunjung? Sehingga pengunjung yang baru mampir ke blog anda dan ingin mengikuti alur diskusi jadi bingung menebak siapa sebenarnya pemilik dari blog anda. Begitu juga mereka yang ingin melilhat balasan anda jadi sulit melihat secara sepintas dibaris mana balasan dari komentar anda. Tapi dengan membedakan backgroundnya, maka dengan sekilas pandang baik pengunjung apalagi anda akan sangat mudah menebaknya. 

Nah, jika anda tertarik, anda bisa ikuti beberapa langkah dibawah ini:


1. Masuklah ke halaman Dasbor blog anda lalu klik Rancangan.



2. Kemudian klik pada Edit HTML.

Cara Memberi Background pada Komentar Admin Blogger.com

3. Untuk berjaga-jaga jika terjadi kesalahan sebaiknya backup dulu template anda dengan mengklik Download Template Lengkap.

Cara Memberi Background pada Komentar Admin Blogger.com

4. Kemudian carilah kode:   ]]></b:skin>

5. Agar lebih mudah mencarinya tekan (Ctrl + F) pada keyboard lalu tekan Enter. Maka akan muncul kotak Find. Ketiklah kode yang akan dicari pada kotak tersebut lalu tekanEnter, maka secara otomatis akan muncul kode yang dicari dalam keadaan terseleksi dengan warna hijau. 

Cara Memberi Background pada Komentar Admin Blogger.com

6. Kemudian copylah kode dibawah ini tepat di atas kode tersebut:

.comment-body-admin{background:#edf0f3;border:0px solid #dddddd;margin:0.3em 0;padding-top:1px;padding-right:15px;padding-bottom:3px;padding-left:35px;font-weight:normal;font-size:11px;color:#000000;line-height:15px;text-align:justify;letter-spacing:-0.02em;}

Keterangan: 
Warna biru adalah kode warna untuk backgroundnya. Anda bisa ganti sesuai keinginan anda. 


Jika kesulitan dalam menentukan kode warna maka anda bisa lihat disini: Daftar Kode Warna.
Warna merah adalah ukuran fontnya. Gantilah angkanya sesuai keinginan anda
Warna pink adalah kode warna untuk fontnya. Gantilah angkanya sesuai keinginan anda

7. Setelah anda pastekan maka hasilnya akan tampak seperti ini:

.comment-body-admin{background:#edf0f3;border:0px solid #dddddd;margin:0.3em 0;padding-top:1px;padding-right:15px;padding-bottom:3px;padding-left:35px;font-weight:normal;font-size:11px;color:#000000;line-height:15px;text-align:justify;letter-spacing:-0.02em;}
]]></b:skin>

8. Jika sudah jangan lupa klik SIMPAN TEMPLATE dan tunggu hingga proses selesai. 

Cara Memberi Background pada Komentar Admin Blogger.com

9. Sekarang anda sudah bisa melihat hasilnya dengan mengklik Lihat Blog. 

Cara Memberi Background pada Komentar Admin Blogger.com

9. Sebagai contoh hasilnya akan terlihat seperti di bawah ini: 

Cara Memberi Background pada Komentar Admin Blogger.com

Selamat mencoba dan semoga berhasil!


Sumber: Blogernas - Universitas Dunia Maya

Baca selengkapnya..

CARA MEMBUAT DAFTAR TULISAN YANG BERHUBUNGAN DENGAN POSTING



Pernahkah anda mampir kelamaan pada suatu blog? Padahal tujuan semula hanya untuk mencari satu informasi. Begitu tulisannya ditemukan dan membacanya sampai ke bawah, anda melihat sederetan judul tulisan lain yang menarik, sampai anda bingung memilih mana yang mau dibaca duluan. Nah, itulah yang disebut dengan related post. Kita bisa artikan dengan tulisan yang berhubungan, posting terkait, artikel lain yang berhubungan, dan seterusnya. Contohnya terlihat seperti ini:



Nah, untuk membuat daftar tulisan seperti itu kita tidak perlu melakukan secara manual satu persatu pada setiap posting. Cukup dengan satu kali pengaturan, maka setiaptulisan yang berhubungan akan muncul secara otomatis di bawah setiap posting. Dengan catatan sebelumnya anda sudah memasang widget label/kategori. Jika belum pasanglah widget tesebut terlebih dulu. Jika belum tau caranya bisa anda lihat di sini. Jika labelnya sudah dipasang anda bisa lanjut ke langkah berikut:

1. Masuklah ke halaman Dasbor blog anda lalu klik Rancangan.




2. Kemudian klik pada Edit HTML.


3. Untuk berjaga-jaga jika terjadi kesalahan sebaiknya backup dulu template anda dengan mengklik Download Template Lengkap.



4. Kemudian carilah kode:

5. Agar lebih mudah mencarinya tekan (Ctrl + F) pada keyboard lalu tekan Enter. Maka akan muncul kotak Find. Ketiklah kode yang akan dicari pada kotak tersebut lalu tekan Enter, maka secara otomatis akan muncul kode yang dicari dalam keadaan terseleksi dengan warna hijau.



6. Kemudian copy semua kode di bawah ini dan pastekan tepat di bawahnya. Untuk tulisan berwarna biru bisa anda ganti sesuai keinginan anda.

<b:if cond='data:blog.pageType == "item"'>
<div class='similiar'>
<!-- *****************http://hoctro.blogspot.com*****Jan,2007****************** -->
<!-- *****************Related Articles by Labels - Take Two****************** -->
<!--
Modified by JackBook.Com to make it easier to use.
1. Now, users don't need to change anything to use this widget. just copy and paste, and done!
2. The current article will also be listed, now it's no more.
-->
<div class='widget-content'>
<h3>Artikel Yang Berhubungan</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>


7. Setelah itu klik SIMPAN TEMPLATE dan tunggu proses berlangsung.



8. Sekarang anda sudah bisa melihat hasilnya dengan mengklik Lihat Blog.



Sumber: Blogernas - Universitas Dunia Maya







Baca selengkapnya..

CARA MEMBUAT READ MORE/BACA KELANJUTANNYA PADA POSTING BLOG


Secara default Blogger akan menampilkan tulisan kita secara utuh. Bayangkan jika tulisan kita sudah banyak. Semuanya akan tampil secara utuh memenuhi halaman posting. Pembaca terpaksa harus terus menggulung layer sampai ke bawah untuk melihat tulisan satu persatu. Untuk mengatasinya bisa dilakukan dengan membuat ReadMore (Baca selengkapnya), sehingga setiap tulisan hanya ditampilkan sebagian saja (misalnya satu paragraf) sebagai cuplikan. Untuk melihat tulisan utuhnya pembaca tinggal mengklik link Baca selengkapnya…. Nah, cara membuatnya adalah:


TAHAP I

1. Masuklah ke halaman Dasbor blog anda lalu klik Rancangan.



2. Kemudian klik pada Edit HTML.



3. Centang kotak kombo Expand Template Widget



4. Kemudian cari kode seperti ini: </head>. Agar mudah mencarinya tekan (Ctrl + F) pada keyboard. Maka akan muncul kotak pencarian (Find) seperti ini:



5. Setelah ketemu kode tersebut, tepat di atasnya ketikkan kode berikut:

<style>
<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>


6. Maka hasilnya akan seperti ini:



7. Kemudian lanjutkan mencari kode: <data:post.body/> (cari lagi dengan kotak pencarian/find).



8. Kemudian ketikkan kode ini di bawahnya:

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'> Baca selengkapnya..</a>
</b:if>


9. Hasilnya akan menjadi seperti ini dan klik SIMPAN TEMPLATE




TAHAP II
10. Itu baru satu tahap. Sekarang tinggal setahap lagi, yaitu memotong tulisan yang akan kita selipkan kode untuk Read More-nya. Sekarang bukalah halaman posting, lalu klik Edit Entri.



11. Klik Edit pada tulisan yang akan diselipkan Read More-nya (nanti semuanya bisa anda lakukan secara bergantian).



12. Sebelumnya meyisipkan kodenya pastikan anda sudah mengklik menu Edit HTML.



13. Sekarang ketikkan kode: <span class="fullpost"> pada bagian tulisan yang ingin dipotong.



14. Terakhir ketikkan kode: </span> di akhir tulisan (paling bawah) dan Klik TERBITKAN ENTRI.



15. Jika proses yang dilakukan tidak keliru, seperti biasa akan muncul tulisan Perubahan Anda telah Disimpan. Jika tidak, coba anda ulangi lagi dengan teliti. Ini hanya repot di awalnya. Untuk tulisan yang lain (berikutnya) anda tidak perlu lagi masuk ke halaman edit HTML Tata Letak. Cukup menyisipkan kode pendeknya pada halaman Edit Entri.

Selamat mencoba dan semoga berhasil!


Baca selengkapnya..

MEMODIFIKASI JUDUL SIDEBAR DENGAN EFEK TOMBOL


Masih ingin mempercantik judul sidebar blog anda? Pada hal mungkin sebelumnya anda sudah memberi warna background pada judul sidebar tersebut, tapi tetap saja anda merasa belum puas (itu mungkin karena cita rasa seni anda sangat tinggi). Sebab efek background datar memang masih terkesan biasa. Contohnya seperti gambar di bawah ini (lihat pada tulisan Tips dan Trik)



Nah, apakah judul sidebar tersebut masih bisa lebih dipercantik? Jawabannya adalah bisa! Misalnya dengan menyulap judul sidebar tersebut menjadi seperti tombol. Caranya pun cukup mudah. Jika anda tertarik anda bisa lakukan beberapa langkah berikut:

1. Masuklah ke halaman Dasbor blog anda lalu klik Rancangan.







2. Kemudian klik pada

 Edit HTML.


Cara Menjadikan Judul Sidebar Seperti Tombol

3. Untuk berjaga-jaga jika terjadi kesalahan sebaiknya backup dulu template anda dengan mengklik Download Template Lengkap.


Cara Memberi Warna Background pada Judul Sidebar
4.  Kemudian carilah kode:     h2 {

5. Agar lebih mudah mencarinya tekan (Ctrl + F) pada keyboard lalu tekan Enter. Maka akan muncul kotak Find. Ketiklah kode yang akan dicari pada kotak tersebut lalu tekanEnter, maka secara otomatis akan muncul kode yang dicari dalam keadaan terseleksi dengan warna hijau. 


Cara Memberi Warna Background pada Judul Sidebar

6. Selanjutnya perhatikanlah beberapa baris kode di bawahnya. Lebih kurang akan tampak seperti di bawah ini. 


h2 {
background:#A9D0F5;
font-family:verdana; 
font-weight:bold;
font-size:14px;
letter-spacing:-0.2px;
margin:0px;
padding:4px 15px 3px;
text-transform:none;
}

(Anda tidak perlu bingung jika semua kode di atas tidak persis sama dengan kode yang terlihat pada blog anda, karena itu tergantung pada template yang kita gunakan)

7. Sekarang gantilah semua kode tersebut dengan kode di bawah ini (agar lebih mudah copy saja, lalu paste (timpal) di atasnya):

h2 {
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZ5QVH734j8C6jsQzdhzaWMs2rRsNRNvZ0prHLjpckQlUjHovTpk5YBBL7BuTCkbF3Rtz6N67jp3vivvPwWUodqql-NN_ernjFAn1RfqI1KikRDW6t4Ti21MGfBjv4AyUo9AXXb-I6wzEE/s1600/navscreen.png") repeat-x scroll left bottom #d7e8ff; 
font-family:verdana; 
font-weight:normal;
font-size:13px;
letter-spacing:-0.2px;
margin:0px;
padding:4px 15px 3px;
text-transform:none;
border-bottom: 2px solid #95a4b9;
border-right: 1px solid #7c8a9f;
border-top: 1px solid #ffffff;
}

(Catatan: yang berwarna merah adalah kode dari warna tombolnya dan warna biru adalah kode dari warna garis bayangannya. Anda bisa ganti semuanya sesuai warna blog anda. Jika kesulitan mencari kode warna anda bisa lihat pada Daftar Kode Warna) 

8. Jika sudah jangan lupa klik SIMPAN TEMPLATE dan tunggu hingga proses selesai. 

Cara Memberi Warna Background pada Judul Sidebar
9. Sekarang anda sudah bisa melihat hasilnya dengan mengklik Lihat Blog. 


Cara Memberi Warna Background pada Judul Sidebar
10. Sebagai contoh hasilnya akan tampak seperti ini (lihat background tulisan Tips dan Trik sudah seperti tombol):




Selamat mencoba dan semoga berhasil!


Sumber: Blogernas Univertas Dunia Maya


Baca selengkapnya..

DAFTAR KODE WARNA


Butuh kode warna untuk mempercantik blog anda? Sangat mudah. Langsung saja klik salah satu warna yang anda inginkan pada tabel warna di bawah ini. Kemudian lihat pada kotak kecil di bawahnya. Nah, itulah kode warnanya.










































































































































































































Kode warna yang terpilih : 

Bagaimana pendapat anda?

Sumber: Forantum




Baca selengkapnya..

CARA MENGGANTI ICON BLOGSPOT




Jika kita membuat blog dengan blogspot, maka disebelah kiri address bar akan tampak icon bawaannya, seperti terlihat pada gambar di sebelah kiri. Inilah yang disebut dengan favicon (favorit icon). Sebagian Blogger kadang merasa risih dengan icon bawaan ini. Risih karena kentara sekali bahwa blognya dibuat dengan layanan blogspot, layanan gratis yang menimbulkan kesan pasaran. Sehingga muncul pertanyaan: bisakah icon blogspot ini diganti dengan icon kreasi sendiri?

Pertanyaan tersebut juga sempat mengusik saya. Tapi akhirnya juga terjawab, ternyataicon tersebut bisa diganti. Ada tiga tahap yang harus dilakukan untuk menggantinya:

  1. Membuat gambar iconnya dengan program grafis.
  2. Mengupload gambar icon tersebut ke file hosting.
  3. Memasangnya pada blogspot.

Ketiga tahap tersebut harus dilakukan secara berurutan. Karena itu mulailah dari yang pertama lalu yang kedua. Jika sudah baru bisa dilanjutkan ke langkah-langkah berikut:

1. Masuklah ke halaman Dasbor blog anda lalu klik Rancangan.



2. Kemudian klik pada Edit HTML.


3. Untuk berjaga-jaga jika terjadi kesalahan sebaiknya backup dulu template anda dengan mengklik Download Template Lengkap.



4. Kemudian carilah kode: </head>

5. Agar lebih mudah mencarinya tekan (Ctrl + F) pada keyboard lalu tekan Enter. Maka akan muncul kotak Find. Ketiklah kode yang akan dicari pada kotak tersebut lalu tekanEnter, maka secara otomatis akan muncul kode yang dicari dalam keadaan terseleksi dengan warna hijau.



6. Tepat di atasnya masukan kode di bawah ini. Dengan catatan: gantilah tulisan berwarna biru dengan alamat penyimpanan file icon anda. Setelah selesai klik SIMPAN TEMPLATE.

<link rel="shortcut icon"
href="http://lh3.ggpht.com/_I141SpJQcB8/S_47UxnxeCI/AAAAAAAACVI/Cu-xr2HPoj0/s128/b.png"/>

7. Tunggulah hingga proses berlangsung. Kemudian lihatlah hasilnya. Sebagai contohicon traktor lubis saat posting ini dipublish adalah seperti ini.

Sumber: http://www.blogernas.co.cc - Universitas Dunia Maya




Baca selengkapnya..
powered by Blogger | WordPress by Newwpthemes | Converted by BloggerTheme