News Update :
.

Tutorial Blogger

Facebook Tutorial

Khasiat Buah


Flash Labels by Way2Blogging

Tampilkan postingan dengan label blogger. Tampilkan semua postingan
Tampilkan postingan dengan label blogger. Tampilkan semua postingan

Selasa, 18 Juni 2013

Cara Membuat Form Sign Up/Register, Login dan Logout

Membuat Form Sign Up/Register, Login dan Logout untuk pembangunan sebuah web dengan berbasiskan member saat ini sudah menjadi tren bagi para webmaster yang ingin membangun web yang "look professional". Pada artikel ini akan dijelaskan tutorial untuk membuat form sign up dan login serta logout yang masih berbentuk sederhana. Untuk selanjutnya, anda dapat membuat sendiri pengembangan dari script ini.

membuat form register, login dan logout
Langkah pertama, anda harus membuat file  "Config.php". File ini berfungsi menghubungkan script yang anda buat dengan database. Isi dari file "config.php" ini dapat anda lihat di bawah:

<?php
$server = "localhost"; // server web anda.

$database = "mydata"; // nama dari database yang anda buat.
$db_user = "myusername"; // username dari mysql anda.
$db_pass = "mypassword"; // password untuk mengakses mysql anda tersebut.
$table = "users"; //nama table yang akan dibuat di database.
?>



Simpan file tersebut di root web anda. Setelah selesai, anda dapat melanjutkan pada tahap yang kedua.
  • Buat file dengan nama "create.php". File ini berfungsi menjalankan perintah query database dalam pembuatan table signup dan login ini. Isi dari file ini dapat anda lihat dibawah.

    <?php
    include ("config.php");
    // konek ke server MYSQL
    $link = mysql_connect($server, $db_user, $db_pass)
    or die ("Could not connect to mysql because ".mysql_error());
    // pilih database
    mysql_select_db($database)
    or die ("Could not select database because ".mysql_error());
    // bikin tabel di database
    $create = "create table $table (
    id smallint(5) NOT NULL auto_increment,
    username varchar(30) NOT NULL,
    password varchar(32) NOT NULL,
    PRIMARY KEY (id),
    UNIQUE KEY username (username)
    );";
    mysql_query($create)
    or die ("Could not create tables because ".mysql_error());
    echo "Mangstabs!!sekarang lanjut ke tahap yang ketiga";
    ?> 
  • Sekarang anda perlu membuat form yang digunakan pengunjung untuk sign up dan berikan nama "register.html". File yang anda buat ini boleh berupa halaman HTML biasa yang nantinya akan terhubung pada script php yang nantinya anda akan buat. Untuk percobaan yang sederhana, anda dapat meng-copy script di bawah pada halaman baru Dreamweaver.
    <html><head>
    <title>REGISTRASI MEMBER</title>
    </head><body>
    <form action="register.php" method="post">
    Pilih Username: <input type="text" name="username" size="20"><br>
    Pilih Password: <input type="password" name="password" size="20"><br>
    <input type="submit" value="Sign Up">
    </form>
    </body></html>
  • Setelah itu buat file dengan nama "register.php". File ini akan berfungsi sebagai perantara yang menghubungkan file register.html diatas dengan database yang sudah anda buat. Untuk isi dari file "register.php dapat anda lihat dibawah.
    <?php
    include("config.php");
    // konek ke server MYSQL
    $link = mysql_connect($server, $db_user, $db_pass)
    or die ("Could not connect to mysql because ".mysql_error());
    // pilih database
    mysql_select_db($database)
    or die ("Could not select database because ".mysql_error());
    // cek kesamaan username
    $check = "select id from $table where username = '".$_POST['username']."';";
    $qry = mysql_query($check) or die ("Could not match data because ".mysql_error());
    $num_rows = mysql_num_rows($qry);
    if ($num_rows != 0) {
    echo "Maaf, username $username sudah ada yang punya<br>";
    echo "<a href=register.html>Anda belum beruntung, silakan dicoba kembali</a>";
    exit;
    } else {
    // masukkan data
    $insert = mysql_query("insert into $table values (’NULL’, '".$_POST['username']."',
    '".$_POST['password']."')")
    or die("Could not insert data because ".mysql_error());
    // tampilkan pesan sukses
    echo "Akun Anda Telah Selesai Dibuat!<br>";
    echo "Sekarang anda bisa <a href=login.html>Login sebagai member web Cyber4rt</a>";
    }
    ?>
  • Sekarang anda perlu membuat form member untuk Login. Beri file ini dengan nama "login.html". Isi dari file ini yaitu sebagai berikut :

    <html><head>
    <title>MEMBER LOGIN</title>
    </head><body>
    <form action="login.php" method="post">
    Username: <input type="text" name="username" size="20"><br>
    Password: <input type="password" name="password" size="20"><br>
    <input type="submit" value="Log In">
    </form>
    </body></html>
  • Sekarang anda perlu membuat file yang akan menghubungkan file login.html dengan database, berikan nama file ini dengan "login.php". Script-nya dapat anda lihat dibawah.

    <?php
    include("config.php");
    // konek ke server MYSQL
    $link = mysql_connect($server, $db_user, $db_pass)
    or die ("Could not connect to mysql because ".mysql_error());
    // pilih database
    mysql_select_db($database)
    or die ("Could not select database because ".mysql_error());
    $match = "select id from $table where username = '".$_POST['username']."'
    and password = '".$_POST['password']."';";
    $qry = mysql_query($match)
    or die ("Could not match data because ".mysql_error());
    $num_rows = mysql_num_rows($qry);
    if ($num_rows <= 0) {
    echo "Maaf, tidak ada username $username dengan password tersebut.<br>";
    echo "<a href=login.html>Coba lagi</a>";
    exit;
    } else {
    setcookie("loggedin", "TRUE", time()+(3600 * 24));
    setcookie("mysite_username", "$username");
    echo "Anda telah login!<br>";
    echo "Lanjutkan ke <a href=members.php>member</a> area.";
    }
    ?>
  • Perhatikan file tersebut pad baris ketiga paling bawah, disana berisi <a href=members.php>members.php ini adalah sebuah area yang hanya bisa dilihat oleh para member. Anda dapat membuat file members.php dengan kreasi sendiri. Sekarang saya akan menjelaskan script yang digunakan untuk mengecek cookie, apakah orang tersebut sudah login atau tidak. Simpan scipt ini di seluruh area members. Script-nya sebagai berikut :

    <?php if (!isset($_COOKIE['loggedin'])) die("Anda sedang tidak login! Silakan login terlebih dahulu");
    $mysite_username = $HTTP_COOKIE_VARS["mysite_username"];
    echo "Anda login sebagai $mysite_username.
    "; ?>
  • Akhirnya script yang terakhir yaitu script untuk logout. Script ini dapat dihubungkan dengan link pada html biasa. Link ini diletakkan pada area member. Lihat isi script-nya di bawah ini :

    <?php
    // masa aktif cookie
    setcookie ("loggedin", "", time() - 3600);
    echo "Anda sudah logout.<br>";
    echo "<a href=\"login.html\">Login</a>.";
    ?>
