kepo yuk: Widget Blog

Showing posts with label Widget Blog. Show all posts

Showing posts with label Widget Blog. Show all posts

Saturday, May 19, 2018

Widget Blog May 19, 2018

Cara Membuat Widget Artikel Terbaru di Blog Versi II

Pada artikel sebelumnya sudah pernah kita tuliskan cara membuat widget artikel terbaru di blog tetapi mungkin sudah terlalu lama artikel tersebut jadi beberapa kode sudah tidak berfungsi lagi. Nah, pada kesempatan ini kami akan mencoba menuliskan kembali artikel tersebut.

Langsung saja kita masuk ke langkah cara membuat widget artikel terbaru pada blog :

1. Login akun blogger Anda.
2. Pilih menu tab Tata Letak, kemudian + Tambahkan Gadget.
3. Cari dan pilih widget HTML/JavaScript.
4. Copy paste kode dibawah ini pada halaman HTML/JavaScript.

<script type="text/javascript">
function showrecentposts(json){for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}posttitle=posttitle.link(posturl);if(standardstyling)document.write('<li>');document.write(posttitle)}if(standardstyling)document.write('</li>')}
</script>
<script type="text/javascript">var numposts = 9;var showpostdate = true;var showpostsummary = true;var numchars = 100;var standardstyling = true;</script><script type="text/javascript" src="http://id-pemula.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

Keterangan :
numpost = 9 : artikel yang akan ditampilkan pada widget.
http://id-pemula.blogspot.com : ganti dengan alamat URL blog Anda.
5. Kemudian Simpan.

Nah, kini sidebar blog Anda terpasang kembali widget artikel terbaru. Semoga berhasil dan bermanfaat!

Wednesday, May 2, 2018

Widget Blog May 02, 2018

Cara Memasang Fanspage Facebook di Widget Blog

Fanspage Facebook dapat dipasang dimana saja contohnya disamping blog dan melayang di halaman blog. Pada kesempatan ini kami akan menuliskan cara memasang atau membuat Fanspage Facebook pada widget blog.

Berikut langkah cara memasang fanspage facebook di widget blog :

1. Kunjungi website https://developers.facebook.com/docs/plugins/page-plugin
2. Kemudian isi data dan setting tampilan fanspage Anda, seperti lebar dan tinggi tampilan.

3. Kemudian kalau sudah klik Dapatkan Kode.

4. Copy paste kedua kode fanspage Facebook tersebut.

Selanjutnya adalah memasang fanspage Facebook pada blog. Ikuti langkah-langkahnya berikut ini :

1. Login akun blogger Anda.
2. Pilih menu tab Tata Letak, klik + Tambahkan Gadget pada kolom sidebar Anda.
3. Cari dan pilih widget HTML/JavaScript.
4. Copy paste kode fanspage Facebook tadi pada halaman HTML/JavaScript.
5. Kemudian Simpan.

Nah, Semoga bermanfaat!

Sunday, April 29, 2018

Widget Blog April 29, 2018

Cara Membuat Widget Blog Mengikuti Scroll Turun Ke Bawah

Widget pada blog dapat kita buat berjalan mengikuti scroll turun ke bawah, ini akan membuat blog Anda menjadi lebih variatif karena tidak ada kekosongan pada widget jika posting Anda cukup panjang dan widget yang Anda pasang sedikit. Kami sarankan untuk widget yang Anda ingin buat mengikuti scroll turun ke bawah sebaiknya widget diletakkan paling akhir/bawah karena akan menutup widget yang lain jika di scroll ke bawah.

Berikut langkah cara membuat widget blog mengikuti scroll turun ke bawah :

1. Login akun blogger Anda.
2. Pilih menu tab Tema > Edit HTML > letakkan kursor pada area kode HTML.
3. Cari kode (gunakan Ctrl + F), cari kode ]]></b:skin>
4. Kemudian letakkan kode berikut tepat diatas kode ]]></b:skin>

.sticky {
position:fixed;
top:10px;/* jarak dari atas*/
z-index: 100;
}

5. Berikutnya cari kode </body> kemudian letakkan kode berikut diatas kode </body>

<script type='text/javascript'>
$(document).ready(function() {
var stickyWidgetTop = $('#ID_Widget').offset().top;
var stickyWidget = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyWidgetTop) {
$('#ID_Widget ').addClass('sticky');
} else {
$('#ID_Widget ').removeClass('sticky');
}
};
stickyWidget();
$(window).scroll(function() {
stickyWidget();
});
});
</script>

Keterangan :
Ganti kode ID_Widget dengan ID Widget yang akan kalian gunakan.

