Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts

Cara Membuat Blog dari Blogger 2016

Cara Membuat Blog dari Blogger

Barangkali ada yang berminat atau berbakat menjadi seorang penulis di sebuah blog, namiun bagaimana jika tidak tahu caranya ? tenang saja kali ini Admin akan memberikan tutorial yang cukup mudah di mengerti dan bisa langsung di praktekan. 

Ok langsung saja dengan cara nya sebagai berikut :

1. Buat Email Gmail terlebih dahulu disini

Kenapa harus menggunakan Email Gmail ? Kenapa tidak menggunakan Email Yahoo ? Kita tahu bahwa Blogger dan Gmail adalah satu produk keluaran  dari Google.

email sangatlah penting bagi saya mungkin bagi semua orang, Karena hampir semua produk internet memerlukan email sebagai alat untuk masuk (login). Misalnya : Google++ , Twitter, Ask.fm,  Instagram, dan lain-lain.

Setelah Anda mempunyai email sebaiknya dicatat kemudian simpan USERNAME dan PASSWORD ditempat yang aman, untuk membackup jika kita lupa apalagi kalau sedang galau haha....

Kembali Ke LAPTOP....

2. silahkan masuk ke situs BLOGGER. Akan terbuka menu baru untuk login ke blogger, kemudian isikan EMAIL Anda dan PASSWORD yang sudah dibuat sebelumnya, 




3. Akan terbuka layar baru , klik saja kotak bertuliskan "Blog Baru" kemudian tekan ENTER




5. Anda akan memasuki layar baru, silahkan isi JUDUL BLOG , buatlah judul yang sesuai dengan thema blog, upayakan jangan terlalu panjang. 
  

kemudian isi alamat blog  Jika alamat blog yang anda ketikan belum ada yang miliki / gunakan maka akan tampil "alamat ini tersedia" , tetapi jika alamatnya sudah ada yang menggunakannya maka akan ada pesan " maaf, alamat ini tidak tersedia" dan tanda seru (!) berwarna kuning maka Anda harus mencoba alamat baru lagi. 

dan pilih lah Template sesuai dengan judul atau sesuai dengan keinginan , minat dan kesukaan masing - masing...kemudian klik saja "buat blog!".

Nah, Sudah selesai, selamat berkreasi....

Cara Mengganti Template Blog Sesuai Keinginan

Template Blog ya memang begitu-begitu saja kalau tidak di ganti oleh Admin pasti lambat waktu kewaktu akan membuat pembaca apalagi Admin sendiri pasti melihat nya bosan, maka dari itu kali ini saya akan memberikan Tutorial Cara Mengganti Template Blog Sesuai Keinginan.
Sekarang sudah banyak situs yang menyediakan link download Template Responsive, Friendly, Anime, dan masih banyak lain nya yang pasti dengan Fitur - Fitur yang menarik dan lebih keren lagi , Okay siapkan terlebih dahulu bahan nya yaitu template Blog yang akan di pakai silahkan cari di sini :v

Cara Mengganti Template Blog Sesuai Keinginan

1. Pastikan sudah ada template blog yang sudah di download sebelumnya.
2. Masuk ke Dashboard Blogger, Lalu pilih Template


3. Lihat Pojok kanan atas Klik " Cadangkan/Pulihkan "


4. klik "Choose File" dan pilih file template blog yang sudah tersimpan di PC atau Laptop atau Netbook atau Hp anda,


5. Klik Unggah Tunggu hingga selesai....
6. Selesai.....

Tips : saya menyarankan agar tidak sering melakukannya. Kenapa ? Jika terlalu sering melakukannya tentu ada pengaruh buruk terhadap blog. Perbedaan struktur pembangun di template blog menyebabkan mesin pencari akan kesulitan mengidentifikasi keunikan template blog sehingga mempengaruhi hasil crawl.

Cara Mengganti Template Blog dengan Template Bawaan Blogger

Ok kali ini Admin akan memberikan tutorial cara mengganti template blog dengan Template Bawaan Blogger , Langsung saja siapin Kopi + Email Blogger + InET :v 

Cara Mengganti Template Blog Bawaan Blogger

1. Masuk ke dashboard blogger
2. Pada menu, Pilih  TEMPLATE kemudian klik " Sesuaikan"



3. Pilih template blog ( yang di beri kotak merah ) sesuai dengan minat ( preview akan terlihat di layar bawah monitor Anda) , Jika sudah terpilih klik saja "Terapkan ke Blog", Sebelum menerapkan ke blog Anda bisa meng-klik "back to blogger" untuk membatalkan. Tapi jika sudah klik apply to blog maka template tidak bisa dibatalkan lagi.




