Cara Ngeblog

Tampilkan postingan dengan label tips mempercantik blog. Tampilkan semua postingan

Cara Membuat Related Post dengan Gambar / Thumbnail

Cara Membuat Related Post dengan Gambar / Thumbnail buat yang pengen menambahkan related post atau posting yang berhubungan dengan gambar silahkan mengikuti cara cara berikut ini

Langkah pertama yaitu login ke blog anda > Design > Edit HTML > Centang expand widget templates.
Cari kode </head> dan kalau sudah ketemu silahkan paste kode di bawah ini tepat di atas kode </head>

<b:if cond='data:blog.pageType == "item"'>
<style type="text/css">
#related-posts {
float:center;
text-transform:none;
height:100%;
min-height:100%;
padding-top:5px;
padding-left:5px;
}
#related-posts h2{
font-size: 1.6em;
font-weight: bold;
color: black;
font-family: Georgia, “Times New Roman”, Times, serif;
margin-bottom: 0.75em;
margin-top: 0em;
padding-top: 0em;
}
#related-posts a{
color:black;
}
#related-posts a:hover{
color:black;
}
#related-posts a:hover {
background-color:#d4eaf2;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCBOAdW_vogErKwGSkSCWc1BdIqVqooy5dCNoxXqacNYrW816KnMigrw0yNWxh_LDmSGN51Djc2FG8NtgDEunDVLykvfBRScuYaKL9NN6YDUVsAFkBmOUmpLjOn_UjVj26BiWRC2le9l8/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Artikel Terkait Yang Mungkin Anda Cari";
</script>
<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>
</b:if>

Sekarang anda cari kode ini

<div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line post-footer-line-1'>

Nah kalau sudah ketemu, sekarang paste kode berikut di di bawah kode tadi

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div><div style='clear:both'/>
</b:if>

Berikut ini adalah kode yang bisa anda ganti sebelum menyimpan template (ganti tulisan yang berwarna merah)
jumlah artikel terkait muncul

var maxresults=5;

Jumlah artikel terkait / label

max-results=6

Judul artikel terkait

var relatedpoststitle="Artikel Terkait Yang Mungkin Anda Cari";

Warna tulisan pada artikel yang terkait, silahkan anda ganti sesuai keinginan anda. Cari kode warna

var splittercolor="#d4eaf2";

Nah kalau sudah selesai anda bisa klik save template dan selesai :).
Artikel Terkait dengan Gambar / Thumbnail ini hanya muncul pada halaman posting, jika anda ingin Artikel Terkait dengan Gambar / Thumbnail ini muncul di semua halaman blog, anda bisa menghapus kode

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

Cara Membuat Tombol Share Facebook, Twitter dan Google +

Cara Membuat Tombol Share Facebook, Twitter dan Google + buat yang ingin menambahkan tombol share di social media di blognya silahkan mengikuti langkah langkah berikut ini, penempatan tombol share facebook twitter g+ dan lainya ini adalah tepat di bawah judul posting

Cara Menambahkan tombol Share di blog

Pertama silahkan login blog anda
Klik menu Design > Edit HTML > centang expand widget templates
Cari kode <div class='post-body entry-content'> atau class='post-body entry-content' dan biasanya ada 2 kode tersebut, pakailah kode yang pertama
Jika sudah ketemu, copy kode dibawah ini dan paste tepat diatas kode <div class='post-body entry-content'>

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

Untuk blog yang sudah menggunakan read more biasanya bukan menggunakan kode <div class='post-body entry-content'> melainkan kode di bawah ini
<div class='post-body entry-content' expr:id='"post-body-" + data:post.id'>

Menampilkan YM ( Yahoo Messenger) di Blog

Menampilkan YM ( Yahoo Messenger) di Blog, Ini biasanya di gunakan untuk blog yang di gunakan untuk bisnis dan menambahkan YM di blogger ini memudahkan pembaca atau penggunjung untuk menghubungi si pengelola atau admin blog,

Untuk menambahkan Ym Yahoo Messenger di blog caranya sangat mudah sekali, silahkan mengikuti langkah berikut ini

Masuke akun Blogger.com anda
Pilih tab Rancangan Kemudian tambahkan gadget, dan skrol ke bawah pilih kotak HTML/JavaScript
Masukan kode berikut ini

