Tampilkan posting dengan label Widget Blog. Tampilkan semua posting
Tampilkan posting dengan label Widget Blog. Tampilkan semua posting

Memasang Widget Translate di Blogger

Perusahaan "Avantage" mengkhususkan diri dalam kompleks, disertai oleh proyek-proyek pembangunan, dari riset pasar dan penciptaan konsep objek untuk pekerjaan konstruksi, penjualan atau penyewaan properti, serta mengawasi fasilitas setelah commissioning.

Memasang Widget Translate di Blogger. Widget translate ini akan sangat berguna bagi pengunjung atau visitor yang berasal dari luar negara. Cara membuat widget translate ini juga sangat mudah, anda bisa mengunjungi Website Translator Google. Disana sobat tinggal memilih widget translate model yang seperti apa yang di sukai dan dapatkan kodenya untuk di pasang di blog sobat. Kalau sobat ingin widget translator seperti blog ini (bisa di lihat pada bagian footer), sobat hanya perlu memasang kode widget translate yang saya berikan.
Memasang Widget Translate di Blogger
Mau widget Translate blog seperti di atas? berikut ini kodenya.
<div>
<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'id',
    autoDisplay: false,
    layout: google.translate.TranslateElement.InlineLayout.SIMPLE
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</div>

Memasang Widget Translate di Blogger

  • Login ke Blog sobat > Layouts > Add gadget baru > Pilih HTML / Javascript
  • Paste kode di atas pada gadget baru tersebut
  • Simpan dan lihat hasilnya.

Bagaimana? mudah kan cara membuat / memasang widget translate di blogger. OK sobat, itu saja caranya dan terima kasih sudah membaca artikel cara memasang widget translate di blogger / blogspot.

Widget Subscribe Mashable Style untuk Blogger

Widget Subscribe Mashable Style untuk Blogger atau blogspot. Widget subscribe untuk blogger ala mashable ini menjadi salah satu widget populer di kalangan blogger. Memang sih style nya elegant dan sangat menarik. Kali saya akan share cara membuat wiget subscribe ala mashable ini, caranya mungkin sama dengan cara membuat widget search box, widget recent post dll, yang beda hanya kodenya saja hehehe. Oh ya ngomong-ngomong sudah tahu belum situs mashable? kwkwkw, kalau belum tahu silahkan cek sendiri di www.mashable.com
Widget Subscribe Mashable Style Blogger

Cara membuat widget Subscribe ala Mashable

  • Langkah pertama silahkan login blog anda kemudian ke halaman edit Design
  • Selanjutnya silahkan add gadged baru dan pilih HTML / Javascript
  • Kalau sudah silahkan paste kode barikut ke dalam widget baru tersebut
<style>
/* Social Widget */
#B-mashable-bar {
    border: 0;
    margin-bottom: 10px;
    margin: 0 auto;
        width:300px;
}
.fb-likebox {
    background: #fff;
    padding: 10px 10px 0 10px;
    border: 1px solid #D8E6EB;
    margin-top: -2px;
border-bottom:0;
}
.googleplus {
    background: #fff;
    border-right: 1px solid #D8E6EB;
    border-left: 1px solid #D8E6EB;
    border-image: initial;
    font-size: .90em;
    font-family: "Arial","Helvetica",sans-serif;
    color: #000;
    padding: 9px 11px;
    line-height: 1px;}
.googleplus span {
    color: #000;
    font-size: 11px;
    position: absolute;
    display:inline-block;
    margin: 9px 80px;}
.g-plusone {    float: left;}
.twitter {
    background: #fff;
    padding: 5px;
    border: 1px solid #C7DBE2;
    border-top: 0;}
#mashable {
    background: #EBEBEB;
    border: 1px solid #CCC;
    border-top: 1px solid white;
    padding: 2px 8px 2px 3px;
    text-align: right;
    border-image: initial;}
#mashable .author-credit {}
#mashable .author-credit a {
    font-size: 10px;
    font-weight: bold;
    text-shadow: 1px 1px white;
    color: #1E598E;
    text-decoration:none;}
#email-news-subscribe .email-box{
    padding: 5px 10px;
    font-family: "Arial","Helvetica",sans-serif;
    border-top: 0;
    border-right: 1px solid #C7DBE2;
    border-left: 1px solid #C7DBE2;
    border-image: initial;
   height:35px;}
#email-news-subscribe .email-box input.email{
    background:#FFFFFF;
    border: 1px solid #dedede;
    color: #999;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    -khtml-border-radius: 3px;
    border-radius: 3px;
    border-image: initial;
    font-family: "Arial","Helvetica",sans-serif;}  
#email-news-subscribe .email-box input.email:focus{color:#333}  
#email-news-subscribe .email-box input.subscribe{
    background: #ff9b00;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border:1px solid #cc7c00;
    color:white;
    text-shadow:#d08d00 1px 1px 0;
    padding:5px 14px;
    margin-left:3px;
    font-weight:bold;
    font-size:12px;
    cursor:pointer;
    border-image: initial;}
