Cara memasang efek Love berjatuhan di blog

Cara memasang efek love berjatuhan di blog

Selamat pagi !
khususnya para blogger wanita ingin
mempercantik tampilan blog anda
kali saya akan memposting cara
membuat blog anda semakin cantik
dengan memasang efek love yang
berjatuhan di blog jika anda tertarik
ikuti langkah-langkah berikut ini :

1.Login ke blogger
2.Tambah Gadget
3.Masuk Tatak letak/Rancangan
4.Pilih Html/Java script
5.Copy kode di bawah ini :

<script src='http://blogtrikdantips-blogspot.googlecode.com/files/love_berjatuhan.js'></script>

6.Save & Lihat hasilnya

Cara memasang flag country di Blog

Cara memasang flag country di blog

Cara memasang flag counter di blog yaitu untuk menampilkan jumlah
pengunjung blog dengan ciri khas menampilkan bendera negara setiap
pengunjung.
jika anda tertarik ikuti langkah-langkah berikut ini :

1.Kunjungi situs http://flagcounter.com
   Setelah itu akan tampil seperti gambar di bawah ini :

2. Seperti pada gambar, di situ anda bisa mengatur tampilan dari flag counter
    tersebut sesuka hati.
    Berikut beberapa menu editnya

   Top Countries : menampilkan jumlah pengunjung tiap negara dengan
   bendera negara asal pengunjung. seperti gambar di bawah ini:

    Flag Map : menamplkan pengunjung dalam bentuk map atau peta dunia
   seperti gambar di bawah ini

• Mini Counter : menampilan counter dalam bentuk mini berupa pagaview blog.
• Maximum Flag to Show : Jumlah bendera yang akan di tampilkan
• Column of Flags : Jumlah kolom untuk counter
• Label on Top of Counter : Nam dari counternya. bisa di ganti sesuai keinginan.
• Background Color : Warna latar belakang
• Text Color : warna teks
• Border color : Warna garis tepi
• Show Country Codes : Menampilkan kode setiap negara, misalnya amerika
• dengan kode US.
• Show Pageview Count : Menampilkan jumlah pageview atau jumlah penelusuran
• halaman di satu blog
• Show Number of Flags : Menampilkan seluruh jumlah bendera asal pengunjung

3. Setelah selesai ngeditnya, klik tulisan GET YOUR FLAG COUNTER kemudian
    anda akan melihat tampilan seperti gambar di bawah ini :

4. Klik Skip, ambil kodenya, kemudian pasang ke HTML/Javascript,
    kemudian pasang ke blogger anda

5.Cara pemasanganya :

•    Klik rancangan --> Elemen laman -->
•    Tambah gadget --> HTML/Javascript
•    Masukkan kode kedalam kotak yang di sediakan kemudian klik save

Cara Memasang Widget total Tayangan Laman

Widget total tayangan laman tampilan keren

Berikut ini cara menambahkan widget total tayangan laman dengan
tampilan yang menarik dan keren

1. Klik link disini
2. Pilih tampilan sesuai dengan kesukaan anda
   Contoh gambar

3. Lalu isi from yang tersedia

    Page Name             : Nama alamat
    Starting count        : Dimulai perhitungan 
    Number of digit        : Jumlah digit angkat yang ditampilkan
    Gambar contoh dibawah ini

4.Jika selesai lalu klik get your counter code
   setelah itu akan mucul tampilan sebagai berikut :

5.Lalu copy kode tersebut, dan selanjutnya login ke blogger anda lalu pilih
   Menu Tata letak -- Tambahkan gadget
   Pilih html/java script kemudian paste kode yg tadi didalam kolom html tersebut.

6.Kemudian save & lihat hasilnya ...

Cara Memasang auto readmore di posting blogger