<a href="ymsgr:sendIM?paijo"> <img src="http://opi.yahoo.com/online?u=paijo&amp;m=g&amp;t=2&amp;l=us"/>
</a>

Ganti text yang warna merah (paijo) dengan id YM kamu.angka "2" berfungsi sebagai pilihan tampilan ym yang akan kita gunakan di blog, dan bisa kamu ganti dengan angka yang lain dan hasilnya gambar yang ditampilkan akan berbeda-beda

kalo angka 2 hasil gambarnya akan seperti berikut ini

Bagaimana mudah bukan, dan semoga bermanfaat,

Menambahkan page View counter di postingan merupakan trik yang sudah lama digunakan untuk para blogger untuk melihat berapa orangkah yang telah melihat postingan kita, biasanya page view counter ini menghiasai bagian bawah postingan kita,
cara menambahkan page view counter ini bisa teman-teman lakukan seperti dibawah ini, tapi sebelumnya teman-teman bisa melihat contoh page view counter yang biasanya ada pada postingan bagian bawah seperti gambah dibawah ini

cara menambahkan page view counter adalah seperti berikut ini, masuk ke akun blogger anda, Dashboard -> Layout -> Edit HTML trus cari code seperti ini <p><data:post.body/></p>

kemudain copy paste code dibawah ini tepat diatas code <p><data:post.body/></p> tadi

<b:if cond='data:blog.pageType == "item"'>
<div id='hit-counter'>
<a href='http://cara-ngeblog.blogspot.com' rel='follow'>
<script src='http://www.amitjain.co.in/pageview.php' type='text/javascript'/> </a>
</div></b:if>

bagaimana tidak begitu sulit to untuk pasang page view counter ini

Cara Menapilkan Autozoom Gambar di postingan, ini untuk menambah tips dan tutorial blogger bagi pemula kita, dimana auto zoom, atau zoom otomatis untuk image atau gambar yang ada dipostingan kita ini sangat menarik sekali, karena apa ? karena kita bisa upload gambar kecil di postingan kita, akan tetapi setelah mouse kita mendekat pada gambar tesebut, gambar otomatis akan membersar,
dan ada banyak sekali cara untuk melakukanya, bermacam script dan CSS tambahan lainnya, dan salah satunya adalah dengan menambahkan fasilitas "Auto Zoom Image".Berbeda dengan image zoom lainnya (seperti fancy zoom yang atutorialnya da pada blognya kang rohman) yang menggunakan code java script, karena "Auto ZOom hanya perlu meambahkan kode CSS dan menambahatau merubah kode HTML-nya gambar atau image.

Sebelum kita membahas lebih lanjut, lihat demo di bawah ini >>>arahkan kursor di atas image<<<<

Anak ku
untuk membuatnya ikuti langkah-langkah berikut ini, kita masuk ke akun blogger kita kemudaian seperti biasa masuk ke layout dan edit html, dan untuk berjaga-jaga download terlebihdahulu templates kita untuk menghindarai kesalahan dalam melakukan proses pengeditan

cari code berikut ini ]]></b:skin> kemudian paste Kode dibawah ini tepat diatasnya ]]></b:skin>

# /*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
/*URL: http://www.cara-ngeblog.blogspot.com/ */

.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color:#8cc545;
padding: 5px;
left: -1000px;
border: 2px solid #ffffff;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: -50px; /*position where enlarged image should offset horizontally */

}

Kemudian di save,

Langkah selanjutnya, Langkah selanjutnya adalah cara posting gambar dalam postingan. Kita tetap upload gambar seperti biasa kita upload gambar waktu posting. Dan kode HTML standard blogspot adalah seperti di bawah ini :

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL19oREwAVdG8Q0CgRks9wK6PsN9aaaEdNdoiYYDdEbm_y41MocZfyvBH06lsC0U9Nrz_1hVPUtRv5XgYwcf7n7oRyk8igrhnrZSY1UDSq67NGlhGOh6LfNjXvuigY-sUUwjZGGKx3bKJc/s1600-h/DSC00676.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 240px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhL19oREwAVdG8Q0CgRks9wK6PsN9aaaEdNdoiYYDdEbm_y41MocZfyvBH06lsC0U9Nrz_1hVPUtRv5XgYwcf7n7oRyk8igrhnrZSY1UDSq67NGlhGOh6LfNjXvuigY-sUUwjZGGKx3bKJc/s320/DSC00676.JPG" border="0" alt=""id="BLOGGER_PHOTO_ID_5363320321110466786" /></a>

