IKLAN BULAN INI

Saturday, 15 June 2013

Widget Recent Comments dengan gaya Message Windows 8

Windows 8 resmi dirilis pada akhir Oktober lalu dan membuat dunia menggelegar. dan untuk saat ini saya kan memberikan widget Recent Comments bergaya Message Windows 8, Widget ini menurut saya sangat keren, widget ini menggunakan CSS dan JavaScript. Langsung saja Lihat cara Memasang Widget Recent Comments dengan gaya Message Windows 8.


Langkah 1 : Tambahkan kode berikut sebelum tag ]]> </ b:> skin dalam template Anda.
#rc-avatar-plus ul{border:1px solid #bbb;background:#fff!important;padding:10px!important;word-wrap:break-word}
#rc-avatar-plus li{margin:0!important;border:0!important;background:transparent!important;padding:0 0 10px!important;list-style-type:none!important}
#rc-avatar-plus .rc-info{width:20%}
#rc-avatar-plus img{padding:0!important;width:100%}
#rc-avatar-plus h4{margin:5px 0!important}
#rc-avatar-plus a{position:relative;width:70%;padding:5px}
#rc-avatar-plus a,#rc-avatar-plus a:hover{color:#fff!important;text-decoration:none}
#rc-avatar-plus a:after{content:"";position:absolute;top:10px;width:0;height:0;line-height:0}
#rc-avatar-plus p{margin:0 0 5px;padding:0}
#rc-avatar-plus .rc-author .rc-info,#rc-avatar-plus .rc-admin a{float:left}
#rc-avatar-plus .rc-admin .rc-info,#rc-avatar-plus .rc-author a,#rc-avatar-plus span{float:right}
#rc-avatar-plus .rc-author a{background:#8b0094}
#rc-avatar-plus .rc-author a:after{left:-10px;border-top:10px solid #8b0094;border-left:10px solid transparent}
#rc-avatar-plus .rc-admin a{background:#1eadfe}
#rc-avatar-plus .rc-admin a:after{right:-10px;border-top:10px solid #1eadfe;border-right:10px solid transparent}
Langkah 2: Tambahkan 1 widget HTML / Javascript di mana Anda ingin menampilkan Recent Comments . Mengedit teks dan paste kode berikut ke dalam konten dan pilih SIMPAN .
<div id='rc-avatar-plus'>
<script type='text/javascript'>
var copyright_by_duypham_dot_info='Recent Comments free version 3.0 by http://duypham.info';
nc=4;
length_name=30;
length_content=90;
no_avatar='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPuD8glJiTTp7oa1o4WvLJb-owtZAtWzlClU0vj_4LS9NkMUFL3fL20YQYntYdk07bhLYE1NsAp9PpYaTeKdPH_E4-3G-ijw1twF2JzOd_Ym-h4CYiwTOLNP919USTenpXHwAOSUzSAQQ/s90/no-avatar.png';
on='on';
home_page='';
admin_uri='';
admin_avatar='';
var dp=['S b=["\\E\\H\\P\\s\\M\\f\\A","\\M\\e\\e\\s\\1B\\r\\r","\\Z","\\n\\q\\I\\v","\\M\\j\\h\\I","\\1k\\A\\D\\1A","\\n\\q\\E\\h\\U\\1J\\I","\\r\\s\\r","\\k\\s\\l\\n\\e","\\w","\\j\\h\\s\\l\\f\\m\\h","","\\k\\H\\V\\k\\e\\j\\n\\q\\L","\\e\\v\\2B\\s\\s\\h\\j\\1p\\f\\k\\h","\\1a\\e","\\e\\n\\e\\l\\h","\\I\\h\\h\\E","\\v\\s\\h\\q\\2C\\h\\f\\j\\m\\M\\1a\\e\\v\\e\\f\\l\\1K\\h\\k\\H\\l\\e\\k","\\H\\j\\n","\\f\\H\\e\\M\\v\\j","\\k\\j\\m","\\L\\E\\1a\\n\\A\\f\\L\\h","\\h\\q\\e\\j\\P","\\l\\h\\q\\L\\e\\M","\\l\\n\\q\\1g","\\r","\\e\\M\\j\\1a\\n\\q\\J\\j\\h\\s\\l\\P\\J\\e\\v","\\K\\f\\l\\H\\h","\\L\\E\\1a\\h\\U\\e\\h\\q\\E\\h\\E\\1H\\j\\v\\s\\h\\j\\e\\P","\\m\\v\\q\\e\\h\\q\\e","\\k\\H\\A\\A\\f\\j\\P","\\T\\1D\\2A\\2z\\2v\\1n\\1t","\\l\\f\\k\\e\\1L\\q\\E\\h\\U\\1J\\I","\\T\\1D\\1q\\1C\\1C\\1t","\\q\\f\\A\\h","\\M\\e\\e\\s\\1B\\r\\r\\n\\A\\L\\1q\\Z\\V\\l\\v\\L\\V\\l\\v\\L\\Z\\m\\v\\A\\r\\n\\A\\L\\r\\V\\l\\f\\q\\1g\\Z\\L\\n\\I","\\q\\v\\w\\f\\K\\f\\e\\f\\j","\\C\\k\\m\\j\\n\\s\\e\\w\\e\\P\\s\\h\\D\\x\\e\\h\\U\\e\\r\\1c\\f\\K\\f\\k\\m\\j\\n\\s\\e\\x\\B\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1n\\2x\\2y\\1t\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\1P\\j\\n\\e\\h","\\C\\k\\m\\j\\n\\s\\e\\w\\e\\P\\s\\h\\D\\x\\e\\h\\U\\e\\r\\1c\\f\\K\\f\\k\\m\\j\\n\\s\\e\\x\\w\\k\\j\\m\\D\\x","\\r\\I\\h\\h\\E\\k\\r","\\r\\m\\v\\A\\A\\h\\q\\e\\k\\r\\E\\h\\I\\f\\H\\l\\e\\1k\\f\\l\\e\\D\\1c\\k\\v\\q\\J\\n\\q\\J\\k\\m\\j\\n\\s\\e\\T\\A\\f\\U\\J\\j\\h\\k\\H\\l\\e\\k\\D\\1A\\T\\m\\f\\l\\l\\V\\f\\m\\1g\\D\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1n\\x\\B\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\1K\\h\\m\\h\\q\\e\\w\\1p\\v\\A\\A\\h\\q\\e\\k\\w\\I\\j\\h\\h\\w\\K\\h\\j\\k\\n\\v\\q\\w\\1C\\Z\\1A\\w\\V\\P\\w","\\r\\I\\h\\h\\E\\k\\r\\m\\v\\A\\A\\h\\q\\e\\k\\r\\E\\h\\I\\f\\H\\l\\e\\1k\\f\\l\\e\\D\\1c\\k\\v\\q\\J\\n\\q\\J\\k\\m\\j\\n\\s\\e\\T\\A\\f\\U\\J\\j\\h\\k\\H\\l\\e\\k\\D","\\T\\m\\f\\l\\l\\V\\f\\m\\1g\\D\\j\\m\\1v\\f\\K\\f\\e\\f\\j\\1q\\x\\B\\C\\r\\k\\m\\j\\n\\s\\e\\B","\\C\\H\\l\\B","\\1p\\v\\A\\A\\h\\q\\e\\k\\w\\v\\q\\w","\\1B\\w","\\1D\\m","\\m\\v\\A\\A\\h\\q\\e\\1H\\f\\L\\h\\D","\\T","\\1k","\\C\\l\\n\\w\\m\\l\\f\\k\\k\\D\\x","\\j\\m\\J\\f\\E\\A\\n\\q","\\j\\m\\J\\f\\H\\e\\M\\v\\j","\\x\\B\\C\\E\\n\\K\\w\\m\\l\\f\\k\\k\\D\\x\\j\\m\\J\\n\\q\\I\\v\\x\\B\\C\\n\\A\\L\\w\\f\\l\\e\\D\\x","\\x\\w\\m\\l\\f\\k\\k\\D\\x\\j\\m\\J\\f\\K\\f\\e\\f\\j\\x\\w\\k\\j\\m\\D\\x","\\x\\r\\B\\C\\M\\1G\\B","\\C\\r\\M\\1G\\B\\C\\r\\E\\n\\K\\B\\C\\f\\w\\M\\j\\h\\I\\D\\x","\\x\\w\\j\\h\\l\\D\\x\\q\\v\\I\\v\\l\\l\\v\\1P\\x\\w\\e\\n\\e\\l\\h\\D\\x","\\w\\v\\q\\w","\\x\\B\\C\\s\\B","\\C\\r\\s\\B","\\e\\j\\H\\h","\\C\\k\\s\\f\\q\\B","\\C\\r\\k\\s\\f\\q\\B","\\C\\r\\f\\B\\C\\E\\n\\K\\w\\m\\l\\f\\k\\k\\D\\x\\m\\l\\h\\f\\j\\x\\B\\C\\r\\E\\n\\K\\B\\C\\r\\l\\n\\B","\\C\\r\\H\\l\\B","\\n\\q\\q\\h\\j\\2i\\2j\\2q\\2r","\\j\\m\\J\\f\\K\\f\\e\\f\\j\\J\\s\\l\\H\\k","\\L\\h\\e\\2m\\l\\h\\A\\h\\q\\e\\2P\\P\\1L\\E"];1f=0;u=0;X=[];d=[];p=[];Y=[];1j=[];1x=[];t=[];1o=[];1u=[];a=[];W=[];1l=[];1h=[];1s=[];1m=[];1R=b[0];1S=b[1];1T=b[2];1Y=b[3];1M=3b[b[4]];y=1M[b[6]](b[5]);1w 2T(1r){G(d[u][b[6]](b[7])!=-1){Y[u]=1;i=d[u][b[8]](b[7]);i=i[1];i=i[b[10]](/-/g,b[9]);i=i[b[10]](/.2S/,b[11]);1I=i[b[12]](0,1);1O=i[b[12]](1);i=1I[b[13]]()+1O;t[u]=i}N{o=1r[b[16]][b[15]][b[14]];t[u]=o;1N=1r[b[16]][b[17]][b[14]];i=2U((1N-1)/2Y)+1;Y[u]=i};u++};1w 2X(R){1f=R[b[16]][b[17]][b[14]];1x=R[b[16]][b[15]][b[14]];G(b[18]1i R[b[16]][b[19]][0]){1s=R[b[16]][b[19]][0][b[18]][b[14]]};1m=R[b[16]][b[19]][0][b[21]][b[20]];1W(g=0;(g<1z)&&(g<1f);g++){c=R[b[16]][b[22]][g];G(g==R[b[16]][b[22]][b[23]]){2W};X=c[b[24]][0][b[4]];X=X[b[8]](b[25]);1X=X[5];1E=X[8];d[g]=c[b[26]][b[4]];G(y!=-1){d[g]=d[g]+b[5]};1o[g]=c[b[28]][0][b[27]];1u[g]=c[b[28]][1][b[27]];p[g]=1E;G(b[29]1i c){S F=c[b[29]][b[14]]}N{G(b[30]1i c){S F=c[b[30]][b[14]]}N{S F=b[31]}};F=F[b[10]](/<3c \\/>/g,b[9]);F=F[b[10]](/@<a.*?a>/g,b[11]);F=F[b[10]](/<[^>]*>/g,b[11]);G(F[b[23]]<1Q){1j[g]=F}N{F=F[b[12]](0,1Q);S 1e=F[b[32]](b[9]);F=F[b[12]](0,1e);1j[g]=F+b[33]};Q=c[b[19]][0][b[34]][b[14]];G(Q[b[23]]<1F){a[g]=Q}N{Q=Q[b[12]](0,1F);S 1e=Q[b[32]](b[11]);Q=Q[b[12]](0,1e);a[g]=Q+b[33]};G(b[18]1i c[b[19]][0]){1h[g]=c[b[19]][0][b[18]][b[14]]};G(c[b[19]][0][b[21]][b[20]]==b[35]){W[g]=2n;1l[g]=b[36]}N{W[g]=c[b[19]][0][b[21]][b[20]];1l[g]=a[g]};G(d[g][b[6]](b[7])!=-1){1d[b[38]](b[37])}N{1d[b[38]](b[39]+1U+b[2V]+1X+b[3a])}}};G(2R==b[2Z]+1S+1R+1T+1Y){1d[b[38]](b[39]+1U+b[2Q]+1z+b[2l])};1w 2k(){S O=b[11];O+=b[2o];1W(z=0;(z<1z)&&(z<1f);z++){t[z]=t[z][b[10]](b[2p]+1x+b[2s],b[11]);S 1b=b[11];G(Y[z]==1){1b=b[1V]}N{1y=b[2c]+Y[z]+b[1V];G(y!=-1){1b=b[2b]+1y}N{1b=b[2a]+1y}};O+=b[1Z];G(((1h[z]==1s)&&(W[z]==1m))||((1h[z]==2d)&&(W[z]==2e))){O+=b[2h]}N{O+=b[2g]};O+=b[2f]+1l[z]+b[2t]+W[z]+b[2u]+a[z]+b[2J]+d[z]+1b+p[z]+b[2I]+a[z]+b[2H]+t[z]+b[2G]+1j[z]+b[2K];G(1o[z]!=b[2L]){O+=b[2O]+1u[z]+b[2N]};O+=b[2M]};O+=b[2F];1d[b[2E]](b[2w])[b[2D]]=O};',"|","split","|||||||||||_0x2dd0|||x74|x61||x65||x72|x73|x6C|x63|x69|||x6E|x2F|x70|||x6F|x20|x22|||x6D|x3E|x3C|x3D|x64|_0xd75bx5|if|x75|x66|x2D|x76|x67|x68|else|_0xd75bx8|x79|a2|_0xd75bx4|var|x26|x78|x62|im|lk|pn|x2E|||||||||||x24|_0xd75bx9|x6A|document|_0xd75bx6|tt|x6B|ur|in|j2|x3F|alt|ima|x32|pi|x43|x31|_0xd75bx2|ura|x3B|ti|x5F|function|tb|cp|nc|x30|x3A|x33|x23|cid|length_name|x34|x50|str1|x4F|x52|x49|a3|num|str2|x77|length_content|ad|loc|dot|home_page|48|for|pid|inf|52|||||||||||51|50|49|admin_uri|admin_avatar|55|54|53|x48|x54|rc_avatar|44|x45|no_avatar|45|46|x4D|x4C|47|56|57|x39|69|x28|x29|x35|x38|x55|x53|68|70|67|61|60|59|58|62|63|66|65|64|x42|43|copyright_by_duypham_dot_info|html|rc_avatar2|parseInt|40|break|rc_avatar1|200|42|||||||||||41|location|br","","fromCharCode","replace","\\w+","\\b","g"];eval(function(d,e,a,c,b,f){b=function(a){return(a<e?dp[4]:b(parseInt(a/e)))+(35<(a%=e)?String[dp[5]](a+29):a.toString(36))};if(!dp[4][dp[6]](/^/,String)){for(;a--;)f[b(a)]=c[a]||b(a);c=[function(a){return f[a]}];b=function(){return dp[7]};a=1}for(;a--;)c[a]&&(d=d[dp[6]](RegExp(dp[8]+b(a)+dp[8],dp[9]),c[a]));return d}(dp[0],62,199,dp[3][dp[2]](dp[1]),0,{}));
</script>
<script type='text/javascript'>rc_avatar();</script>
</div>
Selamat: Anda telah berhasil Memasang Widget Recent Comments dengan gaya Message Windows 8
Read more ...