6. Kalau sudah klik Simpan template.

Semoga bermanfaat!

Thursday, April 19, 2018

Widget Blog April 19, 2018

Cara Mencari dan Menemukan ID Widget Blog

Jika Anda ingin memodifikasi widget blog biasanya Anda akan membutuhkan ID widget, bagaimana menemukan ID widget pada blog? Ada beberapa cara untuk menemukan ID widget blog.

Berikut langkah cara mencari dan menemukan ID widget Blog Anda :

Cara yang Pertama :

1. Login akun blogger Anda.
2. Pilih menu tab Tata Letak, kemudian arahkan kursor Anda pada Edit Gadget.

3. Akan muncul URL ID Widget pada halaman bawah blogger Anda.

Cara yang Kedua :

1. Pilih menu tab Tema, kemudian klik Edit HTML.

2. Letakkan kursor Anda pada area kode HTML.

3. Tekan Ctrl + F, kemudian ketikkan nama atau kata kunci widget yang Anda cari.

Nah, sekian cara mencari dan menemukan ID widget blog. Semoga bermanfaat!

Saturday, April 14, 2018

Widget Blog April 14, 2018

Cara Membuat Text Bergerak pada Widget Blog

Tulisan bergerak pada blog dapat memperindah tampilan tulisan widget blog Anda, selain itu dapat juga mengalihkan pengguna blogger untuk focus dan mengarahkan pandangannya ke tulisan bergerak tersebut.

Berikut cara membuat tulisan atau teks bergerak pada widget blog Anda.

1. Login akun blogger Anda.
2. Pilih menu tab Tata Letak, kemudian Tambahkan Gadget.
3. Kemudian pilih menu HTML/JavaScript.
4. Copy paste kode berikut, ada beberapa kode silahkan pilih kode sesuai keinginan Anda.

<marquee behavior='alternate' align='center' direction='right' height='50px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Tulisan Bergerak Bolak Balik</marquee>

Tampilan :
Tulisan Bergerak Bolak Balik

<marquee behavior='alternate' align='center' direction='up' height='50px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Tulisan Bergerak Bolak Balik</marquee>

Tampilan :
Tulisan Bergerak Bolak Balik

<marquee behavior='scroll' align='center' direction='left' height='50px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Tulisan Bergerak Berulang - Ulang</marquee>

Tampilan :
Tulisan Bergerak Berulang - Ulang

<marquee behavior='scroll' align='center' direction='up' height='50px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Tulisan Bergerak Dari Bawah Ke Atas</marquee>

Tampilan :
Tulisan Bergerak Dari Bawah Ke Atas
5. Klik Simpan

Keterangan pada tulisan dapat Anda ubah sesuai keinginan Anda. Semoga bermanfaat!

Saturday, March 31, 2018

Widget Blog March 31, 2018

Cara Menambahkan Tombol Chat WhatsApp pada Blog

Tombol chat WhatsApp mungkin sangat dibutuhkan pada blog bisnis Anda untuk memudahkan pengunjung menghubungi Admin lewat WhatsApp.

Jika Anda ingin memasang tombol chat WhatsApp pada blog, berikut langkah caranya :

1. Login akun blogger Anda.
2. Pilih menu tab Tata Letak, klik Tambahkan Gadget pada kolom sidebar.

3. Kemudian pilih HTML/JavaScript.

4. Copy paste kode berikut pada kolom HTML/JavaScript.

<center><a href="https://api.whatsapp.com/send?phone=6285735171756&text=Halo%20Admin%20Kita%20Mau%20Nanyak%20Nih"><img border="0" data-original-height="147" data-original-width="800" height="36" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrStyFfl8HwxbPgjzcJ3W5YPjRxFJaSZO9OwRH1rEA6s901COV1SmF-O1hkne7SHKJYynhRY0nIewQPoGHGl0w9h1VEiimTeKuVueHN2INNO-yOBfIys__cbiu3u937qR9peqi-zDJbGSw/s1600/chat-via-WA-idpemula.png " width="200" /></a></center>

5. Kemudian Simpan.

Nah, sekian cara menambahkan tombol chat WhatsApp pada blog. Semoga bermanfaat!

Saturday, March 3, 2018

Widget Blog March 03, 2018

Cara Sederhana Menambahkan Widget Profile pada Blogger

Profile blogger merupakan penjelasan singkat tentang identitas pemilik blogger, biasanya profile blogger akan dipasang oleh pemilik blog di sidebar maupun dibawah posting.

Berikut langkah cara menambahkan widget profile di sidebar blogger :

