cara membuat halaman admin ibarat di wordpress pada blogger

cara membuat halaman admin menyerupai di wordpress pada blogger

Hallo selamat sore sahabar PerampokGoogle sudah pada berdiri belum ? Hmm jangan kebanyakan begadang ya nanti atit hhahahahaha, Sore ini aku ada Tutorial cantik ne buat edit tampilan blogger sobat semua jadi lebih profesional.

Bagaimana tidak dengan memasang tampilan menyerupai ini teman jadi tidak akan kesusahan lagi dalam melaksanakan aktivitas blogger sobat. Kaprikornus kali ini aku akan kasih tips 'Bagaimana cara memasang atau membuat halaman admin menyerupai di wordpress pada blogger'  Tertarik untuk mencoba ?

Jika belum tertarik coba lihat gambar dibawah ini, Setelah blogger di tambah halaman admin nya pasti tertarik buat, Menerapkan nya diblogger teman masing masing

Pertama mari kita lihat halaman admin wordpress !

Sudah tentu ramah seo dan friendlykan bagi admin blog nya , Bagaimana jikalau tampilan admin blogger juga menyerupai itu ? Silahkan lihat dibawah nanti akan jadi menyerupai ini.

Gimana cakepkan sekarang bab bagaimana cara memasangnya di template blogger teman masing masing, Langsung dipraktekin ya jangan cuma dibaca doang.

Langkah pemasang halaman admin menyerupai wordpress di blogger :

1. Login ke dashboard blogger https://www.blogger.com
2. Pilih menu Template
3. Klik Edit HTML
4. Cari isyarat </style> atau ]]></b:skin> terus letakan isyarat css dibawah ini sempurna diatasnya.