#email-news-subscribe .email-box input.subscribe:hover{
    backfround: #ff9b00;
   -moz-box-shadow:0 0 3px #999;
    -webkit-box-shadow:0 0 3px #999;
    box-shadow:0 0 3px #999;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border:1px solid #cc7c00;
    color:#FFFFFF;
    text-shadow:#d08d00 1px 1px 0}  
#other-social-bar {
    background-color: #D8E6EB;
    box-shadow: 0 1px 1px #FFFFFF inset;
    padding: 0px;
    font-family: "Arial","Helvetica",sans-serif;
    font-weight:bold;
    overflow: hidden;
    border: 1px solid #B6D0DA;
       height:30px;
}
#other-social-bar ul {list-style: none outside none; padding-left: 4px;}
#other-social-bar .other-follow {
    float: left;
    color:#1E598E;
    overflow: hidden;
    height:20px;
    padding:5px;
    width: 260px;}
#other-social-bar .other-follow ul {
    list-style: none outside none;
    padding-left: 4px;}
#other-social-bar .other-follow ul li {
    font-size: 12px;
    font-weight: bold;
    display:inline;
    border:0;
    text-shadow: 1px 1px white;}  
#other-social-bar .other-follow ul li a {
    font-size: 12px;
    color:#1E598E;
    font-weight: bold;
    display:inline;
    text-shadow: 1px 1px white;}
#other-social-bar .other-follow li {
    font-size: 12px;
   font-weight: bold;
    display:inline;
    border:0;
    text-shadow: 1px 1px white;}
#other-social-bar .other-follow li a {
    font-size: 12px;
    color:#1E598E;
    font-weight: bold;
    display:inline;
    text-shadow: 1px 1px white;}
#other-social-bar .other-follow li.my-rss {
    background: url('http://3.bp.blogspot.com/-sR72SM_Wets/TwHZG9y4hXI/AAAAAAAAFv8/0bP2R3Qkl8c/s400/rss-16x16.png') no-repeat transparent;
    line-height: 1;
    padding: 0px 3px 1px 20px;
    width: 60px;
    margin-bottom:0px;
        margin-left:5px;}
#other-social-bar .other-follow li.my-rss a, #other-social-bar .other-follow li.my-linkedin a, #other-social-bar .other-follow li.my-gplus a{
text-decoration:none;
}
#other-social-bar .other-follow li.my-rss a:hover, #other-social-bar .other-follow li.my-linkedin a:hover, #other-social-bar .other-follow li.my-gplus a:hover{
text-decoration:underline;
}
#other-social-bar .other-follow li.my-fb { background: url ('http://2.bp.blogspot.com/_C6KkooKXCEw/SjNkb64JO4I/AAAAAAAAEbI/oALk2rlXwdg/s400/facebook.png') no-repeat transparent;
    line-height: 1;
    padding: 0px 3px 1px 20px;
    width: 60px;
    margin-bottom:0px;}
#other-social-bar .other-follow li.my-gplus {
    background: url(http://4.bp.blogspot.com/-cC729VpBxrk/TwHZE71ZgoI/AAAAAAAAFvk/_UMyIgA8vj8/s400/gplus-16x16.png) no-repeat transparent;
    line-height: 1;
    width: 60px;
    padding: 0px 3px 1px 20px;
    margin-bottom:0px;}
</style>
<!--[if IE]>
<style>
#email-news-subscribe .email-box input.subscribe{
    background: #FFCA00;
    }
</style>
<![endif]-->

<div style="margin-bottom:1px;"> <div id="B-mashable-bar" > <!-- Begin Widget -->
<div class="fb-likebox"> <!-- Facebook --> <script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>
    <script type="text/javascript">FB.init("");</script>
    <fb:fan profile_id="282864185058662" stream="0" connections="18" width="300px" height="170px" header="0" logobar="0"   css="http://script-bamz-us.googlecode.com/files/facebook.js"></fb:fan> </div> <div class="googleplus"> <!-- Google --> <span>Recommend us on Google!</span><div class="g-plusone" data-size="medium"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> </div>
<div class="twitter"> <!-- Twitter --> <iframe title="" style="width: 300px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp;
align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;
lang=en&amp;link_color=&amp;screen_name=BamzUs&amp;show_count=&amp;
show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div> <div id="email-news-subscribe">
<!-- Email Subscribe --> <div class="email-box">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BamzUs', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">  
<input class="email" type="text" style="width: 160px; font-size: 12px+" id="email" name="email" value="Enter Your Email here.." onfocus="if(this.value==this.defaultValue)this.value=&#39;&#39;;" onblur="if (this.value==&#39;&#29;)this.value=this.defaultValue;" />      
        <input type="hidden" value="BamzUs" name="uri" />
        <input type="hidden" name="loc" value="en_US" />
        <input class="subscribe" name="commit" type="submit" value="Subscribe" />  
    </form>