Untuk peng-aplikasi-an dari script-script yang saya jelaskan di atas, dapat anda kreasikan sendiri. Selamat berkreasi.!!!!





Membuat Effect JQuery Link Nudging di Blogspot

Jika temen-temen tertarik, langsung saja saya akan berikan penjelasannya :
  1. Login ke blogger dengan akun anda 
  2. Kemudian pada dasbor  klik Rancangan >> Edit HTML
  3. Tambahkan Script JQuery berikut diatas kode </head>:
4.# Catatan : Jika anda sudah memasukkan script JQuery diatas, langkah ketiga bisa anda abaikan # Setelah itu tambahkan lagi script berikut dibawah script JQuery tadi:
5. Terakhir Save Template anda, dan lihat hasilnya Itu tadi tutorial kali ini, jika ada pertanyaan teman-teman bisa isi kotak komentar di bawah. Selamat mencoba dan semoga bermanfaat

Membuat Tab View Widget Kategori Blogger keren

Tutorial tab view widget per kategori, widget ini menampilkan 4 post dengan thumbnail dalam tiap satu label atau kategori, untuk lebih jelasnya silahkan lihat gambar di bawah, dan klik demo biar lebih jelas.


Langsung saja pada cara membuatnya :

  1. Pertama Anda meesti login ke blogger dengan akun Anda
  2. Kedua pilih blog yang ingin anda tambahkan slider ini.
  3. Setelah itu masuk ke template >> Edit HTML, kemudian centang expand widget templates
  4. Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan nantinya, sebaiknya backup dulu template anda.
  5. Setelah semua langkah diatas anda lakukan, letakkan kode berikut ini diatas kode ]]></b:skin> :