Bagaimana Menambahkan Tombol Print di Blogger

Memungkinkan pengguna untuk mencetak posting blog Anda hanya dengan satu klik adalah sesuatu yang keren. Di sisi lain, hampir semua browser menyediakan fleksibilitas untuk mencetak halaman web dengan hanya pergi ke "File" dan "Print". Orang yang berbeda memiliki pilihan yang berbeda dan orang yang berbeda ingin memiliki fitur cetak pada posting blog mereka untuk alasan yang berbeda. Anda mungkin hanya ingin menambahkan cara benua. Ketika pengguna dapat mencetak posting Anda dengan hanya satu klik maka mengapa mereka harus melakukan beberapa proses rumit? Pada artikel ini, kami akan menunjukkan Bagaimana Menambahkan Tombol Print di Blogger.

Hal pertama yang Anda akan lakukan adalah untuk login ke Dashboard Blogger Anda. Sekarang Setelah log in, pergi ke blog >> Template >> Edit HTML >> Cari <div class='post-header-line-1'/> dan di atasnya paste kode berikut. Setelah semuanya selesai, tekan "Save Template" tombol untuk menyimpulkan proses.
<div style="float: left; padding-left: 10px;">
<a href="javascript:window.print()" rel="nofollow">Print this Article</a></div>
Sekarang untuk memberikan tombol Anda sentuhan yang indah, Anda perlu menyesuaikannya dengan sedikit CSS. Anda dapat membuat segala jenis gambar menggunakan populer mengedit atau deigning alat Seperti Photoshop foto dan hanya dapat menerapkan CSS sederhana untuk membuatnya bekerja. Berikut ini adalah contoh kecil bagaimana Anda dapat menyesuaikan dgn mode cetak tombol itu.
<div style="float: left; padding-left: 10px;">
<a href="javascript:window.print()" rel="nofollow"><img src="http://1.bp.blogspot.com/-vw5LhfD0cTI/UPLhsZx8ksI/AAAAAAAAAdo/w7Aqf4eEstA/s1600/images.jpg" /></a></div>
Selamat: Anda telah berhasil belajar Bagaimana Menambahkan Tombol Print di Blogger. Tidak hanya itu, tetapi Anda juga dapat menyesuaikan dgn mode sesuai dengan kebutuhan keinginan Anda. Anda juga dapat melihat posting Anda untuk melihat segala sesuatu bekerja dalam urutan atau tidak.