</div> </div> <div id="other-social-bar"> <!-- Other Social Bar --> <ul class="other-follow"> <li class="my-rss"> <a rel="nofollow" title="RSS" href="http://feeds.feedburner.com/BamzUs" target="_blank">RSS Feed</a> </li> <li class="my-fb"> <a rel="nofollow" title="FB" rel="author" href="http://www.facebook.com/Bamz.Us" target="_blank">Facebook</a> </li> <li class="my-gplus"> <a rel="nofollow" title="Goofle Plus" rel="publisher" href="http://plus.google.com/107316055823938290681" target="_blank">Google Plus</a> </li> </ul> </div> <div id="mashable"> <span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.bamz.us" target="_blank" >Template Blogger</a></span></div></div>
<!-- End Widget --> </div>

Keterangan :
  • <fb:fan profile_id="282864185058662" : ganti kode merah dengan Id fan Page facebook anda
  • screen_name=BamzUs : Ganti dengan username twitter anda
  • http://feedburner.google.com/fb/a/mailverify?uri=BamzUs : isi dengan Feedburner anda
  • http://feeds.feedburner.com/BamzUs : id Feedburner
  • http://www.facebook.com/Bamz.Us : Id fans page facebook
  • http://plus.google.com/107316055823938290681 ID google Plus

Widget Subscribe Mashable Style untuk Blogger

Oh yah widget ini berukuran lebar 300px, kalau anda ingin memasang widget ini dengan ukuran 200px misalnya, silahkan ganti yang warna biru! Selamat mencoba widget subscribe ala mashable ini

Info : Bamz Magazine Blogger Template sudah update!

Widget Search Box Keren untuk Blog

6 Widget Search Box Keren untuk Blog. Widget search box untuk membantu pengunjung menemukan apa yang mereka cari pada blog kita. Dan tentunya ini sangat berguna. Selain itu 99,99% para blogger memasang widget Search box pada blog mereka.
Widget Search Box Keren untuk Blog

6 Widget Search Box Keren untuk Blog

Widget search box ini bisa anda pasang untuk Blogger / blogspot dan juga wordpress. Blog Bamz akan sharing untuk blogger saja yah! maklum lagi males buka wordpress :p. Berikut ini cara memasang widget search box di blogger/blogspot.

Cara memasang widget search box di blogger

Login ke Blogger > Edit HTML > Add Element baru > HTML atau Javascript
Copy salah satu kode dari 6 widget serch box keren di bawah ini dan paste pada element baru tadi.

Widget Search box 1


$0AWidget Search box 2


Widget Search box 3


Widget Search box 4


Widget Search box 5


Widget Search box 6


width:307px >> Silahkan ganti dengan lebar widget blog anda.

Membuat Kotak Iklan Simpel dan Profesional

Membuat Kotak Iklan Simpel dan Profesional
Membuat Kotak Iklan Simpel dan Profesional. Membuat kotak iklan atau space untuk pasang iklan ala bamz yang simpel tapi insyaallah lebih terlihat profesional hehe. Tampilan space iklan ini ter inspirasi dari situs buysellads yang tergolong situs buy/sell space iklan terbesar. Jika di buysellads menggunakan javascript, yang ini pake cara manual saja kwkwk. Bagaimana cara membuat space iklan ini?

Coba anda lihat demonya disini

Cara membuat kotak iklan / space iklan simpel dan keren

  • Pertama anda login blog anda, kemudian menuju design terus add elemen baru (html/javascript)
  • Paste kode di bawah ini sesuai pilihan anda, dan tentunya yang pas dengan posisi blog anda.

Space iklan 460 x 80



Space iklan 125 x 125



Space iklan 200 x 200



Space iklan 250 x 250



Space iklan 300 x 250



Space iklan 728 x 90



Membuat space / kotak iklan simpel dan profesional dengan mudah, g sampek 5 menit sudah jadi kan? hehehe. Oh iya itu hanya fitur space iklan kosong, kalau nanti ada yang pasang banner yah tinggal masukkan URL pengiklan dan gambar saja.

URL-IKLAN : isi link menuju halaman penawaran iklan anda.
<a href="http://www.blogger.com/12/01/2012/pasang-iklan-murah.html" style="background-attachment: initial; background-clip: initial; background-color: #e7e7e7; background-image: initial; background-origin: initial; background-position: initial initial; background-repeat: initial initial+; border-bottom-color: rgb(153, 153, 153); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(153, 153, 153); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(153, 153, 153); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(153, 153, 153); border-top-style: solid; border-top-width: 1px; color: #666666; display: block; font-size: 12px; font-weight: bold; height: 60px; line-height: 48px; text-align: center; text-decoration: none; width: 460px;" title="Advertise Here" target="_blank">Advertise Here</a>
Jika ada yang pasang iklan/banner, tinggal ganti LINK si pengiklan trus Advertise Here diganti image/banner si pengiklan. Lihat contohnya di bawah ini.
<a alt="TAG-IMAGE" href="URL-IKLAN" title="TITEL-IMAGE" target="_blank"><img src="LINK-IMAGE" /></a>