4. Selesai.

Cara agar postingan tidak bisa di copy paste

Cara agar postingan tidak bisa di copy paste

Mungkin hal paling menyebalkan adalah ketika postingan kita di ambil oleh orang lain tanpa izin, setelah lama kalian mengetik dengan susah payah untuk menuangkan nya ke dalam sebuah tulisan kalian , Jika demikian anda bisa ikuti tutorial cara agar postingan tidak bisa dicopy paste.
ya meskipun sudah banyak sih mungkin postingan seperti ini yang sama, tapi setidak nya saya membaginya walaupun sudah banyak di web/blog lain, ok langsung saja CEKIDOT.


Berikut adalah cara nya untuk mematikan fungsi klik kanan , 


1. Copy kode berikut ke notepad sobat atau pengolah kata lainnya


2. Silahkan signin ke blogger dengan ID anda.
3. Klik Tata Letak.
4.  Klik tombol Tambah Gadget lalu Paste pada "HTML/javascript" dalam blog sobat
5. Save dan lihat hasilnya

Cara Membuat Menu Dropdown di Blog

Cara Membuat Menu Dropdown di Blog


Hallo gan kali ini Ane akan share tutorial simple caranya membuat menu dropdown yang beserta link di dalamnya, ya meskipun di blog lain mungkin sudah di share script/caranya, ok CEKIDOT, Untuk membuatnya silahkan anda copy kode HTML di bawah :










Sebagai contoh script untuk menu Dropdown lebih dari satu :






 Hasilnya akan seperti berikut : 



Menu pada dropdown bisa lebih dari satu, contoh seperti berikut :



sekian tutorial simple dari saya, semoga bermanfaat....

Cara Menyembunyikan Judul Blog di Header

Judul blog merupakan bagian penting dalam blog. Karena pada judul terdapat inti tentang isi blog tersebut. Judul blog adalah bagian pertama yang di index search engine seperti google. Tetapi jika judul blog mengganggu penampilan blog seperti gambar header. Terpaksa judul ini disembunyikan. 



Berikut adalah tutorialnya :

1. Silahkan signin ke blogger sobat.
2. Klik Rancangan.
3. Klik tab Edit HTML.
4. Klik tulisan Download Template Selengkapnya. (untuk backup template sobat )

5. Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula
6. Beri tanda centang pada kotak di samping tulisan Expand Template Widget

7. Kemudian cari kode di blog Anda yang mirip seperti dibawah ini (Fokuskan pencarian pada kode yang berwarna merah )


#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
}

8. Tambahkan Code Css berikut visibility:hidden; Kedalam Css Diatas Sehingga  menjadi seperti berikut :


#header h1 {
margin:50;
padding:5px 0 0 10px;
font-size: 100%;
font-weight:bold;
line-height: 1.2em;
letter-spacing:.0em;
font-style:italic;
color:#FFFFFF;
visibility:hidden;
}

9. Klik tombol Simpan Template.
10. Selesai. Silahkan lihat hasilnya sobat

Cara Membuat Text Area pada blog

Cara Membuat Text Area pada blog


Apa itu text area? Text area adalah area atau tempat untuk menyimpan text atau tulisan dengan membentuk area baru. Biasanya text area ini di gunakan untuk meanyimpan kode-kode HTML ataupun text lainnya agar bisa di copy oleh para pengunjung. 



Untuk membuat text area, silahkan anda Copy kode di bawah ini :


<p align="center"><textarea name="code" rows="6" cols="20">Tulis text ataupun kode-kode yang anda inginkan di sini, maka nanti tulisan anda akan tampil di dalam text area </textarea></p>

Maka hasilnya akan seperti berikut :




Keterangan :

 Rows="6", menunjukan tinggi dari text area, jadi jika anda menginginkan text area yang tinggi maka silahkan ganti angka " 6” dengan angka yang lebih tinggi nilainya. 


Cols="20", menunjukan lebar dari text area. Jika anda menginginkan text area yang lebar maka silahkan ganti angka " 20 " tadi dengan angka yang lebih tinggi nilainya. 

Text Area dengan memakai HighLight /Select All