1. Login akun blogger Anda.
2. Pilih menu tab Tata Letak, cari menu Sidebar kemudian klik + Tambahkan Gadget.

3. Akan muncul halamanTambahkan Gadget, klik menu Profile.

4. Ubah Judul sidebar sesuai keinginan Anda.

5. Kemudian klik Simpan.

Jika Anda menginginkan profile blogger Anda muncul di bawah posting, berikut ikuti langkah cara menampilkan Profile blogger dibawah posting :

1. Masih di menu tab Tata Letak, cari menu Blog Posts kemudian klik Edit.

2. Akan muncul halaman Posting Blog, centang Tampilkan Profile Pengarang Di Bawah Pos.

3. Kemudian klik Simpan.

Nah, itu tadi cara menambahkan widget profile pada blogger. Semoga bermanfaat!

Wednesday, January 17, 2018

Widget Blog January 17, 2018

Cara Memasang Widget Followers Blogger

Banyak sedikitnya followers atau pengikut blog biasanya mencerminkan reputasi sebuah blog, semakin banyak followers blog terbukti bahwa blog tersebut mempunyai reputasi yang cukup baik dimata pengunjung. Blogger telah menyediakan fitur followers agar pengunjung dapat mengikuti blog favorit yang mereka sukai.

Berikut cara memasang atau menampilkan widget followers blogger :

1. Login akun blogger Anda.
2. Pilih menu tab Tata Letak, kemudian klik Tambahkan Gadget.

3. Cari gadget Pengikut, kemudian pilih gadget Pengikut.

4. Centang Gunakan gaya tema default, agar desain widget blog Anda serasi dengan template blog yang Anda gunakan.

5. Kemudian Simpan.

Nah, Anda bisa mengecek perubahan widget blog Anda. Semoga bermanfaat!

Sunday, January 24, 2016

Widget Blog January 24, 2016

Cara Menampilkan Foto Instagram di Widget Blog

Saat sekarang ini hampir semua orang memiliki aplikasi Instagram, dengan akun Instagram kita dapat berbagi foto kepada pengguna lainnya. Kita juga dapat berbagi foto Instagram pada pengguna blog, dengan memasang widget galeri foto Instagram pada blog.

Dengan aplikasi /situs web SnapWidget kita dapat memasang foto Instagram kita pada widget blog, berikut langkah cara memasang foto Instagram pada widget blog :

1. Kunjungi http://snapwidget.com/#getstarted
2. Kemudian atur tampilan dengan mengisi form yang disediakan.

3. Klik 'Preview' untuk melihat tampilannya.

4. Klik 'Get Widget' untuk mengambil kode widget Instagram.

5. Selanjutnya copy paste pada widget 'HTML/JavaScript' blog Anda.

Nah, sekarang Anda tidak hanya bisa berbagi foto dengan pengguna akun Instagram saja tapi pengguna blog juga.

Monday, August 3, 2015

Widget Blog August 03, 2015

Tips Menggunakan Widget pada Sidebar Blog

Widget pada sidebar blog merupakan salah satu komponen /elemen penting dalam sebuah blog, pemilihan, penambahan dan pengaturan widget yang tepat pada blog akan mempercantik tampilan blog itu sendiri.

Berikut kami akan merangkum beberapa tips penggunaan widget pada sidebar blog :

1. Kurangi penggunaan widget yang berlebihan dan tidak diperlukan, agar tampilan blog lebih rapi dan terkesan professional.

2. Hindari widget /script yang mempunyai loading berat karena pengunjung lebih suka blog yang mempunyai loading cepat.

3. Mengatur tata letak widget yang terpasang ataupun Adsense pada sidebar, pengaturan tata letak yang baik akan memudahkan pengunjung untuk mencari apa yang mereka butuhkan.

4. Cari referensi blog yang dimiliki oleh blogger professional, pelajari tata letak widget blog mereka.

Sekian tips menggunakan widget yang bisa kami bagikan, pada intinya pengunjung menginginkan blog yang mempunyai loading cepat serta setiap komponen /widget yang terpasang tidak mengganggu pengunjung blog Anda.

Saturday, July 4, 2015

Widget Blog July 04, 2015

Cara Memasang Widget Social Media pada Blog

Memasang Social Media Facebook, Twitter, Google Plus, Instagram, Path, dll pada blog sangat berguna bagi kita, karena pengunjung blog dapat terhubung dan beriteraksi langsung dengan kita melalui social media tersebut.

Berikut langkah cara memasang widget social media pada blog :