.admin-controll,.admin-controll * {     margin: 0;     padding: 0;     list-style: none;     list-style-type: none;     line-height: 1.0; } .admin-controll ul {     position: absolute;     top: -999em;     width: 100%; } .admin-controll ul li {     width: 100%;     background: 333333; } .admin-controll li:hover {     visibility: inherit; } .admin-controll li {     float: left;     position: relative; } .admin-controll a {     display: block;     position: relative; } .admin-controll li:hover ul,.admin-controll li.sfHover ul {     left: 0;     top: 100%;     z-index: 99; } .admin-controll li:hover li ul,.admin-controll li.sfHover li ul {     top: -999em; } .admin-controll li li:hover ul,.admin-controll li li.sfHover ul {     left: 100%;     top: 0; } .admin-controll li li:hover li ul,.admin-controll li li.sfHover li ul {     top: -999em; } .admin-controll li li li:hover ul,.admin-controll li li li.sfHover ul {     left: 100%;     top: 0; } .mbl-admin-bar {     margin: 0px;     direction: ltr;     color: #ccc;     font: 400 13px/32px "Open Sans",sans-serif;     height: 32px;     position: fixed;     top: 0;     left: 0;     width: 100%;     min-width: 600px;     z-index: 99999;     background: #222;     float: left; } .mbl-admin-bar li a {     display: block;     color: #fff;     padding: 7px 15px;     font-weight: 400;     text-decoration: none;     font-size: 14px; } .mbl-admin-bar li li a {     font-size: 15px;     color: #fff;     float: none;     padding: 0px;     width: 0; } ul.children {     color: #fff;     background: #333333;     font-size: 18px;     min-width: 230px;     padding: 10px;     float: right;     margin-left: -98px; } .mbl-admin-bar li a:hover,.mbl-admin-bar li a:active,.mbl-admin-bar li a:focus,.mbl-admin-bar li:hover > a,.mbl-admin-bar li.current-cat > a,.mbl-admin-bar li.current_page_item > a,.mbl-admin-bar li.current-menu-item > a {     color: #38b8f0;     background: #333333; } .fa {     font-size: 18px;     color: #999;     margin-right: 5px; } .fa.fa-user {     font-size: 50px;     float: left;     padding: 20px;     border: 1px solid #212121;     background: #575757; } ul.children img {     width: 80px;     height: auto;     float: left;     margin-right: 10px; } ul.children a {     margin-top: 10px; } li.mright {     float: right; } li.mblogo a {     padding: 3px 15px 3px 15px!important; } ul.child1 {     min-width: 180px;     color: #fff;  background: #333333; } ul.child1 li a {     padding: 10px;     width: 100%;     background: #333333; } 

Kemudian letakan isyarat dibawah ini sempurna diatas isyarat pada template teman masing masing.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/> <link href='http://fonts.googleapis.com/css?family=Open Sans:400' rel='stylesheet' type='text/css'/>  <span class='item-control blog-admin'> <div class='span-24'> <div class='mbl-cpanel'> <ul class='admin-controll mbl-admin-bar'>   <li class='mblogo'><a href='http://www.perampokgoogle.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVt53syw_6f6vc3CqilQNziHY1NAm3xvO2Dd9YqpgeNQ-9snb0U_zVoEuSjuh0nwOiAYn9LxBnPRzto94edaFUfjeNn8Ty9C0O3mgx3aMb3ys8Pw_K8hT1j7kI1RTpxiY_3HWck0JoBqg/s1600/v.pn'/></a></li>   <li class='blog-title'><a expr:href='data:blog.homepageUrl'><i class='fa fa-tachometer'/> <data:blog.title/></a></li> <li><a href='http://www.blogger.com/home'><i class='fa fa-puzzle-piece'/> Dashboard</a></li>    <li><a href='#'><i class='fa fa-pencil'/> Posting</a> <ul class='child1'>   <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/src=sidebar&quot;'><i class='fa fa-pencil'/> New Post</a></li> <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/target=page&quot;'><i class='fa fa-file'/> New Page</a></li> <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#posts&quot;'><i class='fa fa-th-list'/> All Posts</a></li> <li><a expr:href='&quot;https://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#editor/target=post;postID=&quot; + data:blog.postId + &quot;&quot;'><i class='fa fa-pencil-square'/>Edit Post</a></li>   </ul> </li>   <li><a href='#'><i class='fa fa-cogs'/> Customize</a> <ul class='child1'> <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#pageelements&quot;'><i class='fa fa-wrench'/> Layout</a></li> <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#templatehtml&quot;'><i class='fa fa-pencil-square-o'/> Edit Template</a></li>   </ul> </li> <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#comments&quot;'><i class='fa fa-comment'/> Comments</a> <ul class='child1'> <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#pendingcomments&quot;'><i class='fa fa-bullhorn'/> Pending Comments</a></li> <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#spamcomments&quot;'><i class='fa fa-ban'/> Spam Comments</a></li>   </ul> </li>  <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#basicsettings&quot;'><i class='fa fa-cog'/> Settings</a> <ul class='child1'> <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#basicsettings&quot;'><i class='fa fa-heart-o'/> Basics</a></li> <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#postandcommentsettings&quot;'><i class='fa fa-comments'/> Post &amp; Comments</a></li> <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#emailandmobilesettings&quot;'><i class='fa fa-mobile'/> Mobile &amp; Email</a></li> <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#languageandformattingsettings&quot;'><i class='fa fa-calendar-o'/> Language</a></li> <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#searchsettings&quot;'><i class='fa fa-search-plus'/> Search Preference</a></li> <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#othersettings&quot;'><i class='fa fa-code'/> Other</a></li> <li><a expr:href='&quot;http://www.blogger.com/blogger.g?blogID=&quot; + data:blog.blogId + &quot;#overviewstats&quot;'><i class='fa fa-signal'/>Stats</a></li>   </ul> </li>  <li class='mright'><a href='#'><i class='fa fa-signal'/> Howdy, Admin</a> <ul class='children'> <li><img src='https://lh6.googleusercontent.com/-Vbzn7Tzt-1c/AAAAAAAAAAI/AAAAAAAAH5Q/fOoNkkMgSYE/s512-c/photo.jpg'/> <div class='mauthor'><br/>PerampokGoogle</div> <a href='http://www.blogger.com/logout.g'> Logout</a></li> </ul> </li> </ul> </div> </div> </span>

Sekarang save template dan lihat karenanya keren bukan jangan lupa komentar jikalau ada problem hati eeeh problem tutorial diatas ini hahahahahaa ^_^

Love u All. . .

Tweet