Ada beberapa cara Agar Blog kita Auto Post ke Facebook dan Twitter, namun Cara berikut akan lebih mudah di aplikasikan bagi Sobat Blogger Pemula. Artikel ini Terinspirasi Pertanyaan Sobat Ochie Achmad Fauzi yang Tanya seperti ini :

gun punya artikel pas kita posting di blog trus langsung twitternya nge tweet sndri utk postingan baru kita ? atau fb juga gun. ada gan ?

Entah Kenapa Sobat satu ini menjadikan saya tempat Bertanya yang Paling Nyaman.

Auto Posting ke Twiiter dan FB maksudnya Yakni Jika kita Posting Artikel baru di Blog kita maka secara Otomatis juga di Posting Ke FB dan Twitter, dengan cara ini tentu lebih membuat tugas ngeblog lebih mudah dan tidak melelahkan. Selain itu bagi sobat yang sudah banyak teman di Facebook akan diuntungkan karena jika teman kita melihat status kita dan tertarik membacanya, maka traffic akan kita dapat.

Baiklah Mari kita Mulai saja, silahkan ikuti langkah berikut ini :

Pertama
Sobat mesti miliki Account Facebook dan Twitter dulu ( Masa mau Auto Post ke Twitter dan FB ga punya Accountnya )

Kedua
Silahkan menuju Situs Perantara Berikut ini : http://dlvr.it

Silahkan sobat Daftar dengan Mengklik Sign Up pada Pojok Atas Situs tersebut.

Ketiga
Sekarang silahkan Isi Feed yang telah disediakan sesuai Feed Blog yang ingin kita Auto Post seperti pada Gambar

Keempat
Silahkan Klik Logo Twitter atau Facebook untuk Koneksikan Account Sobat

Sekarang silahkan Masuklah ke Account Twitter atau Facebook SObat dan Terakhir Klik Autorize App untuk Twitter dan Klik Ijinkan Untuk Fb

Kelima
Untuk Facebook kita diberikan Pilihan Apakah feed blog akan di Tampilkan di Status Profile ataukah di Fun Page FB kita, silahkan Plih salah satunya.

Keenam
Sekarang Blog sobat untuk Artikel Terbarunya sudah Siap di Post ke Fb dan Twitter kita.
Untuk menambahkan Blog lain silahkan Sobat Klik add dan Prosesnya sama dengan Langkah ke Tiga, Kita Juga bisa tambahkan Social Bookmark lain tempat Autopost sesuai yang telah disediakan al :
Myspace | Tumblr | dan lain-lain.

Selamat Auto Post Sobat Sudah Jadi, Semoga Bermanfaat

Hello pengunjung FaceCopz , Kembali lagi berbagi tutorial blog, kali ini Saya akan berbagi Cara Membuat komentar admin berbeda dengan pengunjung.., dimana Komentar admin berbeda dengan komentar pengunjung memudahkan seorang membaca komentar...

Berikut ini langkah - langkah tersebut :

1. Login blogger
2. Rancangan, Edit Html, Centang menu Expand Template Widget
3. Simpan Kode berikut diatas kode ]]></b:skin>

/* ---------------
Admin Comment
---------------------------------- */
.comment-body-author {
background: #051547;
border:1px solid #999;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
margin-left:0;
margin-right:20px;
padding:7px;
color:#ffffff;
width: 500px;
}

Selanjutnya cari kode :

<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>

dan simpan kode berikut tepat diatas kode tadi:

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>

terakhir tambahkan kode </b:if> tepat dibawah kode yang dicari tadi sehingga kodenya menjadi seperti ini:

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p>
<data:comment.body/>
</p>
</b:if>
</dd>
</b:if>

Simpan template.............

Hello pengunjung FaceCopz ,Kali ini saya akan kembali membahas tentang tips dan trik blogspot. Dulu awalnya, saya pikir cuman di blog Wordpress saja yang bisa maintenance Ternyata Blogspot-pun bisa.
Just to share saja sob, kebetulan saya (Oktri Blog) ,Blogwalking dan mampir di kode-blogger terus ketemu dengan tips ini, jadi kali ini saya sempatkan untuk membahas tips dan trik blogspot again. Biasanya saat kita sedang meng-edit blog (apapun itu) pasti gak mau kan keliahatan kalau blog kita sedang diperbaiki, syukur-syukur kalo gak keliatan errornya waktu edit, lah kalo ada?? malu n gak enak dilihat kan sob ?? Nah, untuk mengatasi hal tersebut kita sebagai blogger setia (Blogspot) tentunya ada caranya, yaitu dengan Mode Maintenance.
Oke, silahkan lihat demonya Klik disini. Cara membuatnya-pun cukup mudah, hanya menggunakan kode CSS, pasti mudah dan gak ribet !!