1. Login akun blogger Anda.
2. Pilih menu tab Tata Letak > Tambahkan Gadget > HTML/JavaScript.
3. Copy paste kode berikut pada gadget HTML/JavaScript.

<a href="https://www.facebook.com/pages/Info-Blog-Indonesia/121738271193251"><img alt="Facebook" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLGEE4GGsxdbGG7Qpv5vnj-4mTFZnnpoUZfJ3EIkGU1YSwW9_ucDqNckcI-9N7S9B76S3gaSOwU_tOqzDbD3pLk2P_h6TBRQzhjmkGmBOXjfU0o2P11NNyGgboSr29lPUiA1P07YNtvpjz/s1600/facebook.png" /></a> 

<a href="https://twitter.com/Infoblog_ID"><img alt="Twitter" border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjY3YHzbXcn2Kjs-NmA8PwZZ6zJGFFbIAwIPAa-Z7arl-H-hG9lpCkzjiIog_GOuqdVSFIs1kEOv-0ipLQ9fCG1K_I9uugQ-wfM6aPSDL-g175XeBSG1wMnLLBSTwHkYit-S2Nzn3xVZ-bR/s1600/twitter.png" /></a> 

<a href="https://plus.google.com/104034926909164974312"><img alt="Google+" border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPJJZdM1UNQXSbkFmCHH3b6QIdHGZZKokmbLvQEewGLPkTKtbuNNnoVOaDgCIwXK8rtsZvYDl3QlASRK7I2CV2sXIuPsfxzSdN3PL8oFGdO1_pzsjS7ar_QYPDW5kGXtXRbkITC1CAXdhY/s1600/google_plus.png" /></a>

<a href="https://instagram.com/tonykust"><img alt="Instagram" border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSy7SSU7yDfgwS12wdsXbhcC3iBeSEf8ao07RK3nXO3D9cEoFjIKMwWpwQWcyvfxQJO98Yt6Jo4Ei_AnADr9TuOjeY9Qq3oOLwWJElTGgdvMrG4mXteuycMNToefc8eBZXvffISPAdVcp6/s1600/instagram.png" /></a>

<a href="https://path.com"><img alt="Path" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimielCuh7JFiY18GTGZK2JOtwKOGoeLzVLbVQeoUo2cn1B_jg3pzQJwM-NOEBcrZqAxdg-4MsKzaSuMLwc0k1FSj5U2FqkNctbg8CBixy6ed8WEuo67Z_Gi3lXfIQgi4EmRWe3tZX1xifB/s1600/path.png" /></a>

<a href="mailto:tonikustiawan@yahoo.com"><img alt="Yahoo" border="0" src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfrcrJ5YKmPYQwSxv2F7sEoLSp4hnKWNSj7uBcl_3ptbjCs32my773gOmvcFg4X9ZDWuY20U38z8JZU4raaApbZH9R1-UriZPop2HV1VCH9Ma41LEdKYFUsiPThJbHS3AazErJ1Wv2tPu5/s1600/yahoo.png" /></a>

<a href='https://www.youtube.com/channel/UCCTHWkFvBxfbAhtGtcnbj1w' class='tooltip' ><img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7oR9kw1_G1gYH76d9LumOdLkPp9gD12XJ_B8rOOeR9HxMpuaFE4ZnjBmOamDobzPzZcCgCj61OexC8FavvkQ2TUi-qn0Dr1wmHJTHTAsxn03PigtVHlq4r0YbefdSM2SgK4ulMfWSqE3N/s1600/youtube.png"/></a>

Keterangan :
Kode warna merah adalah kode akun Anda, ganti sesuai dengan link akun Anda.
Hapus beberapa social media diatas jika tidak Anda perlukan.
4. Kemudian Simpan.

Nah, semoga cara /tutorial tersebut dapat membantu mengubungkan pengunjung blog dengan social media yang Anda miliki.

Sunday, January 5, 2014

Widget Blog January 05, 2014

Cara Memasang Lagu Baru di Blog

Bagaimanakah cara memasang lagu-lagu terbaru di blog ? Pada kesempatan ini kami akan memberikan informasi tentang cara memasang lagu-lagu terbaru di blog. Dengan memasang lagu-lagu favorit terbaru akan menambah kesan menarik pada blog Anda.

Berikut langkah cara memasang lagu baru di blog :

1. Kunjungi situs http://www.4shared.com/
2. Cari kode lagu favorit Anda pada kotak pencarian.

3. Kemudian klik salah satu lagu hasil dari pencarian tersebut.

4. Copy kode URL lagu tersebut.

5. Simpan dulu kode tersebut pada notepad atau word.