Sekalian saya ingin tanya nih, kok posting saya "10 Menu horizontal keren untuk blogger" belum ter index google yah?

Membuat Navigasi Nomer Halaman Blog untuk Blogger

Membuat Navigasi Nomer Halaman Blog untuk blogger / blogspot. Navigasi nomer halaman blogger ini intinya sebagai pengganti dari blog pager. Tentunya navigasi halaman bernomer ini terlihat lebih elegant dan profesional dengan menampilkan juga total page yang ada. Lihat contohnya di bawah ini.
Membuat Navigasi Nomer Halaman Blog
Lihat juga contohnya pada blog Template Blogger, nah kalau yang ini beda lagi desainnya hehe. Buat anda yang sudah bisa edit css, bisa langsung edit sendiri tampilannya. Tapi tanpa di edit sudah bagus kok, terlihat lebih profesional dari pada tampilan "Older Post" atau "Posting Sebelumnya" dll. Bagaimana cara membuat navigasi nomer halaman blog di blogger? yoi lanjut baca tutorialnya di bawah ini.

Cara Membuat Navigasi Nomer Halaman Blogger

  • Login ke blog anda  kemudian menuju halaman Design dan Edit HTML, jangan lupa di back up dulu templatenya untuk keamanan soalnya akhir akhir ini sering error blogger.
  • Cari kode ]]></b:skin> lalu paste Css di bawah ini tepat di atas kode ]]></b:skin>
.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}
Langkah selanjutnya anda cari kode </body> , kalau sudah ketemu paste kode berikut ini tepat di atas kode </body>
<!--Page Navigasi-->
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script type='text/javascript'>
var pageCount=6;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigasi -->
Simpan template dan lihat hasilnya :).

Keterangan :
Anda bebas mengubah tulisan yang saya kasih warna hijau, angka 6 adalah jumlah posting yang tampil tiap halaman sedangkan yang 5 adalah tombol navigasi yang tampil. Next adalah text untuk ke halaman selanjutnya, sebalikanya previous untuk kembali kehalaman sebelumnya.

Membuat Navigasi Nomer Halaman Blog

Cara membuat Navigasi Nomer Halaman Blog untuk blogger ini di dapat dari jalan jalan tadi ke blog lain hehe. Thanks bloggerplugin yang sudah posting tutorial ini. Oh ya buat anda yang males mau edit HTML atau bingung dengan cara yang saya kasih di atas, bisa langsung add widget navigasi halaman untuk blogger di bawah ini.

Tambahan :
Untuk menyesuaikan Tampilan pada label, silahkan cari kode
'data:label.url' dan ganti dengan kode 'data:label.url + &quot;?&amp;max-results=5&quot;'
Nah angka 5 di sana samakan dengan Pagecount pada kode Navigasi. Semoga sukses

20 Tutorial Dasar Blogspot

Learn Russian
Free online Russian lessons with audio recorded by a native speaker. From beginner to advanced. Slow spoken audio recordings for beginner and intermediate levels.

20 Tutorial Dasar Blogspot
20 Tutorial dasar Blogspot untuk mendesain blog anda. 20 tutorial dasar blogspot ini tidak hanya untuk mempercantik blog anda, tapi juga tersedia bermacam-macam kumpulan tips dan trik dalam blogging. Posting ini BLog Bamz buat agar mempermudah anda dalam mencari kebutuhan tutorial untuk blog anda, khusus blogger atau blogspot.

