Jumat, 30 Maret 2012

Cara Membuat Menu Melayang di sudut blog

Menu Melayang Di Sudut Blog adalah widget ‘melayang’ yang bisa diisi dengan menu berisi link-link sesuai keinginan. Di dalamnya sudah termasuk navigasi scroll to top/bottom of page (scroll ke bagian paling atas/bawah halaman web) ber-engine jQuery, dan juga tombol share Twitter dan Facebook (bila diinginkan).

Code Menu Melayang :

Letakkan kade berikut di atas kode </body>

<div id='zfpm_div' style='display:none;'>
<div id='zfpm_upperBox'>

</div>
<ul id='zfpm_ul'>

<li class='dir'><a href='/'>Your menu 1 </a>
<ul>
<li class='dir'><a href='/'>Your submenu 1.1</a>
<ul>
<li><a href='/'>Your sub-submenu 1.1.1</a></li>
<li><a href='/'>Your sub-submenu 1.1.2</a></li>
</ul>
</li>
<li><a href='/'>Your submenu 1.2</a></li>
<li><a href='/'>Your submenu 1.3</a></li>
</ul>
</li>
<li class='dir'><a href='/'>Your submenu 2</a>
<ul>
<li class='dir'><a href='/'>Your submenu 2.1</a>
<ul>
<li><a href='/'>Your sub-submenu 2.1.1</a></li>
<li><a href='/'>Your sub-submenu 2.1.2</a></li>
</ul>
</li>
<li><a href='/'>Your submenu 2.2</a></li>
<li><a href='/'>Your submenu 2.3</a></li>
</ul>
</li>

</ul></div>
<script type='text/javascript'>
var zfpm_colorTheme = 'dark'
var zfpm_shareBox = 'no';
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://sagita-com.googlecode.com/files/Menu-SGT.js' type='text/javascript'/>

Ket :
* Ganti tulisan YOUR MENU, YOUR SUBMENU 2.1, dll dengan link-link yang ada pada blog Anda, contoh :

<ul id='zfpm_ul'>

<li class='dir'><a href="http://galeryzone.blogspot.com/">Homepage</a>
<ul>
<li><a href='http://galeryzone.blogspot.com'>Daftar Isi</a></li>
</ul>
</li>

Setting/Variable

Anda dapat mengubah tema warna dan berbagi pengaturan tombol visibilitas.

var zfpm_colorTheme = 'light';
Mengatur warna tema untuk widget menu.
Valid input: 'light' or 'dark'

var zfpm_shareBox = 'no'
Show the Twitter ‘Retweet’, Facebook ‘Share’, and Facebook ‘Like’ buttons (using LinksAlpha’s widget) or not.
Valid input: 'yes' or 'no'

Sumber : www.tutorial-sagita.tk

Cara membuat widget animasi I am Indonesia

Postingan kali ini adalah bagaimana cara buat nambah animasi " I am Indonesian Blogger" di PKA (Pojok Kanan Atas). Untuk melihat hasilnya agan bisa lihat di 1000-Kisah , saya langsung aplikasikan biar pengunjung percaya bahwa Script yang saya kasih 100% Working. Pengen tau caranya ?, langsung aja dech ikutin petunjuk di bawah ini :

Langkah:

1. Buka Blogger dan Sign In menggunakan account anda

2. Pilih tata letak

3. Add Widget

4. Text/HTML

5. Masukan Script di bawah ini

6. Klik Simpan
Selesai, coba lihat blog anda sekarang..

Pilihan Widget Lainnya :

Semoga Bermanfaat...

Cara Membuat Widget Recent Post dengan Thumbnail

Cara Membuat Widget Recent Post dengan Thumbnail :

1. Login ke dashboard blogger anda.

2. Pilih Rancangan > Elemen Halaman > Add Gadget (HTML/JavaScript).

3. Copy kode CSS dan JavaScript dibawah ini dan paste pada gadget yang baru dibuat tadi.