Karena pada blog demo yang saya gunakan lebar main-wrapper (kolom postingan) adalah 640px maka untuk membungkus tab view widget lebarnya harus sama, yaitu 640px. Anda bisa sesuaikan dengan lebar main-wrapper pada template yang Anda gunakan. Dan untuk tab viewnya sendiri lebarnya harus dikurangi 2px (1px kanan dan kiri), karena tab ini dibungkus dengan border setebal 1px, sehingga lebarnya menjadi 638px. Lebar tiap satu post disini 146px, jika pada template yang Anda gunakan lebar main-wrapper lebih kecil, maka lebar untuk satu post ini pun juga harus diperkecil sehingga jarak antara bagian sisi kanan dan kiri sama. 6.Langkah selanjutnya masih pada posisi Edit HTML, masukkan kode berikut ini diatas kode :
Keterangan : Perhatikan URL script warna biru diatas, itu adalah kode script jQuery.min.js seri terbaru yang saya gunakan untuk membuat tab view widget. Jika pada template Anda sudah terdapat jQuery.min.js walaupun serinya berbeda, kode warna biru diatas tidak perlu lagi Anda masukkan. Cukup satu jQuery.min.js yang ada di template, terserah mau seri berapa, kalau bisa versi yang terbaru. Tulisan warna merah : Norah Jones, Diana Krall dan seterusnya adalah judul untuk tab view widget, anda bisa ganti sesuai katehori yang ingin ditampilkan pada widget tersebut. Warna biru (146 dan 95) diatas adalah ukuran lebar dan tinggi thumbnail pada satu post kategori, silahkan ukurannya disesuaikan. 7.Kemudian masukkan kode berikut sebelum kode :
8.Langkah selanjutnya adalah bagaimana cara menempatkan tab view widget tersebut pada blog kita. Jika Anda ingin meletakkan pada bagian atas sebelum post seperti pada demo, cari kode
, kemudian letakkan kode berikut ini dibawahnya
Tulisan /feeds/posts/default/-/Jamie Cullum Lyrics dan sejenisnya pada kode diatas adalah label atau kategori yang saya tampilkan pada tab view widget, silahkan ganti dengan label Anda sendiri dan sesuaikan dengan judul tab view pada langkah nomer 6 diatas. Dan jika Anda ingin menampilkan widget ini di bawah postingan, letakkan kode tersebut diatas kode berikut ini (jika tidak ada cari yang mirip) :


<!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'>&#160;</div>

</div> <!-- end content-wrapper -->



 9.Terakhir, save templates dan lihat hasilnya.

Membuat Menu Accordion Tanpa Edit Di Template

Screenshot Begini nih
menu accordion

Salah satu fungsi dari accordion menu selain memperingkas tampilan blog, juga dapat memperindah blog, seperti juga fungsi tabber atau tab view, jadi blog Anda akan kelihatan lebih ringkas dan rapi. Tutorial ini sudah agak lama, saya hanya memperbaharui tampilan menunya saja. Anda bisa letakkan menu accordion ini pada sidebar blog. Bagi teman-teman yang mau mencoba, berikut ini cara membuatnya (wah bahasanya jadul banget ya) :
  1. Login ke Blogger dengan akun Anda
  2. Masuk ke Layout, pilih HTML/Javascript
  3. Kemudian masukkan kode berikut ini ke dalamnya (kek bikin masakan aja) : 

4.Terakhir Save, lihat hasilnya


Keterangan :

  • Title : Judul heading menu accordion 
  • Isi konten : Silahkan Anda isi dengan widget yang akan dipasang (bisa tulisan, script iklan maupun script widget)

Floating Social Network dengan Efek Easing di samping blog

Karena untuk meminimalisir penggunaan javascript, saya sengaja membuat widget itu polos tanpa penggunaan efek tertentu dengan konsekuensi penggunaan image untuk membentuk widget itu semakin banyak. Nah, kali ini saya akan berikan tutorial atau cara untuk membuat widget floating social bookmark dengan tambahan jquery library dan efek Easing tentu saja dengan penggunaan image yang lebih sedikit (hanya satu). 

floating social bookmark



Dengan penambahan jquery, jika Anda meletakkan cursor pada salah satu icon social bookmark, dia akan keluar pelan-pelan, lebih lembut seperti putri Solo yang baru keluar dari keraton, itu karena efek easing yang ada pada jquery-ui.min. Di samping efek easing yang saya tambahkan pada widget ini, juga jenis social media yang saya pasang lebih banyak.Berikut ini langkah-langkah pembuatannya :
  1. Login ke Blogger
  2. Masuk ke Template >> Edit HTML (centang expand widget templates)
  3. Letakkan kode CSS di bawah ini diatas ]]></b:skin> :

4.Berikutnya penambahan jquery dan javascript, masih di Edit HTML letakkan kode berikut sebelum :</head>


Untuk jquery library warna biru diatas yang ini  (<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>  ), jika pada template yang Anda gunakan sudah terpasang, ditinggalkan saja.


5.Selanjutnya memanggil widget tersebut, letakkan kode HTML di bawah ini sebelum </body> :
Ganti tulisan YOUR ID dengan ID akun Anda masing2 jangan sampai keliru dengan ID tetangga. 6.Terakhir, Save Templates

Sabtu, 20 April 2013

Memasang Recommendation Keren Di blog

1.Add gadget 2.pastekan Code Di bawah Ini 3.Tunggu beberapa Hari apabila tidak muncul

Jumat, 29 Maret 2013

Tutorial Blog Yang perlu di Baca