20 Tutorial Dasar Blogspot

  1. Optimasi Seo on page blogspot : berguna bagi anda yang ingin belajar mengoptimalkan setiap posting / artikel anda. Mengoptimalkan keyword dalam postingan. contohnya penerapannya seperti artikel Ultrabook Notebook Tipis Harga Murah Terbaik yang mungkin sudah cukup maksimal.
  2. Memasang Tombol Google Plus di Blog : button social share google Plus ( + )
  3. Membuat Popular Post dengan Animasi Gambar berputar : mempercantik blog anda dengan widget animasi pada popular post
  4. Membuat Navbar Menu di Blog : Fitur menu atau sticky bar di bagian atas blog
  5. Membuat Widget Recent Post Blogspot : Widget recent post yang simpel dengan memanfaatkan fitur Rss Feed
  6. Memasang Facebook Like di Blog : Social share facebook di atas setiap postingan
  7. Cara Membuat Recent Comment Blog : Membuat recent comment dengan memanfaatkan Rss feed
  8. Cara Membuat Artikel Terkait di Sidebar Blog : mempercantik blog dengan artikel terkait di sidebar blog
  9. Membuat Menu Vertikal di Blogspot : Menu vertikal tambahan pada blog
  10. Cara Membuat Menu Drop Down Blogspot : membuat menu dropdown tambahan untuk meminimalis penggunaan widget
  11. Cara Membuat Popular Post Animasi 3D : percantik blog anda dengan widget popular post dengan animasi 3D
  12. Cara Membuat Daftar Isi Blog Otomatis : daftar isi blog dengan 2 macam
  13. Cara Membuat Tombol Share Facebook, Twitter dan Google + : Social share button lengkap di atas postingan
  14. Meta Tags for Seo Blogspot : pasang deskripsi atau keyword agar seo friendly
  15. Cara Membuat Artikel Terkait : Memberi fitur artikel terkait di bawa setiap posting / artikel
  16. Cara Membuat Breadcrumb : menu navigasi agar mempermudah pengunjung melihat lokasi pada blog anda
  17. Cara Membuat Menu Horizontal : menu horizontal tambahan untuk memasang link link penting pada blog anda
  18. Cara Membuat Read More Otomatis di Blog : Read more otomatis dengan gambar, tapi bisa juga anda ganti dengan gambar atau tulisan lain
  19. Cara Membuat Contact Us : mempermudah pengunjung blog untuk menghubungi anda
  20. Cara Membuat Template Blog Sendiri : desain template blog anda sendiri dengan beberapa cara yang ada

Membuat Popular Post dengan Animasi Gambar berputar

Membuat Popular Post dengan Animasi gambar berputar. Cara membuat popular post yang kali ini akan saya share yaitu hanya menampilkan gambar dengan hover. Sebelumnya saya juga pernah menulis artikel tentang cara membuat widget popular post animasi 3D. Tentunya kali ini hasilnya akan beda dari yang kemarin dan saya rasa lebih simpel dan lebih bagus :D. Lanjut ke cara membuat widget Popular Post dengan Animasi gambar berputar.
Membuat Popular Post dengan Animasi Gambar berputar

Cara membuat Popular Post dengan Animasi gambar berputar tahap 1

  • Login ke Blog anda > Design > Pada page lemen silahkan add gadged baru Popular Posts seperti contoh gambar di bawah ini.
Membuat Popular Post dengan Animasi Gambar berputar
  • Beri judul widget tersebut "Popular Posts" ( tenang saja nanti bisa anda ganti, untuk langkah awal agar mempermudah nanti pada bagian edit HTML)
  • Centang image thumbnail
  • Pada bagian snipet tidak perlu di centang
  • Jumlah artikel populer bebas berapa saja yang ingin di tampilkan
  • Save

Cara membuat Popular Post dengan Animasi gambar berputar tahap 2

  • Pada menu design > Edit HTML (tidak perlu centang expand widget templates)
  • Cari kode ]]></b:skin> dan paste Css berikut di atasnya
.popular-posts .item-thumbnail{float:left;} .popular-posts ul{padding-left:30px;} .popular-posts ul li {list-style-image: none;list-style-type: none;display:inline;} .popular-posts ul li img {padding:0px;-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px;-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;transition: all 0.3s ease;border: 2px solid #CCC;} .popular-posts ul li img:hover {border:2px solid #ccc;-moz-transform: scale(1.3) rotate(-360deg) ;-webkit-transform: scale(1.3) rotate(-360deg) ;-o-transform: scale(1.3) rotate(-360deg) ;-ms-transform: scale(1.2) rotate(-360deg) ;transform: scale(1.3) rotate(-360deg);}
  • Sekarang cari kode <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'/>
  • kalau sudah ketemu, ganti kode tersebut dengan kode dibawah ini
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content popular-posts'> <ul> <b:loop values='data:posts' var='post'> <li> <b:if cond='data:showThumbnails == &quot;false&quot;'> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (1) No snippet/thumbnail --> <a expr:href='data:post.href'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </b:if> <b:else/> <b:if cond='data:showSnippets == &quot;false&quot;'> <!-- (3) Show only thumbnails --> <div class='item-thumbnail-only'> <div class='item-thumbnail'> <a expr:href='data:post.href' expr:title='data:post.title'> <b:if cond='data:post.thumbnail'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> <b:else/> <img alt='' border='0' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='http://www.freetradeireland.ie/site/images/no-image.gif'/> </b:if> </a> </div> </div> <b:else/> <!-- (4) Show snippets and thumbnails --> <div class='item-content'> <b:if cond='data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div> <div class='item-snippet'><data:post.snippet/></div> </div> <div style='clear: both;'/> </b:if> </b:if> </li> </b:loop> </ul> <b:include name='quickedit'/> </div> </b:includable>
</b:widget>
  • Sekarang simpan template
Membuat Popular Post dengan Animasi gambar berputar semacam ini tidak akan mengurangi kecepatan loading blog anda karena tidak ada penggunaan javascript dalam membuatnya. Oh yah perlu di ingat, kode yang berwarna merah kadang ada yang kodenya PopularPost2. Jika kodenya PopularPost2 yah anda tianggal mengganti kode yang saya berikan (yang warna biru) menjadi PopularPost2 juga :). Kalau masih bingung tanyakan langsung di kotak komentar yah, jangan lupa di like juga hehehe. Selamat mencoba cara membuat widget popular post dengan animasi gambar berputar.