Assalamualaikum.
Mungkin jika anda pernah mengunjungi homepage suatu blog,anda pernah  menemukan sebuah artikel terputus dan anda diharuskan untuk klik link readmore atau baca selengkapnya untuk dapat melihat artikel secara utuh.Tujuan dari pemasangan readmore (summary post) ini sendiri bertujuan untuk menghemat ruang halaman homepage blog sehingga tampilan homepage akan tampak rapi.
Bagi anda yang ingin sekali memasang auto readmore di posting blogger,pada kesempatan kali ini saya akan membagikan sebuah tutorial untuk membantu anda membuat auto readmore sederhana di blog yang anda miliki.

Berikut cara memasang auto readmore di posting blogger
1.Pertama-tama yang anda harus lakukan adalah masuk ke halaman dashboard blog anda di www.blogger.com dengan menggunakan akun blogger yang anda miliki.
2.Setelah masuk ke halaman dashboard,silahkan anda klik nama blog yang akan anda pasangi auto readmore pada area posting (apabila anda memiliki blog lebih dari 1).Contoh seperti gambar dibawah ini.

3.Di halaman berikutnya silahkan anda klik template,seperti contoh gambar dibawah ini.

4.Selanjutnya anda klik edit HTML,seperti contoh gambar dibawah ini.

5.Nanti anda akan bertemu dengan struktur kode-kode yang membentuk template blog anda.Silahkan anda cari kode </head> ,agar lebih mudah dalam pencarian kode anda bisa menggunakan CTRL+F (jika anda menggunakan komputer).
6.Jika sudah ketemu,silahkan anda masukkan kode berikut ini tepat di atasnya..

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 250;
summary_img = 250;
img_thumb_height = 50;
img_thumb_width = 50;
</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>

keterangan:

• summary_noimg = 250 (panjangnya teks pada post yang tidak memiliki gambar)
• summary_img = 250 (panjangnya teks pada post yang memiliki gambar)
• img_thumb_height = 50 (ukuran tinggi gambar/tumbnail pada postingan)
• img_thumb_width = 50 (ukuran lebar gambar/tumbnail pada postingan)

7.Jika sudah,selanjutnya anda cari kode <data:post.body/> ,silahkan anda hapus kode tersebut dan ganti dengan kode dibawah ini.

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/><b:else/> <b:if cond='data:blog.pageType != &quot;item&quot;'><style type='text/css'>.post-footer {display:none;}</style><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'><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></b:if>

catatan:

• jumlah kode <data:post.body/> pada suatu template biasanya berbeda-beda,apabila anda menggunakan template bawaan blogger maka anda akan menemukan 3 buah kode <data:post.body/> ,silahkan anda hapus kode <data:post.body/> yang kedua atau yang ketiga lalu gantikan dengan kode diatas.
• Teks yang saya beri warna merah adalah untuk menonaktifkan fungsi post footer baik dihalaman homepage maupun statis.Anda dapat menghapus kode tersebut jika anda ingin mengaktifkan fungsi post footer.

8.Agar tampilan kelihatan lebih menarik,anda dapat memasukkan css berikut ini diatas kode ]]></b:skin.