• Kopi Paste kode di atas ke dalam notepad. Perhatikan kode warna MERAH (URL gambar1) dan Warna Biru (Url Gambar2) karena kode tesebut yang nantinya akan kota kopi paste ke dalam kode di bawah ini.

• Selanjutnya ganti kode diatas dengan kode di bawah ini:

<a class="thumbnail" href="url gambar1"><img src="url gambar2"
border="0" height="70" width="100" /><span><img src="url gambar2" />keterangan gambar</span></a>

• Selanjutnya Kopi dan Paste kode Url gambar anda pada "url gambar1" dan "url gambar2"

• Keterangan Gambar adalah keterangan gambar anda

• pada kode height="70" width="100" adalah ntuk mengatur ukuran thumbnail.

selamat mencoba semoga berhasil ya

Menampilkan recent post dengan Thumbnail di blogspot, ini merupakan lanjutan dari cara menampilakan recentpost dengan feed maupun yang biasa, dimana di dalam recent post dengan gambar ini sekarang lagi ngetrend sekali, karena kebanyakan kita menginginkan postingan terakhir kita tampil di sisi side bar dengan dilengkapi gambar kecil atau thumbnail, serta dilengkapi tanggap posting dan sedikit rangkuman postingna kita serta ada jumlah comment dalam postingan kita,

ada beberapa cara untuk menampilkan postingan terakhir dengan gambar, atau bahasa agak kerenya Menampilkan recent post dengan Thumbnail di blogspot, wigit berikut ini dihasilkan oleh blogger trick, dan caranya seperti dibawah ini
berikut ini saya ambil contoh dari blog Free download software berikut ini :

cara membuatnya cukup sederhana kita tinggal copy paste aja script dibawah ini, kemudian langsung paste aja dalam gadget HTML/javascript (Tuju tab Layout - Page Elements - Add a Gadget - pilih HTML/javascript)

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[1] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[2] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[3] = "http://i43.tinypic.com/orpg0m.jpg";
imgr[4] = "http://i43.tinypic.com/orpg0m.jpg";

showRandomImg = true;
boxwidth = 298;
cellspacing = 8;
borderColor = "#ffffff";
bgTD = "#000000";
thumbwidth = 40;
thumbheight = 40;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "comments";
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "#666";
icon2 = " ";
numposts = 5;
home_page = "http://Namablogkita.blogspot.com/";
</script>
<script src="http://myblogtalk.com/bloggertemplates/js/recentposts_thumbnail.js" type="text/javascript"></script>

dan berikut ini item-item yang perlu diadakan perubahan
boxwidth - Ukuran Lebar Widget
cellspacing - Spasi diantara cells
borderColor - Warna Border
thumbwidth & thumbheight - Ukuran lebar dan tinggi gambar Thumbnails
fntsize - Ukuran Font pada title
acolor - Warna title
aBold - Tebal huruf pada title? (true or false)
numposts - Jumlah recent post yang ditampilkan?
home_page : http://NamaBlogkita.blogspot.com/ (Ubah sesuai URL blog masing2)
trus simpan, nah ini ada cara yang ke 2 untuk mnampilakan recentpost dengan gambar kecil, dan caranya bisa teman-temen ambil dari link berikut ini, dan usahakan menggunakan cara yang ke 2 karena lebih mudah cara pengerjaanya