Ada variasi lain dari membuat text area ini, yaitu text area dengan menggunakan tombol highlight. dengan adanya tombol highlight ini akan memudahkan bagi para pengunjung untuk mengcopy seluruh text ataupun kode-kode yang di berikan, karena dengan hanya sekali tekan saja pada tombol highlight tadi, maka seluruh text ataupun kode-kode yang ada di dalamnya akan di highlight dan tinggal di copy saja. Fasilitas ini sangat berguna menggunakan text ataupun kode-kode yang di berikan dalan jumlah yang sangat banyak dan ini akan mengurangi resiko tertinggalnya suatu text ataupun kode-kode untuk di copy.
Untuk membuat text area dengan menggunakan highlight ini silahkan anda copy kode HTML di bawah  ini :

<form name="copy"><p align="center"><textarea style="WIDTH: 300px; HEIGHT: 144px" name="txt" rows="100" wrap="VIRTUAL" cols="55">simpan tulisan anda di sini, maka tulisan yang anda tulis akan muncul di sini dan siap di copy oleh para pengunjung</textarea></p><div align="center"><input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All"> </div></form>


Maka hasilnya akan seperti berikut :


Berwarna :

Tulis disini...

<div style="overflow: auto; width: 500px; height: 100px;
background-color: #c1eeec; text-align: justify; padding: 5px;
border: 3px solid #999999;">Tulis disini... </div>


ganti text berwarna merah dengan kode warna yang di inginkan.


semoga bermanfaat....

Cara Mendaftarkan Blog anda di Search Engine

                 Banyak cara yang bisa kita lakukan agar blog kita bisa dikenal dan di kunjungi, antara lain adalah dengan rajinnya kita blogwalking atau berkunjung ke blog milik orang lain, mendaftarkan ke berbagai agregator, dan yang paling efektif adalah melalui search engine atau mesin pencari.
Bagi blogger pemula mungkin berangggapan bahwa apabila kita membuat website atau blog akan secara otomatis terindeks atau berada pada list berbagai search engine, dan kenyataannya tidaklah demikian. Seperti halnya sebuah sekolah, agar nama kita terdaftar pada buku daftar siswa, tentunya kita harus melakukan pendaftaran terlebih dahulu ke sekolah tersebut. Sama halnya dengan mesin pencari, agar blog kita terindeks pada mesin pencari, maka kita harus terlebih dahulu mendaftarkan blog milik kita pada situs pemilik mesin pencari.

Mesin pencari tentu jumlahnya sangat banyak sekali, dan pada saat ini yang paling terkenal di dunia adalah Google, Yahoo, serta Msn. Apabila blog kita ingin terindeks pada mesin pencari mereka, maka kewajiban kita adalah mendaftarkan URL blog kita pada mesin pencari mereka. Bila ada yang belum tahu ke manakah harus mendaftarkan blognya, maka silahkan simak tulisan berikut :

  • Google
  1. Untuk mendaftar ke google, silahkan sobat kunjungi http://www.google.com/addurl/, nah apabila sudah berada pada halaman pendaftaran ada beberapa langkah yang harus di lakukan, yaitu mengisi form yang di sediakan :
  2. URL –> Isi dengan URL blog sobat.
  3. Comments –> Isi dengan keyword atau kata kunci yang berhubungan dengan blog sobat
  4. Isi kotak kosong dengan huruf Verifikasi yang tersedia
  5. Klik tombol Add URL
Selesai. Setelah sobat melakukan pendaftaran ke Google, maka tidak serta merta blog sobat terindeks pada mesin pencari nya, akan tetapi memerlukan 3 sampai 4 minggu baru blog sobat bisa terindeks. Jika sudah 3 sampai 4 minggu, maka cobalah ketik alamat blog sobat pada mesin pencari google, apakah sudah terindeks atau belum? jika belum, coba tunggu beberapa minggu lagi, dan tuliskan kembali alamat blog sobat, Jika ternyata masih belum juga, coba deh daftarin lagi blog nya ke google seperti langkah di atas. Atau mungkin sobat tidak sabar ingin cepat terindeks, sebenarnya bisa saja ini terjadi, hanya dalam 3 atau 4 hari saja blog sobat sudah bisa terindeks di google.

  • Daftar Yahoo! Untuk mendaftar ke yahoo! silahkan sobat kunjungi disini. Akan tetapi untuk mendaftar ke yahoo, sobat harus terlebih dahulu mempunyai account yahoo, karena di perlukan log-in terlebih dahulu ke account yahoo. Bagi yang belum punya account yahoo ( email di yahoo ) silahkan bikin dulu disini, bagi yang sudah punya, sobat tinggal login dengan username serta password sobat. Apabila sudah login, nanti sudah tersedia kolom untuk di isi, silahkan isi kolom tersebut dengan URL sobat, kemudian klik tombol Add URL, selesai. Jika ingin memasukan alamat feed sekalian, sobat bisa memasukannya. Ingat, alamat feed di blogger hanya tinggal menambahkan atom.xml di belakang URL blog sobat, contoh : untuk blog saya ini mempunyai alamat feed sebagai berikut : 
           http://muhamad-azhari.blogspot.com/atom.xml         
          atau memakai www pun sama saja :
           http://www.muhamad-azhari.blogspot.com/atom.xml 

  • Daftar ke Msn Untuk daftar ke Msn, silahkan sobat kunjungi disini silahkan sobat isi huruf verifikasi dan URL sobat pada kotak yang tersedia, kemudian klik tombol Submit URL, selesai.