<right><style> img.recent_thumb {padding-right:5px;padding-left:padding-bottom:0px;0px;width:55px;height:40px;border:0;float:left;margin:0 0 5px 0px;} .recent_posts_with_thumbs {float: left;width: 100%;min-height: 50px;margin: 0px 0px 5px 0px;padding: 0;font-size:15px;font-color:black;font-family:calibri;} ul.recent_posts_with_thumbs li {padding-bottom:5px;padding-top:5px;padding-left:0px;padding-right:20px;min-height:50px;list-style:normal;} .recent_posts_with_thumbs a {text-decoration:none;} .recent_posts_with_thumbs normal {font-size:13px;} </style> <script style="text/javascript" src="http://bloggerplugins.org/scripts/recentpostswiththumbs.js"></script> <script style="text/javascript"> var numposts = 8; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = false; var numchars = 75; </script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"></script></right>

4. Simpan dan lihat hasilnya.

5. Silahkan memodifikasi sendiri script ini untuk merubah ukuran gambar/thumbnail, jenis dan warna huruf serta jumlah posting yang ingin ditampilkan pada widget.

Mudah saja bukan cara membuat widget recent post dengan thumbnail ini ? Kalo masih kesulitan juga silahkan tulis dikomentar OK ! Selamat mencoba dan salam blogger.

Senin, 26 Maret 2012

Cara pasang recent post

Cara Pasang Recent Post by Label With Thumbnail di Blogger
Seperti biasa langkah yang harus di lakukan adalah :

Login ke Dashboard Blogger
Klik Rancangan/Design/Tata Letak

Jika bingung gimana caranya silakan baca Panduan Cara Menghias Blog Blogger.

Jika teman sudah berada di halaman Rancangan silakan pilih widget HTML/JavaScript kemudian masukkan script berikut:

<style>

/*** Labels Thumbs ***/
img.label_thumb{
float:left;
border:1px solid #ccc;
width:85px;
height:70px;
margin-right:10px;
margin-bottom:10px;
}

</style>

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<div>');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=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}
var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}
else thumburl='';}
document.write('<a href="'+posturl+'" title="'+posttitle+'"><img class="label_thumb" src="'+thumburl+'"/></a>');
if(i!=(numposts-1))
document.write('');}
document.write('</div>');}
//]]>
</script>

<script type='text/javascript'>var numposts = 6;</script>
<script type="text/javascript" src="/feeds/posts/default/-/NamaLabel?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>

Keterangan:

numposts = 6 (Angka 6 adalah jumlah recent post yang akan di tampilakn, silakan ganti sesuai keinginan teman)
Nama Label = Isi dengan Nama Label yang artikelnya ingin di tampilkan ( contoh blogger%20template) biasanya label yang pakai spasi di pisahkan dengan %20.

Cara menghilangkan Link di judul postingan

Berikut Cara Menghilangkan Link Di Judul Postingan

Login ke blogger
klik Rancangan/Design
Klik Edit HTML
Kemudian beri centang pada Expand Widget Template

Temukan kode </h2> atau </h1> pada template anda sehingga anda bisa menemukan kode seperti ini

<b:if cond='data:post.title'>
<h2 class='post-title entry-title'><b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>

Atau seperti ini

<b:if cond='data:post.title'>
<h1 class='post-title entry-title'><b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h1>

Jika teman sudah menemukan kode tersebut silakan ganti semua kode tersebut dengan kode ini (jika menggunakan h2)

<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.link'>
<data:post.title/>
<b:else/>
<b:if cond='data:post.url'>
<data:post.title/>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
<b:else/>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</b:if>
</h2>

Atau kode ini jika template anda menggunakan h1

<b:if cond='data:post.title'>
<h1 class='post-title entry-title'>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:post.link'>
<data:post.title/>
<b:else/>
<b:if cond='data:post.url'>
<data:post.title/>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
<b:else/>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</b:if>
</h1>

Jika kodenya sudah di ganti silakan klik save atau simpan pengaturan template anda.

Selesai

Cara pasang buku tamu di blogger tersembunyi

Kali ini saya akan menuliskan bagaimana cara pasang buku tamu di blogger, namun pada artikel ini saya akan menuliskan tutorial cara pasang buku tamu Tersembunyi / Hidden.

Buku tamu merupakan salah satu hal yang tidak wajib ada di blog kita, namun buku tamu bisa mempercantik blog kita. Selain itu pengunjung blog kita bisa dengan mudah menyapa kita sebagai admin (atau pengunjung lainnya), walau cuma sebatas kalimat (mampir gan, malam, kunjungi blog saya juga ya, dsb...)

Buku tamu tersembunyi juga baru saya pasang di sidebar blog ini. Setelah niat untuk pasang buku tamu tersembunyi di blog ini akhirnya timbullah niat untuk menuliskan bagaimana cara memasang buku tamu tersembunyi di sidebar blogger.