Auto readmore terbaru ini sangat berbeda sekali dengan cara memasang readmore di postingan yang dahulu, dimana untuk mendapatkan readmore kita harus secara manual memasukanya kedalam postingan dan hal ini kadang kala menyulitkan kita dalam mempostingnya,
Akan tetapi untuk auto readmore terbaru ini, sepertinya lebih canggih lagi, karena fungsi pemenggalan kalimat langsung bekerja secara otomatis, tanpa harus install code secara manal dan menempatkan postingan secara terpisah, atau dipisahkan dengan script tertentu,
Untuk menambah wawasan kita dalam cara belajar blog, kita mulai saja belajar blog bersama kali ini dengan topic cara memasang auto readmore, tapi sebelumya untuk yang sudah memasang readmore yang versi lama hendaklah dikembalikan seperti awalnya dulu, caranya hapus code yang saya kasih warna merah dibawah ini, tapi ingat download templates terlebih dahulu buat jaga2,

<script type='text/javascript'>
var thumbnail_mode = "float" ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 120;
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;
}
//]]>

Jangan lupa untuk menyimpan editan tadi, setelah itu centang "Expand widget template" dan cari code berikut ini <data:post.body/> setelah ketemu ganti code tersebut dengan script dibawah ini

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:left'><a expr:href='data:post.url'>READ MORE - <data:post.title/></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Dan kembali save hasil editan tadi, dan sekedar informasi fungsi Read More ini mampu menampilkan image pertama dalam postingan dan mem-fload image tersebut di awal paragraf awal, meskipun gambar yang kita letakan berada di tengah atau akhir postingan. Mungki lebih nyaman saya sebut saja dengan fasilitas image thumbnail.
Tidak hanya itu saja, kita dapat juga pengatur jumlah karakter yang ditampilkan. Disini ada 2 pilihan untuk jumlah karakter. Yang pertama, jumlah karakter yang ditampilkan jika ada image yang diikutsertakan dalam postingan dan yang kedua jumlah karakter tanpa image
Semoga tips diatas bisa bermanfaat bagi kita untuk menemukan cara belajar blog yang baik dan benar, dan marilah kita sama-sama terus mengembagkan dan menemukan trik dan cara belajar blog yang baru.

Cara membuat text berjalan di bar menu, ini saya ambil karena banyaknya teman-teman yang menayakan bagaimana cara membuat text berjalan tetapi bukan didalam blog melainkan di Bar menu, mungkin tulisan ini sedikit mereview aja tentang tulisan para master yang telah meberikan tutorialnya tentang cara yang satu ini
Seperti bisanya sebelum memulai belajar blog bersama, atau belajar kelompok ini, kita harus menyiapkan bahan-bahanya dulu, user name dan password, untuk mebuka akun blogger kita, wekekeke formil banget ya?
Berikutnya kita cari code seperti ini </body> kode ini letaknya berada paling bawah sebelum kode </html>
Dan simpan code ini dibawah code </body>

<script language='javascript'>
message = "Tulis text pertama yang ingin muncul disini ^" +
"Tulis text kedua disini ^" +
"Tulis text ketiga disini ^" +
"Tulis text keempat disini ^"

scrollSpeed = 130
lineDelay = 0

// Do not change the text below //

txt = ""

function scrollText(pos) {
if (message.charAt(pos) != '^') {
txt = txt + message.charAt(pos)
status = txt
pauze = scrollSpeed
}
else {
pauze = lineDelay
txt = ""
if (pos == message.length-1) pos = -1
}
pos++
setTimeout("scrollText('"+pos+"')",pauze)
}
scrollText(0)
</script>

Ganti text pertama, text ke dua dan seterusnya dengan text yang teman –teman inginkan, dan kemudian save. Semoga tips berikut ini dapat memuaskan teman-teman seklian dan ini merupakan upaya kita dalam memahami cara belajar blog yang baik dan benar, walupun saya sendiri belum bisa melakukanya akan tetapi tidak ada salahnya kita coba untuk mempelajarinya dan belajar blog bersama.

cara membuat menu menurun / drop down ini hanya ingin melengkapi pengetahuan kita dalam tips mempercantik blog dan juga menambah ilmu kita dalam cara belajar blog untuk pemula, agar blog kita bisa cantik enak dilihat dan yang pastinya orang betah berlama-lama di blog kita, serta akan kembali lagi dilain waktu.
Cara membuat menu menurun itu apaan sih? Yuk kita ingatkan kembali menu menurun atau drop down itu yang seperti ini lho

Untuk teman-teman yang pengen diblognya ada tampilan seprti itu mari kita mulai belajar blognya, bersama-sama script untuk membuat menu itu seperti di bawah ini