Langsung Aja nich Ganti semua code yang ada di Edit HTML ,. tapi jangan lupa backup dulu template kamu ya ,..

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>   <head>     <b:include data='blog' name='all-head-content'/>     <b:if cond='data:blog.pageType == &quot;index&quot;'>     <title><data:blog.pageTitle/></title>     <b:else/>     <title><data:blog.pageName/> - <data:blog.title/></title>     </b:if> <meta content='Manitenance ini adalah sebuah blog yang dalam blog tersebut sedang dalam perbaikan' name='description'/> <meta content='Manitenance' name='keywords'/> <meta content='INDEX, FOLLOW' name='ROBOTS'/> <meta content='Klopototolia TJ' name='author'/>     <b:skin><![CDATA[/* ----------------------------------------------- Blogger Template Style Name       : Manitenance Style Klopototolia TJ Author     : Teguh Jaya Url Author : http://klopototolia.blogspot.com ----------------------------------------------- */ * { margin: 0; padding: 0; } body{ background:#000; font-family:Courier New; margin:250px auto; width:700px; color:#009900; } a{text-decoration:none;color:#009900;} a:hover{text-decoration:line-through;color:#009900;} .text { font-size:12px; } ]]></b:skin> <link href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiizWHtcer5BLglen_ltrpok-PE3T2qoVBPteF_zY21Q3PY0ob7JyV-k-beJjHGG2TpXQ8ZAeY3nFmRlNYpaXN6Bu5qsjZsItLky4A6tt8_GnBRmbffWjyaiwZTuDu452Jg1xeKSo5X65hD/s1600/hacking.gif' rel='shortcut icon'/>   </head>   <body>   <div class='text'> <center><p>Maaf yah,... (ScaredCopz ) Sudah Pindah !!!</p> <p>Jika Sobat ingin ke blog saya silah kan klik link di bawah Ini</p> <h2>By : Abenk-xp</h2> <p/> <p/> <p/> <p><a href='http://facecopz.blogspot.com/' title='Back'>Scaredcopz</a></p> </center> </div> </body> </html>
               

Simpan dan lihat hasilnya ,.

Hello Pengunjung FaceCopz ,Pada Kali Ini Blog Saya Akan Membuat Artikel Tentang Blog Lagi. Pada Tutorial ini akan Menjelaskan Pada Sobat Semua Tentang Bagaimana Membuat Menu Slide melayang di bagian kiri blog dengan css , Menu Slide Yg Saya Maksud Ini Adalah Menu yg Sekarang Saya gunakan Agar Pengunnjung Bisa Mengetahui facebook,twitter,salingsapa,dan plurk saya.. biar banyak yg nge add saya.. hehehhe.. Nah Menu itu Terletak Dibagian Kiri Blog saya., Menu ini Hanya Menggunakan Css, Jadi Sobat Semua Jangan Khawatir Blog Sobat Akan Lelet dalam Loadingnya, Karna Menu Ini Hanya Menggunakan Css yg Ramah Lingkungan.. wkwkwkw.. Kaya Motor Berbahan Gas aja.. Rmah Lingkungan eheehheh

Oke Langsung saja Bagaimana Langkah -Langkah Membuatnya :

1. Login Ke Akun Blogger Sobat
2. Pada Dasbor Pilih Rancangan/Design Kemudian Pilih Tambah Gadget/Add Gadget Dan Pilih Yg HTML/JAVASCRIPT
3. Copas Kode Berikut Didalamnya

<style>#facebook-oktri,#twitter-oktri,#salingsapa-oktri,#plurk-oktri{text-align:center;-o-transition: all 0.4s ease-in;-moz-transition: all 0.4s ease-in;-webkit-transition: all 0.4s ease-in;z-index: 1000;font-family:arial;width:150px;position: fixed;left:0;margin-left:-120px;border:1px solid #ffffff;background-position:top right no-repeat;padding:5px;font:15px Arial;color:#eee;border-top-right-radius:8px;border-bottom-right-radius:8px;-moz-border-radius-topright:8px;-moz-border-radius-bottomright:8px;-webkit-border-top-right-radius:8px;-webkit-border-bottom-right-radius:8px;}#facebook-oktri {background:-moz-linear-gradient(top,#001C5A,#001551);background: -webkit-gradient(linear, left top, left bottom, from(#001C5A), to(#001551));top:350px;}#facebook-oktri:hover,#twitter-oktri:hover,#salingsapa-oktri:hover,#plurk-oktri:hover{width:150px;opacity:1.0;margin-left:0;cursor:hand}#facebook-oktri a:hover,#facebook-oktri a:visited,#twitter-oktri a:hover,#twitter-oktri a:visited,#salingsapa-oktri a:hover,#salingsapa-oktri a:visited,#plurk-oktri a:visited,#plurk-oktri a:hover{text-shadow:none;color:#ffffff}#twitter-oktri {background:-moz-linear-gradient(top,#67C9E9,#029BC5);background: -webkit-gradient(linear, left top, left bottom, from(#67C9E9), to(#029BC5));top:382px;}#salingsapa-oktri{background: #51A104 -moz-linear-gradient(top,#51A104,#000);background: -webkit-gradient(linear, left top, left bottom, from(#51A104), to(#000));top:414px;}#plurk-oktri,#changeoktrihtc ul li{background: -moz-linear-gradient(top, #AF0000, #6B0000);background: -webkit-gradient(linear, left top, left bottom, from(#AF0000), to(#6B0000));}#plurk-oktri {top:446px;}</style>
<div id='plurk-oktri'><a href='http://www.plurk.com/'target='_blank'>Plurk</a></div>
<div id='salingsapa-oktri'><a href='http://www.salingsapa.com/index.php?p=u/oktri'target='_blank'>Salingsapa</a></div>
<div id='facebook-oktri'><a href='http://id-id.facebook.com/oktridarmadi'target='_blank'>Facebook</a></div>
<div id='twitter-oktri'><a href='http://twitter.com/oktridarmadi'target='_blank'>twitter</a></div>

1. Simpan Dan Lihat Hasilnya
   
   Perhatian : Jika Menu Slide Tidak Meuncul Sobat Bisa menaruh KOdenya Dibawah Kode <body>
   
   CATATAN : Ubah KOde Yg Berwarna merah Dengan Url/Link Sobat inginkan
   Dan Ubah Yg Berwarna Hjau Dengan Judul Yg sobat inginkan Bila Sobat Mengerti Css Sobat Bisa mengotak-atik cssnya sesuai selera sobat

ada Postingan sebelumnya Cara Membuat Buku Tamu Model Sliding,
Pada Postingan ini yaitu membuat buku tamu bisa dikatakan keren karena sebelumnya ada yang menanyakan tutorial ini,langsung saja

1. Siapkan kode Buku tamu Chat anda.

2. Rancangan -> Tambah Gadget ->
pilih HTML/JavaScript



3. Masukkan kode yang ada di bawah ini
ke dalam kontennya kemudian

<script>
$(document).ready(function() {
//select all the a tag with name equal to syam

$('a[name=syam]').click(function(e) {

//Cancel the link behavior

e.preventDefault();


//Get the A tag

var id = $(this).attr('href');


//Get the screen height and width

var moveHeight = $(document).height();

var moveWidth = $(window).width();


//Set heigth and width to move to fill up the whole screen

$('#move').css({'width':moveWidth,'height':moveHeight});


//transition effect

$('#move').fadeIn(500);

$('#move').fadeTo("slow",0.5);


//Get the window height and width

var winH = $(window).height();

var winW = $(window).width();


//Set the popup window to center

$(id).css('top', winH/2-$(id).height()/2);

$(id).css('left', winW/2-$(id).width()/2);


//transition effect

$(id).fadeIn(1000);


});


//if close button is clicked

$('.window .close').click(function (e) {

//Cancel the link behavior

e.preventDefault();



$('#move').hide();

$('.window').hide();

});



//if move is clicked

$('#move').click(function () {

$(this).hide();

$('.window').hide();

});



});

</script>

<style>a {color:#ffffff; text-decoration:none}
img { border: none; }
#move {

position:absolute;

left:0;

top:0;

z-index:5000;

background-color:#000;

display:none;

}



#house .window {

position:fixed;

left:0;

top:0;

width:330px;

height:479px;

display:none;

z-index:9999;

padding:0px 100px 0px 0px;

}
#house #shoutmix {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFkPOGkMipo1RrPSLOFMeiJPkQS41PHzpABCE9ccWRQrkpKV4F5eN7wWtoP6DzXT5ST9yj_WQQ2mlehwffWLb1hwQbp5VvSztkoKsihUgwOP1-u_jHUOOhsuDJQT7w53_1_Z4jLVvky6P4/) no-repeat 0 0 transparent;

width:330px;

height:479px;

padding:83px 0px 0px 0px;

}
#closed {

padding:2px 0 0 0;

}

</style>


<ul><div style='display:scroll; position:fixed; top:130px; right:3px;'>

<a href="#shoutmix" name="syam"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgytK8AVfAheq-jnWdOB8ZLloeYrgmE_ZTh-yd2-1t9euEhgYO-X4DBakAvwHROq3-lLtAq9RMAL0rUJSyMxIY7nTw67UoqYBk6w8ba7LgALIHPYWuLFsavYJ44HT8Ig6WRK4yGWNg7QbY/s128/template_tamu.gif" width="34" height="125" /></a>
</div>
</ul>

<div id="house">

<!-- Start Shoutmix -->

<center>

<div id="shoutmix" class="window">

Masukan kode buku tamu disini


<div id="closed"><input type="button" value="Close Here" class="close" /></div>

</div></center></div><!-- End Shoutmix -->

<div id="move"></div>

<!-- End of Shoutmix light effect -->

simpan dan anda lihat hasilnya.