Kami harap tutorial ini telah difasilitasi untuk memahami Bagaimana Menambahkan Tombol Print di Blogger. Apa penilaian Anda tentang menambahkan tombol Print ke blog Anda? Apakah itu adalah nilai untuk menggunakan tombol ini atau itu hanya membuang-buang ruang? Marilah kita tahu apa yang Anda pikirkan tentang hal itu. 
Read more ...

Friday, 14 June 2013

Bagaimana Menambahkan Navigasi Keyboard di Blog Blogger Anda

Salah satu pengguna kami baru-baru ini bertanya bagaimana kita menambahkan navigasi keyboard dalam posting blog Blogger. Standar template Blogger menampilkan tautan navigasi melalui lama dan baru Link posting yang biasanya muncul di bagian paling bawah halaman Blogger dicapai. Namun, kami telah melihat banyak WordPress serta situs berbasis HTML yang digunakan navigasi Keyboard Dari pengalaman dan pengetahuan kami, navigasi keyboard cepat, handal dan nyaman. Hari ini di artikel ini, kami akan menunjukkan Bagaimana Menambahkan Navigasi Keyboard di Blog Blogger Anda.

Metode ini bekerja dengan JavaScript, sehingga membuatnya jauh lebih mudah untuk menerapkan dan membuatnya aman. Namun, itu akan berhenti bekerja jika seseorang akan mematikan JavaScript, sehingga ada beberapa kelemahan yang perlu Anda ketahui sebelum menerapkannya ke blog atau website Anda. Ia bekerja cukup baik pada Homepage, halaman Arsip dan bahkan halaman posting. Yang perlu Anda lakukan adalah untuk Tekan tombol panah kiri dan kanan untuk menavigasi.

Catatan: Jika Anda ingin menavigasi ke halaman berikutnya, Anda akan tekan tombol "Kanan Arrow Key" dan ketika Anda ingin menavigasi ke halaman sebelumnya, Anda akan tekan tombol "Left Arrow Key" terletak pada keyboard Anda.

Sebelum Anda mempelajari cara kerjanya, Mari kita lihat Demo Here

Hal pertama yang perlu Anda lakukan adalah untuk login ke dashboard blogger Anda. Sekarang pergi ke Blog Anda >> Template >> Edit HTML dan cari berakhir </ head> tag. Setelah menemukan tag, hanya di atasnya paste coding JavaScript berikut. Setelah semuanya dilakukan tekan tombol "Simpan template" tombol yang terletak di bagian bawah untuk menyimpulkan.
<script type='text/javascript'>
window.onload = function()
{
document.onkeyup = function(event)
{
if (document.activeElement.nodeName == 'TEXTAREA' || document.activeElement.nodeName == 'INPUT') return;
event = event || window.event;
switch(event.keyCode)
{
case 37:
var newerLink = document.getElementById('Blog1_blog-pager-newer-link');
if(newerLink !=null) window.location.href = newerLink.href;
break;
case 39:
var olderLink = document.getElementById('Blog1_blog-pager-older-link');
if(olderLink!=null) window.location.href = olderLink.href;
}
};
};
</script>
Selamat: Itu saja, sekarang mengunjungi blog Anda dan Tekan salah "Kiri" atau "Kanan" tombol panah untuk melihat bagaimana semuanya bekerja dengan sempurna. Hal ini sangat responsif dan bekerja dengan cukup baik.

Banyak pengguna masih percaya bahwa menggunakan JavaScript dapat menyebabkan kelambatan, tapi ini bukan apa yang kita harus berpikir. Jika naskah dioptimalkan dengan benar, maka tidak ada cara itu bisa mempengaruhi kecepatan situs Anda. Di sini, di Tempat Blogging, kami menggunakan lebih dari 20 file JavaScript, namun kecepatan halaman masih 90 + dari 100.

Kami harap tutorial ini telah membantu Anda untuk memahami Bagaimana Menambahkan Navigasi Keyboard di Blog Blogger Anda. Apa sistem navigasi yang Anda gunakan? Marilah kita tahu apa yang Anda pikirkan tentang tutorial ini? Jangan ragu untuk meninggalkan saran Anda di komentar di bawah. 
Read more ...

Bagaimana Meningkatkan Pencarian Anda dengan Social Media

Bagaimana Meningkatkan Pencarian Anda dengan Social Media - Perubahan terbaru di Google membuat media sosial penting untuk kebanyakan bisnis saat ini.

Apakah Anda puas dengan lalu lintas yang datang ke blog atau website?

Menjaga uptodate dengan perubahan dalam optimasi mesin pencari - atau SEO - akan membantu Anda menggunakan media sosial untuk keuntungan bisnis Anda.


Google Menempatkan Spotlight di Media Sosial


Tahun ini, Google merilis Google "Penguin" update, salah satu yang terbaru dalam serangkaian modifikasi algoritma yang dirancang untuk menghilangkan spam dari halaman hasil mesin pencari.

Terlepas dari apakah atau tidak arus lalu lintas situs Web Anda dipengaruhi oleh perubahan ini, penting untuk memahami apa perubahan ini melibatkan dan mengapa hal itu terjadi. Anda kemudian dapat mengimbangi perubahan ini dengan mengadopsi media sosial ke dalam strategi pemasaran Anda. Ditingkatkan fokus Google pada menyiangi spam web adalah mungkin mengakibatkan update lebih lanjut di masa depan.

Update Penguin melibatkan tiga tujuan untuk mengurangi dampak SEO pada elemen pemasaran web berikut:


  • Low-nilai dan backlink website diproduksi
  • On-site over-optimasi
  • "Black hat" atau teknik SEO tidak etis


Webmaster yang menggunakan platform jaringan sosial untuk mempromosikan website mereka prihatin terutama dengan item yang terdaftar pertama - kehadiran artifisial diciptakan backlink. Setelah pengenalan Penguin, pembangunan backlink alam harus kursus utama untuk webmaster.

Meningkatkan SEO website Anda dengan membiasakan diri dengan teknik pemasaran media sosial.

# 1: Menghasilkan Ide Konten kuat


Pemasaran digital di web pasca-Penguin perlu "alami" dan tidak artifisial diproduksi. Meskipun ini adalah metode utama praktek SEO di masa lalu, situs Anda harus, sebaliknya, akan diizinkan untuk mendapatkan link alami - seolah-olah Anda lakukan benar-benar tidak ada pekerjaan promosi apapun.