<select onChange="document.location.href=this.options[this.selectedIndex].value;">
<option value="0" selected>Arsip Blog</option>
<option value="Links 1">judul 1</option>
<option value="Links 2">judul 2</option>
</select>

Untuk penempatanya seperti menempatkan widget dan untuk letaknya sesuai dagan keinginan teman-teman, dan kalo mau menamahi jumlah menu ke bawahnya tinggal menabahkan code seperti ini sebelum </select>

<option value="Links 3">Judul 3</option>

Text yang berwarna merah adalah link. ganti link1 tersebut dengan link yang dituju teman-teman
Text yang berwarna biru adalah Judul yang ditampilkan. Itu juga harus km ganti. Setelah diganti dan sudah ditempatkan sesuai dengan keinginan teman-teman tinggal kita save aja. Dan semoga tips ini bisa menambah pengetahuan kita tentang cara belajar blog.

Cara membuat tag could ini merupakan trik yang paling aku inginkan sejak lama, nah setelah Tanya-tanya sama teman, akhirnya ketemu juga caranya,yang ternyata tidak begitu sulit, hanya membutuhkan ketelitian saja, dan aku yakin teman-temen semua bisa melakukanya,
Tidak udah banyak basa-basi, belajar kelompoknya kita mulai saja, untuk mebuat tag could ini langkah pertama yang kita perlukan adalah pawang hujan, hee kan mau bikin kaya awan, ga ding becada, pertama masuk ke akun blogger kita, masuk tataletak dan edit html, jangan lupa centang Expand Template Widget dan untuk lebih amanya download templatenya terlebih dahulu,
Langkah selanjutanya cari code seperti dibawah ini

<b:widget id='Label1' locked='false' title='Labels' type='Label'/>

Jika tidak ketemu teman-teman tinggal mengurangi code tersebut sedikit demi sedikit agar code yang kita cari akan terlihat atau akan ketemu, setekah itu ganti code tersebut dengan code dibawah ini

<b:widget id='Label1' locked='false' title='Labels' type='Label'>
<b:includable id='main'>

<div class='widget-content'>
<div id='LabelDisplay'>
</div>
</div>

<script language='javascript' type='text/javascript'>
function zoomStyle() {
var max = 0;
var min = 10000;
<b:loop values='data:labels' var='label'>
if (<data:label.count/> > max)
max = <data:label.count/>;
if (<data:label.count/> < min)
min = <data:label.count/>;
</b:loop>
var display = "";
<b:loop values='data:labels' var='label'>
var delta = <data:label.count/> - min;
var size = 80 + (delta * 100) / (max - min);
display = display + "<span style='font-size:" + size + "%'><a expr:href='data:label.url + "?max-results=100"' style='text-decoration:none;'><data:label.name/></a></span> ";
</b:loop>

obj = document.getElementById('LabelDisplay');
obj.innerHTML = display;
}

zoomStyle();
</script>

<b:include name='quickedit'/>
</b:includable>
</b:widget>

Teman-teman harap teliti jangan melebihi code </b:section> saat melakukan paste, setelah itu silahkan klik preview dan untuk peletakanya sama seperti meletakan menambahkan widget biasa, dan setelah sesuai dengan keinginan tinggal kita save dan model category awan atau tag could akan bisa kita miliki.

Cara membuat link di blog untuk para master adalah bukan salah satu hal yang susah, karena hal ini hanya kebiasaan saja, nah karena ujian nasional sudah semakin dekat maka tidak ada salahnya belajar ngeblog kelompok ini kita lanjutakan, untuk mengingat pelajaran-pelajaran yang dulu ya, lho apa hubungan ya dengan ngeblog, nah justru itu kalau ilmu ga sering dipraktekin kita juga akan lupa tentang ilmu tersebut
Siapkan alat-alatnya yan, udah siap semua karena belajar kelompaoknya akan segera dimulai, kita masuk ke pengertian link dulu aja ya. Link itu apa sih makanan atau bukan ya hee, link itu sebuah text atau gambar yang menjadi perwakilan sebuah URL / Halaman Web. Apabila kita klik text atau gambar tersebut, maka kita akan dibawa ke sebuah URL / Halaman web yang menjadi tautan text tersebut .
Trus apa fungsinya : link ini untuk mempermudah kita dalam mencari url yang telah kita pilih sebagai tujuan blog atau web apa yang kita maksudkan atau kita tuju
contoh Sugeng Blog
jika pengen seperti itu, dan Jika temen-teman pengen linknya tapil dalam postingan caranya, kita itnggal klik gambar sepertai rantai dekat dengan saat kita mau upload gambar, trus tinggal kita isi dengan web atau blog yang mau kita link.
Ada lagi cara manualnya dengan cara saat posting kita klik edit html dan masukan script dibawah ini

