CARA INSTALL Syntax Highlighter di Blog KEREN !

09:21
CARA INSTALL Syntax Highlighter di Blog KEREN !

Kali ini  bloggingpasuruan akan Share Cara Membuat kolom Syntax Highlight yang berfungsi sebagai menampilkan kode tutorial seperti yang digunakan pada website atau blog tutorial. Memang banyak situs atau blog yang membahas tentang cara menginstal dan menggunakan stabilo sintaks dan kode berbagi dan cara menginstal sintaks stabilo di blog dan website (baik menggunakan javascript, jQuery, dan HTML markup) sebagai Prisma, GeSHi, Google Code, SyntaxHighlighter , Sintaks Highlight dalam JavaScript, Ultraviolet dan lain-lain, tapi di sini saya lebih memilih HIGHLIGHT. Ini menggunakan java script dengan alasan dapat bekerja lebih mudah dan secara otomatis menemukan blok kode, mendeteksi jenis bahasa, dan menyoroti (kode sorot).

HIGHLIGHT.JS mengenali setidaknya 54 program bahasa dan dibundel dengan 26 tema gaya. Untuk itu saya hanya akan memilih menjadi kode hanya 3 bahasa, yang paling sering digunakan oleh blogger (dalam membuat tutorial di blog-nya) sebagian besar blogger hanya untuk menampilkan kode sumber, seperti kode CSS, Javascript, dan HTML mark up. sebelum kami membuat, pertama kita mengidentifikasi rasa apa itu Sorot Sintaks

DEFINISI Syntax Highlighter

Syntax Highlighter  atau Sintaks Sorot editor teks ini tampil menyorot teks-terutama kode sumber-dalam berbagai warna dan font sesuai dengan kategori istilah. Dengan menggunakan SyntaxHighlighter kemudahan dalam menulis kode sumber atau bahasa terstruktur seperti bahasa pemrograman atau markup language (bahasa markup) akan tampak lebih profesional dan rapi.

Penggunaan sintaks higlighter pada halaman web, blog atau forum online sering digunakan sebagai kode prensentasi kode sumber sampel (seperti Javascript, HTML, XML, CSS, Python, PHP, JSON, CoffeeScript, Jawa, SQL, Apache, Haskell, Erlang, Ruby, C ++, Objective C dan banyak bahasa pemrograman lain.) yang ingin ditampilkan.

CARA INSTALL Syntax Highlighter

Untuk menginstal Sntax Highlighter di blog, langkah pertama yang harus dilakukan adalah untuk menempatkan script ini tepat di atas </ head> atau bisa juga sebelumkode </ body>



<div style="text-align: justify;"><br />&lt;script src=" https://syntax-bloggingpasuruan-highlighter.googlecode.com/svn/syntaxhighligh-bloggingpasuruan.js"&gt;&lt;/script&gt;</div><br /><code><div style="text-align: justify;"><br />&lt;script&gt;hljs.initHighlightingOnLoad();&lt;/script&gt;</div><br />


Langkah selanjutnya adalah memasang CSS untuk menyesuaikan gaya dari Syntax Highlighter. Letakkan kode CSS dibawah ini juga di atas </ head>

CSS Syntax Highlighter