Membangun backlink alami mengharuskan Anda hanya mempublikasikan konten berkualitas tinggi - konten yang orang akan cenderung untuk berbagi "alami" pada jaringan media sosial. Cukup menghasilkan konten biasa-biasa saja tidak memberikan pembaca insentif untuk berbagi konten Anda, sehingga sulit untuk mendapatkan backlink penting untuk peringkat tinggi dalam hasil pencarian alami.

Situs jaringan sosial, seperti Twitter, yang besar untuk menemukan ide-ide untuk pemasaran buah dan konten masa depan. Misalnya, Anda dapat memasukkan serangkaian petunjuknya ke Twitter bar pencarian untuk mengungkap topik komunitas Anda tertarik


Coba masukkan perintah berikut ke Twitter bar pencarian, mengganti teks kuotasi dengan kata kunci industri:


  • "Bagaimana" + kata kunci
  • "Mengapa" + kata kunci
  • "Pertanyaan" + kata kunci
  • + Kata kunci "?"


Mempelajari hasil pencarian yang tidak termasuk link keluar, karena ini sering promosi diri di alam. Juga, memperhatikan hasil yang telah retweeted, karena ini membenarkan banding penonton.

Setelah mengidentifikasi beberapa topik artikel yang potensial, menghasilkan konten yang berkualitas pada subjek. Promosikan posting Anda menggunakan teknik berikut:

# 2: Kehadiran Media Sosial Mendorong Backlink Building


Dalam beberapa tahun terakhir Google dan Bing telah meningkatkan fokus mereka pada pelacakan link bersama di publik pada Facebook dan Twitter, membuat situs jejaring sosial tempat yang bagus untuk membangun backlink alami untuk website Anda.

Tindakan Anda harus mendorong terciptanya backlink. Untuk memberikan insentif pembaca Anda untuk berbagi konten Anda dan menciptakan link ini berharga, Anda akan ingin melakukan hal berikut:


  • Membangun jaringan Anda di situs jaringan sosial seperti Facebook dan Twitter. Situs-situs memungkinkan konten Anda untuk dilihat oleh khalayak yang lebih luas, sehingga lebih banyak kesempatan bagi link untuk dibagikan.
  • Hubungkan blog Anda ke Facebook dan account Twitter sehingga link baru dibuat pada profil Anda secara otomatis untuk setiap posting baru Anda buat. Ada alat yang dirancang khusus untuk tujuan ini.
  • Gunakan alat-update penjadwalan seperti Buffer untuk membuat pengumuman ulangi posting blog baru, yang memungkinkan Anda untuk menjangkau pengguna yang memiliki pola yang berbeda dari aktivitas online.


Selain itu, Anda akan ingin membuat laman Google+ Anda. Ada beberapa indikasi bahwa jumlah "+1" penilaian pada artikel yang diterima merupakan faktor yang berbobot dalam algoritma peringkat pencarian alami. Bahkan meningkatkan kehadiran Anda di Google+ adalah cara untuk memastikan SEO kuat untuk website Anda.


# 3: Mengikuti Social Media


Item terakhir yang perlu dipertimbangkan ketika menggunakan situs media sosial untuk melindungi diri dari masa depan pembaruan yang menyerupai Penguin adalah potensi untuk lalu lintas jaringan sosial untuk meminimalkan ketergantungan Anda pada pengunjung dari Google dan mesin pencari lainnya.

Untuk menunjukkan pentingnya ini, lihat daftar berikut beberapa yang terbesar pasca-Penguin kehilangan, disusun oleh perusahaan web data Searchmetrics.


Perhatikan dengan persentase penurunan kolom, khususnya lottostrategies.co, yang mengalami penurunan 96% dalam visibilitas SEO. Jika hanya mencari lalu lintas dari Google adalah sumber utama situs untuk audiens, update Penguin bisa secara dramatis menurunkan pendapatan perusahaan.

Untuk menghindari menyelam seperti ini, Anda akan ingin mendiversifikasi basis lalu lintas selain meningkatkan jumlah pengunjung website Anda terima dari platform media sosial dengan:


  • Termasuk tombol berbagi sosial di bagian atas dan bawah setiap posting blog di website Anda. Anda juga bisa menggunakan opsi bergulir yang bergerak bawah halaman bersama pembaca Anda. Yang penting adalah memiliki tombol ini terlihat.
  • Tambahkan banding langsung ke pembaca Anda pada akhir setiap posting blog atau newsletter email untuk mendorong mereka untuk berbagi artikel Anda di profil jaringan sosial mereka jika mereka telah menemukan mereka berguna.
  • Gunakan media sosial untuk merek diri sebagai figur otoritatif dalam industri Anda.


Diakui sebagai "pergi-untuk" sumber daya dalam industri apapun menawarkan manfaat potensial dari sudut pandang generasi lalu lintas serta itu menguntungkan peringkat pencarian Anda. Setelah Anda diakui, situs Anda harus secara alami menarik pengunjung reguler dan arahan. Dan pengunjung setia adalah sumber besar lalu lintas yang tidak terpengaruh oleh perubahan Google.

Apa tindakan pemasaran media sosial yang Anda ambil untuk meminimalkan dampak dari pembaruan mesin pencari?
Read more ...

Thursday, 13 June 2013

CSS3 Efek Gambar Peel Untuk Blogger

Pada artikel ini Tempat Blogging akan menjelaskan bagaimana menambahkan CSS3 Efek Gambar Peel Untuk Blogger. Anda dapat menambahkan widget ini ke sidebar Anda. Jika Anda ingin, Anda dapat menambahkan link ke gambar. Tempat Blogging menggunakan CSS dan HTML untuk widget ini. Anda dapat menggunakan gambar Anda sendiri dengan mengubah link saya sebutkan akhir kode. Anda dapat mengikuti langkah ini untuk menambahkan ke blog Anda.


  1. Login ke blogger.com
  2. Masuk ke bagian Layout / Design
  3. Klik Tambahkan Widget.
  4. Pilih HTML/Javascript.
  5. Copy Kode dibawah ini dan Pastekan di HTML/Javascript.

<style type="text/css">
a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 650px;
height: 434px;
}
a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
z-index: 2;
clip: rect(0,650px,434px,0);
}
a.nowandthen img:nth-of-type(2){
z-index: 1;
}
a.nowandthen:hover img:nth-of-type(1){
clip: rect(0,0,434px,0);
opacity: 0;
}
</style>
<a class="nowandthen" href="http://www.blogger.com/null">
 <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCRbCYkClZq6uKnfvjMhYMSFNuZXRLcUSUDKa-O3FuPwghtDxMJPIPKY62B_B04UzPXJxKk19eCMGm8kDdz7aXNC4UOw_5vGUaj8igyCUK4UdT7H6XuM1qTp-pKeA8Udl0rLocxcT2GNc/s1600/sunset-sunrise-tblogging+(1).jpg" />
 <img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8ai3CdSqDYwyUvHkoWncR3CpIW-OpDt2W1UeNQnzfzDTdJ7NwAWcUN2A3GEhTW7TGTph2e_M01JzShthgkbMvWuBwG_q0a89IVY8hsokEjpmzGOSSYvpP_n1BRkWjMIxCLonF0MDVfV0/s1600/sunset-sunrise-tblogging+(2).jpg" />
</a>
     6. Sekarang Anda Save HTML/Javascript.

Sekarang tinggal Anda cek, berhasil apa tidah script.nya.
Read more ...

Wednesday, 12 June 2013

Widget Label Cloud Warna Hitam Untuk Blogger

Dalam tutorial kali ini Tempat Blogging akan menjelasakan bagaimana Modifikasi label Blogger, Widget ini berwarna hitam dan bagus untuk blogger, cara memasangnya juga sangat mudah.! saya akan sedikit menjelaskan tentang label.
Secara garis besar, label di blogger bisa disebut juga sebagai kategori. Dan saya yakin anda sudah pernah mengenal istilah kategori ini. Kategori merupakan suatu sistem yang bertujuan untuk mengelompokan sesuatu.
Dari pengertian kategori tersebut, bisa kita ambil secara garis besar bahwa label di blogger (yang tidak lain bisa disebut juga sebagai kategori) merupakan suatu fasilitas yang dimiliki oleh blogger.com untuk mengelompokan artikel (postingan) sehingga bisa lebih terorganisir. Dengan menggunakan label / kategori pada setiap tulisan yang kita buat, secara tidak langsung akan mempermudah kita dalam mengelola artikel di blog kita. Selain itu, dengan adanya label di blogger juga bisa mempermudah para pengunjung blog untuk membaca artikel / tulisan kita sesuai dengan kategori / label yang kita buat.
Langsung saja saya akan menjelasakan bagaimana memasang Widget Label Cloud Warna Hitam Untuk Blogger.


  1. Pergi ke Blogger.com >> Situs Anda.
  2. Klik Template >> Edit HTML.
  3. Sekarang Anda baru masuk dalam Blogger HTML Editor tekan CTRL+F untuk mencari code ]]> </ b: skin>
  4. Pastekan Kode dibawah ini di atas kode ]]> </ b: skin>

