Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Cara Membuat Widget Berlangganan Artikel Pada Blog

69 komentar
Cara Membuat Widget Berlangganan Artikel Pada Blog
Cara Membuat Widget Berlangganan Artikel Pada Blog - Sobat blooger, setelah tadi saya membuat artikel mengenai Cara Mengetahui ID Feedburner, kali ini saya akan membuat artikel mengenai Cara Membuat Widget Berlangganan Artikel Pada Blog. Untuk memasang widget ini pada blog sobat, sobat blogger wajib memiliki ID Feedburner, karena widget ini memerlukan ID Feedburner sobat.


Dalam postingan kali ini saya akan menjelaskan bagaimana cara menambahkan widget kotak berlangganan RSS dengan ikon social media. Saya berharap dengan membuat postingan widget ini sobat dapat menyukainnya. Dengan menggunakan widget ini, pengunjung dapat berlangganan artikel pada blog sobat. Jadi, ini dapat membantu pengunjung blog sobat untuk mendapatkan update artikel terbaru melalui email. Saya menggunakan CSS dan HTML untuk widget ini, jadi sobat blogger yang ingin menggunakan widget ini, tidak perlu repot-repot edit HTML template sobat. Cukup dengan menambahkan gedget HTML/Javascript.

Jika sobat ingin memasang widget ini pada blog sobat, silahkan ikuti langkah-langkah berikut.


  • Login ke akun blog sobat.
  • Pilih Tata Letak =>> Tambahkan Gedget / Add Gedget.
  • Pilih HTML/Javascript.
  • Copy kode dibawah ini, kemudian Paste pada kotak HTML/Javascript.


