RSS

Arsip Kategori: Blog

Cara Menampilkan Kode Script pada Posting

Jika sobat mempunyai blog yang bertemakan tutorial blog, atau blog trik maka yang pasti anda sering menggunakan kode script HTML, CSS, dll. Ada cara yang mudah untuk menayangkan kode tersebut pada blog agar mudah dilihat namun tetap terlihat cantik dan stylis. Jika sobat ingin tau cara kerjanya maka ikuti langkah berikut ini:

1. Masuk ke Rancangan –> Edit HTML
2. Carilah kode ]]></b:skin>
3. Paste kode dibawah ini diatas kode tadi:

.codeview {
margin : 15px 15px 15px 35px;
padding : 10px;
clear : both;
font-family : “Courier New”, “MS Sans Serif”, sans-serif, serif;
line-height:1.6;
background: url(http://3.bp.blogspot.com/_nDNgmK8FIyI/TEKte0tjVOI/AAAAAAAAAN4/UekZZxFJvlk/w2b_codeicon.gif&#8217;) no-repeat scroll bottom right #EFFBF5;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
line-height : 24px;
color : #333333;
margin : 0;
padding : 0;
}

Keterangan: Anda dapat mengganti kode cetak miring tebal dengan url gambar yang anda inginkan

4. Simpan template anda

Untuk cara kerjanya, jika sobat menulis Script Kode pada posting maka masuk ke tab Edit HTML, lalu sisipan kode yang ingin ditayangkan (cetak miring tebal) pada div class seperti dibawah ini:

<div>
<!– Letakkan kode anda disini –>
</div>

Demikian tutorial dari Blog Trik dan Tips, semoga bermanfaat!

 

Iklan
 
Tinggalkan komentar

Ditulis oleh pada 26 Agustus 2012 in Blog, Tips and Trik

 

Tag: , , , , , ,

Cara Membuat Efek Bintang Pada Link

Bulan lalu saya pernah menulis sebuah posting cara membuat link berwarna warni, kali ini kita akan membuat link tersebut dengan efek bintang berkedip. Efek ini akan muncul apabila link tersebut disorot oleh cursor. Jika sobat ingin membuat blog lebih menarik dengan berbagai macam animasi maka trik yang satu ini mungkin saja bermanfaat. Efek bintang pada link udah saya terapkan di demo blog dan hasilnya sukses. Berikut ini saya akan berikan langkahnya kepada sobat:

1. Login ke blogger
2. Masuk ke Rancangan — Edit HTML
3. Carilah kode a:link{ atau a:visited{
4. Lalu letakkan kode dibawah ini dibawah kode tadi

a:hover {background-image: url(https://lh6.googleusercontent.com/-AlOJLqdQbgM/TX8PrNRSMsI/AAAAAAAAAaY/qJhxSdh5tfE/s1600/stars.gif);}

Link akan mengeluarkan gambar seperti ini:

5. Simpan template anda lalu lihat hasilnya

Jika sobat kurang menyukai efek animasi gambar diatas maka sobat tinggal ganti dengan url gambar yang lain. Selamat mencoba!

 
Tinggalkan komentar

Ditulis oleh pada 26 Agustus 2012 in Blog, Tips and Trik

 

Tag: , , , , , ,

Memasang gadget translate bendera

Google menawarkan berbagai macam widget yang dapat kita gunakan untuk mempercantik atau menambah elemen pada blog, salah satunya yaitu Google Translate. Google Translate ada bermacam tampilan yang dapat dipasang pada blog. Kali ini kita akan membuat Google Translate dengan menggunkanakan bendera dari beberapa negara. Anda bisa mentranslate halaman dengan cara menklik bendera yang ada. Ingin tau cara memasangnya ikuti langkah dibawah ini:

1. Login ke Blogger
2. Masuk ke Rancangan –> Edit Laman
3. Tambahkan Gadjet lalu pilih HTML/Javascript
4. Masukan kode berikut ini:

<style type=””text/css””>.w2bgft{padding:5px;}.w2bgft input{padding:1px;margin-left:1px;border:1px solid #ccc;}.w2bgft input:hover{border:1px solid #ff0000;}</style><div><!––google flag translator by blogtrikdantips.blogspot.com––><form action=””http://www.google.com/translate””><script language=””javascript””>document.write (“<input name=”u” value=””+location.href+”” type=”hidden”>”)</script><noscript><a href=””http://blogtrikdantips.blogspot.com/””>BlogTrikdanTips</a></noscript><input value=””en”” name=””hl”” type=””hidden”/”><input value=””UTF8″” name=””ie”” type=””hidden”/”><input value=””&quot;” name=””langpair”” type=””hidden”/”><input onclick=””this.form.langpair.value=this.value”” title=””English”” value=””auto|en”” src=”%E2%80%9Dhttp://www.google.com/images/flags/uk_flag.gif%E2%80%9D” name=””langpair”/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Chinese” value=””auto|zh-CN”” src=”%E2%80%9Dhttp://www.google.com/images/flags/cn_flag.gif%E2%80%9D” name=””langpair”/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Greek”” value=””auto|el”” src=”%E2%80%9Dhttp://www.google.com/images/flags/gr_flag.gif%E2%80%9D” name=””langpair”/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Hindu”” value=””auto|hi”” src=”%E2%80%9Dhttp://www.google.com/images/flags/in_flag.gif%E2%80%9D” name=””langpair2″/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””German”” value=””auto|de”” src=”%E2%80%9Dhttp://www.google.com/images/flags/de_flag.gif%E2%80%9D” name=””langpair”/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Dutch”” value=””auto|nl”” src=”%E2%80%9Dhttp://www.google.com/images/flags/nl_flag.gif%E2%80%9D” name=””langpair2″/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Russian”” value=””auto|ru”” src=”%E2%80%9Dhttp://www.google.com/images/flags/ru_flag.gif%E2%80%9D” name=””langpair2″/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Bulgarian”” value=””auto|bg”” src=”%E2%80%9Dhttp://www.google.com/images/flags/bg_flag.gif%E2%80%9D” name=””langpair2″/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Polish”” value=””auto|pl”” src=”%E2%80%9Dhttp://www.google.com/images/flags/pl_flag.gif%E2%80%9D” name=””langpair2″/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Czech”” value=””auto|cs”” src=”%E2%80%9Dhttp://www.google.com/images/flags/cz_flag.gif%E2%80%9D” name=””langpair2″/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Croatian”” value=””auto|hr”” src=”%E2%80%9Dhttp://www.google.com/images/flags/hr_flag.gif%E2%80%9D” name=””langpair2″/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””French”” value=””auto|fr”” src=”%E2%80%9Dhttp://www.google.com/images/flags/fr_flag.gif%E2%80%9D” name=””langpair”/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Italian”” value=””auto|it”” src=”%E2%80%9Dhttp://www.google.com/images/flags/it_flag.gif%E2%80%9D” name=””langpair”/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Portuguese”” value=””auto|pt”” src=”%E2%80%9Dhttp://www.google.com/images/flags/pt_flag.gif%E2%80%9D” name=””langpair”/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Spanish”” value=””auto|es”” src=”%E2%80%9Dhttp://www.google.com/images/flags/es_flag.gif%E2%80%9D” name=””langpair”/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Arabic”” value=””auto|ar”” src=”%E2%80%9Dhttp://www.google.com/images/flags/sa_flag.gif%E2%80%9D” name=””langpair2″/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Japanese”” value=””auto|ja”” src=”%E2%80%9Dhttp://www.google.com/images/flags/ja_flag.gif%E2%80%9D” name=””langpair”/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Korean”” value=””auto|ko”” src=”%E2%80%9Dhttp://www.google.com/images/flags/kr_flag.gif%E2%80%9D” name=””langpair”/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Chinese” value=””auto|zh-TW”” src=”%E2%80%9Dhttp://www.google.com/images/flags/tw_flag.gif%E2%80%9D” name=””langpair2″/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Danish”” value=””auto|da”” src=”%E2%80%9Dhttp://www.google.com/images/flags/dk_flag.gif%E2%80%9D” name=””langpair2″/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Finnish”” value=””auto|fi”” src=”%E2%80%9Dhttp://www.google.com/images/flags/fi_flag.gif%E2%80%9D” name=””langpair2″/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Norwegian”” value=””auto|no”” src=”%E2%80%9Dhttp://www.google.com/images/flags/no_flag.gif%E2%80%9D” name=””langpair2″/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Swedish”” value=””auto|sv”” src=”%E2%80%9Dhttp://www.google.com/images/flags/se_flag.gif%E2%80%9D” name=””langpair2″/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Catalan”” value=””auto|ca”” src=”%E2%80%9Dhttp://www.google.com/images/flags/cl_flag.gif%E2%80%9D” name=””langpair2″/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Filipino”” value=””auto|tl”” src=”%E2%80%9Dhttp://www.google.com/images/flags/ph_flag.gif%E2%80%9D” name=””langpair2″/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Hebrew”” value=””auto|iw”” src=”%E2%80%9Dhttp://www.google.com/images/flags/il_flag.gif%E2%80%9D” name=””langpair2″/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Indonesian”” value=””auto|id”” src=”%E2%80%9Dhttp://www.google.com/images/flags/id_flag.gif%E2%80%9D” name=””langpair2″/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Latvian”” value=””auto|lv”” src=”%E2%80%9Dhttp://www.google.com/images/flags/lv_flag.gif%E2%80%9D” name=””langpair2″/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Lithuanian”” value=””auto|lt”” src=”%E2%80%9Dhttp://www.google.com/images/flags/lt_flag.gif%E2%80%9D” name=””langpair2″/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Serbian”” value=””auto|sr”” src=”%E2%80%9Dhttp://www.google.com/images/flags/rs_flag.gif%E2%80%9D” name=””langpair2″/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Slovak”” value=””auto|sk”” src=”%E2%80%9Dhttp://www.google.com/images/flags/sk_flag.gif%E2%80%9D” name=””langpair2″/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Slovenian”” value=””auto|sl”” src=”%E2%80%9Dhttp://www.google.com/images/flags/si_flag.gif%E2%80%9D” name=””langpair2″/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Ukrainian”” value=””auto|uk”” src=”%E2%80%9Dhttp://www.google.com/images/flags/ua_flag.gif%E2%80%9D” name=””langpair2″/” height=””20″” type=””image”” width=””30″”><input onclick=””this.form.langpair.value=this.value”” title=””Vietnamese”” value=””auto|vi”” src=”%E2%80%9Dhttp://www.google.com/images/flags/vn_flag.gif%E2%80%9D” name=””langpair2″/” height=””20″” type=””image”” width=””30″”><span style=””float:right;margin:3px”><a href=”http://www.blogger.com/%E2%80%9Dhttp://blogtrikdantips.blogspot.com/%E2%80%9D”>+Dapatkan Widget Ini</a></span></form><!––google flag translator by blogtrikdantips.blogspot.com––><!–!–google–><!–!–google–></div>

5. Simpan gadjet anda

Demikian Cara Membuat Google Translate dengan Bendera pada blog anda. Sobat dapat menghapus beberapa bendera dengan cara mengedit kode diatas. Semoga artikel ini dapat bermanfaat. Salam Blogging

http://blogtrikdantips.blogspot.com/2012/04/cara-membuat-google-translate-dengan.html#ixzz24e5UxjlY

 
Tinggalkan komentar

Ditulis oleh pada 26 Agustus 2012 in Blog, Tips and Trik

 

Tag: , , , , , , , ,

Nivo Slider, Slider Blogger Keren

Banyak sebagian blog dari Indonesia menggunakan fitur ini, fitur slider untuk blogger. Fitur ini berguna untuk menampilkan artikel populer atau artikel terbaru dengan gambar yang menarik agar pengunjung melihat artikel yang di tampilkan dalam slider.  Selain memudahkan pengunjung untuk mencari tahu artikel apa yang harus dia lihat juga berfungsi sebagai keindahan blog.  Jadi jangan asal-asal pilih dan ambil slider dari blog tutorial, jangan asal ada slider di blog, udah deh!  Lihat dulu tampilan itu cocok atau enggak untuk blog kalian, kalo cocok langsung ikuti langkah-langkah yang di terapkan ^^

Nah.. bagi kalian yang ingin cari slider untuk blog kalian jangan cari jauh jauh dari blog ini, di artikel ini aku juga akan membagi slider yang cocok untuk semua tampilan blog yang ada.  Slider yang simple, keren dan enak di pandang mata.

  • Login Blogger > Design > Edit HTML
  • Salin kode berikut di atas kode </b:skin>

/*
* jQuery Nivo Slider v2.5.1
* http://nivo.dev7studios.com
*
* Copyright 2011, Gilbert Pellegrom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* Editor
* http://dopind.blogspot.com/2012/07/nivo-slider-slider-blogger-keren.html
*
* March 2010
*/

#slider-wrapper {
background:url(http://3.bp.blogspot.com/-upQKtIwk5Kw/TeiNrE-31II/AAAAAAAAASU/J_p9rYGVEHQ/s1600/slider.png) no-repeat;
width:998px;
height:392px;
margin:0 auto;
padding-top:74px;
margin-top:50px;
}
#slider {
position:relative;
width:618px;
height:246px;
margin-left:190px;
background:url(http://4.bp.blogspot.com/-ueagsKPMZC4/TeiMv1JhNFI/AAAAAAAAASI/326s2RXE-mQ/s1600/loading.gif) no-repeat 50% 50%;
}
#slider img {
position:absolute;
top:0px;
left:0px;
display:none;
}
#slider a {
border:0;
display:block;
}
.nivo-controlNav {
position:absolute;
left:260px;
bottom:-42px;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(ttp://4.bp.blogspot.com/-jQWCeMA4bLI/TeiNqrIkyHI/AAAAAAAAASQ/c35RQfTbw_I/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}
.nivo-controlNav a.active {
background-position:0 -22px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(http://4.bp.blogspot.com/-rgk389yhc1Y/TeiNraq4IVI/AAAAAAAAASY/b0WSOzs075o/s1600/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
.nivo-caption {
text-shadow:none;
font-family: Helvetica, Arial, sans-serif;
}
.nivo-caption a {
color:#efe9d1;
text-decoration:underline;
}
/* The Nivo Slider styles */
.nivoSlider {
position:relative;
}
.nivoSlider img {
position:absolute;
top:0px;
left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
display:block;
position:absolute;
z-index:5;
height:100%;
}
.nivo-box {
display:block;
position:absolute;
z-index:5;
}
/* Caption styles */
.nivo-caption {
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
opacity:0.8; /* Overridden by captionOpacity setting */
width:100%;
z-index:8;
}
.nivo-caption p {
padding:5px;
margin:0;
}
.nivo-caption a {
display:inline !important;
}
.nivo-html-caption {
display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
}
.nivo-prevNav {
left:0px;
}
.nivo-nextNav {
right:0px;
}
.nivo-directionNav a {
display:block;
width:30px;
height:30px;
background:url(http://4.bp.blogspot.com/-rgk389yhc1Y/TeiNraq4IVI/AAAAAAAAASY/b0WSOzs075o/s1600/arrows.png) no-repeat;
text-indent:-9999px;
border:0;
}
a.nivo-nextNav {
background-position:-30px 0;
right:15px;
}
a.nivo-prevNav {
left:15px;
}
/* Control nav styles (e.g. 1,2,3…) */
.nivo-controlNav a {
position:relative;
z-index:9;
cursor:pointer;
}
.nivo-controlNav a.active {
font-weight:bold;
}
.nivo-controlNav a {
display:block;
width:22px;
height:22px;
background:url(http://4.bp.blogspot.com/-jQWCeMA4bLI/TeiNqrIkyHI/AAAAAAAAASQ/c35RQfTbw_I/s1600/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
float:left;
}

  • Salin kode berikut di atas kode </head>

<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js&#8217; type=’text/javascript’/>
<script src=’http://yourjavascript.com/1611641113/jquery.nivo.slider.pack.js&#8217; type=’text/javascript’/>
<script type=’text/javascript’>
$(window).load(function() {
$(‘#slider’).nivoSlider();
});
</script>

  • Klik tombol ‘Save Templates’ , kemudian klik ‘Page Elements’ (letak gadget di atas postingan? pertama buat gadget lalu klik dan geser di atas ‘posting blog’)  > Add a Gadget > pilih HTML/JavaScriptSalin kode berikut #ganti kode hurufnya tebal dengan link gambar

<div id=”slider”>
<img src=”http://3.bp.blogspot.com/-R_jrCzUDe-g/TehdHXDrK8I/AAAAAAAAASE/fW_-YGhHx20/s1600/toystory.jpg&#8221; alt=”” />
<a href=”http://dev7studios.com“><img src=”http://1.bp.blogspot.com/-BRh1P_3XyDo/Tehc9UlYh0I/AAAAAAAAAR4/6TKLJs25ecg/s1600/up.jpg” alt=”” title=”#htmlcaption” /></a>
<img src=”http://1.bp.blogspot.com/-mUIbhIqAyw4/Tehc-zbmK_I/AAAAAAAAAR8/MlPQb_D5P_A/s1600/walle.jpg” alt=”” title=”This is an example of a caption” />
<img src=”http://2.bp.blogspot.com/-RiUUAdlHMSE/TehdEWtMyCI/AAAAAAAAASA/AXMQng9etR8/s1600/nemo.jpg” alt=”” />
</div>
<div id=”htmlcaption”>
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href=”#”>a link</a>.
</div>

 
Tinggalkan komentar

Ditulis oleh pada 27 Juli 2012 in Blog, Tips and Trik

 

Tag: , , , , ,

Memberi Efek Menarik Pada Gambar

Kali ini yang di awali dengan proses coba-coba , akhirnya menghasilkan keindahan yang tidak kalah saing dengan kode-kode yang dimiliki para master yang menampilkan efek pada suatu gambar.  Efek yang jika di sentuh akan menggerakkan sudut gambar menjadi agak bulat! ^^

Sekali lagi kita akan menambahkan beberapa kode CSS yang singkat tapi sangat bermanfaat untuk kecantikan blog, untuk demo silahkan lihat di http://craxup.blogspot.com/ !

Ikuti langkah-langkah berikut untuk membuat efek pada gambar.

  1. Login ke Blogger.com , Harus !!!  tengkorak
  2. Menuju Design > Edit HTML (Tampilan Lama) / Menuju Template > Edit HTML (Tampilan Baru)
  3. Salin kode berikut di atas kode ]]></b:skin>
    a img {-webkit-transition-duration:.4s;}
    img:hover {filter: alpha(opacity=60);opacity: .9.9;border-radius:50px;border: 1px #FF66CC;-webkit-box-shadow: 0px 0px 20px #FF66CC;-moz-box-shadow: 0px 0px 20px #FF66CC;}

    Jika terdapat kode seperti yang tebal, silahkan salin kode yang tulisannya ada garis tengah
    Jika tidak terjadi efek apa-apa, korbankan semua kode a img dan  img:hover yang ada di kode CSS blogmu  salut

  4. Terakhir ‘Save Template’
  5. Gimana ? Bagus gak ? Jangan lupa komentarnya para sobat blogger !
 
Tinggalkan komentar

Ditulis oleh pada 27 Juli 2012 in Blog, Tips and Trik

 

Tag: , , , , , ,

Menambahkan Star Rating Pada Tiap Posting

 

Star Rating, atau Rating berbentuk bintang merupkan simbol dari populer atau tidak-nya sebuah tulisan anda. Semakin banyak Star Rating yang di dapat, maka semakin populer-lah tulisan itu. Nah untuk membuat Star Rating di blog anda, silakan ikuti tutorial yang saya sadur dariblogger-buster. Seperti biasa, sebelum mencoba tips ini backup terlebih dahulu template anda. Oke sekarang ikuti cara berikut:

Pertama
Pilih Layout->Edit HTML, centang Expand Widget Template

Kedua
Cari kode di bawah ini :

<div class=’post-footer-line post-footer-line-1′>

Ketiga
Copy kode di bawah ini tepat setelah kode di atas :

<b:if cond=’data:blog.pageType == &quot;item&quot;’> <span class=’star-ratings’> <b:if cond=’data:top.showStars’> <div expr:g:background-color=’data:backgroundColor’ expr:g:text-color=’data:textColor’ expr:g:url=’data:post.absoluteUrl’ g:height=’42’ g:type=’RatingPanel’ g:width=’180’/> </b:if> </span> </b:if>

Keempat
Cari kode ini :

<b:include name=’nextprev’/>

Kelima
Copy-kan kode ini tepat di bawahnya :

<b:if cond=’data:top.showStars’> <script src=’http://www.google.com/jsapi&#8217; type=’text/javascript’/> <script type=’text/javascript’> google.load(“annotations”, “1”); function initialize() { google.annotations.createAll(); google.annotations.fetch(); } google.setOnLoadCallback(initialize); </script> </b:if>

Keenam
Simpan dan lihat hasilnya
Jika Star Rating sudah terlihat pada posting anda, itu tandanya sudah berhasil 🙂

 
Tinggalkan komentar

Ditulis oleh pada 27 Juli 2012 in Blog, Tips and Trik

 

Tag: , , , , , ,

Custom Domain co.cc di Blogspot (Setting domain co.cc di blogger)

Custom domain Domain co.cc di Blogspot  merupakan salahsatu cara untuk memasang domain gratis co.cc di blogspot . Jika menggunakan sub domain blogspot maka nama blog kita akan menjadi http://komputerseo.blogspot.com , sedangkan jika menggunakan domain gratis akan menjadi http://www.komputerseo.co.cc . Akan telihat dengan menggunakan domain co.cc akan lebih singkat penulisannya dan lebih sederhana.

Agar bisa memasang domain co.cc ke blogspot , maka kita harus mendaftar dulu ke situs penyedia domain gratis bisa daftar menggunakan widget di bawah ini (biaya pendaftaran gratis)

Setelah halaman situs co.cc terbuka, anda harus mendaftar sebagai member (biaya pendaftaran gratis) cari link Create an account now untuk mendaftar.Isi form pendaftaran kemudian login menggunakan akun baru anda.

1. Dalam  member area (setelah login) bisa mulai mencari domain yang gratis  misalnya bloggergratis

Cek atau ketik nama domain yang anda inginkan
Perhatikan domain yang akan anda gunakan harganya $0 , (berlaku selama 1 tahun, setelah setahun pemakaian , kita tetap bisa memperpanjangnya dengan gratis) .
Klik tombol Lanjutkan ke pendaftaran 

2. Akan terbuka halaman seperti di bawah ini
Klik tombol Setup
 

3. Dalam halaman berikut

Di bagian
a. Host : ketik nama domain misalnya http://www.bloggergratis.com
b. Type : pilih CNAME
c. Value : ketik ghs.google.com
Klik tombol Setup

4. Jika konfigurasi berhasil maka akan muncul sebuah record baru seperti di bawah ini 


Sampai disini urusan dengan setting domain di member area co.cc (control panel co.cc) sudah selesai. Langkah selanjutnya melakukan konfigurasi di blogspot

Setelah mendaftar , mendapatkan domain gratis dan melakukan konfigurasi domain baru di co.cc maka langkah selanjutnya adalah melakukan konfigurasi domain co.cc di blogspot. Hasil akhir dari custom domain ini adalah mengganti nama domain yang awalnya seperti ini http://namablog.blogspot.com akan menjadi http://namablog.co.cc (jadi lebih ringkas dan mudah diingat).

Postingan ini merupakan bagian kedua dari Cara Setting domain co.cc di blogspot (custom domain co.cc di blogspot). Bagian awalnya bisa dilihat disinicustom domain co.cc di blogspot.

Lakukan prosedur seperti di bawah ini
1. Login ke akun blogger (blogspot)
2. Di Dashboard pilih salah satu blog yang ingin diubah domainnya dari blogspot menjadi co.cc
Pada bagian / tabulasi Pengaturan – Publikasikan
Klik link Domain Ubahsesuaian

3. Klik link Beralihlah ke pengaturan lanjut

 

4. Kemudian masukkan  nama domain yang sudah diperoleh dari situs co.cc
Misalnya : http://www.bloggergratis.co.cc
Ketik kode capctha yang ada, selanjutnya klik tombol Simpan Setelan

5. Pada halaman berikut
a.Centang pada :
Mengarahkan bloggergratis.co.cc ke http://www.bloggergratis.co.cc
(nama domainnya menyesuaikan dengan nama domain anda)
b.Ketik kode captcha yang tampil
c. Klik tombol Simpan Setelan

Sampai disini anda telah selesai melakukan setting domain baru cc.cc di blogspot.
Tunggu maksimal 48 jam, agar domain anda bisa aktif (biasanya sekitar 3 jam sudah aktif) , contoh blog yang menggunakan domain gratis co.cc bisa dilihat disini

 
Tinggalkan komentar

Ditulis oleh pada 25 Juli 2012 in Blog, Tips and Trik

 

Tag: , , , , ,

Menambah widget lucu di pojok Blog

Cara memasang gambar animasi lucu di pojok blog (widget animasi blog gratis)

Cara menampilkan gambar animasi di pojok blog. Terkadang untuk menghias blog agar tampak lebih menarik maka bisa memasang gambar animasi di blog.Bisa ditempatkan di pojok atas (kiri dan kanan), pojok bawah kiri dan kanan, atau semua pojok diisi gambar lucu-lucu.

Untuk menampilkan gambar lucu, cukup copy salah satu script html di bawah ini kemudian masukkan ke dalam gadget html. Script ini saya buat menggunakankode html ditambah gambar dari situs sweetim.

Contoh dan scriptnya bisa dilihat di bawah ini :
1.Gajah loncat

Script:

<div style=”position: fixed; bottom: 0px; left: 20px;width:120px;height:160px;”><a href=”http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10&#8243; target=”_blank”><img border=”0″ src=”http://content.sweetim.com/sim/cpie/emoticons/000203BC.gif&#8221; title=”Click to get more.” /></a><small><center><a href=”http://www.komputerseo.com&#8221; target=”_blank”>Widget-Animasi</a></center></small></div>

2. Boring

Script :

<div style=”position: fixed; bottom: 0px; left: 20px;width:80px;height:120px;”><a href=”http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10&#8243; target=”_blank”><img src=”http://content.sweetim.com/sim/cpie/emoticons/0002016B.gif&#8221; border=”0″ /></a><small><center><a href=”http://www.komputerseo.com&#8221; target=”_blank”>Widget-Animasi</a></center></small></div>

3.Tuyul ketawa

Script:

<div style=”position: fixed; bottom: 0px; right: 20px;width:82px;height:160px;”><a href=”http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10&#8243; target=”_blank”><img src=”http://content.sweetim.com/sim/cpie/emoticons/0002031F.gif&#8221; border=”0″ /></a><small><center><a href=”http://www.komputerseo.com&#8221; target=”_blank”>Widget-Animasi</a></center></small></div>

4.Boneka joget

Script :

<div style=”position: fixed; bottom: 0px; left: 20px;width:82px;height:160px;”><a href=”http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10&#8243; target=”_blank”><img src=”http://content.sweetim.com/sim/cpie/emoticons/0002013F.gif&#8221; border=”0″ /></a><small><center><a href=”http://www.komputerseo.com&#8221; target=”_blank”>Widget-Animasi</a></center></small></div>

5. Panda main bola

Script :

<div style=”position: fixed; bottom: 0px; right: 30px;width:160px;height:160px;”><a href=”http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10&#8243; target=”_blank”><img src=”http://content.sweetim.com/sim/cpie/emoticons/0002032D.gif&#8221; border=”0″ /></a><small><center><a href=”http://www.komputerseo.com&#8221; target=”_blank”>Widget-Animasi-Blog</a></center></small></div>

6. Tuyul baring

Script :

<div style=”position: fixed; bottom: 0px; left: 20px;width:120px;height:100px;”><a href=”http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10&#8243; target=”_blank”><img border=”0″ src=”http://content.sweetim.com/sim/cpie/emoticons/0002031E.gif&#8221; title=”Click to get more.” /></a><small><center><a href=”http://www.komputerseo.com&#8221; target=”_blank”>Free-Widget-Animasi</a></center></small></div>

7. Panda biru

Script

<div style=”position: fixed; bottom: 0px; left: 20px;width:100px;height:100px;”><a href=”http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10&#8243; target=”_blank”><img border=”0″ src=”http://content.sweetim.com/sim/cpie/emoticons/0002033D.gif&#8221; title=”Click to get more.” /></a>
<small><center><a href=”http://www.komputerseo.com&#8221; target=”_blank”>Free-Widget-Animasi</a></center></small></div>

8. Panah

Script:

<div style=”position: fixed; bottom: 0px; left: 10px;width:210px;height:120px;”><a href=”http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10&#8243; target=”_blank”><img border=”0″ src=”http://content.sweetim.com/sim/cpie/emoticons/00020236.gif&#8221; title=”Click to get more.” /></a><small><center><a href=”http://www.komputerseo.com&#8221; target=”_blank”>Widget Animasi</a></center></small></div>

9. Bunga

Script :

<div style=”position: fixed; bottom: 0px; left: 10px;width:100px;height:160px;”><a href=”http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10&#8243; target=”_blank”><img border=”0″ src=”http://content.sweetim.com/sim/cpie/emoticons/00020322.gif&#8221; title=”Click to get more.” /></a><small><center><a href=”http://www.komputerseo.com&#8221; target=”_blank”>Widget Animasi</a></center></small></div>

10.Anjing laut

Script:

<div style=”position: fixed; bottom: 0px; left: 10px;width:110px;height:160px;”><a href=”http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10&#8243; target=”_blank”><img border=”0″ src=”http://content.sweetim.com/sim/cpie/emoticons/000203B5.gif&#8221; title=”Click to get more.” /></a><small><center><a href=”http://www.komputerseo.com&#8221; target=”_blank”>Widget Animasi</a></center></small></div>

11.Lumba-lumba

Script :

<div style=”position: fixed; bottom: 0px; left: 10px;width:110px;height:160px;”><a href=”http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10&#8243; target=”_blank”><img border=”0″ src=”http://content.sweetim.com/sim/cpie/emoticons/000203BA.gif&#8221; title=”Click to get more.” /></a><small><center><a href=”http://www.komputerseo.com&#8221; target=”_blank”>Widget Animasi</a></center></small></div>

12.Kucing tidur

Script :

<div style=”position: fixed; bottom: 0px; left: 10px;width:110px;height:140px;”><a href=”http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10&#8243; target=”_blank”><img border=”0″ src=”http://content.sweetim.com/sim/cpie/emoticons/000203C0.gif&#8221; title=”Click to get more.” /></a><small><center><a href=”http://www.komputerseo.com&#8221; target=”_blank”>Widget Animasi</a></center></small></div>

13.Kelinci

Script :

<div style=”position: fixed; bottom: 0px; left: 10px;width:125px;height:160px;”><a href=”http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10&#8243; target=”_blank”><img border=”0″ src=”http://content.sweetim.com/sim/cpie/emoticons/000203A0.gif&#8221; title=”Click to get more.” /></a><small><center><a href=”http://www.komputerseo.com&#8221; target=”_blank”>Widget Animasi</a></center></small></div>

14.Dragon

Script:

<div style=”position: fixed; bottom: 0px; left: 10px;width:150px;height:130px;”><a href=”http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10&#8243; target=”_blank”><img border=”0″ src=”http://content.sweetim.com/sim/cpie/emoticons/00020478.gif&#8221; title=”Click to get more.” /></a><small><center><a href=”http://www.komputerseo.com&#8221; target=”_blank”>Widget Animasi</a></center></small></div>

15.Ikan

Script :

<div style=”position: fixed; bottom: 0px; left: 10px;width:100px;height:130px;”><a href=”http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10&#8243; target=”_blank”><img border=”0″ src=”http://content.sweetim.com/sim/cpie/emoticons/00020479.gif&#8221; title=”Click to get more.” /></a><small><center><a href=”http://www.komputerseo.com&#8221; target=”_blank”>Widget Animasi</a></center></small></div>

16.Pinguin

Script :

<div style=”position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;”><a href=”http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10&#8243; target=”_blank”><img border=”0″ src=”http://content.sweetim.com/sim/cpie/emoticons/00020484.gif&#8221; title=”Click to get more.” /></a><small><center><a href=”http://www.komputerseo.com&#8221; target=”_blank”>Widget Animasi</a></center></small></div>

17. Helikopter

Script :

<div style=”position: fixed; bottom: 0px; left: 10px;width:110px;height:130px;”><a href=”http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10&#8243; target=”_blank”><img border=”0″ src=”http://content.sweetim.com/sim/cpie/emoticons/00020389.gif&#8221; title=”Click to get more.” /></a><small><center><a href=”http://www.komputerseo.com&#8221; target=”_blank”>Widget Animasi</a></center></small></div>

Anda bisa memilih salah satu script di atas kemudian masukkan ke gadget html/javascript. Jika menggunakan blog wordpress gratisan / blogdetik bisa copy script di atas ke widget text html.

Cara memasang widget animasi ke blog : 

1. Pilih script yang tersedia

2. Di Dashboard blogger pilih Rancangan – Elemen halaman

3. Pilih Tambah Gadget

4. Pilih HTML/Javascript

5. Masukkan script animasi ke dalam kotak kontent HTML/Javascript

Catatan:

1.Contoh blog yang sudah terpasang widget di atas bisa dilihat disini widget animasi atau disini widget blog
2. Untuk mengganti posisi widget dari sebelah kiri ke kanan ganti tag leftmenjadi right
Untuk mengubah posisi dari kiri ke kanan ganti tag right menjadi left
Contohnya bisa dilihat di bawah ini

<div style=”position: fixed; bottom: 0px; left: 30px;width:160px;height:160px;”><a href=”http://www.sweetim.com/s.asp?im=gen&lpver=3&ref=10&#8243; target=”_blank”><img src=”http://content.sweetim.com/sim/cpie/emoticons/0002032D.gif&#8221; border=”0″ /></a><small><center><a href=”http://www.komputerseo.com&#8221; target=”_blank”>Widget-Animasi-Blog</a></center></small></div>

Artis

1. Leonardo

Untuk widget animasi gambar artis bisa dilihat scriptnya disini widget animasi blog

Untuk widget animasi kartun lucu lainnya seperti di bawah ini bisa dilihat disiniwidget animasi lucu.
.
24.Telur menetas

25.Ayam bertelur

26.Beruang

32.Gawang

 
Tinggalkan komentar

Ditulis oleh pada 25 Juli 2012 in Blog, Tips and Trik

 

Tag: , , , , , , ,