/*-----Custom Labels widget by Tempat Blogging----*/
#Label1 a{float:left;
height:18px;
line-height:18px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:10px;
padding:5px;
background: rgb(69,72,77); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(69,72,77,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(69,72,77,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(69,72,77,1) 0%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
color:#fff;
text-decoration:none;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;}
#Label1 a:hover{fbackground: rgb(73,192,240); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(73,192,240,1) 0%, rgba(44,175,227,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(73,192,240,1)), color-stop(100%,rgba(44,175,227,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(73,192,240,1) 0%,rgba(44,175,227,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#49c0f0', endColorstr='#2cafe3',GradientType=0 ); /* IE6-9 */}
.label-size{line-height:1.5;align:left;}
.h2head-text {margin:-40px 10px 8px 55px;color:#666666;font-family:arial;font-size:13px;}
#Label1{width:320px;;border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #D8D8D8;}
      5. Sekarang Anda Save Template.

Ok. itu saja yang bisa saya sampaikan, baca artikel yang lain ya,
Read more ...

Tuesday, 11 June 2013

Cara Membuat Kostum Style System Komentar Blogger

Sistem komentar Blogger tentu cukup kuat untuk disesuaikan dan digunakan secara aman dengan blog Anda. Di masa lalu, kami telah menyediakan beberapa sistem komentar sangat disesuaikan untuk Blogger, dan kali ini kami pikir untuk datang dengan tutorial yang bisa mengajarkan beberapa pemula tentang dasar-dasar menciptakan sistem komentar kustom untuk blog blogger mereka. Dalam artikel ini, akan menggunakan kelas-kelas standar untuk menunjukkan Anda bagaimana Cara Membuat Kostum Style System Komentar Blogger dan beberapa hal keren yang dapat Anda lakukan dengan itu.

Catatan: Karena, blogger template yang berbeda dikodekan oleh desainer yang berbeda. Oleh karena itu, kami ingin Anda untuk terlebih dahulu menyingkirkan semua CSS sebelumnya coding yang Anda gunakan dari styling komentar Anda.


Cara Tepat Cari Yang Kelas CSS Edit:


Sebelumnya, kami mengajarkan Anda bagaimana gaya komentar Anda, adalah penting untuk mendapatkan beberapa tips atau trik untuk melihat bagaimana Anda benar-benar dapat menemukan apa yang CSS kelas atau ID Anda harus mengedit untuk mendapatkan pekerjaan dilakukan dengan baik. Google Chrome dan Mozilla Firefox datang dengan beberapa sekelompok alat-alat praktis untuk pengembang web. Alat "Inspect Element" adalah tongkat ajaib untuk pengembang.



Sederhana Hover mouse Anda ke setiap elemen pada halaman web, klik kanan dan pilih "Periksa Elemen". Sekarang panel baru akan muncul di bagian bawah layar Anda. Ini akan dipisahkan menjadi dua baris. Pada baris pertama, Anda akan melihat Source code dan CSS coding di lainnya. Anda dapat mengedit CSS untuk menguji beberapa hal seperti Margin, padding, warna latar belakang dan dll Anda bahkan dapat menambahkan CSS kustom Anda dalam Id tertentu. Hal ini seperti alat pengembangan Anda sendiri. Padahal, saat Anda akan me-refresh halaman semuanya akan kembali normal. Untuk membuat perubahan permanen, Anda harus menggunakan CSS yang sama di StyleSheet dari template Anda.

Styling Posting Pembuat Avatar:


Avatar adalah jenis gambar yang mewakili identitas Anda. Namun, terkadang seseorang mungkin ingin telah bulat avatar daripada memiliki satu persegi panjang sederhana. Pelaksanaan ini cukup banyak seperti hanya dapat dilakukan dengan CSS dan semua yang Anda butuhkan adalah sepotong berikut CSS coding. Anda juga dapat menambah gaya kustom Anda sendiri


.comments .avatar-image-container, .comments .avatar-image-container img {
width: 48px;
max-width: 40px;
height: 40px;
max-height: 48px;
background: #FFF;
float: left;
border-radius: 50%;
-moz-border-radius: 50%;
margin: 0 10px 0 0;
}
#comments .avatar-image-container img {
border: 1px solid #ddd;
}
.comments .comment-thread.inline-thread .avatar-image-container, .comments .comment-thread.inline-thread .avatar-image-container img {
width: 36px;
max-width: 36px;
height: 36px;
max-height: 36px;
margin-left: 5px;
}
Untuk menyesuaikan dgn mode avatar Anda dengan bentuk bulat Anda hanya dapat menggunakan kode berikut, hanya paste di CSS coding dari template Anda (TIP: Pergi ke Blogger.com >> Template >> Edit HTML >> Cari Skin dan di atasnya paste kode berikut).


Styling Badan Komentar di Blogger:


Styling tubuh komentar untuk para pengguna serta penulis adalah sesuatu, yang memberi hidup pada sistem Anda. Hal ini memungkinkan hal untuk bekerja secara sistematis. Ini memegang segala sesuatu bersama-sama. Misalnya, pengguna meninggalkan komentar karena tubuh tidak well-formed teks meluap. Oleh karena itu, adalah penting untuk memberikan bantalan yang tepat dan margin sehingga semuanya terlihat rapi dan bersih.
#comments {
background-color: #fff;
padding-top: 20px;
border-top: 1px solid #ddd;
}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single {
margin-left:60px;
width:490px;
}
.comments .comment-block,.comments .comment-thread.inline-thread .comment {
border:1px solid #ddd;
background:#fff;
background-color:#fff;
padding:10px;
padding-right:0px;
padding-left: 0px;
}
.comment-header {
border-bottom: 1px solid #ddd;
padding-bottom: 10px;
}
.thread-chrome.thread-expanded .comment-header {
width: 412px;
margin-left: 15px;
}
.comments .comments-content .comment {
width:100%;
line-height:1em;
font-size:13px;
margin:15px 0 0;
padding:0;
}
.comments .comments-content .comment-content {
text-align: justify;
line-height: 22px;
overflow: hidden;
}
.thread-chrome.thread-expanded .comment-content {
width: 380px;
line-height: 22px;
overflow:hidden
}
.comments .comment-thread.inline-thread .comment-actions {
display: none;
}
.item-control.blog-admin {
display: none;
}
.comments .comments-content .comment-replies {
margin-top:0;
}
.comments .comment-content {
line-height: 1.4em;
padding: 15px;
}
.comments .comment-thread.inline-thread {
padding-left: 0px;
}
.comments .comment-thread.inline-thread .comment {
width:auto;
}
.comments .comment-thread.inline-thread .comment:after {
content:"";
position:absolute;
top:10px;
left:-20px;
border-top:1px solid #d2d2d2;
width:10px;
height:0;
}
.comments .comment-thread.inline-thread .comment .comment-block {
border:0;
background:transparent;
padding:0;
}
.comments .comment-thread.inline-thread .comment-block {
margin-left:48px;
}
.comments .continue {
border-top:0;
width:100%;
}
#comment-editor {
width:98%!important;
}
.comment-form {
width:100%;
max-width:100%;
}
Berikut adalah contoh kode yang dapat digunakan. Anda dapat menyesuaikan sesuai dengan kebutuhan keinginan Anda.


Styling Komentar Penulis Nama dan Meta:


Platform Blogger memiliki fungsi yang kuat yang dapat membantu Anda dalam merancang komentar nama penulis serta informasi Meta. Hal ini memungkinkan para desainer untuk menyesuaikan tanggal, waktu dan nama penulis. Berikut adalah contoh kode yang Anda hanya bisa copy dan paste ke dalam StyleSheet dari template Anda.