/* Read more----------------------------------------------- */
.rmlink a{font-family:cuprum; background-color:#45818e; color:#FFF; font-size:12px; padding:1px 3px 1px; text-transform:none}
.rmlink a:hover{background-color:#2E5760}

8.Jika sudah,silahkan anda klik simpan.

Terakhir,kunjungilah homepage blog anda dan lihatlah apabila auto readmore telah muncul maka anda telah berhasil memasang auto readmore di posting blog anda.
Bagaimana? cukup mudah bukan?
Wassalamualaikum.

Mengenal Pada Kode Elemen / Widget pada Layout Blogger

Mengenal Pada Kode Elemen / Widget pada Layout Blogger - Mengenal Elemen Halaman Untuk Layout template Blogger atau biar lebih dipahami adalah kode widget. Kode tag Elemen ini berada didalam tag <body> contohnya seperti sidebar, footer dll. Saat dihalaman editing Layout kita bisa menambahkan widget Label, Gambar, HTML dll.

Coba cari kode seperti dibawah ini :

<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
</b:section>

Berikut adalah yang di sering kita temui di tag <b:section> kode pengemas widget.

• id : Ini diperlukan untuk mengetahui posisi widget sebagai apa, misalnya 'header,' 'sidebar' bisa anda nama'i sesuka anda, ini juga merupakan selektor '#header' jadi anda bisa berkreasi di selektor '#header' dengan CSS.  
• class : Ini boleh ada boleh tidak, ini juga hampir sama pada 'id' memudahkan untuk mentrafer widget jika berganti template, 'navbar,' 'header,' 'main,' 'sidebar,' dan 'footer.' dll. Bisa juga dinama'i sesuka anda, ini juga merupakan selektor misalnya '.header' jadi anda bisa berkreasi di selektor '.header' dengan CSS.  
• maxwidgets : kode ini boleh ada boleh tidak, ini merupakan peritah berapa batas maximal kita bisa menambahakn widget, misalnya maxwidgets="1" jadi widget yang bisa ditambahkan cuman satu saja.  
• showaddelement : kode ini boleh ada boleh tidak, ini berfungsi untuk menmapilakan pada halam editing layout menampilkan link 'Add a Page Element' / 'Tambah Widget' . jadi kita bisa memasukan voulenya dengan 'yes atau 'no' saja.  
• growth : boleh ada boleh tidak, ini kode berfungsi untuk menentukan apakah widget di tumpuk atau side by side. Bisa disikan dengan volue 'horizontal' atau 'vertical,' aslinya 'vertikal'.  
• b:section : ini adalah kode pembuka dan penutup jadi hukumnya wajib ada. 

Kemudian setelah kode diatas adalah kode widget berada didalam tag b:section :

<b:widget id="header" type='HeaderView' locked="yes"/>
<b:widget id="myList" type='ListView' locked="no" title="My Favorite Things"/>
<b:widget id=”BlogArchive1” locked=”false” mobile=”yes” title=”Blog Archive” type=”BlogArchive”/>

• id - diperlukan, jika ingin mengubah nama ID widget Anda harus mengahapus terlebih dahulu widgetnya dan buat yang baru. 
• type - diperlukan, ini menunjukkan jenis (type) widget. Contoh jenis-jenis widget : BlogArchive, Blog Feed, Header, HTML, SingleImage, LinkList, List, Logo, BlogProfile, Navbar, VideoBar, NewsBar
• locked - boleh ada boleh tidak, voulenya dengan 'yes atau 'no' saja. Ini berfungsi untuk menentukan pakah widget dapat dipindah dan dihapus pada editing layout, di page element. title - boleh ada boleh tidak, jika tidak digunakan maka sebagi defaoultnya, contoh misalnya 'label1'. 
• pageType - boleh ada boleh tidak, voulenya bisa diisi 'all,' 'archive,' 'main,' or 'item,' kalau aslinya 'all' karena ini berfungsi untuk menampilakan dimana widget akan tampil pada halaman blog seperti kondisional tag. 
• mobile - boleh ada boleh tidak, voulenya dengan 'yes,' 'no,' ‘only’ atau 'default' as the default. Ini fungsinya pakah widget akan ditampilkan pada tampilan mobile atau tidak. 

Tambahan : Dalam blog Anda saat dipublikasikan, semua tag <b:section> dan <b:widget> akan diganti dengan tag <div>, yang akan memiliki ID tertentu. Jadi, Anda dipersilahkan memodifikasi CSS nya, misalnya, div#header atau div#myList di CSS Anda jika Anda menginginkannya. Seperti yang saya jelaskan di beberapa penjelasan diatas.

Nah jika Anda ingin menambahkan widget dalam template pakai saja kode berikut masukkan dalam posisi yang Anda inginkan misalnya footer :

<b:section id='footer' class='footer' showaddelement="yes"/>

Mungkin ini yang bisa saya jelaskan..