Langkah selanjutnya adalah memasang lagu tersebut pada blog Anda, berikut langkahnya :

1. Login akun blogger Anda.
2. Pilih menu tab Tata Letak > Tambahkan Gadget > HTML/JavaScript.
3. Copy paste kode berikut pada gadget HTML/JavaScript.

<div xmlns="http://www.w3.org/1999/xhtml">
<embed height="20" width="300" flashvars="file=http://www.4shared.com/img/1GoAgl2W/dlink__2Fdownload_2F1GoAgl2W/preview.mp3&volume=100&autostart=true" wmode="opaque" allowfullscreen="false" allowscriptaccess="always" quality="high" name="ply" id="ply" style="" src="http://www.4shared.com/flash/player.swf?ver=9051" type="application/x-shockwave-flash"/>
</embed></div>

Keterangan :
Ganti kode yang berwarna merah diatas dengan kode yang Anda copy dari 4shared tadi.
Sesuaikan panjang tampilan dengan mengganti width="300"
4. Kemudian Simpan.

Nah, sekarang Anda bisa memilih lagu-lagu terbaru sesuai dengan keinginan. Dilarang mengcopy script diatas dengan tujuan komersil dan pembajakan! Tanpa seizin dari pemilik, hargai karya musik anak negeri.

Friday, November 29, 2013

Widget Blog November 29, 2013

Membuat Animasi Sinterklas di Blog

Sebentar lagi memasuki bulan desember, bagi Anda yang beragama Kristen akan merayakan hari natal. Perayaan hari natal identik dengan tokoh sinterklas, nah pada kesempatan ini kami akan memberikan informasi cara membuat animasi sinterklas di blog.

Berikut langkah cara membuat animasi sinterklas di blog :

1. Login akun blogger Anda.
2. Pilih menu tab Template > Edit HTML > letakkan kursor pada area kode HTML.
3. Cari kode </head> (tekan tombol Ctrl + F untuk melakukan pencarian).
4. Letakkan kode berikut diatas kode </head>

<script type="text/javascript" src="http://id-pemula-javascript.googlecode.com/files/santa.js" />

5. Kemudian cari kode </body>, letakkan kode berikut diatas </body>

<marquee scrolldelay='100' style='position:fixed; top:0; right:0; z-index:9999; width:100%;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUpB-tLTDTDBxgfeUkOMJCmTP-bQgNMKfr_DNjpWRRSuBicXNsL0gjlzfUocZJNXHMmGJdOYyKfhWA1T_XYDh5Ua7xE2RbfHXBI1YpA_6b3D1eDax8QV11PjsnKhvRj1jOi90_O01QJkdF/s1600/Sinterklas.gif' /></marquee>

6. Simpan template.

Semoga dapat membantu!

Friday, November 8, 2013

Widget Blog November 08, 2013

5 Web Penyedia Widget Counter Pengunjung Blog

Widget counter pengunjung adalah widget yang dipakai untuk menampilkan statistik jumlah kunjungan pada blog. Ada banyak website penyedia layanan widget counter pengunjung yang dapat digunakan secara gratis. Namun blogger sendiri sudah menyediakan fitur counter pengunjung pada gadget mereka, tapi masih ada beberapa orang yang menganggap widget dari blogger tersebut kuarang akurat.

Berikut beberapa website yang menyediakan layanan gratis widget counter pengunjung yang bisa Anda gunakan pada blog :

1. www.hit-counts.com
2. freebloghitcounter.com
3. www.free-counters.co.uk
4. www.histats.com
5. www.easycounter.com

Pilih salah satu website penyedia layanan counter pengunjung diatas, kemudian ikuti langkah-langkah pendaftrannya, selanjutnya Anda akan diberi kodenya dan pasang pada Gadget HTML/JavaScript. Dari beberapa pilihan diatas counter pengunjung yang paling banyak digunakan blogger adalah histats. Semoga dapat membantu!

Wednesday, November 6, 2013

Widget Blog November 06, 2013

Membuat Tombol Fan Page dan Follow Twitter Melayang

Beberapa cara dapat dilakukan agar pengunjung blog menyukai atau bergabung pada Fan Page dan Twitter Anda. Salah satunya adalah membuat Fan Page tersembunyi disamping blog, tapi pada kesempatan ini kami akan membahas cara yang lain yaitu cara membuat tombol Fan Page dan follow Twitter melayang di Blog.

Berikut langkah cara membuat tombol fan page dan twitter melayang :

1. Login akun blogger Anda.
2. Pilih menu tab Tata Letak > Tambahkan Gadget > HTML/JavaScript.
3. Copy paste kode berikut pada gadget HTML/JavaScript.