<style>
#sidebar-subscribe-box{width:300px;border:1px solid #aaa;border-radius:3px;padding:3px 0}
 .sidebar-subscribe-box-wrapper{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxtgUujem8DGbe1e8vpJl8Q6KuEHXSuv2F0hEDKhSsp6Irz77ousyufXBXCOtzRINE5xKsvGQEXMzxOVs7M1XdYvVavvL_ruCL6ZFELLc1ON-anZuKesiK4c3VwDBG3OmESKuKiUcXTZw/s1600/background.png) repeat scroll 0 0 #f7f7f7;color:#111;font-size:14px;line-height:20px;padding:1px 20px 10px;text-align:center;text-transform:uppercase}
 .sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0}form.sidebar-subscribe-box-form{clear:both;display:block;margin:10px 0 0;width:auto}
 .sidebar-subscribe-box-email-field{-moz-border-radius:4px;-webkit-border-radius:4px;background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8Higybmqrlb5kvwNikiGFsk4z9xAxgi2toJBKz7zdbUTt08QXKlvgbcm3SKGqQZmiSStbXO2dlKR1Q9HkaB52c446RsyJaTYAt7Z8uyjrF4U3Lc7tBsZcyFGnC4J03Nhd9Oz4rlZA1bE/s1600/icons.png) no-repeat 0 -27px;border:1px solid #ccc;border-radius:4px;color:#444;margin:0 0 15px;padding:10px 40px;width:68%}
 .sidebar-subscribe-box-email-button{background:#09f;border:1px solid #007fff;box-shadow:0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent;color:#fff;cursor:pointer;font-family:verdana;font-weight:700;padding:10px;text-shadow:1px 1px 0 rgba(0,0,0,.4);text-transform:uppercase;width:100%}
 .sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus{background:#1ca4ff}
 .sidebar-subscribe-box-email-button:active{-moz-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;-webkit-box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;box-shadow:0 1px 4px rgba(0,0,0,0.5) inset;outline:0}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table{width:100%}embed{border-radius:3px;-moz-box-shadow:0 2px 4px rgba(0,0,0,0.2);-webkit-box-shadow:0 2px 4px rgba(0,0,0,0.2);background:#FFF;border:1px solid #ddd;box-shadow:0 2px 4px rgba(0,0,0,0.2);margin:0;padding:4px 4px 4px}
 #footer-section{border-top:1px solid #aaa;box-shadow:inset 0 4px 6px -3px #aaa;font-family:cambria;font-size:14px;height:100px;margin:10px -30px 5px;padding:0 30px;text-align:center;width:100%}
a.social-icons{margin-right: 5px;height:45px;width:45px;}
a.social-icons:hover { opacity: .7; filter:alpha(opacity=70);}
</style>

<div id="sidebar-subscribe-box">
<div class="sidebar-subscribe-box-wrapper">
    <br/>
<a class="social-icons" href="https://facebook.com/pages/Mari-Berbagi/621944211167293"><img src="http://i1319.photobucket.com/albums/t668/Rozzby24/Mariberbagi244-Facebook_zps68f4035b.png" /></a>
<a class="social-icons" href="https://twitter.com/Rozzby"><img src="http://i1319.photobucket.com/albums/t668/Rozzby24/Mariberbagi244-Twitter_zps433926c5.png" /></a>
<a class="social-icons" href="https://plus.google.com/u/0/107359511677117739258/"><img src="http://i1319.photobucket.com/albums/t668/Rozzby24/Mariberbagi244-Googleplus_zps8404ed17.png" /></a>
<a class="social-icons" href="http://feeds.feedburner.com/blogspot/MPGFW"><img src="http://i1319.photobucket.com/albums/t668/Rozzby24/Mariberbagi244-RSS_zpsc0214ee8.png" /></a>
<p>Subscribe To Our Email Newsletter & Receive Updates Free</p>
<div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=blogspot/MPGFW" class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=blogspot/MPGFW', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="blogspot/MPGFW" />
<input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address here"/>
<input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now !" /></form>
</div></div></div>


  • Ganti kode yang berwarna Biru dengan URL Facebook/Fanspage sobat.
  • Ganti kode yang berwarna Merah dengan URL Twitter sobat.
  • Ganti kode yang berwarna Orange dengan URL Google Plus sobat.
  • Ganti kode yang berwarna Ungu dengan URL Feedburner sobat.
  • Ganti kode yang berwarna Hijau dengan ID Feedburner sobat.
  • Simpan HTML/Javascript.



Demikian artikel mengenai Cara Membuat Widget Berlangganan Artikel Pada Blog. Semoga artikel ini dapat berguna dan bermanfaat untuk sobat blogger yang membutuhkan. Salam Blogger

Read More »

Cara Mengetahui ID Feedburner

46 komentar
Cara Mengetahui ID Feedburner
Cara Mengetahui ID Feedburner - Hai sobat blogger, bagaimana kabarnya? Saya yakin kabar sobat baik-baik saja. Gak terasa 3 hari lamanya saya tidak posting artikel baru. Oke, kali ini saya akan membuat artikel baru mengenai Cara Mengetahui ID Feedburner. Feedburner adalah manajeman penyedia feed web yang diluncurkan pada tahun 2004. Feedburner menyediakan RSS (Really Simple Syndication, Rich Site Summary) feed custom dan alat-alat manajeman untuk blogger, podcast, dan penerbit konten lain berbasis web.

Sudah banyak sekali blogger-blogger yang menggunakan layanan ini, karena registrasi gratis dan cara penggunaannya cukup mudah. Namun tidak dapat dipungkiri, banyak juga sobat blogger yang lupa dengan ID Feedburner miliknya, bahkan saya sendiri juga lupa apa ID Feedburner milik saya sendiri. Oleh karena itu saya akan buat artikel Cara mengetahui ID Feedburner, agar sobat blogger yang lupa akan ID Feedburnernya dapat mengetahui ID Feedburner miliknya. Berikut langkah-langkah untuk mengetahui ID Feedburner.


  • Silahkan sobat Login ke akun sobat di feedburner.com
  • Kemudian klik Feed sobat.


Cara Mengetahui ID Feedburner


  • Kemudian klik Edit Feed Details di bagian kiri atas, maka sobat dapat melihat ID Feedburner sobat pada halaman yang sudah terbuka.


Cara Mengetahui ID Feedburner


  • Selesai


Sekian artikel mengenai Cara Mengetahui ID Feedburner yang saya buat. Semoga artikel ini dapat berguna dan bermanfaat untuk sobat blogger yang membutuhkan. Salam Blogger.

Read More »

Cara Mudah Membuat Widget Social Media Share Tanpa Edit HTML

36 komentar
Cara Mudah Membuat Widget Social Media Share Tanpa Edit HTML
Cara Mudah Membuat Widget Social Media Share Tanpa Edit HTML - Hai sobat bloger. Selamat sore. Ngomong-ngomong, rasanya saya sudah lama tidak membuat postingan. Yap, jika sobat bertanya kenapa lama tidak buat postingan dikarnakan saya sibuk ujian akhir. Hari ini saya akan sempatkan untuk share beberapa artikel, salah satunya artikel mengenai Cara Mudah Membuat Social Media Share Tanpa Edit HTML. Buat sobat blogger yang sedang mencari-cari widget social media share, saya akan memberikan tutorial cara pembuatannya tanpa mengedit HTML yang ada di Template.


Untuk sobat blogger yang baru membuat blog, saya sarankan untuk menggunakan widget ini. Kenapa saya bilang begitu, karena menurut saya widget yang satu ini wajib untuk dimiliki dan dipasang di blog sobat untuk meningkatkan jumlah pengunjung blog sobat. Dengan menggunakan jasa jejaring sisial yang sedang populer saat ini bukan tidak mungkin kan untuk menambah jumlah pengunjung / visitor blog sobat. Selain untuk menambah jumlah pengunjung blog sobat, masih banyak kegunaan atau manfaat yang bisa sobat dapatkan dengan memasang widget ini. Untuk sobat yang ingin memasang widget ini di blog sobat, silahkan ikuti langkah-langkah yang saya buat berikut.


  • Masuk / Login ke akun blog sobat.
  • Pilih Tata Letak =>> Tambahkan Gedget.
  • Pilih HTML/Javascript.
  • Setelah itu sobat Copy kode dibawah ini dan Paste di kolom HTML/Javascript.


 /*--------Touch Me Sharing Widget mari-berbagi244.blogspot.com Start ------*/

<style>
 
    .touchme a {
    display:block;
    height:50px;
    width:50px;
    padding:0 4px;
    float:left;
    background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEix8dyuJkPTQKSV_J5rtfWFWK9VnHBsj_zVMSuQhdyosidyzArmpdT4MY5zU3yjhp2MrSHyY7Rbp_Z2QeqM321q1K2e4hTGLqK4j_PRjLp33rnTc0sZacjHCSItEb5r2uztODkunnMyzdo/s1600/Sharing+Touch+Me.png) no-repeat;
    -webkit-transition: ease-in 0.2s all;  
    -moz-transition: ease-in 0.2s all;  
    -o-transition: ease-in 0.2s all;  
    -ms-transition: ease-in 0.2s all;  
    transition: ease-in 0.2s all;
    cursor:pointer;

    }

    .touchme a.googleplus {
    background-position: 0px -58px;

    }
    .touchme a.googleplus:hover {
    background-position: 0px 0px;
    }


    .touchme a.twitter {
    background-position: 0px -290px;

    }
    .touchme a.twitter:hover {
    background-position: 0px -232px;

    }
    .touchme a.facebook {
    background-position: 0px -406px;

    }
    .touchme a.facebook:hover {
    background-position: 0px -348px;

    }


    .touchme a.rss {
    background-position: 0px -174px;

    }
    .touchme a.rss:hover {
    background-position: 0px -116px;

    }


    </style>


    <div class='touchme'>

    <!--RSS-->
    <a class='rss' href="Link RSS Sobat" target='_blank'></a>

    <!--Google Plus-->
    <a class='googleplus' href="Link Goggle Plus Sobat" target='_blank'></a>

    <!--Facebook-->
    <a class='facebook' href="Link FACEBOOK Sobat" target='_blank'></a>

    <!-- Twitter -->
    <a class='twitter' href="Link TWITTER Sobat" target='_blank' ></a>


    </div>
/*--------Touch Me Sharing Widget mari-berbagi244.blogspot.com End ------*/


  • Silahkan sobat ganti tulisan yang berwarna Biru dengan Link Sosial Media sobat.
  • Kemudian Simpan HTML/Javascript.
Cara Mudah Membuat Widget Social Media Share Tanpa Edit HTML
Contoh Widget
Demikian tutorial Cara Mudah Membuat Widget Social Media Share Tanpa Edit HTML dari saya. Somoga artikel yang saya buat ini dapat berguna dan bermanfaat untuk sobat blogger yang membutuhkan. Jika sobat mengalami kesulitan dalam membuat widget ini, silahkan hubungin saya lewat kolom komentar dibawah atau lewat chatbox atau bisa juga kirim Email ke saya. Terima Kasih dan Salam Blogger.

Read More »

Cara Mudah Membuat Widget Multi Tab View Pada Blog

31 komentar
Cara Mudah Membuat Widget Multi Tab View Pada Blog
Cara Mudah Membuat Widget Multi Tab View Pada Blog - Selamat malam sobat blogger. Gimana kabarnya? tentunya baik-baik saja kan. Kali ini saya akan membuat artikel mengenai Cara Mudah Membuat Widget Multi Tab View Pada Blog. Multi tab widget adalah suatu keharusan widget untuk setiap blog. Ini membantu untuk mengurangi loading blog dengan menggabungkan tiga atau lebih dari tiga widget menjadi satu. Sobat mungkin telah melihat widget ini pada setiap blog yang sobat kunjungi dan bahkan di blog saya (lihat sidebar) tetapi pertanyaannya adalah bagaimana cara menambahkannya?



Read More »

Cara Membuat Menu Bar Keren Dengan CSS3 Pada Blog

56 komentar
Cara Membuat Menu Dar Keren Dengan CSS3 Pada Blog - Selamat siang sobat blogger. Maaf baru bisa posting artikel lagi, dikarnakan saya kemaren sibuk, jadi tidak sempat untuk membuat postingan. Baik, kali ini saya akan berbagi ilmu sedikit mengenai Cara Membuat Menu Bar Keren Dengan CSS3 Pada Blog. Menu bar sangat penting dalam blogger. Karena membantu untuk menavigasi blog atau website sobat dengan mudah. Ini memungkinkan pengunjung blog sobat dapat menemukan dengan mudah apa yang mereka cari pada blog sobat. Dalam tutorial ini saya akan menjelaskan cara menambahkan CSS3 menu bar untuk blogger.

Cara Membuat Menu Bar Keren Dengan CSS3 Pada Blog

Read More »

Cara Mempercepat Loading Blog Menggunakan Script

13 komentar
Cara Mempercepat Loading Blog Menggunakan Script
Cara Mempercepat Loading Blog Menggunakan Script - Sobat blogger, kali ini saya akan share artikel mengenai Cara Mempercepat Loading Blog Menggunakan Script. Sebuah blog yang memiliki loading yang cepat merupakan sesuatu yang wajib bagi setiap blogger. Karena sebagai pemilik blog, ini merupakan salah satu langkah untuk memberikan yang terbaik untuk pengunjung blog. Jika blog yang kita miliki memiliki loading page yang seperti siput (lelet) maka bukan tidak mungkin pengunjung blog malas untuk berkunjung lagi ke blog kita. Untuk diketahui juga, jaringan internet yang pengunjung pakai bermacam-macam, ada yang kenceng ada juga yang lelet.

Read More »

Cara Membuat Sitemap / Daftar Isi Blog Secara Otomatis

16 komentar
Cara Membuat Sitemap / Daftar Isi Blog Secara Otomatis - Hai sobat blogger dan selamat malam. Gimana kabar sobat blogger semua? Pastinya sehat-sehat saja kan. Baik, jika seobat bloger sehat-sehat saja dan lagi semangat-semangatnya blogging, saya akam memberitahukan trik / Cara Membuat Sitemap atau Daftar Isi Blog Secara Otomatis. Untuk membuat site map ini sobat tidak perlu bersusah-susah, dan caranya sangat gampang / mudah sekali, tinggal sobat ikuti petunjuk yang saya berikan.
Cara Membuat Sitemap / Daftar Isi Blog Secara Otomatis


Read More »

Cara Membuat Chat Box di Blog

6 komentar
Cara Membuat Chat Box di Blog
Cara Membuat Chat Box di Blog - Hai sobat blogger, bagaimana kabarnya? Baik-baik saja kan. Oke kalo begitu saya akan share artikel buat sobat mengenai Cara Membuat Chat Box di Blogger. Perlu sobat blogger ketahui, kegunaan dari chat box ini sendiri adalah sebagai buku tamu yang bisa dikatakan penting buat blog sobat, dimana pengguna buku tamu atau chat box untuk memberi jejak bagi pengunjung yang mengunjungi blog sobat.


Read More »

Cara Membuat Fanspage Facebook Untuk Blog

0 komentar
Cara Membuat Fanspage Facebook Untuk BlogSobat blogger, kali ini saya akan share bagaimana Cara Membuat Fanspage Facebook Untuk Blog. Facebook.. Siapa sih yang gak tau Facebook, mungkin hampir semua orang tau apa itu Facebook, dari anak - anak sampai orang tua tau apa itu Facebook. Facebook adalah jejaring sosial terpopuler sampai pada saat artikel ini ditulis. Melihat dari itu ada baiknya sobat membuat Fans page Facebook buat blog sobat yang natinya berguna untuk share artikel / postingan blog sobat ke Facebook. Banyak sekali manfaat yang didapat dari Fanspage Facebook ini, antara lain :

  1. Buat sobat yang suka berbisnis online bisa di manfaatkan buat cari downline/ referral sangat mudah mencari referral di facebook fans page! 
  2. Buat sobat yang suka ngeblog disa dipromosikan blog sobat lewat Fanspage Facebook ini. Sebagai contoh, jika ada sekitar 5000 likers di Fanspage sobat buak tidak mungkin ada sekitar 500-1000 orang yang berkunjung ke blog sobat. 
  3. Bisa meningkatkan page rank blog. Dengan banyaknya pengunjung yang mengunjungi blog sobat page rank blog sobat akan naik. 
  4. Sangat bermanfaat buat sobat yang bisnis periklanan / google adense.


Read More »

Cara Membuat / Menambahkan / Mengganti Favicon Pada Blog

5 komentar
Apa kabar sobat blogger semua. Kali ini saya akan share artikel mengenai bagaimana mengganti favicon standar dari Blogger menjadi Favicon yang kita inginkan. Favicon adalah kependekan dari "Favorite Icon", yaitu berupa image / animasi kecil yang berukuran 16x16 32x32 64x64 pixel yang berbentuk bujur sangkar dan berukuran kurang dari 100 KB. Biasanya Favicon merupakan Logo dari sebuah situs atau blog. Favicon akan muncul pada bagian adreess bar suatu browser atau pada bagian bookmark.

Tujuan penggunaan Favicon adalah untuk memudahkan orang untuk mengidentifikasi sebuah blog atau situs yang dikunjungi, dan bisa juga menjadi ciri sebuah blog atau situs tersebut. Dengan adanya Favicon tentu akan membuat blog atau situs yang kita buat semakin terlihat Profesional.

Cara Membuat / menambah / Mengganti Favicon Pada Blog

Contoh Favicon

Read More »

Cara Menghilangkan NavBar Pada Blog

2 komentar
Contoh Navbar
Mau tau cara menghilangkah Navbar di blog? Baca artikel Cara menghilangkan Navbar berikut. Navbar adalah fasilitas yang dimiliki oleh Blogger/blogspot, bentuknya berupa kotak kecil memanjang kesamping yang letaknya berada di bagian paling atas dari blog yang fungsinya antara lain untuk mulai melakukan Sign In/out atau bisa juga membuat Blog baru. Navigation Bar juga bisa digunakan untuk melaporkan kecurangan atau tindak kejahatan weblog yang dilakukan oleh seorang blogger, misalnya kontent blognya yang melanggar TOS atau hal-hal yang dianggap merugikan orang lain.


Read More »

Apa itu Blog?

0 komentar
Blog merupakan singkatan dari web log adalah bentuk aplikasi web yang menyerupai tulisan-tulisan (yang dimuat sebagai posting) pada sebuah halaman web umum. Tulisan-tulisan ini seringkali dimuat dalam urut terbalik (isi terbaru dahulu baru kemudian diikuti isi yang lebih lama), meskipun tidak selamanya demikian. Situs web seperti ini biasanya dapat diakses oleh semua pengguna Internet sesuai dengan topik dan tujuan dari si pengguna blog tersebut.

1. Sejarah
     Media blog pertama kali dipopulerkan oleh Blogger.com, yang dimiliki oleh PyraLab sebelum akhirnya PyraLab diakuisi oleh Google.Com pada akhir tahun 2002 yang lalu. Semenjak itu, banyak terdapat aplikasi-aplikasi yang bersifat sumber terbuka yang diperuntukkan kepada perkembangan para penulis blog tersebut.


Blog mempunyai fungsi yang sangat beragam,dari sebuah catatan harian, media publikasi dalam sebuah kampanye politik, sampai dengan program-program media dan perusahaan-perusahaan. Sebagian blog dipelihara oleh seorang penulis tunggal, sementara sebagian lainnya oleh beberapa penulis, . Banyak juga weblog yang memiliki fasilitas interaksi dengan para pengunjungnya, seperti menggunakan buku tamu dan kolom komentar yang dapat memperkenankan para pengunjungnya untuk meninggalkan komentar atas isi dari tulisan yang dipublikasikan, namun demikian ada juga yang yang sebaliknya atau yang bersifat non-interaktif.
Situs-situs web yang saling berkaitan berkat weblog, atau secara total merupakan kumpulan weblog sering disebut sebagai blogosphere. Bilamana sebuah kumpulan gelombang aktivitas, informasi dan opini yang sangat besar berulang kali muncul untuk beberapa subyek atau sangat kontroversial terjadi dalam blogosphere, maka hal itu sering disebut sebagai blogstorm atau badai blog.


Read More »