Anda juga dapat menambahkan gaya kustom Anda seperti dapat mengubah font, warna, ukuran dan apa pun yang Anda sukai. Apa pun yang Anda bayangkan dapat diterapkan untuk desain Anda.
#comments h4 {
display:inline;
line-height:40px;
padding:10px;
}
.comments .continue a {
background:#0d86cc;
text-align:center;
padding:10px 0;
display:none;
}
#comments h4,.comments .continue a {
line-height: 30px;
margin: 0;
padding: 20px 0 14px 10px;
font-size: 18px!important;
text-transform: uppercase;
font-weight: 400!important;
color: #444;
}
.comments .user a {
color: #444!important;
font-size: 18px;
line-height: 25px;
text-transform: capitalize;
margin-top: 20px;
font-weight: 600;
padding-left: 15px;
}
.comments .comments-content .datetime {
cursor: pointer;
float: right;
padding-top: 6px;
padding-right: 20px;
}
.icon.user {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIMX8NfSue-FDqIVG9kd_yPTQBCtmpxkZHA8P7zyHdtXs1hivXWp5ffJU1PV-RXAWwQGPcYDmClz-aZd8cLbQvdcZIhHvbao-dPxv-cgUhYkdPwYDGiBFwb_bwSsgP7aYaZ7kj2mBGFbFT/s1600/online.png) no-repeat;
height: 12px;
width: 16px;
display: inline-block;
margin: 0 0 -4px 6px;
}
.comments .comment-thread.inline-thread .user a {
font-size:13px;
margin: 0px;
padding: 0px;
}

Styling Komentar tombol "Balas" di Blogger:


Hampir semua template blogger memiliki tombol reply pada komentar. Namun, hanya bekerja dengan sistem threaded. Sekarang sehari, semua default blogger template yang terhubung dengan komentar threaded. Jadi di sini adalah contoh dari CSS yang anda bisa langsung copy paste di StyleSheet template.
.comment-actions {
background: #f2f2f2;
padding: 8px;
margin-left: 435px;
border: 1px solid #ddd;
float: right;
margin-top: -30px;
margin-right: 5px;
}
.comment-thread a {
color: #777;
}
.comments .comment .comment-actions a:hover {
text-decoration: underline;
}

Styling Entri Penulis Berbeda dari orang lain:


Paling sering Anda telah melihat bahwa komentar dari penulis posting disorot dengan latar belakang yang berbeda atau tag kecil seperti 'Editor "atau lencana tambahan ditugaskan untuk nama mereka. Hal ini membantu pengguna untuk mengidentifikasi penulis sesungguhnya.

Hal ini dapat dilakukan dengan bantuan icon.blog-penulis itu. Membantu Anda untuk menyesuaikan dgn komentar-komentar dari penulis posting berbeda. Berikut adalah contoh yang dapat langsung copy dan paste di StyleSheet Anda. 
.comments .comments-content .icon.blog-author {
display: inline-block;
height: 18px;
margin: 0 0 -4px 6px;
width: 18px;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjr5NFQ7snqkiYa44rB1MMlK0G8j1L63mBVGaj0oxqINgildvOxj0kdM0Wag7c9U_g9I6HiStU_Y_Zx1X4lbfpXsthNrxjySjjv79LehUKqbuTlcVyh-gfxjD-12ExdC_rUuAY29wnWQ9bU/s1600/Verificon.png);
}
Kami harap tutorial ini telah membantu Anda untuk belajar bagaimana untuk Cara Membuat Kostum Style System Komentar Blogger. Jika Anda menghadapi kesulitan atau memiliki saran untuk kami maka jangan ragu untuk memberitahu kami tahu dengan meninggalkan komentar di bawah ini.




Source Image & Script : My Blogger Lab

Read more ...

Monday, 10 June 2013

Cara Membuat Kutipan Rotator Animasi jQuery di Blogger

Kadang-kadang sebuah artikel tidak dapat diselesaikan tanpa kutipan yang tepat atau kutipan dari sumber yang otentik. Orang ingin berita yang akurat dan tepat. Oleh karena itu, mereka selalu mengandalkan sumber yang dapat dipercaya. Stuffing artikel Anda dengan terlalu banyak kutipan mungkin membuat posting blog Anda terlihat panjang, tapi Anda mungkin merasa sulit pengguna untuk menggulir terlalu banyak. Bagaimana Kutipan Rotator jQuery dan animator, yang tidak hanya akan membuat kutipan Anda terlihat luar biasa tetapi juga akan mengumpulkan semua tanda kutip di satu tempat. Pada artikel ini, kami akan menunjukkan Cara Membuat Kutipan Rotator Animasi jQuery di Blogger?

Berikut adalah preview dari widget:
  • Blogging bukan tentang penghasilan. Ini tentang melayani Kemanusiaan.
  • Jangan memilih Blogging sebagai profesi Anda, kecuali jika Anda benar-benar tidak punya pilihan!!!
  • Pendidikan adalah senjata paling kuat yang dapat Anda gunakan untuk mengubah dunia.
  • The Lift is too shorT, Live it or be dead.
  • Ini baik untuk merayakan kesuksesan, tetapi adalah lebih penting untuk memperhatikan pelajaran dari kegagalan.
  • You can't have a light without a dark to stick it in.
  • If you think your teacher is tough, wait until you get a boss. He doesn't have tenure.



Hal pertama yang perlu Anda lakukan adalah untuk login ke account blogger Anda. Sekarang dari blogger dashboard pergi ke Buat Posting baru >> Edit HTML Tab dan hanya paste JavaScript berikut dan Kode CSS dalam Editor Blogger HTML.
<link href="https://googledrive.com/host/0B0WJjcJEFNziaGlLbi04Uk00b3c" rel="stylesheet"></link>
<script src="https://googledrive.com/host/0B0WJjcJEFNzid180dVRuai1WQ1U" type="text/javascript"></script>
 <script>
 jQuery(document).ready(function($) {
  $('#words').quoteRotator();
 });
 </script>
Setelah menambahkan coding di atas, Anda perlu menambahkan kode HTML berikut ke Editor Blogger HTML sehingga akan membantu Anda dalam menciptakan berputar dan kutipan animasi. Anda dapat mengubah transaksi animasi tergantung pada kebutuhan Anda.
<!-- TempatBlogging Quote Rotator -->
<br />
<div id="words">
<ul class="word-container">
<li data-author="---  Mubasir Alamsah" data-easeout="lightSpeedOut">Blogging bukan tentang penghasilan.
Ini tentang melayani Kemanusiaan.</li>
<li data-author="---  Mubasir Alamsah">Jangan memilih Blogging sebagai profesi Anda, kecuali jika Anda benar-benar tidak punya pilihan!!!</li>
<li data-author="---  Mubasir Alamsah" data-easeout="fadeOutDown">Pendidikan adalah senjata paling kuat yang dapat Anda gunakan untuk mengubah dunia.</li>
<li data-author="---  Mubasir Alamsah" data-easein="fadeInDown">The Lift is too shorT, Live it or be dead. </li>
<li data-author="---  Bill Gates (Microsoft)" data-easeout="bounceOut">Ini baik untuk merayakan kesuksesan, tetapi adalah lebih penting untuk memperhatikan pelajaran dari kegagalan.</li>
<li data-author="---  Arlo Guthrie (1947 - )" data-easein="bounceIn">You can't have a light without a dark to stick it in. </li>
<li data-author="---  Bill Gates (Microsoft)" data-easein="lightSpeedIn">If you think your teacher is tough, wait until you get a boss. He doesn't have tenure.</li>
</ul>
<div class="quote">
<div class="quote-content">
</div>
<cite class="quote-author"></cite>
  </div>
</div>
Selamat: Sekarang mempublikasikan artikel Anda dan menikmati keajaiban. Kutipan akan berputar secara otomatis. Namun, Anda dapat melompat ke kutipan berikutnya dengan mudah. Ini akan terus berputar sampai Anda pindah ke halaman web lain.