Cara Pasang Buku Tamu Tersembunyi Di Blogger

Ok ga perlu panjang lebar, langsung saja ke topik utama kita.

Panduan Cara Pasang Buku Tamu Tersembunyi Di Sidebar Blogger

Pertama-tama silakan buat akun di www.cbox.ws atau di situs penyedia script buku tamu gratis yang teman suka.

Kemudian ambil script yang sudah di sediakan (kopi kodenya).

Sekarang mari kita ke blogger. Jika belum login silakan login dulu. Jika sudah login silakan klik Rancangan/Design/Tata Letak dan Klik Tambah Gadget/Add Gadget. Jika masih bingung bagaimana cara pasang di blogger silakan baca : Panduan Cara Menghias Blog Blogger

Pilih html/javascript dan silakan paste kode di bawah ini

<style type="text/css">
#gb{
position:fixed;
top:50px;
z-index:+1000;
}
* html #gb{position:relative;}
.gbtab{
height:100px;
width:30px;
float:left;
cursor:pointer;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjs2KEfqCa7uvDWIp0r4pSHJOxhEqNmQCrgP-RmrP5Ge_xeC2PpMUx_wCJmJetfZFU0JCkwwzYt45YXIAsZjGBaynCZPWz4SF9vx96Xga0AffdgbK5aEil4f6WCaum_SMsJKlNySIH_G-w/s1600/bukutamu.png') no-repeat;
}
.gbcontent{
float:left;
border:2px solid #A5BD51;
background:#F5F5F5;
padding:10px;
}
</style>
<script type="text/javascript">
function showHideGB(){
var gb = document.getElementById("gb");
var w = gb.offsetWidth;
gb.opened ? moveGB(0, 30-w) : moveGB(20-w, 0);
gb.opened = !gb.opened;
}
function moveGB(x0, xf){
var gb = document.getElementById("gb");
var dx = Math.abs(x0-xf) > 10 ? 5 : 1;
var dir = xf>x0 ? 1 : -1;
var x = x0 + dx * dir;
gb.style.right = x.toString() + "px";
if(x0!=xf){setTimeout("moveGB("+x+", "+xf+")", 10);}
}
</script>
<div id="gb">
<div class="gbtab" onclick="showHideGB()"> </div>
<div class="gbcontent">
Silakan Paste Kode Buku Tamu yang sudah di kopi tadi Di Sini

<div style="text-align:right">
<a href="http://blog.ahmadrifai.net/2011/06/pasang-buku-tamu-tersembunyi-di-blogger.html">[Pasang Ini Juga]</a>><a href="javascript:showHideGB()">
[Tutup]
</a>
</div>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (30-gb.offsetWidth).toString() + "px";
</script></div></div>

Bagi teman-teman yang faham bahasa css atau html silahkan di atur sendiri tampilannya sesuai selera, jika sudah selesai silakan di Simpan dan Selesai

Jumat, 23 Maret 2012

Cara pasang widget jam di blogspot

Panduan Pasang Widget Jam / Clock Di Blogspot

Satu lagi widget blog yang bisa digunakan untuk mempercantik blog, yaitu widget jam / widget clock. Widget Jam ini bisa dipasang disemua jenis blog atau website, itu artinya widget clock ini bisa juga digunakan untuk blogger (blogspot).

Cara pemasangannya pun cukup mudah, kita cukup mengkopi kode script yang akan menampilkan jam tersebut kemudian masukkan di sidebar blog blogger kita. Tanpa harus edit template yang kita gunakan

Sebelum saya tuliskan tutorial pasang widget jam di blogspot ini, mungkin teman-teman ingin melihat terlebih dahulu bagaimana tampilan jam tersebut, berikut demonya.

Next ...

Tutorial Pasang Widget Jam / Clock Untuk Blogger

Panduan pasang widget clock di Blogger ini saya bagi menjadi 2, yaitu untuk pengguna blogger tampilan lama dan pengguna blogger tampilan baru.

Cara Pasang Widget Jam Untuk Blogspot Baru

1. Klik Tata Letak