<a href="http://cara-ngeblog.blogspot.com" target="_blank" alt="cara ngeblog">Cara Ngeblog</a>

kode HTML diatas merupakan link.yang ditujukan ke blog saya http://cara-ngeblog.blogspot.com. dan kata yang menjadi wakil / tautan ke blog tersebut adalah Cara Ngeblog
• target="_blank" --> Membuka link di sebuah jendela baru...
• alt="TEXT" --> Memberikan keterangan (sesuai text), apabila mouse diarahkan ke link
gimana sudah ingat kembali kan, mungkin tulisan ini juga untuk meberikan catatan kepada saya jika kelak suatu saat lupa cara buatnya semoga bermanfaat dan semoga belajar kelompok hari ini bisa kita mengerti bersama-sama.

Text area, biasa kita jumpai di blog yang menawarkan tukeran link, dan kita tinggal mengkopi paste kode yang ada di dalam text area tersebut trus ditempelin di blog kita,
Banyak dari kita yang bisa membuat itu tapi juga harus menghaflkan script nya, dan untuk mempermudahnya biar ga harus hafalin terus maka ini saya bantu untuk menyediakan script untuk membuat text area, atau kolom yang biasanya berisi text, ataupun script html, didalam nya
Atau seperti dibawah ini

Maka langkahnya teman-temen tinggal copas code di bawah ini:

<textarea rows="4" cols="20" name="code"> Tempat text</textarea>

Dan untuk mengeditnya teman-temen bisa mengganti rows="4" --> Panjang area (Bisa diganti sesuai kebutuhan) dan cols="20" --> lebar area (Bisa diganti sesuai kebutuhan)
nah bagaiman mudah to, sebenarnya yang susah tuh hafalin script nya heee, sampai jumpa dipertemuan yang akan datang

Cara membuat search engine di blog emang ga begitu penting, tapi hal ini akan memudahkan kita dalam pencarian artikel atau mencarai gambar dan sebagainya, dan Dalam dunia blogging kita tidak akan bisa lepas dari search engine, atau bahasa inggris nya mesin pencari, karena apa? Karena kita sebagai blogger sangat mengandalakan mesin ini untuk menjaring penggunjung dalam blog kita
Nah untuk teman-temen yang penngen membuat mesin pencari dalam blognya carabya cukup gampang, mari kita belajar bersama ya cara buat search engine di blog ini, seperti biasa kita siapkan alat dan bahanya
1. Satu aku sayang ibu ya, heee, ga ding ikuti langkah ini ya : Buka account blooger kita, kemuadian masuk layout trus page element >
2. Cari tempat yang mau ditempelin kemuadian copy paste script di bawah ini

<form action="http://namablogmu.blogspot.com/search"
method="get"> <input class="textinput" name="q" size="35" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

ganti namablogmu dengan nama sebenrnya, dan angka 35 menandakan jumlah huruf yang akan dicari,

3. Nah tinggal di save aja, trus penempatanya sesuai dengan kenginginan temen-temen

Sekian dulu belajar kelompoknya untuk membahas bagaimana cara ngeblog, semoga bermanfaat, bahanya kumpulan dari berbagai sumber dan berbagai pasar blog heee

Belajar keleompoknya kita mulai lagi, kali ini kita akan belajar bagaimana cara menghilangkan anjka dalam dalam, kita bisa melihat jumlah postingan kita di dalam label-label kusus yang telah kita buat, nah jika temen-temen ingin mengilangkanya caranya ga begitu sulit
Langkahnya seperti biasa kita login ke account kita kemudian masuk ke layout dan edit html trus jangan lupa untuk mencentang tanda EXPAND TEMPLATE WIDGET, nah kalo sudah cari deh code sperti ini:

<data:label.count/>

Kalo udah ketemu hapus kode tersebut, trus disimpan agar aman heee, tapi ingat sebelum kita mengedit kode html di templates kita biasakn untuk mendownload templtes kita terlebih dahulu agar apabila terjadi hal-hal yang tidak diginkan kita bisa upload kembali templates lama kita
Sekian dulu belajar keompoknya kalo ada pertanyaan natnti saja kita bertanya pada yang ahli nya edit templates heee, sekilan dan terimakasih

Trik ini sudah dibahas oleh para master-master tutorial blog, dan saya disini Cuma ingin sedikit mengulangi kembali agar belajar kelompok ini ada bahan untuk diperbincangkan dan di bahas. Komentar adalah wujud apresiasi kita pada seorang penulis blog, dan selain itu komentar juga tidak akan seru kalau tidak disertai dengan emotion, tau gambar yang menunjukan perasaan kita, dan pada belajar kelomok kita kali ini mari kita baca kembali bagai mana cara pasang emotion pada kotak komentar,
Ayo temen-temen buka kembali catatanya buka blogger nya trus edit html nya kemudian, kita cari kode berikut ini :

</body>

Setelah ketemu ganti dengan codenya menjadi seperti berikut ini

<script src='http://mizwar.blog.googlepages.com/senyum.js'
type='text/javascript'/>

</body>

Setelah itu save dan jagan lupa kasih tanda centang pada kotak expand template widget. Dan cari kode berikut ini :

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>

Dan letakan code berikut berikut ini dibawah code

<p class='comment-footer'>

;

<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
:)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
:D