Membuat Widget Recent Post Blogspot

Membuat widget Recent Post Blogspot. Cara membuat widget recent post di blogspot / blogger dengan fasilitas RSS Feed. Widget recent post ini sangat simpel dan mudah, contohnya anda bisa lihat pada blog ini. Cara ini sama persis dengan cara membuat recent comment yang pernah saya posting sebelumnya. Ok deh silahkan ikuti langkah-langkah cara membuat widget Recent Post di blogspot berikut ini.

Cara membuat Widget Recent Post di Blogspot

  • Login ke blog ada pilih design > Pada page elemen kemudian add gadged baru
  • Pilih Feed kemudian paste link ini pada feed tersebut http://BLOG-ANDA.blogspot.com/feeds/posts/default
Membuat Widget Recent Post Blogspot
  • Klik continue dan beri judul widget tersebut "Recent Post" atau "Artikel Terbaru"
  • Tentukan berapa artikel yang ingin di tampilkan pada widget tersebut (maksimal 5 artikel)
  • Save dan lihat hasilnya.

Membuat Widget Recent Post di Blogspot

Membuat widget Recent Post di Blogspot memang bermacam-macam, tapi yang saya terapkan ini adalah cara yang paling simpel dan mudah di praktekkan. Kelebihan menggunakan widget recent post ini tidak akan mengganggu atau membuat Blog anda menjadi berat. ya sudah selamat mencoba cara membuat widget recent post di blogspot dan semoga sukses :)

Cara Membuat Recent Comment Blog

Cara membuat recent comment di blog dan lebih tepatnya di blogspot atau blogger. Cara membuat recent comment ala saya pribadi sangat mudah dan itupun saya terapkan pada blog ini. Widget recent comment ini hanya menampilkan maksimal 5 komentar terbaru. Wah bagaimana caranya? gampang saja, silahkan ikuti langkah langkah cara membuat recent comment di bawah ini.

Cara membuat Recent Comment

  • Login ke Blog anda > Pilih Design
  • Kemudian Add a gadged > pilih Feed
  • Masukkan Url berikut
  • http://BLOG-ANDA/feeds/comments/default
  • Ganti yang warna merah dengan alamat blog anda dan simpan

Cara membuat Recent Comment

Cara membuat Recent comment yang simpel dan mudah kan? tentu saja anda tidak akan kewalahan menambah script atau kode apa lah yang akan membuat anda bingung. Sekedar saran dari saya, jika ingin blog anda mempunya speed atau kecepatan yang maksimal, janganlah terlalu banyak menggunakan javascript atau kode kode yang akan membuat blog anda lelet atau berat. ok deh silahkan di praktekan cara membuat Recent comment di blog ala Bamz.

Cara Membuat Artikel Terkait di Sidebar Blog

Cara membuat artikel terkait pada sidebar blog. Membuat artikel terkait pada sidebar blogger atau blogspot tentunya lebih menarik dibandingkan artikel terkait yang sudah umum berada di bawah setiap postingan. Blog ini juga menggunakan artikel terkait dibagian sidebar kanan. Karena saya sendiri sudah mencoba pada blog ini, saya akan share cara membuat artikel terkait pada sidebar blog.
Cara Membuat Artikel Terkait atau related post di blogspot

Cara membuat artikel terkait atau related post pada sidebar

  • Login ke blog anda > Edit HTML > centang expand widget templates
  • Cari kode </head> ( gunakan CTRL + F untuk mempermudah pencarian )
  • Copy kode dibawah ini dan paste di atas kode </head>
Kode
<!-- Related Post -->
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
  • Selanjutnya cari kode <div class='post-footer-line post-footer-line-1'> atau <div class='post-footer-line post-footer-line-2'> atau <div class='post-footer-line post-footer-line-3'>
  • Pilih salah satu saja, kemudian paste kode berikut tepat dibawahnya
 <b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=15&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
  • Kalau sudah silahkan simpan template
  • Sekarang lanjut ke Page element > add a gadged dibagian sidebar kanan / kiri > pilih HTML / Javascript > Beri judul ' Artikel Terkait ' kemudian paste kode berikut pada gadget tersebut
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
  • Save
  • Sekarang kembali lagi ke Edit HTML > centang expand widget template dan cari title='Artikel Terkait'
  • Biasanya kodenya seperti dibawah ini