Apabila sobat mempunyai keinginan lebih, yaitu URL blog sobat terindeks pada puluhan mesin pencari, sobat bisa menggunakan bantuan situs submitter. Coba klik saja banner dibawah ini :

Submit Your Site To The Web's Top 50 Search Engines for Free!

Submit Your Site To The Web's Top 50 Search Engines for Free!

Tugas sobat hanya mengisi alamat URL blog miliknya, serta menuliskan alamat email saja, kemudian klik tombol Submit Your Site.
Jika ingin lebih cepat terkenal coba lakukan ping ke bebagai agregator, silahkan klik banner di bawah :


Anda tinggal mengisi form yang di sediakan.
Selamat Mencoba...

CARA MENAMPILKAN LINK SUMBER KETIKA ARTIKEL DI COPAS



Menurut saya copas adalah hal yang wajar, terutama bagi blogger. Nah, namun jika sobat mengcopy paste artikel dengan tujuan untuk sobat publikasikan maka etika yang tepat adalah cantumkan link sumber dari artikel tersebut.
Nah kalian yang ingin artikel blognya ketika di copas lalu akan menampilkan sebuah link otomatis yang mengarah kepada artikel sobat, saya akan berikan scriptnya, silahkan saja pasang di blog sobat, bagaimana cara membuat link sumber otomatis ketika dicopas?  Berikut tutorial nya:

1. Login ke akun blogger sobat.
2. Klik Template > Edit HTML > Lanjutkan > Centang ( Expand Template Widget ).
3. Cari kode 
</body> ( untuk mempermudah pencarian, klik Ctrl+F atau F3 ).
4. Copas kode berikut, tepat diatas kode <body>