<style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
box-shadow:0px 1px 2px rgba(0,0,0,0.4);
-webkit-border-radius:22px;
-moz-border-radius:22px;
border-radius:22px;
cursor:pointer;
}
#twitterx {
background: #EEF9FD;
padding: 10px;
text-align:center;
border: 1px solid #C7DBE2;
border-top: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>

<center><a class="murub">Silahkan Bergabung Bersama Komunitas Kami</a></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/Infoblog_ID/121738271193251?ref=hl&width=292&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false&appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</center>

<br/>
<div class="twitter">
 <iframe title="" style="width: 250px; height: 20px;" class="twitterx-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351& align=&button=blue&id=twitter_tweet_button_0& lang=ID&link_color=&screen_name=Infoblog_ID&show_count=& show_screen_name=&text_color=" frameborder="0" scrolling="no"></iframe> </div>
<a class='close' href='#'>×</a>
</div>

Keterangan :
Tulisan yang berwarna hijau adalah judul dari widget Fan Page.
Tulisan yang berwarna merah adalah URL Fan Page blog Anda.
Tulisan yang biru adalah username dari akun Twitter Anda.
4. Kemudian Simpan.

Jika Anda hanya ingin menampilkan Fan Page saja, maka hapus kode berikut :

<div class="twitter">  <iframe title="" style="width: 250px; height: 20px;" class="twitterx-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351& align=&button=blue&id=twitter_tweet_button_0& lang=ID&link_color=&screen_name=Infoblog_ID&show_count=& show_screen_name=&text_color=" frameborder="0" scrolling="no"></iframe> </div>

Nah, kini Anda mempunyai Fan Page dan follow Twitter melayang pada blog. Semoga dapat membantu!

Tuesday, November 5, 2013

Widget Blog November 05, 2013

Membuat Iklan Text pada Widget Blog

Menyediakan ruang iklan teks pada blog merupakan trik menambah penghasilan dari blog. Bagaimana cara membuat iklan text pada widget blog ? Pada kesempatan ini kami akan membahasnya.

Berikut langkah cara membuat iklan text pada widget blog :

1. Login akun blogger Anda.
2. Pilih menu tab Tata Letak > Tambahkan Gadget > HTML/JavaScript.
3. Copy paste kode berikut pada gadget HTML/JavaScript.

<style type="text/css">
#teks {
height: 300px;
width: 300px;
border: 1px solid #333;
}
#teks #teks1 {
height: auto;
width: auto;
margin-top: 10px;
text-decoration: underline;
padding-top: 0px;
padding-bottom: 4px;
font-size: 15px;
font-style: normal;
line-height: normal;
}
#teks #teks2 {
height: auto;
width: auto;
margin-top: 10px;
text-decoration: underline;
padding-top: 2px;
padding-bottom: 2px;
font-size: 15px;
font-style: normal;
line-height: normal;
}
#teks #teks3 {
height: auto;
width: auto;
margin-top: 10px;
text-decoration: underline;
padding-top: 2px;
padding-bottom: 2px;
font-size: 15px;
font-style: normal;
line-height: normal;
}
#teks #teks4 {
height: auto;
width: auto;
margin-top: 10px;
text-decoration: underline;
padding-top: 2px;
padding-bottom: 2px;
font-size: 15px;
font-style: normal;
line-height: normal;
}
#buka {
height: 260px;
width: auto;
margin-right: 6px;
margin-left: 6px;
font-size: 16px;
color: #06F;
padding-right: 2px;
padding-left: 2px;
}
#teks #ads-by {
height: auto;
width: auto;
margin-top: 5px;
color: #666;
font-size: 12px;
text-align: right;
margin-bottom: 5px;
padding-top: 2px;
padding-bottom: 4px;
margin-right: 6px;
margin-left: 6px;
font-style: normal;
line-height: normal;
text-decoration: none;
}
.isi-iklan {
color: #333;
text-decoration: none;
line-height: normal;
font-style: normal;
font-size: 13px;
}
</style>
<div id="teks">
<div id="buka">
<div id="teks1"><a href="http://id-pemula.blogspot.com/">Pasang Iklan Murah</a></div>
<div class="isi-iklan">Hanya dengan Rp40.000/bulan, Pasang Iklan Teks Anda Disini Sekarang juga!</div>
<div id="teks2"><a href="http://id-pemula.blogspot.com/">Pasang Iklan Murah</a></div>
<div class="isi-iklan">Hanya dengan Rp40.000/bulan, Pasang Iklan Teks Anda Disini Sekarang juga!</div>
<div id="teks3"><a href="http://id-pemula.blogspot.com/">Pasang Iklan Murah</a></div>
<div class="isi-iklan">Hanya dengan Rp40.000/bulan, Pasang Iklan Teks Anda Disini Sekarang juga!</div>
<div id="teks4"><a href="http://id-pemula.blogspot.com/">Pasang Iklan Murah</a></div>
<div class="isi-iklan">Hanya dengan Rp40.000/bulan, Pasang Iklan Teks Anda Disini Sekarang juga!</div>
</div>
<div id="ads-by"><a href="http://id-pemula.blogspot.com/">Ads by ID-Pemula Blog</a></div>
</div>