<b:widget id='HTML2' locked='false' title='Artikel Terkait' type='HTML'>
<b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:includable>
</b:widget>
  • Sekarang anda tambahkan kode berwarna merah dibawah ini sehingga hasilnyapun seperti dibawah ini
<b:widget id='HTML2' locked='false' title='Artikel Terkait' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
  <b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
  • Simpan template dan lihat hasilnya

Cara membuat artikel terkait atau related post

Cara membuat artikel terkait atau related post pada sidebar blog memang sedikit rumit yah? ^^. tapi tenang saja, cara ini sudah saya praktekkan sebelumnya, kalau bingung anda bisa tanya langsung pada komentar. Kelebihan membuat artikel terkait / related post semacam ini adalah artikel yang di tampilkan di random. oh iya kode yang warna hijau di abaikan saja, karena itu hanya nomor urut id widget anda. Misalkan di blog anda HTML5, jangan diganti, cukup di abaikan saja. Kode yang berwarna biru adalah jumlah artikel terkait yang ingin di munculkan. Ok itu saja langkah-langkah cara membuat artikel terkait atau related post pada sidebar blog.

Membuat Menu Vertikal di Blogspot

Cara membuat menu di blog, lebih tepatnya menu vertikal di blogspot alias blogger. Menu vertikal atau pun menu horizontal memang tidak bisa di hindari dalam dunia blogger. Terutama menu horizontal yang 99% template pasti ada menu horizontal. Sebelumnya saya sudah pernah mengulas tentang cara membuat menu horizontal di blogspot, dan pada posting kali ini saya akan berbagi tutorial cara membuat menu vertikal di blogspot.

Cara membuat menu Vertikal di Blogspot

  • Login ke blog anda > Klik Design
  • Add a gadged dan pilih HTML / javascript
  • Penempatan gadged atau widget tepatnya pada sidebar kanan atau kiri, karena menu ini vertikal dan tentunya susunan menunya kebawah.
  • Copy kode berikut dan paste pada gadged tsb