<script type='text/javascript'>
if(document.location.protocol==&#39;http:&#39;){ var
Tynt=Tynt||[];Tynt.push(&#39;cXIEhKYVSr4lJ5adbi-bpO&#39;);Tynt.i={&quot;ap&quot;:&quot;Link Sumber :&quot;}; (function(){var
s=document.createElement(&#39;script&#39;);s.async=&quot;async&quot;;s.type=&quot;text/javascript&quot;;s.src=&#39;https://cdn.rawgit.com/Brando07/share/Updte/seocips-lnk-smbr.js&#39;;var
h=document.getElementsByTagName(&#39;script&#39;)[0];h.parentNode.insertBefore(s,h);})();
 } </script>


5. Lalu klik Simpan...

Cara Membuat Menu Horizontal Animasi di Blog



langsung saja perhatikan langkah-langkahnya di bawah ini :
  1. Login ke blogger dengan akun anda 
  2. Kemudian pada dasbor  klik Rancangan >> Edit HTML 
  3. Tambahkan kode CSS berikut diatas tag  ]]></b:skin>: 

    .animatedtabs{
    border-bottom: 1px solid gray;
    overflow: hidden;
    width: 100%;
    font-size: 14px; /*font of menu text*/
    }
    .animatedtabs ul{
    list-style-type: none;
    margin: 0;
    margin-left: 10px; /*offset of first tab relative to page left edge*/
    padding: 0;
    }
    .animatedtabs li{
    float: left;
    margin: 0;
    padding: 0;
    }
    .animatedtabs a{
    float: left;
    position: relative;
    top: 5px; /* 1) Number of pixels to protrude up for selected tab. Should equal (3) MINUS (2) below */
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3xbS4erg4drLxu21Fs5Md3ypg0ns3cDLvFJB6M7XjRAtjYuD4eTatSGQyOaSoWoU9pAiWUfnc8KRYsO2XYQRhZWhyphenhyphenSUXdkq5tq-SHx-VaWc99eKZ8PQ5yFC_L4U_iPD57vnzxl-l6EGI/s320/tab-blue-left.gif) no-repeat left top;
    margin: 0;
    margin-right: 3px; /*Spacing between each tab*/
    padding: 0 0 0 9px;
    text-decoration: none;
    }
    .animatedtabs a span{
    float: left;
    position: relative;
    display: block;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwovF4tDP9QCBIrSC2OyX8_DRNNAV2795gmrBuakvQiPiFvUKRpms0xicoQQiGrn_5nngGwOTVhn4lE1fq0qQ4cYi-DxyB8FHUDOpSfgB5vI5IeIDT9ngmwnR5Y7htWp7IHf3kF3iysbo/s320/tab-blue-right.gif) no-repeat right top;
    padding: 5px 14px 3px 5px; /* 2) Padding within each tab. The 3rd value, or 3px, should equal (1) MINUS (3) */
    font-weight: bold;
    color: black;
    }
    /* Commented Backslash Hack hides rule from IE5-Mac \*/
    .animatedtabs a span {float:none;}
    /* End IE5-Mac hack */
    .animatedtabs .selected a{
    background-position: 0 -125px;
    top: 0;
    }
    .animatedtabs .selected a span{
    background-position: 100% -125px;
    color: black;
    padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
    top: 0;
    }
    .animatedtabs a:hover{
    background-position: 0% -125px;
    top: 0;
    }
    .animatedtabs a:hover span{
    background-position: 100% -125px;
    padding-bottom: 8px; /* 3) Bottom padding of selected tab. Should equal (1) PLUS (2) above */
    top: 0;
    }
  4. Tambahkan kode HTML berikut diatas atau dibawah <div id='header-wrapper'> atau bisa juga anda tambahkan pada bagian elemen halaman sebagai widget
    <div class='animatedtabs'>
    <ul>
    <li><a href='http://blog-u.blogspot.com' title='Home'><span>Home</span></a></li>
    <li><a href='http://creatingwebsite-link-blog.blogspot.com/search/label/tutorial blog' title='tutorial blog'><span>Tutorial Blog</span></a></li>
    <li><a href='http://link-blog.blogspot.com/search/label/SEO' title='SEO'><span>SEO</span></a></li>
    <li><a href='http://link-blog.blogspot.com/search/label/wordpress' title='wordpress'><span>Wordpress</span></a></li>
    <li><a href='http://link-blog.blogspot.com/search/label/affiliate' title='affiliate'><span>Affiliate</span></a></li> 
    <li><a href='http://link-blog.com/search/label/hosting' title='hosting'><span>Hosting</span></a></li>
    </ul>
    </div>
  5. Simpan template dan lihat hasilnya.
Itu dulu ya teman, maaf kalau tulisannya ada yang salah karena udah ngantuk banget nih. selamat malam dan semoga mimpi indah

Membuat Effect JQuery Link Nudging di Blog

Membuat Effect JQuery Link Nudging di Blog

Membuat Effect JQuery Link Nudging di Blog

Image result for jquery

K
ali ini kembali saya akan memberikan penjelasan kepada temen-temen dalam memodifikasi tampilan link di blog. kali ini saya akan menjelaskan cara menambahkan efek jQuery nudging link. JQuery link nudging adalah effect animasi pada link hasil dari penambahan padding kiri, effect ini akan nampak saat kita menyentuhkan pointer/mouse  pada link, link akan bergerak kekanan atau bergoyang.

Membuat Effect JQuery Link Nudging di Blog


Untuk contoh dari efek jQuery nudging ini bisa anda lihat disini. Klik salah satu label yang ada pada sidebar blog demo itu. Jika temen-temen tertarik, langsung saja saya akan berikan penjelasannya :
  1. Login ke blogger dengan akun anda 
  2. Kemudian pada dasbor  klik Rancangan >> Edit HTML
  3. Tambahkan Script JQuery berikut diatas kode </head>
    1. <script  type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"  ></script>  
    Catatan : Jika anda sudah memasukkan script JQuery diatas, langkah ketiga bisa anda abaikan
  4. Setelah itu tambahkan lagi script berikut dibawah script JQuery tadi:
    1. <script type='text/javascript'>          
    2. $(document).ready(function()  {           
    3. $(&#39;#Label1 li&#39;).hover(function() {  //mouse in           
    4. $(this).animate({ marginLeft:  &#39;12px&#39; }, 400);           
    5. }, function() { //mouse out            
    6. $(this).animate({ marginLeft: 0 }, 400);           
    7. });            
    8. });           
    9. </script><!-- end LinkNudging -->  
  5. Terakhir Save Template anda, dan lihat hasilnya
Itu tadi tutorial kali ini, jika ada pertanyaan teman-teman bisa isi kotak komentar di bawah. Selamat mencoba dan semoga bermanfaat