Dibawah ini merupakan Kumpulan tutorial singkat Blogspot dan beberapa Blogger Hack yang paling sering ditanyakan. Sengaja saya tidak membuat tulisan per-artikel mengingat penjelasannya terlalu singkat dan terbilang sederhana. Nah..untuk menjawab pertanyaan yang sama dan sering pada komentar dan Imel yang masuk saya kumpulkan aja jadi satu. Silahkan dicoba :)
Agar Title SEO Friendly
Agar title blogger lebih lebih bersahabat dengan Search Engeine (SEO Friendly) kita dapat mengganti Title standar dengan Title kode yang sudah dimodifikasi.
Cari kode title dibawah ini: <title><data:blog.pageTitle/></title>
Kemudian ganti semua kode diatas dengan kode dibawah
<b:if cond=’data:blog.pageType == &quot;index&quot;’>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
Menghapus Link Subsribe Post (atom) atau Berlangganan: Posting (atom)
Masuk halaman Edit HTML kemudian beri tanda centang pada Expand Template Widget, cari kode dibawah lalu hapus kode warna merah dibawah.
<b:includable id=’feedLinks’>
<b:if cond=’data:blog.pageType != &quot;item&quot;’> <!– Blog feed links –>
<b:if cond=’data:feedLinks’>
<div class=’blog-feeds’>
<b:include data=’feedLinks’ name=’feedLinksBody’/>
</div>
</b:if>
Menghilangkan Navbar
Masuk halaman Edit HTML kemudian letakan dibawah kode <b:skin><![CDATA[
#navbar{height:10px; visibility:hidden; display:none}
Auto Hide pada Navbar Blogger
Pada halaman Edit HTML, kemudian letakan kode dibawah kode <b:skin><![CDATA[
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

Mengganti Default Atom dengan RSS
Kadang mungkin kita ingin menggunakan default feed sebagai RRS, caranya masuk halaman Edit HTML, Kemudian cari kode warna hijau dibawah
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'> <data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>
Ganti kode warna hijau dengan kode dibawah ini:
<a class='feed-link' expr:href='data:f.url + "?alt=rss"' type='application/rss+xml' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
Memasang Icon Sebelum title Post
Pertama cari .post h3{ pada deretan kode CSS kemudian masukan sesuai kode warna hijau dibawah:
.post h3{ background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDdkVo4xI8oBsZNiV5l_pGRjCryJTboErG6DMdwaCC42j5kyRMBuLiwD5np9jqb67MCL6pW0PDqiDPFrkAsEyRQqEix3_lZo_e2KzqqDoe8qZ_2tbdpBBWmF-DU92fFcrS0MmlSYZcXlTW/
s400/dotlink.gif") 0px 0px no-repeat; margin:.5em 0; padding:0 20px 0; font-size:120%; font-weight:bold; font-style:normal; line-height:1.3em; color:#333}
Pasang Icon Pada Setiap Judul SideBar
Pertama cari #sidebar-wrapper h2{ pada deretan kode CSS, kemudian masukan sesuai kode warna hijau dibawah:
#sidebar-wrapper h2{ background: url("http://bp1.blogger.com/_C6KkooKXCEw/SJGrot7UiiI/AAAAAAAACFw/
8XPCqtzzzs4/s400/dotlink.gif") 0px 0px no-repeat; margin:.6em 0 .6em; padding:0 20px; font-size:11px; font-weight:bold; line-height:1.4em; text-transform:uppercase; color:#222; border-bottom:1px solid #C0C0C0}
Memasang Icon di link Sidebar
Pertama cari #sidebar-wrapper li{ pada deretan kode CSS, kemudian masukan sesuai kode warna hijau dibawah:
#sidebar-wrapper li {background:url("http://bp1.blogger.com/_C6KkooKXCEw/SJGrot7UiiI/
AAAAAAAACFw/8XPCqtzzzs4/s400/dotlink.gif") no-repeat 0px .20em; margin:0; padding:0 0 .25em 17px; line-height:1.2em}
Memasang Icon Sebelum Title Post pada halaman List Label
Masuk halaman Edit HTML kemudian beri tanda centang pada Expand Template Widget, cari kode warna hijau di kemudian masukan sesuai kode warna  dibawah:
<b:include data='top' name='status-message'/>
<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<a expr:href='data:post.url'>
<img alt='&gt;&gt;&gt;' border='0' src='http://bp1.blogger.com/_C6KkooKXCEw/SJGrot7UiiI/AAAAAAAACFw/
8XPCqtzzzs4/s400/dotlink.gif'/>
<data:post.title/></a><br/><br/>
<b:else/>
<b:include data='post' name='post'/>
</b:if>

Pasang Icon Sebelum Jumlah Komentar
Pertama cari #comments h4{ pada deretan kode CSS, kemudian masukan sesuai kode warna hijau dibawah:
#comments h4{ background:#eee5e5 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikQaU9yUXDOD2dgfaucowO48rbNoUbG_ohAf8hfPSKFRQa4riIX6Tobcjb1Msh_yrX59AGzB1jlNay_yNVPkKdSL3_VnXl36iiOWs-l2_CUrQ-Siz698OaRbBCG1Rtk-5cbb-RaiVAQB1S/
s400/icon_comments.png") no-repeat 3px .3em; width:430px; margin:.1em 0; font-size:12pt; font-weight:bold; line-height:1.5em; letter-spacing:.1em; color:#111; padding-left:25px}
Pasang Icon Sebelum Nama Komentator
Pertama cari #comments-block .comment-author{ pada deretan kode CSS, kemudian masukan sesuai kode warna hijau dibawah:
#comments-block .comment-author{ margin:.5em 0; padding-left:25px; background:#FFFFCC url("http://bp3.blogger.com/_C6KkooKXCEw/SJGzpDac4VI/AAAAAAAACGo/
2L5Y5P_BDWU/s400/icon_comment.gif") no-repeat 3px .3em; color:#111}
Mengganti Tulisan Posting Lebih Baru - Halaman Utama - Posting Lama dengan tulisan sendiri atau bergaya Icon
Anda mungkin ingin mengganti tulisan standar Posting Lebih Baru - Halaman Utama - Posting Lama dengan gaya sendiri atau anda juga bisa menganti tulisan tersebut dengan icon. Masuk halaman Edit HTML kemudian beri tanda centang pada Expand Template Widget, cari kode warna hijau di bawah kemudian ganti kode warna merah dibawah sesuai keinginan.Untuk menganti gaya tulisan sendiri anda bisa langsung menulisnya sedangkan jika ingin mengganti dengan gaya icon tinggal ganti dengan kode <img src="http://loakasit-gambar-anda.com/contoh.jpg"/>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'> <data:newerPageTitle/> </a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'> <data:homeMsg/> </a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<data:homeMsg/> </a>
</b:if>
</b:if>

</div>
Cara mencetak halaman (Print Page)
Anda mungkin ingin mencetak perhalaman langsung ke default Printer, caranya tinggal memasang kode dibawah ini langsung disetiap halaman atau letakan di dalam halaman Post.
<a href="javascript:print(document)"> Cetak Halaman Ini </a>
TANSFER ACCOUNT BLOGGER KE ACCOUNT LAIN
Punya Account Blogger yang berbeda tentu saja susah untuk melakukan manage, kadang hanya untuk memposting blog dengan account lainnya kita harus melakukan logoff terlebih dahulu (kecuali kita login menggunakan web browser berbeda juga), tidak seperti wordpress, blogger tidak mempunyai fasilitas untuk melakukan transfer blog ke account berbeda, sangat disayangkan memang, masa sekelas blogger tidak ada fasilitas ini. Trus gak mungkin dong melakukan transfer blog di blogger? siapa bilang..tentu saja bisa, dengan adanya fasilitas mengundang penulis lain di blogger, ini yang akan kita manfaatkan sebagai transfer antar blog dengan account berbeda.
Cara melakukan Transfer blog dengan account berbeda:
Contoh : Andai kata kita mempuanyai 2 account berbeda sebut saja Account-A dan Account-B, rencana kita ingin melakukan transfer salah satu blog di Account-A ke Account-B, hal yang harus diperhatikan bahwa Account yang memberi kuasa (Account yang mengundang/Account-A) adalah account yang blog-nya akan ditransfer, dengan kata lain Account-B inilah yang akan menerima kuasa penuh terhadap blog di Account-A.
1. Login ke account yang akan di transfer (contoh Acount-A)
2. Kemudian pada "Panel Kontrol" pilih salah satu blog dengan melakukan klik link "Pengaturan"
3. Pada tab pengaturan pilih sub tab "ijin"
4. Klik Tombol "Menambah Penulis"
5. Masukan Alamat Account Gmail anda yang lain (Account -B), dalam hal ini account gmail yang kita undang merupakan account yang akan menerima transfer blog.
6. Jika sudah, kita harus login ke alamat gmail yang di undang (Account-B) dan akan menerima sebuah suran pengundanga untuk bergabung di Account-A.
7. Pada email yang kita terima disitu terdapat link, klik link tersebut bahwa kita setuju untuk berkontribusi ke blog pengundang, jangan lupa masukan kata sandi sebagai tanda persetujuan.
8. Pada halaman "Panel Kontrol" sudah terlihat ada blog baru yang berasal dari account-A
9. Selanjutnya kembali lagi ke Account-A atau kembali ke proses no 1,2 dan 3
10. Pada halaman ini terlihat Account-B yang telah di undang, jangan lupa mengklik link "Berikan hak istimewa setingkat admin" dan menekan tombol "Berikan hak istimewa setingkat admin" pada popup yang muncul.
11. Jika kita tidak ingin menggunakan Account-A dan hanya memberikan hak admin pada Account-B kita dapat menghapus hak akses Account-A dengan mengklik link "memindahkan".
12 Selesai..dan selamat kita sudah melakukan transfer blog dari Acount-A ke Acount-B, untuk transfer blog yang lain caranya sama dengan proses diatas.
Catatan : jika masih ragu bisa tanyakan saya dulu di kolom komentar agar bisa kita diskusikan bersama. thanks
MEMBUAT RANDOM PHOTO DI BLOGSPOT
Pertanyaan diatas pernah ditanyakan oleh salah satu sahabat blogger pada shoutbox, Random photo pada profile yaitu cara mengubah gambar secara bergantian ketika halaman tersebut di-Refresh atau di reload ulang. Jadi gambar tersebut tidak hanya itu-itu saja tapi bisa tampil gambar yang lain sesuai dengan keinginan kita. lebih jelasnya lihat gambar porfile saya yang selalu berubah-ubah.Untuk menjawab pertanyaan yang sama oom posting disini saja ya. codenya selengkapnya bisa dilihat dibawah ini.
Contoh Script :
Tuju ke halaman edit HTML kemudian beri tanda centang pada kotak Expand Widget Templates. kemudian cari kode di bawah ini:
<b:if cond='data:photo.url != ""'>
<a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
Ganti kode yang tercetak tebal di atas dengan kode javascript di bawah ini:
<script>
var pic, alt;
pic = new Array;
pic[0] = “PHOTO-URL“;
pic[1] = “PHOTO-URL“;
alt = new Array;
alt[0] = “My Photo”;
alt[1] = “My Photo”;
var now = new Date();
var seed = now.getTime() % 0xffffffff;
function rand(n) {
seed = (0x015a4e35 * seed) % 0x7fffffff;
return ( seed >> 16 ) % n;
}
var num = rand(2);
document.write(“<a href=’http://www.blogger.com/profile/XXX‘><img alt=’” + alt[num] + “‘ border=’0′ class=’profile-img’ height=’80′ src=’” + pic[num] + “‘ width=’60′/></a>”);
</script>
Perhatikan pada kode yang ditandai dengan huruf tebal. Ganti PHOTO-URL dengan URL foto kamu sendiri, kemudian pada kode var num = rand(2);, angka 2 mewakili jumlah array yang kita buat. Pada contoh di atas berarti ada 2 array, 0 dan 1. Dan selanjutnya ganti kode XXX dengan 20 angka (untuk New Blogger) yang ada pada profil blogger kalian masing-masing.
Sedikit menambahkan jika kalian ingin memodifikasi 6 gambar yang berbeda codenya bisa dilihat di bawah ini
<script>
var pic, alt;
pic = new Array;
pic[0] = “PHOTO-URL”;
pic[1] = “PHOTO-URL”;
pic[2] = “PHOTO-URL”;
pic[3] = “PHOTO-URL”;
pic[4] = “PHOTO-URL”;
pic[5] = “PHOTO-URL”;
alt = new Array;
alt[0] = “My Photo”;
alt[1] = “My Photo”;
alt[2] = “My Photo”;
alt[3] = “My Photo”;
alt[4] = “My Photo”;
alt[5] = “My Photo”;
var now = new Date();
var seed = now.getTime() % 0xffffffff;
function rand(n) {
seed = (0x015a4e35 * seed) % 0x7fffffff;
return ( seed >> 16 ) % n;
}
var num = rand(6);
document.write(“<a href=’http://www.blogger.com/profile/XXX’><img alt=’” + alt[num] + “‘ border=’0′ class=’profile-img’ height=’80′ src=’” + pic[num] + “‘ width=’60′/></a>”);
</script>
Sebelumnya permintaan maaf atas penggandaan kode ini tanpa konfirmasi terlebih dahulu pada nara sumber, Terima kasih buat mas Anang’s Blog untuk sampel codenya.

Lupa password blogger?

Apa yang terjadi ketika login ke blogger namun lupa password blogger dan nama user? pasti kita akan panik setengah mati. padahal sudah berusaha mencoba berbagai katakunci namun hasilnya tetap saja nihil, ups sabar-sabar jangan panik pasti ada solusinya. pengen tau caranya lihat dibawah ini.
Cara mendapatkan kembali passoword dan user name di blogger:
1. Masuk aja ke http://www.blogger.com/forgot.g
2. Ada dua pilihan untuk mendapatkan kembali password dan username, disini saya hanya menjelaskan cara pertama yaitu menggunakan alamat url blogger/blogspot.
3. Langkah selanjutnya kita tinggal ikuti instruksi yang ada (karena menggunakan bahasa indonesia saya tidak menjelaskan caranya secara mendetail, saya yakin kalian semua pasti bisa)

Catatan: Informasi alamat url blog akan dikirim kealamat email (gmail), jika dalam beberapa waktu informasi tidak muncul dalam inbox, coba cek di folder spam. Nah pada email yang diterima kita akan melihat beberapa informasi penting, diantaranya jika kita lupa nama sandinya tinggal klik link dibawah kalimat “Apabila lupa sandi Anda, Anda dapat me-reset dengan meng-klik link ini:” kemudian akan muncul halaman bantuan password, masukan kode verifikasi sesuai dalam gambar, kemudian klik “dapatkan kembali password”. hal yang harus diperhatikan bahwa informasi password akan dikirim ke alamat email sekunder ketika pertama kali mendaftar.
Semoga bermanfaat, happy blogging :)

Selasa, 26 Maret 2013

Cara menggunakan Rich Snippet Bintang 5 di blogspot



Membuat Rich Snippet Bintang Lima (Review)

Cara menggunakan Rich Snippet Bintang 5 di blogspot yang biasanya diikuti kata diulas oleh adalah salah satu rich snippet yang paling mudah untuk dibuat. Rich snippet ini tidak akan mempengaruhi ranking dari artikel anda. Hanya saja tampilan bintang lima tersebut bisa membuat artikel anda terlihat mencolok dan mengundang orang untuk mengklik.

Aturan Penggunaan Cara menggunakan Rich Snippet Bintang 5 di blogspot

  • Pada saat anda menggunakan markup HTM Review bintang lima ini, maka Google menginginkan agar halaman tersebut benar-benar hanya membahas satu produk secara spesifik. Anda tidak bisa memberikan banyak review atau ulasan yang berbeda dalam satu halaman. Jadi satu halaman hanya boleh ada satu markup review.
  • Google tidak memberi support pada review produk atau layanan dewasa. Jadi jika blog anda berisikan cerita dewasa, atau konten pornografi, maka kemungkinan Google tidak akan menampilkan hasil markup anda pada snippet hasil pencarian.
  • Jika Markup Review ini diberikan untuk ulasan satu orang saja, maka nama yang memberi ulasan haruslah valid, dan tidak menggunakan karakter yang tidak diizinkan. Contoh nama yang tidak diizinkan adalah "Diskon 50%"
Dengan menggunakan Rich Snippet Review Bintang 5 ini, maka hasil pencarian anda akan terlihat seperti pada gambar di bawah ini....





Cara Membuat Rich Snippet Bintang 5 (Review)

Untuk Cara menggunakan Rich Snippet Bintang 5 di blogspot ini, silahkan lakukan prosedur sederhana berikut:
  • Masuk ke dalam menu Template blog anda.
  • Pilih Edit HTML dan lanjutkan, setelah itu centang Expand Widget Template.
  • Gunakan Ctrl f pada browser anda untuk mencari kode <data:post.body/>
  • Tepat di bawah kode <data:post.body/> masukkan kode berikut
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='margin-top: 30px; font-size: 11px; color:#777;'>
<div itemscope='' itemtype='http://data-vocabulary.org/Review'>
<center>Judul: <span itemprop='itemreviewed'><data:post.title/></span>;  Ditulis oleh <span itemprop='reviewer'><data:post.author/></span>;  Rating Blog: <span itemprop='rating'>5</span> dari 5</center>
</div>
</div>
</b:if>



  •  Jika sudah memasukkan kode ini, klik Simpan Template
  • Silahkan lakukan pengujian, apakah pemasangan kode ini berhasil. Untuk pengujian ikuti prosedur berikut ini:
    • Masuk ke halaman Google Rich Snippet Testing Tool
    • Pada halaman tersebut masukkan URL salah satu artikel anda ke dalam kotak yang bertuliskan "Enter a web page URL to see how it may appear in search results"
    • Jika sudah memasukkan URL artikel silahkan klik tombol Preview
    • Alat ini akan segera menampilkan contoh tampilan hasil pencarian blog anda di Google (lihat di bagian bawah halaman)
    Jika anda sudah melihat tampilan Rich Snippet yang disertai tanda bintang lima itu berarti pemasangan kode markup yang anda lakukan sudah berhasil.

    Rabu, 06 Maret 2013

    Cara Mematikan Fungsi blok Artikel pada Blogspot

    Cara Mematikan Fungsi Drag Artikel Blog Guna mengantisipasipara pencuri konten banyak sekali setiap blog atau website menanggulangi hal ini dengan berbagai cara contoh dengan mematikan fungsi drag pada artikel blog. 
    Pada kesempatan kali ini aku ingin berbagi Tips tentang bagaimana caranya mematikan fungsi drag tanpa javascript. sudah tentu dengan tidak menambahkan javascript tak akan mempengaruhi loading blog. untuk caranya cukup simple dan sangat mudah, berikut ini tipsnya :
    1. silahkan login dulu ke blog kalian.
    2. langsung saja menuju edit tamplate.
    3. silahkan cari kode <body> pakai Control+F biar cepat
    4. kalau sudah kalian temukan kodenya silahkan kalian ganti dengan kode dibawah ini.





    5. kalau sudah kalian taruh kodenya silahkan kalian simpan. dan coba drag artikel kalian.
    Namun tips ini tidak mematikan fungsi klik kanan, selamat mencoba semoga Tips kali ini bermanfaat buat kalian semoga sukses dan happy blogging.

    Cara Membuat Menu Navigasi Kwicks Dengan jQuery.

    Cara Membuat Menu Navigasi Kwicks Dengan jQuery.

    Berikut Screenshotnya :



    Bagaimana tertarik untuk memasangnya di blog sobat,,?? Jika jawabannya ya silahkan ikuti langkah-langkah membuatnya di bawah ini :

    Seperti biasanya masbro masuk dulu Dasboard >> Template >> Centang Expands Widget Templates

    Lalu taruh kode berikut di atas ]]></b:skin>

    Kemudian cari kode <head> dan taruh kode jQuery berikut tepat di atasnya;
    Selanjutnya sobat tinggal pilih mau di taruh dimana menunya misalnya di widget caranya Tambah Widget >> HTML/JavaScript and masukin deh kodenya nih ado di bawah :
    Selanjutnya tinggal simpan,gimana guampang kan bikinnya,,??

    Cara Mengganti Tampilan Scroll Bar Menjadi Keren di Blog

      - Bagi Anda yang ingin scroll bar Anda berubah seperti Punya orang-orang seperti gambar di bawah ini!!  Dengan menggunakan script CSS Anda bisa merubah scroll bar Anda di Blog Anda. Bisa mempebesarnya ataupun memperkecil scroll bar blog Anda!


    1. Buka Blogger.com > Rancangan > Edit HTML
    2. Cari kata ]]></b:skin> dengan menekan tombol CTRL + F
    3. Paste code berikut di atas ]]></b:skin>

    ::-webkit-scrollbar {height:12px;width: 12px;background: #00A000;}
    ::-webkit-scrollbar-thumb {background-color: #A52A2A;-moz-border-radius: 10px;border-radius: 10px;}


    Paste diatas tinggal Anda ganti saja beberapa code yang saya kasih warna merah, ini berguna untuk mengganti warnanya. Kalau Anda bisa ganti semua kenapa tidak di ganti tuh kode?


    Beberapa browser mungkin tidak support dengan kode ini tapi saya memakai Google Chrome code ini berfungsi kok!

    ~Semoga Bermanfaat !!~

    Rabu, 27 Februari 2013

    Membuat Vertical Sliding Info Panel With jQuery di samping blog



    Yap oke, langsung aja ke tutorialnya, :

    Login di blogger Anda
        * Masuk ke Dasbor
        * Pilih Tata Letak / Rancangan Dan Edit HTML
        * Klik "Expand Template Widget"
        * Jangan lupa untuk memback-up template anda terlebih dahulu (very recomended)

          Kemudian

    1. Cari code : ]]></skin>
    Sisipkan code berikut di Atas-nya :
    2. Dilanjutkan dengan mencari code : </head>
    dan taruh code berikut di Atas nya :
    3.  Yanag terakhir cari code :  </body>
     Dan masukan code berikut di Atas-nya juga :
    * Yang ada link nya , bisa sobat ganti sesuai dengan keinginan,..

    Kamis, 21 Februari 2013

    Widget Related Post / Artikel Terkait / Posting Yang Berhubungan

    Sebenarnya sudah pernah saya posting sebelumnya,bagaimana membuat related post pada blogger di Cara Membuat Artikel Yang Berhubungan / Related Post / Artikel Terkait.
    Namun widget related post yang satu ini sangatlah unik,menarik sekaligus dapat membantu pengunjung melihat posting yang berkaitan.



    Ada 2 pilihan widget related post keren abis yang bisa sobat gunakan,dan dua-duanya pantas untuk sobat coba.


    1.Related Post Widget for Blogger dengan Javascript


    Jika javascript tersebut masih valid alias tersedia,maka widget ini akan bekerja dengan baik.

    Contoh gambarnya sobat bisa lihat dibawah ini:
    Related Post Widget Untuk Blogger (Keren Abis!)
    Lihat Gambar Besar


    Dan hasilnya kurang lebih akan seperti di sini

    Nah,untuk caranya bisa sobat ikuti langkah berikut ini:

    • Pertama,pergilah ke Dashboard (Gb.1) blog yang akan anda beri menu navigasi dengan sub menu ini.

      Related Post Widget.
      Gb.1
    • Selanjutnya pilih tab Edit Html (Gb.2).

      Widget Artikel Yang Berhubungan.
      Gb.2
    • Setelah itu,contreng tulisan / checkbox 'Expand Widget Templates' (Gb.3).

      Artikel Terkait / Yang Berkaitan Widget.
      Gb.3


    Nah,setelah itu cari kode </head> (Gunakan Ctrl+F),setelah ketemu,persis diatasnya letakkan kode javascript ini di atas kode </head> tersebut:









    Setelah itu,cari lagi kode berikut <data:post.body/>,setelah ketemu,tepat dibawahnya letakkan kode berikut:







    Setelah itu simpan,selesai.

    2.Related Post Widget for Blogger dengan Jasa Blogger Widget (LinkWithin)



    Tampilan related post blogger dengan jasa www.linkwithin.com akan seperti ini:

    linkwithin related post widget.

    Ingin memilih cara yang no 2 ini? tinggal sobat kunjungi saja situsnya di sini

    Download

    Software

     

    © Copyright The Tutorial Blogger 2013 -2014 | Design by Onedra | Published by Templates | Powered by Blogger.com.