<div style="text-align: justify;"><br />/* CSS SYNTAX HIGHLIGHT Oleh  Bloggingpasuruan.blogspot.com <span style="text-align: left;">*/</span></div><br /><code>pre code {<br /><div style="text-align: justify;"><br />; padding: 0.5em;<br />color: #DCCF8</div><br />display: bloc<br />kF;<br /><div style="text-align: justify;"><br />ground: url('https://sites.google.com/site/problogiz/home/pojoaque.jpg') repeat scroll left top #181914;}<br />pre</div><br />bac<br />k .comment,<br />pre .template_comment,<br />pre .diff .header,<br />pre .doctype,<br />pre .lisp .string,<br />pre .javadoc {<br /><div style="text-align: justify;"><br />avascript .title,</div><br />color: #586e75;<br />  font-style: italic;<br />}<br />pre .keyword,<br />pre .css .rule .keyword,<br />pre .winutils,<br />pre .<br />j<br />pre .method,<br />pre .addition,<br />pre .css .tag,<br />pre .clojure .title,<br />pre .nginx .title {<br />  color: #B64926;<br />}<br />pre .number,<br /><div style="text-align: justify;"><br />66;<br />}<br />pre .ti</div><br />pre .command,<br />pre .string,<br />pre .tag .value,<br />pre .phpdoc,<br />pre .tex .formula,<br />pre .regexp,<br />pre .hexcolor {<br />  color: #468<br />9tle,<br />pre .localvars,<br />pre .function .title,<br />pre .chunk,<br />pre .decorator,<br />pre .built_in,<br />pre .lisp .title,<br />pre .clojure .built_in,<br /><div style="text-align: justify;"><br />ant,<br />pre .class </div><br />pre .identifier,<br />pre .id {<br />  color: #FFB03B;<br />}<br />pre .attribute,<br />pre .variable,<br />pre .lisp .body,<br />pre .smalltalk .number,<br />pre .cons<br />t.title,<br />pre .parent,<br />pre .haskell .type {<br />  color: #b58900;<br />}<br />pre .css .attribute {<br />  color: #b89859;<br />}<br />pre .css .number,pre .css .hexcolor{<br /><div style="text-align: justify;"><br />f .change,<br />pre .s</div><br />color: #DCCF8F;<br />}<br />pre .css .class {<br />  color: #d3a60c;<br />}<br />pre .preprocessor,<br />pre .pi,<br />pre .shebang,<br />pre .symbol,<br />pre .symbol .string,<br />pre .di<br />fpecial,<br />pre .attr_selector,<br />pre .important,<br />pre .subst,<br />pre .cdata {<br />  color: #cb4b16;<br />}<br />pre .deletion {<br />  color: #dc322f;<br />}<br />pre .tex .formula {<br /><div style="text-align: justify;"><br /></div><br />background: #073642;<br /><div style="text-align: justify;"><br /></div><br />}


Simpan template. Untuk menggunakan Syntax Highlight pada saat menulis posting, kita hanya perlu menambahkan tag <pre> dan <code>

Seperti ini : 

<div style="text-align: justify;"><br />&lt;pre&gt;&lt;code&gt;</div><br /><code><div style="text-align: justify;"><br />Letakkan kode Javascript, jQuery atau CSS kode atau HTML kode disini</div><br /><div style="text-align: justify;"><br />nama blog sobat disini......&lt;/code&gt;&lt;/pre&gt;</div><br />


Selesai.

Saya akan sangat berterima kasih jika sobat Blogger berkenan meninggalkan komentar, saran atau tambahan informasi serta pertanyaan seputar artikel CARA INSTALL Syntax Highlighter di Blog. Semoga bermanfaat dan terima kasih..

Cara Membuat Kata Kunci Panjang ( Long Tail Keywords ) untuk Menarik Pengunjung dari Search Engine

08:12
Cara Membuat Kata Kunci Panjang ( Long Tail Keywords ) untuk Menarik Pengunjung dari Search Engine

BLOGGINGPASURUAN- Artikel kali ini tentang Cara Membuat Kata Kunci Panjang ( Long Tail Keywords ) untuk Menarik Pengunjung dari Search Engine. Mesin pencari merupakan sumber berlimpah lalu lintas. Sayangnya, itu tidak mudah bagi blogger manapun untuk memunculkan artikel di halaman nomor satu atau pertama hasil pencarian. Salah satu trik adalah dengan menggunakan kata kunci yang panjang atau long tail keywords.

Jika Anda tidak akrab dengan istilah ini, di sini adalah definisi (pengertian), misalnya, keuntungan, dan bagaimana membuat judul kata kunci yang panjang.

Apa yang dimaksud dengan Long Tail ( Keyword ) Kata Kunci panjang ?

Kata kunci yang  panjang frase kata kunci yang diketik panjang oleh pengunjung pada mesin pencari. Kata kunci ini lebih spesifik daripada kata kunci umum. Di bawah ini adalah contoh.
Kartu kredit adalah contoh kata kunci yang umum, sedangkan kata kunci panjang atau dalam bahasa kerennya long tail keywords dapat:

Kartu kredit untuk mahasiswa
Daftar kartu kredit bunga rendah
Keuntungan dari kartu kredit untuk pengusaha kecil

Keuntungan Kata kunci yang panjang ( Long Tail Keywords )

Berikut adalah 4 keuntungan jika Anda menggunakan kata kunci yang panjang:

1. Kata kunci panjang memberikan konversi yang lebih tinggi. Pengunjung yang datang melalui mesin pencari dengan mengetikkan kata kunci panjang umumnya berniat untuk membeli sesuatu secara online. Dengan menembak kata kunci panjang, peluang Anda untuk menangkap pengunjung ( khususnya pembeli ) peluangnya lebih besar.

2. Kata kunci panjang mudah mendapat ranking dari mesin pencari ( kata sang ahli SEO ). Hal ini karena kata kunci panjang adalah pesaing dari kata kunci pendek ( spesifik ).

3. Semakin banyak pengunjung yang datang. Dengan terangking dengan baik di search engine, maka blog atau website akan mendapat banyak pengunjung.

4. Potensi CTR tinggi. Pengunjung yang datang melalui mesin pencari berharga karena mereka adalah pencari informasi, sehingga kemungkinan mereka mengklik iklan (adsense, PPC, dll) yang ada di blog Anda. Dengan demikian, klik tayang (RKT) tinggi pada adsense Sobat.

Cara Membuat Judul untuk Kata Kunci Panjang ( Long Tail Keywords )

Setelah menemukan kata kunci panjang, hal yang paling penting adalah untuk membuat header yang berisi kata kunci panjang. Untuk kata kunci panjang dalam contoh di atas, berikut ini adalah contoh judulyang bisa diambil:

Bagaimana cara memilih kartu kredit untuk mahasiswa
20 Kartu Kredit Bunga Rendah
10 Manfaat Kartu Kredit Meningkatkan Pendapatan Usaha Kecil

Apa yang saya jelaskan di atas adalah hanya dasar-dasar. Sobat tentu saja dapat memodifikasi untuk membuatnya lebih bervariasi.

Saya akan sangat berterima kasih jika sobat Blogger berkenan meninggalkan komentar, saran atau tambahan informasi serta pertanyaan seputar artikel Cara Membuat Kata Kunci Panjang ( Long Tail Keywords ) untuk Menarik Pengunjung dari Search Engine. Semoga bermanfaat dan terima kasih..

Manfaat atau Keuntungan Update Artikel Secara Teratur di Blog

07:36
Manfaat atau Keuntungan Update Artikel Secara Teratur di Blog

BLOGGINGPASURAN- Artikel kali ini tentang Manfaat atau Keuntungan Update Artikel Secara Teratur di Blog. Blogging membutuhkan banyak usaha dan kerja keras untuk mendapatkan kepercayaan dari mesin pencari serta pembaca. Dan blogger baru harus secara teratur update artikel di blognya untuk menjadi sukses. Ada banyak hal yang harus Sobat  lakukan untuk membuka situs atau blog untuk mencapai keberhasilan, seperti publisitas dan dukungan dari mesin pencari. Tapi yang paling penting adalah untuk memperbarui blog atau situs Sobat secara teratur.

Meningkatkan Alexa

Cara yang paling efektif untuk meningkatkan peringkat Sobat di Alexa, adalah untuk memperbarui isi dari forum secara teratur dan perhatian besar setiap hari untuk blogging secara teratur di blog Sobat, jadi jika Sobat berfokus pada blog Pengaturan Alexa Anda, dan Sobat  mengambil minat khusus untuk itu, update secara teratur dan intensif blogging adalah cara untuk meningkatkan peringkat Blog Sobat.

Meningkatkan PageRank

Ketika kita memperbarui blog setiap hari akan mendapatkan kepercayaan dari mesin pencari. Ini adalah faktor yang paling penting untuk mendapatkan peringkat yang lebih tinggi dalam hasil pencarian, jadi jika Anda tertarik untuk mendapatkan Page Rank yang lebih baik dari Google, Sobat harus bisa berkomitmen sebagai blogger, Cari konten berkwalitas yang  diperbarui setiap hari secara teratur dan hasil peringkat tinggi dalam hasil pencarian akan muncul.

Menarik pengiklan

Pengiklan mencari blog yang diperbarui setiap harinya. Kita dapat dengan mudah menarik lebih banyak pengiklan adalah cara terbaik untuk mendapatkan uang. Membayar perhatian khusus untuk blog yang menyediakan konten yang khas akan menarik sejumlah besar pengunjung.

Konversi pengunjung selalu meningkat

Pengunjung selalu suka blog yang lebih aktif update artikel berkwalitas daripada blog yang pasif tanpa informasi informasi terbaru. Setiap hari pengunjungi blog berharap untuk mendapatkan konten baru yang diterbitkan. Jika serius bekerja pada blogging secara teratur dan setiap hari, dengan memperkenalkan konten eksklusif dan khas, forum pengunjung dapat berubah menjadi pengikut selamanya, sebagai visi kualitas posting Anda dengan pengunjung diubah melalui mesin pencari untuk forum, mungkin membayar untuk berlangganan blog atau mengikuti Anda melalui jaringan sosial dan transisi ke pengamat dan sebagai imbalannya sering ke blog Anda berulang kali.

Kesimpulan :

Kenapa kita harus memperbarui ( update artikel ) blog kita secara teratur dan apa manfaat dari blogging sehari-hari?

- Membantu untuk meningkatkan peringkat blog pada mesin pencari.
- Memberikan kita pengindeksan cepat dan Membantu membangun kepercayaan dengan mesin pencari.
- Meningkatkan peringkat Alexa dan mendapatkan PageRank yang tinggi.
- Mendapatkan pengikut setia.
- Menarik lebih banyak pembaca dan lalu lintas tinggi.
-. Forum Publisitas dan pendapatan meningkat dengan menarik pengiklan

Konten adalah raja jadi jangan lupa untuk memperbarui blog atau secara teratur yang telah menarik banyak pengunjung blog Anda dan jangan lupa untuk berinteraksi dengan pengunjung. Karena ini penting sekali !!!

Saya akan sangat berterima kasih jika sobat Blogger berkenan meninggalkan komentar, saran atau tambahan informasi serta pertanyaan seputar artikel Manfaat atau Keuntungan Update Artikel Setiap Hari di Blog. Semoga bermanfaat dan terima kasih..

Cara Membuat URL Custom Permalink Blogspot yang SEO Friendly

07:05
Cara Membuat URL Custom Permalink Blogspot yang SEO Friendly

 
BLOGGINGPASURUAN - Dalam postingan kali ini saya akan berbagi tentang Cara Membuat URL kustom Permalink Blogspot yang SEO Friendly. Blogger telah memperkenalkan opsi untuk membuat permalinks URL kustom pada post editor nya, itu adalah berita yang ditunggu-tunggu oleh pengguna Blogger karena kita dapat membuat URL permalink (permanent link) sesuai dengan judul atau judul posting blog tanpa tanam, yang tentunya akan mempengaruhi SEO. Juga membaca tentang Cara Membuat SEO Friendly Blogspot tag Heading.

Sekarang blogger telah melakukan banyak perubahan dan update pengguna Blogspot sekarang dapat menggunakan opsi yang diberikan untuk mendukung SEO dan lain-lain, seperti mengedit robots.txt, meta description, komentar berulir, fitur kustom blogger permalink, dll .. Apalagi sekarang saya telah melihat banyak teman-teman yang berhasil membuat remah roti diindeks oleh Google yang membuat blog terlihat lebih profesional. Nah sekarang kita akan membahas cara membuat blogger url kustom permalink, ikuti tips dan trik untuk membuat URL permalink di bawah ini:

Cara Membuat URL Custom Permalink Blogspot yang SEO Friendly

1. Silakan masuk draft.blogger.com bukan pada blogger.com
2. Membuat posting baru dan melihat tepat di samping post editor ada pilihan Permalink
3. kemudian membuat permalink yang diinginkan atau sesuai dengan / judul posting judul yang terpisah permalink antara kata-kata dengan dasbor (-) agar lebih SEO friendly, menggunakan karakter (-) sangat dianjurkan
4. selesai / dilakukan



Cara Membuat URL Custom Permalink Blogspot yang SEO Friendly



Contoh URL permalink

Judul posting "Cara Menghilangkan Gambar Google Bingkai di Blog"
Jika menggunakan URL permalink Permalink otomatisjudul posting di atas akan dipotong karena blogger standar tidak lebih dari 38 karakter termasuk spasi dan ini tidak baik untuk SEO sehingga akan tampak seperti ini :

http://bloggingpasuruan.blogspot.com/2014/05/Cara-Menghilangkan-Gambar-Google-bingkai.html

Jika menggunakan Custom Permalink , Permalink URL akan terbentuk tanpa potongan kata-kata dan tentu saja ini akan sangat baik untuk SEO, sehingga akan sempurna seperti dibawah ini :

http://bloggingpasuruan.blogspot.com/2014/05/Cara-Menghilangkan-Gambar-Google-bingkai-Blog.html

Nah sekarang terserah Sobat sebagai pilihan terakhir adalah bagaimana membuat Permalink URL. Sejak Blogger memberi kita pilihan yang sangat baik, terutama untuk membuat Permalink URL Custom.

Saya akan sangat berterima kasih jika sobat Blogger berkenan meninggalkan komentar, saran atau tambahan informasi serta pertanyaan seputar artikel Cara Membuat URL Custom Permalink Blogspot yang SEO Friendly. Semoga bermanfaat dan terima kasih..

Cara Mengundang Orang Lain Menjadi Penulis Blog Anda

06:23
Cara Mengundang Orang Lain Menjadi Penulis Blog Anda

Salam Blogger, Artikel kali ini tentang Cara Mengundang Orang untuk Menjadi Penulis Blog Apakah Sobat sibuk dan tidak sempat menulis atau update artikel ?  Sobat tidak memiliki waktu untuk menulis sebuah artikel, padahal vacum dalam update artikel memiliki dampak pada trafik blog Sobat ( untuk algoritma terbaru 2014 ). Mengapa tidak mengundang orang untuk menjadi penulis blog Sobat ? Dengan mengundang atau mengajak orang menjadi penulis blog, itu akan memberikan efektivitas waktu yang dapat digunakan untuk mengurus blog lain. Namun, untuk mengundang orang atau teman-teman untuk menjadikan dirinya sebagai penulis blog kita, tidaklah mudah, membutuhkan waktu beberapa syarat atau ketentuan yang disepakati oleh kedua belah pihak, terutama bagi penulis blog, harus ada imbalan atau manfaat yang diberikan Selain itu, harus ada prosedur yang harus dilakukan terlebih dahulu, sebelum mengundang orang lain untuk menjadi bagian dari blog kami

Cara Mengundang Orang Menjadi Penulis Blog

1. Silahkan login terlebih dahulu ke Akun Blogger Sobat

2. Di dalam Dashboard Blogger, pilih menu Settings >> Dasar ( Basic )

Cara Mengundang Orang Lain Menjadi Penulis Blog Anda
klik untuk memperbesar gambar

Keterangan :

1. Sobat Klik Basic ( Dasar )
2. Lihat pada Menu PERMISSION
3. Klik Add Author ( Tambahkan Penulis )

Cara Mengundang Orang Lain Menjadi Penulis Blog Anda
klik untuk memperbesar gambar

4. Pada kolom tambahkan Penulis, Ketik alamat Email ( Orang yang Sobat undang menjadi penulis Blog )

5. Klik " Undang Penulis "

6. Langkah berikutnya adalah untuk meminta pemilik alamat email untuk membuka email karena ada email baru yang dikirim oleh blogger untuk verifikasi. Sekaligus pemilik email diminta untuk log in blogger nya.

Buka email dan klik Terima Undangan

Teman Anda telah menjadi penulis blog Anda dan dapat memberikan kontribusi artikel. maka Anda dapat menentukan apakah teman Anda akan menjadi admin atau hanya seorang penulis biasa. Akhirnya pada dashboard blog Anda ada 2 penulis

Baca juga artikel Perbedaan antara Penulis dan ADMIN Blog agar sobat tahu sisi positif dan negatif jika Blog memiliki penulis dari luar ( informasi mencegah hal hal yang tak di inginkan )

Saya akan sangat berterima kasih jika sobat Blogger berkenan meninggalkan komentar, saran atau tambahan informasi serta pertanyaan seputar artikel Cara Mengundang Orang untuk Menjadi Penulis Blog Anda. Semoga bermanfaat dan terima kasih..



Perbedaan antara PENULIS ( Author ) Blog dan ADMIN Blog

05:04
Perbedaan antara PENULIS ( Author ) Blog dan ADMIN Blog

Salam Blogger, Artikel Bloggingpasuruan kali ini tentang Perbedaan antara PENULIS ( Author ) Blog dan ADMIN Blog. 10 Perbedaan Antara Penulis dan Admin Blog dalam artikel ini, saya akan menjelaskan perbedaan diantaranya. Bila dilihat secara umum, antara penulis dan admin blog adalah sama dan jika saya membedakannya dalam hal undangan atau mengundang orang untuk menjadi penulis atau admin blog ( Lihat tabel perbedaannya )

Perbedaan antara PENULIS ( Author ) Blog dan ADMIN Blog


Baca juga artikel Cara mengundang Orang Lain Menjadi Penulis di Blog Anda


10 perbedaan antara penulis dan admin blog terlihat di atas, ada satu kesimpulan yang paling penting untuk diperhatikan adalah, jika Sobat ingin bertanya atau mengundang orang lain, teman, atau sahabat, pastikan bahwa mereka adalah orang-orang yang benar-benar dapat dipercaya, karena jika tidak maka blog yang Sobat buat sedemikian baiknya akan berakhir mengenaskan jika blog tersebut dihapus sengaja dan tanpa sepengetahuan Anda karena ulah penulis yang menyalahi aturan ( term of service-nya google ) Disini admin blog yang memiliki undang-undang.

Sebagai catatan: Sebaiknya tidak mengundang penulis blog dari luar apabila Sobat tidak mengenalnya secara baik dan benar orang tersebut. Sisi baiknya jika Blog Sobat ada beberapa penulis ( berkwalitas ) tidak menutup kemungkinan Blog Sobat akan mendapat trafik yang baik pula. Namun bisa jadi sebaliknya jika Si penulis membuat ulah di dalam Blog yang Sobat kelola.

Oke, itulah 10 perbedaan antara penulis dan kategori admin blog jika Anda mengajak orang atau teman-teman sebagai penulis dan admin blog Anda. Jika ada kurang dari perbedaan yang saya tulis di atas, silakan menambahkan Anda sendiri. Semoga bermanfaat..

Cara Membuat Widget Social Media “ All in One “ di bawah Postingan Blog

01:58
Salam Blogger, Artikel Bloggingpasuruan kali ini tentang Cara Membuat Widget Social Media “ All in One  “ di bawah Postingan Blog. Widget ini meliputi Subscribe ke Email Sobat, Facebook Fan page, Social media sharing, Profile Google Plus milik Sobat.

Cara Membuat Widget Social Media “ All in One  “ di bawah Postingan Blog

Sobat Tertarik untuk memasang di Blog Sobat ? Silahkan ikuti tutorial Cara Membuat Widget Social Media “ All in One  “ di bawah Postingan Blog

1.Masuk ke Akun Blogger Sobat
2. dari Dashboard pilih Menu TEMPLATE >> EDIT HTML

Catatan Penting…!!!
Sebelum Sobat melakukan perubahan pada HTML, Silahkan BACKUP Template Sobat, guna menghindari kesalahan yang tidak di inginkan ( kerusakan pada template ).

3. Cari kode <data:post.body> Gunakan Ctrl+F untuk pencarian cepat
4.Kalau sudah ketemu, letakkan kode di bawah ini di bawah kode <data:post.body>

Cara Membuat Widget Social Media “ All in One  “ di bawah Postingan Blog

5. Berikut ini kode yang dipasang dibawah kode <data:post.body>

HTML
<!-- All-in-one Social Widget Blogger Oleh  Bloggingpasuruan -->
<;style>
.dsgbox {
background: #fff;
border: 1px solid #ddd;
height: 355px;
margin: 10px auto;
padding: 10px;
width: 650px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.dsgsubscribe {
border: 1px solid #D3D3D3;
padding: 8px;
width: 340px;
height:172px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.dsgsubscribe:hover {
-moz-box-shadow: inset 1px 1px 20px 1px rgbaundefined91,148,253, 1);
-webkit-box-shadow: inset 1px 1px 20px 1px rgbaundefined91,148,253, 1);
box-shadow: inset 1px 1px 10px 1px rgbaundefined91,148,253, 1, 1);
}
.dsgmailbox {
border: 1px solid #D3D3D3;
-webkit-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgbaundefined255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgbaundefined0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgbaundefined0, 0, 0, 0.4) inset;
color: #666;
font: 14px &quot;trebuchet ms&quot;, sans-serif;
padding: 7px 15px;
width: 160px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.dsgmailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.dsgsubmit {
font: bold 18px Segoe UI,RobotoTahoma, Geneva, sans-serif;
font-style: normal;
color: #ffffff;
background: #5b94fd;
border: 1px dashed #ffffff;
border-radius: 10px 10px 10px 10px;
padding: 4px 15px;
cursor: pointer;
margin: 0 auto;
}
.dsgsubmit:active, .dsgsubmit:hover {
cursor: pointer;
color:#5b94fd;
border: 1px dashed #fff;
background:#000;
position: relative;
top: 1px;
}
.dsgsubmit::-moz-focus-inner {
border: 0;
padding: 0;
margin: 0;
}
.dsgsharebox {
border: 1px solid #D3D3D3;
margin: -157px 0 0 350px;
padding: 8px;
height:130px;
width: 273px;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.gplusholder {
margin: -157px 0 0 350px;
}
.dsgsharebox:hover {
-moz-box-shadow: 1px 1px 2px #CCC inset;
-webkit-box-shadow: inset 1px 1px 20px 1px rgbaundefined91,148,253, 1);
box-shadow: inset 1px 1px 20px 1px rgbaundefined91,148,253, 1);
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
</style>
<div class="dsgbox">
      <div class="dsgsubscribe">
            <div style="color: #666666; font-weight: bold; font: 22px Segoe UI, Roboto, cursive; margin: 0px 0px 10px 15px;">
                   Suka dengan Artikel ini ? Kirim Langsung ke Inbox Email Anda!
            </div>
            <div style="margin: 10px 0 0 6px;">
                  <form action="http://feedburner.google.com/fb/a/mailverify" class="emailform" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=YOUR_ACCOUNT', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" style="margin: 0pt;" target="popupwindow">
                        <input name="uri" type="hidden" value="YOUR_ACCOUNT"/>
                        <input name="loc" type="hidden" value="en_US"/>
                        <input class="dsgmailbox" name="email" onblur="if undefinedthis.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}" onfocus="if undefinedthis.value == &quot; Masukkan Email disini...&quot;) {this.value = &quot;&quot;}" type="text" value="Masukkan Email disini "/>
                        <input alt="" class="dsgsubmit" title="" type="submit" value="Subscribe"/>
                  </form>
            </div>
            <div style="border: none; color: #666666; font: 19px Segoe UI, Roboto; margin: 25px 0 0 5px;">
                   Follow us on:
            </div>
            <div style="margin: -32px 0 0 120px;">
                  <a href="https://www.facebook.com/YOUR_ACCOUNT" target="_blank" title="Join us on Facebook"><img alt="facebook" src="https://lh5.googleusercontent.com/-hbgtzN6sfys/UC_Rt4HCCUI/AAAAAAAAGI4/sNVfSO9oubo/s32/facebook500.png style=&quot;border: 0px; padding:2px;&quot;"/></a>
                  <a href="https://www.twitter.com/YOUR_ACCOUNT" rel="nofollow" target="_blank" title="Follow us on Twitter"><img alt="twitter" src="https://lh5.googleusercontent.com/-cBjXpo4xiHA/UC_RvG1JfwI/AAAAAAAAGJI/cQF9OReQCog/s32/twitter.png" style="border: 0px; padding: 2px;"/></a>
                  <a href="https://plus.google.com/+YOUR_ACCOUNT" rel="nofollow" target="_blank" title="Follow us on Google+"><img alt="gplus" src="https://lh4.googleusercontent.com/-dzFCD4A8UqU/UC_Rtz0xGDI/AAAAAAAAGI8/iz4dYkboPZ0/s32/googleplus-revised.png" style="border: 0px; padding: 2px;"/></a>
                  <a href="http://pinterest.com/YOUR_ACCOUNT" rel="nofollow" target="_blank" title="Follow us on Pinterest"><img alt="pinterest" src="https://lh3.googleusercontent.com/-VHXyLvPpEBg/UC_Rt63AIdI/AAAAAAAAGJA/xMdGrSFINE4/s32/pinterest.png" style="border: 0px; padding: 2px;"/></a>
                  <a href="http://www.YOUR_ACCOUNT.com/feeds/posts/default?alt=rss" rel="nofollow" target="_blank" title="Subscribe to RSS"><img alt="rss" src="https://lh6.googleusercontent.com/-14vjEhUXrMk/UC_RuxvrOgI/AAAAAAAAGJQ/OQT6x8yxTXY/s32/rss.png" style="border: 0px; padding: 2px;"/></a>
            </div>
      </div>
      <div class="dsgsharebox">
            <script type="text/javascript">