Kami harap tutorial ini telah membantu Anda untuk belajar Cara Membuat Kutipan Rotator Animasi jQuery di Blogger. Jangan biarkan kami tahu apa yang Anda pikirkan tentang widget ini. Bagi pemikiran dan pendapat melalui komentar di bawah ini. 
Read more ...

Sunday, 9 June 2013

Widget Social Media Efek Flipboard Untuk Blogger

Dalam posting ini saya akan menjelaskan bagaimana memasang Widget Social Media Efek Flipboard Untuk Blogger. Jadi, ini meliputi dua gadget. sosial profil ikon dan kotak pencarian. Anda dapat menghubungkan dengan Facebook, Twitter, Google Plus, Pintrest dan Rss Feed. Kamu dapat melihat di halaman demo.





  1. Login ke blogger.com
  2. Masuk ke bagian Layout / Design
  3. Klik Tambahkan Widget.
  4. Pilih HTML/Javascript.
  5. Copy Kode dibawah ini dan Pastekan di HTML/Javascript.

<style type="text/css">
#flipboard_tempatblogging{ width:300px;}
ul.flipboard_tempatblogging{
margin:0;
padding:0;
list-style:none;
-webkit-perspective: 10000px;
-moz-perspective: 10000px;
-o-perspective: 10000px;
perspective: 10000px;
}
ul.flipboard_tempatblogging li{
display: inline-block;
width: 55px;
height: 50px;
margin-right: -px;
background: white;
font: bold 36px Arial;
text-transform: uppercase;
text-align: center;
cursor: pointer;
}
ul.flipboard_tempatblogging li a{
display:block;
width: 100%;
height: 100%;
color: black;
text-decoration: none;
outline: none;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard_tempatblogging li a span{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding-top: 5px;
display:block;
width: 100%;
height: 100%;
-webkit-transition:all 300ms ease-out 0.1s;
-moz-transition:all 300ms ease-out 0.1s;
-o-transition:all 300ms ease-out 0.1s;
transition:all 300ms ease-out 0.1s;
}
ul.flipboard_tempatblogging li a img{
border-width: 0;
}
ul.flipboard_tempatblogging li:hover a{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #cef1ff;
-webkit-border-radius:7px;
-moz-border-radius:7px;
border-radius:7px;
-webkit-box-shadow:0 0 5px #eee inset;
-moz-box-shadow:0 0 5px #eee inset;
box-shadow:0 0 5px #eee inset;
}
ul.flipboard_tempatblogging li:hover a span{
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#tempatblogging-searchbox {
    border-radius: 5px;
    background: URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsol8xLw4vTRxLKHk6N_GFI5gks9knJhyphenhyphenLo_ebc7ikMkzPWKLauohngdqAmH39FahcvzN3TfZZKLIhoLrJccrftbivX67Chep5ziFriM_ElhLrI86FrcvRFpiZS6yBf_hra-6Lggn8Hhc5/s1600/green.png) no-repeat scroll center center transparent;
    width: 290px;
    height: 50px;
    disaply: block;
}
form#tempatblogging-searchform {
    display: block;
    padding: 7px 16px;
    margin: 0;
}
form#tempatblogging-searchform #s {
    padding-left: 24px !important;
    padding: 7.5px;
    margin: 0;
    width: 198px;
    font-size: 16px;
    font-family: georgia;
    font-style: italic;
    color: #666666;
    vertical-align: top;
    border: none;
    background: transparent;
}
form#tempatblogging-searchform
#sbutton {
    margin: 0;
    padding: 0;
    height: 40px;
    width: 74px;
    vertical-align: top;
    border: none;
    background: transparent;
}
</style>
<div id="flipboard_tempatblogging">
<center>
<a style="font-size:25px;" >Connect With Us </a>
</center>
<br />
<ul class="flipboard_tempatblogging">
<li><a href="http://www.pinteresr/TempatBlogging"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAddufXzCWl_kMMbvKAlmJYaNztWvy9ht2mnzhKRxDXzFt-fleYR3FhK-EbN2bzZRXs41WXbWgXjPZ0a-cQvPJNe6xzCTb9mMYOI0opc9yrxNzexUTjjRu1voJF0ytQuPc_fuGaemFLZl8/s1600/tempatblogging_pinterest.png" title="Pinterest" /></a></li>
<li><a href="http://www.facebook.com/TempatBlogging"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCTNBPnfZbOVDVOJ964dxk4uqQhq7hyphenhyphenXlHNe-gQjiB4jTgLhZxQpW6OXKQdTEyjuYNb1WrZAvpaOHsmG-jJ-ZQeskinQSHE3IJ8-_Saks3xRAe2jU5QGgnPBHg9cHGpWB32ljF-GildXup/s1600/tempatblogging_facebook.png" title="Add to Facebook" /></a></li>
<li><a href="https://plus.google.com/userId"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOKSBtjKuHel0BalvvWM0NWLxTHVSVwkQi1AFjsrR3Ufy0AKZxE8DncUKPm65heRekbZ2sXKUfYvq5Clh5b0CurolORwWUBXLyVLM54-EH7m5jrIOEujoTEZYi0Xhmk9w0O19CYGqY9eO5/s1600/tempatblogging_google+.png" title="Google plus" /></a></li>
<li><a href="http://www.twitter/TempatBlogging"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh12wWJtV4jQ0t7UIlRNTMh1oU-sJnvxdAzf4qU5LVdKKHu6vi6kYXRSq49QBv1PQqIQIB5R6DtCEZMD-CAgVXDiw4UoBmZRFovffL9MaRu61TNoc-a0PHLQCfgd49jC_gyId-d1qYoyjvU/s1600/tempatblogging_twitter.png" title="Add to Twitter" /></a></li>
<li><a href="http://feeds2.feedburner.com/TempatBlogging"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfK24s9xiA8ur1xi6Wy6TT0PHjDU4BDLAS3ARVV3NFgigFCXDruZYp-F7IgxzAPkfV0DWAnGetSEJGzL9bCE2rv2Djkd_Gx4J-KmTz168w_ygJTAOAwKq5BluUlMw3zeyqOtdGxLNTVGJq/s1600/tempatblogging_rss.png" title="Add RSS Feed" /></a></li>
</ul>
<div id="tempatblogging-searchbox">
<form action="/search" id="tempatblogging-searchform" method="get">
<input id="s" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}" onfocus="if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}" type="text" value="Search..." />
        <input id="sbutton" src="http://img1.blogblog.com/img/blank.gif" type="image" />
    </form>
</div>
</div>

NOTE :


  • Ganti TempatBlogging dengan nama pengguna Facebook Anda
  • Ganti TempatBlogging dengan Nama Twitter Anda
  • Ganti TempatBlogging dengan Pinterest Username Anda
  • Ganti UserId dengan ID Google Plus Anda 
Ok, itu saja yang bisa saya sampaikan semoga bermanfaat.
Read more ...

Cara Membuat Author Box di Bawah Postingan Blogger

Hay semunya..?? maaf jarang update soalnya lagi ujian, kali ini saya akan update Cara Membuat Author Box di Bawah Postingan Blogger. kenapa saya update tutorial ini..?? tutorial ini saya update karna ada sobat blogger yang minta tutorial ini. jadi saya langsung update totorial Cara Membuat Author Box di Bawah Postingan Blogger. Fungsi Author ini adalah untuk mempercatntik tampilan posting dan juga membuat pengunjung blog tahu tentang profil singkat si penulis blog, fungsi utama dari widget author box adalah menampilkan secara singkat biografi sang penulis atau profil singkat penulis pada bagian bawah posting agar bisa dibaca oleh pengunjung yang ingin tahu tentang si penulis blog istilah anak gaulnya si keppo, jika sobat ingin melihat contohnya seperti apa silakan lihat dibagian bawah posting ini, langsung aja nih praktekin tutorial Cara Membuat Author Box di Bawah Postingan Blogger.


  • login ke blogger.com
  • pilh template >> edit html
  • cari kode ]]></b:skin> untuk mempermudah gunakan ctrl+f
  • copy paste kode dibawah ini tepat diatas ]]></b:skin>