Keterangan :
Warna biru adalah kode warna border atau kotak iklan.
Warna merah adalah link URL.
Warna kuning adalah judul teks iklan.
Warna hijau adalah keterangan iklan.
Warna ungu adalah pemilik layanan iklan.
4. Kemudian Simpan.

Semoga dapat membantu!

Saturday, October 12, 2013

Widget Blog October 12, 2013

Membagi Widget Label Menjadi 2 atau 3 Kolom

Widget label merupakan widget yang digunakan untuk mengkelompokkan posting. Terkadang tampilan widget label pada blog hanya satu kolom, ini menyebabkan tampilan label memanjang kebawah jika label pada blog kita jumlahnya sangat banyak. Agar tampilan label tidak memanjang kebawah kita perlu membaginya menjadi dua kolom atau lebih.

Berikut langkah cara membagi widget label menjadi 2 atau 3 kolom :

1. Login akun blogger Anda.
2. Pilih menu tab Template > Edit HTML > letakkan kursor pada area kode HTML.
3. Cari kode ]]></b:skin> tekan tombol Ctrl + F untuk melakukan pencarian.
4. Letakkan kode berikut diatas kode ]]></b:skin>

#Label1 li { float:left; width:45%; }

5. Kode diatas untuk membuat label menjadi 2 kolom, sedangkan dibawah ini 3 kolom.

#Label1 li {float:left;width:33%;}
#Label2 li {float:left;width:33%;}

6. Simpan template.

Jika belum berhasil ubah ukuran width (lebar) sampai widget label berhasil menjadi beberapa kolom.

Tuesday, October 8, 2013

Widget Blog October 08, 2013

Membuat Artikel Terbaru disertai Tombol Home, Previous dan Next

Widget Artikel terbaru merupakan widget yang berisi postingan terbaru dari sebuah blog. Banyak widget artikel terbaru yang telah dimodifikasi agar menjadi lebih menarik, salah satunya adalah yang akan kita bahas ini nanti yaitu widget artikel terbaru disertai dengan tombol home, previous dan next.

Berikut langkah cara membuat artikel terbaru disertai tombol home, previous dan next :

1. Login akun blogger Anda.
2. Pilih menu tab Template > Edit HTML > letakkan kursor pada area kode HTML.
3. Cari kode ]]></b:skin> tekan tombol Ctrl + F untuk melakukan pencarian.
4. Letakkan kode berikut diatas kode ]]></b:skin>

#pemula-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#terbaru{margin:0px}
.pemula-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.pemula-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.pemula-elemen h6,.pemula-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.pemula-elemen:hover{background-color:#c3c3c3}
.pemula-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
#pemula-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#pemula-navigasifeed:hover{background-color:#c3c3c3}
#pemula-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#pemula-navigasifeed span{padding:5px 10px}
#pemula-navigasifeed .next{float:right}
#pemula-navigasifeed .previous{float:left}
#pemula-navigasifeed .home{text-align:center}
#pemula-navigasifeed a:hover,#pemula-navigasifeed span.noactived{color:transparant!important}

Keterangan:
Tulisan yang berwarna biru adalah ukuran lebar dan tinggi gambar/thumbnail.
5. Kemudian cari kode </head>, letakkan kode berikut diatas kode </head>

<script type='text/javascript'>
//<![CDATA[

var numfeed = 3;

var startfeed = 0;

var urlblog = "http://id-pemula.blogspot.com/";

var charac = 100;

var urlprevious, urlnext;

function pemulakolisfeed(johny,banget){
var showfeed = johny.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed = showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAOqjIEr-kkcA993pqTIxaPggT34ouZNLC_QQU3-acUqPpnCDH3kME-oMCEJD-NlMXYoe0if3mcvqgZ6OESCHZbaZGxFI4Whq_dza6gx0bAJYedZJdETehgo9LoTfk_7esouVsWKPrhbc/s1600/no+image.jpg";
}
showblogfeed += "<div class='pemula-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + pemulakolisfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("terbaru").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>◄ Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>◄ Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next ►</a>";
} else {
showblogfeed += "<span class='noactived next'>Next ►</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("pemula-navigasifeed").innerHTML = showblogfeed;
}