<style>
.menu-vertikal, .menu-vertikal li ul{list-style-type: none;margin: 5px;width: 250px; /*Lebar Menu*/border: 1px solid black;}
.menu-vertikal li{position: relative;}
.menu-vertikal li a{background: #000000;font: bold 12px Verdana, Helvetica, sans-serif;color: #FFFFFF;display: block;width: auto;padding: 5px 0;padding-left: 10px;text-decoration: none;}
.menu-vertikal li ul{position: absolute;width: 250px;display: none;}
.menu-vertikal li ul li{float: left;}
.menu-vertikal li ul a{width: 250px;}
.menu-vertikal li a:visited, .glossymenu li a:active{color: white;}
.menu-vertikal li a:hover{background: #454545;}
* html .menu-vertikal li { float: left; height: 1%; }
* html .menu-vertikal li a { height: 1%; }
</style>
<ul id="verticalmenu" class="menu-vertikal">
<li><a href="/">Home</a></li>
<li><a href="http://Link1">Menu1</a></li>
<li><a href="http://Link2">Menu2</a></li>
<li><a href="http://Link3">Menu3</a></li>
</ul>
  • Kemudian Save

Keterangan cara membuat menu vertikal di Blogspot :

  • Ganti Link1, Link2, Link3 dan Menu1, Menu2, Menu3 sesuai kebutuhan anda. yangs aya contohkan hanya 4 menu dengan Home. Jika ingin menambah, silahkan di tambahi dibawah sendiri ya <li><a href="http://Link4">Menu4</a></li> dan seterusnya.
  • Kode berwarna Merah adalah lebar menu dan list menu, silahkan anda sesuaikan dengan lebar widget sidebar blog anda.
  • Kode berwarna Piru adalah warna background menu Vertikal
  • Kode dengan warna Orange adalah warna tulisan dan bisa anda rubah sendiri
  • Kode berwarna Pink adalah warna hover background menu vertikal tersebut. Maksudnya warna background apabila mouse di arahkan pada menu tersebut.
Membuat menu vertikal di blog hanya perlu sedikit waktu, karena prosesnya juga tidak lama alias rada rada gampang ^^. Ya sudah selamat mencoba dan semoga sukses membuat menu vertikal di blog.

Cara Membuat Menu Drop Down Blogspot

Cara Membuat Menu Drop Down Blogspot
Cara membuat menu Drop Down atau istilah asingnya pull-down di Blogspot. Menu drop down akan sangat berguna untuk menghemat elemen blog kita. Tentunya dengan menu drop down, internal link maupun external link bisa kita ringkas menjadi 1 atau bahkan 2 menu drop down sesuai yang kita inginkan. Silahkan anda copy salah satu kode menu drop down di bawah ini sesuai keinginan anda, dan pasang pada widget blog anda

Cara membuat menu Dropdown standard di blog


<form name="jump">
<select name="menu"
onchange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="http://url1.com">Menu1 standard</option>
<option value="http://url2.com">Menu2 standard</option>
<option value="http://url3.com">Menu3 standard</option>
</select>
</form>

Cara membuat menu dropdown dengan tombol button di blog


<form name="jump">
<select name="menu"
onchange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="http://url1.com">Menu1 standard</option>
<option value="http://url2.com">Menu2 standard</option>
<option value="http://url3.com">Menu3 standard</option>
</select> <input
onclick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" type="button" value="Go" />
</form>

Cara membuat Drop down menu dengan tombol gambar

Gambar

<form name="jump">
<select name="menu"
onchange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="http://url1.com">Menu1 standard</option>
<option value="http://url2.com">Menu2 standard</option>
<option value="http://url3.com">Menu3 standard</option>
</select> <a href="javascript:jumpMenu()">
<img border="0" src="Link-Gambar-anda" /></a>
</form>

Menu drop down bisa anda tempatkan dimana saja, misalkan pada widget blog, footer bawah ataupun atas, bahkan juga bisa anda tempatkan di bawah / posting seperti penempatan artikel terkait dll. silahkan berkreasi sesuai keinginan dan kemampuan anda ^^. Oh ya jangan lupa ganti kode yang saya blog. Selamat mencoba dan semoga sukses. sudah yah itu saja tutorial cara membuat drop down menu di blog.

Cara Membuat Popular Post Animasi 3D

Cara Membuat Popular Post
Cara membuat Popular Post animasi 3D pada bagian widget blog menggunakan kode simpel javascript. Widget popular post atau artikel populer memang di perlukan dalam sebuah blog. Dengan adanya widget popular post, secara para visitor akan penasaran dengan isi artikel yang menjadi populer di blog tersebut dan tentunya memiliki kemungkinan besar untuk melihat atau membaca artikel pada populer post tersebut. Apalagi dengan widget popular post yang unik, walaupun visitor tidak penasaran pada isi artikelnya, mungkin penasaran sama animasi pada widget popular tersebut. " wah kok keren ya widgetnya, Klik dulua lah " kemungkinan seperti itu hehe ^^. Sebelum mencoba, alangkah baiknya anda lihat contoh hasilnya disini. Ok sekarang lanjut ke cara membuat Popular Post animasi 3D.

Cara membuat Popular Post animasi 3D di Blogspot

  • Login ke blog anda > Design > kemudian Add gadged baru pada elemen, jangan lupa pilih HTML / Javascript ( bebas dimana saja, karena hanya untuk penempatan Css dan koda javascript saja )
  • Copy kode atau script berikut dan paste pada gadget tadi kemudian save ( tidak perlu judul )
<style type="text/css">
.cube { width: 250px; height: 250px;}
a img { border: none; }
#linksCube img { width: 100%; height: 100%; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://script-bamz-us.googlecode.com/files/jqueryimagecube.js"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
    $('.popular-posts ul').abupopularcube();
});
</script>
<script type="text/javascript" src="http://script-bamz-us.googlecode.com/files/popularcube.js"></script>
  • Sekarang masih pada halaman Design
  • Silahkan add Gadged baru lagi dan pilih gadget popular post ( penempatannya terserah anda, bisa pada sidebar kanan atau kiri dan bawah ) kemudian save dan lihat hasilnya.

Contoh penempatan script membuat Popular Post

Cara membuat widget Popular Post animasi 3D ini sebenarnya masih bisa diterjemahkan atau istilahnya di dirinci, tapi dari pada mumet edit HTML templatenya mending pake cara di atas lebih mudah dan tidak beresiko ^^. Oh iya jangan lupa sesuaikan lebar dan tinggi widget ini sesuai lebar sidebar dimana tempat anda akan memasang widget popular post tsb. Jika mau pasang widget popular post nya di pasang di tempat yang strategis yah, biar menarik perhatian para pengunjung. Sampai jumpa di artikel berikutnya dan semoga sukses mencoba cara membuat popular post animasi 3D.

2 Style Widget Facebook, Rss dan Twitter

2 Style Widget Facebook, Rss dan Twitter. Pasang widget facebook fanspage, Rss dan twitter keren di blog anda sekarang juga hehe. 2 style widget ini mungkin sudah cukup keren untuk melengkapi kecantikan atau mungkin ketampanan blog anda kwkwkw. Sialahkan pasang widget facebook, Rss dan Twitter ini.











Jangan lupa nanti setelah terpasang widgetnya, diganti user name
Posting Lama ►
 
Exit Di Like yah Sob!! Makasih