/* kotak author tempat blogging */
.admin-tulisan{display:block;width:auto;background:#CFE2E0;border:2px solid #fff;box-shadow:0 1px 3px #000;-moz-box-shadow:0 1px 3px #000;-webkit-box-shadow:0 1px 3px #000;padding:0;margin:30px 0 10px 0;font:normal 12px Arial, Sans-Serif;color:#222;}
.admin-tulisan .kontainer{padding:5px;}
.admin-tulisan h4{background:#8A9C04;border:none;border-bottom:1px solid #699019;color:#fff;text-transform:normal;text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);font:bold 12px Arial,Sans-Serif;padding:5px 10px;margin:0 0 0 0;display:block;}
.admin-tulisan h4 a{color:#FEEA83;}
.admin-tulisan img{width:70px;height:70px;margin:0 10px 0 0;float:left;border:1px solid #954B02;padding:2px;background:#C36702;
box-shadow:none;-moz-box-shadow:none;-webkit-box-shadow:none;margin: 0px;border: 5px solid #eee;-webkit-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);-moz-box-shadow: 4px 4px 4px rgba(0,0,0,0.2);box-shadow: 4px 4px 4px rgba(0,0,0,0.2);-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-webkit-transform: rotate(-7deg);-moz-transform: rotate(-7deg);-o-transform: rotate(-7deg);}
/* kotak author tempat blogging */

  • Cari kode <data:post.body/> untuk mempermudah gunakan ctrl+f , akan muncul lebih dari satu kode <data:post.body/> jadi pilih kode yang kedua kalau masih belum berhasil paste dibawah kode yang pertama
  • Copy paste kode berikut dibawah <data:post.body/>

<!-- Kotak Admin Tempat Blogging -->
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <div class='admin-tulisan'>
    <h4>Creatif By : <a expr:href='data:blog.homepageUrl'><data:post.author/></a> | Tempat Tutorial Blogging</h4>
    <div class='kontainer'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhdJWF7jQea9LejRwzMZsx1Wt3Nw9oFQkf50ZwQaqm46fp1-4UoTCmpW-AMbj1sEod09Q3g4LufKV-1QPcMFv_15R2iol227iyNCoKoWkgzyvpYOQy8Uz15gY02p4vU02RfLcDiMbnEg8o/w329-h311-no/Tempat+Blogging.png'/>
    Terimah Kasih telah membaca artikel<a expr:href='data:post.url'><data:post.title/></a>. Yang ditulis oleh  <data:post.author/> .Pada hari<data:post.dateHeader/>. Jika anda ingin sebarluaskan artikel ini, mohon sertakan <strong>sumber link asli.</strong> Kritik dan saran dapat anda sampaikan melalui kotak komentar. Trimakasih
    <p>
<textarea cols='75' id='bloglinking' name='bloglinking' onclick='this.focus();this.select()' onfocus='this.select()' onmouseover='this.focus()' readonly='readonly' rows='2'>&lt;a href=&quot;<data:post.url/>&quot; target=&quot;_blank&quot;&gt;<data:blog.pageName/>&lt;/a&gt;</textarea></p>
    <div style='clear:both;'/>
    </div>
    </div>
    </b:if>
    <!-- Kotak Admin Tempat Blogging -->
NOTE:
ganti tulisan berwarna MERAH dengan nama blog sobat
ganti tulisan berwarna BIRU dengan foto profil sobat
untuk kata-kata yang lainya bisa di ganti dengan creatif anda sendiri

oke itu saja yang bisa saya sampikan dalam tutorial Cara Membuat Author Box di Bawah Postingan Blogger kurang lebihnya mohon maaf,
Read more ...

Blogger Template Kreasi BB.2 G+

Blogger Template yang sekarang ini saya beri nama Kreasi BB.2 GPlus, :q; karena Template ini saya edit ulang dari Kreasi BB.2 yang sebelumnya, cuma posisi Sidebarnya saya pindahkan :z; dan yang paling penting  Template ini sudah memakai Komentar Google Plus makanya saya beri nama Kreasi BB.2 GPlus 


                                 


Cara Install dan Setting Template Kreasi BB.2 GPlus 
- Cara Mengganti Template
  • Setelah kawan Download filenya silahkan Ekstrak dulu dari yang bertype rar menjadi xml di Komputer kawan
  • Masuk Account Blogger dengan ID kawan
  • Pilih Template - Cadangkan / Pulihkan
  • Pilih file Kreasi BB.2 GPlus.xml yang sudah di ekstrak di komputer tadi terus Unggah, tunggu sampai selesai pengunggahan
  • Selanjutnya pilih Tata Letak untuk memindahkan Widget / Gadget sesuai selera kawan
- Cara Setting Template 
  • Pilih Template - Edit HTML 
  • Tambahkan Keyword dan Discription serta yang lainnya [Perhatikan]

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
    <b:if cond='data:blog.pageType == &quot;index&quot;'>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <title><data:blog.pageName/> | <data:blog.title/></title>
    <b:else/>
    <title><data:blog.pageTitle/> | Your Blog Description</title>
    </b:if>
    <b:else/>
    <title><data:blog.pageName/> | <data:blog.title/></title>
    </b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
    <meta content='Your Blog Description here!' name='description'/>
    <meta content='Your Keywords here!' name='keywords'/>
    <meta content='Author Name here!' name='Author'/>
    <meta content='general' name='rating'/>
    <meta content='all' name='robots'/>
    <meta content='index, follow' name='robots'/>
    <meta content='id' name='geo.country'/>
    <meta content='1 days' name='revisit-after'/>
    <meta content='Indonesia' name='geo.placename'/>
</b:if>
  • Selanjutnya cari ]]></b:skin> dan ganti ID Google+ punya saya - lihat contoh

]]></b:skin>
<link href='https://plus.google.com/101141011579420362463' rel='author'/>
  • Terakhir cari <div class='ad'> yang selengkapnya kurang lebih sebagai berikut 
<div class='ad'>
<b:section class='headeradsense' id='headeradsense' preferred='yes' showaddelement='no'/>
<br/>
<div id='Navmenu-menggulung'>
<div class='item'>
        <a class='link icon_cari'/>  <div class='item_content'> <h2><div id='search'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='160' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' type='text' value='Search...'/>
            </form></div></h2> </div> </div>
 <div class='item'>
        <a class='link icon_test'/> <div class='item_content'> <h2><a href='https://developers.google.com/speed/pagespeed/insights'>TEST BLOG</a></h2> </div>  </div>
    <div class='item'>
        <a class='link icon_kontak'/>  <div class='item_content'> <h2><a href='http://blogbego-creation.blogspot.com/2012/01/contact-us.html' target='_blank'> KONTAK BBC </a></h2>  </div>  </div>
    <div class='item'>
        <a class='link icon_daftar'/> <div class='item_content'>  <h2><a href='http://blogbego-creation.blogspot.com/2012/01/site-map-blogbego-creation.html' target='_blank'>DAFTAR ISI</a></h2>  </div>  </div>
    <div class='item'>
        <a class='link icon_beranda'/> <div class='item_content'> <h2><a href='http://blogbego-creation.blogspot.com/'>BERANDA</a></h2>  </div> </div>
    <div style='clear:both;'/> </div>
<script type='text/javascript'>
function collapse(a){var b=1440;var c=setInterval(function(){if(b==0){clearInterval(c);return}b-=40;$(&#39;.link&#39;,a).stop().animate({rotate:&#39;+=40deg&#39;},0)},10);a.stop().animate({width:&#39;38px&#39;},1e3).find(&#39;.item_content&#39;).stop(true,true).fadeOut().find(&#39;p&#39;).stop(true,true).fadeOut()}function expand(a){var b=0;var c=setInterval(function(){if(b==1440){clearInterval(c);return}b+=40;$(&#39;.link&#39;,a).stop().animate({rotate:&#39;+=-40deg&#39;},0)},10);a.stop().animate({width:&#39;178px&#39;},1e3).find(&#39;.item_content&#39;).fadeIn(400,function(){$(this).find(&#39;p&#39;).stop(true,true).fadeIn(600)})}$(&#39;.item&#39;).hover(function(){var a=$(this);expand(a)},function(){var a=$(this);collapse(a)});
</script>
</div>
  </div> </div>
Ganti semua URL / Link saya dengan punya kawan 
  • Kalau semuanya sudah selesai jangan lupa simpan Template kawan



Read more ...