function navigasifeed(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("terbaru").innerHTML = "<div id='pemula-loading'></div>";
document.getElementById("pemula-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var terbaru = document.createElement('script');
terbaru.setAttribute('type', 'text/javascript');
terbaru.setAttribute('src', archievefeed);
terbaru.setAttribute('id', 'pemulaLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("pemulaLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>

Keterangan:
var numfeed=3; yaitu jumlah artikel yang akan ditampilkan.
var charac=100; yaitu jumlah karakter atau huruf pada artikel yang ditampilkan.
varurlblog=”URL BLOG ANDA” ganti dengan URL blog Anda.
6. Simpan template.

Setelah selesai menambahkan kode diatas pada template blog Anda, berikutnya memasang pada widget blog Anda :
1. Pilih menu tab Tata Letak > Tambahkan Gadget > HTML/JavaScript.
2. Letakkan kode berikut pada HTML/JavaScript.

<div id="terbaru"></div>
<div id="pemula-navigasifeed"></div>

3. Terakhir Simpan.

Nah, sekian cara membuat artikel terbaru disertai dengan tombol home, previous dan next. Semoga dapat membantu!

Friday, September 27, 2013

Widget Blog September 27, 2013

Cara Memasang Tombol Berlangganan YouTube di Blog

Jika Anda seorang blogger yang menggunakan YouTube sebagai situs hosting untuk semua konten blog Anda, pasti Anda memiliki keinginan pengunjung blog Anda untuk mengikuti dan berlangganan ke akun YouTube Anda. Cara terbaik untuk melakukan ini adalah dengan memasang tombol berlangganan YouTube pada blog Anda, ini bertujuan untuk memudahkan pengunjung blog Anda mengikuti dan berlanggan video YouTube Anda.

Jadi bagaimana cara memasang tombol berlangganan YouTube di blog? Cukup ikuti langkah-langkah berikut ini :

1. Kunjungi Google Developers Website, login dengan akun Gmail.

2. Klik icon YouTube, kemudian pada menu tab klik YouTube Subscribe Button.

3. Masukkan ID YouTube Anda, pilih Layout dan Theme yang Anda inginkan.

4. Copy kode HTML yang telah disediakan.
5. Kemudian masuk ke halaman blogger, pilih menu tab Tata Letak, klik Tambahkan Gadget.
6. Pilih HTML/JavaScript dari daftar gadget/widget.
7. Paste kode YouTube Anda tadi pada HTML/JavaScript.
8. Klik Simpan.

Nah, Preview blog Anda dan lihat hasilnya! Semoga bermanfaat informasi Cara Memasang Tombol Berlangganan YouTube di Blog.

Wednesday, September 25, 2013

Widget Blog September 25, 2013

Cara Membuat Google+ (Plus) Fan Page untuk Blog

Halaman Google+ (Plus) merupakan sebuah solusi untuk mempromosikan produk dan berbagai berita, foto, dan acara, untuk pelanggan Anda dan Fans. Google+ (Plus) Fans Pages sangat mirip dengan Facebook Fans Pages. Pada kesempatan ini kami akan membahas cara membuat Google+ (Plus) Fan Page untuk Blog, dengan memiliki Google+ (Plus) Fan Page Anda dapat membangun komunitas dan berbagi informasi lewat Google+ (Plus) Fan Page.

Berikut langkah cara membuat Google+ (Plus) Fan Page untuk Blog Anda :

1. Kunjungi situs http://plus.google.com/pages/create, Klik Product or Brand.

2. Pilih kategori sebagai Website.

3. Masukkan Judul dan URL blog Anda, klik CONTINUE.

4. Google+ (Plus) Page telah selesai dibuat, klik Get started untuk memulai.

Nah, selanjutnya menambahkan Google+ (Plus) Page pada blog :

1. Setelah selesai membuat halaman, kunjungi https://developers.google.com/, klik Google+.

2. Klik Websites, pilih model tampilan misal: klik Badge.

3. Tampilan badge akan terlihat disamping pengaturan, atur sesuai keinginan Anda.
4. Kode tampilan bisa Anda copy dibawahnya.

Anda bisa memasang Google+ (Plus) Page diatas pada blog di widget HTML/JavaScript atau pada posting blog Anda.

Designed with by Way2Themes | Free Blogger Templates