Cara Pasang Widget Jam Di Blogger (http://blog.ahmadrifai.net)

2. Klik Tambah Gadget / Add A Gadget

Panduan Pasang Widget Jam Di Blogger (http://blog.ahmadrifai.net)

3. Pilih Gadget Html/JavaScript

Tutorial Pasang Widget Jam Di Blogger (http://blog.ahmadrifai.net)

4. Masukkan kode widget jam yang sudah saya sertakan di bawah
5. Simpan (kamu juga bisa memindahkan letak widget jam tersebut dengan cara menarik gadget tersebut)

Cara Pasang Widget Jam Untuk Blogspot Lama

1. Klik Menu Rancangan / Design

Panduan Pasang Widget Jam / Clock Di Blogger

2. Klik Tambah Gadget / Add A Gadget

Panduan Pasang Widget Clock Di Blogger (http://blog.ahmadrifai.net)

3. Pilih Gadget Html/JavaScript

Tutorial Pasang Widget Clock Di Blogger (http://blog.ahmadrifai.net)

4. Masukkan kode widget jam yang sudah saya sertakan di bawah
5. Simpan (kamu juga bisa memindahkan letak widget jam tersebut dengan cara menarik gadget tersebut)

Kode Widget Jam / Clock Untuk Blogger Yang Harus Di Pasang

Silakan copy dan paste kode berikut:

Kode widget jam tersebut saya ambil dari http://www.al-habib.info/islamic-clock/, jika kamu ingin mencari tampilan yang lain silakan kunjungi sumbernya langsung untuk menemukan widget jam atau widget clock lainnya.

Posted by Ahmad Rifai on 9:06 PM in Panduan Pasang Widget Jam / Clock Di Blogspot | 4 comments

Tags: blogger tutorial, blogger widget

Memasang tulisan flash animasi berwarna

Panduan Tutorial Cara Membuat Text Animasi atau Animasi Tulisan Berwarna

Untuk Di Pasang Pada Postingan Bagi teman-teman yang ingin memasukkan text flash animasi ini pada postingan silakan ikuti langkah berikut:

Buat posting baru / Edit postingan yang sudah ada.
Masukkan kode script Text / Tulisan Flash Animasi Berwarna di sana (kode ada di bawah). Sebelum memasukkan kode script pastikan teman memasukkannya di bagian Edit HTML bukan di Compose (lihat di sebelah kanan atas forum isian posting)
Terbitkan Entri (boleh juga dipratinjau dulu)

Untuk Di Pasang Pada Widget Bagi teman-teman yang ingin memasukkan text flash animasi ini pada widget/sidebar silakan ikuti langkah berikut:

Pergi ke Rancangan / Design
Klik Tambah Gadget / Add Gadget
Masukkan kode script Text / Tulisan Flash Animasi Berwarna di sana (kode ada di bawah)
Simpan

Nah itulah langkah yang harus di lakukan.

Kode Script Text / Tulisan Flash Animasi Berwarna

<div style="-moz-box-shadow:
inset 0 1px 5px 0 #fff; background: #990099; border: 1px solid #ECEDE8;
box-shadow: inset 0 1px 5px 0 #555; font-family: Cataneo BT; font-size:
21px; font-weight: bolder; padding: 5px 20px; text-align: center;">

<script type="text/javascript">

var message="Selamat Datang Di Blog Ahmad Rifai Net"

var bgsGR1color="#FFFFFF" /* Warna utama teks */

var bgsGR2color="#FFFF00" /* Warna teks flash pertama */

var bgsGR3color="#00FF66" /* Warna teks flash ke dua */

var flashspeed=100 // kec. ganti warna (1/1000 dt)

var flashingletters=15 // jumlah teks pertama (tips / hiting jumlah text, kemudian bagi 2)

var flashingletters2=18 // jumlah berwarna teks ke dua (tips / hiting jumlah text, kemudian bagi 2)

var flashpause=1 // waktu jeda pergantian warna (1/1000 dtk)

var n=0

if (document.all||document.getElementById){document.write('<font color="'+bgsGR1color+'">')

for (m=0;m<message.length;m++)

document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')

document.write('</font>')}else

document.write(message)

function
crossref(number){var crossobj=document.all?
eval("document.all.neonlight"+number) :
document.getElementById("neonlight"+number)

return crossobj}function neon(){if (n==0){for (m=0;m<message.length;m++)

crossref(m).style.color=bgsGR1color}

crossref(n).style.color=bgsGR2color

if (n>flashingletters-1) crossref(n-flashingletters).style.color=bgsGR3color 

if (n>(flashingletters+flashingletters2)-1) crossref(n-flashingletters-flashingletters2).style.color=bgsGR1color

if (n<message.length-1)

n++

else{n=0

clearInterval(flashing)

setTimeout("beginneon()",flashpause)

return}}

function beginneon(){if (document.all||document.getElementById)

flashing=setInterval("neon()",flashspeed)}

beginneon()

</script>

</div>

Catatan :

Ganti tulisan berwarna yang ada di line 3 dengan tulisan yang teman mau. var flashingletters=19 - var flashingletters2=19 : pada link 8 & 9 . Ganti angka 19 dengan angka yang teman mau (Tips* hitung seluruh tulisan dan spasi yang teman masukkan pada line 3 (kode 1) atau line 5 (kode 2), kemudian bagi 2, setelah itu ganti angka 19 dengan hasil pembagian tadi.

Selamat mencoba membuat text animasi tulisan berwarna & Semoga berhasil

Cara membuat slide blog di blogger

Bismillah... pada postingan kali ini saya akan sedikit share cara membuat slide box di blogger/blogspot, pada postingan terdahulu saya pernah membuat artikel tentang slide box, namun pada kesempatan slide box nya aga sedikit berbeda, lumayan untuk untuk mempercantik dan memperindah blog sobat.

Slide Box

Slide box disini hampir mirip dengan related post namun disini sobat harus manual memasukan link (url) dan gambarnya. sebelum ke cara membuat slide box sebaiknya sobat lihat dulu contonya di gambar atau sobat bisa lihat di blog ini, jika sobat tertarik dengan gadget seperti itu silahkan sobat di coba pada blog sobat.

Langkah pertama untuk membuat slide box yaitu :
Sobat login ke blogger dengan akun masing masing.
Setelah itu sobat langsung menuju ke tab Design/Rancangan blog
Langkah selanjutnya sobat masuk ke area edit HTML terus centang kotak Expand Widget
Setelah itu sobat cari kode/tag <b:skin>, setelah ketemu sobat copy kode di bawah ini dan letakan di atas kode <b:skin>

CSS Unutuk Slide Box

<link href='http://tympanus.net/Tutorials/RelatedPostsSlideOuts/css/style.css' media='screen' rel='stylesheet' type='text/css'/>

Jangan dulu di save langkah selanjutnya sobat cari lagi kode/tag </body>, terus sobat masukan kode JavaScript di bawah ini di atas kode/tag </body>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script>//<![CDATA[
   $(function() {
    /**
    * the list of posts
    */
    var $list   = $('#rp_list ul');
    /**
    * number of related posts
    */
    var elems_cnt   = $list.children().length;

    /**
    * show the first set of posts.
    * 200 is the initial left margin for the list elements
    */
    load(200);

    function load(initial){
     $list.find('li').hide().andSelf().find('div').css('margin-left',-initial+'px');
     var loaded = 0;
     //show 5 random posts from all the ones in the list.
     //Make sure not to repeat
     while(loaded < 5){
      var r   = Math.floor(Math.random()*elems_cnt);
      var $elem = $list.find('li:nth-child('+ (r+1) +')');
      if($elem.is(':visible'))
       continue;
      else
       $elem.show();
      ++loaded;
     }
     //animate them
     var d = 200;
     $list.find('li:visible div').each(function(){
      $(this).stop().animate({
       'marginLeft':'-50px'
      },d += 100);
     });
    }

    /**
    * hovering over the list elements makes them slide out
    */
    $list.find('li:visible').live('mouseenter',function () {
     $(this).find('div').stop().animate({
      'marginLeft':'-220px'
     },200);
    }).live('mouseleave',function () {
     $(this).find('div').stop().animate({
      'marginLeft':'-50px'
     },200);
    });

    /**
    * when clicking the shuffle button,
    * show 5 random posts
    */
    $('#rp_shuffle').unbind('click')
        .bind('click',shuffle)
        .stop()
        .animate({'margin-left':'-18px'},700);

    function shuffle(){
     $list.find('li:visible div').stop().animate({
      'marginLeft':'60px'
     },200,function(){
      load(-60);
     });
    }
            });
//]]></script>

Langkah terakhir sobat masukan kode HTML di bawah ini di atas kode/tag </body>

<li>
<div>
<img height='72' width='72' alt='JUDUL GAMBAR' src='URL-GAMBAR'/>
<span class='rp_title'>JUDUL-POSTINGAN</span>
<span class='rp_links'>
<a href='URL-ARTIKEL' target='_blank'>Article</a>
<a href='URL-DEMO' target='_blank'>Demo</a>
</span>
</div>
</li>

Keterangan ganti lah kode di atas dengan url milik sobat

JUDUL GAMBAR ="Judul gambar dalam artikel"
URL-GAMBAR ="Alamat (url) gambar contoh 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGxJaWSW0JPsqPkxjwb9pUnZKSOJfl2MyvhbsZP9HBiuf6TAD8HGeLyFLD-GXNTv6TyyUqsQ-Z1XP9R4NpkAY34T2arPFCB4MTw7mqpAmViYLP9Z2wrUS9SC8X0mShBU1N4HCVxOlzNdo/s72-c/download-template-today.jpg' "
JUDUL-POSTINGAN : "Judul artikel milik sobat"
URL-ARTIKEL ="Alamat artikel yang akan di tuju" contoh :http://lutfietutor.blogspot.com/2012/03/cara-download-file-pdf-dari-scribd.html
URL-DEMO ="Alamat demo jika blog sobat memiliki demo/tutorial yang online"

Oke sobat sampai disini dulu postingan pada kesempatan ini semoga berhasil, Good Luck Happy Blogging

Cara menampilkan gadget popular post

Halo apa kabar kawan blogger? Dalam Panduan Blog kali saya akan posting tentang Cara Menampilkan Gadget Popular Post khusus Blogspot. Apa itu Popular Post ? Popular Post adalah posting paling populer. Atau dengan kata lain posting yang paling banyak dibaca para pengunjung blog. Dengan menampilkan Popular Post maka pengunjung yang datang akan melihat dan membaca juga informasi tersebut. Pengunjung biasanya akan terpesona untuk membaca juga seperti yang lain sebelumnya. Jadi blog anda akan terus didatangi pengunjung dengan setia. Bahkan jika Popular Post yang ada di blog anda benar-benar menarik dan bermanfaat buat mereka, bukan tidak mungkin mereka akan datang lagi untuk ke beberapa kali.
Bagaimana cara menampilkan Gadget Popular Post? Caranya sangat mudah. Karena di blogspot gadget ini sudah tersedia.
1. Login ke blogger.com
2. Tuju blog yang akan anda setting/atur lalu klik Rancangan ( untuk tampilan blogspot yang lama ) atau klik Tata Letak ( untuk tampilan blogspot yang baru ). Dalam panduan blog kali saya menggunakan tampilan blogspot yang lama.

3. Klik Tambah Gadget di side bar mana anda mau. Kalau Popular Post ingin anda tayangkan di side bar kanan klik saja Tambah Gadget di side bar kanan.

4. Klik menu Entri Populer ( Baru )

5. Atur konfigurasi Entri Populer /Popular Post
- Judul, isi dengan judul misalnya paling rame atau paling sering dibaca dll
- Paling banyak dibaca, centang aja setiap saat
- Tampilan > Judul Entri, centang thumbnail gambar jika anda mau yang tayang adalah Popular Post dengan gambar/image
- Tampilkan hingga, pilih sesuai dengan keinginan anda. Popular Post bisa anda tampilkan maksimal 10 entri.
6. Jangan lupa klik Simpan.

Contoh Tampilan Popular Post atau Entri Populer bisa anda lihat di sini

Sukses ! Anda sekarang bisa Menampilkan Gadget Popular Post di blog anda. Be blogging.

Cara membuat widget kotak komentar

Senin, 19 Desember 2011

Tobadak » Gadget , Tutorial Blogger » Widget Kotak Komentar (Comment Box)

14

Widget Kotak Komentar (Comment Box)

Assalamu alaikum,,,

Bagi yang berminat dengan gadget ini, silahkan di coba,,,

langsung saja ke langkah-langkah cara memasang kotak komentar,

1. Silahkan login dulu di blog Anda
2. Pilih Rancangan kemudian Tambah gadget
3. Pilih HTML java Script, lalu pasang kode di bawah ini

<div id="HCB_comment_box"><a href="http://www.htmlcommentbox.com">HTML Comment Box</a> is loading comments...</div> <link rel="stylesheet" type="text/css" href="http://www.htmlcommentbox.com/static/skins/simple/skin.css" /> <script type="text/javascript" language="javascript" id="hcb"> /**/ </script>

Selamat Mencoba,, Semoga Brmanfaat....!!!

Cara membuat tombol share di setiap postingan

Tombol berbagi (button share) sangatlah berguna untuk mempublihkasikan artikel di jejering sosial seperti Facebook, twiter dll. Dengan adanya tombol share ini di setiap postingan kita, maka akan sangat mudah bagi pembaca untuk melakukan share terhadap arikel, tidak perlu melakukan copas.

ok, kita langsung ke pembahasan,,,

berikut ini adalah langkah-langkah memasang tombol share di setiap postingan:

1. LOgin ke blog Anda
2. Pilih rancangan
3. dan pilh edit html
4. Ceklis expand Templat Widget
5. Cari kode ini(F3)<div class='post-footer-line post-footer-line-1'>
6. Di bawah ini ada beperapa pilihan tombol share plih salah satunya

Kode HTML

<div class="addthis_toolbox addthis_default_style "> <a class="addthis_button_preferred_1"></a> <a class="addthis_button_preferred_2"></a> <a class="addthis_button_preferred_3"></a> <a class="addthis_button_preferred_4"></a> <a class="addthis_button_compact"></a> <a class="addthis_counter addthis_bubble_style"></a> </div> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4da519da7edfc20d"></script>

Kode HTML

<div class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_preferred_1"></a>
<a class="addthis_button_preferred_2"></a>
<a class="addthis_button_preferred_3"></a>
<a class="addthis_button_preferred_4"></a>
<a class="addthis_button_compact"></a>
<a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4da51a0d28c61844"></script>

Kode HTML

<div class="addthis_toolbox addthis_default_style ">
<a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
<a class="addthis_button_tweet"></a>
<a class="addthis_counter addthis_pill_style"></a>
</div>
<script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=xa-4da51a2b6d314596"></script>

7.Copy salah satu kode HTML tersebut, kemudian pastekan di bawah code <div class='post-footer-line post-footer-line-1'>

8. Kemudian save!

Kamis, 22 Maret 2012

Cara memasang Iklan di blog

Hi sob, kali ini saya ingin sedikit share tips sederhana tengtang tutor blogger lagi, yaitu cara memasang script iklan melayang di blog. Gak usah panjang lebar embel-embel nya..
Langsung saja di liat screenshotnya sob,,,

Seperti biasa untuk memasangnya, silahkan login dulu ke blog sobat, kemudian masuk ke Elemen laman lalu pilih Tambah gadget,
Masukan script di bawah ini :

<style type="text/css">
#topbar {
position:absolute;
z-index: 100;
padding: 8px;
background: #eee;
background: -moz-linear-gradient(top, rgba(255, 255, 255, .9), rgba(211, 211, 211, .9));
background: -webkit-gradient(linear,left top,left bottom,from(rgba(255, 255, 255, .9)),to(rgba(211, 211, 211, .9)));
border: 1px solid #fff;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: #600 0 2px 15px;
-moz-box-shadow: #600 0 2px 10px;
margin:0 auto 10px;
float:left;
color:rgba(0, 0, 0, 0.75);
font-size: 12px;
font-family: Verdana, serif;
text-shadow:0 1px 0 #FFFFFF;
}
#topbar img {
border:none;
}
#topbar .tombol {
margin:0;
padding-bottom:5px;
text-align:right;
}
#topbar .tombol button {
color:#FFFFFF;
border: solid 1px #494949;
margin:0;
padding:2px 15px;
cursor: pointer;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
background: #5f5f5f;
background: -webkit-gradient(linear, left top, left bottom, from(red), to(#454545));
background: -moz-linear-gradient(top, red, #454545);
}
#topbar .isi_iklan {
background-color:#FFFFFF;
margin:0;
padding:4px;
width: 468px;
border: 1px solid #999;
}
</style>
<script src="http://blogcunayz.googlecode.com/files/js_pop_up.js" type="text/javascript"></script>
<script type="text/javascript">
var persistclose=1
var startX = 20
var startY = 20
var verticalpos="fromtop"
</script>
<div id="topbar">
<div class="tombol"><a href="" onclick="closebar(); return false" style="text-decoration: none;"><button>Tutup</button></a></div>
<div class="isi_iklan">
Kode Iklan Taruh Disini
</div>
</div>

Tulisan berwarna merah diganti dengan kode iklan sobat.,,

Okey,, mudah-mudahan membantu....,,,,

etc,,, hampir kelupaan, jangan lupa di save dulu.. ckcckck...,,, !!

0 0Email0New

Dengan memasukan alamat email dibawah ini, berarti anda akan dapat kiriman artikel terbaru dari Tobadak | Official Website di inbox anda:

Artikel Populer

Cara menampilkan Gadget follower pada blog

Anda bisa menampilkan follower atau pengikut di blog anda. Dengan menampilkan gadget ini maka visitor akan dengan sangat mudah mengikut setiap update artikel yang anda buat. Contoh Gadget follower bisa anda cek di blog saya yang membahasa tentang Bisnis Online. Blog pertama yang saya buat sejak mengenal sebuah blog. Jika anda tertarik dan berminat menerima informasi tentang bisnis online, anda bisa follow blog tersebut.

Cara follow blog saya sangat mudah.

Silahkan anda buka blog saya di sini kemudian pada gadget Follower klik tombol bertuliskan Join this site

lalu isi form yang tersedia untuk memulai follow blog saya.
Setiap saya posting artikel terbaru, maka di blogspot area anda, tepatnya di bagian bawah blog anda, akan ada artikel-artikel terbaru saya. Jadi di samping anda bisa berlangganan artikel terbaru saya melalui email, anda bisa juga berlangganan langsung ke blog area anda. Contoh artikel blog teman yang saya follow.

Bagaimana Menampilkan Gadget Follower Blog?
Gampang bin mudah bin tak sulit. He he he. Ikuti petunjuknya setelah pesan pesan berikut ini. He he he. Guyon terus.
1. Login ke blogger.com

2. Klik blog yang akan anda pasang Gadget Follower

3. Klik Tata Letak

4. Lalu klik Tambah Gadget

5. Klik Gadget Pengikut

6. Klik Simpan.

Sukses. Semoga bermanfaat. Silahkan dan yuk saling follow dengan saya. Jadi kamu follow blog saya http://bisnis-muktiplaza.blogspot.com lalu konfirmasi ke saya lewat komentar nanti saya akan follow balik. Kayak twitter juga tuh. He he he.

Pencarian Artikel ini dengan Kata Kunci:

blog (1)
tips bloging (1)
tampilan blog kursor (1)
pengikut blog (1)
orang yang disambar petir di atas masjid nabawi (1)
optimalisasi all in one seo pack (1)
menampilkan followers follower (1)
menampilkan follower di blog (1)
menampilkan follow blog (1)
cara mengkonfirmasi blog folower di wordpress (1)

Bagikan Artikel ini Ke Teman-teman anda di Facebook KLIK DINI

yhiosa.com

Pages

Jumat, 30 Maret 2012

Cara Membuat Menu Melayang di sudut blog

Baca Juga :

Cara membuat widget animasi I am Indonesia

Cara Membuat Widget Recent Post dengan Thumbnail

Senin, 26 Maret 2012

Cara pasang recent post

Cara menghilangkan Link di judul postingan

Cara pasang buku tamu di blogger tersembunyi

Panduan Cara Pasang Buku Tamu Tersembunyi Di Sidebar Blogger

Jumat, 23 Maret 2012

Cara pasang widget jam di blogspot

Panduan Pasang Widget Jam / Clock Di Blogspot

Tutorial Pasang Widget Jam / Clock Untuk Blogger

Cara Pasang Widget Jam Untuk Blogspot Baru

Cara Pasang Widget Jam Untuk Blogspot Lama

Kode Widget Jam / Clock Untuk Blogger Yang Harus Di Pasang

Memasang tulisan flash animasi berwarna

Panduan Tutorial Cara Membuat Text Animasi atau Animasi Tulisan Berwarna

Kode Script Text / Tulisan Flash Animasi Berwarna

Cara membuat slide blog di blogger

Cara menampilkan gadget popular post

Cara membuat widget kotak komentar

Senin, 19 Desember 2011

14

Widget Kotak Komentar (Comment Box)

Cara membuat tombol share di setiap postingan

Kamis, 22 Maret 2012

Cara memasang Iklan di blog

Artikel Populer

Artikel Terkait

Cara menampilkan Gadget follower pada blog

Pencarian Artikel ini dengan Kata Kunci:

Populer Post

Recent Post