var switchTo5x = true;
 </script>
            <script src="//s7.addthis.com/js/300/addthis_widget.js" type="text/javascript"></script>
            <br/>
            <div style="margin: -15px 5px;">
                  <a class="addthis_button_facebook_like" fb:like:layout="button_count">
                  </a>
            </div>
            <div style="float: right; margin: -15px -5px 0 0;">
                  <a class="addthis_button_stumbleupon_badge">
                  </a>
            </div>
            <div class="addthis_toolbox addthis_default_style " style="margin: 16px 0 10px 98px;">
                  <a class="addthis_button_google_plusone" g:plusone:size="inline">
                  </a>
            </div>
            <div style="margin: 5px 5px;">
                  <a class="addthis_button_tweet">
                  </a>
            </div>
            <div style="float: right; margin: -30px -60px 0 0;">
                  <a class="addthis_button_pinterest_pinit" pi:pinit:layout="horizontal"></a>
            </div>
      </div>
      <div style="margin-top: 35px;">
            <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FYOUR_ACCOUNT&amp;width=340&amp;colorscheme=light&amp; show_faces=true&amp;stream=false&amp;header=false&amp;height=170" style="border: none; height: 160px; overflow: hidden; width: 340px;">
            </iframe>
      </div>
      <div class='gplusholder'>
            <div class='g-person' data-href='https://plus.google.com/YOUR_ACCOUNT'data-layout='landscape' data-showcoverphoto='false' data-showtagline='false' data-width='225'>
            </div>
      </div>
</div>
<!-- All-in-one Social Widget Blogger Oleh Bloggingpasuruan-->



" Kustomisasi

Gantikan YOUR_ACCOUNT denganID ( facebook fan page,twitter,google plus,feedberner ) milik Sobat.

Catatan Penting !

Jika Widget tidak bekerja, silahkan merubah letak ( kode ) pada <data:post.body> yang kedua atau yang ketiga. Jika masih ada masalah silahkan kontak Admin untuk bantuan.


Saya akan sangat berterima kasih jika sobat Blogger berkenan meninggalkan komentar, saran atau tambahan informasi serta pertanyaan seputar artikel Cara Membuat Widget Social Media “ All in One  “ di bawah Postingan Blog. Semoga bermanfaat dan terima kasih..