<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
:p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
:((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
:)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
:(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>

:X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
=((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
:-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
:-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
:-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
:
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>

8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
:-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>

=))</b>

Trus di save, dan jika pengen memakai emotionya tinggal ketik kode emptionya, dan ada pertanyaan ga yang bisa kita diskusikan, nah sekian dulu belajar kelompoknya ya, besok kita belajar besama lagi yaa

Cara membuat readmore dilanjutkan judul posting

Sering banget ya kita lihat read more ( judul postingan ) seperti di blog saya yang satu ini, dan untuk anda yang sudah tau mungkin gampang membuatnya, tapi bagi yang belum ngerti ayo kita sama-sama belajar bagaimana sih cara membuat readmore dengan judul postingan itu.
Nah mari kita siapkan bahan-bahanya, kaya masakan aja ya, lgs aja deh, sebelumnya ini trik untuk blog yang udah ada readmorenya, kalo belum buat dulu neh kaya gini cara buat readmore, nah tinggal kita lanjutakan ritualnya seperti biasanya
Log in ke account blogger trus masuk layout, klik edit html dan centang bagian expand template widget, kalau dah ketemu maka cari kode berikut ini :

<a expr:href='data:post.url'>Read More .. </a>

Tapi jika read morenya temen-temen ganti dengan baca seterusnya maka tinggal ganti aja read more.. dengan baca seterusnya saat kita melakukan pencarian
Setelah ketemu yang tadi tuh, ganti kodennya jadi seperti ini:

<a expr:href='data:post.url'> Read More .. <data:post.title/></a>

Setelah selesai tinggal kita save dan jadi deh kreasi kita hari ini, dan tips ini hanya bertujuan membatu temen-temen yang masih pemula seperti saya juga yang masih bau kencur di dunia blog, dan semoga belajar kelompok kita kali ini bermanfaat ya,

Cara membuat artikel yang berhubungan di bawah posting

Cara ini merupakan salah trik agar postingan kita yang terdahulu dapat di baca orang lain selain dibuatkan kolom di samping blog kita,
Biasaya kita membaca postingan ada tulisan artikel yang berhubungan dibawahnya yang isinya tentang artikel yang masih berkaitan dengan artikel yang sedang kita posting
Nah berikut ini adalah caranya membuat artikel yang berhubungan atau biasa disebut related post kalo bahasa jawanya heee
Seperti biasa kita login dulu kemudian masuk layout trus edit html, jangan lupa centang Expand Template Widget, langkah selanjutnya cari kode berikut ini

<data:post.body/>

Kemudian copy script berikut ini
Setelah itu letakan code yang tadi di bawah nya seperti ini:

<data:post.body/>
Paste Disini

Setelah itu save dan jadi deh hee

Memasukan Yahoo Emotion Ke dalam posting

Nah tips kali ini mungkin bagi para master sudah tidak ansing lagi, caranya memasang yahoo emotion di postingan, untuk lebih menegaskan perasaan atau emosi yang ada dalam postingan tersebut, misalkan lagi marah , sebel maupun yang lainya,
Caranya sangat mudah temen-temen tinggal mengopy kod berikut ini dan meletakanya dalam postingan, tapi untuk lebih gampanganya klik edit html dalam melakuka posting,dan berikut ini kode html yang bisa kita kita pakai:

<img src="http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif" width=18 height=18 border=0>

untuk script lengkapnya silahkan kunjungi blog kang rohman berikut ini

Cara pasang total posting dan total komentar

Sebenarnya tools ini belum tak pasng di blogku, tapi keren juga sih kalo tau berapa total postingan dan total komentar yang sudah ada di blog kita,

Bagi sebagia orang yang sudah tau close aja blog ini dan mencari tutorial yang lebih up to date, heed an bagi yang belum tahu boleh menyimaknya

Caranya gampang temen-temen tinggal copas script dibawah ini sambil mengganti scrip yang berwarna merah dengan nama blog temen-temen
Script untuk total komentar

Script untuk total posting

La trus dimana letakinya? Hee seperti biasa bisa diletakan di tambah di penambahan elemen halaman, dan letaknya bisa teman-temen sesuaiakn dengan keinginan, selamat mencoba semoga berhasil

Cara mengganti background pada templates

Lama ga up date mungkin postingan ini udah banyak di bahas ama master-master tutorial blog lainya, tapi ga ada salahnya jika saya memberanikan diri untuk kembali mengulas tetang cara mengganti background templates, atau latar belakang tampilan templates kita

Yang kita perlukan hanyalah ,mengerti kode-kode warna yang ada bisa lihat pada postingan master tips dan trik blogging berikut ini mengenai kode warna

Setelah mengetahui kode warna gimana ya? Ga usah kawatir, sekarang coba kita masuk ke account blogger kita dan kemudian masuk ke pengaturan dan edit html,

Jangan lupa untuk menghindari hal-hal yng tidak diinginkan download templates lama kita jika ada sesuatu hal yang tidak kita inginkan terjadi, setelah itu, cari kode sperti di bawah ini

body {
background:#fff;
margin:0;
padding:40px 20px;
font:x-small Georgia,Serif;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;
}

dan apabila menginginkan pergantian warna maka ganti teks yang berwarna merah diatas dengan kode warna yang ada inginkan seperti yang ada di tempatnya mas kendhin yang tadi

setelah selesai kemudian pratinjau templates, jika sudah sesuai dengan keinginan kita tinggal kita save aja, jadi deh, gampang to? tapi ini khusus untuk templates yang minima, Moga-moga tips ini bermanfaat

Cara Ngeblog

Cara Membuat Related Post dengan Gambar / Thumbnail

Cara Membuat Tombol Share Facebook, Twitter dan Google +

Cara Menambahkan tombol Share di blog

Menampilkan YM ( Yahoo Messenger) di Blog

Menambahkan page view Counter di postingan

Menapilkan Autozoom Gambar di postingan

Menampilkan recent post dengan Thumbnail di blogspot

Cara Pasang Auto Read more Terbaru ( revisi )

Cara membuat text berjalan di bar menu untuk templates baru

Cara membuat menu menurun / drop down

Cara membuat tag could, atau label berbentuk awan

Cara membuat link di postingan atau blog

Cara membuat text area

Cara membuat search engine di blog

Menghilangkan angka dalam label

Pasang emotion di kotak komentar

Cara membuat readmore dilanjutkan judul posting

Cara membuat artikel yang berhubungan di bawah posting

Memasukan Yahoo Emotion Ke dalam posting

Cara pasang total posting dan total komentar

Cara mengganti background pada templates

Tags